From 714d8f7ff8425e4177ff6bde4d214ef75be6b1ab Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 24 Dec 2020 15:05:32 +0100 Subject: Added header, improved SCSS structure, use metadata file instead of param, improved folder structure --- assets/style.scss | 352 ------------------------------------------------------ 1 file changed, 352 deletions(-) delete mode 100644 assets/style.scss (limited to 'assets/style.scss') diff --git a/assets/style.scss b/assets/style.scss deleted file mode 100644 index 40b18f5..0000000 --- a/assets/style.scss +++ /dev/null @@ -1,352 +0,0 @@ -$font-size: 18px; -$heading-font-size: $font-size + 1; -$code-block-font-size: $font-size - 1; -$line-height: 1.5; - -$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; - -$breakpoint-sm: 700px; - -@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; -} - -@font-face { - font-family: "Iosevka Term SS09"; - font-style: normal; - font-weight: normal; - src: url("/iosevka-term-ss09-regular.woff2") format("woff2"); -} - -@font-face { - font-family: "Iosevka Term SS09"; - font-style: normal; - font-weight: bold; - src: url("/iosevka-term-ss09-bold.woff2") format("woff2"); -} - -: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); //#90acf2; //var(--gray6); - --link-visited-fg: var(--gray5); //#bc9df2; //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", "Lucida Console", "Courier New", Courier, - monospace; - 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: $breakpoint-sm) { - margin: 1em; - } -} - -main { - max-width: 70ch; - margin: 0 auto; -} - -code { - color: var(--code-fg); -} - -pre { - margin: 0; - color: var(--code-block-fg); - font-size: $code-block-font-size; - line-height: 1.4; - - 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: $breakpoint-sm) { - 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); -} - -.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: $breakpoint-sm) { - display: none; - - &--sm, - &--nohide { - display: block; - } - } -} - -.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; - 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-size: 1rem; - font-weight: normal; - text-align: right; - } - - @media (max-width: $breakpoint-sm) { - 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; - line-height: 1.4 * ($code-block-font-size / $font-size) - } - - 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: $breakpoint-sm) { - margin-left: 0; - padding-left: 0; - - &::after { - margin-left: 0; - } - } - } - - @media (max-width: $breakpoint-sm) { - padding-left: 0; - } -} -- cgit v1.2.3-54-g00ecf