summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_basics.scss19
-rw-r--r--assets/css/_vars.scss27
-rw-r--r--assets/css/components/_nav.scss34
-rw-r--r--assets/css/layouts/_container.scss20
-rw-r--r--assets/css/scopes/_page.scss4
-rw-r--r--assets/css/style.scss2
6 files changed, 78 insertions, 28 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 3adf64c..dd394da 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -33,17 +33,8 @@ html {
33} 33}
34 34
35body { 35body {
36 margin: 2em; 36 margin: 0;
37 padding: 0; 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} 38}
48 39
49code { 40code {
@@ -62,7 +53,7 @@ pre {
62} 53}
63 54
64strong { 55strong {
65 color: var(--fg-plus); 56 color: var(--fg-plus-2);
66 font-weight: bold; 57 font-weight: bold;
67} 58}
68 59
@@ -117,12 +108,12 @@ h3 {
117h1 { 108h1 {
118 text-transform: uppercase; 109 text-transform: uppercase;
119 font-size: px-to-em($heading-font-size); 110 font-size: px-to-em($heading-font-size);
120 color: var(--heading); 111 color: var(--heading-fg);
121} 112}
122 113
123h2 { 114h2 {
124 font-size: 1em; 115 font-size: 1em;
125 color: var(--heading); 116 color: var(--heading-fg);
126} 117}
127 118
128h3 { 119h3 {
@@ -138,7 +129,7 @@ p {
138:visited { 129:visited {
139 position: relative; 130 position: relative;
140 z-index: 1000; 131 z-index: 1000;
141 padding: 0.1em 0.3em; 132 padding: 0.2em 0.3em;
142 margin: 0 -0.3em; 133 margin: 0 -0.3em;
143 color: var(--link-idle-fg); 134 color: var(--link-idle-fg);
144 135
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index a29ad6d..4883605 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -4,6 +4,8 @@ $code-block-font-size: $font-size;
4$line-height: 1.5; 4$line-height: 1.5;
5$code-block-line-height: 1.4; 5$code-block-line-height: 1.4;
6 6
7$content-width: 75ch;
8
7$page-item-prefix-max-chars: 3ch; 9$page-item-prefix-max-chars: 3ch;
8$page-item-prefix-pad: 2ch; 10$page-item-prefix-pad: 2ch;
9$page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad; 11$page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad;
@@ -13,31 +15,40 @@ $subcontent-indent: 4ch;
13$breakpoint-sm: 700px; 15$breakpoint-sm: 700px;
14 16
15:root { 17:root {
16 --gray1: hsl(270, 0%, 9.7%); 18 --gray0: hsl(270, 0%, 7%);
19 --gray1: hsl(270, 0%, 10%);
17 --gray2: hsl(270, 1%, 29%); 20 --gray2: hsl(270, 1%, 29%);
18 --gray3: hsl(270, 2%, 54%); 21 --gray3: hsl(270, 2%, 54%);
19 --gray4: hsl(270, 2%, 73%); 22 --gray4: hsl(270, 2%, 73%);
20 --gray5: hsl(270, 2%, 83%); 23 --gray5: hsl(270, 2%, 83%);
21 --gray6: hsl(270, 2%, 100%); 24 --gray6: hsl(270, 2%, 100%);
22 25
26 --bg-minus: var(--gray0);
23 --bg: var(--gray1); 27 --bg: var(--gray1);
24 --bg-plus: var(--gray2); 28 --bg-plus: var(--gray2);
25 --fg-minus: var(--gray3); 29 --fg-minus: var(--gray3);
26 --fg: var(--gray4); 30 --fg: var(--gray4);
27 --fg-plus: var(--gray6); 31 --fg-plus: var(--gray5);
32 --fg-plus-2: var(--gray6);
33
34 --heading-fg: var(--fg-plus-2);
28 35
29 --select-bg: hsla(270, 2%, 100%, 0.996); 36 --select-bg: hsla(270, 2%, 100%, 0.996);
30 --select-fg: var(--gray1); 37 --select-fg: var(--bg-minus);
31 38
32 --code-fg: var(--fg-minus); 39 --code-fg: var(--fg-minus);
33 --code-block-fg: var(--fg-minus); 40 --code-block-fg: var(--fg-minus);
34 41
35 --page-item-prefix-fg: var(--fg-minus); 42 --page-item-prefix-fg: var(--fg-minus);
36 43
37 --link-idle-fg: var(--gray6); //#90acf2; //var(--gray6); 44 --link-idle-fg: var(--fg-plus-2); //#90acf2; //var(--gray6);
38 --link-visited-fg: var(--gray5); //#bc9df2; //var(--gray5); 45 --link-visited-fg: var(--fg-plus); //#bc9df2; //var(--gray5);
39 --link-hover-bg: var(--gray6); 46 --link-hover-bg: var(--fg-plus-2);
40 --link-hover-fg: var(--gray1); 47 --link-hover-fg: var(--bg-minus);
41 48
42 --heading: var(--fg-plus); 49 --nav-bg: var(--bg-minus);
50 --nav-logo-fg: var(--fg-minus);
51 --nav-item-idle-fg: var(--fg);
52 --nav-item-hover-fg: var(--fg-plus-2);
53 --nav-item-active-fg: var(--fg-plus-2);
43} 54}
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 1fc24f9..d86a484 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -1,14 +1,36 @@
1.c-nav { 1.c-nav {
2 margin-bottom: $line-height * 2rem; 2 background-color: var(--nav-bg);
3 //border-bottom: 1px solid var(--bg-plus);
3 4
4 &::before { 5 &__items {
5 content: "//\\"; 6 display: flex;
6 color: var(--page-item-prefix-fg); 7 align-items: baseline;
8 }
9
10 &__logo {
11 display: inline-block;
12 color: var(--nav-logo-fg);
13 text-decoration: none;
14
15 &:link:hover {
16 background-color: transparent;
17 color: var(--nav-item-hover-fg);
18 font-weight: bold;
19 }
7 } 20 }
8 21
9 &__item { 22 &__item {
10 margin-left: 2ch; 23 display: inline-block;
11 color: var(--fg); 24 padding: 1rem 1ch calc(1rem - 2px);
25 margin: 0 -1ch 0 3ch;
26 color: var(--nav-item-idle-fg);
12 text-decoration: none; 27 text-decoration: none;
28 border-bottom: 2px solid transparent;
29
30 &:hover {
31 background-color: transparent;
32 color: var(--nav-item-hover-fg);
33 font-weight: bold;
34 }
13 } 35 }
14} 36}
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
new file mode 100644
index 0000000..9159f5a
--- /dev/null
+++ b/assets/css/layouts/_container.scss
@@ -0,0 +1,20 @@
1.l-container {
2 padding-left: 2rem;
3 padding-right: 2rem;
4
5 &--narrow {
6 margin-left: auto;
7 margin-right: auto;
8 max-width: $content-width;
9 }
10
11 &--pad-v {
12 padding-top: $line-height * 2rem;
13 padding-bottom: $line-height * 2rem;
14 }
15
16 @media (max-width: $breakpoint-sm) {
17 padding-left: 1rem;
18 padding-right: 1rem;
19 }
20}
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss
index cf7673c..4a97b79 100644
--- a/assets/css/scopes/_page.scss
+++ b/assets/css/scopes/_page.scss
@@ -1,6 +1,10 @@
1.s-page { 1.s-page {
2 padding-left: $page-item-prefix-width; 2 padding-left: $page-item-prefix-width;
3 3
4 > :first-child {
5 margin-top: 0;
6 }
7
4 h1, 8 h1,
5 h2, 9 h2,
6 h3, 10 h3,
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 7383ac4..2ca4cd4 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -6,6 +6,8 @@
6@import "components/nav"; 6@import "components/nav";
7@import "components/page-header"; 7@import "components/page-header";
8 8
9@import "layouts/container";
10
9@import "scopes/page"; 11@import "scopes/page";
10 12
11@import "utils"; 13@import "utils";