summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2020-12-24 15:05:32 +0100
committerVolpeon <git@volpeon.ink>2020-12-24 15:05:32 +0100
commit714d8f7ff8425e4177ff6bde4d214ef75be6b1ab (patch)
treebc343dd424b14bcadef61a80bfe7d423c139445c /assets/css
parentImproved typography (diff)
downloadvolpeon.ink-714d8f7ff8425e4177ff6bde4d214ef75be6b1ab.tar.gz
volpeon.ink-714d8f7ff8425e4177ff6bde4d214ef75be6b1ab.tar.bz2
volpeon.ink-714d8f7ff8425e4177ff6bde4d214ef75be6b1ab.zip
Added header, improved SCSS structure, use metadata file instead of param, improved folder structure
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_basics.scss172
-rw-r--r--assets/css/_functions.scss12
-rw-r--r--assets/css/_utils.scss15
-rw-r--r--assets/css/_vars.scss43
-rw-r--r--assets/css/components/_nav.scss14
-rw-r--r--assets/css/components/_page-header.scss17
-rw-r--r--assets/css/components/_refs.scss7
-rw-r--r--assets/css/scopes/_page.scss93
-rw-r--r--assets/css/style.scss11
9 files changed, 384 insertions, 0 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
new file mode 100644
index 0000000..3adf64c
--- /dev/null
+++ b/assets/css/_basics.scss
@@ -0,0 +1,172 @@
1@font-face {
2 font-family: "Iosevka Term SS09";
3 font-style: normal;
4 font-weight: normal;
5 src: url("/iosevka-term-ss09-regular.woff2") format("woff2");
6}
7
8@font-face {
9 font-family: "Iosevka Term SS09";
10 font-style: normal;
11 font-weight: bold;
12 src: url("/iosevka-term-ss09-bold.woff2") format("woff2");
13}
14
15::selection {
16 color: var(--select-fg);
17 background-color: var(--select-bg);
18}
19
20html,
21pre,
22code {
23 font-family: "Iosevka Term SS09", "Lucida Console", "Courier New", Courier,
24 monospace;
25 font-feature-settings: "calt" 0, "dlig" 1;
26}
27
28html {
29 font-size: px-to-em($font-size, 16px);
30 line-height: $line-height;
31 background-color: var(--bg);
32 color: var(--fg);
33}
34
35body {
36 margin: 2em;
37 padding: 0;
38
39 @media (max-width: $breakpoint-sm) {
40 margin: 1em;
41 }
42}
43
44main {
45 max-width: 70ch;
46 margin: 0 auto;
47}
48
49code {
50 color: var(--code-fg);
51}
52
53pre {
54 margin: 0;
55 color: var(--code-block-fg);
56 font-size: $code-block-font-size;
57 line-height: $code-block-line-height;
58
59 strong {
60 font-weight: normal;
61 }
62}
63
64strong {
65 color: var(--fg-plus);
66 font-weight: bold;
67}
68
69ul,
70ol {
71 margin: ($line-height * 1rem) 0 0;
72 padding: 0;
73 list-style: none;
74}
75
76li {
77 position: relative;
78 padding-left: $subcontent-indent;
79
80 &::before {
81 position: absolute;
82 display: inline-block;
83 width: $subcontent-indent;
84 margin-left: -1 * $subcontent-indent;
85 color: var(--fg-minus);
86 }
87}
88
89ul > li::before {
90 content: "-";
91}
92
93ol {
94 counter-reset: cnt;
95
96 > li {
97 counter-increment: cnt;
98
99 &::before {
100 content: counter(cnt) ".";
101 }
102 }
103}
104
105h1,
106h2,
107h3 {
108 margin: ($line-height * 2rem) 0 0;
109
110 + h1,
111 + h2,
112 + h3 {
113 margin-top: $line-height * 1rem;
114 }
115}
116
117h1 {
118 text-transform: uppercase;
119 font-size: px-to-em($heading-font-size);
120 color: var(--heading);
121}
122
123h2 {
124 font-size: 1em;
125 color: var(--heading);
126}
127
128h3 {
129 font-size: 1em;
130}
131
132p {
133 margin: ($line-height * 1em) 0 0;
134 hyphens: auto;
135}
136
137:link,
138:visited {
139 position: relative;
140 z-index: 1000;
141 padding: 0.1em 0.3em;
142 margin: 0 -0.3em;
143 color: var(--link-idle-fg);
144
145 &:hover {
146 background-color: var(--link-hover-bg);
147 color: var(--link-hover-fg);
148 text-decoration: none;
149 }
150}
151
152:visited {
153 color: var(--link-visited-fg);
154}
155
156hr {
157 height: 1px;
158 margin: ($line-height * 2rem) 0 ($line-height * 2rem);
159 background-color: var(--bg-plus);
160 border: 0;
161
162 @media (max-width: $breakpoint-sm) {
163 margin-left: 0;
164 }
165}
166
167blockquote {
168 position: relative;
169 margin: ($line-height * 1rem) 0 0;
170 padding-left: calc(#{$subcontent-indent} - 2px);
171 border-left: 2px solid var(--bg-plus);
172}
diff --git a/assets/css/_functions.scss b/assets/css/_functions.scss
new file mode 100644
index 0000000..cd8947e
--- /dev/null
+++ b/assets/css/_functions.scss
@@ -0,0 +1,12 @@
1@function px-to-em($s, $b: $font-size) {
2 @return 1 / ($b / 1px) * ($s / 1px) * 1em;
3}
4
5@function str-repeat($s, $n) {
6 $r: "";
7 @while $n > 0 {
8 $r: $r + $s;
9 $n: $n - 1;
10 }
11 @return $r;
12}
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
new file mode 100644
index 0000000..bf7e213
--- /dev/null
+++ b/assets/css/_utils.scss
@@ -0,0 +1,15 @@
1.u-hidden {
2 display: none;
3
4 &\@sm-down {
5 @media (max-width: $breakpoint-sm) {
6 display: none;
7 }
8 }
9
10 &\@sm-up {
11 @media (min-width: $breakpoint-sm + 1) {
12 display: none;
13 }
14 }
15}
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
new file mode 100644
index 0000000..a29ad6d
--- /dev/null
+++ b/assets/css/_vars.scss
@@ -0,0 +1,43 @@
1$font-size: 17px;
2$heading-font-size: $font-size + 1;
3$code-block-font-size: $font-size;
4$line-height: 1.5;
5$code-block-line-height: 1.4;
6
7$page-item-prefix-max-chars: 3ch;
8$page-item-prefix-pad: 2ch;
9$page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad;
10
11$subcontent-indent: 4ch;
12
13$breakpoint-sm: 700px;
14
15:root {
16 --gray1: hsl(270, 0%, 9.7%);
17 --gray2: hsl(270, 1%, 29%);
18 --gray3: hsl(270, 2%, 54%);
19 --gray4: hsl(270, 2%, 73%);
20 --gray5: hsl(270, 2%, 83%);
21 --gray6: hsl(270, 2%, 100%);
22
23 --bg: var(--gray1);
24 --bg-plus: var(--gray2);
25 --fg-minus: var(--gray3);
26 --fg: var(--gray4);
27 --fg-plus: var(--gray6);
28
29 --select-bg: hsla(270, 2%, 100%, 0.996);
30 --select-fg: var(--gray1);
31
32 --code-fg: var(--fg-minus);
33 --code-block-fg: var(--fg-minus);
34
35 --page-item-prefix-fg: var(--fg-minus);
36
37 --link-idle-fg: var(--gray6); //#90acf2; //var(--gray6);
38 --link-visited-fg: var(--gray5); //#bc9df2; //var(--gray5);
39 --link-hover-bg: var(--gray6);
40 --link-hover-fg: var(--gray1);
41
42 --heading: var(--fg-plus);
43}
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
new file mode 100644
index 0000000..1fc24f9
--- /dev/null
+++ b/assets/css/components/_nav.scss
@@ -0,0 +1,14 @@
1.c-nav {
2 margin-bottom: $line-height * 2rem;
3
4 &::before {
5 content: "//\\";
6 color: var(--page-item-prefix-fg);
7 }
8
9 &__item {
10 margin-left: 2ch;
11 color: var(--fg);
12 text-decoration: none;
13 }
14}
diff --git a/assets/css/components/_page-header.scss b/assets/css/components/_page-header.scss
new file mode 100644
index 0000000..29eef00
--- /dev/null
+++ b/assets/css/components/_page-header.scss
@@ -0,0 +1,17 @@
1.c-page-header {
2 margin-bottom: $line-height * 2rem;
3 overflow: hidden;
4
5 &::after {
6 position: relative;
7 z-index: -10;
8 content: str-repeat("░", 120);
9 display: block;
10 height: $line-height;
11 margin-top: px-to-em(2px);
12 padding-top: px-to-em(2px);
13 color: var(--fg-minus);
14 border-top: 1px solid var(--fg-minus);
15 line-height: $code-block-line-height;
16 }
17}
diff --git a/assets/css/components/_refs.scss b/assets/css/components/_refs.scss
new file mode 100644
index 0000000..b90252d
--- /dev/null
+++ b/assets/css/components/_refs.scss
@@ -0,0 +1,7 @@
1.c-refs__item {
2 padding-left: 0;
3
4 &::before {
5 display: none;
6 }
7}
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss
new file mode 100644
index 0000000..cf7673c
--- /dev/null
+++ b/assets/css/scopes/_page.scss
@@ -0,0 +1,93 @@
1.s-page {
2 padding-left: $page-item-prefix-width;
3
4 h1,
5 h2,
6 h3,
7 .c-refs__item,
8 pre {
9 position: relative;
10 margin-left: -1 * $page-item-prefix-width;
11 padding-left: $page-item-prefix-width;
12
13 &::before {
14 position: absolute;
15 box-sizing: border-box;
16 display: inline-block;
17 margin-left: -1 * $page-item-prefix-width;
18 padding-right: $page-item-prefix-pad;
19 width: $page-item-prefix-width;
20 color: var(--page-item-prefix-fg);
21 font-size: 1rem;
22 font-weight: normal;
23 text-align: right;
24 }
25
26 @media (max-width: $breakpoint-sm) {
27 margin-left: 0;
28 padding-left: 0;
29
30 &::before {
31 display: none;
32 }
33 }
34 }
35
36 h1::before {
37 content: "#";
38 }
39
40 h2::before {
41 content: "##";
42 }
43
44 h3::before {
45 content: "###";
46 }
47
48 .c-refs__item::before {
49 content: "|>";
50 }
51
52 pre::before {
53 content: str-repeat("``\A", 40);
54 height: 100%;
55 color: var(--page-item-prefix-fg);
56 overflow: hidden;
57 line-height: $code-block-line-height * ($code-block-font-size / $font-size);
58 }
59
60 hr {
61 margin-left: -1 * $page-item-prefix-width;
62 }
63
64 .c-page-header {
65 margin-left: -1 * $page-item-prefix-width;
66 padding-left: $page-item-prefix-width;
67
68 &::after {
69 margin-left: -1 * $page-item-prefix-width;
70 }
71
72 @media (max-width: $breakpoint-sm) {
73 margin-left: 0;
74 padding-left: 0;
75
76 &::after {
77 margin-left: 0;
78 }
79 }
80 }
81
82 .c-nav {
83 margin-left: -1 * $page-item-prefix-width;
84
85 @media (max-width: $breakpoint-sm) {
86 margin-left: 0;
87 }
88 }
89
90 @media (max-width: $breakpoint-sm) {
91 padding-left: 0;
92 }
93}
diff --git a/assets/css/style.scss b/assets/css/style.scss
new file mode 100644
index 0000000..7383ac4
--- /dev/null
+++ b/assets/css/style.scss
@@ -0,0 +1,11 @@
1@import "vars";
2@import "functions";
3@import "basics";
4
5@import "components/refs";
6@import "components/nav";
7@import "components/page-header";
8
9@import "scopes/page";
10
11@import "utils";