From 517fc58cf46595990fd5af64a1bd647ee5ac3c08 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 27 Dec 2020 22:03:42 +0100 Subject: Added stylelint, generate some metadata automatically --- assets/css/_basics.scss | 170 ++++++++++++++++---------------- assets/css/_functions.scss | 14 +-- assets/css/_utils.scss | 24 ++--- assets/css/_vars.scss | 62 ++++++------ assets/css/components/_nav.scss | 85 ++++++++-------- assets/css/components/_page-header.scss | 28 +++--- assets/css/components/_refs.scss | 8 +- assets/css/layouts/_container.scss | 30 +++--- assets/css/scopes/_page.scss | 166 +++++++++++++++---------------- assets/css/style.scss | 18 ++-- 10 files changed, 304 insertions(+), 301 deletions(-) (limited to 'assets/css') diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 9505cdd..560ec94 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -1,161 +1,161 @@ @font-face { - font-family: "Iosevka Term SS09"; - font-style: normal; - font-weight: normal; - src: url("/iosevka-term-ss09-regular.woff2") format("woff2"); + 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"); + 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); + background-color: var(--select--bg); + color: var(--select--fg); } html, pre, code { - font-family: "Iosevka Term SS09", "Lucida Console", "Courier New", Courier, - monospace; - font-feature-settings: "calt" 0, "dlig" 1; + 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); + background-color: var(--bg); + color: var(--fg); + font-size: px-to-em($font-size, 16px); + line-height: $line-height; } body { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } 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; - text-overflow: ""; - overflow: hidden; - - strong { - font-weight: normal; - } + margin: 0; + overflow: hidden; + color: var(--code-block--fg); + font-size: $code-block--font-size; + line-height: $code-block--line-height; + text-overflow: ''; + + strong { + font-weight: normal; + } } strong { - color: var(--fg-plus-2); - font-weight: bold; + color: var(--fg-plus-2); + font-weight: bold; } ul, ol { - margin: ($line-height * 1em) 0 0; - padding: 0; - list-style: none; + margin: ($line-height * 1em) 0 0; + padding: 0; + list-style: none; } li { - position: relative; - padding-left: $subcontent--indent; + position: relative; + padding-left: $subcontent--indent; - &::before { - position: absolute; - display: inline-block; - width: $subcontent--indent; - margin-left: -1 * $subcontent--indent; - color: var(--fg-minus); - } + &::before { + display: inline-block; + position: absolute; + width: $subcontent--indent; + margin-left: -1 * $subcontent--indent; + color: var(--fg-minus); + } } ul > li::before { - content: "-"; + content: '-'; } ol { - counter-reset: cnt; + counter-reset: cnt; - > li { - counter-increment: cnt; + > li { + counter-increment: cnt; - &::before { - content: counter(cnt) "."; + &::before { + content: counter(cnt) '.'; + } } - } } h1, h2, h3 { - margin: ($line-height * 2em) 0 0; + margin: ($line-height * 2em) 0 0; - + h1, - + h2, - + h3 { - margin-top: $line-height * 1em; - } + + h1, + + h2, + + h3 { + margin-top: $line-height * 1em; + } } h1 { - text-transform: uppercase; - font-size: 1em; - color: var(--heading--fg); + color: var(--heading--fg); + font-size: 1em; + text-transform: uppercase; } h2 { - font-size: 1em; - color: var(--heading--fg); + color: var(--heading--fg); + font-size: 1em; } h3 { - font-size: 1em; + font-size: 1em; } p { - margin: ($line-height * 1em) 0 0; - hyphens: auto; + margin: ($line-height * 1em) 0 0; + hyphens: auto; } :link, :visited { - position: relative; - z-index: 1000; - padding: 0.2em 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; - } + position: relative; + z-index: 1; + margin: 0 -.3em; + padding: .2em .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); + color: var(--link--visited--fg); } hr { - height: 1px; - margin: ($line-height * 2em) 0 ($line-height * 2em); - background-color: var(--bg-plus); - border: 0; + height: 1px; + margin: ($line-height * 2em) 0 ($line-height * 2em); + border: 0; + background-color: var(--bg-plus); } blockquote { - position: relative; - margin: ($line-height * 1em) 0 0; - padding-left: calc(#{$subcontent--indent} - 2px); - border-left: 2px solid var(--bg-plus); + position: relative; + margin: ($line-height * 1em) 0 0; + padding-left: calc(#{$subcontent--indent} - 2px); + border-left: 2px solid var(--bg-plus); } diff --git a/assets/css/_functions.scss b/assets/css/_functions.scss index cd8947e..1523772 100644 --- a/assets/css/_functions.scss +++ b/assets/css/_functions.scss @@ -1,12 +1,12 @@ @function px-to-em($s, $b: $font-size) { - @return 1 / ($b / 1px) * ($s / 1px) * 1em; + @return 1 / ($b / 1px) * ($s / 1px) * 1em; } @function str-repeat($s, $n) { - $r: ""; - @while $n > 0 { - $r: $r + $s; - $n: $n - 1; - } - @return $r; + $r: ''; + @while $n > 0 { + $r: $r + $s; + $n: $n - 1; + } + @return $r; } diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss index 036a87e..e241d84 100644 --- a/assets/css/_utils.scss +++ b/assets/css/_utils.scss @@ -1,17 +1,17 @@ .u-hidden { - display: none; + display: none; - @each $name, $width in $breakpoints { - &\@#{$name}-down { - @media (max-width: $width) { - display: none; - } - } + @each $name, $width in $breakpoints { + &\@#{$name}-down { + @media (max-width: $width) { + display: none; + } + } - &\@#{$name}-up { - @media (min-width: $width + 1) { - display: none; - } + &\@#{$name}-up { + @media (min-width: $width + 1) { + display: none; + } + } } - } } diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 96e56c6..9cd4b24 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -24,45 +24,45 @@ $page--item-prefix--pad: 2ch; $page--item-prefix--width: $page--item-prefix--max-chars + $page--item-prefix--pad; $breakpoints: ( - xs: 380px, - sm: 700px, + xs: 380px, + sm: 700px, ); :root { - --gray0: hsl(270, 0%, 7%); - --gray1: hsl(270, 0%, 10%); - --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%); + --gray0: hsl(270, 0%, 7%); + --gray1: hsl(270, 0%, 10%); + --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-minus: var(--gray0); - --bg: var(--gray1); - --bg-plus: var(--gray2); - --fg-minus: var(--gray3); - --fg: var(--gray4); - --fg-plus: var(--gray5); - --fg-plus-2: var(--gray6); + --bg-minus: var(--gray0); + --bg: var(--gray1); + --bg-plus: var(--gray2); + --fg-minus: var(--gray3); + --fg: var(--gray4); + --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%, .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 a3f7004..60b3584 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss @@ -1,51 +1,54 @@ .c-nav { - background-color: var(--nav--bg); - font-size: $nav--font-size; - - &__items { - display: flex; - align-items: baseline; - } - - &__logo { - display: inline-block; - margin: 0; - 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); - font-weight: bold; - } + position: sticky; + z-index: 1000; + top: 0; + background-color: var(--nav--bg); + font-size: $nav--font-size; + + &__items { + display: flex; + align-items: baseline; } - } - - &__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); - text-decoration: none; - border-bottom: 2px solid transparent; - - &:hover { - background-color: transparent; - color: var(--nav--item--hover--fg); - font-weight: bold; + + &__logo { + display: inline-block; + margin: 0; + 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); + font-weight: bold; + } + } } - } - @media (max-width: map-get($breakpoints, "sm")) { &__item { - margin-left: $nav--item--spacing-sm - $nav--item--pad-h; + display: inline-block; + margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h); + padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px); + border-bottom: 2px solid transparent; + color: var(--nav--item--idle--fg); + text-decoration: none; + + &:hover { + background-color: transparent; + 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; + } } - } - /* + /* @media (max-width: map-get($breakpoints, "xs")) { &__logo { display: none; diff --git a/assets/css/components/_page-header.scss b/assets/css/components/_page-header.scss index dd273df..886b3e9 100644 --- a/assets/css/components/_page-header.scss +++ b/assets/css/components/_page-header.scss @@ -1,17 +1,17 @@ .c-page-header { - margin-bottom: $line-height * 2em; - overflow: hidden; + margin-bottom: $line-height * 2em; + 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); - line-height: $code-block--line-height; - } + &::after { + content: str-repeat('░', 120); + display: block; + position: relative; + z-index: -10; + height: $line-height; + margin-top: px-to-em(2px); + padding-top: px-to-em(2px); + border-top: 1px solid var(--fg-minus); + color: var(--fg-minus); + line-height: $code-block--line-height; + } } diff --git a/assets/css/components/_refs.scss b/assets/css/components/_refs.scss index b90252d..51524bd 100644 --- a/assets/css/components/_refs.scss +++ b/assets/css/components/_refs.scss @@ -1,7 +1,7 @@ .c-refs__item { - padding-left: 0; + padding-left: 0; - &::before { - display: none; - } + &::before { + display: none; + } } diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss index eb71070..ec061c6 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-right: $container--pad-h; + padding-left: $container--pad-h; - &--content { - margin-left: auto; - margin-right: auto; - max-width: $content--width; - } + &--content { + max-width: $content--width; + margin-right: auto; + margin-left: auto; + } - &--pad-v { - padding-top: $container--pad-v; - padding-bottom: $container--pad-v; - } + &--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; - } + @media (max-width: map-get($breakpoints, 'sm')) { + padding-right: $container--pad-h-sm; + padding-left: $container--pad-h-sm; + } } diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss index 7c9e2d4..a27c1a2 100644 --- a/assets/css/scopes/_page.scss +++ b/assets/css/scopes/_page.scss @@ -1,106 +1,106 @@ .s-page { - &__content { - padding-left: $page--item-prefix--width; + &__content { + padding-left: $page--item-prefix--width; - > :first-child { - margin-top: 0; + > :first-child { + margin-top: 0; + } } - } - - h1, - h2, - h3, - .c-refs__item, - 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-weight: normal; - text-align: right; + + h1, + h2, + h3, + .c-refs__item, + pre { + position: relative; + margin-left: -1 * $page--item-prefix--width; + padding-left: $page--item-prefix--width; + + &::before { + display: inline-block; + position: absolute; + box-sizing: border-box; + width: $page--item-prefix--width; + margin-left: -1 * $page--item-prefix--width; + padding-right: $page--item-prefix--pad; + color: var(--page--item-prefix--fg); + font-weight: normal; + text-align: right; + } } - } - h1 { - font-size: px-to-em($content--h1--font-size); + h1 { + font-size: px-to-em($content--h1--font-size); - &::before { - content: "#"; - font-size: px-to-em($font-size, $content--h1--font-size); + &::before { + content: '#'; + font-size: px-to-em($font-size, $content--h1--font-size); + } } - } - - h2::before { - content: "##"; - } - - h3::before { - content: "###"; - } - - .c-refs__item::before { - content: "|>"; - } - - pre { - &::before { - content: str-repeat("``\A", 40); - height: 100%; - color: var(--page--item-prefix--fg); - overflow: hidden; - } - } - - hr { - margin-left: -1 * $page--item-prefix--width; - } - .c-page-header { - margin-left: -1 * $page--item-prefix--width; - padding-left: $page--item-prefix--width; + h2::before { + content: '##'; + } - &::after { - margin-left: -1 * $page--item-prefix--width; + h3::before { + content: '###'; } - } - @media (max-width: map-get($breakpoints, "sm")) { - &__content { - padding-left: 0; + .c-refs__item::before { + content: '|>'; } - h1, - h2, - h3, - .c-refs__item, pre { - margin-left: 0; - padding-left: 0; - - &::before { - display: none; - } + &::before { + content: str-repeat('``\A', 40); + height: 100%; + overflow: hidden; + color: var(--page--item-prefix--fg); + } } hr { - margin-left: 0; + margin-left: -1 * $page--item-prefix--width; } .c-page-header { - margin-left: 0; - padding-left: 0; + margin-left: -1 * $page--item-prefix--width; + padding-left: $page--item-prefix--width; + + &::after { + margin-left: -1 * $page--item-prefix--width; + } + } - &::after { - margin-left: 0; - } + @media (max-width: map-get($breakpoints, 'sm')) { + &__content { + padding-left: 0; + } + + h1, + h2, + h3, + .c-refs__item, + pre { + margin-left: 0; + padding-left: 0; + + &::before { + display: none; + } + } + + hr { + margin-left: 0; + } + + .c-page-header { + margin-left: 0; + padding-left: 0; + + &::after { + margin-left: 0; + } + } } - } } diff --git a/assets/css/style.scss b/assets/css/style.scss index 2ca4cd4..0473689 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -1,13 +1,13 @@ -@import "vars"; -@import "functions"; -@import "basics"; +@import 'vars'; +@import 'functions'; +@import 'basics'; -@import "components/refs"; -@import "components/nav"; -@import "components/page-header"; +@import 'components/refs'; +@import 'components/nav'; +@import 'components/page-header'; -@import "layouts/container"; +@import 'layouts/container'; -@import "scopes/page"; +@import 'scopes/page'; -@import "utils"; +@import 'utils'; -- cgit v1.2.3-70-g09d2