From afaa48b03c8d9dcbc7bbce47b94ec6bdd2da3502 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 26 Dec 2020 23:37:48 +0100 Subject: Improved CSS variable names, improved script variable names, added initial support for finding child pages --- assets/css/_basics.scss | 32 ++++++++--------- assets/css/_vars.scss | 64 ++++++++++++++++----------------- assets/css/components/_nav.scss | 20 +++++------ assets/css/components/_page-header.scss | 2 +- assets/css/layouts/_container.scss | 14 ++++---- assets/css/scopes/_page.scss | 29 ++++++++------- 6 files changed, 80 insertions(+), 81 deletions(-) (limited to 'assets/css') diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index da971d4..9505cdd 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -13,8 +13,8 @@ } ::selection { - color: var(--select-fg); - background-color: var(--select-bg); + color: var(--select--fg); + background-color: var(--select--bg); } html, @@ -38,14 +38,14 @@ body { } code { - color: var(--code-fg); + color: var(--code--fg); } pre { margin: 0; - color: var(--code-block-fg); - font-size: $code-block-font-size; - line-height: $code-block-line-height; + color: var(--code-block--fg); + font-size: $code-block--font-size; + line-height: $code-block--line-height; text-overflow: ""; overflow: hidden; @@ -68,13 +68,13 @@ ol { li { position: relative; - padding-left: $subcontent-indent; + padding-left: $subcontent--indent; &::before { position: absolute; display: inline-block; - width: $subcontent-indent; - margin-left: -1 * $subcontent-indent; + width: $subcontent--indent; + margin-left: -1 * $subcontent--indent; color: var(--fg-minus); } } @@ -110,12 +110,12 @@ h3 { h1 { text-transform: uppercase; font-size: 1em; - color: var(--heading-fg); + color: var(--heading--fg); } h2 { font-size: 1em; - color: var(--heading-fg); + color: var(--heading--fg); } h3 { @@ -133,17 +133,17 @@ p { z-index: 1000; padding: 0.2em 0.3em; margin: 0 -0.3em; - color: var(--link-idle-fg); + color: var(--link--idle--fg); &:hover { - background-color: var(--link-hover-bg); - color: var(--link-hover-fg); + background-color: var(--link--hover--bg); + color: var(--link--hover--fg); text-decoration: none; } } :visited { - color: var(--link-visited-fg); + color: var(--link--visited--fg); } hr { @@ -156,6 +156,6 @@ hr { blockquote { position: relative; margin: ($line-height * 1em) 0 0; - padding-left: calc(#{$subcontent-indent} - 2px); + padding-left: calc(#{$subcontent--indent} - 2px); border-left: 2px solid var(--bg-plus); } diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index c061f4f..96e56c6 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -1,27 +1,27 @@ $font-size: 17px; -$nav-font-size: $font-size - 1; -$code-block-font-size: $font-size - 1; -$content-h1-font-size: $font-size + 1; - $line-height: 1.5; -$code-block-line-height: 1.4; -$content-width: 80ch; +$code-block--font-size: $font-size - 1; +$code-block--line-height: 1.4; + +$content--width: 80ch; +$content--h1--font-size: $font-size + 1; -$container-pad-h: 2rem; -$container-pad-h-sm: 1rem; -$container-pad-v: $line-height * 2rem; +$subcontent--indent: 4ch; -$nav-item-spacing: 4ch; -$nav-item-spacing-sm: 3ch; -$nav-item-pad-h: 1ch; -$nav-item-pad-v: 1em; +$container--pad-h: 2rem; +$container--pad-h-sm: 1rem; +$container--pad-v: $line-height * 2rem; -$page-item-prefix-max-chars: 3ch; -$page-item-prefix-pad: 2ch; -$page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad; +$nav--font-size: $font-size - 1; +$nav--item--spacing: 4ch; +$nav--item--spacing-sm: 3ch; +$nav--item--pad-h: 1ch; +$nav--item--pad-v: 1em; -$subcontent-indent: 4ch; +$page--item-prefix--max-chars: 3ch; +$page--item-prefix--pad: 2ch; +$page--item-prefix--width: $page--item-prefix--max-chars + $page--item-prefix--pad; $breakpoints: ( xs: 380px, @@ -45,24 +45,24 @@ $breakpoints: ( --fg-plus: var(--gray5); --fg-plus-2: var(--gray6); - --heading-fg: var(--fg-plus-2); + --heading--fg: var(--fg-plus-2); - --select-bg: hsla(270, 2%, 100%, 0.996); - --select-fg: var(--bg-minus); + --select--bg: hsla(270, 2%, 100%, 0.996); + --select--fg: var(--bg-minus); - --code-fg: var(--fg-minus); - --code-block-fg: var(--fg-minus); + --code--fg: var(--fg-minus); + --code-block--fg: var(--fg-minus); - --page-item-prefix-fg: var(--fg-minus); + --page--item-prefix--fg: var(--fg-minus); - --link-idle-fg: var(--fg-plus-2); //#90acf2; - --link-visited-fg: var(--fg-plus); //#bc9df2; - --link-hover-bg: var(--fg-plus-2); - --link-hover-fg: var(--bg-minus); + --link--idle--fg: var(--fg-plus-2); //#90acf2; + --link--visited--fg: var(--fg-plus); //#bc9df2; + --link--hover--bg: var(--fg-plus-2); + --link--hover--fg: var(--bg-minus); - --nav-bg: var(--bg-minus); - --nav-logo-fg: var(--fg-minus); - --nav-item-idle-fg: var(--fg); - --nav-item-hover-fg: var(--fg-plus-2); - --nav-item-active-fg: var(--fg-plus-2); + --nav--bg: var(--bg-minus); + --nav--logo--fg: var(--fg-minus); + --nav--item--idle--fg: var(--fg); + --nav--item--hover--fg: var(--fg-plus-2); + --nav--item--active--fg: var(--fg-plus-2); } diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index 7f5eb19..a3f7004 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss @@ -1,6 +1,6 @@ .c-nav { - background-color: var(--nav-bg); - font-size: $nav-font-size; + background-color: var(--nav--bg); + font-size: $nav--font-size; &__items { display: flex; @@ -10,15 +10,15 @@ &__logo { display: inline-block; margin: 0; - padding: $nav-item-pad-v 0; - color: var(--nav-logo-fg); + padding: $nav--item--pad-v 0; + color: var(--nav--logo--fg); text-decoration: none; &:link, &:visited { &:hover { background-color: transparent; - color: var(--nav-item-hover-fg); + color: var(--nav--item--hover--fg); font-weight: bold; } } @@ -26,22 +26,22 @@ &__item { display: inline-block; - padding: $nav-item-pad-v $nav-item-pad-h calc(#{$nav-item-pad-v} - 2px); - margin: 0 (-1 * $nav-item-pad-h) 0 ($nav-item-spacing - $nav-item-pad-h); - color: var(--nav-item-idle-fg); + padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px); + margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h); + color: var(--nav--item--idle--fg); text-decoration: none; border-bottom: 2px solid transparent; &:hover { background-color: transparent; - color: var(--nav-item-hover-fg); + color: var(--nav--item--hover--fg); font-weight: bold; } } @media (max-width: map-get($breakpoints, "sm")) { &__item { - margin-left: $nav-item-spacing-sm - $nav-item-pad-h; + margin-left: $nav--item--spacing-sm - $nav--item--pad-h; } } diff --git a/assets/css/components/_page-header.scss b/assets/css/components/_page-header.scss index ada20ab..dd273df 100644 --- a/assets/css/components/_page-header.scss +++ b/assets/css/components/_page-header.scss @@ -12,6 +12,6 @@ padding-top: px-to-em(2px); color: var(--fg-minus); border-top: 1px solid var(--fg-minus); - line-height: $code-block-line-height; + line-height: $code-block--line-height; } } diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss index 7f6e292..eb71070 100644 --- a/assets/css/layouts/_container.scss +++ b/assets/css/layouts/_container.scss @@ -1,20 +1,20 @@ .l-container { - padding-left: $container-pad-h; - padding-right: $container-pad-h; + padding-left: $container--pad-h; + padding-right: $container--pad-h; &--content { margin-left: auto; margin-right: auto; - max-width: $content-width; + max-width: $content--width; } &--pad-v { - padding-top: $container-pad-v; - padding-bottom: $container-pad-v; + padding-top: $container--pad-v; + padding-bottom: $container--pad-v; } @media (max-width: map-get($breakpoints, "sm")) { - padding-left: $container-pad-h-sm; - padding-right: $container-pad-h-sm; + padding-left: $container--pad-h-sm; + padding-right: $container--pad-h-sm; } } diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss index cdbdeb4..7c9e2d4 100644 --- a/assets/css/scopes/_page.scss +++ b/assets/css/scopes/_page.scss @@ -1,6 +1,6 @@ .s-page { &__content { - padding-left: $page-item-prefix-width; + padding-left: $page--item-prefix--width; > :first-child { margin-top: 0; @@ -13,28 +13,28 @@ .c-refs__item, pre { position: relative; - margin-left: -1 * $page-item-prefix-width; - padding-left: $page-item-prefix-width; + 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); + 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; } } h1 { - font-size: px-to-em($content-h1-font-size); + font-size: px-to-em($content--h1--font-size); &::before { content: "#"; - font-size: px-to-em($font-size, $content-h1-font-size); + font-size: px-to-em($font-size, $content--h1--font-size); } } @@ -54,22 +54,21 @@ &::before { content: str-repeat("``\A", 40); height: 100%; - color: var(--page-item-prefix-fg); + color: var(--page--item-prefix--fg); overflow: hidden; - line-height: $code-block-line-height; } } hr { - margin-left: -1 * $page-item-prefix-width; + margin-left: -1 * $page--item-prefix--width; } .c-page-header { - margin-left: -1 * $page-item-prefix-width; - padding-left: $page-item-prefix-width; + margin-left: -1 * $page--item-prefix--width; + padding-left: $page--item-prefix--width; &::after { - margin-left: -1 * $page-item-prefix-width; + margin-left: -1 * $page--item-prefix--width; } } -- cgit v1.2.3-70-g09d2