2020-05-01_website.css

:root{
    --prime-color:#464646;
    --prime-bg:#fffceb;
    --dark-bg:#2d2d2d;
    --link-pink:#f012be;
    --link-yellow:#ffb700;
    --pink:rgba(255, 105, 180, 0.5);
    --blue:rgba(48, 79, 254, 0.5);
    --silver:#c1c1c1
}
canvas,iframe,img,svg,video{
    max-width:100%;
    height:auto
}
body{
    color:var(--prime-color);
    background-color:var(--prime-bg);
    font-family:'APL385 Unicode',Hack,'Go Mono','Roboto Mono','IBM Plex Mono',Inconsolata,'Source Code Pro','PT Mono','Ubuntu Mono','Fira Mono',monospace;
    font-size:16px;
    line-height:1.6em;
    display:block;
    margin:0 auto;
    padding:.75em;
    background-image:url(/_assets/_images/bg.png);
    background-attachment:scroll
}
body{
    max-width:62em
}
@media (prefers-color-scheme:dark){
    body{
        color:var(--silver);
        background-color:var(--dark-bg);
        background-image:url(/_assets/_images/bg-dark.png)
    }
}
@media (min-width:600px){
    body{
        font-size:18px
    }
}
h1,h2,h3,h4,h5,h6{
    line-height:1.25em;
    margin-top:1em
}
blockquote,h1,h2,h3,h4,h5,h6{
    font-family:Futura,Futura,'Benton Sans',sans-serif
}
.rainbow{
    background-image:linear-gradient(90deg,#f79533 0,#f37055 15%,#ef4e7b 30%,#a166ab 44%,#5073b8 58%,#1098ad 72%,#07b39b 86%,#6dba82 100%);
    background-size:cover;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    text-fill-color:transparent
}
.rainbow-hover:hover{
    background-image:linear-gradient(90deg,#f79533 0,#f37055 15%,#ef4e7b 30%,#a166ab 44%,#5073b8 58%,#1098ad 72%,#07b39b 86%,#6dba82 100%);
    background-size:cover;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    text-fill-color:transparent
}
.subtitle{
    margin-top:-1em
}
blockquote{
    margin:0;
    padding-left:12px;
    border-left:8px solid #eee
}
@media (prefers-color-scheme:dark){
    blockquote{
        border-left:8px solid #000
    }
}
img{
    display:block;
    margin:0 auto
}
a{
    text-decoration:none;
    color:var(--link-pink);
    transition-duration:.1s;
    transition-timing-function:ease-in-out
}
a:hover{
    color:var(--link-yellow)
}
a[data-url]{
    position:relative;
    display:inline;
    padding-top:.1em
}
a[data-url]:after{
    font-size:.7em;
    position:absolute;
    top:-1.3em;
    left:4px;
    content:'☟ ' attr(data-url);
    white-space:nowrap;
    letter-spacing:1px;
    opacity:.7
}
code{
    background:#efefef;
    padding:2px 4px;
    border-radius:4px
}
@media (prefers-color-scheme:dark){
    code{
        color:#8b008b;
        background-color:rgba(239,239,239,.75)
    }
}
.row,article,footer,main{
    max-width:100%
}
main{
    padding:0 .25em
}
article{
    background-color:#fff;
    display:block;
    padding:.75em 1em .25em 1em;
    margin:0 auto;
    border:4px solid var(--silver);
    border-radius:7px
}
@media (prefers-color-scheme:dark){
    article{
        background-color:rgba(0,0,0,1)
    }
}
@media (max-width:600px){
    article{
        margin-bottom:2em
    }
}
@media (min-width:600px){
    article:nth-of-type(n+1){
        max-width:37em;
        margin-bottom:2em;
        -webkit-box-shadow:14px 14px 0 0 var(--pink);
        -moz-box-shadow:14px 14px 0 0 var(--pink);
        box-shadow:14px 14px 0 0 var(--pink)
    }
    article:nth-of-type(5n+2){
        max-width:42em;
        margin:0 3em 2em 1em;
        -webkit-box-shadow:10px 8px 0 0 var(--link-yellow);
        -moz-box-shadow:10px 8px 0 0 var(--link-yellow);
        box-shadow:10px 8px 0 0 var(--link-yellow)
    }
    article:nth-of-type(3n+3){
        max-width:27em;
        margin:0 7em 3em 1em;
        -webkit-box-shadow:-7px -7px 0 0 var(--blue);
        -moz-box-shadow:-7px -7px 0 0 var(--blue);
        box-shadow:-7px -7px 0 0 var(--blue)
    }
    article:nth-of-type(2n+4){
        max-width:27em;
        margin:0 1em 2em 5em
    }
}
article>p.like,p.reply{
    font-family:Futura,Futura,'Benton Sans',sans-serif;
    font-size:2em;
    line-height:1.25em;
    font-weight:700
}
footer{
    padding:1em;
    margin:4em 0;
    max-width:100%
}
time{
    color:var(--silver)
}
.nav-list li,.tags li,ul.nav-list,ul.tags{
    display:inline-block;
    list-style:none;
    padding:0
}
li.nav-itemy-item,ul.nav-listy-list{
    display:block;
    list-style-type:none;
    padding:0
}
nav{
    margin-top:0;
    margin-bottom:1.5em
}
li.nav-item{
    font-family:Futura,sans-serif;
    padding:0 .5em
}
li.nav-item:last-of-type{
    padding:0 0 0 .5em
}
li.nav-item:first-of-type{
    padding:0 .5em 0 0
}
.tag{
    padding:.25em .5em;
    color:#fff;
    background-color:var(--blue);
    border:1px solid var(--silver);
    border-radius:4px;
    -webkit-box-shadow:5px 5px 0 0 var(--pink);
    -moz-box-shadow:5px 5px 0 0 var(--pink);
    box-shadow:5px 5px 0 0 var(--pink);
    line-height:2.5em
}
.tag:hover{
    padding:.25em .5em;
    transition:.3s;
    color:var(--prime-color);
    background-color:var(--pink);
    -webkit-box-shadow:3px 3px 0 0 var(--blue);
    -moz-box-shadow:3px 3px 0 0 var(--blue);
    box-shadow:3px 3px 0 0 var(--blue)
}
.search-form{
    max-width:100%;
    display:block;
    margin:0 auto;
    padding:1em;
    background-color:#fff;
    border-radius:7px;
    border:0
}
.search-input{
    width:100%;
    font-family:sans-serif;
    font-size:1.25em;
    border-top:4px solid #fff;
    border-left:0;
    border-right:0;
    border-bottom:4px solid #fff
}
.search-input:focus{
    border-top:4px solid #fff;
    border-left:0;
    border-right:0;
    border-bottom:4px solid var(--pink)
}
@media (prefers-color-scheme:dark){
    .search-form{
        background-color:#000
    }
    .search-input{
        color:#fff;
        background-color:#000;
        border-top:4px solid #000;
        border-left:0;
        border-right:0;
        border-bottom:4px solid #000
    }
    .search-input:focus{
        border-top:4px solid #000;
        border-left:0;
        border-right:0;
        border-bottom:4px solid var(--pink)
    }
}
.row{
    overflow:hidden;
    margin-right:-.75rem;
    margin-left:-.75rem
}
.col,.col-center,.col-right,.mobile-col,.px-gutter{
    box-sizing:border-box;
    padding-right:.75rem;
    padding-left:.75rem
}
.mobile-col{
    float:left
}
.mobile-col-1{
    width:8.33333%
}
.mobile-col-2{
    width:16.66667%
}
.mobile-col-3{
    width:25%
}
.mobile-col-4{
    width:33.33333%
}
.mobile-col-5{
    width:41.66667%
}
.mobile-col-6{
    width:50%
}
.mobile-col-7{
    width:58.33333%
}
.mobile-col-8{
    width:66.66667%
}
.mobile-col-9{
    width:75%
}
.mobile-col-10{
    width:83.33333%
}
.mobile-col-11{
    width:91.66667%
}
.hide-on-mobile{
    display:none
}
.show-on-mobile{
    display:block
}
@media screen and (min-width:32em){
    .col{
        float:left
    }
    .col-right{
        float:right
    }
    .col-center{
        margin-right:auto;
        margin-left:auto
    }
    .col-1{
        width:8.33333%
    }
    .col-pre-1{
        margin-left:8.33333%
    }
    .col-post-1{
        margin-right:8.33333%
    }
    .col-2{
        width:16.66667%
    }
    .col-pre-2{
        margin-left:16.66667%
    }
    .col-post-2{
        margin-right:16.66667%
    }
    .col-3{
        width:25%
    }
    .col-4{
        width:33.33333%
    }
    .col-5{
        width:41.66667%
    }
    .col-6{
        width:50%
    }
    .col-7{
        width:58.33333%
    }
    .col-8{
        width:66.66667%
    }
    .col-9{
        width:75%
    }
    .col-10{
        width:83.33333%
    }
    .col-11{
        width:91.66667%
    }
    .container-col-10{
        max-width:62.25rem;
        margin-right:auto;
        margin-left:auto
    }
    .container-col-8{
        max-width:49.5rem;
        margin-right:auto;
        margin-left:auto
    }
    .container-col-6{
        max-width:36.75rem;
        margin-right:auto;
        margin-left:auto
    }
    .hide-on-mobile{
        display:block
    }
    .show-on-mobile{
        display:none
    }
}
.hljs{
    display:block;
    overflow-x:auto;
    padding:.5em;
    background:#282a36
}
.hljs-keyword,.hljs-link,.hljs-literal,.hljs-section,.hljs-selector-tag{
    color:#8be9fd
}
.hljs-function .hljs-keyword{
    color:#ff79c6
}
.hljs,.hljs-subst{
    color:#f8f8f2
}
.hljs-addition,.hljs-attribute,.hljs-bullet,.hljs-name,.hljs-string,.hljs-symbol,.hljs-template-tag,.hljs-template-variable,.hljs-title,.hljs-type,.hljs-variable{
    color:#f1fa8c
}
.hljs-comment,.hljs-deletion,.hljs-meta,.hljs-quote{
    color:#6272a4
}
.hljs-doctag,.hljs-keyword,.hljs-literal,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-strong,.hljs-title,.hljs-type{
    font-weight:700
}
.hljs-emphasis{
    font-style:italic
}