Skip to content

Instantly share code, notes, and snippets.

@simevidas
Last active March 24, 2020 17:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save simevidas/09ae24f6b8743fefaf67b7f6c37b0a03 to your computer and use it in GitHub Desktop.
Save simevidas/09ae24f6b8743fefaf67b7f6c37b0a03 to your computer and use it in GitHub Desktop.
:root{
--scale:100%;
--brand-gradient:linear-gradient(45deg,#f012be,#0074d9);
--brand-gradient-alpha:linear-gradient(45deg,rgba(240,18,190,0.06667),rgba(0,116,217,0.06667));
--font-stack:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
}
@media (min-width:768px){
:root{
--scale:117%
}
}
@media (min-width:1260px){
:root{
--scale:127%
}
}
@media (min-width:1420px){
:root{
--scale:133%
}
}
:focus{
outline:none
}
[hidden]{
display:none!important
}
noscript{
display:block;
margin:1.2rem;
font-size:1.2rem
}
html{
background-color:#fff;
color:#333;
font-family:var(--font-stack);
font-size:var(--scale);
line-height:1.52;
overflow-y:scroll
}
h1,h2,h3,h4,h5,h6,ol,p,ul{
margin:0;
font-size:100%;
font-weight:400
}
code{
font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
font-size:92.5%;
font-weight:400;
word-spacing:-.3em
}
pre{
word-break:normal
}
pre code{
word-spacing:inherit
}
a{
color:#00f;
text-decoration:none
}
a:hover{
text-decoration:underline;
text-underline-offset:.09em;
text-decoration-thickness:.09em
}
mark{
color:rgba(34,51,68,.93333);
background-color:rgba(255,238,136,.73333);
padding:.075em .2em .15em;
box-shadow:inset 0 0 .5em rgba(255,238,136,.86667);
-webkit-box-decoration-break:clone;
box-decoration-break:clone
}
[type=button],[type=reset],[type=submit],button{
background-repeat:repeat
}
.Firefox{
display:none
}
@media (min-width:1260px){
.Firefox{
display:block;
position:fixed;
top:30vh;
left:21.55em;
line-height:1;
-webkit-writing-mode:tb;
-ms-writing-mode:tb;
writing-mode:tb;
text-align:center;
white-space:nowrap
}
.Firefox a{
font-size:80%;
color:#767676;
padding:.1em;
background:#fff
}
.Firefox a:hover{
color:#00f;
text-decoration:none
}
}
@media (min-width:1440px){
.Firefox{
left:calc((100% - 1440px)/2 + 21.55em)
}
}
[data-whatinput=keyboard] a:focus{
background-color:#0f0;
border-color:transparent;
outline:3px solid #0f0;
color:#00f
}
[data-whatinput=keyboard] a:focus *{
color:#00f
}
[data-whatinput=keyboard] summary:focus,button:focus,input:focus{
outline:3px solid #0f0
}
.Layout{
max-width:1440px;
margin:0 auto
}
@media (min-width:1260px){
.Layout{
display:grid;
grid-template-columns:2em 18em 2em minmax(2em,7fr) 36em minmax(2em,7fr)
}
.Layout:after{
content:"";
grid-row:1;
grid-column:3;
border-right:1px dashed rgba(119,136,153,.53333)
}
}
@media (max-width:1259.9px){
.Layout__side-item{
max-width:38em;
margin:1em auto 0;
padding:0 1em
}
}
@media (min-width:1260px){
.Layout__side-item{
grid-column:2
}
}
@media (max-width:1259.9px){
.Layout__main-item{
max-width:38em;
margin:0 auto;
padding:0 1em
}
}
@media (min-width:1260px){
.Layout__main-item{
grid-column:5
}
}
.Layout__sticky-column{
display:grid;
grid-template-columns:auto 1fr;
margin-bottom:.8em
}
@media (min-width:1260px){
.Layout__sticky-column{
display:block;
height:100vh;
margin-bottom:0;
padding-top:2em
}
}
@media (min-width:1260px) and (min-height:560px){
.Layout__sticky-column{
position:-webkit-sticky;
position:sticky;
top:0
}
}
.Notification{
font-size:.9rem!important;
background-image:linear-gradient(135deg,rgba(0,255,0,.0666667),rgba(0,255,0,.2));
text-align:center;
padding:.8em 1.2em .9em
}
.Notification strong{
color:#ec130e
}
.u-visually-hidden{
clip:rect(1px,1px,1px,1px);
height:1px;
overflow:hidden;
position:absolute;
white-space:nowrap;
width:1px
}
.u-loading:before{
content:"Loading…";
-webkit-animation:loading 0s 1s forwards;
animation:loading 0s 1s forwards;
opacity:0
}
@-webkit-keyframes loading{
to{
opacity:1
}
}
@keyframes loading{
to{
opacity:1
}
}
.u-clear-float{
clear:both
}
@media (min-width:1260px){
.u-narrow{
display:none
}
}
.u-wide{
display:none
}
@media (min-width:1260px){
.u-wide{
display:block
}
}
.Testimonial{
display:none
}
@media (min-width:1260px){
.Testimonial{
position:absolute;
z-index:1;
top:0;
bottom:0;
left:0;
right:0;
-webkit-clip-path:polygon(0 66.6%,20% 66.6%,100% 17%,100% 100%,0 100%);
clip-path:polygon(0 66.6%,20% 66.6%,100% 17%,100% 100%,0 100%);
display:grid;
align-content:end;
font-size:90%
}
.Testimonial blockquote{
text-align:right;
margin:0 1em;
font-family:Georgia,serif;
font-style:italic;
line-height:1.2
}
.Testimonial blockquote:before{
content:"“";
font-size:300%;
color:#70705f;
position:absolute;
top:2.8rem;
right:1rem
}
.Testimonial img{
margin:0 .15em .4em 1em;
border-radius:100px;
position:relative;
top:-.7em
}
.Testimonial strong{
font-weight:550
}
.Testimonial p{
grid-row:2;
grid-column:1
}
.Testimonial p+p{
text-align:right;
padding-right:.9em;
padding-top:.45em
}
}
.Title{
overflow:auto;
position:relative
}
@media (min-width:1260px){
.Title{
background-image:linear-gradient(45deg,rgba(249,104,84,.0666667),rgba(119,136,153,.0666667))
}
}
.Title__link{
float:left;
font-size:1.7rem;
line-height:1;
display:block;
overflow:hidden;
padding-top:.1em;
padding-bottom:.25em
}
.Title__link span:first-child{
color:#234;
float:left;
font-weight:300
}
.Title__link span:last-child{
color:transparent;
background-image:var(--brand-gradient);
-webkit-background-clip:text;
background-clip:text;
float:left;
clear:left;
font-weight:500
}
@media (min-width:1260px){
.Title__link{
float:none;
height:9rem;
background-color:#fff;
-webkit-clip-path:polygon(0 0,100% 0,100% 17%,0 79%);
clip-path:polygon(0 0,100% 0,100% 17%,0 79%);
font-size:2.3rem
}
}
.About .u-narrow{
text-align:center;
padding-top:.55em
}
.About .u-wide{
margin:2.2em auto;
font-size:.9rem;
border:solid #def;
border-width:.09em 0;
padding:.8em 1.2em .9em;
text-align:center
}
.Banner{
margin-top:1px;
border-bottom:1px solid rgba(102,119,136,.2);
background-color:rgba(255,238,136,.73333);
box-shadow:inset 0 0 .5em rgba(255,238,136,.86667)
}
@media (min-width:1260px){
.Banner{
background:none;
margin-top:2.2em;
border:.1044em solid #678;
box-shadow:none;
font-size:90%;
min-height:9rem;
display:grid;
grid-template-columns:-webkit-max-content 1fr;
grid-template-columns:max-content 1fr
}
}
.Banner summary{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
padding:.4em .5em .5em
}
@media (min-width:1260px){
.Banner summary{
padding:.7em .8em;
list-style-type:none;
pointer-events:none
}
.Banner summary::-webkit-details-marker{
display:none
}
}
@media (max-width:1259.9px){
.Banner summary{
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap
}
.Banner [open] summary{
white-space:normal;
line-height:1.2;
padding-top:.6em
}
}
@media (min-width:1260px){
.Banner strong{
font-size:120%;
color:rgba(34,51,68,.93333);
background-color:rgba(255,238,136,.73333);
padding:.1em .35em .15em;
box-shadow:inset 0 0 .5em rgba(255,238,136,.86667);
font-weight:600;
letter-spacing:-.02em
}
}
.Banner details>:not(summary){
margin:0 .8em .7em
}
.Banner ul{
padding-left:1.5em;
line-height:1.8
}
.Banner__icon{
display:none
}
@media (min-width:1260px){
.Banner__icon{
display:grid;
align-content:center;
justify-content:center;
margin:2px 0;
border-left:2px solid #fff;
background-image:linear-gradient(-90deg,rgba(119,136,153,.0823529),10%,rgba(119,136,153,.0509804));
width:6.4rem;
--fill-color:#678
}
}
.Icon{
display:inline-block;
fill:currentColor;
fill:var(--fill-color,currentColor)!important;
min-height:1em;
min-width:1em;
vertical-align:middle;
position:relative;
top:-.0625em
}
.Subscribe{
display:inline-block;
position:relative
}
[data-mailtrain-subscription-widget]{
text-align:center
}
[data-mailtrain-subscription-widget] .form-group.email{
display:inline-block
}
[data-mailtrain-subscription-widget] button,[data-mailtrain-subscription-widget] input{
margin:0;
padding:0 .3em;
vertical-align:top
}
[data-mailtrain-subscription-widget] [type=email]{
margin-right:.3em;
width:10em
}
[data-mailtrain-subscription-widget] .Subscribe__new-label{
display:none
}
@media (min-width:610px){
[data-mailtrain-subscription-widget]{
font-size:90%
}
[data-mailtrain-subscription-widget] [type=email]{
width:18em
}
[data-mailtrain-subscription-widget] button:after{
content:" via email"
}
[data-mailtrain-subscription-widget] .Subscribe__new-label{
display:inline;
margin-left:.2em;
font-weight:700;
color:#ec130e
}
}
[data-mailtrain-subscription-widget] .status{
position:absolute;
line-height:1.31;
margin-top:.4em;
text-align:left;
width:100%
}
[data-mailtrain-subscription-widget] .status>*{
padding:.4em .6em .5em
}
[data-mailtrain-subscription-widget] .info,[data-mailtrain-subscription-widget] .spinner{
background-color:#bde5f8
}
[data-mailtrain-subscription-widget] .success{
background-color:#dff2bf
}
[data-mailtrain-subscription-widget] .error{
background-color:#ffbaba
}
.Subscribe__display-none{
display:none
}
.Advertise{
background-color:#d04838;
margin:4em 0;
border:3px solid #d04838;
border-radius:.6em;
scroll-margin:1em
}
.Advertise summary{
padding:.5em 1em .6em;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
background-color:#fff;
border-radius:.45em
}
.Advertise ul{
background:#fff;
padding:.4em 1.5em .4em 2.5em;
border-radius:.5em
}
@media (min-width:768px){
.Advertise ul{
padding:.4em 3em
}
}
.Advertise li{
margin:1.5em 0
}
.Advertise p+p{
margin-top:1em
}
.Advertise img{
max-width:100%;
border:1px solid #abc
}
.Advertise[open] summary{
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-bottom:.08em solid #ddd
}
.Advertise[open] ul{
border-top-left-radius:0;
border-top-right-radius:0
}
.Issues__header{
margin:4em 0
}
.Issues__header h1{
color:#345;
width:-webkit-fit-content;
width:-moz-fit-content;
width:fit-content;
margin:0 auto;
font-size:1.5rem;
font-weight:300;
line-height:1;
background-color:rgba(119,136,153,.13333);
padding:.6em
}
.Issues__header strong{
background-image:var(--brand-gradient);
color:transparent;
-webkit-background-clip:text;
background-clip:text;
font-weight:600;
margin:0 .17em 0 .1em
}
.Issues__body{
line-height:1.41
}
.Issues__body,.Issues__body p{
margin-bottom:2em
}
.Issues__body :not(.Issues__note)>a{
display:grid;
grid-template-columns:6.2rem 1fr;
grid-template-rows:auto 1fr;
grid-column-gap:1em;
padding:.6em 1em .7em;
border-bottom:1.5px solid rgba(119,136,153,.2);
color:inherit
}
.Issues__body :not(.Issues__note)>a:hover{
color:#00f;
background:linear-gradient(45deg,rgba(0,0,255,.0352941),rgba(0,0,255,.0666667));
border-color:rgba(0,0,255,.13333);
text-decoration:none
}
.Issues__body :not(.Issues__note)>a:hover *{
color:#00f
}
.Issues__body strong{
background-image:var(--brand-gradient);
color:transparent;
-webkit-background-clip:text;
background-clip:text;
font-size:1.3rem;
font-weight:600;
line-height:1.2
}
.Issues__body time{
color:#6c6c6c;
grid-row:2;
font-size:90%
}
.Issues__body span{
grid-row:1/span 2
}
.Issues__note{
background:var(--brand-gradient-alpha);
padding:.6em 1em .8em;
text-align:center;
max-width:70%;
margin:auto
}
.Issue{
margin-top:2em
}
.Issue__print-link{
display:none;
text-align:center
}
.Issue__header{
margin-bottom:1.25em;
border:solid #def;
border-width:.08em 0;
padding:.3em 0;
display:grid;
grid-template-columns:1fr -webkit-max-content;
grid-template-columns:1fr max-content
}
@media (min-width:610px){
.Issue__header{
grid-template-columns:1fr -webkit-max-content 1fr;
grid-template-columns:1fr max-content 1fr
}
}
.Issue__header__heading{
font-weight:300
}
.Issue__header__heading strong{
background-image:var(--brand-gradient);
color:transparent;
-webkit-background-clip:text;
background-clip:text;
font-weight:500
}
.Issue__header__heading b{
font-weight:700;
margin:auto .3em auto .2em
}
@media (max-width:609.9px){
.Issue__header__heading span{
display:none
}
}
.Issue__news-items h1{
margin-top:0;
font-size:1.4rem!important
}
.Issue__news-items>li{
font-size:1.4rem
}
.Issue__news-items>li>:not(h1){
font-size:1rem
}
.Issue__news-items>:not(:first-child){
margin-top:4rem
}
.Issue__body h1,.Issue__body h2{
font-weight:600;
color:#345;
margin:.67em 0;
line-height:1.2;
letter-spacing:-.02em;
scroll-margin:.9em
}
.Issue__body h1{
font-size:1.7rem
}
.Issue__body *+h1{
margin-top:1.67em
}
.Issue__body h2{
font-size:1.4rem;
margin-top:1em
}
.Issue__body blockquote,.Issue__body figure,.Issue__body hr,.Issue__body ol,.Issue__body p,.Issue__body p>img,.Issue__body pre,.Issue__body ul,.Issue__body video{
margin:1.2em 0
}
.Issue__body ol,.Issue__body ul{
padding-left:1.375em
}
@media (min-width:768px){
.Issue__body ol,.Issue__body ul{
padding-left:1.875em
}
}
.Issue__body blockquote{
position:relative;
padding:.5em .5em .7em 2.35em;
background-image:linear-gradient(45deg,rgba(238,238,221,.733333),rgba(238,238,221,.866667));
border-bottom:1px solid #ddc;
line-height:1.48
}
.Issue__body blockquote:before{
content:"\201C";
font-family:Georgia,serif;
font-size:3rem;
font-weight:700;
color:#70705f;
line-height:1;
position:absolute;
left:.15em;
top:.2em
}
.Issue__body blockquote p{
margin:0
}
.Issue__body summary{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}
.Issue__body pre{
font-size:92.5%;
line-height:1.4;
border-radius:.2em;
overflow:auto
}
.Issue__body p>code{
background-color:#f9f9f9;
padding:.15em .3em;
border-radius:.2em
}
.Issue__body figure>img,.Issue__body p>img,.Issue__body video{
display:block;
width:100%;
background:#fff;
border-bottom:1px solid #e1e2e3;
box-shadow:0 0 1.7em #e1e2e3
}
@media (min-width:768px){
.Issue__body figure>img,.Issue__body p>img,.Issue__body video{
-o-object-fit:scale-down;
object-fit:scale-down
}
}
.Issue__body table{
width:100%
}
.Issue__body figcaption{
font-size:85%;
width:75%;
margin:auto;
padding-top:1em;
color:#555;
text-align:center
}
.Issue__body td,.Issue__body th{
border:1px solid #ccc;
padding:.3em .5em;
font-size:87.5%;
line-height:1.4
}
.Issue__body hr{
height:0;
border:none;
border-bottom:1px solid #def;
margin-top:1.35em
}
.Issue__body strong{
font-weight:600
}
.Issue__body kbd{
padding:.1em .5em;
border:1px solid #ccc;
font-size:80%;
font-family:inherit;
background-color:#f9f9f9;
color:#333;
box-shadow:0 1px 0 rgba(0,0,0,.2),inset 0 0 0 2px #fff;
border-radius:3px;
margin:0 .1em;
text-shadow:0 1px 0 #fff;
white-space:nowrap
}
.Issue__body kbd,.Issue__body small{
display:inline-block;
line-height:1.4
}
.Issue__body h1+*{
margin-top:0
}
.Issue__body li+li{
margin-top:.4em
}
.Issue__note strong:first-child{
text-transform:lowercase;
font-variant-caps:small-caps;
font-weight:900
}
.Issue__via{
font-size:.9rem!important;
margin-top:-.1rem!important
}
.Issue__via a{
font-weight:600
}
.Issue__footer{
margin:4em 0
}
.Issue__thank-you{
margin:auto;
text-align:center;
background-image:var(--brand-gradient);
background-size:100% .3em;
padding:.5em;
width:-webkit-fit-content;
width:-moz-fit-content;
width:fit-content
}
.hljs{
background-color:#f9f9f9;
padding:.5em .8em .6em
}
.hljs-comment{
color:#737373
}
.hljs-built_in,.hljs-builtin-name{
color:#007ca5
}
.lang-css .hljs-meta{
color:#d73a49;
font-weight:400
}
.Issue__promoted-logo{
float:right;
width:7.5em!important;
margin:0!important;
border:none!important
}
.Issue__promoted-label{
display:inline-block;
font-size:.75rem;
border:.08em solid #d73a49;
border-radius:.3em;
color:#d73a49;
padding:0 .3em .1em;
line-height:1.2;
font-weight:550;
vertical-align:.2em;
margin-left:1em
}
.Error{
max-width:26em;
margin:3em auto 0;
padding:.8em 1.4em;
border:1px solid #f44
}
.Error h3{
font-size:2rem;
margin-bottom:.5em
}
.Error h3 strong{
color:#f44;
text-transform:uppercase
}
.Error__back-link a{
display:block;
text-align:center;
border:1px solid #eee;
padding:.3em 0;
margin:1.5em 0 1em
}
.Error__back-link a:hover{
border-color:rgba(0,0,255,.26667)
}
.Infobox{
background:var(--brand-gradient-alpha);
padding:.6em 1em .8em 1.57em;
margin:2em auto;
max-width:20.1em;
display:flex;
align-items:center;
line-height:1.41
}
.Infobox svg{
margin-right:1.32em;
flex-shrink:0;
fill:#234
}
@media (max-width:1260px){
header .Infobox{
margin:.5em auto 1em;
max-width:100%
}
}
.Recent{
display:flex
}
.Recent__item{
position:relative
}
.Recent__item:nth-of-type(n+2){
margin-left:.9em
}
.Recent__item:nth-of-type(n+4){
display:none
}
@media (max-width:600px){
.Recent__item:nth-of-type(n+3){
display:none
}
}
.Recent__item .markup>p{
color:#345;
font-size:1.08rem;
line-height:1.2;
font-weight:500;
letter-spacing:-.02em;
margin-bottom:.5em
}
.Recent__item time{
color:#666;
text-transform:lowercase;
font-variant-caps:small-caps;
display:block;
margin-bottom:.5em
}
.Recent__item a:after{
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
right:0
}
.Testimonials ul{
margin:3em 0;
padding:0;
list-style:none
}
.Testimonials li{
margin-bottom:1.5em;
padding:.3em .6em
}
.Testimonials blockquote{
font-size:90%;
margin:0 0 .5em;
padding:1.3em 2em;
border-radius:1.5em;
border:.15em solid #def
}
.Testimonials blockquote+p{
margin-left:2.4em
}
.Testimonials__header{
display:grid;
grid-template-columns:1fr -webkit-max-content 1fr;
grid-template-columns:1fr max-content 1fr;
align-items:center;
margin:5.5em 0 4.75em
}
.Testimonials__header :first-child{
padding-top:.3em
}
.Testimonials__header h1{
text-align:center;
font-size:2.4rem;
font-weight:600;
width:-webkit-fit-content;
width:-moz-fit-content;
width:fit-content;
line-height:1;
letter-spacing:-.02em
}
.Newsletter__header{
display:grid;
grid-template-columns:1fr -webkit-max-content 1fr;
grid-template-columns:1fr max-content 1fr;
align-items:center;
margin:5.5em 0 4.75em
}
.Newsletter__header :first-child{
padding-top:.3em
}
.Newsletter__header h1{
text-align:center;
font-size:2.4rem;
font-weight:600;
width:-webkit-fit-content;
width:-moz-fit-content;
width:fit-content;
line-height:1;
letter-spacing:-.02em
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment