From c348cc8cc76306c3d3e533888b3d30ea7566e075 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 21 Dec 2020 19:57:20 +0100 Subject: Use Pandoc to write content in Markdown --- assets/glyphs.txt | 1 + assets/iosevka-term-ss09-bold.ttf | Bin 0 -> 1557444 bytes assets/iosevka-term-ss09-regular.ttf | Bin 0 -> 1541132 bytes assets/style.scss | 331 +++++++++++++++++++++++++++++++++++ 4 files changed, 332 insertions(+) create mode 100644 assets/glyphs.txt create mode 100644 assets/iosevka-term-ss09-bold.ttf create mode 100644 assets/iosevka-term-ss09-regular.ttf create mode 100644 assets/style.scss (limited to 'assets') diff --git a/assets/glyphs.txt b/assets/glyphs.txt new file mode 100644 index 0000000..0755cf9 --- /dev/null +++ b/assets/glyphs.txt @@ -0,0 +1 @@ + !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`´abcdefghijklmnopqrstuvwxyz{|}~äöüÄÖÜßẞ↓↙←↖↑↗→↘€»«„“”·…°’‾█▓▒░ ▀▄‐╭╮─│╰╯┌┐└┘├╱╲╳ʻ‘⋀ diff --git a/assets/iosevka-term-ss09-bold.ttf b/assets/iosevka-term-ss09-bold.ttf new file mode 100644 index 0000000..85915cf Binary files /dev/null and b/assets/iosevka-term-ss09-bold.ttf differ diff --git a/assets/iosevka-term-ss09-regular.ttf b/assets/iosevka-term-ss09-regular.ttf new file mode 100644 index 0000000..83ddee6 Binary files /dev/null and b/assets/iosevka-term-ss09-regular.ttf differ diff --git a/assets/style.scss b/assets/style.scss new file mode 100644 index 0000000..6889798 --- /dev/null +++ b/assets/style.scss @@ -0,0 +1,331 @@ +$font-size: 17px; +$heading-font-size: 18px; +$line-height: 1.4; + +$page-item-prefix-max-chars: 3ch; +$page-item-prefix-pad: 2ch; +$page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad; + +$subcontent-indent: 4ch; + +@function px-to-em($s, $b: $font-size) { + @return 1 / ($b / 1px) * ($s / 1px) * 1em; +} + +@function str-repeat($s, $n) { + $r: ""; + @while $n > 0 { + $r: $r + $s; + $n: $n - 1; + } + @return $r; +} + +:root { + --gray1: hsl(270, 0%, 9.7%); + --gray2: hsl(270, 1%, 29%); + --gray3: hsl(270, 2%, 54%); + --gray4: hsl(270, 2%, 73%); + --gray5: hsl(270, 2%, 83%); + --gray6: hsl(270, 2%, 100%); + + --bg: var(--gray1); + --bg-plus: var(--gray2); + --fg-minus: var(--gray3); + --fg: var(--gray4); + --fg-plus: var(--gray6); + + --select-bg: hsla(270, 2%, 100%, 0.996); + --select-fg: var(--gray1); + + --code-fg: var(--fg-minus); + --code-block-fg: var(--fg-minus); + + --page-item-prefix-fg: var(--fg-minus); + + --link-idle-fg: var(--gray6); + --link-visited-fg: var(--gray5); + --link-hover-bg: var(--gray6); + --link-hover-fg: var(--gray1); + + --heading: var(--fg-plus); +} + +::selection { + color: var(--select-fg); + background-color: var(--select-bg); +} + +html, +pre, +code { + font-family: "Iosevka Term SS09"; + font-feature-settings: "calt" 0, "dlig" 1; +} + +html { + font-size: px-to-em($font-size, 16px); + line-height: $line-height; + background-color: var(--bg); + color: var(--fg); +} + +body { + margin: 2em; + padding: 0; + + @media (max-width: 700px) { + margin: 1em; + } +} + +main { + max-width: 80ch; + margin: 0 auto; +} + +.c-page-header { + margin-bottom: $line-height * 2rem; + overflow: hidden; + + &::after { + position: relative; + z-index: -10; + content: str-repeat("░", 120); + display: block; + height: $line-height; + margin-top: px-to-em(2px); + padding-top: px-to-em(2px); + color: var(--fg-minus); + border-top: 1px solid var(--fg-minus); + } + + &--sm { + display: none; + } + + @media (max-width: 700px) { + display: none; + + &--sm, + &--nohide { + display: block; + } + } +} + +code { + color: var(--code-fg); +} + +pre { + margin: 0; + color: var(--code-block-fg); + + strong { + font-weight: normal; + } +} + +strong { + color: var(--fg-plus); + font-weight: bold; +} + +ul, +ol { + margin: ($line-height * 1rem) 0 0; + padding: 0; + list-style: none; + + > li { + position: relative; + padding-left: $subcontent-indent; + + &::before { + position: absolute; + display: inline-block; + width: $subcontent-indent; + margin-left: -1 * $subcontent-indent; + color: var(--fg-minus); + } + } +} + +ul { + > li::before { + content: "-"; + } + + &.refs > li { + padding-left: 0; + + &::before { + display: none; + } + } +} + +ol { + counter-reset: cnt; + + > li { + counter-increment: cnt; + + &::before { + content: counter(cnt) "."; + } + } +} + +h1, +h2, +h3 { + margin: ($line-height * 2rem) 0 0; + + + h1, + + h2, + + h3 { + margin-top: $line-height * 1rem; + } +} + +h1 { + text-transform: uppercase; + font-size: px-to-em($heading-font-size); + color: var(--heading); +} + +h2 { + font-size: 1em; + color: var(--heading); +} + +h3 { + font-size: 1em; +} + +p { + margin: ($line-height * 1em) 0 0; +} + +a { + position: relative; + z-index: 1000; + padding: 0.1em 0.3em; + margin: 0 -0.3em; + color: var(--link-idle-fg); + + &:visited { + color: var(--link-visited-fg); + } + + &:hover { + background-color: var(--link-hover-bg); + color: var(--link-hover-fg); + text-decoration: none; + } +} + +hr { + height: 1px; + margin: ($line-height * 2rem) 0 ($line-height * 2rem); + background-color: var(--bg-plus); + border: 0; + + @media (max-width: 700px) { + margin-left: 0; + } +} + +blockquote { + position: relative; + margin: ($line-height * 1rem) 0 0; + padding-left: calc(#{$subcontent-indent} - 2px); + border-left: 2px solid var(--bg-plus); +} + +.s-page { + padding-left: $page-item-prefix-width; + + h1, + h2, + h3, + ul.refs > li, + pre { + position: relative; + margin-left: -1 * $page-item-prefix-width; + padding-left: $page-item-prefix-width; + + &::before { + position: absolute; + box-sizing: border-box; + display: inline-block; + font-size: 1rem; + margin-left: -1 * $page-item-prefix-width; + padding-right: $page-item-prefix-pad; + width: $page-item-prefix-width; + color: var(--page-item-prefix-fg); + font-weight: normal; + text-align: right; + } + + @media (max-width: 700px) { + margin-left: 0; + padding-left: 0; + + &::before { + display: none; + } + } + } + + h1::before { + content: "#"; + } + + h2::before { + content: "##"; + } + + h3::before { + content: "###"; + } + + ul.refs > li::before { + content: "|>"; + } + + pre::before { + content: str-repeat("``\A", 40); + height: 100%; + color: var(--page-item-prefix-fg); + overflow: hidden; + } + + hr { + margin-left: -1 * $page-item-prefix-width; + } + + .c-page-header { + margin-left: -1 * $page-item-prefix-width; + padding-left: $page-item-prefix-width; + + &::after { + margin-left: -1 * $page-item-prefix-width; + } + + @media (max-width: 700px) { + margin-left: 0; + padding-left: 0; + + &::after { + margin-left: 0; + } + } + } + + @media (max-width: 700px) { + padding-left: 0; + } +} -- cgit v1.2.3-70-g09d2