Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
: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
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.