summaryrefslogtreecommitdiffstats
path: root/assets
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-01-08 11:45:30 +0100
committerVolpeon <git@volpeon.ink>2021-01-08 11:45:30 +0100
commit8f373e6c6d3f9d322041ba4d949c1b0c39ae8ea0 (patch)
tree3e4bd8c26b65a073d4580bc9f0076caceb234ce8 /assets
parentOptimized CSS for code blocks (diff)
downloadvolpeon.ink-8f373e6c6d3f9d322041ba4d949c1b0c39ae8ea0.tar.gz
volpeon.ink-8f373e6c6d3f9d322041ba4d949c1b0c39ae8ea0.tar.bz2
volpeon.ink-8f373e6c6d3f9d322041ba4d949c1b0c39ae8ea0.zip
Added section link to the header in regular pages, improved template structure, improved CSS variable names, keep prefix for specific page items on mobile
Diffstat (limited to 'assets')
-rw-r--r--assets/css/_vars.scss9
-rw-r--r--assets/css/components/_nav.scss2
-rw-r--r--assets/css/components/_page.scss95
-rw-r--r--assets/css/layouts/_container.scss8
4 files changed, 70 insertions, 44 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 1c46660..77b59b9 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -10,13 +10,13 @@ $content--h1--font-size: $font-size + 1;
10$subcontent--indent: 4ch; 10$subcontent--indent: 4ch;
11 11
12$container--pad-h: 2rem; 12$container--pad-h: 2rem;
13$container--pad-h-sm: 1rem; 13$container--pad-h--sm: 1rem;
14$container--pad-v: $line-height * 2rem; 14$container--pad-v: $line-height * 2rem;
15$container--pad-v-sm: $line-height * 1rem; 15$container--pad-v--sm: $line-height * 1rem;
16 16
17$nav--font-size: $font-size - 1; 17$nav--font-size: $font-size - 1;
18$nav--item--spacing: 4ch; 18$nav--item--spacing: 4ch;
19$nav--item--spacing-sm: 3ch; 19$nav--item--spacing--sm: 3ch;
20$nav--item--pad-h: 1ch; 20$nav--item--pad-h: 1ch;
21$nav--item--pad-v: .9em; 21$nav--item--pad-v: .9em;
22 22
@@ -24,6 +24,9 @@ $page--item-prefix--max-chars: 3ch;
24$page--item-prefix--pad: 2ch; 24$page--item-prefix--pad: 2ch;
25$page--item-prefix--width: $page--item-prefix--max-chars + $page--item-prefix--pad; 25$page--item-prefix--width: $page--item-prefix--max-chars + $page--item-prefix--pad;
26 26
27$page--item-prefix--max-chars--sm: 2ch;
28$page--item-prefix--width--sm: $page--item-prefix--max-chars--sm + $page--item-prefix--pad;
29
27$breakpoints: ( 30$breakpoints: (
28 xs: 380px, 31 xs: 380px,
29 sm: 700px, 32 sm: 700px,
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 6d087ad..dc33d1e 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -50,7 +50,7 @@
50 50
51 @media (max-width: map-get($breakpoints, 'sm')) { 51 @media (max-width: map-get($breakpoints, 'sm')) {
52 &__item { 52 &__item {
53 margin-left: $nav--item--spacing-sm - $nav--item--pad-h; 53 margin-left: $nav--item--spacing--sm - $nav--item--pad-h;
54 } 54 }
55 } 55 }
56 56
diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss
index a55bcb4..435d696 100644
--- a/assets/css/components/_page.scss
+++ b/assets/css/components/_page.scss
@@ -1,34 +1,4 @@
1.c-page { 1.c-page {
2 &__header {
3 margin-bottom: $line-height * 1em;
4
5 &::after {
6 content: '--';
7 display: block;
8 margin-bottom: $line-height * -1em;
9 color: var(--fg-hi);
10 line-height: 2 * $line-height;
11 }
12
13 &__title {
14 margin-top: 0;
15 }
16
17 &__meta {
18 margin-top: 0;
19 color: var(--fg-hi);
20 font-weight: normal;
21 }
22 }
23
24 &__content {
25 padding-left: $page--item-prefix--width;
26
27 > :first-child {
28 margin-top: 0;
29 }
30 }
31
32 &__prefixed { 2 &__prefixed {
33 position: relative; 3 position: relative;
34 margin-left: -1 * $page--item-prefix--width; 4 margin-left: -1 * $page--item-prefix--width;
@@ -92,22 +62,75 @@
92 } 62 }
93 63
94 &--ref::before { 64 &--ref::before {
95 content: '->'; 65 content: '|>';
66 }
67
68 &--backref::before {
69 content: '<|';
96 } 70 }
97 } 71 }
98 72
99 @media (max-width: map-get($breakpoints, 'sm')) { 73 &__header {
100 &__content { 74 margin-bottom: $line-height * 1em;
101 padding-left: 0; 75
76 &__title {
77 margin-top: 0;
78 }
79
80 &__backlink__link {
81 &:link,
82 &:visited {
83 color: var(--fg-hi);
84
85 &:hover {
86 color: var(--link--hover--fg);
87 }
88 }
89 }
90
91 &__backlink + &__title {
92 margin-top: $line-height * 1em;
93 }
94
95 &__meta {
96 margin-top: 0;
97 color: var(--fg-hi);
98 font-weight: normal;
99 }
100 }
101
102 &__content {
103 padding-left: $page--item-prefix--width;
104
105 > :first-child {
106 margin-top: 0;
102 } 107 }
108 }
103 109
110 @media (max-width: map-get($breakpoints, 'sm')) {
104 &__prefixed { 111 &__prefixed {
105 margin-left: 0; 112 margin-left: 0;
106 padding-left: 0; 113 padding-left: $page--item-prefix--width--sm;
107 114
108 &::before { 115 &::before {
109 display: none; 116 width: $page--item-prefix--width--sm;
117 margin-left: -1 * $page--item-prefix--width--sm;
118 }
119
120 &--h1,
121 &--h2,
122 &--h3,
123 &--pre {
124 padding-left: 0;
125
126 &::before {
127 display: none;
128 }
110 } 129 }
111 } 130 }
131
132 &__content {
133 padding-left: 0;
134 }
112 } 135 }
113} 136}
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index f0544f7..e99c62f 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -14,12 +14,12 @@
14 } 14 }
15 15
16 @media (max-width: map-get($breakpoints, 'sm')) { 16 @media (max-width: map-get($breakpoints, 'sm')) {
17 padding-right: $container--pad-h-sm; 17 padding-right: $container--pad-h--sm;
18 padding-left: $container--pad-h-sm; 18 padding-left: $container--pad-h--sm;
19 19
20 &--pad-v { 20 &--pad-v {
21 padding-top: $container--pad-v-sm; 21 padding-top: $container--pad-v--sm;
22 padding-bottom: $container--pad-v-sm; 22 padding-bottom: $container--pad-v--sm;
23 } 23 }
24 } 24 }
25} 25}