Skip to content

Instantly share code, notes, and snippets.

@simevidas simevidas/main.css
Last active Oct 26, 2018

Embed
What would you like to do?
@charset "UTF-8";:root {
--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));--scale:1rem}
@media (min-width: 768px) {
:root {
--scale:1.17rem
}
}
@media (min-width: 1260px) {
:root {
--scale:1.27rem
}
}
:focus {
outline: none
}
[hidden] {
display: none!important
}
noscript {
display: block;
font-size: 1.2em;
margin: 1.2em
}
html {
-ms-hyphens: auto;
-webkit-hyphens: auto;
background-color: #fff;
color: #333;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
font-size: var(--scale);
hyphens: auto;
line-height: 1.58;
overflow-y: scroll
}
h1,h2,h3,h4,h5,h6,ol,p,ul {
font-size: 1em;
font-weight: 400;
margin: 0
}
code {
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
font-size: 90%;
word-spacing: -.3em
}
pre {
-ms-hyphens: none;
-webkit-hyphens: none;
hyphens: none;
word-break: normal
}
pre code {
word-spacing: inherit
}
a {
color: #00f;
text-decoration: none
}
a:hover {
background-image: linear-gradient(currentColor,currentColor);
background-position: center bottom 4.5%;
background-repeat: no-repeat;
background-size: 100% .074em;
text-shadow: .1em 0 #fff,.05em 0 #fff,-.05em 0 #fff,-.1em 0 #fff
}
:not(pre):not(th):not(td)>code {
padding: 0 .2em
}
:not(pre):not(th):not(td):not(h3):not(a):not(li)>code {
background-color: #f9f9f9;
border-radius: .2em;
padding: .1em .2em
}
[type=button],[type=reset],[type=submit],button {
background-repeat: repeat
}
[data-whatinput=keyboard] a:focus {
background: #ffbf47!important;
border-color: transparent!important;
color: #00f;
outline: 3px solid #ffbf47;
text-shadow: none!important
}
[data-whatinput=keyboard] a:focus * {
color: #00f
}
[data-whatinput=keyboard] summary:focus {
outline: 3px solid #ffbf47!important
}
button:focus,input:focus {
outline: 3px solid #ffbf47!important
}
.Layout {
margin: 0 auto;
max-width: 1440px
}
@media (min-width: 1260px) {
.Layout {
display:grid;
grid-template-columns: 2em 18em 2em minmax(2em,7fr) 36em minmax(2em,7fr)
}
.Layout:after {
border-right: 1px dashed rgba(119,136,153,.53333);
content: "";
grid-column: 3;
grid-row: 1
}
}
@media (max-width: 1259.9px) {
.Layout__side-item {
margin:1em auto 0;
max-width: 38em;
padding: 0 1em
}
}
@media (min-width: 1260px) {
.Layout__side-item {
grid-column:2
}
}
@media (max-width: 1259.9px) {
.Layout__main-item {
margin:0 auto;
max-width: 38em;
padding: 0 1em
}
}
@media (min-width: 1260px) {
.Layout__main-item {
grid-column:5
}
}
@media (min-width: 1260px) {
.Layout__sticky-column {
height:100vh;
padding-top: 2em
}
}
@media (min-width: 1260px) and (min-height:740px) {
.Layout__sticky-column {
position:-webkit-sticky;
position: sticky;
top: 0
}
}
.u-visually-hidden {
clip: rect(1px,1px,1px,1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px
}
.u-no-outline {
outline: none!important
}
.u-no-shadow {
text-shadow: none!important
}
.u-loading:before {
-webkit-animation: loading 0s 1s forwards;
animation: loading 0s 1s forwards;
content: "Loading\2026";
opacity: 0
}
@-webkit-keyframes loading {
to {
opacity: 1
}
}
@keyframes loading {
to {
opacity: 1
}
}
.u-highlight {
-webkit-animation: highlight 1s forwards;
animation: highlight 1s forwards;
border-radius: .3em
}
@-webkit-keyframes highlight {
0% {
background-color: #fe8
}
to {
background-color: #fff
}
}
@keyframes highlight {
0% {
background-color: #fe8
}
to {
background-color: #fff
}
}
.Title {
background: var(--brand-gradient)
}
.Title__link {
color: #fff;
font-size: 1.7em;
font-weight: 700
}
@media (max-width: 1259.9px) {
.Title__link {
display:flex;
padding: .1em .6em
}
}
@media (min-width: 1260px) {
.Title__link {
-ms-hyphens:none;
-webkit-hyphens: none;
align-items: center;
display: grid;
font-size: 2em;
height: 9rem;
hyphens: none;
line-height: 1.15
}
}
.Title__link:hover {
background: none;
text-shadow: none
}
.Title__link>:first-child {
margin-right: auto
}
@media (min-width: 1260px) {
.Title__link>:first-child {
background-color:hsla(0,0%,100%,.13333);
border-radius: 100rem;
grid-column: 1;
grid-row: 1;
margin-left: 1.3em;
padding: .35em;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
}
.Title__link svg {
fill: #fff
}
@media (max-width: 1259.9px) {
.Title__link svg {
height:1.1em;
vertical-align: -.18em;
width: 1.1em
}
}
@media (min-width: 1260px) {
.Title__link svg {
display:block
}
}
@media (min-width: 1260px) {
.Title__link>:last-child {
grid-column:1;
grid-row: 1;
justify-self: end;
padding: .5em .7em;
text-align: right;
width: 6em
}
}
.Title__menu {
align-items: center;
display: flex;
justify-content: space-between;
padding: .2em 1em 1em
}
@media (min-width: 1260px) {
.Title__menu {
display:none
}
}
.Title__menu :first-child a {
color: #fff;
text-shadow: none!important
}
.Title__menu :last-child a {
background: hsla(0,0%,100%,.2);
border: 2px solid #fff;
border-radius: 100rem;
color: #fff;
padding: .2em .6em .3em .75em;
text-shadow: none!important
}
.Title__tagline {
display: none
}
@media (min-width: 1260px) {
.Title__tagline {
border:solid #eee;
border-width: 1px 0;
display: block;
font-size: 90%;
line-height: 2;
margin: 2.2em auto;
padding: .6em;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
.Title__tagline b {
color: #234;
font-weight: 700;
margin-right: .3em
}
}
.Action {
display: none
}
@media (min-width: 1260px) {
.Action {
display:block;
text-align: center
}
}
.Action__button {
background: linear-gradient(45deg,rgba(255,220,0,.46667),rgba(255,220,0,.73333));
border: none;
border-bottom: 2px solid rgba(218,165,32,.46667);
border-radius: 100rem;
color: inherit;
display: block;
line-height: 1.3;
margin: auto;
padding: .7em 1.7em .8em;
text-shadow: none!important;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
.Action__button:hover {
background: linear-gradient(45deg,rgba(255,220,0,.73333),#ffdc00);
border-bottom-color: #daa520
}
.Action__button span {
color: #616161;
font-size: 87.5%;
font-weight: 400
}
.Banner {
background-color: rgba(255,255,136,.46667);
border-bottom: 1px solid #def;
margin-top: 1px
}
@media (min-width: 1260px) {
.Banner {
background:none;
border: 2px solid #789;
display: grid;
font-size: 90%;
grid-template-columns: -webkit-max-content 1fr;
grid-template-columns: max-content 1fr;
height: 9rem;
margin-top: 2.2em
}
}
.Banner summary {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
padding: .4em .5em .5em;
user-select: none
}
@media (min-width: 1260px) {
.Banner summary {
list-style-type:none;
padding: .7em .8em;
pointer-events: none
}
.Banner summary::-webkit-details-marker {
display: none
}
}
@media (max-width: 1259.9px) {
.Banner summary {
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.Banner [open] summary {
line-height: 1.2;
padding-top: .6em;
white-space: normal
}
}
@media (min-width: 1260px) {
.Banner strong {
background-color:#fe8;
border-bottom: 1px solid rgba(0,0,0,.06667);
color: rgba(34,51,68,.93333);
font-size: 1.2em;
padding: .1em .25em
}
}
.Banner details>:not(summary) {
margin: .7em .8em
}
.Banner summary+* {
margin-top: 0!important
}
.Banner ul {
line-height: 1.8;
padding-left: 1.5em
}
.Banner__icon {
display: none
}
@media (min-width: 1260px) {
.Banner__icon {
--fill-color:rgba(119,136,153,0.26667);
align-content: center;
border-right: 1px solid rgba(119,136,153,.13333);
display: grid;
justify-content: center;
margin: 2px 0;
width: 6.4rem
}
}
.Icon {
display: inline-block;
fill: currentColor;
fill: var(--fill-color,currentColor);
min-height: 1em;
min-width: 1em;
position: relative;
top: -.0625em;
vertical-align: middle
}
.ToTop {
margin: 4em auto;
text-align: center
}
.ToTop button {
--fill-color:#234;background: transparent;
border: 1px solid rgba(119,136,153,.53333);
font-size: 90%;
padding: .9em .8em .6em
}
.ToTop button:hover {
border-color: #789
}
.Issues__header {
margin: 4em 0
}
.Issues__header h2 {
background-color: rgba(119,136,153,.13333);
color: #345;
font-size: 1.3em;
font-weight: 400;
line-height: 1;
margin: 0 auto;
padding: .6em;
text-transform: uppercase;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
.Issues__header strong {
-webkit-background-clip: text;
background-clip: text;
background-image: var(--brand-gradient);
color: transparent;
font-weight: 700;
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 {
border-bottom: 1.5px solid rgba(119,136,153,.2);
color: inherit;
display: grid;
grid-column-gap: 1em;
grid-template-columns: 6.2rem 1fr;
grid-template-rows: auto 1fr;
padding: .6em 1em .7em
}
.Issues__body :not(.Issues__note)>a:hover {
background: linear-gradient(45deg,rgba(0,0,255,.03529),rgba(0,0,255,.06667));
border-color: rgba(0,0,255,.13333);
color: #00f;
text-shadow: none
}
.Issues__body :not(.Issues__note)>a:hover * {
color: #00f
}
.Issues__body strong {
-webkit-background-clip: text;
background-clip: text;
background-image: var(--brand-gradient);
color: transparent;
font-size: 1.3em;
font-weight: 700;
line-height: 1.2
}
.Issues__body time {
color: #6c6c6c;
font-size: 90%;
grid-row: 2
}
.Issues__body span {
grid-row: 1/span 2
}
.Issues__body code {
background-color: transparent
}
.Issues__note {
background: var(--brand-gradient-alpha);
margin: auto;
max-width: 70%;
padding: .6em 1em .8em;
text-align: center
}
@media (min-width: 610px) {
.Issue {
margin-top:4em
}
}
.Issue__print-link {
display: none;
text-align: center
}
.Issue__header {
margin: 2em 0 3em
}
@media (min-width: 610px) {
.Issue__header {
align-items:center;
display: grid;
grid-template-columns: 1fr -webkit-max-content 1fr;
grid-template-columns: 1fr max-content 1fr
}
}
@media (max-width: 609.9px) {
.Issue__header p {
margin-bottom:.4em;
text-align: center
}
}
@media (min-width: 610px) {
.Issue__header p {
padding-top:.1em
}
}
.Issue__header h2 {
background-color: rgba(119,136,153,.13333);
font-size: 1.3em;
line-height: 1;
margin: auto;
padding: .3em .6em .5em;
text-transform: uppercase;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
.Issue__header h2 strong {
-webkit-background-clip: text;
background-clip: text;
background-image: var(--brand-gradient);
color: transparent;
font-weight: 700
}
.Issue__header h2 b {
font-size: 1.3em;
font-weight: 700;
margin: auto .3em auto .2em
}
@media (max-width: 609.9px) {
.Issue__header h2 span {
display:none
}
}
.Issue__author {
font-style: italic;
text-align: center
}
.Issue__body h3 {
color: #345;
font-size: 1.75em;
font-weight: 700;
line-height: 1.2;
margin: 2em 0 .6em;
position: relative;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
.Issue__body h4 {
font-size: 1.25em;
margin-bottom: .2em;
margin-top: 1.5em
}
.Issue__body blockquote,.Issue__body ol,.Issue__body p,.Issue__body ul {
margin: 1em 0
}
.Issue__body blockquote {
background-image: linear-gradient(45deg,rgba(238,238,221,.73333),rgba(238,238,221,.86667));
border-bottom: 1px solid #ddc;
line-height: 1.48;
padding: .5em .5em .7em 2.35em;
position: relative
}
.Issue__body blockquote:before {
color: #998;
content: "\201C";
font-family: Georgia,serif;
font-size: 3em;
font-weight: 700;
left: .15em;
line-height: 1;
position: absolute;
top: .2em
}
.Issue__body pre {
border-radius: .2em;
font-size: 92.5%;
line-height: 1.4;
overflow: auto
}
.Issue__body img,.Issue__body video {
background: #fff;
border: 1px solid #bcd;
display: block;
margin: 0 auto;
width: 100%
}
@media (min-width: 768px) {
.Issue__body img,.Issue__body video {
-o-object-fit:scale-down;
box-shadow: inset 0 0 .6em #def;
object-fit: scale-down;
padding: 1.2em
}
}
.Issue__body table {
width: 100%
}
.Issue__body td,.Issue__body th {
border: 1px solid #ccc;
font-size: 87.5%;
line-height: 1.4;
padding: .3em .5em
}
.Issue__body kbd {
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0,0,0,.2),inset 0 0 0 2px #fff;
color: #333;
font-family: inherit;
font-size: 80%;
margin: 0 .1em;
padding: .1em .5em;
text-shadow: 0 1px 0 #fff;
white-space: nowrap
}
.Issue__body kbd,.Issue__body small {
display: inline-block;
line-height: 1.4
}
.Issue__body h4+* {
margin-top: 0
}
.Issue__body li+li {
margin-top: .4em
}
.Issue__body li>blockquote {
margin: .6em 0
}
.Issue__footer {
margin: 4em 0
}
.Issue__thank-you {
background-image: var(--brand-gradient);
background-size: 100% .3em;
margin: auto;
padding: .5em;
text-align: center;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
.Issue__discuss {
align-items: center;
background: var(--brand-gradient-alpha);
display: flex;
line-height: 1.41;
margin: 2em auto auto;
max-width: 19.5em;
padding: .6em 1em .8em 1.57em
}
.Issue__discuss svg {
fill: #234;
flex-shrink: 0;
margin-right: 1.32em
}
.hljs {
background-color: #f9f9f9;
padding: .5em .8em .6em
}
.hljs-comment {
color: #737373
}
.hljs-built_in,.hljs-builtin-name {
color: #007ca5
}
.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
}
@media (min-width: 610px) {
[data-mailtrain-subscription-widget] {
font-size:.9em
}
[data-mailtrain-subscription-widget] [type=email] {
width: 18em
}
[data-mailtrain-subscription-widget] button:after {
content: " to weekly emails"
}
}
[data-mailtrain-subscription-widget] .status {
line-height: 1.31;
margin-top: .4em;
position: absolute;
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
}
.Error {
border: 1px solid #f44;
margin: 3em auto 0;
max-width: 26em;
padding: .8em 1.4em
}
.Error h3 {
font-size: 2em;
margin-bottom: .5em
}
.Error h3 strong {
color: #f44;
text-transform: uppercase
}
.Error__back-link a {
border: 1px solid #eee;
display: block;
margin: 1.5em 0 1em;
padding: .3em 0;
text-align: center
}
.Error__back-link a:hover {
border-color: rgba(0,0,255,.26667)
}
.About ol {
margin: 3em 0
}
.About li {
margin-bottom: 1.5em;
padding: .3em .6em
}
.About__header {
align-items: center;
display: grid;
grid-template-columns: 1fr -webkit-max-content 1fr;
grid-template-columns: 1fr max-content 1fr;
margin: 5.5em 0
}
.About__header :first-child {
padding-top: .3em
}
.About__header h2 {
font-size: 2.4em;
font-weight: 700;
line-height: 1;
text-align: center;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
.Pdf__header {
margin-top: 110mm;
page-break-after: always;
text-align: center
}
.Pdf__header h2 {
background-color: rgba(119,136,153,.13333);
font-size: 3em;
line-height: 1;
margin: .35em auto;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
.Pdf__header strong {
-webkit-background-clip: text;
background-clip: text;
background-image: var(--brand-gradient);
color: transparent;
display: block;
font-weight: 700;
padding: .3em .5em .4em
}
.Pdf__header p {
font-size: 1.5em
}
@page {
margin: 10mm 0;
size: A4
}
@media print {
body {
-webkit-print-color-adjust: exact;
width: 210mm
}
.Layout {
display: block;
width: auto
}
.Banner,.Issue__footer,.Issue__header p,.Layout__side-item,.ToTop {
display: none
}
.Issue {
page-break-after: always
}
.Issue__header h2 span {
display: inline!important
}
.Issue__print-link {
display: block
}
}
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.