diff options
author | Volpeon <git@volpeon.ink> | 2020-12-26 23:37:48 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2020-12-26 23:37:48 +0100 |
commit | afaa48b03c8d9dcbc7bbce47b94ec6bdd2da3502 (patch) | |
tree | 17c7e522f3d0c3fef647cf0a6daae03debbd8394 /assets | |
parent | Improved SCSS structure, keep less glyphs in fonts (diff) | |
download | volpeon.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.scss | 32 | ||||
-rw-r--r-- | assets/css/_vars.scss | 64 | ||||
-rw-r--r-- | assets/css/components/_nav.scss | 20 | ||||
-rw-r--r-- | assets/css/components/_page-header.scss | 2 | ||||
-rw-r--r-- | assets/css/layouts/_container.scss | 14 | ||||
-rw-r--r-- | assets/css/scopes/_page.scss | 29 |
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 | ||
20 | html, | 20 | html, |
@@ -38,14 +38,14 @@ body { | |||
38 | } | 38 | } |
39 | 39 | ||
40 | code { | 40 | code { |
41 | color: var(--code-fg); | 41 | color: var(--code--fg); |
42 | } | 42 | } |
43 | 43 | ||
44 | pre { | 44 | pre { |
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 | ||
69 | li { | 69 | li { |
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 { | |||
110 | h1 { | 110 | h1 { |
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 | ||
116 | h2 { | 116 | h2 { |
117 | font-size: 1em; | 117 | font-size: 1em; |
118 | color: var(--heading-fg); | 118 | color: var(--heading--fg); |
119 | } | 119 | } |
120 | 120 | ||
121 | h3 { | 121 | h3 { |
@@ -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 | ||
149 | hr { | 149 | hr { |
@@ -156,6 +156,6 @@ hr { | |||
156 | blockquote { | 156 | blockquote { |
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 | ||