summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2020-12-25 13:22:37 +0100
committerVolpeon <git@volpeon.ink>2020-12-25 13:22:37 +0100
commite7d6404ab184a5f6a8645bd0ac90b3676b8c5efc (patch)
tree3d09f5793e666f27c888f536bbe54839974c4fbc /assets/css
parentVarious improvements: CSS classes, favicon, design (diff)
downloadvolpeon.ink-e7d6404ab184a5f6a8645bd0ac90b3676b8c5efc.tar.gz
volpeon.ink-e7d6404ab184a5f6a8645bd0ac90b3676b8c5efc.tar.bz2
volpeon.ink-e7d6404ab184a5f6a8645bd0ac90b3676b8c5efc.zip
Improved CSS definitions, more fine-grained content build script
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_basics.scss10
-rw-r--r--assets/css/_utils.scss20
-rw-r--r--assets/css/_vars.scss16
-rw-r--r--assets/css/components/_nav.scss70
-rw-r--r--assets/css/layouts/_container.scss30
-rw-r--r--assets/css/scopes/_page.scss76
6 files changed, 130 insertions, 92 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index dd394da..202117e 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -44,8 +44,10 @@ code {
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: 1em;
48 line-height: $code-block-line-height; 48 line-height: $code-block-line-height;
49 text-overflow: "";
50 overflow: hidden;
49 51
50 strong { 52 strong {
51 font-weight: normal; 53 font-weight: normal;
@@ -107,7 +109,7 @@ h3 {
107 109
108h1 { 110h1 {
109 text-transform: uppercase; 111 text-transform: uppercase;
110 font-size: px-to-em($heading-font-size); 112 font-size: 1em;
111 color: var(--heading-fg); 113 color: var(--heading-fg);
112} 114}
113 115
@@ -149,10 +151,6 @@ hr {
149 margin: ($line-height * 2rem) 0 ($line-height * 2rem); 151 margin: ($line-height * 2rem) 0 ($line-height * 2rem);
150 background-color: var(--bg-plus); 152 background-color: var(--bg-plus);
151 border: 0; 153 border: 0;
152
153 @media (max-width: $breakpoint-sm) {
154 margin-left: 0;
155 }
156} 154}
157 155
158blockquote { 156blockquote {
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index bf7e213..036a87e 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -1,15 +1,17 @@
1.u-hidden { 1.u-hidden {
2 display: none; 2 display: none;
3 3
4 &\@sm-down { 4 @each $name, $width in $breakpoints {
5 @media (max-width: $breakpoint-sm) { 5 &\@#{$name}-down {
6 display: none; 6 @media (max-width: $width) {
7 } 7 display: none;
8 }
8 } 9 }
9 10
10 &\@sm-up { 11 &\@#{$name}-up {
11 @media (min-width: $breakpoint-sm + 1) { 12 @media (min-width: $width + 1) {
12 display: none; 13 display: none;
13 } 14 }
14 } 15 }
16 }
15} 17}
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 4883605..1ed64a5 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -1,6 +1,7 @@
1$font-size: 17px; 1$font-size: 16px;
2$heading-font-size: $font-size + 1; 2$content-font-size: $font-size + 1;
3$code-block-font-size: $font-size; 3$content-h1-font-size: $content-font-size + 1;
4
4$line-height: 1.5; 5$line-height: 1.5;
5$code-block-line-height: 1.4; 6$code-block-line-height: 1.4;
6 7
@@ -12,7 +13,10 @@ $page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad;
12 13
13$subcontent-indent: 4ch; 14$subcontent-indent: 4ch;
14 15
15$breakpoint-sm: 700px; 16$breakpoints: (
17 xs: 380px,
18 sm: 700px,
19);
16 20
17:root { 21:root {
18 --gray0: hsl(270, 0%, 7%); 22 --gray0: hsl(270, 0%, 7%);
@@ -41,8 +45,8 @@ $breakpoint-sm: 700px;
41 45
42 --page-item-prefix-fg: var(--fg-minus); 46 --page-item-prefix-fg: var(--fg-minus);
43 47
44 --link-idle-fg: var(--fg-plus-2); //#90acf2; //var(--gray6); 48 --link-idle-fg: var(--fg-plus-2); //#90acf2;
45 --link-visited-fg: var(--fg-plus); //#bc9df2; //var(--gray5); 49 --link-visited-fg: var(--fg-plus); //#bc9df2;
46 --link-hover-bg: var(--fg-plus-2); 50 --link-hover-bg: var(--fg-plus-2);
47 --link-hover-fg: var(--bg-minus); 51 --link-hover-fg: var(--bg-minus);
48 52
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index d86a484..834b6a0 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -1,36 +1,56 @@
1.c-nav { 1.c-nav {
2 background-color: var(--nav-bg); 2 background-color: var(--nav-bg);
3 //border-bottom: 1px solid var(--bg-plus);
4 3
5 &__items { 4 &__items {
6 display: flex; 5 display: flex;
7 align-items: baseline; 6 align-items: baseline;
7 }
8
9 &__logo {
10 display: inline-block;
11 color: var(--nav-logo-fg);
12 text-decoration: none;
13
14 &:link,
15 &:visited {
16 &:hover {
17 background-color: transparent;
18 color: var(--nav-item-hover-fg);
19 font-weight: bold;
20 }
8 } 21 }
22 }
9 23
10 &__logo { 24 &__item {
11 display: inline-block; 25 display: inline-block;
12 color: var(--nav-logo-fg); 26 padding: 1rem 1ch calc(1rem - 2px);
13 text-decoration: none; 27 margin: 0 -1ch 0 3ch;
28 color: var(--nav-item-idle-fg);
29 text-decoration: none;
30 border-bottom: 2px solid transparent;
14 31
15 &:link:hover { 32 &:hover {
16 background-color: transparent; 33 background-color: transparent;
17 color: var(--nav-item-hover-fg); 34 color: var(--nav-item-hover-fg);
18 font-weight: bold; 35 font-weight: bold;
19 }
20 } 36 }
37 }
21 38
39 @media (max-width: map-get($breakpoints, "sm")) {
22 &__item { 40 &__item {
23 display: inline-block; 41 margin-left: 2ch;
24 padding: 1rem 1ch calc(1rem - 2px); 42 }
25 margin: 0 -1ch 0 3ch; 43 }
26 color: var(--nav-item-idle-fg); 44
27 text-decoration: none; 45 /*
28 border-bottom: 2px solid transparent; 46 @media (max-width: map-get($breakpoints, "xs")) {
29 47 &__logo {
30 &:hover { 48 display: none;
31 background-color: transparent; 49 }
32 color: var(--nav-item-hover-fg); 50
33 font-weight: bold; 51 &__logo + &__item {
52 margin-left: -1ch;
34 } 53 }
35 } 54 }
55 */
36} 56}
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index 9159f5a..b5dee3c 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: 2rem; 2 padding-left: 2rem;
3 padding-right: 2rem; 3 padding-right: 2rem;
4 4
5 &--narrow { 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: $line-height * 2rem; 12 padding-top: $line-height * 2rem;
13 padding-bottom: $line-height * 2rem; 13 padding-bottom: $line-height * 2rem;
14 } 14 }
15 15
16 @media (max-width: $breakpoint-sm) { 16 @media (max-width: map-get($breakpoints, "sm")) {
17 padding-left: 1rem; 17 padding-left: 1rem;
18 padding-right: 1rem; 18 padding-right: 1rem;
19 } 19 }
20} 20}
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss
index 4a97b79..21d49d0 100644
--- a/assets/css/scopes/_page.scss
+++ b/assets/css/scopes/_page.scss
@@ -1,8 +1,12 @@
1.s-page { 1.s-page {
2 padding-left: $page-item-prefix-width; 2 font-size: px-to-em($content-font-size);
3 3
4 > :first-child { 4 &__content {
5 margin-top: 0; 5 padding-left: $page-item-prefix-width;
6
7 > :first-child {
8 margin-top: 0;
9 }
6 } 10 }
7 11
8 h1, 12 h1,
@@ -22,25 +26,20 @@
22 padding-right: $page-item-prefix-pad; 26 padding-right: $page-item-prefix-pad;
23 width: $page-item-prefix-width; 27 width: $page-item-prefix-width;
24 color: var(--page-item-prefix-fg); 28 color: var(--page-item-prefix-fg);
25 font-size: 1rem;
26 font-weight: normal; 29 font-weight: normal;
27 text-align: right; 30 text-align: right;
28 } 31 }
32 }
29 33
30 @media (max-width: $breakpoint-sm) { 34 h1 {
31 margin-left: 0; 35 font-size: px-to-em($content-h1-font-size, $content-font-size);
32 padding-left: 0;
33 36
34 &::before { 37 &::before {
35 display: none; 38 content: "#";
36 } 39 font-size: px-to-em($content-font-size, $content-h1-font-size);
37 } 40 }
38 } 41 }
39 42
40 h1::before {
41 content: "#";
42 }
43
44 h2::before { 43 h2::before {
45 content: "##"; 44 content: "##";
46 } 45 }
@@ -53,12 +52,16 @@
53 content: "|>"; 52 content: "|>";
54 } 53 }
55 54
56 pre::before { 55 pre {
57 content: str-repeat("``\A", 40); 56 font-size: px-to-em($font-size, $content-font-size);
58 height: 100%; 57
59 color: var(--page-item-prefix-fg); 58 &::before {
60 overflow: hidden; 59 content: str-repeat("``\A", 40);
61 line-height: $code-block-line-height * ($code-block-font-size / $font-size); 60 height: 100%;
61 color: var(--page-item-prefix-fg);
62 overflow: hidden;
63 line-height: $code-block-line-height;
64 }
62 } 65 }
63 66
64 hr { 67 hr {
@@ -72,26 +75,37 @@
72 &::after { 75 &::after {
73 margin-left: -1 * $page-item-prefix-width; 76 margin-left: -1 * $page-item-prefix-width;
74 } 77 }
78 }
79
80 @media (max-width: map-get($breakpoints, "sm")) {
81 &__content {
82 padding-left: 0;
83 }
75 84
76 @media (max-width: $breakpoint-sm) { 85 h1,
86 h2,
87 h3,
88 .c-refs__item,
89 pre {
77 margin-left: 0; 90 margin-left: 0;
78 padding-left: 0; 91 padding-left: 0;
79 92
80 &::after { 93 &::before {
81 margin-left: 0; 94 display: none;
82 } 95 }
83 } 96 }
84 }
85
86 .c-nav {
87 margin-left: -1 * $page-item-prefix-width;
88 97
89 @media (max-width: $breakpoint-sm) { 98 hr {
90 margin-left: 0; 99 margin-left: 0;
91 } 100 }
92 }
93 101
94 @media (max-width: $breakpoint-sm) { 102 .c-page-header {
95 padding-left: 0; 103 margin-left: 0;
104 padding-left: 0;
105
106 &::after {
107 margin-left: 0;
108 }
109 }
96 } 110 }
97} 111}