From 586d92f5a2b0af8d66c9eac11945f900d65c9816 Mon Sep 17 00:00:00 2001 From: Oscar Date: Sun, 17 Nov 2019 22:29:54 +0100 Subject: [PATCH] styles: import prism, add grid variant --- _site/css/base.css | 2 +- _site/scss/base.scss | 40 ++++++++++++++++++++++++++++++++++++++-- 2 files changed, 39 insertions(+), 3 deletions(-) diff --git a/_site/css/base.css b/_site/css/base.css index d8e801bb..c1b3ad2b 100644 --- a/_site/css/base.css +++ b/_site/css/base.css @@ -1 +1 @@ -@import url("https://use.typekit.net/qlo3dpu.css");:root{--auto-grid-min-size: 17rem}body{border-top:1rem solid red;font-family:monotype-grotesque,"Lucida Sans",sans-serif;font-size:20px;padding:2rem;margin:0}h1{font-family:monotype-grotesque-extended,Arial Black,sans-serif;font-weight:700}p{margin:0.75rem 0;font-size:1.25rem;line-height:1.25}a{text-decoration:none;color:black;border-bottom:darkgrey solid 0.1em;font-family:monotype-grotesque-extended,Arial Black,sans-serif;margin:1rem 0}a:hover{border-bottom:red solid 0.1rem}.subtitle{font-family:monotype-grotesque-extended,Arial Black,sans-serif;font-weight:400;letter-spacing:0.1;grid-column:span 2}.summary{grid-column:span 2}.small{font-size:0.75em}.title__thicc{font-size:8vh;line-height:0.75;padding:0;margin:0.5rem 0rem;grid-column:span 2}.help{margin:1rem 0}.help li{margin:0.75rem 0}.grid{display:grid;grid-template-columns:repeat(4, [col] 1fr [col]);grid-template-rows:fit-content, fit-content, auto;grid-row-gap:10rem;grid-column-gap:4rem}.auto-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));grid-gap:1rem}.box{background:black;color:white;padding:1rem;margin:1rem 0.5rem;height:auto}.box a{color:white}.sub-headline{font-weight:bold;font-size:1.25rem}.list ol{padding:0 0 0 1em;margin:0}.list li{list-style:none;padding-bottom:0.5em}.list li.subterm{padding-left:10px}.list li:last-child{padding:0}.list li.subterm:before{content:'\21B3 ';padding-right:5px}.style__italics{font-style:italic}.word{--word-signal-color: currentColor}.word__title{font-family:orpheuspro,Palatino,Times,serif;font-weight:900;font-size:2.5rem;line-height:1.25;margin-bottom:1rem;margin-top:0}.word__content{align-items:stretch}@supports (display: grid){.word__content{display:grid;grid-template-columns:1fr 4fr;grid-gap:1rem}.word__content>*{margin:0}}.word__content>p{grid-column:1 / -1;font-family:monotype-grotesque,"Lucida Sans",sans-serif;font-size:1.5rem}.word__content h4{grid-column:1;font-family:monotype-grotesque-condensed,Arial Narrow,sans-serif;font-size:0.85rem;font-weight:normal;flex:0 1 auto;text-transform:uppercase;transform:translateY(0.4em)}@supports (display: grid){.word__content h4{text-align:right}}.word__content h4,.word__content h4+*{margin-top:1rem}.word__content h4 ~ p,.word__content h4 ~ ul{grid-column:2;font-size:inherit}.word__speech{font-size:0.5em;font-family:monotype-grotesque,"Lucida Sans",sans-serif}.word__signal{border-top:1px solid var(--word-signal-color);color:var(--word-signal-color);display:inline-block;font-family:monotype-grotesque-extended,Arial Black,sans-serif;text-transform:uppercase;font-size:0.75rem;letter-spacing:0.15rem;padding:0.5rem 0.75rem}.word__signal--avoid{--word-signal-color: red}.word__signal--avoid:before{content:'🚨';margin-left:-2.15rem}.word__signal--better{--word-signal-color: green}.word__signal--better:before{content:'👍';margin-left:-2.15rem}.word__signal--tool:before{content:'🧰';margin-left:-2.15rem}.block__dictionary{max-width:50rem;margin-left:auto;margin-right:auto;padding:0 1rem}.block__word{grid-column:span 2;display:flex;flex-direction:column;margin:1rem}.block__type{display:grid;grid-template-columns:1fr 4fr;align-items:flex-start}.word__type{text-align:right;padding-right:1rem;font-family:monotype-grotesque-condensed,Arial Narrow,sans-serif;font-size:0.85rem;text-transform:uppercase}.word__link{text-decoration:none;color:black;border-bottom:darkgrey solid 0.1em;font-family:monotype-grotesque-extended,Arial Black,sans-serif}.word__breakdown{font-family:monotype-grotesque,"Lucida Sans",sans-serif;border-left:0.1rem solid lightgrey;padding-left:1rem}.flag__red{background-color:pink;font-size:0.9rem;font-weight:bold;border-radius:1rem;padding:0.45rem 0.65rem;margin:0.25rem 0.75rem;text-transform:lowercase}.flag__red:before{content:'🚨';margin-right:0.35rem}.list-semicolon{margin:0;padding:0;list-style:none}.list-semicolon>li{display:inline}.list-semicolon>li:not(:last-child)::after{content:'; '} +@import url("https://use.typekit.net/qlo3dpu.css");code[class*="language-"],pre[class*="language-"]{color:#f8f8f2;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;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]{padding:1em;margin:0.5em 0;overflow:auto;border-radius:0.3em}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#2b2b2b}:not(pre)>code[class*="language-"]{padding:0.1em;border-radius:0.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#d4d0ab}.token.punctuation{color:#fefefe}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#ffa07a}.token.boolean,.token.number{color:#00e0e0}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#abe338}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#00e0e0}.token.atrule,.token.attr-value,.token.function{color:#ffd700}.token.keyword{color:#00e0e0}.token.regex,.token.important{color:#ffd700}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}@media screen and (-ms-high-contrast: active){code[class*="language-"],pre[class*="language-"]{color:windowText;background:window}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:window}.token.important{background:highlight;color:window;font-weight:normal}.token.atrule,.token.attr-value,.token.function,.token.keyword,.token.operator,.token.selector{font-weight:bold}.token.attr-value,.token.comment,.token.doctype,.token.function,.token.keyword,.token.operator,.token.property,.token.string{color:highlight}.token.attr-value,.token.url{font-weight:normal}}pre[class*='language-']{font-size:1.1rem}:root{--auto-grid-min-size: 17rem}body{border-top:1rem solid red;font-family:monotype-grotesque,"Lucida Sans",sans-serif;font-size:20px;padding:2rem;margin:0}h1{font-family:monotype-grotesque-extended,Arial Black,sans-serif;font-weight:700}h1,h2,h3,h4{margin-top:1em;margin-bottom:0.5em}p{margin:0.75rem 0;font-size:1.25rem;line-height:1.25}a{text-decoration:none;color:black;border-bottom:darkgrey solid 0.1em;font-family:monotype-grotesque-extended,Arial Black,sans-serif;margin:1rem 0}a:hover{border-bottom:red solid 0.1rem}.subtitle{font-family:monotype-grotesque-extended,Arial Black,sans-serif;font-weight:400;letter-spacing:0.1;grid-column:span 2}ul[class]{list-style:none;margin:0;padding:0}.summary{grid-column:span 2}.small{font-size:0.75em}.title__thicc{font-size:8vh;line-height:0.75;padding:0;margin:0.5rem 0rem;grid-column:span 2}.help{margin:1rem 0}.help li{margin:0.75rem 0}th{text-align:left}.grid{display:grid;grid-template-columns:repeat(4, [col] 1fr [col]);grid-template-rows:fit-content, fit-content, auto;grid-row-gap:10rem;grid-column-gap:4rem}.auto-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));grid-gap:1rem}.small-left-grid{display:grid;grid-gap:1rem}@media (min-width: 800px){.small-left-grid{grid-template-columns:10rem 1fr}}.box{background:black;color:white;padding:1rem;margin:1rem 0.5rem;height:auto}.box a{color:white}.sub-headline{font-weight:bold;font-size:1.25rem}.list ol{padding:0 0 0 1em;margin:0}.list li{list-style:none;padding-bottom:0.5em}.list li.subterm{padding-left:10px}.list li:last-child{padding-bottom:0}.list li.subterm:before{content:'\21B3';padding-right:5px}.style__italics{font-style:italic}.word{--word-signal-color: currentColor}.word__title{font-family:orpheuspro,Palatino,Times,serif;font-weight:900;font-size:2.5rem;line-height:1.25;margin-bottom:1rem;margin-top:0}.word__content{align-items:stretch}@supports (display: grid){.word__content{display:grid;grid-template-columns:1fr 4fr;grid-gap:1rem}.word__content>*{margin:0}}.word__content>p{grid-column:1 / -1;font-family:monotype-grotesque,"Lucida Sans",sans-serif;font-size:1.5rem}.word__content h4{grid-column:1;font-family:monotype-grotesque-condensed,Arial Narrow,sans-serif;font-size:0.85rem;font-weight:normal;flex:0 1 auto;text-transform:uppercase;transform:translateY(0.4em)}@supports (display: grid){.word__content h4{text-align:right}}.word__content h4,.word__content h4+*{margin-top:1rem}.word__content h4 ~ p,.word__content h4 ~ ul{grid-column:2;font-size:inherit}.word__speech{font-size:0.5em;font-family:monotype-grotesque,"Lucida Sans",sans-serif}.word__signal{border-top:1px solid var(--word-signal-color);color:var(--word-signal-color);display:inline-block;font-family:monotype-grotesque-extended,Arial Black,sans-serif;text-transform:uppercase;font-size:0.75rem;letter-spacing:0.15rem;padding:0.5rem 0.75rem}.word__signal--avoid{--word-signal-color: red}.word__signal--avoid:before{content:'🚨';margin-left:-2.15rem}.word__signal--better{--word-signal-color: green}.word__signal--better:before{content:'👍';margin-left:-2.15rem}.word__signal--tool:before{content:'🧰';margin-left:-2.15rem}.block__dictionary{max-width:50rem;margin-left:auto;margin-right:auto;padding:0 1rem}.block__word{grid-column:span 2;display:flex;flex-direction:column;margin:1rem}.block__type{display:grid;grid-template-columns:1fr 4fr;align-items:flex-start}.word__type{text-align:right;padding-right:1rem;font-family:monotype-grotesque-condensed,Arial Narrow,sans-serif;font-size:0.85rem;text-transform:uppercase}.word__link{text-decoration:none;color:black;border-bottom:darkgrey solid 0.1em;font-family:monotype-grotesque-extended,Arial Black,sans-serif}.word__breakdown{font-family:monotype-grotesque,"Lucida Sans",sans-serif;border-left:0.1rem solid lightgrey;padding-left:1rem}.flag__red{background-color:pink;font-size:0.9rem;font-weight:bold;border-radius:1rem;padding:0.45rem 0.65rem;margin:0.25rem 0.75rem;text-transform:lowercase}.flag__red:before{content:'🚨';margin-right:0.35rem}.list-semicolon{margin:0;padding:0;list-style:none}.list-semicolon>li{display:inline}.list-semicolon>li:not(:last-child)::after{content:'; '}.site-footer{margin-top:3rem} diff --git a/_site/scss/base.scss b/_site/scss/base.scss index 66966868..bad59619 100644 --- a/_site/scss/base.scss +++ b/_site/scss/base.scss @@ -1,6 +1,12 @@ @charset 'utf-8'; @import url('https://use.typekit.net/qlo3dpu.css'); +@import 'prism-themes/themes/prism-a11y-dark'; + +pre[class*='language-'] { + font-size: 1.1rem; +} + // COLORS // :root { @@ -66,6 +72,14 @@ h1 { font-weight: $bold; } +h1, +h2, +h3, +h4 { + margin-top: 1em; + margin-bottom: 0.5em; +} + p { margin: 0.75rem 0; font-size: 1.25rem; @@ -91,6 +105,12 @@ a { grid-column: span 2; } +ul[class] { + list-style: none; + margin: 0; + padding: 0; +} + .summary { grid-column: span 2; } @@ -116,6 +136,9 @@ a { } } +th { + text-align: left; +} // GRID // .grid { @@ -135,6 +158,15 @@ a { grid-gap: 1rem; } +.small-left-grid { + display: grid; + grid-gap: 1rem; + + @media (min-width: 800px) { + grid-template-columns: 10rem 1fr; + } +} + .box { background: black; color: white; @@ -167,11 +199,11 @@ a { } &:last-child { - padding: 0; + padding-bottom: 0; } &.subterm:before { - content: '\21B3 '; + content: '\21B3'; padding-right: 5px; } } @@ -352,3 +384,7 @@ a { } } } + +.site-footer { + margin-top: 3rem; +}