summaryrefslogtreecommitdiffstats
path: root/assets/css/components
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/css/components
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/css/components')
-rw-r--r--assets/css/components/_nav.scss2
-rw-r--r--assets/css/components/_page.scss95
2 files changed, 60 insertions, 37 deletions
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}