summaryrefslogtreecommitdiffstats
path: root/assets
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2020-12-26 23:37:48 +0100
committerVolpeon <git@volpeon.ink>2020-12-26 23:37:48 +0100
commitafaa48b03c8d9dcbc7bbce47b94ec6bdd2da3502 (patch)
tree17c7e522f3d0c3fef647cf0a6daae03debbd8394 /assets
parentImproved SCSS structure, keep less glyphs in fonts (diff)
downloadvolpeon.ink-afaa48b03c8d9dcbc7bbce47b94ec6bdd2da3502.tar.gz
volpeon.ink-afaa48b03c8d9dcbc7bbce47b94ec6bdd2da3502.tar.bz2
volpeon.ink-afaa48b03c8d9dcbc7bbce47b94ec6bdd2da3502.zip
Improved CSS variable names, improved script variable names, added initial support for finding child pages
Diffstat (limited to 'assets')
-rw-r--r--assets/css/_basics.scss32
-rw-r--r--assets/css/_vars.scss64
-rw-r--r--assets/css/components/_nav.scss20
-rw-r--r--assets/css/components/_page-header.scss2
-rw-r--r--assets/css/layouts/_container.scss14
-rw-r--r--assets/css/scopes/_page.scss29
6 files changed, 80 insertions, 81 deletions
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 @@
13} 13}
14 14
15::selection { 15::selection {
16 color: var(--select-fg); 16 color: var(--select--fg);
17 background-color: var(--select-bg); 17 background-color: var(--select--bg);
18} 18}
19 19
20html, 20html,
@@ -38,14 +38,14 @@ body {
38} 38}
39 39
40code { 40code {
41 color: var(--code-fg); 41 color: var(--code--fg);
42} 42}
43 43
44pre { 44pre {
45 margin: 0; 45 margin: 0;
46 color: var(--code-block-fg); 46 color: var(--code-block--fg);
47 font-size: $code-block-font-size; 47 font-size: $code-block--font-size;
48 line-height: $code-block-line-height; 48 line-height: $code-block--line-height;
49 text-overflow: ""; 49 text-overflow: "";
50 overflow: hidden; 50 overflow: hidden;
51 51
@@ -68,13 +68,13 @@ ol {
68 68
69li { 69li {
70 position: relative; 70 position: relative;
71 padding-left: $subcontent-indent; 71 padding-left: $subcontent--indent;
72 72
73 &::before { 73 &::before {
74 position: absolute; 74 position: absolute;
75 display: inline-block; 75 display: inline-block;
76 width: $subcontent-indent; 76 width: $subcontent--indent;
77 margin-left: -1 * $subcontent-indent; 77 margin-left: -1 * $subcontent--indent;
78 color: var(--fg-minus); 78 color: var(--fg-minus);
79 } 79 }
80} 80}
@@ -110,12 +110,12 @@ h3 {
110h1 { 110h1 {
111 text-transform: uppercase; 111 text-transform: uppercase;
112 font-size: 1em; 112 font-size: 1em;
113 color: var(--heading-fg); 113 color: var(--heading--fg);
114} 114}
115 115
116h2 { 116h2 {
117 font-size: 1em; 117 font-size: 1em;
118 color: var(--heading-fg); 118 color: var(--heading--fg);
119} 119}
120 120
121h3 { 121h3 {
@@ -133,17 +133,17 @@ p {
133 z-index: 1000; 133 z-index: 1000;
134 padding: 0.2em 0.3em; 134 padding: 0.2em 0.3em;
135 margin: 0 -0.3em; 135 margin: 0 -0.3em;
136 color: var(--link-idle-fg); 136 color: var(--link--idle--fg);
137 137
138 &:hover { 138 &:hover {
139 background-color: var(--link-hover-bg); 139 background-color: var(--link--hover--bg);
140 color: var(--link-hover-fg); 140 color: var(--link--hover--fg);
141 text-decoration: none; 141 text-decoration: none;
142 } 142 }
143} 143}
144 144
145:visited { 145:visited {
146 color: var(--link-visited-fg); 146 color: var(--link--visited--fg);
147} 147}
148 148
149hr { 149hr {
@@ -156,6 +156,6 @@ hr {
156blockquote { 156blockquote {
157 position: relative; 157 position: relative;
158 margin: ($line-height * 1em) 0 0; 158 margin: ($line-height * 1em) 0 0;
159 padding-left: calc(#{$subcontent-indent} - 2px); 159 padding-left: calc(#{$subcontent--indent} - 2px);
160 border-left: 2px solid var(--bg-plus); 160 border-left: 2px solid var(--bg-plus);
161} 161}
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 @@
1$font-size: 17px; 1$font-size: 17px;
2$nav-font-size: $font-size - 1;
3$code-block-font-size: $font-size - 1;
4$content-h1-font-size: $font-size + 1;
5
6$line-height: 1.5; 2$line-height: 1.5;
7$code-block-line-height: 1.4;
8 3
9$content-width: 80ch; 4$code-block--font-size: $font-size - 1;
5$code-block--line-height: 1.4;
6
7$content--width: 80ch;
8$content--h1--font-size: $font-size + 1;
10 9
11$container-pad-h: 2rem; 10$subcontent--indent: 4ch;
12$container-pad-h-sm: 1rem;
13$container-pad-v: $line-height * 2rem;
14 11
15$nav-item-spacing: 4ch; 12$container--pad-h: 2rem;
16$nav-item-spacing-sm: 3ch; 13$container--pad-h-sm: 1rem;
17$nav-item-pad-h: 1ch; 14$container--pad-v: $line-height * 2rem;
18$nav-item-pad-v: 1em;
19 15
20$page-item-prefix-max-chars: 3ch; 16$nav--font-size: $font-size - 1;
21$page-item-prefix-pad: 2ch; 17$nav--item--spacing: 4ch;
22$page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad; 18$nav--item--spacing-sm: 3ch;
19$nav--item--pad-h: 1ch;
20$nav--item--pad-v: 1em;
23 21
24$subcontent-indent: 4ch; 22$page--item-prefix--max-chars: 3ch;
23$page--item-prefix--pad: 2ch;
24$page--item-prefix--width: $page--item-prefix--max-chars + $page--item-prefix--pad;
25 25
26$breakpoints: ( 26$breakpoints: (
27 xs: 380px, 27 xs: 380px,
@@ -45,24 +45,24 @@ $breakpoints: (
45 --fg-plus: var(--gray5); 45 --fg-plus: var(--gray5);
46 --fg-plus-2: var(--gray6); 46 --fg-plus-2: var(--gray6);
47 47
48 --heading-fg: var(--fg-plus-2); 48 --heading--fg: var(--fg-plus-2);
49 49
50 --select-bg: hsla(270, 2%, 100%, 0.996); 50 --select--bg: hsla(270, 2%, 100%, 0.996);
51 --select-fg: var(--bg-minus); 51 --select--fg: var(--bg-minus);
52 52
53 --code-fg: var(--fg-minus); 53 --code--fg: var(--fg-minus);
54 --code-block-fg: var(--fg-minus); 54 --code-block--fg: var(--fg-minus);
55 55
56 --page-item-prefix-fg: var(--fg-minus); 56 --page--item-prefix--fg: var(--fg-minus);
57 57
58 --link-idle-fg: var(--fg-plus-2); //#90acf2; 58 --link--idle--fg: var(--fg-plus-2); //#90acf2;
59 --link-visited-fg: var(--fg-plus); //#bc9df2; 59 --link--visited--fg: var(--fg-plus); //#bc9df2;
60 --link-hover-bg: var(--fg-plus-2); 60 --link--hover--bg: var(--fg-plus-2);
61 --link-hover-fg: var(--bg-minus); 61 --link--hover--fg: var(--bg-minus);
62 62
63 --nav-bg: var(--bg-minus); 63 --nav--bg: var(--bg-minus);
64 --nav-logo-fg: var(--fg-minus); 64 --nav--logo--fg: var(--fg-minus);
65 --nav-item-idle-fg: var(--fg); 65 --nav--item--idle--fg: var(--fg);
66 --nav-item-hover-fg: var(--fg-plus-2); 66 --nav--item--hover--fg: var(--fg-plus-2);
67 --nav-item-active-fg: var(--fg-plus-2); 67 --nav--item--active--fg: var(--fg-plus-2);
68} 68}
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 @@
1.c-nav { 1.c-nav {
2 background-color: var(--nav-bg); 2 background-color: var(--nav--bg);
3 font-size: $nav-font-size; 3 font-size: $nav--font-size;
4 4
5 &__items { 5 &__items {
6 display: flex; 6 display: flex;
@@ -10,15 +10,15 @@
10 &__logo { 10 &__logo {
11 display: inline-block; 11 display: inline-block;
12 margin: 0; 12 margin: 0;
13 padding: $nav-item-pad-v 0; 13 padding: $nav--item--pad-v 0;
14 color: var(--nav-logo-fg); 14 color: var(--nav--logo--fg);
15 text-decoration: none; 15 text-decoration: none;
16 16
17 &:link, 17 &:link,
18 &:visited { 18 &:visited {
19 &:hover { 19 &:hover {
20 background-color: transparent; 20 background-color: transparent;
21 color: var(--nav-item-hover-fg); 21 color: var(--nav--item--hover--fg);
22 font-weight: bold; 22 font-weight: bold;
23 } 23 }
24 } 24 }
@@ -26,22 +26,22 @@
26 26
27 &__item { 27 &__item {
28 display: inline-block; 28 display: inline-block;
29 padding: $nav-item-pad-v $nav-item-pad-h calc(#{$nav-item-pad-v} - 2px); 29 padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px);
30 margin: 0 (-1 * $nav-item-pad-h) 0 ($nav-item-spacing - $nav-item-pad-h); 30 margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h);
31 color: var(--nav-item-idle-fg); 31 color: var(--nav--item--idle--fg);
32 text-decoration: none; 32 text-decoration: none;
33 border-bottom: 2px solid transparent; 33 border-bottom: 2px solid transparent;
34 34
35 &:hover { 35 &:hover {
36 background-color: transparent; 36 background-color: transparent;
37 color: var(--nav-item-hover-fg); 37 color: var(--nav--item--hover--fg);
38 font-weight: bold; 38 font-weight: bold;
39 } 39 }
40 } 40 }
41 41
42 @media (max-width: map-get($breakpoints, "sm")) { 42 @media (max-width: map-get($breakpoints, "sm")) {
43 &__item { 43 &__item {
44 margin-left: $nav-item-spacing-sm - $nav-item-pad-h; 44 margin-left: $nav--item--spacing-sm - $nav--item--pad-h;
45 } 45 }
46 } 46 }
47 47
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 @@
12 padding-top: px-to-em(2px); 12 padding-top: px-to-em(2px);
13 color: var(--fg-minus); 13 color: var(--fg-minus);
14 border-top: 1px solid var(--fg-minus); 14 border-top: 1px solid var(--fg-minus);
15 line-height: $code-block-line-height; 15 line-height: $code-block--line-height;
16 } 16 }
17} 17}
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 @@
1.l-container { 1.l-container {
2 padding-left: $container-pad-h; 2 padding-left: $container--pad-h;
3 padding-right: $container-pad-h; 3 padding-right: $container--pad-h;
4 4
5 &--content { 5 &--content {
6 margin-left: auto; 6 margin-left: auto;
7 margin-right: auto; 7 margin-right: auto;
8 max-width: $content-width; 8 max-width: $content--width;
9 } 9 }
10 10
11 &--pad-v { 11 &--pad-v {
12 padding-top: $container-pad-v; 12 padding-top: $container--pad-v;
13 padding-bottom: $container-pad-v; 13 padding-bottom: $container--pad-v;
14 } 14 }
15 15
16 @media (max-width: map-get($breakpoints, "sm")) { 16 @media (max-width: map-get($breakpoints, "sm")) {
17 padding-left: $container-pad-h-sm; 17 padding-left: $container--pad-h-sm;
18 padding-right: $container-pad-h-sm; 18 padding-right: $container--pad-h-sm;
19 } 19 }
20} 20}
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 @@
1.s-page { 1.s-page {
2 &__content { 2 &__content {
3 padding-left: $page-item-prefix-width; 3 padding-left: $page--item-prefix--width;
4 4
5 > :first-child { 5 > :first-child {
6 margin-top: 0; 6 margin-top: 0;
@@ -13,28 +13,28 @@
13 .c-refs__item, 13 .c-refs__item,
14 pre { 14 pre {
15 position: relative; 15 position: relative;
16 margin-left: -1 * $page-item-prefix-width; 16 margin-left: -1 * $page--item-prefix--width;
17 padding-left: $page-item-prefix-width; 17 padding-left: $page--item-prefix--width;
18 18
19 &::before { 19 &::before {
20 position: absolute; 20 position: absolute;
21 box-sizing: border-box; 21 box-sizing: border-box;
22 display: inline-block; 22 display: inline-block;
23 margin-left: -1 * $page-item-prefix-width; 23 margin-left: -1 * $page--item-prefix--width;
24 padding-right: $page-item-prefix-pad; 24 padding-right: $page--item-prefix--pad;
25 width: $page-item-prefix-width; 25 width: $page--item-prefix--width;
26 color: var(--page-item-prefix-fg); 26 color: var(--page--item-prefix--fg);
27 font-weight: normal; 27 font-weight: normal;
28 text-align: right; 28 text-align: right;
29 } 29 }
30 } 30 }
31 31
32 h1 { 32 h1 {
33 font-size: px-to-em($content-h1-font-size); 33 font-size: px-to-em($content--h1--font-size);
34 34
35 &::before { 35 &::before {
36 content: "#"; 36 content: "#";
37 font-size: px-to-em($font-size, $content-h1-font-size); 37 font-size: px-to-em($font-size, $content--h1--font-size);
38 } 38 }
39 } 39 }
40 40
@@ -54,22 +54,21 @@
54 &::before { 54 &::before {
55 content: str-repeat("``\A", 40); 55 content: str-repeat("``\A", 40);
56 height: 100%; 56 height: 100%;
57 color: var(--page-item-prefix-fg); 57 color: var(--page--item-prefix--fg);
58 overflow: hidden; 58 overflow: hidden;
59 line-height: $code-block-line-height;
60 } 59 }
61 } 60 }
62 61
63 hr { 62 hr {
64 margin-left: -1 * $page-item-prefix-width; 63 margin-left: -1 * $page--item-prefix--width;
65 } 64 }
66 65
67 .c-page-header { 66 .c-page-header {
68 margin-left: -1 * $page-item-prefix-width; 67 margin-left: -1 * $page--item-prefix--width;
69 padding-left: $page-item-prefix-width; 68 padding-left: $page--item-prefix--width;
70 69
71 &::after { 70 &::after {
72 margin-left: -1 * $page-item-prefix-width; 71 margin-left: -1 * $page--item-prefix--width;
73 } 72 }
74 } 73 }
75 74