diff --git a/assets/built/critical.css b/assets/built/critical.css index 954be1a0..2eea1c09 100644 --- a/assets/built/critical.css +++ b/assets/built/critical.css @@ -1,3 +1,3 @@ -*,:after,:before{box-sizing:border-box;padding:0;margin:0}button{cursor:pointer;background:none;border:none}:root[color-mode=light]{--text:#0a0a0a;--textInverse:#f5f5f5;--text1:#171717;--text2:#39393a;--text3:#5a5a5c;--text4:#9ea0a2;--surface:#ebebeb;--surface1:#f0f0f0;--surface1-75:hsla(0,0%,94%,0.75);--surface2:#f5f5f5;--surface3:#fafafa;--surface4:#fff;--primary:#0d48a0;--secondary:#a4002e;--three:#643791;--four:#8b1c76;--five:#a00053;--success:#48a00d;--error:#a40000;--error-hover:#520000;--gradient:linear-gradient(to right top,#0d48a0,#643791,#8b1c76,#a00053,#a4002e);--gradient-reverse:linear-gradient(to left top,#0d48a0,#643791,#8b1c76,#a00053,#a4002e)}:root[color-mode=dark]{--text:#f5f5f5;--textInverse:#0a0a0a;--text1:#e8e9e9;--text2:#c6c6c7;--text3:#a5a5a7;--text4:#616365;--surface:#181818;--surface1:#202020;--surface1-75:rgba(33,33,33,0.75);--surface2:#282828;--surface3:#303030;--surface4:#383838;--primary:#80deea;--secondary:#ffab91;--three:#8cdbbf;--four:#b4d195;--five:#e0c081;--success:#b4d195;--error:#ff8f8f;--error-hover:#ff5c5c;--gradient:linear-gradient(to right top,#80deea,#8cdbbf,#b4d195,#e0c081,#ffab91);--gradient-reverse:linear-gradient(to left top,#80deea,#8cdbbf,#b4d195,#e0c081,#ffab91)}html{color:color(text);color:var(--text,color(text));background-color:color(surface1);background-color:var(--surface1,color(surface1));scroll-behavior:smooth}:link{text-decoration:none}:link,:visited{color:currentColor}::-moz-selection{color:#000;background-color:#cf0}::selection{color:#000;background-color:#cf0}:target{padding-top:3.25rem;margin-top:-3.25rem}@media(min-width:1024px){:target{padding-top:5.5rem;margin-top:5.5rem;margin-top:-5.5rem}}:focus{outline-width:1px;outline-style:dotted;outline-color:color(text3);outline-color:var(--text3,color(text3));outline-offset:3px}a:active,button:active{outline:none}::-moz-focus-inner{border:none;outline:none}html{font-size:1rem;font-size:clamp(1rem,.9090909090909091rem + .45454545454545453vw,1.25rem);font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}h1,h2,h3,h4,h5{margin:3rem 0 1.38rem;font-family:"DM Serif Text",georgia,serif;font-weight:400;font-feature-settings:"liga","clig";font-variant-ligatures:common-ligatures;line-height:1.2;font-display:optional}h1{margin-top:0;font-size:2.488rem}h2{font-size:2.074rem}h3{font-size:1.728rem}h4{font-size:1.44rem}h5{font-size:1.2rem}.sm-text-small,small{font-size:.833rem}@-webkit-keyframes popup{0%{opacity:0;transform:translate(-50%,20px) scale(.8)}75%{opacity:1}to{transform:translate(-50%) scale(1)}}@keyframes popup{0%{opacity:0;transform:translate(-50%,20px) scale(.8)}75%{opacity:1}to{transform:translate(-50%) scale(1)}}@-webkit-keyframes slide-in{0%{top:-100%;opacity:0}to{top:1rem;opacity:1}}@keyframes slide-in{0%{top:-100%;opacity:0}to{top:1rem;opacity:1}}@-webkit-keyframes slide-out{0%{top:1rem;opacity:1}to{top:-100%;opacity:0}}@keyframes slide-out{0%{top:1rem;opacity:1}to{top:-100%;opacity:0}}@-webkit-keyframes mesh{0%{background-position:0 0,0 100%,50% 0,50% 25%,50% 100%}15%{background-position:1% 1%,1% 101%,51% 1%,51% 26%,51% 101%}30%{background-position:2% 2%,2% 102%,52% 2%,52% 26%,52% 102%}45%{background-position:3% 3%,3% 103%,53% 3%,53% 27%,53% 103%}60%{background-position:4% 4%,4% 104%,54% 4%,54% 28%,54% 104%}75%{background-position:5% 5%,5% 105%,55% 5%,55% 29%,55% 105%}90%{background-position:6% 6%,6% 106%,56% 6%,56% 30%,56% 106%}}@keyframes mesh{0%{background-position:0 0,0 100%,50% 0,50% 25%,50% 100%}15%{background-position:1% 1%,1% 101%,51% 1%,51% 26%,51% 101%}30%{background-position:2% 2%,2% 102%,52% 2%,52% 26%,52% 102%}45%{background-position:3% 3%,3% 103%,53% 3%,53% 27%,53% 103%}60%{background-position:4% 4%,4% 104%,54% 4%,54% 28%,54% 104%}75%{background-position:5% 5%,5% 105%,55% 5%,55% 29%,55% 105%}90%{background-position:6% 6%,6% 106%,56% 6%,56% 30%,56% 106%}}.outer-container,.outer-container--footer{position:relative;width:100%;padding:1rem}@media(min-width:640px)and (max-width:1023px){.outer-container,.outer-container--footer{padding:1rem 3rem 2rem}}@media(min-width:1024px){.outer-container,.outer-container--footer{padding:1rem 4rem 2rem}}.outer-container--footer{min-height:250px;font-size:.9rem;background-color:color(surface);background-color:var(--surface,color(surface));color:color(text1);color:var(--text1,color(text1));border-bottom:none}.inner-container,.inner-container--author,.inner-container--footer{max-width:1024px;margin:0 auto 1rem}.inner-container--author{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:1rem}@media(min-width:640px){.inner-container--author{flex-direction:row}}.footer__section,.footer__section--latest{display:flex;flex-direction:column;padding:.5rem}.footer__section--latest{color:color(text1);color:var(--text1,color(text1))}.footer__section--latest:nth-child(3){padding-bottom:.5rem}.footer__section--latest:last-child{padding-top:0}.footer__section--latest:last-child>p:first-child{display:block}.footer__link{margin-bottom:.15rem}.footer__description{margin-bottom:.25rem;color:color(text2);color:var(--text2,color(text2))}.footer__date{margin-bottom:.25rem;font-size:.75rem;text-transform:uppercase;color:color(text3);color:var(--text3,color(text3))}.footer__title{width:100%;max-width:12rem;margin-bottom:1rem;color:color(text2);color:var(--text2,color(text2));transition:color .2s}.footer__title:hover{color:color(primary);color:var(--primary,color(primary))}.footer__header--serif{margin-bottom:.5rem;font-size:115%}.footer__social{display:grid;grid-gap:1rem;grid-template-columns:repeat(auto-fit,1rem);margin-top:.5rem;transition:all .2s}.footer__social a{width:1rem;height:1rem;margin:0}.footer__social svg{width:100%;height:100%;stroke:color(text2);stroke:var(--text2,color(text2));fill:color(text2);fill:var(--text2,color(text2))}.footer__card-tag{display:flex;align-items:center;color:color(text2);color:var(--text2,color(text2))}.footer__card-tag p{margin:0;text-transform:uppercase;transition:all .2s}.footer__card-tag svg{flex-shrink:0;align-self:flex-start;width:.9375rem;height:.9375rem;transform:translateY(.2em);stroke:color(text2);stroke:var(--text2,color(text2));stroke-width:2px;transition:all .2s}.footer__card-tag:active p,.footer__card-tag:hover p{color:color(secondary);color:var(--secondary,color(secondary));outline:none}.footer__card-tag:active svg,.footer__card-tag:hover svg{stroke:color(secondary);stroke:var(--secondary,color(secondary))}.footer__published-by-ghost{display:flex;align-items:center;justify-content:center;padding:.15rem;font-size:.8rem;color:color(text3);color:var(--text3,color(text3))}.menu__link{transition:color .2s}.menu__link:focus{outline:none;color:color(primary);color:var(--primary,color(primary))}.navbar{position:fixed;top:0;z-index:5;display:block;width:100%;font-size:.9rem;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);background-color:color(surface2);background-color:var(--surface2,color(surface2));transition:all .2s}.navbar__top{display:none;height:2.25rem;padding:.25rem 1rem;border-bottom:1px solid color(surface4);border-bottom-color:var(--surface4,color(surface4))}@media(min-width:1024px){.navbar__top{display:flex;align-items:center;justify-content:space-between;font-size:.8rem}}.navbar__top--left,.navbar__top--right{display:flex;align-items:center}.navbar__top--right button{margin-right:0}.navbar__new-tag{padding:.15em;margin-right:.35em;font-size:.85em;line-height:1;border-radius:4px;color:color(textInverse);color:var(--textInverse,color(textInverse));background-color:color(secondary);background-color:var(--secondary,color(secondary))}.navbar__new-link{font-size:.95em;line-height:1;transition:color .2s;color:color(text2);color:var(--text2,color(text2))}.navbar__new-link:hover{color:color(text);color:var(--text,color(text))}.navbar__bottom{display:flex;align-items:center;height:3.25rem;padding:.5rem 1rem}.navbar__bottom--center{display:none;margin-left:2rem}@media(min-width:1024px){.navbar__bottom--center{display:block}}.navbar__bottom div:last-child{margin-left:auto}.navbar__bottom--right{display:none;margin-left:auto}@media(min-width:1024px){.navbar__bottom--right{display:flex;align-items:center}}.navbar__bottom--right--mobile{margin:.5rem 0 0 auto;line-height:1.6}@media(min-width:1024px){.navbar__bottom--right--mobile{display:none}}.navbar__brand--serif{display:flex;align-items:center;font-family:"DM Serif Text",georgia,serif;font-size:1.25rem;font-weight:400;line-height:1.6}.navbar__brand--serif img{width:1.25rem;height:1.25rem;margin-right:.25rem}.navbar__signin,.navbar__signup{margin:.31rem .5rem 0 0;font-family:Lato,-apple-system,blinkmacsystemfont,Segoe UI,roboto,oxygen,ubuntu,cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:.8rem;line-height:1.8;color:color(text2);color:var(--text2,color(text2));transition:color .2s}.navbar__signin:hover{color:color(text);color:var(--text,color(text))}.navbar__signup{padding:0 .25rem;margin-right:0;font-weight:700;border-radius:4px;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);color:color(textInverse);color:var(--textInverse,color(textInverse));background-color:color(primary);background-color:var(--primary,color(primary));transition:background-color .2s}.navbar__signup:hover{background-color:color(secondary);background-color:var(--secondary,color(secondary))}.navbar__hamburger-btn{width:1.5rem;height:1.5rem}.navbar__hamburger-btn svg{width:100%;height:100%;stroke:color(text2);stroke:var(--text2,color(text2))}.navbar__hamburger-btn svg:hover{stroke:color(text);stroke:var(--text,color(text))}.navbar__search{display:none;width:1.5em;height:1.5em;margin-left:.5rem;line-height:1}.navbar__search svg{width:100%;height:100%;fill:transparent;stroke:color(text2);stroke:var(--text2,color(text2));transition:stroke .2s}.navbar__search svg:hover{stroke:color(text);stroke:var(--text,color(text))}.navbar .color-mode-btn{width:1.5em;height:1.5em;margin:0 .5rem;line-height:1}.navbar .color-mode-btn svg{width:100%;height:100%;fill:transparent;stroke:color(text2);stroke:var(--text2,color(text2));transition:stroke .2s}.navbar .color-mode-btn svg:hover{fill:#eee8aa;stroke:color(text);stroke:var(--text,color(text))}:root[color-mode=dark] .color-mode-btn.dark,:root[color-mode=light] .color-mode-btn.light{display:none}.navigation__social-media-item{width:1.25em;height:1.25em;margin-right:.5rem;color:color(text2);color:var(--text2,color(text2))}.navigation__social-media-item:last-child{margin-right:0}.navigation__social-media-item svg{width:100%;height:100%}.navigation__ul{list-style-type:none}.navigation__li{margin:.5rem 0;font-size:1.25rem}@media(min-width:1024px){.navigation__li{display:inline-block;margin:.31rem .5rem 0;font-size:.9rem;line-height:1.6}.navigation__li:first-child{margin-left:0}.navigation__li:last-child{margin-right:0}}.pagination{display:flex;align-items:center;justify-content:space-between;color:color(text2);color:var(--text2,color(text2))}.pagination>*{margin:2rem 1rem 0}.pagination>:first-child{margin-left:0}.pagination>:last-child{margin-right:0}.pagination a{transition:color .2s}.pagination a:hover{color:color(primary);color:var(--primary,color(primary))}.hero{position:relative;width:100%;height:50vh;min-height:12rem;margin-top:3.25rem;margin-bottom:2rem;overflow:hidden;background-position:50%;background-size:cover;background-color:color(surface1);background-color:var(--surface1,color(surface1))}@media(min-width:1024px){.hero{margin-top:5.5rem}}.hero:before{position:absolute;top:0;left:0;width:100%;height:100%;content:"";background:radial-gradient(rgba(0,0,0,.25),rgba(0,0,0,.5))}.hero__text-container{position:absolute;top:50%;left:50%;width:100%;max-width:1024px;padding:1rem;transform:translate(-50%,-50%)}@media(min-width:640px)and (max-width:1023px){.hero__text-container{padding:1rem 3rem 2rem}}@media(min-width:1024px){.hero__text-container{padding:0}}.hero__site-title{margin:0 0 .5rem;line-height:1.1;color:#fff}.hero__site-description{margin:0;font-size:1.25rem;line-height:1.2;color:hsla(0,0%,93.3%,.75)} +*,:after,:before{box-sizing:border-box;padding:0;margin:0}button{cursor:pointer;background:none;border:none}:root[color-mode=light]{--text:#0a0a0a;--textInverse:#f5f5f5;--text1:#171717;--text2:#39393a;--text3:#5a5a5c;--text4:#9ea0a2;--surface:#ebebeb;--surface1:#f0f0f0;--surface1-75:hsla(0,0%,94%,0.75);--surface2:#f5f5f5;--surface3:#fafafa;--surface4:#fff;--primary:#0d48a0;--secondary:#a4002e;--three:#643791;--four:#8b1c76;--five:#a00053;--success:#48a00d;--error:#a40000;--error-hover:#520000;--gradient:linear-gradient(to right top,#0d48a0,#643791,#8b1c76,#a00053,#a4002e);--gradient-reverse:linear-gradient(to left top,#0d48a0,#643791,#8b1c76,#a00053,#a4002e)}:root[color-mode=dark]{--text:#f5f5f5;--textInverse:#0a0a0a;--text1:#e8e9e9;--text2:#c6c6c7;--text3:#a5a5a7;--text4:#616365;--surface:#181818;--surface1:#202020;--surface1-75:rgba(33,33,33,0.75);--surface2:#282828;--surface3:#303030;--surface4:#383838;--primary:#80deea;--secondary:#ffab91;--three:#8cdbbf;--four:#b4d195;--five:#e0c081;--success:#b4d195;--error:#ff8f8f;--error-hover:#ff5c5c;--gradient:linear-gradient(to right top,#80deea,#8cdbbf,#b4d195,#e0c081,#ffab91);--gradient-reverse:linear-gradient(to left top,#80deea,#8cdbbf,#b4d195,#e0c081,#ffab91)}html{color:color(text);color:var(--text,color(text));background-color:color(surface1);background-color:var(--surface1,color(surface1));scroll-behavior:smooth}:link{text-decoration:none}:link,:visited{color:currentColor}::-moz-selection{color:#000;background-color:#cf0}::selection{color:#000;background-color:#cf0}:target{padding-top:3.25rem;margin-top:-3.25rem}@media(min-width:1024px){:target{padding-top:5.5rem;margin-top:5.5rem;margin-top:-5.5rem}}:focus{outline-width:1px;outline-style:dotted;outline-color:color(text3);outline-color:var(--text3,color(text3));outline-offset:3px}a:active,button:active{outline:none}::-moz-focus-inner{border:none;outline:none}html{font-size:1rem;font-size:clamp(1rem,.9090909090909091rem + .45454545454545453vw,1.25rem);font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}h1,h2,h3,h4,h5{margin:3rem 0 1.38rem;font-family:"DM Serif Text",georgia,serif;font-weight:400;font-feature-settings:"liga","clig";font-variant-ligatures:common-ligatures;line-height:1.2;font-display:optional}h1{margin-top:0;font-size:2.488rem}h2{font-size:2.074rem}h3{font-size:1.728rem}h4{font-size:1.44rem}h5{font-size:1.2rem}.sm-text-small,small{font-size:.833rem}@-webkit-keyframes popup{0%{opacity:0;transform:translate(-50%,20px) scale(.8)}75%{opacity:1}to{transform:translate(-50%) scale(1)}}@keyframes popup{0%{opacity:0;transform:translate(-50%,20px) scale(.8)}75%{opacity:1}to{transform:translate(-50%) scale(1)}}@-webkit-keyframes slide-in{0%{top:-100%;opacity:0}to{top:1rem;opacity:1}}@keyframes slide-in{0%{top:-100%;opacity:0}to{top:1rem;opacity:1}}@-webkit-keyframes slide-out{0%{top:1rem;opacity:1}to{top:-100%;opacity:0}}@keyframes slide-out{0%{top:1rem;opacity:1}to{top:-100%;opacity:0}}@-webkit-keyframes mesh{0%{background-position:0 0,0 100%,50% 0,50% 25%,50% 100%}15%{background-position:1% 1%,1% 101%,51% 1%,51% 26%,51% 101%}30%{background-position:2% 2%,2% 102%,52% 2%,52% 26%,52% 102%}45%{background-position:3% 3%,3% 103%,53% 3%,53% 27%,53% 103%}60%{background-position:4% 4%,4% 104%,54% 4%,54% 28%,54% 104%}75%{background-position:5% 5%,5% 105%,55% 5%,55% 29%,55% 105%}90%{background-position:6% 6%,6% 106%,56% 6%,56% 30%,56% 106%}}@keyframes mesh{0%{background-position:0 0,0 100%,50% 0,50% 25%,50% 100%}15%{background-position:1% 1%,1% 101%,51% 1%,51% 26%,51% 101%}30%{background-position:2% 2%,2% 102%,52% 2%,52% 26%,52% 102%}45%{background-position:3% 3%,3% 103%,53% 3%,53% 27%,53% 103%}60%{background-position:4% 4%,4% 104%,54% 4%,54% 28%,54% 104%}75%{background-position:5% 5%,5% 105%,55% 5%,55% 29%,55% 105%}90%{background-position:6% 6%,6% 106%,56% 6%,56% 30%,56% 106%}}.outer-container,.outer-container--footer{position:relative;width:100%;padding:1rem}@media(min-width:640px)and (max-width:1023px){.outer-container,.outer-container--footer{padding:1rem 3rem 2rem}}@media(min-width:1024px){.outer-container,.outer-container--footer{padding:1rem 4rem 2rem}}.outer-container--footer{min-height:250px;font-size:.9rem;background-color:color(surface);background-color:var(--surface,color(surface));color:color(text1);color:var(--text1,color(text1));border-bottom:none}.inner-container,.inner-container--author,.inner-container--footer,.inner-container--hero{max-width:1024px;margin:0 auto 1rem}.inner-container--hero{position:relative;height:100%;margin-bottom:0}.inner-container--author{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:1rem}@media(min-width:640px){.inner-container--author{flex-direction:row}}.footer__section,.footer__section--latest{display:flex;flex-direction:column;padding:.5rem}.footer__section--latest{color:color(text1);color:var(--text1,color(text1))}.footer__section--latest:nth-child(3){padding-bottom:.5rem}.footer__section--latest:last-child{padding-top:0}.footer__section--latest:last-child>p:first-child{display:block}.footer__link{margin-bottom:.15rem}.footer__description{margin-bottom:.25rem;color:color(text2);color:var(--text2,color(text2))}.footer__date{margin-bottom:.25rem;font-size:.75rem;text-transform:uppercase;color:color(text3);color:var(--text3,color(text3))}.footer__title{width:100%;max-width:12rem;margin-bottom:1rem;color:color(text2);color:var(--text2,color(text2));transition:color .2s}.footer__title:hover{color:color(primary);color:var(--primary,color(primary))}.footer__header--serif{margin-bottom:.5rem;font-size:115%}.footer__social{display:grid;grid-gap:1rem;grid-template-columns:repeat(auto-fit,1rem);margin-top:.5rem;transition:all .2s}.footer__social a{width:1rem;height:1rem;margin:0}.footer__social svg{width:100%;height:100%;stroke:color(text2);stroke:var(--text2,color(text2));fill:color(text2);fill:var(--text2,color(text2))}.footer__card-tag{display:flex;align-items:center;color:color(text2);color:var(--text2,color(text2))}.footer__card-tag p{margin:0;text-transform:uppercase;transition:all .2s}.footer__card-tag svg{flex-shrink:0;align-self:flex-start;width:.9375rem;height:.9375rem;transform:translateY(.2em);stroke:color(text2);stroke:var(--text2,color(text2));stroke-width:2px;transition:all .2s}.footer__card-tag:active p,.footer__card-tag:hover p{color:color(secondary);color:var(--secondary,color(secondary));outline:none}.footer__card-tag:active svg,.footer__card-tag:hover svg{stroke:color(secondary);stroke:var(--secondary,color(secondary))}.footer__published-by-ghost{display:flex;align-items:center;justify-content:center;padding:.15rem;font-size:.8rem;color:color(text3);color:var(--text3,color(text3))}.menu__link{transition:color .2s}.menu__link:focus{outline:none;color:color(primary);color:var(--primary,color(primary))}.navbar{position:fixed;top:0;z-index:5;display:block;width:100%;font-size:.9rem;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);background-color:color(surface2);background-color:var(--surface2,color(surface2));transition:all .2s}.navbar__top{display:none;height:2.25rem;padding:.25rem 1rem;border-bottom:1px solid color(surface4);border-bottom-color:var(--surface4,color(surface4))}@media(min-width:1024px){.navbar__top{display:flex;align-items:center;justify-content:space-between;font-size:.8rem}}.navbar__top--left,.navbar__top--right{display:flex;align-items:center}.navbar__top--right button{margin-right:0}.navbar__new-tag{padding:.15em;margin-right:.35em;font-size:.85em;line-height:1;border-radius:4px;color:color(textInverse);color:var(--textInverse,color(textInverse));background-color:color(secondary);background-color:var(--secondary,color(secondary))}.navbar__new-link{font-size:.95em;line-height:1;transition:color .2s;color:color(text2);color:var(--text2,color(text2))}.navbar__new-link:hover{color:color(text);color:var(--text,color(text))}.navbar__bottom{display:flex;align-items:center;height:3.25rem;padding:.5rem 1rem}.navbar__bottom--center{display:none;margin-left:2rem}@media(min-width:1024px){.navbar__bottom--center{display:block}}.navbar__bottom div:last-child{margin-left:auto}.navbar__bottom--right{display:none;margin-left:auto}@media(min-width:1024px){.navbar__bottom--right{display:flex;align-items:center}}.navbar__bottom--right--mobile{margin:.5rem 0 0 auto;line-height:1.6}@media(min-width:1024px){.navbar__bottom--right--mobile{display:none}}.navbar__brand--serif{display:flex;align-items:center;font-family:"DM Serif Text",georgia,serif;font-size:1.25rem;font-weight:400;line-height:1.6}.navbar__brand--serif img{width:1.25rem;height:1.25rem;margin-right:.25rem}.navbar__signin,.navbar__signup{margin:.31rem .5rem 0 0;font-family:Lato,-apple-system,blinkmacsystemfont,Segoe UI,roboto,oxygen,ubuntu,cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:.8rem;line-height:1.8;color:color(text2);color:var(--text2,color(text2));transition:color .2s}.navbar__signin:hover{color:color(text);color:var(--text,color(text))}.navbar__signup{padding:0 .25rem;margin-right:0;font-weight:700;border-radius:4px;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);color:color(textInverse);color:var(--textInverse,color(textInverse));background-color:color(primary);background-color:var(--primary,color(primary));transition:background-color .2s}.navbar__signup:hover{background-color:color(secondary);background-color:var(--secondary,color(secondary))}.navbar__hamburger-btn{width:1.5rem;height:1.5rem}.navbar__hamburger-btn svg{width:100%;height:100%;stroke:color(text2);stroke:var(--text2,color(text2))}.navbar__hamburger-btn svg:hover{stroke:color(text);stroke:var(--text,color(text))}.navbar__search{display:none;width:1.5em;height:1.5em;margin-left:.5rem;line-height:1}.navbar__search svg{width:100%;height:100%;fill:transparent;stroke:color(text2);stroke:var(--text2,color(text2));transition:stroke .2s}.navbar__search svg:hover{stroke:color(text);stroke:var(--text,color(text))}.navbar .color-mode-btn{width:1.5em;height:1.5em;margin:0 .5rem;line-height:1}.navbar .color-mode-btn svg{width:100%;height:100%;fill:transparent;stroke:color(text2);stroke:var(--text2,color(text2));transition:stroke .2s}.navbar .color-mode-btn svg:hover{fill:#eee8aa;stroke:color(text);stroke:var(--text,color(text))}:root[color-mode=dark] .color-mode-btn.dark,:root[color-mode=light] .color-mode-btn.light{display:none}.navigation__social-media-item{width:1.25em;height:1.25em;margin-right:.5rem;color:color(text2);color:var(--text2,color(text2))}.navigation__social-media-item:last-child{margin-right:0}.navigation__social-media-item svg{width:100%;height:100%}.navigation__ul{list-style-type:none}.navigation__li{margin:.5rem 0;font-size:1.25rem}@media(min-width:1024px){.navigation__li{display:inline-block;margin:.31rem .5rem 0;font-size:.9rem;line-height:1.6}.navigation__li:first-child{margin-left:0}.navigation__li:last-child{margin-right:0}}.pagination{display:flex;align-items:center;justify-content:space-between;color:color(text2);color:var(--text2,color(text2))}.pagination>*{margin:2rem 1rem 0}.pagination>:first-child{margin-left:0}.pagination>:last-child{margin-right:0}.pagination a{transition:color .2s}.pagination a:hover{color:color(primary);color:var(--primary,color(primary))}.hero{position:relative;width:100%;height:50vh;min-height:12rem;margin-top:3.25rem;margin-bottom:2rem;overflow:hidden;background-position:50%;background-size:cover;background-color:color(surface1);background-color:var(--surface1,color(surface1))}@media(min-width:1024px){.hero{margin-top:5.5rem}}.hero:before{position:absolute;top:0;left:0;width:100%;height:100%;content:"";background:radial-gradient(rgba(0,0,0,.25),rgba(0,0,0,.5))}.hero__text-container{position:absolute;top:50%;width:100%;transform:translateY(-50%)}.hero__site-title{margin:0 0 .5rem;line-height:1.1;color:#fff}.hero__site-description{margin:0;font-size:1.25rem;line-height:1.2;color:hsla(0,0%,93.3%,.75)} /*# sourceMappingURL=critical.css.map*/ \ No newline at end of file diff --git a/assets/built/critical.css.map b/assets/built/critical.css.map index b4128204..da4003c9 100644 --- a/assets/built/critical.css.map +++ b/assets/built/critical.css.map @@ -1 +1 @@ -{"version":3,"sources":["webpack://smart/./src/scss/base/_reset.scss","webpack://smart/./src/scss/base/_default.scss","webpack://smart/./src/scss/abstracts/_mixins.scss","webpack://smart/./src/scss/base/_fonts.scss","webpack://smart/./src/scss/base/_typography.scss","webpack://smart/./src/scss/abstracts/_variables.scss","webpack://smart/./src/scss/base/_animations.scss","webpack://smart/./src/scss/layout/_container.scss","webpack://smart/./src/scss/layout/_footer.scss","webpack://smart/./src/scss/layout/_menu.scss","webpack://smart/./src/scss/layout/_navbar.scss","webpack://smart/./src/scss/layout/_navigation.scss","webpack://smart/./src/scss/layout/_pagination.scss","webpack://smart/./src/scss/pages/_hero.scss"],"names":[],"mappings":"AAAA,iBAGE,sBACA,UACA,SAGF,OACE,eACA,gBACA,YCJF,wBACE,eACA,sBACA,gBACA,gBACA,gBACA,gBACA,kBACA,mBACA,kCACA,mBACA,mBACA,gBACA,kBACA,oBACA,gBACA,eACA,eACA,kBACA,gBACA,sBACA,iFAQA,wFAWF,uBACE,eACA,sBACA,gBACA,gBACA,gBACA,gBACA,kBACA,mBACA,kCACA,mBACA,mBACA,mBACA,kBACA,oBACA,gBACA,eACA,eACA,kBACA,gBACA,sBACA,iFAQA,wFAaF,KChFI,kIDmFF,uBAMF,MAEE,qBAGF,eAJE,kBAKA,CAGF,iBACE,WACA,sBAFF,YACE,WACA,sBAGF,QCzCE,oBAOE,oBALF,yBDuCF,QCtCI,qCAOE,kBAPF,ED2CJ,OACE,kBACA,qBC9GE,mEDgHF,mBAGF,uBAEE,aAGF,mBACE,YACA,aEnIF,KACE,eACA,0EAKA,gBACA,gBACA,kCCJF,eAKE,sBACA,yCCmCM,CDlCN,gBACA,4EACA,gBACA,sBAGF,GACE,aACA,mBAGF,GACE,mBAGF,GACE,mBAGF,GACE,kBAGF,GACE,iBAGF,qBAEE,kBEzCF,yBACE,GACE,UACA,yCAEF,IACE,UAEF,GACE,oCATJ,iBACE,GACE,UACA,yCAEF,IACE,UAEF,GACE,oCAIJ,4BACE,GACE,UACA,UAEF,GACE,SACA,WAPJ,oBACE,GACE,UACA,UAEF,GACE,SACA,WAIJ,6BACE,GACE,SACA,UAEF,GACE,UACA,WAPJ,qBACE,GACE,SACA,UAEF,GACE,UACA,WAIJ,wBACE,GACE,sDAEF,IACE,0DAEF,IACE,0DAEF,IACE,0DAEF,IACE,0DAEF,IACE,0DAEF,IACE,2DApBJ,gBACE,GACE,sDAEF,IACE,0DAEF,IACE,0DAEF,IACE,0DAEF,IACE,0DAEF,IACE,0DAEF,IACE,2DCjDJ,0CACE,kBACA,WACA,aLqDA,8CKxDF,0CAMI,wBLsCF,yBK5CF,0CAUI,wBAGF,yBAEE,iBACA,gBLbA,kIKgBA,mBAIJ,mEACE,gBFyBO,CExBP,mBAMA,yBAEE,aACA,sBACA,mBACA,uBACA,oBLOF,wBKbA,yBAQI,oBCtCJ,0CACE,aACA,sBACA,cAEA,yBNHA,mDMOE,sCACE,qBAGF,oCACE,cACA,kDACE,cAMR,cACE,qBAGF,qBACE,qBNzBA,mDM6BF,cACE,qBACA,iBACA,yBNhCA,mDMoCF,eACE,WACA,gBACA,mBNvCA,mDAkCF,qBMWE,qBN7CA,yDMkDF,uBACE,oBACA,eAIF,gBACE,aACA,cACA,4CACA,iBN1BF,mBM6BE,kBACE,WACA,YACA,SAGF,oBACE,WACA,YNvEF,sGM6EF,kBACE,aACA,mBN/EA,mDMkFA,oBACE,SACA,yBNlDJ,mBMsDE,sBACE,cACA,sBACA,eACA,gBACA,2BN7FF,qDM+FE,iBN7DJ,mBMmEI,qDNrGF,+DMuGI,aAEF,yDNzGF,iEM+GF,4BACE,aACA,mBACA,uBACA,eACA,gBNpHA,mDOJF,YPsCA,qBOpCE,kBACE,aPCF,yDQHJ,QACE,eACA,MACA,UACA,cACA,WACA,gBACA,iELsDW,CH1DT,kFAkCF,mBQ1BA,aACE,aACA,eACA,oBRXA,4FAyCF,yBQjCA,aAQI,aACA,mBACA,8BACA,iBAQF,uCACE,aACA,mBAEA,2BACE,eAKN,iBACE,cACA,mBACA,gBACA,cACA,iBLSK,CHnDL,0JQ+CF,kBACE,gBACA,cRfF,qBAlCE,mDQqDA,wBRrDA,gDQ2DF,gBACE,aACA,mBACA,eACA,mBAEA,wBACE,aACA,iBR1BJ,yBQwBE,wBAKI,eAKJ,+BACE,iBAGF,uBACE,aACA,iBRxCJ,yBQsCE,uBAKI,aACA,oBAGF,+BACE,sBACA,gBRjDN,yBQ+CI,+BAII,cAMR,sBACE,aACA,mBACA,yCLhEI,CKiEJ,kBACA,gBACA,gBAEA,0BACE,cACA,eACA,oBAKJ,gCAEE,wBACA,6HLnFG,CKoFH,gBACA,gBRvHA,mDAkCF,qBQ0FA,sBR5HE,gDQgIF,gBACE,iBACA,eACA,gBACA,iBLjFK,CKkFL,iEL3ES,CH1DT,oJAkCF,gCQuGE,sBRzIA,qFQ8IF,uBACE,aACA,cAEA,2BACE,WACA,YRpJF,qDQuJE,iCRvJF,kDQ8JF,gBACE,aACA,YACA,aACA,kBACA,cACA,oBACE,WACA,YACA,iBRvKF,qDAkCF,sBQyII,0BR3KF,kDQiLF,wBACE,YACA,aACA,eACA,cAEA,4BACE,WACA,YACA,iBR1LF,qDAkCF,sBQ4JI,kCACE,aR/LJ,kDQ6MA,0FACE,aC/MJ,+BACE,aACA,cACA,mBTFA,mDSKA,0CACE,eAGF,mCACE,WACA,YAIJ,gBACE,qBAGF,gBACE,eACA,kBToBF,yBStBA,gBAKI,qBACA,sBACA,gBACA,gBAEA,4BACE,cAGF,2BACE,gBCtCR,YACE,aACA,mBACA,8BVCE,mDUEF,cACE,mBACA,yBACE,cAEF,wBACE,eAIJ,cVsBA,qBUnBE,oBVfA,yDWNJ,MACE,kBACA,WACA,YACA,iBXgEA,mBW9DA,mBACA,gBACA,wBACA,sBXHE,kFAgEF,yBWtEF,MXuEI,mBW3DF,aACE,kBACA,MACA,OACA,WACA,YACA,WACA,2DAGF,sBACE,kBACA,QACA,SACA,WACA,gBRyBK,CQxBL,aAUA,+BXqBF,8CWrCA,sBASI,wBXgBJ,yBWzBA,sBAaI,WAMJ,kBACE,iBACA,gBACA,WAGF,wBACE,SACA,kBACA,gBACA,2B","file":"critical.css","sourcesContent":["*,\n*:before,\n*:after {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n}\n\nbutton {\n cursor: pointer;\n background: none;\n border: none;\n}\n","@use '../abstracts/mixins';\n\n//-------------------------------------------\n// Custom Properties\n//-------------------------------------------\n\n// Bright Mode\n:root[color-mode='light'] {\n --text: #0a0a0a;\n --textInverse: #f5f5f5;\n --text1: #171717;\n --text2: #39393a;\n --text3: #5a5a5c;\n --text4: #9ea0a2;\n --surface: hsl(0, 0%, 92%);\n --surface1: hsl(0, 0%, 94%);\n --surface1-75: hsla(0, 0%, 94%, 0.75);\n --surface2: hsl(0, 0%, 96%);\n --surface3: hsl(0, 0%, 98%);\n --surface4: #ffffff;\n --primary: #0d48a0;\n --secondary: #a4002e;\n --three: #643791;\n --four: #8b1c76;\n --five: #a00053;\n --success: #48a00d;\n --error: #a40000;\n --error-hover: hsl(0, 100%, 16%);\n --gradient: linear-gradient(\n to right top,\n #0d48a0,\n #643791,\n #8b1c76,\n #a00053,\n #a4002e\n );\n --gradient-reverse: linear-gradient(\n to left top,\n #0d48a0,\n #643791,\n #8b1c76,\n #a00053,\n #a4002e\n );\n}\n\n// Dark Mode\n:root[color-mode='dark'] {\n --text: #f5f5f5;\n --textInverse: #0a0a0a;\n --text1: #e8e9e9;\n --text2: #c6c6c7;\n --text3: #a5a5a7;\n --text4: #616365;\n --surface: #181818;\n --surface1: #202020;\n --surface1-75: rgba(33, 33, 33, 0.75);\n --surface2: #282828;\n --surface3: #303030;\n --surface4: #383838;\n --primary: #80deea;\n --secondary: #ffab91;\n --three: #8cdbbf;\n --four: #b4d195;\n --five: #e0c081;\n --success: #b4d195;\n --error: hsl(0, 100%, 78%);\n --error-hover: hsl(0, 100%, 68%);\n --gradient: linear-gradient(\n to right top,\n #80deea,\n #8cdbbf,\n #b4d195,\n #e0c081,\n #ffab91\n );\n --gradient-reverse: linear-gradient(\n to left top,\n #80deea,\n #8cdbbf,\n #b4d195,\n #e0c081,\n #ffab91\n );\n}\n\n//-------------------------------------------\n// Global Styles\n//-------------------------------------------\nhtml {\n @include mixins.color-map(color, text);\n @include mixins.color-map(background-color, surface1);\n scroll-behavior: smooth;\n}\n\n//-------------------------------------------\n// Psuedoselectors\n//-------------------------------------------\n:link {\n color: currentColor;\n text-decoration: none;\n}\n\n:visited {\n color: currentColor;\n}\n\n::selection {\n color: #000000;\n background-color: #ccff00;\n}\n\n:target {\n @include mixins.navbar(padding-top);\n @include mixins.navbar(margin-top, $negative: true);\n}\n\n:focus {\n outline-width: 1px;\n outline-style: dotted;\n @include mixins.color-map(outline-color, text3);\n outline-offset: 3px;\n}\n\na:active,\nbutton:active {\n outline: none;\n}\n\n::-moz-focus-inner {\n border: none;\n outline: none;\n}\n","@use 'variables';\n//-------------------------------------------\n// Color\n//-------------------------------------------\n@mixin color-map($property, $color) {\n @if $color == transparent {\n #{$property}: $color;\n } @else {\n #{$property}: color($color);\n #{$property}: var(--#{$color}, color($color));\n }\n}\n\n@mixin outline {\n outline-width: 2px;\n outline-style: solid;\n @include color-map(outline-color, primary);\n outline-offset: 1px;\n}\n\n@mixin mesh {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n content: '';\n background: radial-gradient(var(--primary) 25%, transparent 50%),\n radial-gradient(var(--secondary) 25%, transparent 50%),\n radial-gradient(var(--three) 25%, transparent 50%),\n radial-gradient(var(--four) 25%, transparent 50%),\n radial-gradient(var(--five) 25%, transparent 50%);\n background-repeat: no-repeat;\n background-position: 0 0, 0 100%, 50% 0, 50% 25%, 50% 100%;\n background-size: 60% 80%, 70% 80%, 80% 80%, 60% 60%, 80% 80%;\n transition: background-position 2s;\n transform: scale(4);\n}\n//-------------------------------------------\n// Transition\n//-------------------------------------------\n@mixin transition($property) {\n transition: $property 0.2s;\n}\n\n//-------------------------------------------\n// Breakpoints\n//-------------------------------------------\n@mixin respond-above($breakpoint) {\n @media (min-width: $breakpoint) {\n @content;\n }\n}\n\n@mixin respond-below($breakpoint) {\n @media (max-width: $breakpoint) {\n @content;\n }\n}\n\n@mixin respond-between($min, $max) {\n @media (min-width: $min) and (max-width: $max - 1) {\n @content;\n }\n}\n\n//-------------------------------------------\n// Layout\n//-------------------------------------------\n@mixin navbar($property, $negative: false, $increase: 0) {\n #{$property}: 3.25rem + $increase;\n\n @media (min-width: variables.$laptop) {\n #{$property}: 5.5rem + $increase;\n }\n\n @if $negative {\n #{$property}: -3.25rem + -$increase;\n\n @media (min-width: variables.$laptop) {\n #{$property}: -5.5rem + -$increase;\n }\n }\n}\n\n@mixin inner-container {\n max-width: variables.$laptop;\n margin: 0 auto 1rem;\n}\n\n@mixin outer-container {\n position: relative;\n width: 100%;\n padding: 1rem;\n\n @include respond-between(variables.$tablet, variables.$laptop) {\n padding: 1rem 3rem 2rem;\n }\n\n @include respond-above(variables.$laptop) {\n padding: 1rem 4rem 2rem;\n }\n}\n\n@mixin grid {\n display: grid;\n gap: 1.5rem;\n}\n","html {\n font-size: 1rem;\n font-size: clamp(\n 1rem,\n 0.9090909090909091rem + 0.45454545454545453vw,\n 1.25rem\n );\n font-weight: 400;\n line-height: 1.5;\n text-rendering: optimizeLegibility;\n}\n","//-------------------------------------------\n// Tyopgraphy\n//-------------------------------------------\n@use '../abstracts/variables';\n\nh1,\nh2,\nh3,\nh4,\nh5 {\n margin: 3rem 0 1.38rem;\n font-family: variables.$serif;\n font-weight: 400;\n font-variant-ligatures: common-ligatures;\n line-height: 1.2;\n font-display: optional;\n}\n\nh1 {\n margin-top: 0;\n font-size: 2.488rem;\n}\n\nh2 {\n font-size: 2.074rem;\n}\n\nh3 {\n font-size: 1.728rem;\n}\n\nh4 {\n font-size: 1.44rem;\n}\n\nh5 {\n font-size: 1.2rem;\n}\n\nsmall,\n.sm-text-small {\n font-size: 0.833rem;\n}\n","//-------------------------------------------\n// Colors\n//-------------------------------------------\n// Social Media\n$ch: #6441a5; //Twitch\n$fb: #1877f2;\n$gh: #4078c0;\n$gl: #fca326;\n$ig: #c13584;\n$li: #0077b5;\n$rs: #f26522; //RSS\n$tw: #1da1f2;\n$yt: #ff0000;\n\n// Fallbacks (defaults to Dark Mode)\n$colors: (\n 'text': #f5f5f5,\n 'textInverse': #0a0a0a,\n 'text1': #e8e9e9,\n 'text2': #c7c7c8,\n 'text3': #a5a5a7,\n 'text4': #616264,\n 'surface': #181818,\n 'surface1': #202020,\n 'surface1-75': rgba(33, 33, 33, 0.75),\n 'surface2': #282828,\n 'surface3': #303030,\n 'surface4': #383838,\n 'primary': #80deea,\n 'secondary': #ffab91,\n 'three': #8cdbbf,\n 'four': #b4d195,\n 'five': #e0c081,\n 'success': #b4d195,\n 'error': hsl(0, 100%, 78%),\n 'error-hover': hsl(0, 100%, 68%),\n 'gradient':\n linear-gradient(to right top, #80deea, #8cdbbf, #b4d195, #e0c081, #ffab91),\n);\n\n//-------------------------------------------\n// Fonts\n//-------------------------------------------\n$sans: 'Lato', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen,\n ubuntu, cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n\n$serif: 'DM Serif Text', georgia, serif;\n$mono: 'JetBrains Mono', 'Roboto Mono', 'IBM Plex Mono', 'Cascadia Code',\n 'Droid Sans Mono', 'Fira Mono', 'Fira Code', consolas, monospace;\n//-------------------------------------------\n// Sizes, Breakpoints, Variables\n//-------------------------------------------\n\n// Breakpoints\n$tablet: 640px;\n$laptop: 1024px;\n$desktop: 1280px;\n\n// Sizes\n$base: 9rem;\n$radius: 4px;\n\n// Box Shadow\n$box-shadow-large: 3px 3px 4px rgba(0, 0, 0, 0.12),\n -3px 2px 4px rgba(0, 0, 0, 0.12), 5px 10px 15px rgba(0, 0, 0, 0.14),\n -5px 5px 15px rgba(0, 0, 0, 0.14);\n\n$box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n\n$transition: 0.2s;\n","@keyframes popup {\n 0% {\n opacity: 0;\n transform: translate(-50%, 20px) scale(0.8);\n }\n 75% {\n opacity: 1;\n }\n 100% {\n transform: translate(-50%, 0) scale(1);\n }\n}\n\n@keyframes slide-in {\n 0% {\n top: -100%;\n opacity: 0;\n }\n 100% {\n top: 1rem;\n opacity: 1;\n }\n}\n\n@keyframes slide-out {\n 0% {\n top: 1rem;\n opacity: 1;\n }\n 100% {\n top: -100%;\n opacity: 0;\n }\n}\n\n@keyframes mesh {\n 0% {\n background-position: 0 0, 0 100%, 50% 0, 50% 25%, 50% 100%;\n }\n 15% {\n background-position: 1% 1%, 1% 101%, 51% 1%, 51% 26%, 51% 101%;\n }\n 30% {\n background-position: 2% 2%, 2% 102%, 52% 2%, 52% 26%, 52% 102%;\n }\n 45% {\n background-position: 3% 3%, 3% 103%, 53% 3%, 53% 27%, 53% 103%;\n }\n 60% {\n background-position: 4% 4%, 4% 104%, 54% 4%, 54% 28%, 54% 104%;\n }\n 75% {\n background-position: 5% 5%, 5% 105%, 55% 5%, 55% 29%, 55% 105%;\n }\n 90% {\n background-position: 6% 6%, 6% 106%, 56% 6%, 56% 30%, 56% 106%;\n }\n}\n","//-------------------------------------------\n// Containers\n//-------------------------------------------\n@use '../abstracts/variables';\n@use '../abstracts/mixins';\n\n.outer-container {\n position: relative;\n width: 100%;\n padding: 1rem;\n\n @include mixins.respond-between(variables.$tablet, variables.$laptop) {\n padding: 1rem 3rem 2rem;\n }\n\n @include mixins.respond-above(variables.$laptop) {\n padding: 1rem 4rem 2rem;\n }\n\n &--footer {\n @extend .outer-container;\n min-height: 250px;\n font-size: 0.9rem;\n @include mixins.color-map(background-color, surface);\n @include mixins.color-map(color, text1);\n border-bottom: none;\n }\n}\n\n.inner-container {\n max-width: variables.$laptop;\n margin: 0 auto 1rem;\n\n &--footer {\n @extend .inner-container;\n }\n\n &--author {\n @extend .inner-container;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding-bottom: 1rem;\n @include mixins.respond-above(variables.$tablet) {\n flex-direction: row;\n }\n }\n}\n","//-------------------------------------------\n// Global Footer Styles\n//-------------------------------------------\n@use '../abstracts/variables';\n@use '../abstracts/mixins';\n\n.footer {\n &__section {\n display: flex;\n flex-direction: column;\n padding: 0.5rem;\n\n &--latest {\n @extend .footer__section;\n @include mixins.color-map(color, text1);\n\n &:nth-child(3) {\n padding-bottom: 0.5rem;\n }\n\n &:last-child {\n padding-top: 0;\n & > p:first-child {\n display: block;\n }\n }\n }\n }\n\n &__link {\n margin-bottom: 0.15rem;\n }\n\n &__description {\n margin-bottom: 0.25rem;\n @include mixins.color-map(color, text2);\n }\n\n &__date {\n margin-bottom: 0.25rem;\n font-size: 0.75rem;\n text-transform: uppercase;\n @include mixins.color-map(color, text3);\n }\n\n &__title {\n width: 100%;\n max-width: 12rem;\n margin-bottom: 1rem;\n\n @include mixins.color-map(color, text2);\n\n @include mixins.transition(color);\n\n &:hover {\n @include mixins.color-map(color, primary);\n }\n }\n\n &__header--serif {\n margin-bottom: 0.5rem;\n font-size: 115%;\n // @extend .serif;\n }\n\n &__social {\n display: grid;\n grid-gap: 1rem;\n grid-template-columns: repeat(auto-fit, 1rem);\n margin-top: 0.5rem;\n @include mixins.transition(all);\n\n a {\n width: 1rem;\n height: 1rem;\n margin: 0;\n }\n\n svg {\n width: 100%;\n height: 100%;\n @include mixins.color-map(stroke, text2);\n @include mixins.color-map(fill, text2);\n }\n }\n\n &__card-tag {\n display: flex;\n align-items: center;\n @include mixins.color-map(color, text2);\n\n p {\n margin: 0;\n text-transform: uppercase;\n @include mixins.transition(all);\n }\n\n svg {\n flex-shrink: 0;\n align-self: flex-start;\n width: 0.9375rem;\n height: 0.9375rem;\n transform: translateY(0.2em);\n @include mixins.color-map(stroke, text2);\n stroke-width: 2px;\n @include mixins.transition(all);\n }\n\n &:hover,\n &:active {\n p {\n @include mixins.color-map(color, secondary);\n outline: none;\n }\n svg {\n @include mixins.color-map(stroke, secondary);\n }\n }\n }\n\n &__published-by-ghost {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0.15rem;\n font-size: 0.8rem;\n @include mixins.color-map(color, text3);\n }\n}\n","//-------------------------------------------\n// Mobile Nav Menu\n//-------------------------------------------\n@use '../abstracts/mixins';\n.menu {\n &__link {\n @include mixins.transition(color);\n &:focus {\n outline: none;\n @include mixins.color-map(color, primary);\n }\n }\n}\n","//-------------------------------------------\n// Navbar\n//-------------------------------------------\n@use '../abstracts/variables';\n@use '../abstracts/mixins';\n\n.navbar {\n position: fixed;\n top: 0;\n z-index: 5;\n display: block;\n width: 100%;\n font-size: 0.9rem;\n box-shadow: variables.$box-shadow;\n @include mixins.color-map(background-color, surface2);\n @include mixins.transition(all);\n\n &__top {\n display: none;\n height: 2.25rem;\n padding: 0.25rem 1rem;\n border-bottom: 1px solid;\n @include mixins.color-map(border-bottom-color, surface4);\n\n @include mixins.respond-above(variables.$laptop) {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.8rem;\n }\n\n &--left {\n display: flex;\n align-items: center;\n }\n\n &--right {\n display: flex;\n align-items: center;\n\n button {\n margin-right: 0;\n }\n }\n }\n\n &__new-tag {\n padding: 0.15em;\n margin-right: 0.35em;\n font-size: 0.85em;\n line-height: 1;\n border-radius: variables.$radius;\n @include mixins.color-map(color, textInverse);\n @include mixins.color-map(background-color, secondary);\n }\n\n &__new-link {\n font-size: 0.95em;\n line-height: 1;\n @include mixins.transition(color);\n @include mixins.color-map(color, text2);\n\n &:hover {\n @include mixins.color-map(color, text);\n }\n }\n\n // Bottom navbar -> Brand, Links, Member\n &__bottom {\n display: flex;\n align-items: center;\n height: 3.25rem;\n padding: 0.5rem 1rem;\n\n &--center {\n display: none;\n margin-left: 2rem;\n\n @include mixins.respond-above(variables.$laptop) {\n display: block;\n }\n }\n\n // If member functionality isn't enabled, then shift nav links to far right\n div:last-child {\n margin-left: auto;\n }\n\n &--right {\n display: none;\n margin-left: auto;\n\n @include mixins.respond-above(variables.$laptop) {\n display: flex;\n align-items: center;\n }\n\n &--mobile {\n margin: 0.5rem 0 0 auto;\n line-height: 1.6;\n @include mixins.respond-above(variables.$laptop) {\n display: none;\n }\n }\n }\n }\n\n &__brand--serif {\n display: flex;\n align-items: center;\n font-family: variables.$serif;\n font-size: 1.25rem;\n font-weight: 400;\n line-height: 1.6;\n\n img {\n width: 1.25rem;\n height: 1.25rem;\n margin-right: 0.25rem;\n }\n }\n\n // Member button styling\n &__signin,\n &__signup {\n margin: 0.31rem 0.5rem 0 0;\n font-family: variables.$sans;\n font-size: 0.8rem;\n line-height: 1.8;\n @include mixins.color-map(color, text2);\n @include mixins.transition(color);\n }\n\n &__signin:hover {\n @include mixins.color-map(color, text);\n }\n\n &__signup {\n padding: 0 0.25rem;\n margin-right: 0;\n font-weight: 700;\n border-radius: variables.$radius;\n box-shadow: variables.$box-shadow;\n @include mixins.color-map(color, textInverse);\n @include mixins.color-map(background-color, primary);\n @include mixins.transition(background-color);\n &:hover {\n @include mixins.color-map(background-color, secondary);\n }\n }\n\n &__hamburger-btn {\n width: 1.5rem;\n height: 1.5rem;\n\n svg {\n width: 100%;\n height: 100%;\n @include mixins.color-map(stroke, text2);\n\n &:hover {\n @include mixins.color-map(stroke, text);\n }\n }\n }\n\n // Search button\n &__search {\n display: none;\n width: 1.5em;\n height: 1.5em;\n margin-left: 0.5rem;\n line-height: 1;\n svg {\n width: 100%;\n height: 100%;\n fill: transparent;\n @include mixins.color-map(stroke, text2);\n @include mixins.transition(stroke);\n\n &:hover {\n @include mixins.color-map(stroke, text);\n }\n }\n }\n\n .color-mode-btn {\n width: 1.5em;\n height: 1.5em;\n margin: 0 0.5rem;\n line-height: 1;\n\n svg {\n width: 100%;\n height: 100%;\n fill: transparent;\n @include mixins.color-map(stroke, text2);\n @include mixins.transition(stroke);\n\n &:hover {\n fill: #eee8aa;\n @include mixins.color-map(stroke, text);\n }\n }\n }\n}\n\n.color-mode-btn {\n &.light {\n :root[color-mode='light'] & {\n display: none;\n }\n }\n &.dark {\n :root[color-mode='dark'] & {\n display: none;\n }\n }\n}\n","//-------------------------------------------\n// Navigation Partial\n//-------------------------------------------\n@use '../abstracts/variables';\n@use '../abstracts/mixins';\n\n.navigation {\n // Social Media icons in footer\n &__social-media-item {\n width: 1.25em;\n height: 1.25em;\n margin-right: 0.5rem;\n @include mixins.color-map(color, text2);\n\n &:last-child {\n margin-right: 0;\n }\n\n svg {\n width: 100%;\n height: 100%;\n }\n }\n // Nav links\n &__ul {\n list-style-type: none;\n }\n\n &__li {\n margin: 0.5rem 0;\n font-size: 1.25rem;\n\n @include mixins.respond-above(variables.$laptop) {\n display: inline-block;\n margin: 0.31rem 0.5rem 0;\n font-size: 0.9rem;\n line-height: 1.6;\n\n &:first-child {\n margin-left: 0;\n }\n\n &:last-child {\n margin-right: 0;\n }\n }\n }\n}\n","//-------------------------------------------\n// Pagination\n//-------------------------------------------\n@use '../abstracts/mixins';\n\n.pagination {\n display: flex;\n align-items: center;\n justify-content: space-between;\n @include mixins.color-map(color, text2);\n\n > * {\n margin: 2rem 1rem 0;\n &:first-child {\n margin-left: 0;\n }\n &:last-child {\n margin-right: 0;\n }\n }\n\n a {\n @include mixins.transition(color);\n\n &:hover {\n @include mixins.color-map(color, primary);\n }\n }\n}\n","@use '../abstracts/variables';\n@use '../abstracts/mixins';\n\n.hero {\n position: relative;\n width: 100%;\n height: 50vh;\n min-height: 12rem;\n @include mixins.navbar(margin-top);\n margin-bottom: 2rem;\n overflow: hidden;\n background-position: center;\n background-size: cover;\n @include mixins.color-map(background-color, surface1);\n\n &::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n content: '';\n background: radial-gradient(rgba(#000, 0.25), rgba(#000, 0.5));\n }\n\n &__text-container {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100%;\n max-width: variables.$laptop;\n padding: 1rem;\n\n @include mixins.respond-between(variables.$tablet, variables.$laptop) {\n padding: 1rem 3rem 2rem;\n }\n\n @include mixins.respond-above(variables.$laptop) {\n padding: 0;\n }\n\n transform: translate(-50%, -50%);\n }\n\n &__site-title {\n margin: 0 0 0.5rem;\n line-height: 1.1;\n color: #ffffff;\n }\n\n &__site-description {\n margin: 0;\n font-size: 1.25rem;\n line-height: 1.2;\n color: rgba(238, 238, 238, 0.75);\n }\n}\n"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["webpack://smart/./src/scss/base/_reset.scss","webpack://smart/./src/scss/base/_default.scss","webpack://smart/./src/scss/abstracts/_mixins.scss","webpack://smart/./src/scss/base/_fonts.scss","webpack://smart/./src/scss/base/_typography.scss","webpack://smart/./src/scss/abstracts/_variables.scss","webpack://smart/./src/scss/base/_animations.scss","webpack://smart/./src/scss/layout/_container.scss","webpack://smart/./src/scss/layout/_footer.scss","webpack://smart/./src/scss/layout/_menu.scss","webpack://smart/./src/scss/layout/_navbar.scss","webpack://smart/./src/scss/layout/_navigation.scss","webpack://smart/./src/scss/layout/_pagination.scss","webpack://smart/./src/scss/pages/_hero.scss"],"names":[],"mappings":"AAAA,iBAGE,sBACA,UACA,SAGF,OACE,eACA,gBACA,YCJF,wBACE,eACA,sBACA,gBACA,gBACA,gBACA,gBACA,kBACA,mBACA,kCACA,mBACA,mBACA,gBACA,kBACA,oBACA,gBACA,eACA,eACA,kBACA,gBACA,sBACA,iFAQA,wFAWF,uBACE,eACA,sBACA,gBACA,gBACA,gBACA,gBACA,kBACA,mBACA,kCACA,mBACA,mBACA,mBACA,kBACA,oBACA,gBACA,eACA,eACA,kBACA,gBACA,sBACA,iFAQA,wFAaF,KChFI,kIDmFF,uBAMF,MAEE,qBAGF,eAJE,kBAKA,CAGF,iBACE,WACA,sBAFF,YACE,WACA,sBAGF,QCzCE,oBAOE,oBALF,yBDuCF,QCtCI,qCAOE,kBAPF,ED2CJ,OACE,kBACA,qBC9GE,mEDgHF,mBAGF,uBAEE,aAGF,mBACE,YACA,aEnIF,KACE,eACA,0EAKA,gBACA,gBACA,kCCJF,eAKE,sBACA,yCCmCM,CDlCN,gBACA,4EACA,gBACA,sBAGF,GACE,aACA,mBAGF,GACE,mBAGF,GACE,mBAGF,GACE,kBAGF,GACE,iBAGF,qBAEE,kBEzCF,yBACE,GACE,UACA,yCAEF,IACE,UAEF,GACE,oCATJ,iBACE,GACE,UACA,yCAEF,IACE,UAEF,GACE,oCAIJ,4BACE,GACE,UACA,UAEF,GACE,SACA,WAPJ,oBACE,GACE,UACA,UAEF,GACE,SACA,WAIJ,6BACE,GACE,SACA,UAEF,GACE,UACA,WAPJ,qBACE,GACE,SACA,UAEF,GACE,UACA,WAIJ,wBACE,GACE,sDAEF,IACE,0DAEF,IACE,0DAEF,IACE,0DAEF,IACE,0DAEF,IACE,0DAEF,IACE,2DApBJ,gBACE,GACE,sDAEF,IACE,0DAEF,IACE,0DAEF,IACE,0DAEF,IACE,0DAEF,IACE,0DAEF,IACE,2DCjDJ,0CACE,kBACA,WACA,aLqDA,8CKxDF,0CAMI,wBLsCF,yBK5CF,0CAUI,wBAGF,yBAEE,iBACA,gBLbA,kIKgBA,mBAIJ,0FACE,gBFyBO,CExBP,mBAEA,uBAEE,kBACA,YACA,gBAOF,yBAEE,aACA,sBACA,mBACA,uBACA,4CANF,yBAQI,oBC7CJ,0CACE,aACA,sBACA,cAEA,yBNHA,mDMOE,sCACE,qBAGF,oCACE,cACA,kDACE,cAMR,cACE,qBAGF,qBACE,qBNzBA,mDM6BF,cACE,qBACA,iBACA,yBNhCA,mDMoCF,eACE,WACA,gBACA,mBNvCA,mDAkCF,qBMWE,qBN7CA,yDMkDF,uBACE,oBACA,eAIF,gBACE,aACA,cACA,4CACA,iBN1BF,mBM6BE,kBACE,WACA,YACA,SAGF,oBACE,WACA,YNvEF,sGM6EF,kBACE,aACA,mBN/EA,mDMkFA,oBACE,SACA,yBNlDJ,mBMsDE,sBACE,cACA,sBACA,eACA,gBACA,2BN7FF,qDM+FE,iBN7DJ,mBMmEI,qDNrGF,+DMuGI,aAEF,yDNzGF,iEM+GF,4BACE,aACA,mBACA,uBACA,eACA,gBNpHA,mDOJF,YPsCA,qBOpCE,kBACE,aPCF,yDQHJ,QACE,eACA,MACA,UACA,cACA,WACA,gBACA,iELsDW,CH1DT,kFAkCF,mBQ1BA,aACE,aACA,eACA,oBRXA,4FAyCF,yBQjCA,aAQI,aACA,mBACA,8BACA,iBAQF,uCACE,aACA,mBAEA,2BACE,eAKN,iBACE,cACA,mBACA,gBACA,cACA,iBLSK,CHnDL,0JQ+CF,kBACE,gBACA,cRfF,qBAlCE,mDQqDA,wBRrDA,gDQ2DF,gBACE,aACA,mBACA,eACA,mBAEA,wBACE,aACA,iBR1BJ,yBQwBE,wBAKI,eAKJ,+BACE,iBAGF,uBACE,aACA,iBRxCJ,yBQsCE,uBAKI,aACA,oBAGF,+BACE,sBACA,gBRjDN,yBQ+CI,+BAII,cAMR,sBACE,aACA,mBACA,yCLhEI,CKiEJ,kBACA,gBACA,gBAEA,0BACE,cACA,eACA,oBAKJ,gCAEE,wBACA,6HLnFG,CKoFH,gBACA,gBRvHA,mDAkCF,qBQ0FA,sBR5HE,gDQgIF,gBACE,iBACA,eACA,gBACA,iBLjFK,CKkFL,iEL3ES,CH1DT,oJAkCF,gCQuGE,sBRzIA,qFQ8IF,uBACE,aACA,cAEA,2BACE,WACA,YRpJF,qDQuJE,iCRvJF,kDQ8JF,gBACE,aACA,YACA,aACA,kBACA,cACA,oBACE,WACA,YACA,iBRvKF,qDAkCF,sBQyII,0BR3KF,kDQiLF,wBACE,YACA,aACA,eACA,cAEA,4BACE,WACA,YACA,iBR1LF,qDAkCF,sBQ4JI,kCACE,aR/LJ,kDQ6MA,0FACE,aC/MJ,+BACE,aACA,cACA,mBTFA,mDSKA,0CACE,eAGF,mCACE,WACA,YAIJ,gBACE,qBAGF,gBACE,eACA,kBToBF,yBStBA,gBAKI,qBACA,sBACA,gBACA,gBAEA,4BACE,cAGF,2BACE,gBCtCR,YACE,aACA,mBACA,8BVCE,mDUEF,cACE,mBACA,yBACE,cAEF,wBACE,eAIJ,cVsBA,qBUnBE,oBVfA,yDWNJ,MACE,kBACA,WACA,YACA,iBXgEA,mBW9DA,mBACA,gBACA,wBACA,sBXHE,kFAgEF,yBWtEF,MXuEI,mBW3DF,aACE,kBACA,MACA,OACA,WACA,YACA,WACA,2DAGF,sBACE,kBACA,QACA,WAEA,2BAGF,kBACE,iBACA,gBACA,WAGF,wBACE,SACA,kBACA,gBACA,2B","file":"critical.css","sourcesContent":["*,\n*:before,\n*:after {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n}\n\nbutton {\n cursor: pointer;\n background: none;\n border: none;\n}\n","@use '../abstracts/mixins';\n\n//-------------------------------------------\n// Custom Properties\n//-------------------------------------------\n\n// Bright Mode\n:root[color-mode='light'] {\n --text: #0a0a0a;\n --textInverse: #f5f5f5;\n --text1: #171717;\n --text2: #39393a;\n --text3: #5a5a5c;\n --text4: #9ea0a2;\n --surface: hsl(0, 0%, 92%);\n --surface1: hsl(0, 0%, 94%);\n --surface1-75: hsla(0, 0%, 94%, 0.75);\n --surface2: hsl(0, 0%, 96%);\n --surface3: hsl(0, 0%, 98%);\n --surface4: #ffffff;\n --primary: #0d48a0;\n --secondary: #a4002e;\n --three: #643791;\n --four: #8b1c76;\n --five: #a00053;\n --success: #48a00d;\n --error: #a40000;\n --error-hover: hsl(0, 100%, 16%);\n --gradient: linear-gradient(\n to right top,\n #0d48a0,\n #643791,\n #8b1c76,\n #a00053,\n #a4002e\n );\n --gradient-reverse: linear-gradient(\n to left top,\n #0d48a0,\n #643791,\n #8b1c76,\n #a00053,\n #a4002e\n );\n}\n\n// Dark Mode\n:root[color-mode='dark'] {\n --text: #f5f5f5;\n --textInverse: #0a0a0a;\n --text1: #e8e9e9;\n --text2: #c6c6c7;\n --text3: #a5a5a7;\n --text4: #616365;\n --surface: #181818;\n --surface1: #202020;\n --surface1-75: rgba(33, 33, 33, 0.75);\n --surface2: #282828;\n --surface3: #303030;\n --surface4: #383838;\n --primary: #80deea;\n --secondary: #ffab91;\n --three: #8cdbbf;\n --four: #b4d195;\n --five: #e0c081;\n --success: #b4d195;\n --error: hsl(0, 100%, 78%);\n --error-hover: hsl(0, 100%, 68%);\n --gradient: linear-gradient(\n to right top,\n #80deea,\n #8cdbbf,\n #b4d195,\n #e0c081,\n #ffab91\n );\n --gradient-reverse: linear-gradient(\n to left top,\n #80deea,\n #8cdbbf,\n #b4d195,\n #e0c081,\n #ffab91\n );\n}\n\n//-------------------------------------------\n// Global Styles\n//-------------------------------------------\nhtml {\n @include mixins.color-map(color, text);\n @include mixins.color-map(background-color, surface1);\n scroll-behavior: smooth;\n}\n\n//-------------------------------------------\n// Psuedoselectors\n//-------------------------------------------\n:link {\n color: currentColor;\n text-decoration: none;\n}\n\n:visited {\n color: currentColor;\n}\n\n::selection {\n color: #000000;\n background-color: #ccff00;\n}\n\n:target {\n @include mixins.navbar(padding-top);\n @include mixins.navbar(margin-top, $negative: true);\n}\n\n:focus {\n outline-width: 1px;\n outline-style: dotted;\n @include mixins.color-map(outline-color, text3);\n outline-offset: 3px;\n}\n\na:active,\nbutton:active {\n outline: none;\n}\n\n::-moz-focus-inner {\n border: none;\n outline: none;\n}\n","@use 'variables';\n//-------------------------------------------\n// Color\n//-------------------------------------------\n@mixin color-map($property, $color) {\n @if $color == transparent {\n #{$property}: $color;\n } @else {\n #{$property}: color($color);\n #{$property}: var(--#{$color}, color($color));\n }\n}\n\n@mixin outline {\n outline-width: 2px;\n outline-style: solid;\n @include color-map(outline-color, primary);\n outline-offset: 1px;\n}\n\n@mixin mesh {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n content: '';\n background: radial-gradient(var(--primary) 25%, transparent 50%),\n radial-gradient(var(--secondary) 25%, transparent 50%),\n radial-gradient(var(--three) 25%, transparent 50%),\n radial-gradient(var(--four) 25%, transparent 50%),\n radial-gradient(var(--five) 25%, transparent 50%);\n background-repeat: no-repeat;\n background-position: 0 0, 0 100%, 50% 0, 50% 25%, 50% 100%;\n background-size: 60% 80%, 70% 80%, 80% 80%, 60% 60%, 80% 80%;\n transition: background-position 2s;\n transform: scale(4);\n}\n//-------------------------------------------\n// Transition\n//-------------------------------------------\n@mixin transition($property) {\n transition: $property 0.2s;\n}\n\n//-------------------------------------------\n// Breakpoints\n//-------------------------------------------\n@mixin respond-above($breakpoint) {\n @media (min-width: $breakpoint) {\n @content;\n }\n}\n\n@mixin respond-below($breakpoint) {\n @media (max-width: $breakpoint) {\n @content;\n }\n}\n\n@mixin respond-between($min, $max) {\n @media (min-width: $min) and (max-width: $max - 1) {\n @content;\n }\n}\n\n//-------------------------------------------\n// Layout\n//-------------------------------------------\n@mixin navbar($property, $negative: false, $increase: 0) {\n #{$property}: 3.25rem + $increase;\n\n @media (min-width: variables.$laptop) {\n #{$property}: 5.5rem + $increase;\n }\n\n @if $negative {\n #{$property}: -3.25rem + -$increase;\n\n @media (min-width: variables.$laptop) {\n #{$property}: -5.5rem + -$increase;\n }\n }\n}\n\n@mixin inner-container {\n max-width: variables.$laptop;\n margin: 0 auto 1rem;\n}\n\n@mixin outer-container {\n position: relative;\n width: 100%;\n padding: 1rem;\n\n @include respond-between(variables.$tablet, variables.$laptop) {\n padding: 1rem 3rem 2rem;\n }\n\n @include respond-above(variables.$laptop) {\n padding: 1rem 4rem 2rem;\n }\n}\n\n@mixin grid {\n display: grid;\n gap: 1.5rem;\n}\n","html {\n font-size: 1rem;\n font-size: clamp(\n 1rem,\n 0.9090909090909091rem + 0.45454545454545453vw,\n 1.25rem\n );\n font-weight: 400;\n line-height: 1.5;\n text-rendering: optimizeLegibility;\n}\n","//-------------------------------------------\n// Tyopgraphy\n//-------------------------------------------\n@use '../abstracts/variables';\n\nh1,\nh2,\nh3,\nh4,\nh5 {\n margin: 3rem 0 1.38rem;\n font-family: variables.$serif;\n font-weight: 400;\n font-variant-ligatures: common-ligatures;\n line-height: 1.2;\n font-display: optional;\n}\n\nh1 {\n margin-top: 0;\n font-size: 2.488rem;\n}\n\nh2 {\n font-size: 2.074rem;\n}\n\nh3 {\n font-size: 1.728rem;\n}\n\nh4 {\n font-size: 1.44rem;\n}\n\nh5 {\n font-size: 1.2rem;\n}\n\nsmall,\n.sm-text-small {\n font-size: 0.833rem;\n}\n","//-------------------------------------------\n// Colors\n//-------------------------------------------\n// Social Media\n$ch: #6441a5; //Twitch\n$fb: #1877f2;\n$gh: #4078c0;\n$gl: #fca326;\n$ig: #c13584;\n$li: #0077b5;\n$rs: #f26522; //RSS\n$tw: #1da1f2;\n$yt: #ff0000;\n\n// Fallbacks (defaults to Dark Mode)\n$colors: (\n 'text': #f5f5f5,\n 'textInverse': #0a0a0a,\n 'text1': #e8e9e9,\n 'text2': #c7c7c8,\n 'text3': #a5a5a7,\n 'text4': #616264,\n 'surface': #181818,\n 'surface1': #202020,\n 'surface1-75': rgba(33, 33, 33, 0.75),\n 'surface2': #282828,\n 'surface3': #303030,\n 'surface4': #383838,\n 'primary': #80deea,\n 'secondary': #ffab91,\n 'three': #8cdbbf,\n 'four': #b4d195,\n 'five': #e0c081,\n 'success': #b4d195,\n 'error': hsl(0, 100%, 78%),\n 'error-hover': hsl(0, 100%, 68%),\n 'gradient':\n linear-gradient(to right top, #80deea, #8cdbbf, #b4d195, #e0c081, #ffab91),\n);\n\n//-------------------------------------------\n// Fonts\n//-------------------------------------------\n$sans: 'Lato', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen,\n ubuntu, cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n\n$serif: 'DM Serif Text', georgia, serif;\n$mono: 'JetBrains Mono', 'Roboto Mono', 'IBM Plex Mono', 'Cascadia Code',\n 'Droid Sans Mono', 'Fira Mono', 'Fira Code', consolas, monospace;\n//-------------------------------------------\n// Sizes, Breakpoints, Variables\n//-------------------------------------------\n\n// Breakpoints\n$tablet: 640px;\n$laptop: 1024px;\n$desktop: 1280px;\n\n// Sizes\n$base: 9rem;\n$radius: 4px;\n\n// Box Shadow\n$box-shadow-large: 3px 3px 4px rgba(0, 0, 0, 0.12),\n -3px 2px 4px rgba(0, 0, 0, 0.12), 5px 10px 15px rgba(0, 0, 0, 0.14),\n -5px 5px 15px rgba(0, 0, 0, 0.14);\n\n$box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n\n$transition: 0.2s;\n","@keyframes popup {\n 0% {\n opacity: 0;\n transform: translate(-50%, 20px) scale(0.8);\n }\n 75% {\n opacity: 1;\n }\n 100% {\n transform: translate(-50%, 0) scale(1);\n }\n}\n\n@keyframes slide-in {\n 0% {\n top: -100%;\n opacity: 0;\n }\n 100% {\n top: 1rem;\n opacity: 1;\n }\n}\n\n@keyframes slide-out {\n 0% {\n top: 1rem;\n opacity: 1;\n }\n 100% {\n top: -100%;\n opacity: 0;\n }\n}\n\n@keyframes mesh {\n 0% {\n background-position: 0 0, 0 100%, 50% 0, 50% 25%, 50% 100%;\n }\n 15% {\n background-position: 1% 1%, 1% 101%, 51% 1%, 51% 26%, 51% 101%;\n }\n 30% {\n background-position: 2% 2%, 2% 102%, 52% 2%, 52% 26%, 52% 102%;\n }\n 45% {\n background-position: 3% 3%, 3% 103%, 53% 3%, 53% 27%, 53% 103%;\n }\n 60% {\n background-position: 4% 4%, 4% 104%, 54% 4%, 54% 28%, 54% 104%;\n }\n 75% {\n background-position: 5% 5%, 5% 105%, 55% 5%, 55% 29%, 55% 105%;\n }\n 90% {\n background-position: 6% 6%, 6% 106%, 56% 6%, 56% 30%, 56% 106%;\n }\n}\n","//-------------------------------------------\n// Containers\n//-------------------------------------------\n@use '../abstracts/variables';\n@use '../abstracts/mixins';\n\n.outer-container {\n position: relative;\n width: 100%;\n padding: 1rem;\n\n @include mixins.respond-between(variables.$tablet, variables.$laptop) {\n padding: 1rem 3rem 2rem;\n }\n\n @include mixins.respond-above(variables.$laptop) {\n padding: 1rem 4rem 2rem;\n }\n\n &--footer {\n @extend .outer-container;\n min-height: 250px;\n font-size: 0.9rem;\n @include mixins.color-map(background-color, surface);\n @include mixins.color-map(color, text1);\n border-bottom: none;\n }\n}\n\n.inner-container {\n max-width: variables.$laptop;\n margin: 0 auto 1rem;\n\n &--hero {\n @extend .inner-container;\n position: relative;\n height: 100%;\n margin-bottom: 0;\n }\n\n &--footer {\n @extend .inner-container;\n }\n\n &--author {\n @extend .inner-container;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding-bottom: 1rem;\n @include mixins.respond-above(variables.$tablet) {\n flex-direction: row;\n }\n }\n}\n","//-------------------------------------------\n// Global Footer Styles\n//-------------------------------------------\n@use '../abstracts/variables';\n@use '../abstracts/mixins';\n\n.footer {\n &__section {\n display: flex;\n flex-direction: column;\n padding: 0.5rem;\n\n &--latest {\n @extend .footer__section;\n @include mixins.color-map(color, text1);\n\n &:nth-child(3) {\n padding-bottom: 0.5rem;\n }\n\n &:last-child {\n padding-top: 0;\n & > p:first-child {\n display: block;\n }\n }\n }\n }\n\n &__link {\n margin-bottom: 0.15rem;\n }\n\n &__description {\n margin-bottom: 0.25rem;\n @include mixins.color-map(color, text2);\n }\n\n &__date {\n margin-bottom: 0.25rem;\n font-size: 0.75rem;\n text-transform: uppercase;\n @include mixins.color-map(color, text3);\n }\n\n &__title {\n width: 100%;\n max-width: 12rem;\n margin-bottom: 1rem;\n\n @include mixins.color-map(color, text2);\n\n @include mixins.transition(color);\n\n &:hover {\n @include mixins.color-map(color, primary);\n }\n }\n\n &__header--serif {\n margin-bottom: 0.5rem;\n font-size: 115%;\n // @extend .serif;\n }\n\n &__social {\n display: grid;\n grid-gap: 1rem;\n grid-template-columns: repeat(auto-fit, 1rem);\n margin-top: 0.5rem;\n @include mixins.transition(all);\n\n a {\n width: 1rem;\n height: 1rem;\n margin: 0;\n }\n\n svg {\n width: 100%;\n height: 100%;\n @include mixins.color-map(stroke, text2);\n @include mixins.color-map(fill, text2);\n }\n }\n\n &__card-tag {\n display: flex;\n align-items: center;\n @include mixins.color-map(color, text2);\n\n p {\n margin: 0;\n text-transform: uppercase;\n @include mixins.transition(all);\n }\n\n svg {\n flex-shrink: 0;\n align-self: flex-start;\n width: 0.9375rem;\n height: 0.9375rem;\n transform: translateY(0.2em);\n @include mixins.color-map(stroke, text2);\n stroke-width: 2px;\n @include mixins.transition(all);\n }\n\n &:hover,\n &:active {\n p {\n @include mixins.color-map(color, secondary);\n outline: none;\n }\n svg {\n @include mixins.color-map(stroke, secondary);\n }\n }\n }\n\n &__published-by-ghost {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0.15rem;\n font-size: 0.8rem;\n @include mixins.color-map(color, text3);\n }\n}\n","//-------------------------------------------\n// Mobile Nav Menu\n//-------------------------------------------\n@use '../abstracts/mixins';\n.menu {\n &__link {\n @include mixins.transition(color);\n &:focus {\n outline: none;\n @include mixins.color-map(color, primary);\n }\n }\n}\n","//-------------------------------------------\n// Navbar\n//-------------------------------------------\n@use '../abstracts/variables';\n@use '../abstracts/mixins';\n\n.navbar {\n position: fixed;\n top: 0;\n z-index: 5;\n display: block;\n width: 100%;\n font-size: 0.9rem;\n box-shadow: variables.$box-shadow;\n @include mixins.color-map(background-color, surface2);\n @include mixins.transition(all);\n\n &__top {\n display: none;\n height: 2.25rem;\n padding: 0.25rem 1rem;\n border-bottom: 1px solid;\n @include mixins.color-map(border-bottom-color, surface4);\n\n @include mixins.respond-above(variables.$laptop) {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.8rem;\n }\n\n &--left {\n display: flex;\n align-items: center;\n }\n\n &--right {\n display: flex;\n align-items: center;\n\n button {\n margin-right: 0;\n }\n }\n }\n\n &__new-tag {\n padding: 0.15em;\n margin-right: 0.35em;\n font-size: 0.85em;\n line-height: 1;\n border-radius: variables.$radius;\n @include mixins.color-map(color, textInverse);\n @include mixins.color-map(background-color, secondary);\n }\n\n &__new-link {\n font-size: 0.95em;\n line-height: 1;\n @include mixins.transition(color);\n @include mixins.color-map(color, text2);\n\n &:hover {\n @include mixins.color-map(color, text);\n }\n }\n\n // Bottom navbar -> Brand, Links, Member\n &__bottom {\n display: flex;\n align-items: center;\n height: 3.25rem;\n padding: 0.5rem 1rem;\n\n &--center {\n display: none;\n margin-left: 2rem;\n\n @include mixins.respond-above(variables.$laptop) {\n display: block;\n }\n }\n\n // If member functionality isn't enabled, then shift nav links to far right\n div:last-child {\n margin-left: auto;\n }\n\n &--right {\n display: none;\n margin-left: auto;\n\n @include mixins.respond-above(variables.$laptop) {\n display: flex;\n align-items: center;\n }\n\n &--mobile {\n margin: 0.5rem 0 0 auto;\n line-height: 1.6;\n @include mixins.respond-above(variables.$laptop) {\n display: none;\n }\n }\n }\n }\n\n &__brand--serif {\n display: flex;\n align-items: center;\n font-family: variables.$serif;\n font-size: 1.25rem;\n font-weight: 400;\n line-height: 1.6;\n\n img {\n width: 1.25rem;\n height: 1.25rem;\n margin-right: 0.25rem;\n }\n }\n\n // Member button styling\n &__signin,\n &__signup {\n margin: 0.31rem 0.5rem 0 0;\n font-family: variables.$sans;\n font-size: 0.8rem;\n line-height: 1.8;\n @include mixins.color-map(color, text2);\n @include mixins.transition(color);\n }\n\n &__signin:hover {\n @include mixins.color-map(color, text);\n }\n\n &__signup {\n padding: 0 0.25rem;\n margin-right: 0;\n font-weight: 700;\n border-radius: variables.$radius;\n box-shadow: variables.$box-shadow;\n @include mixins.color-map(color, textInverse);\n @include mixins.color-map(background-color, primary);\n @include mixins.transition(background-color);\n &:hover {\n @include mixins.color-map(background-color, secondary);\n }\n }\n\n &__hamburger-btn {\n width: 1.5rem;\n height: 1.5rem;\n\n svg {\n width: 100%;\n height: 100%;\n @include mixins.color-map(stroke, text2);\n\n &:hover {\n @include mixins.color-map(stroke, text);\n }\n }\n }\n\n // Search button\n &__search {\n display: none;\n width: 1.5em;\n height: 1.5em;\n margin-left: 0.5rem;\n line-height: 1;\n svg {\n width: 100%;\n height: 100%;\n fill: transparent;\n @include mixins.color-map(stroke, text2);\n @include mixins.transition(stroke);\n\n &:hover {\n @include mixins.color-map(stroke, text);\n }\n }\n }\n\n .color-mode-btn {\n width: 1.5em;\n height: 1.5em;\n margin: 0 0.5rem;\n line-height: 1;\n\n svg {\n width: 100%;\n height: 100%;\n fill: transparent;\n @include mixins.color-map(stroke, text2);\n @include mixins.transition(stroke);\n\n &:hover {\n fill: #eee8aa;\n @include mixins.color-map(stroke, text);\n }\n }\n }\n}\n\n.color-mode-btn {\n &.light {\n :root[color-mode='light'] & {\n display: none;\n }\n }\n &.dark {\n :root[color-mode='dark'] & {\n display: none;\n }\n }\n}\n","//-------------------------------------------\n// Navigation Partial\n//-------------------------------------------\n@use '../abstracts/variables';\n@use '../abstracts/mixins';\n\n.navigation {\n // Social Media icons in footer\n &__social-media-item {\n width: 1.25em;\n height: 1.25em;\n margin-right: 0.5rem;\n @include mixins.color-map(color, text2);\n\n &:last-child {\n margin-right: 0;\n }\n\n svg {\n width: 100%;\n height: 100%;\n }\n }\n // Nav links\n &__ul {\n list-style-type: none;\n }\n\n &__li {\n margin: 0.5rem 0;\n font-size: 1.25rem;\n\n @include mixins.respond-above(variables.$laptop) {\n display: inline-block;\n margin: 0.31rem 0.5rem 0;\n font-size: 0.9rem;\n line-height: 1.6;\n\n &:first-child {\n margin-left: 0;\n }\n\n &:last-child {\n margin-right: 0;\n }\n }\n }\n}\n","//-------------------------------------------\n// Pagination\n//-------------------------------------------\n@use '../abstracts/mixins';\n\n.pagination {\n display: flex;\n align-items: center;\n justify-content: space-between;\n @include mixins.color-map(color, text2);\n\n > * {\n margin: 2rem 1rem 0;\n &:first-child {\n margin-left: 0;\n }\n &:last-child {\n margin-right: 0;\n }\n }\n\n a {\n @include mixins.transition(color);\n\n &:hover {\n @include mixins.color-map(color, primary);\n }\n }\n}\n","@use '../abstracts/variables';\n@use '../abstracts/mixins';\n\n.hero {\n position: relative;\n width: 100%;\n height: 50vh;\n min-height: 12rem;\n @include mixins.navbar(margin-top);\n margin-bottom: 2rem;\n overflow: hidden;\n background-position: center;\n background-size: cover;\n @include mixins.color-map(background-color, surface1);\n\n &::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n content: '';\n background: radial-gradient(rgba(#000, 0.25), rgba(#000, 0.5));\n }\n\n &__text-container {\n position: absolute;\n top: 50%;\n width: 100%;\n\n transform: translateY(-50%);\n }\n\n &__site-title {\n margin: 0 0 0.5rem;\n line-height: 1.1;\n color: #ffffff;\n }\n\n &__site-description {\n margin: 0;\n font-size: 1.25rem;\n line-height: 1.2;\n color: rgba(238, 238, 238, 0.75);\n }\n}\n"],"sourceRoot":""} \ No newline at end of file diff --git a/default.hbs b/default.hbs index 8edaf30f..98d2a3aa 100644 --- a/default.hbs +++ b/default.hbs @@ -18,7 +18,7 @@ - diff --git a/home.hbs b/home.hbs index be0ce84d..a679b0d5 100644 --- a/home.hbs +++ b/home.hbs @@ -25,11 +25,13 @@ into the {body} of the default.hbs template --}} } {{/if}} -
-
-

{{@site.title}}

-

{{@site.description}} -

+
+
+
+

{{@site.title}}

+

{{@site.description}} +

+
diff --git a/src/scss/layout/_container.scss b/src/scss/layout/_container.scss index 46559504..62c7e7b8 100644 --- a/src/scss/layout/_container.scss +++ b/src/scss/layout/_container.scss @@ -31,6 +31,13 @@ max-width: variables.$laptop; margin: 0 auto 1rem; + &--hero { + @extend .inner-container; + position: relative; + height: 100%; + margin-bottom: 0; + } + &--footer { @extend .inner-container; } diff --git a/src/scss/pages/_hero.scss b/src/scss/pages/_hero.scss index 92e6f351..51679a0d 100644 --- a/src/scss/pages/_hero.scss +++ b/src/scss/pages/_hero.scss @@ -26,20 +26,9 @@ &__text-container { position: absolute; top: 50%; - left: 50%; width: 100%; - max-width: variables.$laptop; - padding: 1rem; - @include mixins.respond-between(variables.$tablet, variables.$laptop) { - padding: 1rem 3rem 2rem; - } - - @include mixins.respond-above(variables.$laptop) { - padding: 0; - } - - transform: translate(-50%, -50%); + transform: translateY(-50%); } &__site-title {