summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2020-12-29 12:24:04 +0100
committerVolpeon <git@volpeon.ink>2020-12-29 12:24:04 +0100
commit381297c95c7446182e90e459cd0257a8fc86b4cf (patch)
tree5a330a18ea60d983bc6f05976295a316a8ad7a24 /assets/css
parentHandle blog entry categories (diff)
downloadvolpeon.ink-381297c95c7446182e90e459cd0257a8fc86b4cf.tar.gz
volpeon.ink-381297c95c7446182e90e459cd0257a8fc86b4cf.tar.bz2
volpeon.ink-381297c95c7446182e90e459cd0257a8fc86b4cf.zip
Improved CSS classes for page content, added proper ref list macro, build scripts load and watch Pandoc filters automatically
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_utils.scss4
-rw-r--r--assets/css/components/_page-header.scss12
-rw-r--r--assets/css/components/_page.scss80
-rw-r--r--assets/css/scopes/_page.scss107
-rw-r--r--assets/css/scopes/_refs.scss9
-rw-r--r--assets/css/style.scss2
6 files changed, 95 insertions, 119 deletions
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index e241d84..519a3a7 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -15,3 +15,7 @@
15 } 15 }
16 } 16 }
17} 17}
18
19.u-mt0 {
20 margin-top: 0;
21}
diff --git a/assets/css/components/_page-header.scss b/assets/css/components/_page-header.scss
index ee86daf..7cf2aa1 100644
--- a/assets/css/components/_page-header.scss
+++ b/assets/css/components/_page-header.scss
@@ -1,5 +1,7 @@
1.c-page-header { 1.c-page-header {
2 margin-bottom: $line-height * 2em; 2 margin-bottom: $line-height * 2em;
3 margin-left: -1 * $page--item-prefix--width;
4 padding-left: $page--item-prefix--width;
3 overflow: hidden; 5 overflow: hidden;
4 6
5 &::after { 7 &::after {
@@ -9,13 +11,19 @@
9 z-index: -10; 11 z-index: -10;
10 height: $line-height; 12 height: $line-height;
11 margin-top: px-to-em(2px); 13 margin-top: px-to-em(2px);
14 margin-left: -1 * $page--item-prefix--width;
12 padding-top: px-to-em(2px); 15 padding-top: px-to-em(2px);
13 border-top: 1px solid var(--fg-hi); 16 border-top: 1px solid var(--fg-hi);
14 color: var(--fg-hi); 17 color: var(--fg-hi);
15 line-height: $code-block--line-height; 18 line-height: $code-block--line-height;
16 } 19 }
17 20
18 > :first-child { 21 @media (max-width: map-get($breakpoints, 'sm')) {
19 margin-top: 0; 22 margin-left: 0;
23 padding-left: 0;
24
25 &::after {
26 margin-left: 0;
27 }
20 } 28 }
21} 29}
diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss
new file mode 100644
index 0000000..21969d7
--- /dev/null
+++ b/assets/css/components/_page.scss
@@ -0,0 +1,80 @@
1.c-page {
2 &__content {
3 padding-left: $page--item-prefix--width;
4
5 > :first-child {
6 margin-top: 0;
7 }
8 }
9
10 &__prefixed {
11 position: relative;
12 margin-left: -1 * $page--item-prefix--width;
13 padding-left: $page--item-prefix--width;
14
15 &::before {
16 display: inline-block;
17 position: absolute;
18 box-sizing: border-box;
19 width: $page--item-prefix--width;
20 margin-left: -1 * $page--item-prefix--width;
21 padding-right: $page--item-prefix--pad;
22 color: var(--page--item-prefix--fg);
23 font-weight: normal;
24 text-align: right;
25 }
26
27 &--h1 {
28 font-size: px-to-em($content--h1--font-size);
29
30 &::before {
31 content: '#';
32 font-size: px-to-em($font-size, $content--h1--font-size);
33 }
34 }
35
36 &--h2::before {
37 content: '##';
38 }
39
40 &--h3::before {
41 content: '###';
42 }
43
44 &--pre {
45 $scale-factor: $font-size / $code-block--font-size;
46
47 margin-top: $line-height * 1em;
48 // margin-left: calc(#{-1 * $page--item-prefix--width} * #{$scale-factor});
49 // padding-left: calc(#{$page--item-prefix--width} * #{$scale-factor});
50
51 &::before {
52 content: str-repeat('``\A', 40);
53 height: 100%;
54 overflow: hidden;
55 color: var(--page--item-prefix--fg);
56 // font-size: px-to-em($font-size, $code-block--font-size);
57 // line-height: $code-block--line-height / $scale-factor;
58 }
59 }
60
61 &--ref::before {
62 content: '->';
63 }
64 }
65
66 @media (max-width: map-get($breakpoints, 'sm')) {
67 &__content {
68 padding-left: 0;
69 }
70
71 &__prefixed {
72 margin-left: 0;
73 padding-left: 0;
74
75 &::before {
76 display: none;
77 }
78 }
79 }
80}
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss
index 6448d08..bf3df8d 100644
--- a/assets/css/scopes/_page.scss
+++ b/assets/css/scopes/_page.scss
@@ -1,70 +1,4 @@
1.s-page { 1.s-page {
2 &__content {
3 padding-left: $page--item-prefix--width;
4
5 > :first-child {
6 margin-top: 0;
7 }
8 }
9
10 h1,
11 h2,
12 h3,
13 .s-refs li,
14 pre {
15 position: relative;
16 margin-left: -1 * $page--item-prefix--width;
17 padding-left: $page--item-prefix--width;
18
19 &::before {
20 display: inline-block;
21 position: absolute;
22 box-sizing: border-box;
23 width: $page--item-prefix--width;
24 margin-left: -1 * $page--item-prefix--width;
25 padding-right: $page--item-prefix--pad;
26 color: var(--page--item-prefix--fg);
27 font-weight: normal;
28 text-align: right;
29 }
30 }
31
32 h1 {
33 font-size: px-to-em($content--h1--font-size);
34
35 &::before {
36 content: '#';
37 font-size: px-to-em($font-size, $content--h1--font-size);
38 }
39 }
40
41 h2::before {
42 content: '##';
43 }
44
45 h3::before {
46 content: '###';
47 }
48
49 .s-refs li::before {
50 content: '->';
51 }
52
53 pre {
54 margin-top: $line-height * 1em;
55
56 &::before {
57 content: str-repeat('``\A', 40);
58 height: 100%;
59 overflow: hidden;
60 color: var(--page--item-prefix--fg);
61 }
62 }
63
64 hr {
65 margin-left: -1 * $page--item-prefix--width;
66 }
67
68 :link { 2 :link {
69 color: var(--page--link--idle--fg); 3 color: var(--page--link--idle--fg);
70 } 4 }
@@ -80,45 +14,4 @@
80 color: var(--page--link--hover--fg); 14 color: var(--page--link--hover--fg);
81 } 15 }
82 } 16 }
83
84 .c-page-header {
85 margin-left: -1 * $page--item-prefix--width;
86 padding-left: $page--item-prefix--width;
87
88 &::after {
89 margin-left: -1 * $page--item-prefix--width;
90 }
91 }
92
93 @media (max-width: map-get($breakpoints, 'sm')) {
94 &__content {
95 padding-left: 0;
96 }
97
98 h1,
99 h2,
100 h3,
101 .s-refs li,
102 pre {
103 margin-left: 0;
104 padding-left: 0;
105
106 &::before {
107 display: none;
108 }
109 }
110
111 hr {
112 margin-left: 0;
113 }
114
115 .c-page-header {
116 margin-left: 0;
117 padding-left: 0;
118
119 &::after {
120 margin-left: 0;
121 }
122 }
123 }
124} 17}
diff --git a/assets/css/scopes/_refs.scss b/assets/css/scopes/_refs.scss
deleted file mode 100644
index 79434ff..0000000
--- a/assets/css/scopes/_refs.scss
+++ /dev/null
@@ -1,9 +0,0 @@
1.s-refs {
2 li {
3 padding-left: 0;
4
5 &::before {
6 display: none;
7 }
8 }
9}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 90c1bfc..7986bd9 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -5,11 +5,11 @@
5@import 'components/spacer'; 5@import 'components/spacer';
6@import 'components/hlist'; 6@import 'components/hlist';
7@import 'components/nav'; 7@import 'components/nav';
8@import 'components/page';
8@import 'components/page-header'; 9@import 'components/page-header';
9 10
10@import 'layouts/container'; 11@import 'layouts/container';
11 12
12@import 'scopes/refs';
13@import 'scopes/page'; 13@import 'scopes/page';
14 14
15@import 'utils'; 15@import 'utils';