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 --- src/style.scss | 301 --------------------------------------------------------- 1 file changed, 301 deletions(-) delete mode 100644 src/style.scss (limited to 'src/style.scss') diff --git a/src/style.scss b/src/style.scss deleted file mode 100644 index 2ad43cb..0000000 --- a/src/style.scss +++ /dev/null @@ -1,301 +0,0 @@ -$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