From 9bb618005a3377f8e9c92f85258d99bdab012646 Mon Sep 17 00:00:00 2001
From: RiedleroD <github@riedler.wien>
Date: Wed, 10 May 2023 21:11:21 +0200
Subject: [PATCH] optimized main.scss for scss (if we have the capabilities,
 why not use them?)

---
 themes/hugo-casper3/assets/scss/main.scss | 1962 +++++++++++----------
 1 file changed, 1011 insertions(+), 951 deletions(-)

diff --git a/themes/hugo-casper3/assets/scss/main.scss b/themes/hugo-casper3/assets/scss/main.scss
index 01fe1ae..2bba09b 100644
--- a/themes/hugo-casper3/assets/scss/main.scss
+++ b/themes/hugo-casper3/assets/scss/main.scss
@@ -13,11 +13,12 @@ ol,ul{
     list-style:none
 }
 blockquote,q{
-    quotes:none
-}
-blockquote:after,blockquote:before,q:after,q:before{
-    content:"";
-    content:none
+    quotes:none;
+    &:after,
+    &:before{
+        content:"";
+        content:none;
+    }
 }
 img{
     max-width:100%
@@ -34,10 +35,16 @@ html{
     box-sizing:inherit
 }
 a{
-    background-color:transparent
-}
-a:active,a:hover{
-    outline:0
+    color:#26a8ed;
+    text-decoration:none;
+    background-color:transparent;
+    &:active,
+    &:hover{
+        outline:0
+    }
+    &:hover{
+        text-decoration:underline
+    }
 }
 b,strong{
     font-weight:700
@@ -89,36 +96,38 @@ button{
 button,select{
     text-transform:none
 }
-button,html input[type=button],input[type=reset],input[type=submit]{
+button,input[type=button],input[type=reset],input[type=submit]{
     cursor:pointer;
-    -webkit-appearance:button
-}
-button[disabled],html input[disabled]{
-    cursor:default
+    -webkit-appearance:button;
+    &[disabled]{
+        cursor:default;
+    }
 }
 button::-moz-focus-inner,input::-moz-focus-inner{
     padding:0;
     border:0
 }
 input{
-    line-height:normal
-}
-input:focus{
-    outline:none
+    line-height:normal;
+    &:focus{
+        outline:none
+    }
 }
 input[type=checkbox],input[type=radio]{
     box-sizing:border-box;
     padding:0
 }
-input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button{
     height:auto
 }
 input[type=search]{
     box-sizing:content-box;
-    -webkit-appearance:textfield
-}
-input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{
-    -webkit-appearance:none
+    -webkit-appearance:textfield;
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-decoration{
+        -webkit-appearance:none;
+    }
 }
 legend{
     padding:0;
@@ -144,6 +153,7 @@ body,html{
 }
 body{
     color:#e5e5e5;
+    background:#1e1e1e;
     font-family:-apple-system,BlinkMacSystemFont,Segoe UI,"Roboto",Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
     font-size:1.6rem;
     line-height:1.6em;
@@ -186,10 +196,11 @@ blockquote,dl,ol,p,ul{
 }
 ol,ul{
     padding-left:1.3em;
-    padding-right:1.5em
-}
-ol ol,ol ul,ul ol,ul ul{
-    margin:.5em 0 1em
+    padding-right:1.5em;
+    max-width:100%;
+    & &{
+        margin:.5em 0 1em;
+    }
 }
 ul{
     list-style:disc
@@ -197,9 +208,6 @@ ul{
 ol{
     list-style:decimal
 }
-ol,ul{
-    max-width:100%
-}
 li{
     margin:.5em 0;
     padding-left:.3em;
@@ -220,34 +228,27 @@ dd{
 blockquote{
     margin:1.5em 0;
     padding:0 1.6em;
-    border-left:.5em solid #e5eff5
-}
-blockquote p{
-    margin:.8em 0;
-    font-size:1.2em;
-    font-weight:300
-}
-blockquote small{
-    display:inline-block;
-    margin:.8em 0 .8em 1.5em;
-    font-size:.9em;
-    opacity:.8
-}
-blockquote small:before{
-    content:"\2014 \00A0"
-}
-blockquote cite{
-    font-weight:700
-}
-blockquote cite a{
-    font-weight:400
-}
-a{
-    color:#26a8ed;
-    text-decoration:none
-}
-a:hover{
-    text-decoration:underline
+    border-left:.5em solid #e5eff5;
+    & p{
+        margin:.8em 0;
+        font-size:1.2em;
+        font-weight:300;
+    }
+    & small{
+        display:inline-block;
+        margin:.8em 0 .8em 1.5em;
+        font-size:.9em;
+        opacity:.8;
+        &:before{
+            content:"\2014 \00A0";
+        }
+    }
+    & cite{
+        font-weight:700;
+        & a{
+            font-weight:400;
+        }
+    }
 }
 h1,h2,h3,h4,h5,h6{
     margin-top:0;
@@ -294,9 +295,6 @@ h5,h6{
     font-size:1.4rem;
     font-weight:500
 }
-body{
-    background:#1e1e1e
-}
 .img{
     display:block;
     width:100%;
@@ -344,28 +342,31 @@ body{
     padding-bottom:12px;
     color:#fff;
     background:#090a0b no-repeat 20%;
-    background-size:cover
-}
-.site-header-background:before{
-    bottom:0;
-    background:rgba(0,0,0,0)
-}
-.site-header-background:after,.site-header-background:before{
-    content:"";
-    position:absolute;
-    top:0;
-    right:0;
-    left:0;
-    z-index:10;
-    display:block
-}
-.site-header-background:after{
-    bottom:auto;
-    height:140px;
-    background:linear-gradient(rgba(0,0,0,0),transparent)
-}
-.site-header-background.no-image:after,.site-header-background.no-image:before{
-    display:none
+    background-size:cover;
+    &:after,
+    &:before{
+        content:"";
+        position:absolute;
+        top:0;
+        right:0;
+        left:0;
+        z-index:10;
+        display:block;
+    }
+    &:before{
+        bottom:0;
+        background:rgba(0,0,0,0);
+    }
+    &:after{
+        bottom:auto;
+        height:140px;
+        background:linear-gradient(rgba(0,0,0,0),transparent);
+    }
+    .no-image{
+        &:after,&:before{
+            display:none;
+        }
+    }
 }
 .site-header-content{
     z-index:100;
@@ -411,58 +412,62 @@ body{
     opacity:1
 }
 .site-home-header{
-    z-index:1000
+    z-index:1000;
+    & .site-header-background{
+        margin-top:0;
+        height:900px;
+    }
+    & .site-header-content{
+        padding:5vw 3vw 6vw;
+    }
+    & .site-title{
+        font-size:5.5rem;
+    }
+    & .site-description{
+        font-size:2.2rem;
+        font-weight:300;
+    }
 }
-.site-home-header .site-header-background{
-    margin-top:0;
-    height:900px
-}
-.site-home-header .site-header-content{
-    padding:5vw 3vw 6vw
-}
-.site-home-header .site-title{
-    font-size:5.5rem;
-}
-.site-home-header .site-description{
-    font-size:2.2rem;
-    font-weight:300
-}
-.site-archive-header .site-header-content{
-    position:relative;
-    align-items:stretch;
-    padding:12vw 0 20px;
-    min-height:200px;
-    max-height:600px
-}
-.site-archive-header .no-image{
-    padding-top:0;
-    padding-bottom:0;
-    color:#15171a;
-    background:#fff;
-    opacity:1
-}
-.site-archive-header .no-image .site-description{
-    color:#000000;
-    opacity:1
-}
-.site-archive-header .no-image .site-header-content{
-    padding:5vw 0 10px;
-    border-bottom:1px solid #e9eef1
+.site-archive-header {
+    & .site-header-content{
+        position:relative;
+        align-items:stretch;
+        padding:12vw 0 20px;
+        min-height:200px;
+        max-height:600px;
+    }
+    & .no-image{
+        padding-top:0;
+        padding-bottom:0;
+        color:#15171a;
+        background:#fff;
+        opacity:1;
+        & .site-description{
+            color:#000000;
+            opacity:1
+        }
+        & .site-header-content{
+            padding:5vw 0 10px;
+            border-bottom:1px solid #e9eef1;
+        }
+    }
 }
 @media (max-width:900px){
     .site-header-content{
-        padding-bottom:9vw
+        padding-bottom:9vw;
     }
 }
 @media (max-width:500px){
-    .site-home-header .site-title{
-        font-size:3.2rem
-    }
-    .site-home-header .site-description{
-        font-size:1.8rem
+    .site-home-header{
+        & .site-title{
+            font-size:3.2rem;
+        }
+        & .site-description{
+            font-size:1.8rem;
+        }
     }
     .site-archive-header .site-header-content{
-        min-height:unset
+        min-height:unset;
     }
 }
 .site-nav-main{
@@ -481,7 +486,8 @@ body{
     height:64px;
     font-size:1.5rem
 }
-.site-nav,.site-nav-left{
+.site-nav,
+.site-nav-left{
     display:flex;
     overflow-y:hidden
 }
@@ -524,7 +530,18 @@ body{
     line-height:1.8rem;
     font-weight:700;
     letter-spacing:-.5px;
-    text-transform:none
+    text-transform:none;
+    &:hover{
+        text-decoration:none
+    }
+    .site-home-header &{
+        display:none;
+    }
+    & img{
+        display:block;
+        width:auto;
+        height:21px
+    }
 }
 .site-nav-pill{
     position:relative;
@@ -539,23 +556,12 @@ body{
     line-height:1.8rem;
     font-weight:700;
     letter-spacing:-.5px;
-    text-transform:none
-}
-.site-nav-pill img{
-    display:block;
-    width:auto;
-    height:16px
-}
-.site-nav-logo:hover{
-    text-decoration:none
-}
-.site-nav-logo img{
-    display:block;
-    width:auto;
-    height:21px
-}
-.site-home-header .site-nav-logo{
-    display:none
+    text-transform:none;
+    & img{
+        display:block;
+        width:auto;
+        height:16px
+    }
 }
 .site-nav-content{
     position:relative;
@@ -570,44 +576,39 @@ body{
     list-style:none;
     transition:all 1s cubic-bezier(.19,1,.22,1);
     font-family:"Mustica Pro","Roboto",sans-serif;
-    margin-top:-2px
-}
-.nav li{
-    display:block;
-    margin:0;
-    padding:0
-}
-.nav li a{
-    position:relative;
-    display:block;
-    padding:12px;
-    color:#fff;
-    opacity:.8;
-    transition:opacity .35s ease-in-out
-}
-.nav li a:hover{
-    text-decoration:none;
-    opacity:1
-}
-.nav li a:before{
-    content:"";
-    position:absolute;
-    right:100%;
-    bottom:8px;
-    left:12px;
-    height:1px;
-    background:#fff;
-    opacity:.25;
-    transition:all .35s ease-in-out
-}
-.nav li a:hover:before{
-    right:12px;
-    opacity:.5
-}
-.nav-post-title-active .nav{
-    visibility:hidden;
-    opacity:0;
-    transform:translateY(-175%)
+    margin-top:-2px;
+    & li{
+        display:block;
+        margin:0;
+        padding:0;
+        & a{
+            position:relative;
+            display:block;
+            padding:12px;
+            color:#fff;
+            opacity:.8;
+            transition:opacity .35s ease-in-out;
+            &:before{
+                content:"";
+                position:absolute;
+                right:100%;
+                bottom:8px;
+                left:12px;
+                height:1px;
+                background:#fff;
+                opacity:.25;
+                transition:all .35s ease-in-out;
+            }
+            &:hover{
+                text-decoration:none;
+                opacity:1;
+                &:before{
+                    right:12px;
+                    opacity:.5;
+                }
+            }
+        }
+    }
 }
 .nav-post-title{
     visibility:hidden;
@@ -619,25 +620,33 @@ body{
     text-transform:none;
     opacity:0;
     transition:all 1s cubic-bezier(.19,1,.22,1);
-    transform:translateY(175%)
-}
-.nav-post-title.dash{
-    left:-25px
-}
-.nav-post-title.dash:before{
-    content:"– ";
-    opacity:.5
-}
-.nav-post-title-active .nav-post-title{
-    visibility:visible;
-    opacity:1;
-    transform:translateY(0)
+    transform:translateY(175%);
+    &.dash{
+        left:-25px;
+        &:before{
+            content:"– ";
+            opacity:.5;
+        }
+    }
+    &-active{
+        & .nav{
+            visibility:hidden;
+            opacity:0;
+            transform:translateY(-175%);
+        }
+        & .nav-post-title{
+            visibility:visible;
+            opacity:1;
+            transform:translateY(0)
+        }
+    }
 }
 .site-nav-right{
     padding:10px 0;
     height:64px
 }
-.site-nav-right,.social-links{
+.site-nav-right,
+.social-links{
     flex-shrink:0;
     display:flex;
     align-items:center
@@ -649,16 +658,17 @@ body{
     display:inline-block;
     margin:0;
     padding:10px;
-    opacity:.8
+    opacity:.8;
+    &:hover{
+        opacity:1;
+    }
+    & svg{
+        height:1.8rem;
+        fill:#fff;
+    }
 }
-.social-link:hover{
-    opacity:1
-}
-.social-link svg{
-    height:1.8rem;
-    fill:#fff
-}
-.social-link-fb svg,.social-link-wb svg{
+.social-link-fb svg,
+.social-link-wb svg{
     height:1.6rem
 }
 .social-link-wb svg path{
@@ -668,26 +678,26 @@ body{
     height:1.9rem
 }
 .rss-button{
-    opacity:.8
-}
-.rss-button:hover{
-    opacity:1
-}
-.rss-button svg{
-    margin-bottom:1px;
-    height:2.1rem;
-    fill:#fff
+    opacity:.8;
+    &:hover{
+        opacity:1
+    }
+    & svg{
+        margin-bottom:1px;
+        height:2.1rem;
+        fill:#fff
+    }
 }
 .home-template .site-nav-main{
-    z-index:100
-}
-.home-template .site-nav-main .site-nav{
-    opacity:0;
-    transition:all .5s cubic-bezier(.19,1,.22,1) 0s
-}
-.home-template .site-nav-main .fixed-nav-active{
-    opacity:1;
-    transition:all .5s cubic-bezier(.19,1,.22,1) .05s
+    z-index:100;
+    & .site-nav{
+        opacity:0;
+        transition:all .5s cubic-bezier(.19,1,.22,1) 0s
+    }
+    & .fixed-nav-active{
+        opacity:1;
+        transition:all .5s cubic-bezier(.19,1,.22,1) .05s
+    }
 }
 @media (max-width:700px){
     .site-home-header .site-nav{
@@ -714,7 +724,8 @@ body{
     padding:50px 0 0;
     background:#1e1e1e
 }
-.post-card,.post-feed{
+.post-card,
+.post-feed{
     position:relative;
     display:flex
 }
@@ -781,17 +792,22 @@ body{
 .post-card-excerpt{
     max-width:56em;
     color:#e5e5e5;
-    font-family:"Mustica Pro","Roboto",serif
-}
-.post-card-excerpt p{
-    margin-bottom:.5em
+    font-family:"Mustica Pro","Roboto",serif;
+    & p{
+        margin-bottom:.5em
+    }
 }
 .post-card-meta{
     display:flex;
     align-items:flex-start;
-    padding:0
+    padding:0;
+    & .avatar-wrapper,
+    & .profile-image-wrapper{
+        position:relative
+    }
 }
-.author-profile-image,.avatar-wrapper{
+.author-profile-image,
+.avatar-wrapper{
     display:block;
     width:100%;
     height:100%;
@@ -799,9 +815,6 @@ body{
     -o-object-fit:cover;
     object-fit:cover
 }
-.post-card-meta .avatar-wrapper,.post-card-meta .profile-image-wrapper{
-    position:relative
-}
 .author-list{
     display:flex;
     flex-wrap:wrap;
@@ -839,11 +852,11 @@ body{
     opacity:0;
     transition:all .35s cubic-bezier(.4,.01,.165,.99);
     transform:translateY(6px);
-    pointer-events:none
-}
-.author-list-item:hover .author-name-tooltip{
-    opacity:1;
-    transform:translateY(0)
+    pointer-events:none;
+    .author-list-item:hover &{
+        opacity:1;
+        transform:translateY(0)
+    }
 }
 @media (max-width:700px){
     .author-name-tooltip{
@@ -859,22 +872,22 @@ body{
     font-size:1.2rem;
     line-height:1.4em;
     font-weight:400;
-    letter-spacing:.2px
-}
-.post-card-byline-content span{
-    margin:0
-}
-.post-card-byline-content a{
-    color:#424852;
-    font-weight:600
+    letter-spacing:.2px;
+    & span{
+        margin:0
+    }
+    & a{
+        color:#424852;
+        font-weight:600
+    }
 }
 .post-card-byline-date{
-    font-size:1.3rem
-}
-.post-card-byline-date .bull{
-    display:inline-block;
-    margin:0 4px;
-    opacity:.6
+    font-size:1.3rem;
+    & .bull{
+        display:inline-block;
+        margin:0 4px;
+        opacity:.6
+    }
 }
 .single-author-byline{
     display:flex;
@@ -887,10 +900,10 @@ body{
 }
 .single-author{
     display:flex;
-    align-items:center
-}
-.single-author .static-avatar{
-    margin-left:-2px
+    align-items:center;
+    & .static-avatar{
+        margin-left:-2px
+    }
 }
 .single-author-name{
     display:inline-block
@@ -901,40 +914,41 @@ body{
         flex-direction:row;
         padding-bottom:40px;
         min-height:280px;
-        border-top:0
-    }
-    .post-card-large:hover{
-        border-bottom-color:#e3e9ed
-    }
-    .post-card-large:not(.no-image) .post-card-header{
-        margin-top:0
-    }
-    .post-card-large .post-card-image-link{
-        position:relative;
-        flex:1 1 auto;
-        margin-bottom:0;
-        min-height:380px
-    }
-    .post-card-large .post-card-image{
-        position:absolute;
-        width:100%;
-        height:100%
-    }
-    .post-card-large .post-card-content{
-        flex:0 1 361px;
-        justify-content:center
-    }
-    .post-card-large .post-card-title{
-        margin-top:0;
-        font-size:3.2rem
-    }
-    .post-card-large .post-card-content-link,.post-card-large .post-card-meta{
-        padding:0 0 0 40px
-    }
-    .post-card-large .post-card-excerpt p{
-        margin-bottom:1.5em;
-        font-size:1.8rem;
-        line-height:1.5em
+        border-top:0;
+        &:hover{
+            border-bottom-color:#e3e9ed;
+        }
+        &:not(.no-image) .post-card-header{
+            margin-top:0;
+        }
+        & .post-card-image-link{
+            position:relative;
+            flex:1 1 auto;
+            margin-bottom:0;
+            min-height:380px;
+        }
+        & .post-card-image{
+            position:absolute;
+            width:100%;
+            height:100%;
+        }
+        & .post-card-content{
+            flex:0 1 361px;
+            justify-content:center;
+        }
+        & .post-card-title{
+            margin-top:0;
+            font-size:3.2rem;
+        }
+        & .post-card-content-link,
+        & .post-card-meta{
+            padding:0 0 0 40px;
+        }
+        & .post-card-excerpt p{
+            margin-bottom:1.5em;
+            font-size:1.8rem;
+            line-height:1.5em;
+        }
     }
 }
 @media (max-width:1170px){
@@ -1024,12 +1038,12 @@ body{
     align-items:center;
     overflow:hidden;
     margin:0px 0 20px;
-    border-radius:6px
-}
-.post-full-image img{
-    max-width:1040px;
-    width:100%;
-    height:auto
+    border-radius:6px;
+    & img{
+        max-width:1040px;
+        width:100%;
+        height:auto
+    }
 }
 .post-full-content{
     position:relative;
@@ -1059,178 +1073,319 @@ body{
     }
 }
 .no-image .post-full-content{
-    padding-top:0
+    padding-top:0;
+    &:after,
+    &:before{
+        display:none
+    }
 }
-.no-image .post-full-content:after,.no-image .post-full-content:before{
-    display:none
-}
-.footnotes,.post-full-comments,.post-full-content blockquote,.post-full-content dl,.post-full-content h1,.post-full-content h2,.post-full-content h3,.post-full-content h4,.post-full-content h5,.post-full-content h6,.post-full-content ol,.post-full-content p,.post-full-content pre,.post-full-content ul{
+.footnotes,
+.post-full-comments{
     margin:0 0 1.5em;
     min-width:100%
 }
 @media (max-width:500px){
-    .footnotes,.post-full-comments,.post-full-content dl,.post-full-content ol,.post-full-content p,.post-full-content pre,.post-full-content ul{
+    .footnotes,
+    .post-full-comments{
         margin-bottom:1.28em
     }
 }
-.post-full-content li{
-    word-break:break-word
-}
-.post-full-content li p{
-    margin:0
-}
-.post-full-content a{
-    color:#e5e5e5;
-    word-break:break-word;
-    box-shadow:inset 0 -1px 0 #e5e5e5;
-    transition:all .2s ease-in-out
-}
-.post-full-content a:hover{
-    color:#3eb0ef;
-    text-decoration:none;
-    box-shadow:inset 0 -1px 0 #3eb0ef
-}
-.post-full-content em,.post-full-content strong{
-    color:#e5e5e5
-}
-.post-full-content small{
-    display:inline-block;
-    line-height:1.6em
-}
-.post-full-content li:first-child{
-    margin-top:0
-}
-.post-full-content img,.post-full-content video{
-    display:block;
-    margin:1.5em auto;
-    max-width:1040px;
-    height:auto
-}
-@media (max-width:1040px){
-    .post-full-content img,.post-full-content video{
-        width:100%
+.post-full-content{
+    blockquote,p,pre,
+    dl,ol,ul,
+    h1,h2,h3,h4,h5,h6,p,pre{
+        /* this is fucking genius but also unreadable :( */
+        @extend .footnotes;
+    }
+    & li{
+        word-break:break-word;
+        & p{
+            margin:0;
+        }
+    }
+    & a{
+        color:#e5e5e5;
+        word-break:break-word;
+        box-shadow:inset 0 -1px 0 #e5e5e5;
+        transition:all .2s ease-in-out;
+        &:hover{
+            color:#3eb0ef;
+            text-decoration:none;
+            box-shadow:inset 0 -1px 0 #3eb0ef;
+        }
+    }
+    & p{
+        & code{
+            word-break:break-all;
+        }
+        &+h1,
+        &+h2{
+            margin-top:.8em
+        }
+    }
+    & em,
+    & strong{
+        color:#e5e5e5;
+    }
+    & small{
+        display:inline-block;
+        line-height:1.6em;
+    }
+    & li:first-child{
+        margin-top:0;
+    }
+    & img,
+    & video{
+        display:block;
+        margin:1.5em auto;
+        max-width:1040px;
+        height:auto;
+    }
+    & img[src$="#full"]{
+        max-width:none;
+        width:100vw;
+    }
+    & img+br+small{
+        display:block;
+        margin-top:-3em;
+        margin-bottom:1.5em;
+        text-align:center;
+    }
+    & iframe{
+        margin:0 auto !important;
+    }
+    & blockquote{
+        margin:0 0 1.5em;
+        padding:0 1.5em;
+        border-left:3px solid #3eb0ef;
+        & p{
+            margin:0 0 1em;
+            color:inherit;
+            font-size:inherit;
+            line-height:inherit;
+            font-style:italic;
+            &:last-child{
+                margin-bottom:0;
+            }
+        }
+    }
+    & code{
+        padding:0 5px 2px;
+        font-size:.8em;
+        line-height:1em;
+        font-weight:400!important;
+        background:#000000;
+        border-radius:3px;
+    }
+    & pre{
+        overflow-x:auto;
+        margin:1.5em 0 3em;
+        padding:20px;
+        max-width:100%;
+        border:1px solid #000;
+        color:#e5eff5;
+        font-size:1.4rem;
+        line-height:1.5em;
+        background:#0e0f11;
+        border-radius:5px;
+        & ::-moz-selection{
+            color:#3c484e;
+        }
+        & ::selection{
+            color:#3c484e;
+        }
+        & code{
+            padding:0;
+            font-size:inherit;
+            line-height:inherit;
+            background:transparent;
+            & :not(span){
+                color:inherit;
+            }
+        }
+    }
+    & .fluid-width-video-wrapper{
+        margin:1.5em 0 3em;
+    }
+    & hr{
+        margin:2em 0;
+        &:after{
+            position:absolute;
+            top:-15px;
+            left:50%;
+            display:block;
+            margin-left:-10px;
+            width:1px;
+            height:30px;
+            background:#e3e9ed;
+            box-shadow:0 0 0 5px #fff;
+            transform:rotate(45deg);
+        }
+        &+p{
+            margin-top:1.2em;
+        }
+    }
+    h1,h2,h3,h4,h5,h6{
+        color:#e5e5e5;
+        font-family:"Mustica Pro","Roboto",sans-serif;
+    }
+    & h1{
+        margin:.5em 0 .4em;
+        font-size:4.2rem;
+        line-height:1.25em;
+        font-weight:600;
+    }
+    & h2{
+        margin:.5em 0 .4em;
+        font-size:3.2rem;
+        line-height:1.25em;
+        font-weight:600;
+        &+h3,
+        &+h4{
+            margin-top:.7em;
+        }
+    }
+    & h3{
+        margin:.5em 0 .2em;
+        font-size:2.5rem;
+        line-height:1.3em;
+        font-weight:600;
+        &+h4{
+            margin-top:0;
+        }
+    }
+    & h4{
+        margin:.5em 0 .2em;
+        font-size:2.5rem;
+        font-weight:600;
+    }
+    & h5{
+        display:block;
+        margin:.5em 0;
+        padding:.4em 1em .9em;
+        border:0;
+        color:#e5e5e5;
+        font-family:"Mustica Pro","Roboto",serif;
+        font-size:3.2rem;
+        line-height:1.35em;
+        text-align:center;
+    }
+    & h6{
+        margin:.5em 0 .2em;
+        font-size:2rem;
+        font-weight:700;
+    }
+    & table{
+        display:inline-block;
+        overflow-x:auto;
+        margin:.5em 0 2.5em;
+        max-width:100%;
+        width:auto;
+        border-spacing:0;
+        border-collapse:collapse;
+        font-family:-apple-system,BlinkMacSystemFont,Segoe UI,"Roboto",Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
+        font-size:1.6rem;
+        white-space:nowrap;
+        vertical-align:top;
+        -webkit-overflow-scrolling:touch;
+        background:radial-gradient(ellipse at left,rgba(0,0,0,.2) 0,transparent 75%) 0,radial-gradient(ellipse at right,rgba(0,0,0,.2) 0,transparent 75%) 100%;
+        background-attachment:scroll,scroll;
+        background-size:10px 100%,10px 100%;
+        background-repeat:no-repeat;
+        & td:first-child{
+            background-image:linear-gradient(90deg,#fff 50%,hsla(0,0%,100%,0));
+        }
+        & td:last-child{
+            background-image:linear-gradient(270deg,#fff 50%,hsla(0,0%,100%,0));
+            background-position:100% 0;
+        }
+        & td:last-child,
+        & td:first-child{
+            background-size:20px 100%;
+            background-repeat:no-repeat;
+        }
+        & th{
+            color:#15171a;
+            font-size:1.2rem;
+            font-weight:700;
+            letter-spacing:.2px;
+            text-align:left;
+            background-color:#f4f8fb;
+        }
+        & td,
+        & th{
+            padding:6px 12px;
+            border:1px solid #e3ecf3;
+        }
+    }
+    & .kg-image{
+        max-width:100%;
+    }
+    .post-full-image+& .kg-content :first-child .kg-image{
+        width:100%;
+    }
+    & .kg-width-wide .kg-image{
+        max-width:1040px;
+    }
+    & .kg-width-full .kg-image{
+        max-width:100vw;
+    }
+    & .kg-bookmark-container{
+        display:flex;
+        min-height:148px;
+        font-family:-apple-system,BlinkMacSystemFont,Segoe UI,"Roboto",Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
+        border-radius:3px;
+        &,&:hover{
+            color:#15171a;
+            text-decoration:none;
+            box-shadow:0 2px 5px -1px rgba(0,0,0,.15),0 0 1px rgba(0,0,0,.09);
+        }
+        &:hover .kg-bookmark-title{
+            color:#3eb0ef;
+        }
+    }
+    & .kg-bookmark-icon{
+        margin-right:8px;
+        width:22px;
+        height:22px
+    }
+    & figure{
+        margin:.8em 0 2.3em;
+    }
+    h1,h2,h3,h4{
+        &+figure{
+            margin-top:2em;
+        }
+    }
+    & figure img{
+        margin:0;
+    }
+    & figcaption{
+        margin:1em 0 0;
+        color:#5d7179;
+        font-family:-apple-system,BlinkMacSystemFont,Segoe UI,"Roboto",Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
+        font-size:75%;
+        line-height:1.5em;
+        text-align:center;
     }
 }
-.post-full-content img[src$="#full"]{
-    max-width:none;
-    width:100vw
-}
-.post-full-content img+br+small{
-    display:block;
-    margin-top:-3em;
-    margin-bottom:1.5em;
-    text-align:center
-}
-.post-full-content iframe{
-    margin:0 auto!important
-}
-.post-full-content blockquote{
-    margin:0 0 1.5em;
-    padding:0 1.5em;
-    border-left:3px solid #3eb0ef
+@media (max-width:1040px){
+    .post-full-content img,
+    .post-full-content video{
+        width:100%;
+    }
 }
 @media (max-width:500px){
     .post-full-content blockquote{
         padding:0 1.3em
     }
 }
-.post-full-content blockquote p{
-    margin:0 0 1em;
-    color:inherit;
-    font-size:inherit;
-    line-height:inherit;
-    font-style:italic
-}
-.post-full-content blockquote p:last-child{
-    margin-bottom:0
-}
-.post-full-content code{
-    padding:0 5px 2px;
-    font-size:.8em;
-    line-height:1em;
-    font-weight:400!important;
-    background:#000000;
-    border-radius:3px
-}
-.post-full-content p code{
-    word-break:break-all
-}
-.post-full-content pre{
-    overflow-x:auto;
-    margin:1.5em 0 3em;
-    padding:20px;
-    max-width:100%;
-    border:1px solid #000;
-    color:#e5eff5;
-    font-size:1.4rem;
-    line-height:1.5em;
-    background:#0e0f11;
-    border-radius:5px
-}
-.post-full-content pre ::-moz-selection{
-    color:#3c484e
-}
-.post-full-content pre ::selection{
-    color:#3c484e
-}
-.post-full-content pre code{
-    padding:0;
-    font-size:inherit;
-    line-height:inherit;
-    background:transparent
-}
-.post-full-content pre code :not(span){
-    color:inherit
-}
-.post-full-content .fluid-width-video-wrapper{
-    margin:1.5em 0 3em
-}
-.post-full-content hr{
-    margin:2em 0
-}
-.post-full-content hr:after{
-    position:absolute;
-    top:-15px;
-    left:50%;
-    display:block;
-    margin-left:-10px;
-    width:1px;
-    height:30px;
-    background:#e3e9ed;
-    box-shadow:0 0 0 5px #fff;
-    transform:rotate(45deg)
-}
-.post-full-content hr+p{
-    margin-top:1.2em
-}
-.post-full-content h1,.post-full-content h2,.post-full-content h3,.post-full-content h4,.post-full-content h5,.post-full-content h6{
-    color:#e5e5e5;
-    font-family:"Mustica Pro","Roboto",sans-serif
-}
-.post-full-content h1{
-    margin:.5em 0 .4em;
-    font-size:4.2rem;
-    line-height:1.25em;
-    font-weight:600
-}
-.post-full-content p+h1{
-    margin-top:.8em
-}
 @media (max-width:800px){
     .post-full-content h1{
         font-size:3.2rem;
         line-height:1.25em
     }
 }
-.post-full-content h2{
-    margin:.5em 0 .4em;
-    font-size:3.2rem;
-    line-height:1.25em;
-    font-weight:600
-}
-.post-full-content p+h2{
-    margin-top:.8em
-}
 @media (max-width:800px){
     .post-full-content h2{
         margin-bottom:.3em;
@@ -1238,15 +1393,6 @@ body{
         line-height:1.25em
     }
 }
-.post-full-content h3{
-    margin:.5em 0 .2em;
-    font-size:2.5rem;
-    line-height:1.3em;
-    font-weight:600
-}
-.post-full-content h2+h3{
-    margin-top:.7em
-}
 @media (max-width:800px){
     .post-full-content h3{
         margin-bottom:.3em;
@@ -1254,17 +1400,6 @@ body{
         line-height:1.3em
     }
 }
-.post-full-content h4{
-    margin:.5em 0 .2em;
-    font-size:2.5rem;
-    font-weight:600
-}
-.post-full-content h2+h4{
-    margin-top:.7em
-}
-.post-full-content h3+h4{
-    margin-top:0
-}
 @media (max-width:800px){
     .post-full-content h4{
         margin-bottom:.3em;
@@ -1272,17 +1407,6 @@ body{
         line-height:1.3em
     }
 }
-.post-full-content h5{
-    display:block;
-    margin:.5em 0;
-    padding:.4em 1em .9em;
-    border:0;
-    color:#e5e5e5;
-    font-family:"Mustica Pro","Roboto",serif;
-    font-size:3.2rem;
-    line-height:1.35em;
-    text-align:center
-}
 @media (min-width:1180px){
     .post-full-content h5{
         max-width:1060px;
@@ -1298,11 +1422,6 @@ body{
         text-align:initial
     }
 }
-.post-full-content h6{
-    margin:.5em 0 .2em;
-    font-size:2rem;
-    font-weight:700
-}
 @media (max-width:800px){
     .post-full-content h6{
         font-size:1.8rem;
@@ -1313,10 +1432,10 @@ body{
     margin-bottom:30px
 }
 .footnotes{
-    font-size:1.5rem
-}
-.footnotes p{
-    margin:0
+    font-size:1.5rem;
+    & p{
+        margin:0
+    }
 }
 .footnote-backref{
     color:#3eb0ef!important;
@@ -1328,10 +1447,10 @@ body{
 @media (max-width:1170px){
     .post-full-image{
         margin:25px -6vw 50px;
-        border-radius:0
-    }
-    .post-full-image img{
-        max-width:1170px
+        border-radius:0;
+        & img{
+            max-width:1170px
+        }
     }
 }
 @media (max-width:700px){
@@ -1353,52 +1472,12 @@ body{
         margin-bottom:5vw
     }
     .post-full-content{
-        padding:0
+        padding:0;
+        &:after,
+        &:before{
+            display:none
+        }
     }
-    .post-full-content:after,.post-full-content:before{
-        display:none
-    }
-}
-.post-full-content table{
-    display:inline-block;
-    overflow-x:auto;
-    margin:.5em 0 2.5em;
-    max-width:100%;
-    width:auto;
-    border-spacing:0;
-    border-collapse:collapse;
-    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,"Roboto",Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
-    font-size:1.6rem;
-    white-space:nowrap;
-    vertical-align:top;
-    -webkit-overflow-scrolling:touch;
-    background:radial-gradient(ellipse at left,rgba(0,0,0,.2) 0,transparent 75%) 0,radial-gradient(ellipse at right,rgba(0,0,0,.2) 0,transparent 75%) 100%;
-    background-attachment:scroll,scroll;
-    background-size:10px 100%,10px 100%;
-    background-repeat:no-repeat
-}
-.post-full-content table td:first-child{
-    background-image:linear-gradient(90deg,#fff 50%,hsla(0,0%,100%,0));
-    background-size:20px 100%;
-    background-repeat:no-repeat
-}
-.post-full-content table td:last-child{
-    background-image:linear-gradient(270deg,#fff 50%,hsla(0,0%,100%,0));
-    background-position:100% 0;
-    background-size:20px 100%;
-    background-repeat:no-repeat
-}
-.post-full-content table th{
-    color:#15171a;
-    font-size:1.2rem;
-    font-weight:700;
-    letter-spacing:.2px;
-    text-align:left;
-    background-color:#f4f8fb
-}
-.post-full-content table td,.post-full-content table th{
-    padding:6px 12px;
-    border:1px solid #e3ecf3
 }
 .post-full-byline{
     display:flex;
@@ -1409,35 +1488,35 @@ body{
 .post-full-byline-content{
     flex-grow:1;
     display:flex;
-    align-items:flex-start
-}
-.post-full-byline-content .author-list{
-    justify-content:flex-start;
-    padding:0 12px 0 0
+    align-items:flex-start;
+    & .author-list{
+        justify-content:flex-start;
+        padding:0 12px 0 0
+    }
 }
 .post-full-byline-meta{
     margin:0px 0 0;
     color:#e5e5e5;
     font-size:1.4rem;
     line-height:1.2em;
-    letter-spacing:.2px
-}
-.post-full-byline-meta h4{
-    margin:0 0 3px;
-    font-size:1.3rem;
-    line-height:1.4em;
-    font-weight:500
-}
-.post-full-byline-meta h4 a{
-    color:#2b2f36
-}
-.post-full-byline-meta h4 a:hover{
-    color:#15171a
-}
-.post-full-byline-meta .bull{
-    display:inline-block;
-    margin:0 4px;
-    opacity:.6
+    letter-spacing:.2px;
+    & h4{
+        margin:0 0 3px;
+        font-size:1.3rem;
+        line-height:1.4em;
+        font-weight:500;
+        & a{
+            color:#2b2f36;
+            & :hover{
+                color:#15171a;
+            }
+        }
+    }
+    & .bull{
+        display:inline-block;
+        margin:0 4px;
+        opacity:.6;
+    }
 }
 .author-avatar{
     display:block;
@@ -1446,7 +1525,7 @@ body{
     width:40px;
     height:40px;
     border-radius:100%;
-    transition:all .5s cubic-bezier(.4,.01,.165,.99) .7s
+    transition:all .5s cubic-bezier(.4,.01,.165,.99) .7s;
 }
 .author-list-item .author-card{
     position:absolute;
@@ -1465,53 +1544,53 @@ body{
     opacity:0;
     transition:all .35s cubic-bezier(.4,.01,.165,.99);
     transform:scale(.98) translateY(15px);
-    pointer-events:none
-}
-.author-list-item .author-card:before{
-    content:"";
-    position:absolute;
-    top:100%;
-    left:50%;
-    display:block;
-    margin-left:-8px;
-    width:0;
-    height:0;
-    border-top:8px solid #fff;
-    border-right:8px solid transparent;
-    border-left:8px solid transparent
-}
-.author-list-item .author-card.hovered{
-    opacity:1;
-    transform:scale(1) translateY(0);
-    pointer-events:auto
+    pointer-events:none;
+    &:before{
+        content:"";
+        position:absolute;
+        top:100%;
+        left:50%;
+        display:block;
+        margin-left:-8px;
+        width:0;
+        height:0;
+        border-top:8px solid #fff;
+        border-right:8px solid transparent;
+        border-left:8px solid transparent;
+    }
+    &.hovered{
+        opacity:1;
+        transform:scale(1) translateY(0);
+        pointer-events:auto;
+    }
 }
 .author-card{
-    padding:20px 20px 22px
-}
-.author-card .author-info{
-    flex:1 1 auto;
-    padding:0 0 0 20px
-}
-.author-card .author-info h2{
-    margin:8px 0 0;
-    font-size:1.6rem
-}
-.author-card .author-info p{
-    margin:4px 0 0;
-    color:#5d7179
-}
-.author-card .author-info .bio h2{
-    margin-top:0
-}
-.author-card .author-info .bio p{
-    margin-top:.8em
-}
-.author-card .author-profile-image{
-    flex:0 0 60px;
-    margin:0;
-    width:60px;
-    height:60px;
-    border:none
+    padding:20px 20px 22px;
+    & .author-info{
+        flex:1 1 auto;
+        padding:0 0 0 20px;
+        & h2{
+            margin:8px 0 0;
+            font-size:1.6rem;
+        }
+        & p{
+            margin:4px 0 0;
+            color:#5d7179;
+        }
+        & .bio h2{
+            margin-top:0;
+        }
+        & .bio p{
+            margin-top:.8em;
+        }
+    }
+    & .author-profile-image{
+        flex:0 0 60px;
+        margin:0;
+        width:60px;
+        height:60px;
+        border:none;
+    }
 }
 .basic-info .avatar-wrapper{
     position:relative;
@@ -1519,13 +1598,13 @@ body{
     width:60px;
     height:60px;
     border:none;
-    background:rgba(229,239,245,.1)
-}
-.basic-info .avatar-wrapper svg{
-    margin:0;
-    width:60px;
-    height:60px;
-    opacity:.15
+    background:rgba(229,239,245,.1);
+    & svg{
+        margin:0;
+        width:60px;
+        height:60px;
+        opacity:.15;
+    }
 }
 @media (max-width:1170px){
     .author-list-item .author-card{
@@ -1560,7 +1639,38 @@ body{
 }
 .read-next{
     border-bottom:1px solid hsla(0,0%,100%,.1);
-    background:#090a0b
+    background:#090a0b;
+    & .post-card{
+        padding-bottom:0;
+        border-bottom:none;
+        &:after{
+            display:none;
+        }
+        &:hover .post-card-image{
+            opacity:1;
+        }
+    }
+    & .post-card-primary-tag{
+        color:#fff;
+        opacity:.6;
+    }
+    & .post-card-title{
+        color:#fff;
+        opacity:.8;
+        transition:all .2s ease-in-out;
+    }
+    & .post-card-excerpt{
+        color:hsla(0,0%,100%,.6);
+    }
+    & .static-avatar{
+        border-color:#000;
+    }
+    & .post-card-byline-content{
+        color:hsla(0,0%,100%,.6);
+        & a{
+            color:hsla(0,0%,100%,.8);
+        }
+    }
 }
 .read-next-feed{
     display:flex;
@@ -1568,37 +1678,6 @@ body{
     margin:0 -25px;
     padding:60px 0 0
 }
-.read-next .post-card{
-    padding-bottom:0;
-    border-bottom:none
-}
-.read-next .post-card:after{
-    display:none
-}
-.read-next .post-card-primary-tag{
-    color:#fff;
-    opacity:.6
-}
-.read-next .post-card-title{
-    color:#fff;
-    opacity:.8;
-    transition:all .2s ease-in-out
-}
-.read-next .post-card:hover .post-card-image{
-    opacity:1
-}
-.read-next .post-card-excerpt{
-    color:hsla(0,0%,100%,.6)
-}
-.read-next .static-avatar{
-    border-color:#000
-}
-.read-next .post-card-byline-content{
-    color:hsla(0,0%,100%,.6)
-}
-.read-next .post-card-byline-content a{
-    color:hsla(0,0%,100%,.8)
-}
 .read-next-card{
     position:relative;
     flex:0 1 326px;
@@ -1608,13 +1687,13 @@ body{
     margin:0 25px 50px;
     padding:25px;
     background:linear-gradient(140deg,#191b1f,#090a0b);
-    border-radius:3px
-}
-.read-next-card a{
-    transition:all .2s ease-in-out
-}
-.read-next-card a:hover{
-    text-decoration:none
+    border-radius:3px;
+    & a{
+        transition:all .2s ease-in-out;
+        &:hover{
+            text-decoration:none;
+        }
+    }
 }
 .read-next-card-header h3{
     margin:0;
@@ -1623,52 +1702,52 @@ body{
     font-size:2rem;
     line-height:1em;
     font-weight:300;
-    letter-spacing:.4px
-}
-.read-next-card-header h3 a{
-    color:#fff;
-    font-weight:500;
-    text-decoration:none;
-    opacity:.8
-}
-.read-next-card-header h3 a:hover{
-    opacity:1
+    letter-spacing:.4px;
+    a{
+        color:#fff;
+        font-weight:500;
+        text-decoration:none;
+        opacity:.8;
+        &:hover{
+            opacity:1;
+        }
+    }
 }
 .read-next-card-content{
-    font-size:1.7rem
-}
-.read-next-card-content ul{
-    display:flex;
-    flex-direction:column;
-    margin:0;
-    padding:0;
-    list-style:none
-}
-.read-next-card-content li{
-    display:flex;
-    flex-direction:column;
-    align-items:flex-start;
-    margin:0;
-    padding:20px 0;
-    border-bottom:hsla(0,0%,100%,.1)
-}
-.read-next-card-content li:last-of-type{
-    padding-bottom:5px;
-    border:none
-}
-.read-next-card-content h4{
-    margin:0;
-    font-size:1.6rem;
-    line-height:1.35em;
-    font-weight:600
-}
-.read-next-card-content li a{
-    display:block;
-    color:#fff;
-    opacity:.8
-}
-.read-next-card-content li a:hover{
-    opacity:1
+    font-size:1.7rem;
+    & ul{
+        display:flex;
+        flex-direction:column;
+        margin:0;
+        padding:0;
+        list-style:none;
+    }
+    & li{
+        display:flex;
+        flex-direction:column;
+        align-items:flex-start;
+        margin:0;
+        padding:20px 0;
+        border-bottom:hsla(0,0%,100%,.1);
+        &:last-of-type{
+            padding-bottom:5px;
+            border:none;
+        }
+        & a{
+            display:block;
+            color:#fff;
+            opacity:.8;
+            &:hover{
+                opacity:1;
+            }
+        }
+    }
+    & h4{
+        margin:0;
+        font-size:1.6rem;
+        line-height:1.35em;
+        font-weight:600;
+    }
 }
 .read-next-card-excerpt{
     overflow:hidden;
@@ -1681,28 +1760,28 @@ body{
     margin-top:2px;
     font-size:1.2rem;
     line-height:1.4em;
-    font-weight:400
-}
-.read-next-card-meta p{
-    margin:0;
-    color:hsla(0,0%,100%,.6)
+    font-weight:400;
+    & p{
+        margin:0;
+        color:hsla(0,0%,100%,.6)
+    }
 }
 .read-next-card-footer{
     position:relative;
-    margin:40px 0 5px
-}
-.read-next-card-footer a{
-    padding:7px 12px 8px 14px;
-    border:1px solid hsla(0,0%,100%,.6);
-    color:hsla(0,0%,100%,.6);
-    font-size:1.3rem;
-    border-radius:999px;
-    transition:all .35s ease-in-out
-}
-.read-next-card-footer a:hover{
-    border-color:#fecd35;
-    color:#fecd35;
-    text-decoration:none
+    margin:40px 0 5px;
+    & a{
+        padding:7px 12px 8px 14px;
+        border:1px solid hsla(0,0%,100%,.6);
+        color:hsla(0,0%,100%,.6);
+        font-size:1.3rem;
+        border-radius:999px;
+        transition:all .35s ease-in-out;
+        &:hover{
+            border-color:#fecd35;
+            color:#fecd35;
+            text-decoration:none
+        }
+    }
 }
 @media (max-width:1170px){
     .read-next-card{
@@ -1733,35 +1812,6 @@ body{
     flex-direction:column;
     align-items:center
 }
-.post-full-content .kg-image{
-    max-width:100%
-}
-.post-full-image+.post-full-content .kg-content :first-child .kg-image{
-    width:100%
-}
-.post-full-content .kg-width-wide .kg-image{
-    max-width:1040px
-}
-.post-full-content .kg-width-full .kg-image{
-    max-width:100vw
-}
-.post-full-content figure{
-    margin:.8em 0 2.3em
-}
-.post-full-content h1+figure,.post-full-content h2+figure,.post-full-content h3+figure,.post-full-content h4+figure{
-    margin-top:2em
-}
-.post-full-content figure img{
-    margin:0
-}
-.post-full-content figcaption{
-    margin:1em 0 0;
-    color:#5d7179;
-    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,"Roboto",Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
-    font-size:75%;
-    line-height:1.5em;
-    text-align:center
-}
 .kg-width-full figcaption{
     padding:0 1.5em
 }
@@ -1769,10 +1819,10 @@ body{
     display:flex;
     flex-direction:column;
     align-items:center;
-    width:100%
-}
-.kg-embed-card .fluid-width-video-wrapper{
-    margin:0
+    width:100%;
+    & .fluid-width-video-wrapper{
+        margin:0;
+    }
 }
 @media (max-width:1040px){
     .post-full-content .kg-width-full .kg-image{
@@ -1788,46 +1838,40 @@ body{
 .kg-gallery-row{
     display:flex;
     flex-direction:row;
-    justify-content:center
+    justify-content:center;
+    &:not(:first-of-type){
+        margin:.75em 0 0;
+    }
 }
-.kg-gallery-image img{
-    display:block;
-    margin:0;
-    width:100%;
-    height:100%
+.kg-gallery-image{
+    & img{
+        display:block;
+        margin:0;
+        width:100%;
+        height:100%;
+    }
+    &:not(:first-of-type){
+        margin:0 0 0 .75em;
+    }
 }
-.kg-gallery-row:not(:first-of-type){
-    margin:.75em 0 0
-}
-.kg-gallery-image:not(:first-of-type){
-    margin:0 0 0 .75em
-}
-.kg-gallery-card+.kg-gallery-card,.kg-gallery-card+.kg-image-card.kg-width-wide,.kg-image-card.kg-width-wide+.kg-gallery-card,.kg-image-card.kg-width-wide+.kg-image-card.kg-width-wide{
-    margin:-2.25em 0 3em
+.kg-gallery-card,
+.kg-image-card.kg-width-wide{
+    &+&{
+        margin:-2.25em 0 3em;
+    }
 }
 .kg-code-card{
-    width:100%
-}
-.kg-code-card pre{
-    margin:0
+    width:100%;
+    & pre{
+        margin:0
+    }
 }
 .kg-bookmark-card{
     width:100%;
-    background:var(--white)
-}
-.kg-card+.kg-bookmark-card{
-    margin-top:0
-}
-.post-full-content .kg-bookmark-container{
-    display:flex;
-    min-height:148px;
-    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,"Roboto",Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
-    border-radius:3px
-}
-.post-full-content .kg-bookmark-container,.post-full-content .kg-bookmark-container:hover{
-    color:#15171a;
-    text-decoration:none;
-    box-shadow:0 2px 5px -1px rgba(0,0,0,.15),0 0 1px rgba(0,0,0,.09)
+    background:var(--white);
+    .kg-card+&{
+        margin-top:0;
+    }
 }
 .kg-bookmark-content{
     flex-grow:1;
@@ -1844,9 +1888,6 @@ body{
     font-weight:600;
     transition:color .2s ease-in-out
 }
-.post-full-content .kg-bookmark-container:hover .kg-bookmark-title{
-    color:#3eb0ef
-}
 .kg-bookmark-description{
     display:-webkit-box;
     overflow-y:hidden;
@@ -1862,17 +1903,17 @@ body{
 .kg-bookmark-thumbnail{
     position:relative;
     min-width:33%;
-    max-height:100%
-}
-.kg-bookmark-thumbnail img{
-    position:absolute;
-    top:0;
-    left:0;
-    width:100%;
-    height:100%;
-    border-radius:0 3px 3px 0;
-    -o-object-fit:cover;
-    object-fit:cover
+    max-height:100%;
+    & img{
+        position:absolute;
+        top:0;
+        left:0;
+        width:100%;
+        height:100%;
+        border-radius:0 3px 3px 0;
+        -o-object-fit:cover;
+        object-fit:cover
+    }
 }
 .kg-bookmark-metadata{
     display:flex;
@@ -1883,17 +1924,12 @@ body{
     font-size:1.5rem;
     font-weight:400
 }
-.post-full-content .kg-bookmark-icon{
-    margin-right:8px;
-    width:22px;
-    height:22px
-}
 .kg-bookmark-author{
-    line-height:1.5em
-}
-.kg-bookmark-author:after{
-    content:"•";
-    margin:0 6px
+    line-height:1.5em;
+    &:after{
+        content:"•";
+        margin:0 6px
+    }
 }
 .kg-bookmark-publisher{
     overflow:hidden;
@@ -1903,39 +1939,48 @@ body{
     white-space:nowrap
 }
 @media (max-width:800px){
-    .post-full-content figure{
-        margin:.2em 0 1.3em
-    }
-    .post-full-content h1+figure,.post-full-content h2+figure,.post-full-content h3+figure,.post-full-content h4+figure{
-        margin-top:.9em
+    .post-full-content{
+        & figure{
+            margin:.2em 0 1.3em;
+        }
+        h1,h2,h3,h4{
+            &+figure{
+                margin-top:.9em;
+            }
+        }
     }
 }
 @media (max-width:500px){
-    .post-full-content .kg-width-full,.post-full-content .kg-width-wide{
-        margin-right:-5vw;
-        margin-left:-5vw
+    .post-full-content{
+        & .kg-width-full,
+        & .kg-width-wide{
+            margin-right:-5vw;
+            margin-left:-5vw;
+        }
+        & figcaption{
+            margin-bottom:.4em;
+        }
+        & .kg-bookmark-container{
+            flex-direction:column;
+        }
+        & .kg-bookmark-icon{
+            width:18px;
+            height:18px;
+        }
     }
-    .post-full-content figcaption{
-        margin-bottom:.4em
-    }
-    .post-full-content .kg-bookmark-container{
-        flex-direction:column
-    }
-    .kg-bookmark-description,.kg-bookmark-metadata,.kg-bookmark-title{
+    .kg-bookmark-description,
+    .kg-bookmark-metadata,
+    .kg-bookmark-title{
         font-size:1.4rem;
         line-height:1.5em
     }
-    .post-full-content .kg-bookmark-icon{
-        width:18px;
-        height:18px
-    }
     .kg-bookmark-thumbnail{
         order:1;
         min-height:160px;
-        width:100%
-    }
-    .kg-bookmark-thumbnail img{
-        border-radius:3px 3px 0 0
+        width:100%;
+        & img{
+            border-radius:3px 3px 0 0;
+        }
     }
     .kg-bookmark-content{
         order:2
@@ -1955,7 +2000,38 @@ body{
     display:flex;
     flex-direction:column;
     justify-content:center;
-    margin:5px 0 0 30px
+    margin:5px 0 0 30px;
+    & .author-bio{
+        z-index:10;
+        flex-shrink:0;
+        margin:6px 0 -6px;
+        max-width:46em;
+        font-size:2rem;
+        line-height:1.4em;
+        font-weight:400;
+        opacity:.8;
+    }
+    & .author-meta{
+        z-index:10;
+        flex-shrink:0;
+        display:flex;
+        align-items:center;
+        margin:0 0 0 1px;
+        font-size:1.2rem;
+        font-weight:400;
+        letter-spacing:.2px;
+        text-transform:uppercase;
+    }
+    & .social-link:first-of-type{
+        padding-left:4px;
+    }
+    .no-image &{
+        .author-bio,
+        .author-meta{
+            color:#000000;
+            opacity:1;
+        }
+    }
 }
 .site-header-content .author-profile-image{
     z-index:10;
@@ -1965,47 +2041,21 @@ body{
     height:110px;
     box-shadow:0 0 0 6px hsla(0,0%,100%,.1)
 }
-.author-header-content .author-bio{
-    z-index:10;
-    flex-shrink:0;
-    margin:6px 0 -6px;
-    max-width:46em;
-    font-size:2rem;
-    line-height:1.4em;
-    font-weight:400;
-    opacity:.8
-}
-.author-header-content .author-meta{
-    z-index:10;
-    flex-shrink:0;
-    display:flex;
-    align-items:center;
-    margin:0 0 0 1px;
-    font-size:1.2rem;
-    font-weight:400;
-    letter-spacing:.2px;
-    text-transform:uppercase
-}
-.author-header-content .social-link:first-of-type{
-    padding-left:4px
-}
-.no-image .author-header-content .author-bio,.no-image .author-header-content .author-meta{
-    color:#000000;
-    opacity:1
-}
-.author-social-link a{
-    color:#15171a;
-    font-weight:600
-}
-.author-social-link a:hover{
-    opacity:1
-}
 .author-social-link{
     display:inline-block;
     margin:0;
-    padding:10px 0
+    padding:10px 0;
+    & a{
+        color:#15171a;
+        font-weight:600;
+        &:hover{
+            opacity:1
+        }
+    }
 }
-.author-location+.author-stats:before,.author-social-link+.author-social-link:before,.author-stats+.author-social-link:before{
+.author-location+.author-stats:before,
+.author-social-link+.author-social-link:before,
+.author-stats+.author-social-link:before{
     content:"\2022";
     display:inline-block;
     margin:0 12px;
@@ -2043,10 +2093,10 @@ body{
     justify-content:center;
     align-items:center;
     padding:10px 0;
-    text-align:center
-}
-.site-nav-center .site-nav-logo{
-    margin-right:0
+    text-align:center;
+    & .site-nav-logo{
+        margin-right:0;
+    }
 }
 .error-message{
     padding-bottom:10vw;
@@ -2114,35 +2164,32 @@ body{
     flex-wrap:wrap;
     justify-content:space-between;
     align-items:center;
-    font-size:1.3rem
-}
-.site-footer-content,.site-footer-content a{
-    color:hsla(0,0%,100%,.7)
-}
-.site-footer-content a:hover{
-    color:#fff;
-    text-decoration:none
+    font-size:1.3rem;
+    &,& a{
+        color:hsla(0,0%,100%,.7);
+    }
+    a:hover{
+        color:#fff;
+        text-decoration:none;
+    }
 }
 .site-footer-nav{
-    display:flex
-}
-.site-footer-nav a{
-    position:relative;
-    margin-left:20px
-}
-.site-footer-nav a:before{
-    content:"";
-    position:absolute;
-    top:11px;
-    left:-11px;
-    display:block;
-    width:2px;
-    height:2px;
-    background:#fff;
-    border-radius:100%
-}
-.site-footer-nav a:first-of-type:before{
-    display:none
+    display:flex;
+    & a{
+        position:relative;
+        margin-left:20px;
+        &:not(:first-of-type):before{
+            content:"";
+            position:absolute;
+            top:11px;
+            left:-11px;
+            display:block;
+            width:2px;
+            height:2px;
+            background:#fff;
+            border-radius:100%;
+        }
+    }
 }
 @media (max-width:650px){
     .site-footer-content{
@@ -2166,17 +2213,18 @@ body{
     .post-feed{
         background:#191b1f
     }
-    .post-card,.post-card:hover{
+    .post-card,
+    .post-card:hover{
         border-bottom-color:#2b2f36
     }
     .author-profile-image{
         background:#0171ff
     }
     .post-card-byline-content a{
-        color:hsla(0,0%,100%,.75)
-    }
-    .post-card-byline-content a:hover{
-        color:#fff
+        color:hsla(0,0%,100%,.75);
+        &:hover{
+            color:#fff;
+        }
     }
     .post-card-image{
         background:#191b1f
@@ -2184,11 +2232,14 @@ body{
     .post-card-title{
         color:#e5e5e5
     }
-    .author-avatar,.static-avatar{
+    .author-avatar,
+    .static-avatar{
         border-color:#191b1f
     }
-    .post-full-content,.post-template .site-main,.site-main{
-        background:#191b1f
+    .post-full-content,
+    .post-template .site-main,
+    .site-main{
+        background:#191b1f;
     }
     .post-full-title{
         color:hsla(0,0%,100%,.9)
@@ -2200,67 +2251,76 @@ body{
         border-top-color:#3b404a
     }
     .post-full-byline-meta h4 a{
-        color:hsla(0,0%,100%,.75)
-    }
-    .post-full-byline-meta h4 a:hover{
-        color:#fff
+        color:hsla(0,0%,100%,.75);
+        &:hover{
+            color:#fff;
+        }
     }
     .author-list-item .author-card{
         background:#22252a;
-        box-shadow:0 12px 26px rgba(0,0,0,.4)
+        box-shadow:0 12px 26px rgba(0,0,0,.4);
+        &:before{
+            border-top-color:#22252a;
+        }
     }
-    .author-list-item .author-card:before{
-        border-top-color:#22252a
-    }
-    .post-full-content h1,.post-full-content h2,.post-full-content h3,.post-full-content h4,.post-full-content h6{
-        color:hsla(0,0%,100%,.9)
-    }
-    .post-full-content a{
-        color:#fff;
-        box-shadow:inset 0 -1px 0 #fff
-    }
-    .post-full-content em,.post-full-content strong{
-        color:#fff
-    }
-    .post-full-content code{
-        color:#fff;
-        background:#000
+    .post-full-content{
+        h1,h2,h3,h4,h5,h6{
+            color:hsla(0,0%,100%,.9);
+        }
+        & a{
+            color:#fff;
+            box-shadow:inset 0 -1px 0 #fff;
+        }
+        & em,
+        & strong{
+            color:#fff;
+        }
+        & code{
+            color:#fff;
+            background:#000;
+        }
+        & figcaption{
+            color:hsla(0,0%,100%,.6)
+        }
+        & .kg-bookmark-container{
+            color:hsla(0,0%,100%,.75);
+            box-shadow:0 0 1px hsla(0,0%,100%,.9)
+        }
+        & table{
+            & td{
+                &:first-child{
+                    background-image:linear-gradient(90deg,#191b1f 50%,rgba(25,27,31,0));
+                }
+                &:last-child{
+                    background-image:linear-gradient(270deg,#191b1f 50%,rgba(25,27,31,0));
+                }
+            }
+            & th{
+                color:hsla(0,0%,100%,.85);
+                background-color:#2b2f36;
+            }
+            & td,
+            & th{
+                border:1px solid #2b2f36;
+            }
+        }
     }
     hr{
         border-top-color:#2b2f36
     }
-    .post-full-content figcaption{
-        color:hsla(0,0%,100%,.6)
-    }
-    .post-full-content .kg-bookmark-container{
-        color:hsla(0,0%,100%,.75);
-        box-shadow:0 0 1px hsla(0,0%,100%,.9)
-    }
-    .post-full-content table td:first-child{
-        background-image:linear-gradient(90deg,#191b1f 50%,rgba(25,27,31,0))
-    }
-    .post-full-content table td:last-child{
-        background-image:linear-gradient(270deg,#191b1f 50%,rgba(25,27,31,0))
-    }
-    .post-full-content table th{
-        color:hsla(0,0%,100%,.85);
-        background-color:#2b2f36
-    }
-    .post-full-content table td,.post-full-content table th{
-        border:1px solid #2b2f36
-    }
     .kg-bookmark-title{
         color:#fff
     }
-    .kg-bookmark-description,.kg-bookmark-metadata{
-        color:hsla(0,0%,100%,.75)
+    .kg-bookmark-description,
+    .kg-bookmark-metadata{
+        color:hsla(0,0%,100%,.75);
     }
     .site-archive-header .no-image{
         color:hsla(0,0%,100%,.9);
-        background:#191b1f
-    }
-    .site-archive-header .no-image .site-header-content{
-        border-bottom-color:#3b404a
+        background:#191b1f;
+        & .site-header-content{
+            border-bottom-color:#3b404a;
+        }
     }
     .site-header-content .author-profile-image{
         box-shadow:0 0 0 6px hsla(0,0%,100%,.04)