From 517fc58cf46595990fd5af64a1bd647ee5ac3c08 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
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')
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