summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_basics.scss170
-rw-r--r--assets/css/_functions.scss14
-rw-r--r--assets/css/_utils.scss24
-rw-r--r--assets/css/_vars.scss62
-rw-r--r--assets/css/components/_nav.scss85
-rw-r--r--assets/css/components/_page-header.scss28
-rw-r--r--assets/css/components/_refs.scss8
-rw-r--r--assets/css/layouts/_container.scss30
-rw-r--r--assets/css/scopes/_page.scss166
-rw-r--r--assets/css/style.scss18
10 files changed, 304 insertions, 301 deletions
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 @@
1@font-face { 1@font-face {
2 font-family: "Iosevka Term SS09"; 2 font-family: 'Iosevka Term SS09';
3 font-style: normal; 3 font-style: normal;
4 font-weight: normal; 4 font-weight: normal;
5 src: url("/iosevka-term-ss09-regular.woff2") format("woff2"); 5 src: url('/iosevka-term-ss09-regular.woff2') format('woff2');
6} 6}
7 7
8@font-face { 8@font-face {
9 font-family: "Iosevka Term SS09"; 9 font-family: 'Iosevka Term SS09';
10 font-style: normal; 10 font-style: normal;
11 font-weight: bold; 11 font-weight: bold;
12 src: url("/iosevka-term-ss09-bold.woff2") format("woff2"); 12 src: url('/iosevka-term-ss09-bold.woff2') format('woff2');
13} 13}
14 14
15::selection { 15::selection {
16 color: var(--select--fg); 16 background-color: var(--select--bg);
17 background-color: var(--select--bg); 17 color: var(--select--fg);
18} 18}
19 19
20html, 20html,
21pre, 21pre,
22code { 22code {
23 font-family: "Iosevka Term SS09", "Lucida Console", "Courier New", Courier, 23 font-family: 'Iosevka Term SS09', 'Lucida Console', 'Courier New', Courier,
24 monospace; 24 monospace;
25 font-feature-settings: "calt" 0, "dlig" 1; 25 font-feature-settings: 'calt' 0, 'dlig' 1;
26} 26}
27 27
28html { 28html {
29 font-size: px-to-em($font-size, 16px); 29 background-color: var(--bg);
30 line-height: $line-height; 30 color: var(--fg);
31 background-color: var(--bg); 31 font-size: px-to-em($font-size, 16px);
32 color: var(--fg); 32 line-height: $line-height;
33} 33}
34 34
35body { 35body {
36 margin: 0; 36 margin: 0;
37 padding: 0; 37 padding: 0;
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 overflow: hidden;
47 font-size: $code-block--font-size; 47 color: var(--code-block--fg);
48 line-height: $code-block--line-height; 48 font-size: $code-block--font-size;
49 text-overflow: ""; 49 line-height: $code-block--line-height;
50 overflow: hidden; 50 text-overflow: '';
51 51
52 strong { 52 strong {
53 font-weight: normal; 53 font-weight: normal;
54 } 54 }
55} 55}
56 56
57strong { 57strong {
58 color: var(--fg-plus-2); 58 color: var(--fg-plus-2);
59 font-weight: bold; 59 font-weight: bold;
60} 60}
61 61
62ul, 62ul,
63ol { 63ol {
64 margin: ($line-height * 1em) 0 0; 64 margin: ($line-height * 1em) 0 0;
65 padding: 0; 65 padding: 0;
66 list-style: none; 66 list-style: none;
67} 67}
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 display: inline-block;
75 display: inline-block; 75 position: absolute;
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}
81 81
82ul > li::before { 82ul > li::before {
83 content: "-"; 83 content: '-';
84} 84}
85 85
86ol { 86ol {
87 counter-reset: cnt; 87 counter-reset: cnt;
88 88
89 > li { 89 > li {
90 counter-increment: cnt; 90 counter-increment: cnt;
91 91
92 &::before { 92 &::before {
93 content: counter(cnt) "."; 93 content: counter(cnt) '.';
94 }
94 } 95 }
95 }
96} 96}
97 97
98h1, 98h1,
99h2, 99h2,
100h3 { 100h3 {
101 margin: ($line-height * 2em) 0 0; 101 margin: ($line-height * 2em) 0 0;
102 102
103 + h1, 103 + h1,
104 + h2, 104 + h2,
105 + h3 { 105 + h3 {
106 margin-top: $line-height * 1em; 106 margin-top: $line-height * 1em;
107 } 107 }
108} 108}
109 109
110h1 { 110h1 {
111 text-transform: uppercase; 111 color: var(--heading--fg);
112 font-size: 1em; 112 font-size: 1em;
113 color: var(--heading--fg); 113 text-transform: uppercase;
114} 114}
115 115
116h2 { 116h2 {
117 font-size: 1em; 117 color: var(--heading--fg);
118 color: var(--heading--fg); 118 font-size: 1em;
119} 119}
120 120
121h3 { 121h3 {
122 font-size: 1em; 122 font-size: 1em;
123} 123}
124 124
125p { 125p {
126 margin: ($line-height * 1em) 0 0; 126 margin: ($line-height * 1em) 0 0;
127 hyphens: auto; 127 hyphens: auto;
128} 128}
129 129
130:link, 130:link,
131:visited { 131:visited {
132 position: relative; 132 position: relative;
133 z-index: 1000; 133 z-index: 1;
134 padding: 0.2em 0.3em; 134 margin: 0 -.3em;
135 margin: 0 -0.3em; 135 padding: .2em .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 {
150 height: 1px; 150 height: 1px;
151 margin: ($line-height * 2em) 0 ($line-height * 2em); 151 margin: ($line-height * 2em) 0 ($line-height * 2em);
152 background-color: var(--bg-plus); 152 border: 0;
153 border: 0; 153 background-color: var(--bg-plus);
154} 154}
155 155
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/_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 @@
1@function px-to-em($s, $b: $font-size) { 1@function px-to-em($s, $b: $font-size) {
2 @return 1 / ($b / 1px) * ($s / 1px) * 1em; 2 @return 1 / ($b / 1px) * ($s / 1px) * 1em;
3} 3}
4 4
5@function str-repeat($s, $n) { 5@function str-repeat($s, $n) {
6 $r: ""; 6 $r: '';
7 @while $n > 0 { 7 @while $n > 0 {
8 $r: $r + $s; 8 $r: $r + $s;
9 $n: $n - 1; 9 $n: $n - 1;
10 } 10 }
11 @return $r; 11 @return $r;
12} 12}
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 @@
1.u-hidden { 1.u-hidden {
2 display: none; 2 display: none;
3 3
4 @each $name, $width in $breakpoints { 4 @each $name, $width in $breakpoints {
5 &\@#{$name}-down { 5 &\@#{$name}-down {
6 @media (max-width: $width) { 6 @media (max-width: $width) {
7 display: none; 7 display: none;
8 } 8 }
9 } 9 }
10 10
11 &\@#{$name}-up { 11 &\@#{$name}-up {
12 @media (min-width: $width + 1) { 12 @media (min-width: $width + 1) {
13 display: none; 13 display: none;
14 } 14 }
15 }
15 } 16 }
16 }
17} 17}
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;
24$page--item-prefix--width: $page--item-prefix--max-chars + $page--item-prefix--pad; 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,
28 sm: 700px, 28 sm: 700px,
29); 29);
30 30
31:root { 31:root {
32 --gray0: hsl(270, 0%, 7%); 32 --gray0: hsl(270, 0%, 7%);
33 --gray1: hsl(270, 0%, 10%); 33 --gray1: hsl(270, 0%, 10%);
34 --gray2: hsl(270, 1%, 29%); 34 --gray2: hsl(270, 1%, 29%);
35 --gray3: hsl(270, 2%, 54%); 35 --gray3: hsl(270, 2%, 54%);
36 --gray4: hsl(270, 2%, 73%); 36 --gray4: hsl(270, 2%, 73%);
37 --gray5: hsl(270, 2%, 83%); 37 --gray5: hsl(270, 2%, 83%);
38 --gray6: hsl(270, 2%, 100%); 38 --gray6: hsl(270, 2%, 100%);
39 39
40 --bg-minus: var(--gray0); 40 --bg-minus: var(--gray0);
41 --bg: var(--gray1); 41 --bg: var(--gray1);
42 --bg-plus: var(--gray2); 42 --bg-plus: var(--gray2);
43 --fg-minus: var(--gray3); 43 --fg-minus: var(--gray3);
44 --fg: var(--gray4); 44 --fg: var(--gray4);
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%, .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 a3f7004..60b3584 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -1,51 +1,54 @@
1.c-nav { 1.c-nav {
2 background-color: var(--nav--bg); 2 position: sticky;
3 font-size: $nav--font-size; 3 z-index: 1000;
4 4 top: 0;
5 &__items { 5 background-color: var(--nav--bg);
6 display: flex; 6 font-size: $nav--font-size;
7 align-items: baseline; 7
8 } 8 &__items {
9 9 display: flex;
10 &__logo { 10 align-items: baseline;
11 display: inline-block;
12 margin: 0;
13 padding: $nav--item--pad-v 0;
14 color: var(--nav--logo--fg);
15 text-decoration: none;
16
17 &:link,
18 &:visited {
19 &:hover {
20 background-color: transparent;
21 color: var(--nav--item--hover--fg);
22 font-weight: bold;
23 }
24 } 11 }
25 } 12
26 13 &__logo {
27 &__item { 14 display: inline-block;
28 display: inline-block; 15 margin: 0;
29 padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px); 16 padding: $nav--item--pad-v 0;
30 margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h); 17 color: var(--nav--logo--fg);
31 color: var(--nav--item--idle--fg); 18 text-decoration: none;
32 text-decoration: none; 19
33 border-bottom: 2px solid transparent; 20 &:link,
34 21 &:visited {
35 &:hover { 22 &:hover {
36 background-color: transparent; 23 background-color: transparent;
37 color: var(--nav--item--hover--fg); 24 color: var(--nav--item--hover--fg);
38 font-weight: bold; 25 font-weight: bold;
26 }
27 }
39 } 28 }
40 }
41 29
42 @media (max-width: map-get($breakpoints, "sm")) {
43 &__item { 30 &__item {
44 margin-left: $nav--item--spacing-sm - $nav--item--pad-h; 31 display: inline-block;
32 margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h);
33 padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px);
34 border-bottom: 2px solid transparent;
35 color: var(--nav--item--idle--fg);
36 text-decoration: none;
37
38 &:hover {
39 background-color: transparent;
40 color: var(--nav--item--hover--fg);
41 font-weight: bold;
42 }
43 }
44
45 @media (max-width: map-get($breakpoints, 'sm')) {
46 &__item {
47 margin-left: $nav--item--spacing-sm - $nav--item--pad-h;
48 }
45 } 49 }
46 }
47 50
48 /* 51 /*
49 @media (max-width: map-get($breakpoints, "xs")) { 52 @media (max-width: map-get($breakpoints, "xs")) {
50 &__logo { 53 &__logo {
51 display: none; 54 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 @@
1.c-page-header { 1.c-page-header {
2 margin-bottom: $line-height * 2em; 2 margin-bottom: $line-height * 2em;
3 overflow: hidden; 3 overflow: hidden;
4 4
5 &::after { 5 &::after {
6 position: relative; 6 content: str-repeat('â–‘', 120);
7 z-index: -10; 7 display: block;
8 content: str-repeat("â–‘", 120); 8 position: relative;
9 display: block; 9 z-index: -10;
10 height: $line-height; 10 height: $line-height;
11 margin-top: px-to-em(2px); 11 margin-top: px-to-em(2px);
12 padding-top: px-to-em(2px); 12 padding-top: px-to-em(2px);
13 color: var(--fg-minus); 13 border-top: 1px solid var(--fg-minus);
14 border-top: 1px solid var(--fg-minus); 14 color: 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/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 @@
1.c-refs__item { 1.c-refs__item {
2 padding-left: 0; 2 padding-left: 0;
3 3
4 &::before { 4 &::before {
5 display: none; 5 display: none;
6 } 6 }
7} 7}
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 @@
1.l-container { 1.l-container {
2 padding-left: $container--pad-h; 2 padding-right: $container--pad-h;
3 padding-right: $container--pad-h; 3 padding-left: $container--pad-h;
4 4
5 &--content { 5 &--content {
6 margin-left: auto; 6 max-width: $content--width;
7 margin-right: auto; 7 margin-right: auto;
8 max-width: $content--width; 8 margin-left: auto;
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-right: $container--pad-h-sm;
18 padding-right: $container--pad-h-sm; 18 padding-left: $container--pad-h-sm;
19 } 19 }
20} 20}
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 @@
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;
7 }
7 } 8 }
8 } 9
9 10 h1,
10 h1, 11 h2,
11 h2, 12 h3,
12 h3, 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 display: inline-block;
20 position: absolute; 21 position: absolute;
21 box-sizing: border-box; 22 box-sizing: border-box;
22 display: inline-block; 23 width: $page--item-prefix--width;
23 margin-left: -1 * $page--item-prefix--width; 24 margin-left: -1 * $page--item-prefix--width;
24 padding-right: $page--item-prefix--pad; 25 padding-right: $page--item-prefix--pad;
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
41 h2::before {
42 content: "##";
43 }
44
45 h3::before {
46 content: "###";
47 }
48
49 .c-refs__item::before {
50 content: "|>";
51 }
52
53 pre {
54 &::before {
55 content: str-repeat("``\A", 40);
56 height: 100%;
57 color: var(--page--item-prefix--fg);
58 overflow: hidden;
59 }
60 }
61
62 hr {
63 margin-left: -1 * $page--item-prefix--width;
64 }
65 40
66 .c-page-header { 41 h2::before {
67 margin-left: -1 * $page--item-prefix--width; 42 content: '##';
68 padding-left: $page--item-prefix--width; 43 }
69 44
70 &::after { 45 h3::before {
71 margin-left: -1 * $page--item-prefix--width; 46 content: '###';
72 } 47 }
73 }
74 48
75 @media (max-width: map-get($breakpoints, "sm")) { 49 .c-refs__item::before {
76 &__content { 50 content: '|>';
77 padding-left: 0;
78 } 51 }
79 52
80 h1,
81 h2,
82 h3,
83 .c-refs__item,
84 pre { 53 pre {
85 margin-left: 0; 54 &::before {
86 padding-left: 0; 55 content: str-repeat('``\A', 40);
87 56 height: 100%;
88 &::before { 57 overflow: hidden;
89 display: none; 58 color: var(--page--item-prefix--fg);
90 } 59 }
91 } 60 }
92 61
93 hr { 62 hr {
94 margin-left: 0; 63 margin-left: -1 * $page--item-prefix--width;
95 } 64 }
96 65
97 .c-page-header { 66 .c-page-header {
98 margin-left: 0; 67 margin-left: -1 * $page--item-prefix--width;
99 padding-left: 0; 68 padding-left: $page--item-prefix--width;
69
70 &::after {
71 margin-left: -1 * $page--item-prefix--width;
72 }
73 }
100 74
101 &::after { 75 @media (max-width: map-get($breakpoints, 'sm')) {
102 margin-left: 0; 76 &__content {
103 } 77 padding-left: 0;
78 }
79
80 h1,
81 h2,
82 h3,
83 .c-refs__item,
84 pre {
85 margin-left: 0;
86 padding-left: 0;
87
88 &::before {
89 display: none;
90 }
91 }
92
93 hr {
94 margin-left: 0;
95 }
96
97 .c-page-header {
98 margin-left: 0;
99 padding-left: 0;
100
101 &::after {
102 margin-left: 0;
103 }
104 }
104 } 105 }
105 }
106} 106}
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 @@
1@import "vars"; 1@import 'vars';
2@import "functions"; 2@import 'functions';
3@import "basics"; 3@import 'basics';
4 4
5@import "components/refs"; 5@import 'components/refs';
6@import "components/nav"; 6@import 'components/nav';
7@import "components/page-header"; 7@import 'components/page-header';
8 8
9@import "layouts/container"; 9@import 'layouts/container';
10 10
11@import "scopes/page"; 11@import 'scopes/page';
12 12
13@import "utils"; 13@import 'utils';
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-26 04:34:22 +0000