a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{ margin:0; padding:0; border:0; font:inherit; font-size:100%; vertical-align:baseline } body{ line-height:1 } ol,ul{ list-style:none } blockquote,q{ quotes:none; &:after, &:before{ content:""; content:none; } } img{ max-width:100% } html{ box-sizing:border-box; font-family:sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; text-size-adjust:100%; } *,:after,:before{ box-sizing:inherit } a{ color:#26a8ed; text-decoration:none; background-color:transparent; &:active, &:hover{ outline:0 } &:hover{ text-decoration:underline } } b,strong{ font-weight:700 } dfn,em,i{ font-style:italic } h1{ margin:.67em 0; font-size:2em } small{ font-size:80% } sub,sup{ position:relative; font-size:75%; line-height:0; vertical-align:baseline } sup{ top:-.5em } sub{ bottom:-.25em } img{ border:0 } svg:not(:root){ overflow:hidden } mark{ background-color:#fdffb6 } code,kbd,pre,samp{ font-family:monospace,monospace; font-size:1em } button,input,optgroup,select,textarea{ margin:0; color:inherit; font:inherit } button{ overflow:visible; border:none; } button,select{ text-transform:none } button,input[type=button],input[type=reset],input[type=submit]{ cursor:pointer; -webkit-appearance:button; &[disabled]{ cursor:default; } } button::-moz-focus-inner,input::-moz-focus-inner{ padding:0; border:0 } input{ 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{ height:auto } input[type=search]{ box-sizing:content-box; -webkit-appearance:textfield; &::-webkit-search-cancel-button, &::-webkit-search-decoration{ -webkit-appearance:none; } } legend{ padding:0; border:0 } textarea{ overflow:auto } table{ border-spacing:0; border-collapse:collapse } td,th{ padding:0 } html{ overflow-y:scroll; font-size:62.5%; -webkit-tap-highlight-color:rgba(0,0,0,0) } body,html{ overflow-x:hidden } 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; font-weight:400; font-style:normal; letter-spacing:0; text-rendering:optimizeLegibility; } ::-moz-selection{ text-shadow:none; background:#cbeafb } ::selection{ text-shadow:none; background:#cbeafb } hr{ position:relative; display:block; width:100%; margin:2.5em 0 3.5em; padding:0; height:1px; border:0; border-top:1px solid #e3e9ed } audio,canvas,iframe,img,svg,video{ vertical-align:middle } fieldset{ margin:0; padding:0; border:0 } textarea{ resize:vertical } blockquote,dl,ol,p,ul{ margin:0 0 1.5em } ol,ul{ padding-left:1.3em; padding-right:1.5em; max-width:100%; & &{ margin:.5em 0 1em; } } ul{ list-style:disc } ol{ list-style:decimal } li{ margin:.5em 0; padding-left:.3em; line-height:1.6em } dt{ float:left; margin:0 20px 0 0; width:120px; color:#15171a; font-weight:500; text-align:right } dd{ margin:0 0 5px; text-align:left } blockquote{ margin:1.5em 0; padding:0 1.6em; 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; line-height:1.15; font-weight:600; text-rendering:optimizeLegibility } h1{ margin:0 0 .5em; font-size:5.5rem; font-weight:600 } @media (max-width:500px){ h1{ font-size:2.2rem } } h2{ margin:1.5em 0 .5em; font-size:2.2rem } @media (max-width:500px){ h2{ font-size:1.8rem } } h3{ margin:1.5em 0 .5em; font-size:1.8rem; font-weight:500 } @media (max-width:500px){ h3{ font-size:1.7rem } } h4{ margin:1.5em 0 .5em; font-size:1.6rem; font-weight:500 } h5,h6{ margin:1.5em 0 .5em; font-size:1.4rem; font-weight:500 } .img{ display:block; width:100%; height:100%; background-position:50%; background-size:cover; border-radius:100% } .hidden{ visibility:hidden; position:absolute; text-indent:-9999px } .site-wrapper{ display:flex; flex-direction:column; min-height:100vh } .site-main{ z-index:100; flex-grow:1 } .outer{ position:relative; padding:0 5vw } .inner{ margin:0 auto; max-width:1040px; width:100% } @media (min-width:900px){ .author-template .post-feed,.home-template .post-feed,.tag-template .post-feed{ padding:40px 0 5vw; border-top-left-radius:3px; border-top-right-radius:3px } .home-template .site-nav{ position:relative } } .site-header-background{ position:relative; margin-top:64px; padding-bottom:12px; color:#fff; background:#090a0b no-repeat 20%; 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; display:flex; flex-direction:column; justify-content:center; align-items:start; padding:6vw 3vw; min-height:200px; max-height:340px; margin-top:230px } .site-header-content-list{ z-index:100; display:flex; flex-direction:column; justify-content:center; align-items:start; padding:6vw 3vw; min-height:200px; max-height:340px } .site-title{ z-index:10; margin:0 0 0 -2px; padding:0; font-family:"Mustica Pro","Roboto",sans-serif; font-size:5rem; line-height:1em; font-weight:600 } .site-logo{ max-height:55px } .site-description{ z-index:10; margin:0; padding:5px 0; font-family:"Mustica Pro","Roboto",sans-serif; font-size:2.1rem; line-height:1.4em; font-weight:400; opacity:1 } .site-home-header{ 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-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; } } @media (max-width:500px){ .site-home-header{ & .site-title{ font-size:3.2rem; } & .site-description{ font-size:1.8rem; } } .site-archive-header .site-header-content{ min-height:unset; } } .site-nav-main{ position:fixed; top:0; right:0; left:0; z-index:1000; background:#090a0b } .site-nav{ position:relative; z-index:100; justify-content:space-between; align-items:flex-start; height:64px; font-size:1.5rem } .site-nav, .site-nav-left{ display:flex; overflow-y:hidden } .site-nav-left{ flex:1 0 auto; align-items:center; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-right:10px; padding:10px 0 80px; font-weight:500; letter-spacing:.2px; white-space:nowrap; -ms-overflow-scrolling:touch } @media (max-width:700px){ .site-header-background:not(.responsive-header-img) .site-nav:after,.site-nav-main .site-nav:after{ content:""; position:absolute; top:0; z-index:1000; width:40px; height:100%; right:0; background:linear-gradient(90deg,rgba(9,10,11,0) 0,#090a0b) } .nav li:last-of-type{ padding-right:20px } } .site-nav-logo{ position:relative; z-index:100; flex-shrink:0; display:inline-block; margin-right:32px; padding:12px 0; color:#fff; font-size:1.7rem; line-height:1.8rem; font-weight:700; letter-spacing:-.5px; text-transform:none; &:hover{ text-decoration:none } .site-home-header &{ display:none; } & img{ display:block; width:auto; height:21px } } .site-nav-pill{ position:relative; z-index:100; flex-shrink:0; display:inline-block; margin-right:-20px; margin-left:30px; padding:18px 0; color:#fff; font-size:1.7rem; line-height:1.8rem; font-weight:700; letter-spacing:-.5px; text-transform:none; & img{ display:block; width:auto; height:16px } } .site-nav-content{ position:relative; align-self:flex-start } .nav{ position:absolute; z-index:1000; display:flex; margin:0 0 0 -12px; padding:0; list-style:none; transition:all 1s cubic-bezier(.19,1,.22,1); font-family:"Mustica Pro","Roboto",sans-serif; 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; position:absolute; top:9px; color:#fff; font-size:1.7rem; font-weight:400; text-transform:none; opacity:0; transition:all 1s cubic-bezier(.19,1,.22,1); 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{ flex-shrink:0; display:flex; align-items:center } .social-links a:last-of-type{ padding-right:20px } .social-link{ display:inline-block; margin:0; padding:10px; opacity:.8; &:hover{ opacity:1; } & svg{ height:1.8rem; fill:#fff; } } .social-link-fb svg, .social-link-wb svg{ height:1.6rem } .social-link-wb svg path{ stroke:#fff } .social-link-rss svg{ height:1.9rem } .rss-button{ opacity:.8; &:hover{ opacity:1 } & svg{ margin-bottom:1px; height:2.1rem; fill:#fff } } .home-template .site-nav-main{ 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{ margin-left:-5vw } .site-nav-main{ padding-right:0; padding-left:0 } .site-nav-left{ margin-right:0; padding-left:5vw } .site-nav-right{ display:none } } .posts{ overflow-x:hidden } .post-feed{ flex-wrap:wrap; margin:0 -20px; padding:50px 0 0; background:#1e1e1e } .post-card, .post-feed{ position:relative; display:flex } .post-card{ flex:1 1 301px; flex-direction:column; overflow:hidden; margin:0 0 40px; padding:0 20px 40px; min-height:220px; background-size:cover } .post-card-image-link{ position:relative; display:block; overflow:hidden; border-radius:6px } .post-card-image{ width:100%; height:200px; -o-object-fit:cover; object-fit:cover } .post-card-content-link{ position:relative; display:block; color:#e5e5e5 } .post-card-content-link:hover{ text-decoration:underline } .post-card-header{ margin:15px 0 0 } .post-feed .no-image .post-card-content-link{ padding:0 } .no-image .post-card-header{ margin-top:0 } .post-card-primary-tag{ margin:0 0 .2em; color:#3eb0ef; font-size:1.2rem; font-weight:500; letter-spacing:.2px; text-transform:uppercase } .post-card-title{ margin:0 0 .4em; line-height:1.15em; transition:color .2s ease-in-out; font-family:"Mustica Pro","Roboto",sans-serif } .no-image .post-card-title{ margin-top:0 } .post-card-content{ flex-grow:1; display:flex; flex-direction:column } .post-card-excerpt{ max-width:56em; color:#e5e5e5; font-family:"Mustica Pro","Roboto",serif; & p{ margin-bottom:.5em } } .post-card-meta{ display:flex; align-items:flex-start; padding:0; & .avatar-wrapper, & .profile-image-wrapper{ position:relative } } .author-profile-image, .avatar-wrapper{ display:block; width:100%; height:100%; border-radius:100%; -o-object-fit:cover; object-fit:cover } .author-list{ display:flex; flex-wrap:wrap; margin:0 0 0 4px; padding:0; list-style:none } .author-list-item{ position:relative; flex-shrink:0; margin:0; padding:0 } .static-avatar{ display:block; overflow:hidden; margin:0 0 0 -6px; width:34px; height:34px; border-radius:100% } .author-name-tooltip{ position:absolute; bottom:105%; z-index:999; display:block; padding:2px 8px; color:#fff; font-size:1.2rem; letter-spacing:.2px; white-space:nowrap; background:#15171a; border-radius:3px; box-shadow:0 12px 26px rgba(39,44,49,.08),1px 3px 8px rgba(39,44,49,.03); opacity:0; transition:all .35s cubic-bezier(.4,.01,.165,.99); transform:translateY(6px); pointer-events:none; .author-list-item:hover &{ opacity:1; transform:translateY(0) } } @media (max-width:700px){ .author-name-tooltip{ display:none } } .post-card-byline-content{ flex:1 1 50%; display:flex; flex-direction:column; margin:2px 0 0 6px; color:#e5e5e5; font-size:1.2rem; line-height:1.4em; font-weight:400; letter-spacing:.2px; & span{ margin:0 } & a{ color:#424852; font-weight:600 } } .post-card-byline-date{ font-size:1.3rem; & .bull{ display:inline-block; margin:0 4px; opacity:.6 } } .single-author-byline{ display:flex; flex-direction:column; margin-left:5px; color:#5d7179; font-size:1.3rem; line-height:1.4em; font-weight:500 } .single-author{ display:flex; align-items:center; & .static-avatar{ margin-left:-2px } } .single-author-name{ display:inline-block } @media (min-width:795px){ .post-card-large{ flex:1 1 100%; flex-direction:row; padding-bottom:40px; min-height:280px; 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){ .post-card{ margin-bottom:5vw } } @media (max-width:650px){ .post-feed{ padding-top:5vw } .post-card{ margin-bottom:5vw } } @media (max-width:500px){ .post-card-title{ font-size:1.9rem } .post-card-excerpt{ font-size:1.6rem } } .page-template .site-main,.post-template .site-main{ margin-top:64px; padding-bottom:4vw; background:#1e1e1e } .post-full-header{ position:relative; margin:0 auto; padding:70px 170px 50px; border-top-left-radius:3px; border-top-right-radius:3px } .post-full-tags{ display:flex; justify-content:flex-start; align-items:center; color:#000000; font-size:1.3rem; line-height:1.4em; font-weight:600 } .post-full-meta-date{ color:#000000; font-size:1.2rem; font-weight:400 } @media (max-width:1170px){ .post-full-header{ padding:60px 11vw 50px } } @media (max-width:800px){ .post-full-header{ padding-right:5vw; padding-left:5vw } } @media (max-width:500px){ .post-full-header{ padding:20px 0 35px } } .post-full-title{ margin:0 0 .2em; color:#e5e5e5; font-family:"Mustica Pro","Roboto",sans-serif } .post-full-custom-excerpt{ margin:0px 0 0; color:#e5e5e5; font-family:"Mustica Pro","Roboto",serif; font-size:2.3rem; line-height:1.4em; font-weight:300 } .date-divider{ display:inline-block; margin:0 6px 1px; font-weight:300 } .post-full-image{ display:flex; flex-direction:column; align-items:center; overflow:hidden; margin:0px 0 20px; border-radius:6px; & img{ max-width:1040px; width:100%; height:auto } } .post-full-content{ position:relative; margin:0 auto; padding:0 170px 6vw; min-height:230px; font-family:"Roboto"; font-size:1.7rem; line-height:1.6em; background:#1e1e1e } @media (max-width:1170px){ .post-full-content{ padding:0 11vw } } @media (max-width:800px){ .post-full-content{ padding:0 5vw; font-size:1.8rem } } @media (max-width:500px){ .post-full-custom-excerpt{ font-size:1.9rem; line-height:1.5em } } .no-image .post-full-content{ padding-top:0; &:after, &:before{ display:none } } .footnotes, .post-full-comments{ margin:0 0 1.5em; min-width:100% } @media (max-width:500px){ .footnotes, .post-full-comments{ margin-bottom:1.28em } } .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; } } @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 } } @media (max-width:800px){ .post-full-content h1{ font-size:3.2rem; line-height:1.25em } } @media (max-width:800px){ .post-full-content h2{ margin-bottom:.3em; font-size:2.8rem; line-height:1.25em } } @media (max-width:800px){ .post-full-content h3{ margin-bottom:.3em; font-size:2.4rem; line-height:1.3em } } @media (max-width:800px){ .post-full-content h4{ margin-bottom:.3em; font-size:2.4rem; line-height:1.3em } } @media (min-width:1180px){ .post-full-content h5{ max-width:1060px; width:100vw } } @media (max-width:800px){ .post-full-content h5{ margin-bottom:1em; margin-left:1.3em; padding:0 0 .5em; font-size:2.4rem; text-align:initial } } @media (max-width:800px){ .post-full-content h6{ font-size:1.8rem; line-height:1.4em } } .footnotes-sep{ margin-bottom:30px } .footnotes{ font-size:1.5rem; & p{ margin:0 } } .footnote-backref{ color:#3eb0ef!important; font-size:1.2rem; font-weight:700; text-decoration:none!important; box-shadow:none!important } @media (max-width:1170px){ .post-full-image{ margin:25px -6vw 50px; border-radius:0; & img{ max-width:1170px } } } @media (max-width:700px){ .post-full-image{ margin:25px -5vw } } @media (max-width:500px){ .post-full-meta{ font-size:1.2rem; line-height:1.3em } .post-full-title{ margin-top:.2em; font-size:3.3rem } .post-full-image{ margin-top:5px; margin-bottom:5vw } .post-full-content{ padding:0; &:after, &:before{ display:none } } } .post-full-byline{ display:flex; justify-content:space-between; margin:10px 0 0; padding-top:0px } .post-full-byline-content{ flex-grow:1; display:flex; 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; & 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; overflow:hidden; margin:0 -4px; width:40px; height:40px; border-radius:100%; transition:all .5s cubic-bezier(.4,.01,.165,.99) .7s; } .author-list-item .author-card{ position:absolute; bottom:130%; left:50%; z-index:600; display:flex; justify-content:space-between; margin-left:-200px; width:400px; font-size:1.4rem; line-height:1.5em; background:#fff; border-radius:3px; box-shadow:0 12px 26px rgba(39,44,49,.08),1px 3px 8px rgba(39,44,49,.06); opacity:0; transition:all .35s cubic-bezier(.4,.01,.165,.99); transform:scale(.98) translateY(15px); 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-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; margin:0; width:60px; height:60px; border:none; background:rgba(229,239,245,.1); & svg{ margin:0; width:60px; height:60px; opacity:.15; } } @media (max-width:1170px){ .author-list-item .author-card{ margin-left:-50px; width:430px } .author-list-item .author-card:before{ left:50px } } @media (max-width:650px){ .author-list-item .author-card{ display:none } } @media (max-width:500px){ .author-avatar{ width:32px; height:32px } .post-full-byline-meta{ font-size:1.2rem } .post-full-byline-meta h4{ margin-bottom:2px; font-size:1.2rem } } .post-full-comments{ margin:0 auto; max-width:840px } .read-next{ border-bottom:1px solid hsla(0,0%,100%,.1); 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; flex-wrap:wrap; margin:0 -25px; padding:60px 0 0 } .read-next-card{ position:relative; flex:0 1 326px; display:flex; flex-direction:column; overflow:hidden; margin:0 25px 50px; padding:25px; background:linear-gradient(140deg,#191b1f,#090a0b); border-radius:3px; & a{ transition:all .2s ease-in-out; &:hover{ text-decoration:none; } } } .read-next-card-header h3{ margin:0; color:hsla(0,0%,100%,.6); font-family:Mustica Pro; font-size:2rem; line-height:1em; font-weight:300; 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; & 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; max-width:100%; font-size:1.4rem; line-height:1.2em; text-overflow:ellipsis } .read-next-card-meta{ margin-top:2px; font-size:1.2rem; line-height:1.4em; font-weight:400; & p{ margin:0; color:hsla(0,0%,100%,.6) } } .read-next-card-footer{ position:relative; 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{ flex:1 1 261px; margin-bottom:5vw } } @media (max-width:650px){ .read-next-feed{ flex-direction:column; padding:25px 0 0 } .read-next-card{ flex:1 1 auto; margin:0 25px; padding:0; background:none } .read-next .post-card{ flex:1 1 auto; margin:25px; padding:25px 0 0; border-bottom:1px solid hsla(0,0%,100%,.1) } } .post-content{ display:flex; flex-direction:column; align-items:center } .kg-width-full figcaption{ padding:0 1.5em } .kg-embed-card{ display:flex; flex-direction:column; align-items:center; width:100%; & .fluid-width-video-wrapper{ margin:0; } } @media (max-width:1040px){ .post-full-content .kg-width-full .kg-image{ width:100vw } } .kg-gallery-container{ display:flex; flex-direction:column; max-width:1040px; width:100vw } .kg-gallery-row{ display:flex; flex-direction:row; justify-content:center; &:not(:first-of-type){ margin:.75em 0 0; } } .kg-gallery-image{ & img{ display:block; margin:0; width:100%; height:100%; } &:not(:first-of-type){ margin:0 0 0 .75em; } } .kg-gallery-card, .kg-image-card.kg-width-wide{ &+&{ margin:-2.25em 0 3em; } } .kg-code-card{ width:100%; & pre{ margin:0 } } .kg-bookmark-card{ width:100%; background:var(--white); .kg-card+&{ margin-top:0; } } .kg-bookmark-content{ flex-grow:1; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; padding:20px } .kg-bookmark-title{ color:#313b3f; font-size:1.6rem; line-height:1.5em; font-weight:600; transition:color .2s ease-in-out } .kg-bookmark-description{ display:-webkit-box; overflow-y:hidden; margin-top:12px; max-height:48px; color:#5d7179; font-size:1.5rem; line-height:1.5em; font-weight:400; -webkit-line-clamp:2; -webkit-box-orient:vertical } .kg-bookmark-thumbnail{ position:relative; min-width:33%; 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; flex-wrap:wrap; align-items:center; margin-top:14px; color:#5d7179; font-size:1.5rem; font-weight:400 } .kg-bookmark-author{ line-height:1.5em; &:after{ content:"•"; margin:0 6px } } .kg-bookmark-publisher{ overflow:hidden; max-width:240px; line-height:1.5em; text-overflow:ellipsis; white-space:nowrap } @media (max-width:800px){ .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, & .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; } } .kg-bookmark-description, .kg-bookmark-metadata, .kg-bookmark-title{ font-size:1.4rem; line-height:1.5em } .kg-bookmark-thumbnail{ order:1; min-height:160px; width:100%; & img{ border-radius:3px 3px 0 0; } } .kg-bookmark-content{ order:2 } } .author-header{ display:flex; flex-direction:row; justify-content:flex-start; align-items:flex-start; padding:10vw 0 10px } .site-archive-header .no-image .author-header{ padding-bottom:20px } .author-header-content{ display:flex; flex-direction:column; justify-content:center; 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; flex-shrink:0; margin:5px 0 0; width:110px; height:110px; box-shadow:0 0 0 6px hsla(0,0%,100%,.1) } .author-social-link{ display:inline-block; margin: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{ content:"\2022"; display:inline-block; margin:0 12px; color:#000000; opacity:.6 } @media (max-width:500px){ .author-header{ padding:10px 0 0 } .no-image .author-header{ padding-bottom:10px } .author-header-content{ margin-left:20px } .site-header-content .author-profile-image{ width:80px; height:80px } .author-header-content .author-bio{ font-size:1.8rem; line-height:1.3em; letter-spacing:0 } .author-location,.author-stats{ display:none } } .error-content{ padding:14vw 4vw 6vw } .site-nav-center{ display:flex; justify-content:center; align-items:center; padding:10px 0; text-align:center; & .site-nav-logo{ margin-right:0; } } .error-message{ padding-bottom:10vw; border-bottom:1px solid #e3e9ed; text-align:center } .error-code{ margin:0; color:#c5d2d9; font-size:12vw; line-height:1em; letter-spacing:-5px; opacity:.75 } .error-description{ margin:0; color:#000000; font-size:3rem; line-height:1.3em; font-weight:400 } .error-link{ display:inline-block; margin-top:5px } @media (min-width:940px){ .error-content .post-card{ margin-bottom:0; padding-bottom:0; border-bottom:none } } @media (max-width:800px){ .error-content{ padding-top:24vw } .error-code{ font-size:11.2rem } .error-message{ padding-bottom:16vw } .error-description{ margin:5px 0 0; font-size:1.8rem } } @media (max-width:500px){ .error-content{ padding-top:28vw } .error-message{ padding-bottom:14vw } } .site-footer{ position:relative; padding-top:20px; padding-bottom:60px; color:#fff; background:#090a0b } .site-footer-content{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; font-size:1.3rem; &,& a{ color:hsla(0,0%,100%,.7); } a:hover{ color:#fff; text-decoration:none; } } .site-footer-nav{ 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{ flex-direction:column } .site-footer-nav a:first-child{ margin-left:0 } } @media (prefers-color-scheme:dark){ body{ color:hsla(0,0%,100%,.75); background:#191b1f } img{ opacity:.9 } .site-header-background:before{ background:rgba(0,0,0,0) } .post-feed{ background:#191b1f } .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); &:hover{ color:#fff; } } .post-card-image{ background:#191b1f } .post-card-title{ color:#e5e5e5 } .author-avatar, .static-avatar{ border-color:#191b1f } .post-full-content, .post-template .site-main, .site-main{ background:#191b1f; } .post-full-title{ color:hsla(0,0%,100%,.9) } .post-full-image{ background-color:#2b2f36 } .post-full-byline{ border-top-color:#3b404a } .post-full-byline-meta h4 a{ 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); &:before{ border-top-color:#22252a; } } .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 } .kg-bookmark-title{ color:#fff } .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-header-content{ border-bottom-color:#3b404a; } } .site-header-content .author-profile-image{ box-shadow:0 0 0 6px hsla(0,0%,100%,.04) } } @import "custom.scss";