From 0318b61277835bd3878e29c9b69c24ac66f43a86 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 19 Dec 2020 22:28:06 +0100 Subject: Init --- src/glyphs.txt | 1 + src/iosevka-term-ss09-bold.ttf | Bin 0 -> 1557444 bytes src/iosevka-term-ss09-regular.ttf | Bin 0 -> 1541132 bytes src/style.scss | 301 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 302 insertions(+) create mode 100644 src/glyphs.txt create mode 100644 src/iosevka-term-ss09-bold.ttf create mode 100644 src/iosevka-term-ss09-regular.ttf create mode 100644 src/style.scss (limited to 'src') diff --git a/src/glyphs.txt b/src/glyphs.txt new file mode 100644 index 0000000..ac0461a --- /dev/null +++ b/src/glyphs.txt @@ -0,0 +1 @@ + !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`´abcdefghijklmnopqrstuvwxyz{|}~äöüÄÖÜßẞ↓↙←↖↑↗→↘€»«„“”·…°’‾█▓▒░ ▀▄‐╭╮─│╰╯┌┐└┘├╱╲╳ʻ‘ diff --git a/src/iosevka-term-ss09-bold.ttf b/src/iosevka-term-ss09-bold.ttf new file mode 100644 index 0000000..85915cf Binary files /dev/null and b/src/iosevka-term-ss09-bold.ttf differ diff --git a/src/iosevka-term-ss09-regular.ttf b/src/iosevka-term-ss09-regular.ttf new file mode 100644 index 0000000..83ddee6 Binary files /dev/null and b/src/iosevka-term-ss09-regular.ttf differ diff --git a/src/style.scss b/src/style.scss new file mode 100644 index 0000000..2ad43cb --- /dev/null +++ b/src/style.scss @@ -0,0 +1,301 @@ +$font-size: 17px; +$heading-font-size: 18px; +$line-height: 1.4; + +$page-item-indent-max-chars: 3ch; +$page-item-indent-pad: 2ch; +$page-item-indent: $page-item-indent-max-chars + $page-item-indent-pad; + +$page-subitem-indent: 4ch; + +:root { + --gray1: hsl(270, 0%, 9.7%); // bg + --gray2: hsl(270, 1%, 29%); // bg-plus + --gray3: hsl(270, 2%, 54%); // text-minus + --gray4: hsl(270, 2%, 73%); // text + --gray5: hsl(270, 2%, 100%); // text-plus + + --select-bg: hsla(270, 2%, 100%, 0.996); + --select-fg: var(--gray1); + + --page-item-prefix: var(--gray3); + + --link-idle: var(--gray5); + --link-hover-bg: var(--gray5); + --link-hover-fg: var(--gray1); + + --heading: var(--gray5); +} + +@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; +} + +@mixin item($prefix: "") { + position: relative; + + &::before { + position: absolute; + content: $prefix; + box-sizing: border-box; + display: inline-block; + font-size: 1rem; + margin-left: -1 * $page-item-indent; + padding-right: $page-item-indent-pad; + width: $page-item-indent; + color: var(--page-item-prefix); + font-weight: normal; + text-align: right; + } + + @media (max-width: 700px) { + &::before { + display: none; + } + } +} + +@keyframes flicker { + 0% { + opacity: 0; + } + 25% { + opacity: 1; + } + 50% { + opacity: 0; + } +} + +::selection { + color: var(--select-fg); + background-color: var(--select-bg); +} + +html { + font-family: "Iosevka Term SS09"; + font-feature-settings: "calt" 0, "PURS" 1; + font-size: px-to-em($font-size, 16px); + line-height: $line-height; + background-color: var(--gray1); + color: var(--gray4); +} + +body { + margin: 2em 2em 2em 1em; + padding: 0; + + @media (max-width: 700px) { + margin: 1em; + } +} + +main { + max-width: 80ch; + margin: 0 auto; + padding-left: $page-item-indent; + + @media (max-width: 700px) { + padding-left: 0; + } +} + +header { + margin-left: -1 * $page-item-indent; + margin-bottom: $line-height * 2rem; + padding-left: $page-item-indent; + overflow: hidden; + + &::after { + position: relative; + z-index: -10; + content: str-repeat("░", 120); + display: block; + height: $line-height; + margin-top: px-to-em(2px); + margin-left: -1 * $page-item-indent; + padding-top: px-to-em(2px); + color: var(--gray3); + border-top: 1px solid var(--gray3); + } + + @media (max-width: 700px) { + padding-left: 0; + + &, + &::after { + margin-left: 0; + } + } +} + +pre, +code { + font-family: "Iosevka Term SS09"; + //font-feature-settings: "calt" 0, "PURS" 0; +} + +pre { + @include item; + + margin: 0; + color: var(--gray3); + + &::before { + content: str-repeat("``\A", 40); + height: 100%; + color: var(--page-item-prefix); + overflow: hidden; + } + + strong { + font-weight: normal; + } +} + +strong { + color: var(--gray5); + font-weight: bold; +} + +ul, +ol { + margin: ($line-height * 1rem) 0 0; + padding: 0; + list-style: none; + + > li { + &::before { + display: inline-block; + color: var(--page-item-prefix); + text-align: right; + } + } +} + +ul { + > li::before { + content: "-"; + padding-right: $page-subitem-indent - 1; + } + + &.refs { + > li { + @include item("|>"); + } + } +} + +ol { + counter-reset: cnt; + + > li { + counter-increment: cnt; + + &::before { + content: counter(cnt) "."; + padding-right: $page-subitem-indent - 2; + } + } +} + +h1, +h2, +h3 { + @include item; + + 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); + + &::before { + content: "#"; + } +} + +h2 { + font-size: 1em; + color: var(--heading); + + &::before { + content: "##"; + } +} + +h3 { + font-size: 1em; + + &::before { + content: "###"; + } +} + +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); + + &:hover { + background-color: var(--link-hover-bg); + color: var(--link-hover-fg); + text-decoration: none; + animation-duration: 0.07s; + animation-name: flicker; + animation-timing-function: step-start; + animation-iteration-count: 3; + } +} + +hr { + height: 1px; + margin: ($line-height * 2rem) 0; + margin-left: -1 * $page-item-indent; + background-color: var(--gray2); + border: 0; + + @media (max-width: 700px) { + margin-left: 0; + } +} + +blockquote { + position: relative; + margin: ($line-height * 1rem) 0 0; + padding-left: calc(#{$page-subitem-indent} - 2px); + border-left: 2px solid var(--gray2); + + /*&::before { + content: str-repeat(">\A", 50); + position: absolute; + height: 100%; + margin-left: -1 * $page-subitem-indent; + color: var(--page-item-prefix); + overflow: hidden; + white-space: pre; + }*/ +} -- cgit v1.2.3-70-g09d2