summaryrefslogtreecommitdiffstats
path: root/assets/css/components
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/components
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/components')
-rw-r--r--assets/css/components/_page-header.scss12
-rw-r--r--assets/css/components/_page.scss80
2 files changed, 90 insertions, 2 deletions
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}