:root { /* light theme color */ --light-background: #fff; --light-background-secondary: #eaeaea; --light-color: #222; --light-color-secondary: #999; --light-border-color: #dcdcdc; /* dark theme colors */ --dark-background: #292a2d; --dark-background-secondary: #3b3d42; --dark-color: #a9a9b3; --dark-color-secondary: #73747b; --dark-border-color: #4a4b50; /* variables for js, must be the same as these in @custom-media queries */ --phoneWidth: (max-width: 684px); --tabletWidth: (max-width: 900px); } /* HOW TO USE */ /*@media (--phone) {*/ /*margin-top: 0;*/ /*}*/ @font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 400; src: url(ada67516bfcb321d3af9a10b5ac85969.woff2) format("woff2"), url(3ca46ee35e2e0a102cb63a64629ff935.woff) format("woff"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 400; src: url(bc389a025ce24c8a922a75a14efb9849.woff2) format("woff2"), url(8b0d16839ccd5eb17d2d2c57fc7b879c.woff) format("woff"); } @font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 500; src: url(a4b302b56c07e87c3428227270d313fa.woff2) format("woff2"), url(86c6d121f1d396c123e9f2b0b18040a0.woff) format("woff"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 500; src: url(2b29c19f434999cda5a1cdc166684cb0.woff2) format("woff2"), url(7719d61e224c7bfe4e45a2427f7c1dda.woff) format("woff"); } @font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 700; src: url(8506a8d02c2e819508bc53d65de6795a.woff2) format("woff2"), url(0a1242bedd6453e33ea8bfb1a7fb2af4.woff) format("woff"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 700; src: url(8300e08855db2eb7f74402a173874e83.woff2) format("woff2"), url(84c42c5d04986c70ad2fac54f3e00937.woff) format("woff"); } @font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 900; src: url(28b144c25989d58d1efc682da3bbaafb.woff2) format("woff2"), url(f0e3c382b00425de3b4ad83483ca72db.woff) format("woff"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 900; src: url(da612650c903c13b297c827884dcb8db.woff2) format("woff2"), url(f62e9538012bbc071a1c47254dcd6232.woff) format("woff"); } .button-container { display: table; margin-left: auto; margin-right: auto; } .button, a.button { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 8px 18px; margin-bottom: 5px; background: #eaeaea; background: var(--light-background-secondary); text-decoration: none; text-align: center; font-weight: 500; border-radius: 8px; border: 1px solid transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; outline: none; } .dark-theme .button, .dark-theme a.button { background: #3b3d42; background: var(--dark-background-secondary); } /* variants */ .button.outline, a.button.outline { background: transparent; border-color: rgba(0, 0, 0, .2); -webkit-box-shadow: none; box-shadow: none; padding: 8px 18px; } .button.outline :hover, a.button.outline :hover { -webkit-transform: none; transform: none; -webkit-box-shadow: none; box-shadow: none; } .button.primary, a.button.primary { -webkit-box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08); box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08); } .button.primary:hover, a.button.primary:hover { -webkit-box-shadow: 0 2px 6px rgba(50, 50, 93, .21), 0 1px 3px rgba(0, 0, 0, .08); box-shadow: 0 2px 6px rgba(50, 50, 93, .21), 0 1px 3px rgba(0, 0, 0, .08); } .button.link, a.button.link { background: none; font-size: 1rem; } /* sizes */ .button.small, a.button.small { font-size: .8rem; } .button.wide, a.button.wide { min-width: 200px; padding: 14px 24px; } a.read-more, a.read-more:hover, a.read-more:active { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; background: none; -webkit-box-shadow: none; box-shadow: none; padding: 0; margin: 20px 0; font-weight: bold; } .dark-theme a.read-more, .dark-theme a.read-more:hover, .dark-theme a.read-more:active { background: none; } .header { background: #fafafa; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; padding: 20px; } .dark-theme .header { background: #252627; } .header .bulb-on { display: none; } .dark-theme .header .bulb-on { display: block; } .header .bulb-off { display: block; } .dark-theme .header .bulb-off { display: none; } .header__right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 683px) { .header__right { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse } } .header__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 0 auto; width: 760px; max-width: 100%; } .logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-decoration: none; } .logo__mark { margin-right: 5px; } .logo__cursor { display: inline-block; width: 2px; height: 1rem; background: #fe5186; margin-left: 5px; border-radius: 2px; -webkit-animation: cursor 1s infinite; animation: cursor 1s infinite; } @-webkit-keyframes cursor { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes cursor { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .menu { background: #fafafa; border-right: 1px solid; margin-right: 10px; } .dark-theme .menu { background: #252627; } @media (max-width: 683px) { .menu { position: absolute; top: 50px; right: 0; border: none; margin: 0; padding: 10px } } .menu__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; max-width: 100%; margin: 0 auto; padding: 0 15px; font-size: 1rem; list-style: none; } .menu__inner li { margin: 0 20px; } .menu__inner li:last-of-type { margin: 0; } @media (max-width: 683px) { .menu__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 0 } .menu__inner li { margin: 0; padding: 5px; } } .menu-trigger { width: 24px; height: 24px; fill: currentColor; margin-left: 10px; } .menu a { display: inline-block; margin-right: 15px; text-decoration: none; } .menu a:hover { text-decoration: underline; } .menu a:last-of-type { margin-right: 0; } html { -webkit-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } body { margin: 0; padding: 0; font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.54; background-color: #fff; background-color: var(--light-background); color: #222; color: var(--light-color); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -webkit-font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl"; font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl"; -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: 100%; } @media (max-width: 683px) { body { font-size: 1rem } } body.dark-theme { background-color: #292a2d; background-color: var(--dark-background); color: #a9a9b3; color: var(--dark-color); } h1, h2, h3, h4, h5, h6 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } h1 { font-size: 2.625rem; } h2 { font-size: 1.625rem; } h3 { font-size: 1.375rem; } h4 { font-size: 1.125rem; } @media (max-width: 683px) { h1 { font-size: 2rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.15rem; } h4 { font-size: 1.125rem; } } a { color: inherit; } img { display: block; max-width: 100%; } code { font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace; background: #eaeaea; background: var(--light-background-secondary); padding: 1px 6px; margin: 0 2px; border-radius: 5px; font-size: .95rem; } .dark-theme code { background: #3b3d42; background: var(--dark-background-secondary); } pre { background: #1a1a1d; padding: 20px; border-radius: 8px; font-size: 1rem; overflow: auto; } @media (max-width: 683px) { pre { white-space: pre-wrap; word-wrap: break-word } } pre code { background: none !important; color: #ccc; padding: 0; font-size: inherit; } blockquote { border-left: 2px solid; margin: 40px; padding: 10px 20px; } @media (max-width: 683px) { blockquote { margin: 10px; padding: 10px } } blockquote:before { content: '\201D'; font-family: Georgia, serif; font-size: 3.875rem; position: absolute; left: -40px; top: -20px; } blockquote p:first-of-type { margin-top: 0; } blockquote p:last-of-type { margin-bottom: 0; } ul, ol { margin-left: 40px; padding: 0; } @media (max-width: 683px) { ul, ol { margin-left: 20px } } ol ol { list-style-type: lower-alpha; } .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1 auto; flex: 1 auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 50px 0; } @media (max-width: 683px) { .content { margin-top: 0 } } hr { width: 100%; border: none; background: #dcdcdc; background: var(--light-border-color); height: 1px; } .dark-theme hr { background: #4a4b50; background: var(--dark-border-color); } .hidden { display: none; } .post { width: 100%; max-width: 800px; text-align: left; padding: 20px; margin: 20px auto; } @media (max-width: 899px) { .post { max-width: 660px } } .post:not(:last-of-type) { border-bottom: 1px solid #dcdcdc; border-bottom: 1px solid var(--light-border-color); } .dark-theme .post:not(:last-of-type) { border-color: #4a4b50; border-color: var(--dark-border-color); } .post-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; font-size: 1rem; margin-bottom: 10px; } @media (max-width: 683px) { .post-meta { font-size: .85rem } } .post-date { margin-right: 5px; } .post-date:after { content: '\2014'; } .post-title { font-size: 2.625rem; margin: 0; } @media (max-width: 683px) { .post-title { font-size: 2rem } } .post-title a { text-decoration: none; } .post-tags { display: block; margin-bottom: 20px; font-size: 1rem; opacity: .5; } .post-tags a { text-decoration: none; } .post-content { margin-top: 30px; } .post-cover { border-radius: 8px; margin: 40px -50px; width: 860px; max-width: 860px; } @media (max-width: 899px) { .post-cover { margin: 20px 0; width: 100% } } .post--regulation h1 { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .post--regulation h2 { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 10px; } .post--regulation h2+ h2 { margin-top: -10px; margin-bottom: 20px; } .pagination { margin-top: 50px; } .pagination__title { display: -webkit-box; display: -ms-flexbox; display: flex; text-align: center; position: relative; margin: 100px 0 20px; } .pagination__title-h { text-align: center; margin: 0 auto; padding: 5px 10px; background: #fff; background: var(--light-background); color: #999; color: var(--light-color-secondary); font-size: .8rem; text-transform: uppercase; text-decoration: none; letter-spacing: .1em; z-index: 1; } .dark-theme .pagination__title-h { background: #292a2d; background: var(--dark-background); color: #73747b; color: var(--dark-color-secondary); } .pagination__title hr { position: absolute; left: 0; right: 0; width: 100%; margin-top: 15px; z-index: 0; } .pagination__buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; } .pagination__buttons a { text-decoration: none; font-weight: bold; } .footer { padding: 40px 20px; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; color: #999; color: var(--light-color-secondary); } .footer__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 0 auto; width: 760px; max-width: 100%; } @media (max-width: 899px) { .footer__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } } .footer a { color: inherit; } .footer .copyright { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1rem; color: #999; color: var(--light-color-secondary); } .footer .copyright--user { margin: auto; text-align: center; } .footer .copyright > *:first-child:not(:only-child) { border-right: 1px solid; padding-right: 10px; margin-right: 10px; } @media (max-width: 899px) { .footer .copyright > *:first-child:not(:only-child) { border: none; padding: 0; margin: 0 } } @media (max-width: 899px) { .footer .copyright { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 10px } } /* PrismJS 1.15.0 https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+markup-templating+go+handlebars+json+markdown+ocaml+pug+python+jsx+rust+scss */ /** * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML * Based on https://github.com/chriskempson/tomorrow-theme * @author Rose Pritchard */ code[class*="language-"], pre[class*="language-"] { color: #a9a9b3; background: none; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } /* Code blocks */ pre[class*="language-"] { padding: 1em; margin: .5em 0; overflow: auto; } :not(pre) > code[class*="language-"], pre[class*="language-"] { background: #1a1a1d !important; border-radius: 8px; } /* Inline code */ :not(pre) > code[class*="language-"] { padding: .1em; border-radius: .3em; white-space: normal; } .token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata { color: #999; color: var(--light-color-secondary); } .token.punctuation { color: #a9a9b3; } .token.tag, .token.attr-name, .token.namespace, .token.deleted { color: #e2777a; } .token.function-name { color: #6196cc; } .token.boolean, .token.number, .token.function { color: #f08d49; } .token.property, .token.class-name, .token.constant, .token.symbol { color: #f8c555; } .token.selector, .token.important, .token.atrule, .token.keyword, .token.builtin { color: #cc99cd; } .token.string, .token.char, .token.attr-value, .token.regex, .token.variable { color: #7ec699; } .token.operator, .token.entity, .token.url { color: #67cdcc; } .token.important, .token.bold { font-weight: bold; } .token.italic { font-style: italic; } .token.entity { cursor: help; } .token.inserted { color: green; }