Last active
August 19, 2020 04:54
-
-
Save simevidas/3abfa6cef9164e2a7fbb696ef94fbe4a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --scale: 100%; | |
| --brand-gradient: linear-gradient(45deg,#f012be,#0074d9); | |
| --brand-gradient-alpha: linear-gradient(45deg,rgba(249,104,84,0.06667),rgba(119,136,153,0.06667)); | |
| --brand-gradient-alpha2: linear-gradient(225deg,rgba(249,104,84,0.06667),rgba(119,136,153,0.06667)); | |
| --link-color: #00f; | |
| --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%; | |
| } | |
| } | |
| [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,monospace; | |
| font-size: 92.5%; | |
| font-weight: 400; | |
| word-spacing: -.3em; | |
| } | |
| pre { | |
| word-break: normal; | |
| } | |
| pre code { | |
| word-spacing: inherit; | |
| } | |
| a { | |
| color: var(--link-color); | |
| text-underline-offset: 0.13em; | |
| text-decoration-thickness: 0.01em; | |
| } | |
| button, | |
| input, | |
| select, | |
| textarea { | |
| font-family: inherit; | |
| font-size: inherit; | |
| line-height: inherit; | |
| } | |
| mark { | |
| color: rgba(34,51,68,.93333); | |
| background-color: rgba(255,238,136,.73333); | |
| padding: 0.075em 0.2em 0.15em; | |
| box-shadow: inset 0 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; | |
| -ms-writing-mode: tb; | |
| writing-mode: tb; | |
| text-align: center; | |
| white-space: nowrap; | |
| } | |
| .Firefox a { | |
| font-size: 80%; | |
| color: #767676; | |
| padding: 0.1em; | |
| background: #fff; | |
| -webkit-text-decoration-line: none; | |
| text-decoration-line: none; | |
| } | |
| .Firefox a:hover { | |
| color: var(--link-color); | |
| -webkit-text-decoration-line: underline; | |
| text-decoration-line: underline; | |
| } | |
| } | |
| @media (min-width:1440px) { | |
| .Firefox { | |
| left: calc((100% - 1440px)/2 + 21.55em); | |
| } | |
| } | |
| .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: 0.8em; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| @media (min-width:1260px) { | |
| .Layout__sticky-column { | |
| display: block; | |
| height: 100vh; | |
| margin-bottom: 0; | |
| padding-top: 2em; | |
| } | |
| } | |
| @media (min-width:1260px) and (min-height:635px) { | |
| .Layout__sticky-column { | |
| position: -webkit-sticky; | |
| position: sticky; | |
| top: 0; | |
| } | |
| } | |
| .skip-link { | |
| position: absolute; | |
| left: -9999em; | |
| } | |
| .skip-link:focus { | |
| left: 0; | |
| z-index: 2; | |
| font-size: 80%; | |
| padding: 0 0.3em; | |
| background-color: #fff; | |
| } | |
| .u-visually-hidden { | |
| clip: rect(1px,1px,1px,1px); | |
| height: 1px; | |
| overflow: hidden; | |
| position: absolute; | |
| white-space: nowrap; | |
| width: 1px; | |
| } | |
| .u-loading { | |
| height: 100vh; | |
| text-align: center; | |
| margin-top: 2em; | |
| font-size: 2em; | |
| font-weight: 300; | |
| } | |
| .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; | |
| 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 0.15em 0.4em 1em; | |
| border-radius: 100px; | |
| position: relative; | |
| top: -.6em; | |
| } | |
| .Testimonial strong { | |
| font-weight: 550; | |
| } | |
| .Testimonial p { | |
| grid-row: 2; | |
| grid-column: 1; | |
| } | |
| .Testimonial p+p { | |
| text-align: right; | |
| padding-right: 0.9em; | |
| padding-top: 0.45em; | |
| } | |
| } | |
| .Notifications { | |
| border-bottom: 1px solid rgba(102,119,136,.2); | |
| background-color: rgba(255,238,136,.73333); | |
| box-shadow: inset 0 0 0.5em rgba(255,238,136,.86667); | |
| grid-column: span 2; | |
| margin-top: 0.8em; | |
| } | |
| @media (min-width:1260px) { | |
| .Notifications { | |
| background: none; | |
| border: 0.16em solid #fd7; | |
| border-radius: 0.3em; | |
| margin-top: 2.9em; | |
| box-shadow: none; | |
| font-size: 90%; | |
| } | |
| } | |
| .Notifications summary { | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| padding: 0.4em 0.5em 0.5em; | |
| font-weight: 600; | |
| } | |
| .Notifications summary svg { | |
| display: none; | |
| } | |
| @media (min-width:1260px) { | |
| .Notifications summary { | |
| list-style-type: none; | |
| pointer-events: none; | |
| font-size: 1rem; | |
| font-weight: 540; | |
| background-color: #fdf2b2; | |
| padding: 0.05em 0.6em 0.15em 0.45em; | |
| box-shadow: inset 0 0 0.5em rgba(255,221,119,.86667); | |
| letter-spacing: -.02em; | |
| display: block; | |
| width: -webkit-fit-content; | |
| width: -moz-fit-content; | |
| width: fit-content; | |
| margin: auto; | |
| position: relative; | |
| top: -.93em; | |
| border-radius: 0.2em; | |
| } | |
| .Notifications summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .Notifications summary svg { | |
| display: inline-block; | |
| margin-right: 0.3em; | |
| } | |
| } | |
| @media (max-width:1259.9px) { | |
| .Notifications summary { | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| } | |
| .Notifications [open] summary { | |
| white-space: normal; | |
| line-height: 1.2; | |
| padding-top: 0.6em; | |
| } | |
| } | |
| .Notifications ul { | |
| margin: 0.3em 1.2em 0.8em; | |
| padding-left: 0.9em; | |
| line-height: 1.6; | |
| } | |
| @media (min-width:1260px) { | |
| .Notifications ul { | |
| margin: -.6em 0.7em 0.8em; | |
| } | |
| } | |
| .Subscribe { | |
| margin-top: 0.3em; | |
| } | |
| [data-mailtrain-subscription-widget] form { | |
| display: flex; | |
| } | |
| [data-mailtrain-subscription-widget] .form-group.email { | |
| flex-grow: 1; | |
| margin-right: 0.5em; | |
| } | |
| [data-mailtrain-subscription-widget] [type=email] { | |
| width: 100%; | |
| } | |
| [data-mailtrain-subscription-widget] [type=submit] { | |
| white-space: nowrap; | |
| } | |
| [data-mailtrain-subscription-widget] .Subscribe__new-label { | |
| display: none; | |
| } | |
| @media (min-width:1260px) { | |
| [data-mailtrain-subscription-widget] { | |
| font-size: 90%; | |
| } | |
| } | |
| [data-mailtrain-subscription-widget] .status { | |
| position: fixed; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| bottom: 0; | |
| text-align: left; | |
| display: grid; | |
| justify-content: center; | |
| align-content: center; | |
| background: rgba(0,0,0,.46667); | |
| } | |
| [data-mailtrain-subscription-widget] .status:empty { | |
| display: none; | |
| } | |
| [data-mailtrain-subscription-widget] .status > * { | |
| padding: 0.8em 1.2em; | |
| max-width: 25em; | |
| border-radius: 0.3em; | |
| } | |
| [data-mailtrain-subscription-widget] .status h4 { | |
| font-weight: 600; | |
| display: inline; | |
| } | |
| [data-mailtrain-subscription-widget] .status h4:after { | |
| content: "."; | |
| } | |
| [data-mailtrain-subscription-widget] .status p { | |
| display: inline; | |
| } | |
| [data-mailtrain-subscription-widget] .error, | |
| [data-mailtrain-subscription-widget] .info, | |
| [data-mailtrain-subscription-widget] .spinner, | |
| [data-mailtrain-subscription-widget] .success { | |
| background-color: #fff; | |
| box-shadow: 0 0 1em #666; | |
| } | |
| [data-mailtrain-subscription-widget] p.status-buttons { | |
| display: block; | |
| margin-top: 0.5em; | |
| text-align: center; | |
| } | |
| .Subscribe__display-none { | |
| display: none; | |
| } | |
| .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; | |
| } | |
| .Title { | |
| overflow: auto; | |
| position: relative; | |
| } | |
| @media (min-width:1260px) { | |
| .Title { | |
| background-image: var(--brand-gradient-alpha); | |
| } | |
| } | |
| .Title__link { | |
| float: left; | |
| font-size: 1.7rem; | |
| line-height: 1; | |
| display: block; | |
| overflow: hidden; | |
| padding-top: 0.1em; | |
| padding-bottom: 0.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: 0.55em; | |
| } | |
| .About .u-wide { | |
| margin: 2.2em auto; | |
| font-size: 0.9rem; | |
| border: solid #def; | |
| border-width: 0.09em 0; | |
| padding: 0.8em 1.2em 0.9em; | |
| text-align: center; | |
| } | |
| .Header__promo-button { | |
| display: none; | |
| } | |
| @media (min-width:1260px) { | |
| .Header__promo-button { | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| width: 100%; | |
| text-align: center; | |
| margin-top: 0.05em; | |
| } | |
| .Header__promo-button button { | |
| font-size: 80%; | |
| border: none; | |
| background-color: #d04838; | |
| color: #fff; | |
| border-radius: 0 0 0.5em 0.5em; | |
| vertical-align: top; | |
| padding: 0.05em 0.6em 0.2em 0.5em; | |
| line-height: 1.2; | |
| font-weight: 500; | |
| } | |
| } | |
| .Funding { | |
| display: none; | |
| } | |
| @media (min-width:1260px) { | |
| .Funding { | |
| display: block; | |
| margin: 1em 0; | |
| } | |
| .Funding p { | |
| font-size: 80%; | |
| text-align: center; | |
| color: #555; | |
| } | |
| } | |
| .Funding__avatars { | |
| list-style: none; | |
| padding: 0.5em; | |
| margin-top: 0.2em; | |
| border: 0.07em solid transparent; | |
| border-radius: 0.3em; | |
| display: flex; | |
| overflow-x: scroll; | |
| overscroll-behavior-x: auto; | |
| scrollbar-width: thin; | |
| scrollbar-color: #fff #fff; | |
| } | |
| .Funding__avatars::-webkit-scrollbar { | |
| height: 0.5em; | |
| } | |
| .Funding__avatars::-webkit-scrollbar-track { | |
| background: #fff; | |
| } | |
| .Funding__avatars::-webkit-scrollbar-thumb { | |
| background: #fff; | |
| border: 0.08em solid #fff; | |
| border-radius: 1em; | |
| } | |
| .Funding__avatars:hover { | |
| --color: #abc; | |
| scrollbar-color: var(--color) #fff; | |
| border-color: #def; | |
| } | |
| .Funding__avatars:hover::-webkit-scrollbar-thumb { | |
| background: var(--color); | |
| } | |
| .Funding__avatars:after { | |
| content: ""; | |
| padding-right: 0.5em; | |
| } | |
| .Funding__avatars li { | |
| border: 0.125em solid #fff; | |
| border-radius: 50%; | |
| position: relative; | |
| transition: transform 75ms; | |
| } | |
| .Funding__avatars li:not(:first-child) { | |
| margin-left: -.68em; | |
| } | |
| .Funding__avatars li:hover { | |
| z-index: 1; | |
| transform: scale(1.25); | |
| } | |
| .Funding__avatars img { | |
| border-radius: 50%; | |
| background: #fff; | |
| } | |
| .Advertise { | |
| background-color: #d04838; | |
| margin: 4em 0; | |
| border: 3px solid #d04838; | |
| border-radius: 0.6em; | |
| scroll-margin: 1em; | |
| } | |
| .Advertise summary { | |
| padding: 0.5em 1em 0.6em; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| background-color: #fff; | |
| border-radius: 0.45em; | |
| } | |
| .Advertise ul { | |
| background: #fff; | |
| padding: 0.4em 1.5em 0.4em 2.5em; | |
| border-radius: 0.5em; | |
| } | |
| @media (min-width:768px) { | |
| .Advertise ul { | |
| padding: 0.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: 0.08em solid #ddd; | |
| } | |
| .Advertise[open] ul { | |
| border-top-left-radius: 0; | |
| border-top-right-radius: 0; | |
| } | |
| .Issues__patreon { | |
| border: 0.16em solid #ffa17e; | |
| border-radius: 0.3em; | |
| font-size: 90%; | |
| position: relative; | |
| padding: 0 1.3em 1em; | |
| margin: 2.8em auto 0; | |
| } | |
| .Issues__patreon h2 { | |
| position: relative; | |
| top: -.9em; | |
| left: 0; | |
| right: 0; | |
| width: -webkit-fit-content; | |
| width: -moz-fit-content; | |
| width: fit-content; | |
| margin: auto; | |
| background-color: #ffd4c4; | |
| padding: 0.05em 0.6em 0.15em 0.52em; | |
| font-size: 1rem; | |
| font-weight: 540; | |
| letter-spacing: -.02em; | |
| border-radius: 0.2em; | |
| box-shadow: inset 0 0 0.5em #ffa17e; | |
| } | |
| .Issues__patreon svg { | |
| vertical-align: -.2em; | |
| margin-right: 0.08em; | |
| } | |
| .Issues__patreon h3 { | |
| font-size: 1.5rem; | |
| text-align: center; | |
| font-weight: 600; | |
| letter-spacing: -.02em; | |
| margin: 0.2em 0 0.9em; | |
| } | |
| .Issues__patreon p { | |
| text-align: center; | |
| } | |
| .Issues__patreon img { | |
| margin: 1em auto 0.5em; | |
| display: block; | |
| max-width: 100%; | |
| height: auto; | |
| background: #fff; | |
| } | |
| @media (min-width:1260px) { | |
| .Issues__patreon img { | |
| margin: 2em auto 1em; | |
| max-width: 87.5%; | |
| border-bottom: 1px solid #e1e2e3; | |
| box-shadow: 0 0 1.7em #e1e2e3; | |
| } | |
| } | |
| .Issues__header { | |
| margin: 2em 0; | |
| } | |
| .Issues__header h1 { | |
| margin: 0 auto; | |
| font-size: 1.8rem; | |
| font-weight: 300; | |
| text-align: center; | |
| } | |
| .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; | |
| -moz-column-gap: 1em; | |
| column-gap: 1em; | |
| padding: 0.6em 1em 0.7em; | |
| border-bottom: 1.5px solid rgba(119,136,153,.2); | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| .Issues__body:not(.Issues__note) > a:hover { | |
| color: var(--link-color); | |
| background: linear-gradient(45deg,rgba(0,0,255,.0352941),rgba(0,0,255,.0666667)); | |
| border-color: rgba(0,0,255,.13333); | |
| } | |
| .Issues__body:not(.Issues__note) > a:hover * { | |
| color: var(--link-color); | |
| } | |
| .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-alpha2); | |
| padding: 0.6em 1em 0.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.5em; | |
| border: solid #def; | |
| border-width: 0.08em 0; | |
| padding: 0.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 0.3em auto 0.2em; | |
| } | |
| @media (max-width:609.9px) { | |
| .Issue__header__heading span { | |
| display: none; | |
| } | |
| } | |
| .Issue__TOC { | |
| font-size: 90%; | |
| background-image: var(--brand-gradient-alpha2); | |
| width: -webkit-fit-content; | |
| width: -moz-fit-content; | |
| width: fit-content; | |
| margin: auto; | |
| } | |
| .Issue__TOC:not(:empty) { | |
| padding: 0.7em 2.3em 0.9em 1.3em; | |
| } | |
| .Issue__TOC p { | |
| font-family: Georgia,serif; | |
| font-style: italic; | |
| margin-bottom: 0.3em; | |
| } | |
| .Issue__TOC ul { | |
| padding-left: 1.8em; | |
| } | |
| .Issue__body h1, | |
| .Issue__body h2 { | |
| font-weight: 600; | |
| color: #345; | |
| margin: 1em 0 0.67em; | |
| line-height: 1.2; | |
| letter-spacing: -.02em; | |
| scroll-margin: 0.9em; | |
| } | |
| .Issue__body h1 code, | |
| .Issue__body h2 code { | |
| letter-spacing: -.04em; | |
| } | |
| .Issue__body h1 { | |
| font-size: 1.5rem; | |
| } | |
| .Issue__body h2 { | |
| font-size: 1.35rem; | |
| } | |
| .Issue__body *+h1, | |
| .Issue__body .Issue__promoted-item > h1 { | |
| scroll-margin: -4.6rem; | |
| } | |
| .Issue__body *+h1:before, | |
| .Issue__body .Issue__promoted-item > h1:before { | |
| --l: 0.02em; | |
| content: ""; | |
| display: block; | |
| height: 3em; | |
| margin-bottom: 1em; | |
| background-image: radial-gradient(currentColor var(--l),transparent var(--l)); | |
| background-size: calc(10*var(--l)) calc(10*var(--l)); | |
| color: #89a; | |
| } | |
| .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: 0.5em 0.5em 0.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: 0.15em; | |
| top: 0.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: 0.2em; | |
| overflow: auto; | |
| } | |
| .Issue__body th > code { | |
| font-weight: 700; | |
| } | |
| .Issue__body:not(h1):not(h2):not(pre):not(mark):not(th):not(td) > code { | |
| background-color: #f9f9f9; | |
| padding: 0.15em 0.3em; | |
| border-radius: 0.2em; | |
| } | |
| .Issue__body figure > img, | |
| .Issue__body p > img, | |
| .Issue__body video { | |
| display: block; | |
| max-width: 100%; | |
| height: auto; | |
| 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: 0.67em; | |
| color: #555; | |
| text-align: center; | |
| } | |
| .Issue__body td, | |
| .Issue__body th { | |
| border: 1px solid #ccc; | |
| padding: 0.3em 0.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 hr+ol { | |
| font-size: smaller; | |
| padding: 0 0 0 1.5em; | |
| } | |
| .Issue__body strong { | |
| font-weight: 600; | |
| } | |
| .Issue__body strong.Issue__note { | |
| text-transform: lowercase; | |
| font-variant-caps: small-caps; | |
| font-weight: 900; | |
| } | |
| .Issue__body kbd { | |
| padding: 0.1em 0.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; | |
| display: inline-block; | |
| margin: 0 0.1em; | |
| text-shadow: 0 1px 0 #fff; | |
| line-height: 1.4; | |
| white-space: nowrap; | |
| } | |
| .Issue__body h1+* { | |
| margin-top: 0; | |
| } | |
| .Issue__body li+li { | |
| margin-top: 0.4em; | |
| } | |
| .Issue__via { | |
| font-size: 0.9rem; | |
| } | |
| .Issue__via a { | |
| font-weight: 600; | |
| } | |
| .Issue__footer { | |
| margin: 4em 0; | |
| } | |
| .hljs { | |
| background-color: #f9f9f9; | |
| padding: 0.5em 0.8em 0.6em; | |
| } | |
| .hljs-comment { | |
| color: #737373; | |
| } | |
| .hljs-built_in, | |
| .hljs-builtin-name { | |
| color: #007ca5; | |
| } | |
| .lang-css .hljs-meta { | |
| color: #d73a49; | |
| font-weight: 400; | |
| } | |
| .Issue__promoted-item { | |
| position: relative; | |
| } | |
| .Issue__promoted-CTA:after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| } | |
| .Issue__promoted-logo { | |
| border: none; | |
| width: 8.858em; | |
| height: auto; | |
| } | |
| @media (min-width:520px) { | |
| .Issue__promoted-logo { | |
| float: right; | |
| margin-right: 0.67em; | |
| margin-top: -2.7em!important; | |
| } | |
| } | |
| .Issue__promoted-label { | |
| font-size: 0.75rem; | |
| border: 0.05em solid #d04838; | |
| border-radius: 0.3em; | |
| color: #d04838; | |
| padding: 0 0.4em 0.18em 0.33em; | |
| font-weight: 500; | |
| margin: 0 0.7em 0 0; | |
| vertical-align: 0.16em; | |
| } | |
| .Infobox { | |
| background: var(--brand-gradient-alpha2); | |
| padding: 0.63em 1em 0.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; | |
| } | |
| .Recent { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr; | |
| gap: 2em 1em; | |
| align-items: flex-start; | |
| } | |
| .Recent__item { | |
| position: relative; | |
| } | |
| .Recent__item:nth-of-type(n+7) { | |
| display: none; | |
| } | |
| .Recent__item .markup > p { | |
| color: #345; | |
| font-size: 1.08rem; | |
| line-height: 1.2; | |
| font-weight: 500; | |
| letter-spacing: -.02em; | |
| margin-bottom: 0.5em; | |
| } | |
| .Recent__item time { | |
| color: #666; | |
| text-transform: lowercase; | |
| font-variant-caps: small-caps; | |
| display: block; | |
| margin-bottom: 0.5em; | |
| font-weight: 350; | |
| } | |
| .Recent__item a:after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| } | |
| .Recent__item__label--newsletter, | |
| .Recent__item__label--special { | |
| text-transform: uppercase; | |
| font-size: 75%; | |
| font-weight: 550; | |
| width: -webkit-fit-content; | |
| width: -moz-fit-content; | |
| width: fit-content; | |
| border-radius: 0.33em; | |
| padding: 0 0.37em 0.067em; | |
| margin-bottom: 0.4rem; | |
| } | |
| .Recent__item__label--special { | |
| color: #d72613; | |
| background-color: rgba(236,19,14,.06275); | |
| } | |
| .Recent__item__label--newsletter { | |
| color: #856404; | |
| background-color: #fff3cd; | |
| } | |
| @media (max-width:600px) { | |
| .Recent { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| } | |
| .Testimonials__header { | |
| text-align: center; | |
| margin: 2.3em 0; | |
| } | |
| .Testimonials__speech-bubble { | |
| font-size: 85%; | |
| padding: 0.8em 1.25em; | |
| border-radius: 1.2em; | |
| position: relative; | |
| } | |
| .Testimonials__speech-bubble:before { | |
| --size: 0.75em; | |
| content: ""; | |
| position: absolute; | |
| top: calc(50% - var(--size)); | |
| width: 0; | |
| height: 0; | |
| border-top: var(--size) solid transparent; | |
| border-bottom: var(--size) solid transparent; | |
| } | |
| .Testimonials__cards { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .Testimonials__cards li { | |
| margin-bottom: 2em; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .Testimonials__cards li:nth-child(odd) .Testimonials__speech-bubble:before { | |
| left: calc(-1*var(--size) + .03em); | |
| border-right: var(--size) solid var(--color); | |
| } | |
| .Testimonials__cards li:nth-child(2n) { | |
| flex-flow: row-reverse; | |
| } | |
| .Testimonials__cards li:nth-child(2n) .Testimonials__speech-bubble:before { | |
| right: calc(-1*var(--size) + .03em); | |
| border-left: var(--size) solid var(--color); | |
| } | |
| .Testimonials__cards li:first-child div { | |
| --color: #ff8a00; | |
| background-color: var(--color); | |
| } | |
| .Testimonials__cards li:nth-child(2) div { | |
| --color: #3b5f3a; | |
| background-color: var(--color); | |
| color: #fff; | |
| } | |
| .Testimonials__cards li:nth-child(3) div { | |
| --color: #416f95; | |
| background-color: var(--color); | |
| color: #fff; | |
| } | |
| .Testimonials__cards li:nth-child(4) div { | |
| --color: #1c7cbb; | |
| background-color: var(--color); | |
| color: #fff; | |
| } | |
| .Testimonials__cards blockquote { | |
| margin: 0 0 0.3em; | |
| } | |
| .Testimonials__avatar { | |
| border-radius: 50%; | |
| margin: 0 1.3em; | |
| flex-shrink: 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment