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/css/_basics.scss | 172 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 172 insertions(+) create mode 100644 assets/css/_basics.scss (limited to 'assets/css/_basics.scss') diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss new file mode 100644 index 0000000..3adf64c --- /dev/null +++ b/assets/css/_basics.scss @@ -0,0 +1,172 @@ +@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"); +} + +::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: $code-block-line-height; + + 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: "-"; +} + +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; + hyphens: auto; +} + +:link, +:visited { + position: relative; + z-index: 1000; + padding: 0.1em 0.3em; + margin: 0 -0.3em; + color: var(--link-idle-fg); + + &:hover { + background-color: var(--link-hover-bg); + color: var(--link-hover-fg); + text-decoration: none; + } +} + +:visited { + color: var(--link-visited-fg); +} + +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); +} -- cgit v1.2.3-54-g00ecf