645 lines
14 KiB
CSS
Executable File
645 lines
14 KiB
CSS
Executable File
@charset "utf-8";
|
|
|
|
:root {
|
|
--base-root: 1.5rem;
|
|
--base-relative: 1.5em;
|
|
--font-size-copy: 1.15rem;
|
|
--font-size-small: calc(var(--base-relative)/2);
|
|
--font-size-h1: 1.65em;
|
|
--font-size-h2: 1.45em;
|
|
--font-size-h3: var(--font-size-copy);
|
|
|
|
--gray: #595959;
|
|
--black: #000;
|
|
--white: #FFF;
|
|
--link-color: var(--gray);
|
|
--primary-color: var(--gray);
|
|
--secondary-gray: #DDD;
|
|
--light-gray: #EEE;
|
|
--background-gray: #fafafa;
|
|
|
|
--system-fonts: -apple-system, BlinkMacSystemFont,"Segoe UI", "Roboto", Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", "Open Sans", "Noto Sans", "Droid Sans", sans-serif;
|
|
}
|
|
|
|
html {
|
|
box-sizing: border-box;
|
|
scroll-behavior: smooth;
|
|
animation: fade 0.45s;
|
|
}
|
|
|
|
@keyframes fade {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slidein {
|
|
from { transform: translate(0); }
|
|
to { transform: translate(5px); }
|
|
}
|
|
|
|
/* remove scroll for accessibility*/
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
}
|
|
|
|
*, *:before, *:after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
/* fonts */
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("/fonts/Inter-Regular.woff2?v=3.13") format("woff2"),
|
|
url("/fonts/Inter-Regular.woff?v=3.13") format("woff");
|
|
}
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("/fonts/Inter-Italic.woff2?v=3.13") format("woff2"),
|
|
url("/fonts/Inter-Italic.woff?v=3.13") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url("/fonts/Inter-Bold.woff2?v=3.13") format("woff2"),
|
|
url("/fonts/Inter-Bold.woff?v=3.13") format("woff");
|
|
}
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url("/fonts/Inter-BoldItalic.woff2?v=3.13") format("woff2"),
|
|
url("/fonts/Inter-BoldItalic.woff?v=3.13") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
font-display: swap;
|
|
src: url("/fonts/Inter-Black.woff2?v=3.13") format("woff2"),
|
|
url("/fonts/Inter-Black.woff?v=3.13") format("woff");
|
|
}
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: italic;
|
|
font-weight: 900;
|
|
font-display: swap;
|
|
src: url("/fonts/Inter-BlackItalic.woff2?v=3.13") format("woff2"),
|
|
url("/fonts/Inter-BlackItalic.woff?v=3.13") format("woff");
|
|
}
|
|
|
|
body {
|
|
font-family: "Inter", var(--system-fonts);
|
|
font-size: var(--font-size-copy);
|
|
font-kerning: normal;
|
|
letter-spacing:normal;
|
|
font-style: normal;
|
|
line-height: 1.65;
|
|
color: var(--gray);
|
|
fill: var(--gray);
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* typography */
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
line-height: 1.25;
|
|
margin-top: calc(var(--base-relative)*1.5);
|
|
margin-bottom: calc(var(--base-relative)/1.5);
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--font-size-h1);
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--font-size-h2);
|
|
}
|
|
|
|
h3 {
|
|
font-size: var(--font-size-h3);
|
|
}
|
|
/* purgecss start ignore */
|
|
table {
|
|
border-spacing: 0;
|
|
border-collapse: collapse;
|
|
max-width: 46.971em;
|
|
width: 100%
|
|
}
|
|
|
|
table tr {
|
|
background-color: white;
|
|
border-top: 1px solid var(--secondary-gray);
|
|
}
|
|
|
|
table td, table th {
|
|
padding: calc(var(--base-relative)/2);
|
|
border: 1px solid var(--secondary-gray);
|
|
}
|
|
|
|
table tr:nth-child(2n), table th {
|
|
background-color: var(--light-gray);
|
|
}
|
|
/* purgecss end ignore */
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--gray);
|
|
text-decoration: underline;
|
|
transition: background-color 0.2s ease-out, color 0.2s ease-out, fill 0.2s ease-out;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--black);
|
|
fill: var(--black);
|
|
text-decoration-color: var(--gray);
|
|
}
|
|
|
|
.nav-link,
|
|
.logo {
|
|
text-decoration: none;
|
|
}
|
|
|
|
h2 a,
|
|
h1 a,
|
|
h3 a,
|
|
h4 a,
|
|
h5 a,
|
|
h6 a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* page content */
|
|
.site-header {
|
|
font-weight: 700;
|
|
letter-spacing: 1px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: var(--base-root);
|
|
line-height: 1;
|
|
}
|
|
|
|
.logo {
|
|
text-transform: uppercase;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo svg {
|
|
margin-right: .5rem;
|
|
}
|
|
|
|
/** js **/
|
|
.hide {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (min-width: 720px) {
|
|
.hide {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.nav {
|
|
width: 100%;
|
|
border-bottom: 2px dashed var(--secondary-gray);
|
|
}
|
|
|
|
@media screen and (min-width: 720px) {
|
|
.nav {
|
|
width: unset;
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
.hamberger {
|
|
padding: 0;
|
|
margin: 0;
|
|
line-height: 0;
|
|
background-color: white;
|
|
border: none;
|
|
color: var(--gray);
|
|
}
|
|
|
|
@media screen and (min-width: 720px) {
|
|
.hamberger {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.menu-list {
|
|
margin-top: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.menu-item {
|
|
list-style: none;
|
|
}
|
|
|
|
.menu-noscript {
|
|
margin: var(--base-root) 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.menu-noscript-item {
|
|
list-style: none;
|
|
margin-right: calc(var(--base-root)*1.5);
|
|
}
|
|
|
|
.nav-link {
|
|
display: block;
|
|
margin: var(--base-root) 0;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.menu-item:last-child a {
|
|
margin-right: 0;
|
|
}
|
|
|
|
@media screen and (min-width: 720px) {
|
|
.menu-item {
|
|
display: inline-block;
|
|
}
|
|
|
|
.menu-list {
|
|
margin: 0;
|
|
}
|
|
|
|
.nav-link {
|
|
margin:0 calc(var(--base-root)*1.5) 0 0;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
color: #000;
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--gray);
|
|
text-decoration-thickness: .125em;
|
|
}
|
|
|
|
.intro-text {
|
|
margin: calc(var(--base-root)*2.5) auto;
|
|
text-align: center;
|
|
padding: var(--base-root);
|
|
}
|
|
|
|
.divider {
|
|
border: 0;
|
|
overflow: visible;
|
|
border-bottom: 2px dashed var(--secondary-gray);
|
|
margin: calc(var(--base-root)*1.75) var(--base-root);
|
|
}
|
|
|
|
.content,
|
|
.tag-title {
|
|
margin: calc(var(--base-root)*1.75) var(--base-root);
|
|
}
|
|
|
|
/* post navigation */
|
|
.post-nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: var(--base-root);
|
|
margin-bottom: var(--base-root);
|
|
border-top: 2px dashed var(--secondary-gray);
|
|
border-bottom: 2px dashed var(--secondary-gray);
|
|
}
|
|
|
|
|
|
.next {
|
|
margin-left: auto;
|
|
padding: calc(var(--base-root)/3) 0;
|
|
}
|
|
|
|
.prev {
|
|
margin-right: auto;
|
|
padding: calc(var(--base-root)/3) 0;
|
|
}
|
|
|
|
.post h2 {
|
|
margin-top: calc(var(--base-relative)/2);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.list .summary {
|
|
margin: calc(var(--base-relative)/2) 0;
|
|
}
|
|
|
|
.dp img,
|
|
.thumb {
|
|
border-radius: calc(var(--base-root) / 3);
|
|
}
|
|
|
|
.related {
|
|
padding-bottom: calc(var(--base-root)*1.75);
|
|
border-bottom: 2px dashed var(--secondary-gray);
|
|
}
|
|
|
|
|
|
/*single post*/
|
|
.post-header h1 {
|
|
margin-bottom: calc(var(--base-relative)/3);
|
|
}
|
|
|
|
.post-text {
|
|
margin: var(--base-root) 0;
|
|
}
|
|
|
|
article {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.single-page {
|
|
margin-top: calc(var(--base-relative)*2.5);
|
|
}
|
|
|
|
@media screen and (min-width: 720px) {
|
|
.static {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
/* font size */
|
|
|
|
.intro-text,
|
|
.content-max-width {
|
|
max-width: 48rem;
|
|
}
|
|
|
|
/* elements */
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.figure {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.fig-caption {
|
|
text-align: center;
|
|
font-style: italic;
|
|
margin-top: calc(var(--base-relative)/2);
|
|
font-size: calc(var(--base-relative)/2);
|
|
}
|
|
|
|
.prev:hover .arrow,
|
|
.next:hover .arrow,
|
|
.link:hover .arrow {
|
|
animation: .35s ease-out infinite alternate slidein;
|
|
}
|
|
|
|
/* grids */
|
|
.grid-of-three,
|
|
.grid-of-two {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-gap: calc(var(--base-root)*1.75);
|
|
margin-bottom: calc(var(--base-root)*1.75);
|
|
}
|
|
|
|
@media screen and (min-width: 720px) {
|
|
.grid-of-three {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.grid-of-two {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
/* custom css */
|
|
|
|
::selection {
|
|
background-color: var(--secondary-gray);
|
|
}
|
|
|
|
.arrow {
|
|
line-height: 1;
|
|
display: inline-block;
|
|
}
|
|
|
|
.dp {
|
|
text-align: center;
|
|
}
|
|
|
|
.thumb {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.work-post {
|
|
max-width: 400px;
|
|
}
|
|
|
|
.work-post:hover {
|
|
filter: drop-shadow(0 0 0.25rem var(--gray));
|
|
transition: filter 0.3s ease-in;
|
|
}
|
|
|
|
.work-post,
|
|
.post {
|
|
width: 100%;
|
|
}
|
|
|
|
@media screen and (min-width: 720px) {
|
|
.post {
|
|
max-width: 600px;
|
|
}
|
|
}
|
|
|
|
.post-meta {
|
|
display: inline;
|
|
font-size: var(--font-size-small);
|
|
text-transform: capitalize;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
line-height:1;
|
|
}
|
|
|
|
.quote {
|
|
background-color: var(--background-gray);
|
|
margin: calc(var(--base-relative)/1.5) 0;
|
|
padding: calc(var(--base-relative)/2);
|
|
border-left: 3px solid var(--secondary-gray);
|
|
}
|
|
|
|
.raw-para {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.raw-para a:hover {
|
|
box-shadow: none;
|
|
background-color: none;
|
|
}
|
|
|
|
.tag-cloud {
|
|
margin: 0;
|
|
padding: 0;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.tag-list-item {
|
|
display: inline-block;
|
|
margin-bottom: calc(var(--base-root)/2);
|
|
}
|
|
|
|
|
|
.tag-link {
|
|
margin-right: calc(var(--base-root)/3);
|
|
|
|
}
|
|
|
|
.post-text img {
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.post-text .thumb {
|
|
border-bottom: unset;
|
|
padding-bottom: 0;
|
|
font-style: unset;
|
|
}
|
|
|
|
.post-text .thumb img {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.post-text .thumb:hover {
|
|
background-color: unset;
|
|
border-bottom: unset;
|
|
box-shadow: unset;
|
|
}
|
|
|
|
.to-top {
|
|
cursor: pointer;
|
|
margin: calc(var(--base-root)*1.75) auto;
|
|
display: block;
|
|
font-size: calc(var(--base-relative)/1.5);
|
|
border: 0;
|
|
background: none;
|
|
font-weight: 700;
|
|
width: 124px;
|
|
text-align: center;
|
|
}
|
|
|
|
.video {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.commento-root .commento-submit-button {
|
|
background: var(--gray);
|
|
}
|
|
|
|
/* syntax highlight */
|
|
/* Background */ .chroma { background-color: #f0f0f0; padding: var(--base-relative); font-family: monospace; overflow-x:auto; }
|
|
/* Other */ .chroma .x { }
|
|
/* Error */ .chroma .err { }
|
|
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
|
|
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
|
|
/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
|
|
/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
|
/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
|
/* Keyword */ .chroma .k { color: #007020; font-weight: bold }
|
|
/* KeywordConstant */ .chroma .kc { color: #007020; font-weight: bold }
|
|
/* KeywordDeclaration */ .chroma .kd { color: #007020; font-weight: bold }
|
|
/* KeywordNamespace */ .chroma .kn { color: #007020; font-weight: bold }
|
|
/* KeywordPseudo */ .chroma .kp { color: #007020 }
|
|
/* KeywordReserved */ .chroma .kr { color: #007020; font-weight: bold }
|
|
/* KeywordType */ .chroma .kt { color: #902000 }
|
|
/* Name */ .chroma .n { }
|
|
/* NameAttribute */ .chroma .na { color: #4070a0 }
|
|
/* NameBuiltin */ .chroma .nb { color: #007020 }
|
|
/* NameBuiltinPseudo */ .chroma .bp { }
|
|
/* NameClass */ .chroma .nc { color: #0e84b5; font-weight: bold }
|
|
/* NameConstant */ .chroma .no { color: #60add5 }
|
|
/* NameDecorator */ .chroma .nd { color: #555555; font-weight: bold }
|
|
/* NameEntity */ .chroma .ni { color: #d55537; font-weight: bold }
|
|
/* NameException */ .chroma .ne { color: #007020 }
|
|
/* NameFunction */ .chroma .nf { color: #06287e }
|
|
/* NameFunctionMagic */ .chroma .fm { }
|
|
/* NameLabel */ .chroma .nl { color: #002070; font-weight: bold }
|
|
/* NameNamespace */ .chroma .nn { color: #0e84b5; font-weight: bold }
|
|
/* NameOther */ .chroma .nx { }
|
|
/* NameProperty */ .chroma .py { }
|
|
/* NameTag */ .chroma .nt { color: #062873; font-weight: bold }
|
|
/* NameVariable */ .chroma .nv { color: #bb60d5 }
|
|
/* NameVariableClass */ .chroma .vc { }
|
|
/* NameVariableGlobal */ .chroma .vg { }
|
|
/* NameVariableInstance */ .chroma .vi { }
|
|
/* NameVariableMagic */ .chroma .vm { }
|
|
/* Literal */ .chroma .l { }
|
|
/* LiteralDate */ .chroma .ld { }
|
|
/* LiteralString */ .chroma .s { color: #4070a0 }
|
|
/* LiteralStringAffix */ .chroma .sa { color: #4070a0 }
|
|
/* LiteralStringBacktick */ .chroma .sb { color: #4070a0 }
|
|
/* LiteralStringChar */ .chroma .sc { color: #4070a0 }
|
|
/* LiteralStringDelimiter */ .chroma .dl { color: #4070a0 }
|
|
/* LiteralStringDoc */ .chroma .sd { color: #4070a0; font-style: italic }
|
|
/* LiteralStringDouble */ .chroma .s2 { color: #4070a0 }
|
|
/* LiteralStringEscape */ .chroma .se { color: #4070a0; font-weight: bold }
|
|
/* LiteralStringHeredoc */ .chroma .sh { color: #4070a0 }
|
|
/* LiteralStringInterpol */ .chroma .si { color: #70a0d0; font-style: italic }
|
|
/* LiteralStringOther */ .chroma .sx { color: #c65d09 }
|
|
/* LiteralStringRegex */ .chroma .sr { color: #235388 }
|
|
/* LiteralStringSingle */ .chroma .s1 { color: #4070a0 }
|
|
/* LiteralStringSymbol */ .chroma .ss { color: #517918 }
|
|
/* LiteralNumber */ .chroma .m { color: #40a070 }
|
|
/* LiteralNumberBin */ .chroma .mb { color: #40a070 }
|
|
/* LiteralNumberFloat */ .chroma .mf { color: #40a070 }
|
|
/* LiteralNumberHex */ .chroma .mh { color: #40a070 }
|
|
/* LiteralNumberInteger */ .chroma .mi { color: #40a070 }
|
|
/* LiteralNumberIntegerLong */ .chroma .il { color: #40a070 }
|
|
/* LiteralNumberOct */ .chroma .mo { color: #40a070 }
|
|
/* Operator */ .chroma .o { color: #666666 }
|
|
/* OperatorWord */ .chroma .ow { color: #007020; font-weight: bold }
|
|
/* Punctuation */ .chroma .p { }
|
|
/* Comment */ .chroma .c { color: #60a0b0; font-style: italic }
|
|
/* CommentHashbang */ .chroma .ch { color: #60a0b0; font-style: italic }
|
|
/* CommentMultiline */ .chroma .cm { color: #60a0b0; font-style: italic }
|
|
/* CommentSingle */ .chroma .c1 { color: #60a0b0; font-style: italic }
|
|
/* CommentSpecial */ .chroma .cs { color: #60a0b0; background-color: #fff0f0 }
|
|
/* CommentPreproc */ .chroma .cp { color: #007020 }
|
|
/* CommentPreprocFile */ .chroma .cpf { color: #007020 }
|
|
/* Generic */ .chroma .g { }
|
|
/* GenericDeleted */ .chroma .gd { color: #a00000 }
|
|
/* GenericEmph */ .chroma .ge { font-style: italic }
|
|
/* GenericError */ .chroma .gr { color: #ff0000 }
|
|
/* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold }
|
|
/* GenericInserted */ .chroma .gi { color: #00a000 }
|
|
/* GenericOutput */ .chroma .go { color: #888888 }
|
|
/* GenericPrompt */ .chroma .gp { color: #c65d09; font-weight: bold }
|
|
/* GenericStrong */ .chroma .gs { font-weight: bold }
|
|
/* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold }
|
|
/* GenericTraceback */ .chroma .gt { color: #0044dd }
|
|
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
|
|
/* TextWhitespace */ .chroma .w { color: #bbbbbb }
|