From a83b8323032b1eaf67eb1ad19e975abe650bebbb Mon Sep 17 00:00:00 2001 From: "NENO\\kadoo" Date: Tue, 30 Jan 2024 11:00:31 +0100 Subject: [PATCH] css shadow fix --- dist/asset-manifest.json | 6 +++--- dist/index.html | 2 +- dist/static/css/main.8e04239f.css | 2 ++ dist/static/css/main.8e04239f.css.map | 1 + dist/static/css/main.ffcbce6f.css | 2 -- dist/static/css/main.ffcbce6f.css.map | 1 - src/sass/_aside.scss | 3 +++ src/sass/_layout.scss | 3 +++ src/sass/_reset.scss | 2 +- 9 files changed, 14 insertions(+), 8 deletions(-) create mode 100644 dist/static/css/main.8e04239f.css create mode 100644 dist/static/css/main.8e04239f.css.map delete mode 100644 dist/static/css/main.ffcbce6f.css delete mode 100644 dist/static/css/main.ffcbce6f.css.map diff --git a/dist/asset-manifest.json b/dist/asset-manifest.json index a80ea73..70897f8 100644 --- a/dist/asset-manifest.json +++ b/dist/asset-manifest.json @@ -1,13 +1,13 @@ { "files": { - "main.css": "./static/css/main.ffcbce6f.css", + "main.css": "./static/css/main.8e04239f.css", "main.js": "./static/js/main.6cd242a8.js", "index.html": "./index.html", - "main.ffcbce6f.css.map": "./static/css/main.ffcbce6f.css.map", + "main.8e04239f.css.map": "./static/css/main.8e04239f.css.map", "main.6cd242a8.js.map": "./static/js/main.6cd242a8.js.map" }, "entrypoints": [ - "static/css/main.ffcbce6f.css", + "static/css/main.8e04239f.css", "static/js/main.6cd242a8.js" ] } \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index 90690a4..32fe5c9 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1 +1 @@ -Ľuboš Kadaši
\ No newline at end of file +Ľuboš Kadaši
\ No newline at end of file diff --git a/dist/static/css/main.8e04239f.css b/dist/static/css/main.8e04239f.css new file mode 100644 index 0000000..7ca1f9a --- /dev/null +++ b/dist/static/css/main.8e04239f.css @@ -0,0 +1,2 @@ +:root{--primary-color:#000;--secondary-color:#fff;--brand-primary-color:#393839;--brand-secondary-color:#5590cc;--link-color:#3498db;--link-color-active:#eec223;--link-color-active-alternative:#e74c3c}*,:after,:before{box-sizing:border-box}body,html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;margin:0;padding:0;scroll-behavior:smooth}@media print{body,html{color:#000!important;font-size:10pt}}body{background-color:#fff;background-color:var(--secondary-color);color:#000;color:var(--primary-color);font-size:1.15rem;transition:background-color .2s ease}h1{font-size:4rem}h1,h2{font-weight:400;margin-top:0}h2{font-size:3.75rem}a{color:#007bff;color:#3498db;color:var(--link-color);text-decoration:none}a:hover{text-decoration:underline}@media print{a{color:#000}}.app{display:grid;grid-template-areas:"main nav" "aside aside";grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content}@media(min-width:768px){.app{grid-template-areas:"nav main aside";grid-template-columns:-webkit-min-content auto -webkit-min-content;grid-template-columns:min-content auto min-content}}html{min-height:100%;scroll-behavior:smooth;scroll-snap-type:y mandatory}body,html{align-content:stretch;display:grid}body{margin:0 auto;max-width:1366px;width:100%}#root{align-content:stretch;display:grid}.nav{align-self:start;grid-area:nav;position:-webkit-sticky;position:sticky;top:0}.main{border-right:1px solid #000;border-right:1px solid var(--primary-color);grid-area:main}@media(min-width:768px){.main{border-left:1px solid #000;border-left:1px solid var(--primary-color);border-right:none}}@media print{.main{border:none}}.main section{flex-direction:row;min-height:100vh;scroll-snap-align:start}@media print{.main section{min-height:auto}}.main .scroll-observer{border-left:5px solid red;margin:0 0 1rem}.aside{align-self:start;grid-area:aside}.fg-shadow{background:linear-gradient(0deg,#fff,#0000 7%,#0000 93%,#fff);background:linear-gradient(to top,var(--secondary-color),#0000 7%,#0000 93%,var(--secondary-color));height:100vh;left:0;pointer-events:none;position:fixed;top:0;transition:background-color .2s ease;width:100%;z-index:10000}@media print{.fg-shadow{display:none}}section{max-width:80ch;padding:2rem 1.5rem 60vh}@media(min-width:768px){section{padding:2rem 3rem 90vh}}@media print{section{max-width:none;padding-bottom:0}section article{display:flex;line-height:1.125em}}section h2{text-align:center}@media print{section h2{font-size:18pt;min-width:4em;padding-right:2rem;text-align:right;white-space:nowrap}}section h2 i{display:inline-block;font-style:normal;margin-left:.25rem;margin-top:13pt}section h3{margin-top:0}section :target{animation:highlightText .33s ease-in-out;animation-delay:1s;animation-iteration-count:3;padding-top:7rem;position:relative;-webkit-text-decoration:underline .1em wavy #eec223;text-decoration:underline .1em wavy #eec223;-webkit-text-decoration:underline .1em wavy var(--link-color-active);text-decoration:underline .1em wavy var(--link-color-active);z-index:-1}@keyframes highlightText{0%{color:#000;color:var(--primary-color)}50%{color:#eec223;color:var(--link-color-active)}to{color:#000;color:var(--primary-color)}}.nav{display:flex;flex-direction:column;max-height:100vh;overflow:auto;padding:1.5rem 0;text-align:center}@media(min-width:768px){.nav{padding:3rem 0;text-align:right}}@media print{.nav{display:none}}.nav a{color:rgba(#000,.55);color:rgba(var(--primary-color),.55);font-size:2.25rem;order:1;padding:.45rem 1.15rem;position:relative;text-decoration:none;transition:all .3s}@media(min-width:768px){.nav a{font-size:3rem;padding:.35rem 2.5rem .35rem 3rem}}.nav a:hover{color:rgba(#000,1.75);color:rgba(var(--primary-color),1.75)}.nav a.in-view{color:rgba(#000,1);color:rgba(var(--primary-color),1)}.nav a.in-view:after{border:.5rem solid #0000;border-left:.5rem solid var(--primary-color);content:"";display:block;height:1rem;left:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .3s;width:1rem;z-index:10}@media(min-width:768px){.nav a.in-view:after{border-left-color:#0000;border-right-color:#000;border-right-color:var(--primary-color);left:auto;right:0}}.nav a span{display:none}@media(min-width:992px){.nav a span{display:inline}}.nav a i{display:none}.nav::-webkit-scrollbar{display:none}.nav{-ms-overflow-style:none;scrollbar-width:none}.aside{align-items:flex-end;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);display:flex;flex-direction:column;height:100%;justify-content:center;max-height:100vh;overflow:auto;padding:3rem 2rem;position:fixed;top:calc(100% + 5rem);transition:top .3s;width:100%;z-index:10005}.aside::-webkit-scrollbar{display:none}.aside{-ms-overflow-style:none;scrollbar-width:none}@media(min-width:768px){.aside{-webkit-backdrop-filter:none;backdrop-filter:none;display:block;height:auto;position:-webkit-sticky;position:sticky;top:0}}@media print{.aside{display:none}}.aside:before{background-color:#fff;background-color:var(--secondary-color);bottom:0;content:"";left:0;opacity:.55;position:absolute;right:0;top:0;z-index:-1}@media(min-width:768px){.aside:before{display:none}}.aside:target{top:0}.aside a{display:inline-block;font-size:1.55rem;margin-right:.5rem;white-space:no-wrap}@media(min-width:768px){.aside a{font-size:1.25rem}}.aside a:before{content:"#"}.theme-switch{display:block;height:1.5rem;margin:auto;position:relative;width:1.5rem}.theme-switch input{display:none}.theme-switch .switch{background-color:#fff;background-color:var(--secondary-color);border-radius:1rem;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s}.theme-switch .switch:before{background-color:#000;background-color:var(--primary-color);border-radius:50%;bottom:.1rem;content:"";height:1.3rem;left:.4rem;position:absolute;width:1.3rem}.theme-switch input:checked+.switch{background-color:#fff;background-color:var(--secondary-color)}.theme-switch input:checked+.switch:before{background-color:#0000;border:.15rem dotted #fff;border:.15rem dotted var(--secondary-color);bottom:-.15rem;height:1.8rem;left:-.15rem;width:1.8rem}.overlay-tools{align-items:center;background-color:#000;background-color:var(--primary-color);bottom:1rem;box-shadow:0 0 1rem #00000080;justify-content:center;padding:.75rem 1rem;position:fixed;z-index:10005}@media(min-width:768px){.overlay-tools{padding:1rem;z-index:10010}}@media print{.overlay-tools{display:none}}.overlay-tools--left{border-radius:0 2rem 2rem 0;left:0}.overlay-tools--right{border-radius:2rem 0 0 2rem;right:0}a.toggle-tags{color:#3498db;color:var(--link-color);font-size:3.25rem;order:0}@media(min-width:768px){a.toggle-tags{display:none}}.github svg{display:block;height:1.65rem;width:1.65rem}@media print{.noprint{display:none!important}} +/*# sourceMappingURL=main.8e04239f.css.map*/ \ No newline at end of file diff --git a/dist/static/css/main.8e04239f.css.map b/dist/static/css/main.8e04239f.css.map new file mode 100644 index 0000000..d5060c3 --- /dev/null +++ b/dist/static/css/main.8e04239f.css.map @@ -0,0 +1 @@ +{"version":3,"file":"static/css/main.8e04239f.css","mappings":"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","sources":["sass/_variables.scss","sass/_reset.scss","sass/_mixins.scss","sass/_layout.scss","sass/_app.scss","sass/_nav.scss","sass/_aside.scss","sass/_components.scss"],"sourcesContent":[":root{\r\n --primary-color: #000;\r\n --secondary-color: #fff;\r\n --brand-primary-color: #393839;\r\n --brand-secondary-color: #5590cc;\r\n --link-color: #3498db;\r\n --link-color-active: #eec223;\r\n --link-color-active-alternative: #e74c3c;\r\n}","*{\r\n box-sizing: border-box;\r\n &::before, &::after{\r\n box-sizing: border-box;\r\n }\r\n}\r\n\r\nhtml, body{\r\n padding: 0;\r\n margin: 0;\r\n font-family: -apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";\r\n scroll-behavior: smooth;\r\n @include print{\r\n font-size: 10pt;\r\n color: #000000 !important;\r\n }\r\n}\r\n\r\nbody{\r\n transition: background-color 0.2s ease;\r\n background-color: var(--secondary-color);\r\n color: var(--primary-color);\r\n font-size: 1.15rem;\r\n}\r\n\r\nh1{\r\n font-size: 4rem;\r\n font-weight: 400;\r\n margin-top: 0;\r\n}\r\n\r\nh2{\r\n font-size: 3.75rem;\r\n font-weight: 400;\r\n margin-top: 0;\r\n}\r\n\r\na{\r\n color: #007bff;\r\n color: #3498db;\r\n color: var(--link-color);\r\n text-decoration: none;\r\n &:hover{\r\n text-decoration: underline;\r\n }\r\n @include print{\r\n color: #000000;\r\n }\r\n}","$tablet-width: 768px;\r\n$desktop-width: 992px;\r\n$desktoplg-width: 1366px;\r\n\r\n@mixin tablet{\r\n @media (min-width: #{$tablet-width}){\r\n @content;\r\n }\r\n}\r\n\r\n@mixin desktop{\r\n @media (min-width: #{$desktop-width}){\r\n @content;\r\n }\r\n}\r\n\r\n@mixin desktoplg{\r\n @media (min-width: #{$desktoplg-width}){\r\n @content;\r\n }\r\n}\r\n\r\n@mixin print{\r\n @media print{\r\n @content;\r\n }\r\n}",".app{\r\n display: grid;\r\n grid-template-columns: auto min-content;\r\n grid-template-areas: \r\n \"main nav\"\r\n \"aside aside\";\r\n @include tablet{\r\n grid-template-columns: min-content auto min-content;\r\n grid-template-areas: \"nav main aside\";\r\n }\r\n}\r\n\r\nhtml{\r\n min-height: 100%;\r\n display: grid;\r\n align-content: stretch;\r\n scroll-snap-type: y mandatory;\r\n scroll-behavior: smooth;\r\n}\r\n\r\nbody{\r\n display: grid;\r\n align-content: stretch;\r\n width: 100%;\r\n max-width: 1366px;\r\n margin: 0 auto;\r\n}\r\n\r\n#root{\r\n display: grid;\r\n align-content: stretch;\r\n}\r\n\r\n.nav{\r\n grid-area: nav;\r\n align-self: start;\r\n position: sticky;\r\n top: 0;\r\n}\r\n\r\n.main{\r\n grid-area: main;\r\n border-right: 1px solid var(--primary-color);\r\n @include tablet{\r\n border-left: 1px solid var(--primary-color);\r\n border-right: none;\r\n }\r\n @include print{\r\n border: none;\r\n }\r\n section{\r\n scroll-snap-align: start;\r\n min-height: 100vh;\r\n flex-direction: row;\r\n @include print{\r\n min-height: auto;\r\n }\r\n }\r\n .scroll-observer{\r\n border-left: 5px solid red;\r\n margin: 0 0 1rem 0;\r\n }\r\n}\r\n \r\n.aside{\r\n grid-area: aside;\r\n align-self: start;\r\n}\r\n\r\n.fg-shadow{\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100vh;\r\n z-index: 10000;\r\n pointer-events: none;\r\n background: linear-gradient(to top, var(--secondary-color), transparent 7%, transparent 93%, var(--secondary-color));\r\n transition: background-color 0.2s ease;\r\n @include print{\r\n display: none;\r\n }\r\n}\r\n\r\n","section{\r\n padding: 2rem 1.5rem 60vh;\r\n max-width: 80ch;\r\n @include tablet{\r\n padding: 2rem 3rem 90vh;\r\n }\r\n @include print{\r\n padding-bottom: 0;\r\n max-width: none;\r\n }\r\n article{\r\n @include print{\r\n display: flex;\r\n line-height: 1.125em;\r\n }\r\n }\r\n h2{\r\n text-align: center;\r\n @include print{\r\n text-align: right;\r\n font-size: 18pt;\r\n white-space: nowrap;\r\n padding-right: 2rem;\r\n min-width: 4em;\r\n }\r\n i{\r\n font-style: normal;\r\n display: inline-block;\r\n margin-left: .25rem;\r\n margin-top: 13pt;\r\n }\r\n }\r\n h3{\r\n margin-top: 0;\r\n }\r\n :target{\r\n padding-top: 7rem;\r\n animation: highlightText .33s ease-in-out; /* Animation properties */\r\n animation-delay: 1s;\r\n animation-iteration-count: 3;\r\n z-index: -1;\r\n position: relative;\r\n text-decoration: underline .1em wavy var(--link-color-active);\r\n }\r\n}\r\n\r\n@keyframes highlightText{\r\n 0%{\r\n color: var(--primary-color);\r\n }\r\n 50%{\r\n color: var(--link-color-active);\r\n }\r\n 100%{\r\n color: var(--primary-color);\r\n }\r\n}",".nav{\r\n display: flex;\r\n flex-direction: column;\r\n padding: 1.5rem 0;\r\n text-align: center;\r\n max-height: 100vh;\r\n overflow: auto;\r\n @include tablet{\r\n text-align: right;\r\n padding: 3rem 0;\r\n }\r\n @include print{\r\n display: none;\r\n }\r\n a{\r\n text-decoration: none;\r\n color: rgba($color: var(--primary-color), $alpha: 0.55);\r\n font-size: 2.25rem;\r\n padding: .45rem 1.15rem .45rem 1.15rem;\r\n position: relative;\r\n transition: all .3s;\r\n order: 1;\r\n @include tablet{\r\n font-size: 3rem;\r\n padding: .35rem 2.5rem .35rem 3rem;\r\n }\r\n &:hover{\r\n color: rgba($color: var(--primary-color), $alpha: 1.75);\r\n }\r\n &.in-view{\r\n color: rgba($color: var(--primary-color), $alpha: 1.0);\r\n &::after{\r\n content:\"\";\r\n display: block;\r\n position: absolute;\r\n left: 0;\r\n width: 1rem;\r\n height: 1rem;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n border-width: .5rem;\r\n border-style: solid;\r\n border-color: transparent;\r\n border-left-color: var(--primary-color);\r\n z-index: 10;\r\n transition: all .3s;\r\n @include tablet{\r\n right: 0;\r\n left: auto;\r\n border-left-color: transparent;\r\n border-right-color: var(--primary-color);\r\n }\r\n }\r\n }\r\n span{\r\n display: none;\r\n @include desktop{\r\n display: inline;\r\n }\r\n }\r\n i{\r\n display: none;\r\n }\r\n }\r\n /* Hide scrollbar for Chrome, Safari and Opera */\r\n &::-webkit-scrollbar{\r\n display: none;\r\n }\r\n \r\n /* Hide scrollbar for IE, Edge and Firefox */\r\n &{\r\n -ms-overflow-style: none; /* IE and Edge */\r\n scrollbar-width: none; /* Firefox */\r\n }\r\n}",".aside{\r\n top: calc(100% + 5rem);\r\n position: fixed;\r\n z-index: 10005;\r\n transition: top .3s;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end;\r\n justify-content: center;\r\n padding: 3rem 2rem;\r\n width: 100%;\r\n height: 100%;\r\n overflow: auto;\r\n backdrop-filter: blur(15px);\r\n max-height: 100vh;\r\n /* Hide scrollbar for Chrome, Safari and Opera */\r\n &::-webkit-scrollbar{\r\n display: none;\r\n }\r\n \r\n /* Hide scrollbar for IE, Edge and Firefox */\r\n &{\r\n -ms-overflow-style: none; /* IE and Edge */\r\n scrollbar-width: none; /* Firefox */\r\n }\r\n @include tablet{\r\n position: sticky;\r\n display: block;\r\n height: auto;\r\n top: 0;\r\n backdrop-filter: none;\r\n }\r\n @include print{\r\n display: none;\r\n }\r\n &:before{\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n background-color: var(--secondary-color);\r\n opacity: .55;\r\n z-index: -1;\r\n @include tablet{\r\n display: none;\r\n }\r\n }\r\n &:target{\r\n top: 0;\r\n }\r\n a{\r\n font-size: 1.55rem;\r\n display: inline-block;\r\n margin-right: .5rem;\r\n @include tablet{\r\n font-size: 1.25rem;\r\n }\r\n &::before{\r\n content: \"#\"\r\n }\r\n white-space: no-wrap;\r\n }\r\n}",".theme-switch {\r\n position: relative;\r\n display: block;\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n margin: auto;\r\n input {\r\n display: none;\r\n }\r\n .switch {\r\n position: absolute;\r\n cursor: pointer;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: var(--secondary-color);\r\n transition: 0.4s;\r\n border-radius: 1rem;\r\n }\r\n \r\n .switch:before {\r\n position: absolute;\r\n content: '';\r\n height: 1.3rem;\r\n width: 1.3rem;\r\n left: .4rem;\r\n bottom: .1rem;\r\n background-color: var(--primary-color);\r\n border-radius: 50%;\r\n }\r\n \r\n input:checked + .switch {\r\n background-color: var(--secondary-color);\r\n }\r\n \r\n input:checked + .switch:before {\r\n height: 1.8rem;\r\n width: 1.8rem;\r\n left: -.15rem;\r\n bottom: -.15rem;\r\n border: .15rem dotted var(--secondary-color);\r\n background-color: transparent;\r\n }\r\n}\r\n\r\n.overlay-tools{\r\n position: fixed;\r\n justify-content: center;\r\n align-items: center;\r\n padding: .75rem 1rem;\r\n background-color: var(--primary-color);\r\n bottom: 1rem;\r\n box-shadow: 0 0 1rem rgba($color: #000000, $alpha: 0.5);\r\n z-index: 10005;\r\n @include tablet{\r\n z-index: 10010;\r\n padding: 1rem;\r\n }\r\n @include print{\r\n display: none;\r\n }\r\n &--left{\r\n border-radius: 0 2rem 2rem 0;\r\n left: 0;\r\n }\r\n &--right{\r\n right: 0;\r\n border-radius: 2rem 0 0 2rem;\r\n }\r\n}\r\n\r\na.toggle-tags{\r\n font-size: 3.25rem;\r\n color: var(--link-color);\r\n order: 0;\r\n @include tablet{\r\n display: none;\r\n }\r\n}\r\n\r\n.github{\r\n svg{\r\n display: block;\r\n height: 1.65rem;\r\n width: 1.65rem;\r\n }\r\n}\r\n\r\n.noprint{\r\n @include print{\r\n display: none !important;\r\n }\r\n}"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/dist/static/css/main.ffcbce6f.css b/dist/static/css/main.ffcbce6f.css deleted file mode 100644 index 86ac1b4..0000000 --- a/dist/static/css/main.ffcbce6f.css +++ /dev/null @@ -1,2 +0,0 @@ -:root{--primary-color:#000;--secondary-color:#fff;--brand-primary-color:#393839;--brand-secondary-color:#5590cc;--link-color:#3498db;--link-color-active:#eec223;--link-color-active-alternative:#e74c3c}*,:after,:before{box-sizing:border-box}body,html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;margin:0;padding:0;scroll-behavior:smooth}@media print{body,html{color:#000!important;font-size:10pt}}body{background-color:#fff;background-color:var(--secondary-color);color:#000;color:var(--primary-color);font-size:1.15rem;transition:background-color .3s ease}h1{font-size:4rem}h1,h2{font-weight:400;margin-top:0}h2{font-size:3.75rem}a{color:#007bff;color:#3498db;color:var(--link-color);text-decoration:none}a:hover{text-decoration:underline}@media print{a{color:#000}}.app{display:grid;grid-template-areas:"main nav" "aside aside";grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content}@media(min-width:768px){.app{grid-template-areas:"nav main aside";grid-template-columns:-webkit-min-content auto -webkit-min-content;grid-template-columns:min-content auto min-content}}html{min-height:100%;scroll-behavior:smooth;scroll-snap-type:y mandatory}body,html{align-content:stretch;display:grid}body{margin:0 auto;max-width:1366px;width:100%}#root{align-content:stretch;display:grid}.nav{align-self:start;grid-area:nav;position:-webkit-sticky;position:sticky;top:0}.main{border-right:1px solid #000;border-right:1px solid var(--primary-color);grid-area:main}@media(min-width:768px){.main{border-left:1px solid #000;border-left:1px solid var(--primary-color);border-right:none}}@media print{.main{border:none}}.main section{flex-direction:row;min-height:100vh;scroll-snap-align:start}@media print{.main section{min-height:auto}}.main .scroll-observer{border-left:5px solid red;margin:0 0 1rem}.aside{align-self:start;grid-area:aside}.fg-shadow{background:linear-gradient(0deg,#fff,#0000 7%,#0000 93%,#fff);background:linear-gradient(to top,var(--secondary-color),#0000 7%,#0000 93%,var(--secondary-color));height:100vh;pointer-events:none;position:fixed;width:100%;z-index:10000}@media print{.fg-shadow{display:none}}section{max-width:80ch;padding:2rem 1.5rem 60vh}@media(min-width:768px){section{padding:2rem 3rem 90vh}}@media print{section{max-width:none;padding-bottom:0}section article{display:flex;line-height:1.125em}}section h2{text-align:center}@media print{section h2{font-size:18pt;min-width:4em;padding-right:2rem;text-align:right;white-space:nowrap}}section h2 i{display:inline-block;font-style:normal;margin-left:.25rem;margin-top:13pt}section h3{margin-top:0}section :target{animation:highlightText .33s ease-in-out;animation-delay:1s;animation-iteration-count:3;padding-top:7rem;position:relative;-webkit-text-decoration:underline .1em wavy #eec223;text-decoration:underline .1em wavy #eec223;-webkit-text-decoration:underline .1em wavy var(--link-color-active);text-decoration:underline .1em wavy var(--link-color-active);z-index:-1}@keyframes highlightText{0%{color:#000;color:var(--primary-color)}50%{color:#eec223;color:var(--link-color-active)}to{color:#000;color:var(--primary-color)}}.nav{display:flex;flex-direction:column;max-height:100vh;overflow:auto;padding:1.5rem 0;text-align:center}@media(min-width:768px){.nav{padding:3rem 0;text-align:right}}@media print{.nav{display:none}}.nav a{color:rgba(#000,.55);color:rgba(var(--primary-color),.55);font-size:2.25rem;order:1;padding:.45rem 1.15rem;position:relative;text-decoration:none;transition:all .3s}@media(min-width:768px){.nav a{font-size:3rem;padding:.35rem 2.5rem .35rem 3rem}}.nav a:hover{color:rgba(#000,1.75);color:rgba(var(--primary-color),1.75)}.nav a.in-view{color:rgba(#000,1);color:rgba(var(--primary-color),1)}.nav a.in-view:after{border:.5rem solid #0000;border-left:.5rem solid var(--primary-color);content:"";display:block;height:1rem;left:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .3s;width:1rem;z-index:10}@media(min-width:768px){.nav a.in-view:after{border-left-color:#0000;border-right-color:#000;border-right-color:var(--primary-color);left:auto;right:0}}.nav a span{display:none}@media(min-width:992px){.nav a span{display:inline}}.nav a i{display:none}.nav::-webkit-scrollbar{display:none}.nav{-ms-overflow-style:none;scrollbar-width:none}.aside{align-items:flex-end;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);display:flex;flex-direction:column;height:100%;justify-content:center;max-height:100vh;overflow:auto;padding:3rem 2rem;position:fixed;top:calc(100% + 5rem);transition:top .3s;width:100%;z-index:10005}.aside::-webkit-scrollbar{display:none}.aside{-ms-overflow-style:none;scrollbar-width:none}@media(min-width:768px){.aside{-webkit-backdrop-filter:none;backdrop-filter:none;display:block;height:auto;position:-webkit-sticky;position:sticky;top:0}}@media print{.aside{display:none}}.aside:before{background-color:#fff;background-color:var(--secondary-color);bottom:0;content:"";left:0;opacity:.55;position:absolute;right:0;top:0;z-index:-1}.aside:target{top:0}.aside a{display:inline-block;font-size:1.55rem;margin-right:.5rem;white-space:no-wrap}@media(min-width:768px){.aside a{font-size:1.25rem}}.aside a:before{content:"#"}.theme-switch{display:block;height:1.5rem;margin:auto;position:relative;width:1.5rem}.theme-switch input{display:none}.theme-switch .switch{background-color:#fff;background-color:var(--secondary-color);border-radius:1rem;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s}.theme-switch .switch:before{background-color:#000;background-color:var(--primary-color);border-radius:50%;bottom:.1rem;content:"";height:1.3rem;left:.4rem;position:absolute;width:1.3rem}.theme-switch input:checked+.switch{background-color:#fff;background-color:var(--secondary-color)}.theme-switch input:checked+.switch:before{background-color:#0000;border:.15rem dotted #fff;border:.15rem dotted var(--secondary-color);bottom:-.15rem;height:1.8rem;left:-.15rem;width:1.8rem}.overlay-tools{align-items:center;background-color:#000;background-color:var(--primary-color);bottom:1rem;box-shadow:0 0 1rem #00000080;justify-content:center;padding:.75rem 1rem;position:fixed;z-index:10005}@media(min-width:768px){.overlay-tools{padding:1rem;z-index:10010}}@media print{.overlay-tools{display:none}}.overlay-tools--left{border-radius:0 2rem 2rem 0;left:0}.overlay-tools--right{border-radius:2rem 0 0 2rem;right:0}a.toggle-tags{color:#3498db;color:var(--link-color);font-size:3.25rem;order:0}@media(min-width:768px){a.toggle-tags{display:none}}.github svg{display:block;height:1.65rem;width:1.65rem}@media print{.noprint{display:none!important}} -/*# sourceMappingURL=main.ffcbce6f.css.map*/ \ No newline at end of file diff --git a/dist/static/css/main.ffcbce6f.css.map b/dist/static/css/main.ffcbce6f.css.map deleted file mode 100644 index d809d71..0000000 --- a/dist/static/css/main.ffcbce6f.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"static/css/main.ffcbce6f.css","mappings":"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","sources":["sass/_variables.scss","sass/_reset.scss","sass/_mixins.scss","sass/_layout.scss","sass/_app.scss","sass/_nav.scss","sass/_aside.scss","sass/_components.scss"],"sourcesContent":[":root{\r\n --primary-color: #000;\r\n --secondary-color: #fff;\r\n --brand-primary-color: #393839;\r\n --brand-secondary-color: #5590cc;\r\n --link-color: #3498db;\r\n --link-color-active: #eec223;\r\n --link-color-active-alternative: #e74c3c;\r\n}","*{\r\n box-sizing: border-box;\r\n &::before, &::after{\r\n box-sizing: border-box;\r\n }\r\n}\r\n\r\nhtml, body{\r\n padding: 0;\r\n margin: 0;\r\n font-family: -apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";\r\n scroll-behavior: smooth;\r\n @include print{\r\n font-size: 10pt;\r\n color: #000000 !important;\r\n }\r\n}\r\n\r\nbody{\r\n transition: background-color 0.3s ease;\r\n background-color: var(--secondary-color);\r\n color: var(--primary-color);\r\n font-size: 1.15rem;\r\n}\r\n\r\nh1{\r\n font-size: 4rem;\r\n font-weight: 400;\r\n margin-top: 0;\r\n}\r\n\r\nh2{\r\n font-size: 3.75rem;\r\n font-weight: 400;\r\n margin-top: 0;\r\n}\r\n\r\na{\r\n color: #007bff;\r\n color: #3498db;\r\n color: var(--link-color);\r\n text-decoration: none;\r\n &:hover{\r\n text-decoration: underline;\r\n }\r\n @include print{\r\n color: #000000;\r\n }\r\n}","$tablet-width: 768px;\r\n$desktop-width: 992px;\r\n$desktoplg-width: 1366px;\r\n\r\n@mixin tablet{\r\n @media (min-width: #{$tablet-width}){\r\n @content;\r\n }\r\n}\r\n\r\n@mixin desktop{\r\n @media (min-width: #{$desktop-width}){\r\n @content;\r\n }\r\n}\r\n\r\n@mixin desktoplg{\r\n @media (min-width: #{$desktoplg-width}){\r\n @content;\r\n }\r\n}\r\n\r\n@mixin print{\r\n @media print{\r\n @content;\r\n }\r\n}",".app{\r\n display: grid;\r\n grid-template-columns: auto min-content;\r\n grid-template-areas: \r\n \"main nav\"\r\n \"aside aside\";\r\n @include tablet{\r\n grid-template-columns: min-content auto min-content;\r\n grid-template-areas: \"nav main aside\";\r\n }\r\n}\r\n\r\nhtml{\r\n min-height: 100%;\r\n display: grid;\r\n align-content: stretch;\r\n scroll-snap-type: y mandatory;\r\n scroll-behavior: smooth;\r\n}\r\n\r\nbody{\r\n display: grid;\r\n align-content: stretch;\r\n width: 100%;\r\n max-width: 1366px;\r\n margin: 0 auto;\r\n}\r\n\r\n#root{\r\n display: grid;\r\n align-content: stretch;\r\n}\r\n\r\n.nav{\r\n grid-area: nav;\r\n align-self: start;\r\n position: sticky;\r\n top: 0;\r\n}\r\n\r\n.main{\r\n grid-area: main;\r\n border-right: 1px solid var(--primary-color);\r\n @include tablet{\r\n border-left: 1px solid var(--primary-color);\r\n border-right: none;\r\n }\r\n @include print{\r\n border: none;\r\n }\r\n section{\r\n scroll-snap-align: start;\r\n min-height: 100vh;\r\n flex-direction: row;\r\n @include print{\r\n min-height: auto;\r\n }\r\n }\r\n .scroll-observer{\r\n border-left: 5px solid red;\r\n margin: 0 0 1rem 0;\r\n }\r\n}\r\n \r\n.aside{\r\n grid-area: aside;\r\n align-self: start;\r\n}\r\n\r\n.fg-shadow{\r\n position: fixed;\r\n width: 100%;\r\n height: 100vh;\r\n z-index: 10000;\r\n pointer-events: none;\r\n background: linear-gradient(to top, var(--secondary-color), transparent 7%, transparent 93%, var(--secondary-color));\r\n @include print{\r\n display: none;\r\n }\r\n}\r\n\r\n","section{\r\n padding: 2rem 1.5rem 60vh;\r\n max-width: 80ch;\r\n @include tablet{\r\n padding: 2rem 3rem 90vh;\r\n }\r\n @include print{\r\n padding-bottom: 0;\r\n max-width: none;\r\n }\r\n article{\r\n @include print{\r\n display: flex;\r\n line-height: 1.125em;\r\n }\r\n }\r\n h2{\r\n text-align: center;\r\n @include print{\r\n text-align: right;\r\n font-size: 18pt;\r\n white-space: nowrap;\r\n padding-right: 2rem;\r\n min-width: 4em;\r\n }\r\n i{\r\n font-style: normal;\r\n display: inline-block;\r\n margin-left: .25rem;\r\n margin-top: 13pt;\r\n }\r\n }\r\n h3{\r\n margin-top: 0;\r\n }\r\n :target{\r\n padding-top: 7rem;\r\n animation: highlightText .33s ease-in-out; /* Animation properties */\r\n animation-delay: 1s;\r\n animation-iteration-count: 3;\r\n z-index: -1;\r\n position: relative;\r\n text-decoration: underline .1em wavy var(--link-color-active);\r\n }\r\n}\r\n\r\n@keyframes highlightText{\r\n 0%{\r\n color: var(--primary-color);\r\n }\r\n 50%{\r\n color: var(--link-color-active);\r\n }\r\n 100%{\r\n color: var(--primary-color);\r\n }\r\n}",".nav{\r\n display: flex;\r\n flex-direction: column;\r\n padding: 1.5rem 0;\r\n text-align: center;\r\n max-height: 100vh;\r\n overflow: auto;\r\n @include tablet{\r\n text-align: right;\r\n padding: 3rem 0;\r\n }\r\n @include print{\r\n display: none;\r\n }\r\n a{\r\n text-decoration: none;\r\n color: rgba($color: var(--primary-color), $alpha: 0.55);\r\n font-size: 2.25rem;\r\n padding: .45rem 1.15rem .45rem 1.15rem;\r\n position: relative;\r\n transition: all .3s;\r\n order: 1;\r\n @include tablet{\r\n font-size: 3rem;\r\n padding: .35rem 2.5rem .35rem 3rem;\r\n }\r\n &:hover{\r\n color: rgba($color: var(--primary-color), $alpha: 1.75);\r\n }\r\n &.in-view{\r\n color: rgba($color: var(--primary-color), $alpha: 1.0);\r\n &::after{\r\n content:\"\";\r\n display: block;\r\n position: absolute;\r\n left: 0;\r\n width: 1rem;\r\n height: 1rem;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n border-width: .5rem;\r\n border-style: solid;\r\n border-color: transparent;\r\n border-left-color: var(--primary-color);\r\n z-index: 10;\r\n transition: all .3s;\r\n @include tablet{\r\n right: 0;\r\n left: auto;\r\n border-left-color: transparent;\r\n border-right-color: var(--primary-color);\r\n }\r\n }\r\n }\r\n span{\r\n display: none;\r\n @include desktop{\r\n display: inline;\r\n }\r\n }\r\n i{\r\n display: none;\r\n }\r\n }\r\n /* Hide scrollbar for Chrome, Safari and Opera */\r\n &::-webkit-scrollbar{\r\n display: none;\r\n }\r\n \r\n /* Hide scrollbar for IE, Edge and Firefox */\r\n &{\r\n -ms-overflow-style: none; /* IE and Edge */\r\n scrollbar-width: none; /* Firefox */\r\n }\r\n}",".aside{\r\n top: calc(100% + 5rem);\r\n position: fixed;\r\n z-index: 10005;\r\n transition: top .3s;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end;\r\n justify-content: center;\r\n padding: 3rem 2rem;\r\n width: 100%;\r\n height: 100%;\r\n overflow: auto;\r\n backdrop-filter: blur(15px);\r\n max-height: 100vh;\r\n /* Hide scrollbar for Chrome, Safari and Opera */\r\n &::-webkit-scrollbar{\r\n display: none;\r\n }\r\n \r\n /* Hide scrollbar for IE, Edge and Firefox */\r\n &{\r\n -ms-overflow-style: none; /* IE and Edge */\r\n scrollbar-width: none; /* Firefox */\r\n }\r\n @include tablet{\r\n position: sticky;\r\n display: block;\r\n height: auto;\r\n top: 0;\r\n backdrop-filter: none;\r\n }\r\n @include print{\r\n display: none;\r\n }\r\n &:before{\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n background-color: var(--secondary-color);\r\n opacity: .55;\r\n z-index: -1;\r\n }\r\n &:target{\r\n top: 0;\r\n }\r\n a{\r\n font-size: 1.55rem;\r\n display: inline-block;\r\n margin-right: .5rem;\r\n @include tablet{\r\n font-size: 1.25rem;\r\n }\r\n &::before{\r\n content: \"#\"\r\n }\r\n white-space: no-wrap;\r\n }\r\n}",".theme-switch {\r\n position: relative;\r\n display: block;\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n margin: auto;\r\n input {\r\n display: none;\r\n }\r\n .switch {\r\n position: absolute;\r\n cursor: pointer;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: var(--secondary-color);\r\n transition: 0.4s;\r\n border-radius: 1rem;\r\n }\r\n \r\n .switch:before {\r\n position: absolute;\r\n content: '';\r\n height: 1.3rem;\r\n width: 1.3rem;\r\n left: .4rem;\r\n bottom: .1rem;\r\n background-color: var(--primary-color);\r\n border-radius: 50%;\r\n }\r\n \r\n input:checked + .switch {\r\n background-color: var(--secondary-color);\r\n }\r\n \r\n input:checked + .switch:before {\r\n height: 1.8rem;\r\n width: 1.8rem;\r\n left: -.15rem;\r\n bottom: -.15rem;\r\n border: .15rem dotted var(--secondary-color);\r\n background-color: transparent;\r\n }\r\n}\r\n\r\n.overlay-tools{\r\n position: fixed;\r\n justify-content: center;\r\n align-items: center;\r\n padding: .75rem 1rem;\r\n background-color: var(--primary-color);\r\n bottom: 1rem;\r\n box-shadow: 0 0 1rem rgba($color: #000000, $alpha: 0.5);\r\n z-index: 10005;\r\n @include tablet{\r\n z-index: 10010;\r\n padding: 1rem;\r\n }\r\n @include print{\r\n display: none;\r\n }\r\n &--left{\r\n border-radius: 0 2rem 2rem 0;\r\n left: 0;\r\n }\r\n &--right{\r\n right: 0;\r\n border-radius: 2rem 0 0 2rem;\r\n }\r\n}\r\n\r\na.toggle-tags{\r\n font-size: 3.25rem;\r\n color: var(--link-color);\r\n order: 0;\r\n @include tablet{\r\n display: none;\r\n }\r\n}\r\n\r\n.github{\r\n svg{\r\n display: block;\r\n height: 1.65rem;\r\n width: 1.65rem;\r\n }\r\n}\r\n\r\n.noprint{\r\n @include print{\r\n display: none !important;\r\n }\r\n}"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/src/sass/_aside.scss b/src/sass/_aside.scss index 654cdb1..abca8f2 100644 --- a/src/sass/_aside.scss +++ b/src/sass/_aside.scss @@ -43,6 +43,9 @@ background-color: var(--secondary-color); opacity: .55; z-index: -1; + @include tablet{ + display: none; + } } &:target{ top: 0; diff --git a/src/sass/_layout.scss b/src/sass/_layout.scss index 0cc8bd8..0a679a4 100644 --- a/src/sass/_layout.scss +++ b/src/sass/_layout.scss @@ -69,11 +69,14 @@ body{ .fg-shadow{ position: fixed; + top: 0; + left: 0; width: 100%; height: 100vh; z-index: 10000; pointer-events: none; background: linear-gradient(to top, var(--secondary-color), transparent 7%, transparent 93%, var(--secondary-color)); + transition: background-color 0.2s ease; @include print{ display: none; } diff --git a/src/sass/_reset.scss b/src/sass/_reset.scss index 15a31e9..ffc71d3 100644 --- a/src/sass/_reset.scss +++ b/src/sass/_reset.scss @@ -17,7 +17,7 @@ html, body{ } body{ - transition: background-color 0.3s ease; + transition: background-color 0.2s ease; background-color: var(--secondary-color); color: var(--primary-color); font-size: 1.15rem;