summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2020-12-28 18:23:37 +0100
committerVolpeon <git@volpeon.ink>2020-12-28 18:23:37 +0100
commit598b5e44aa2f949ac470a46a9c850d62211cec42 (patch)
tree33308c365aff0f4b129d6d73d9c4521d870cfbe7
parentVarious small fixes, exclude raw ASCII fox from output (diff)
downloadvolpeon.ink-598b5e44aa2f949ac470a46a9c850d62211cec42.tar.gz
volpeon.ink-598b5e44aa2f949ac470a46a9c850d62211cec42.tar.bz2
volpeon.ink-598b5e44aa2f949ac470a46a9c850d62211cec42.zip
Improved CSS vars and scopes
-rw-r--r--assets/css/_basics.scss12
-rw-r--r--assets/css/_vars.scss54
-rw-r--r--assets/css/components/_page-header.scss4
-rw-r--r--assets/css/components/_refs.scss7
-rw-r--r--assets/css/scopes/_page.scss22
-rw-r--r--assets/css/scopes/_refs.scss9
-rw-r--r--assets/css/style.scss2
-rw-r--r--content/index.md12
-rw-r--r--filters/links_to_refs.lua3
-rwxr-xr-xscripts/build_content.sh1
-rw-r--r--templates/pagelistByYear.html4
11 files changed, 79 insertions, 51 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 560ec94..a8ed013 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -55,7 +55,7 @@ pre {
55} 55}
56 56
57strong { 57strong {
58 color: var(--fg-plus-2); 58 color: var(--fg-lo);
59 font-weight: bold; 59 font-weight: bold;
60} 60}
61 61
@@ -75,7 +75,7 @@ li {
75 position: absolute; 75 position: absolute;
76 width: $subcontent--indent; 76 width: $subcontent--indent;
77 margin-left: -1 * $subcontent--indent; 77 margin-left: -1 * $subcontent--indent;
78 color: var(--fg-minus); 78 color: var(--fg-hi);
79 } 79 }
80} 80}
81 81
@@ -142,20 +142,16 @@ p {
142 } 142 }
143} 143}
144 144
145:visited {
146 color: var(--link--visited--fg);
147}
148
149hr { 145hr {
150 height: 1px; 146 height: 1px;
151 margin: ($line-height * 2em) 0 ($line-height * 2em); 147 margin: ($line-height * 2em) 0 ($line-height * 2em);
152 border: 0; 148 border: 0;
153 background-color: var(--bg-plus); 149 background-color: var(--obj);
154} 150}
155 151
156blockquote { 152blockquote {
157 position: relative; 153 position: relative;
158 margin: ($line-height * 1em) 0 0; 154 margin: ($line-height * 1em) 0 0;
159 padding-left: calc(#{$subcontent--indent} - 2px); 155 padding-left: calc(#{$subcontent--indent} - 2px);
160 border-left: 2px solid var(--bg-plus); 156 border-left: 2px solid var(--obj);
161} 157}
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 9cd4b24..2242f09 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -34,35 +34,45 @@ $breakpoints: (
34 --gray2: hsl(270, 1%, 29%); 34 --gray2: hsl(270, 1%, 29%);
35 --gray3: hsl(270, 2%, 54%); 35 --gray3: hsl(270, 2%, 54%);
36 --gray4: hsl(270, 2%, 73%); 36 --gray4: hsl(270, 2%, 73%);
37 --gray5: hsl(270, 2%, 83%); 37 --gray5: hsl(270, 2%, 86%);
38 --gray6: hsl(270, 2%, 100%); 38 --gray5: hsl(270, 2%, 100%);
39 39
40 --bg-minus: var(--gray0); 40 //
41 --bg: var(--gray1);
42 --bg-plus: var(--gray2);
43 --fg-minus: var(--gray3);
44 --fg: var(--gray4);
45 --fg-plus: var(--gray5);
46 --fg-plus-2: var(--gray6);
47 41
48 --heading--fg: var(--fg-plus-2); 42 --bg-hi: var(--gray0); // Lighter background
43 --bg: var(--gray1); // Background
44
45 --obj: var(--gray2);
46
47 --fg-hi: var(--gray3); // Faint text
48 --fg: var(--gray4); // Text
49 --fg-lo: var(--gray5); // Strong text
50
51 //
52
53 --heading--fg: var(--fg-lo);
49 54
50 --select--bg: hsla(270, 2%, 100%, .996); 55 --select--bg: hsla(270, 2%, 100%, .996);
51 --select--fg: var(--bg-minus); 56 --select--fg: var(--bg-hi);
52 57
53 --code--fg: var(--fg-minus); 58 --code--fg: var(--fg-hi);
54 --code-block--fg: var(--fg-minus);
55 59
56 --page--item-prefix--fg: var(--fg-minus); 60 --code-block--fg: var(--fg-hi);
57 61
58 --link--idle--fg: var(--fg-plus-2); //#90acf2; 62 --link--idle--fg: var(--fg-lo);
59 --link--visited--fg: var(--fg-plus); //#bc9df2; 63 --link--hover--bg: var(--link--idle--fg);
60 --link--hover--bg: var(--fg-plus-2); 64 --link--hover--fg: #000;
61 --link--hover--fg: var(--bg-minus);
62 65
63 --nav--bg: var(--bg-minus); 66 --nav--bg: var(--bg-hi);
64 --nav--logo--fg: var(--fg-minus); 67 --nav--logo--fg: var(--fg-hi);
65 --nav--item--idle--fg: var(--fg); 68 --nav--item--idle--fg: var(--fg);
66 --nav--item--hover--fg: var(--fg-plus-2); 69 --nav--item--hover--fg: var(--fg-lo);
67 --nav--item--active--fg: var(--fg-plus-2); 70 --nav--item--active--fg: var(--fg-lo);
71
72 --page--item-prefix--fg: var(--fg-hi);
73
74 --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866;
75 --page--link--visited--fg: var(--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458;
76 --page--link--hover--bg: var(--page--link--idle--fg);
77 --page--link--hover--fg: #000;
68} 78}
diff --git a/assets/css/components/_page-header.scss b/assets/css/components/_page-header.scss
index e15be1c..ee86daf 100644
--- a/assets/css/components/_page-header.scss
+++ b/assets/css/components/_page-header.scss
@@ -10,8 +10,8 @@
10 height: $line-height; 10 height: $line-height;
11 margin-top: px-to-em(2px); 11 margin-top: px-to-em(2px);
12 padding-top: px-to-em(2px); 12 padding-top: px-to-em(2px);
13 border-top: 1px solid var(--fg-minus); 13 border-top: 1px solid var(--fg-hi);
14 color: var(--fg-minus); 14 color: var(--fg-hi);
15 line-height: $code-block--line-height; 15 line-height: $code-block--line-height;
16 } 16 }
17 17
diff --git a/assets/css/components/_refs.scss b/assets/css/components/_refs.scss
deleted file mode 100644
index 51524bd..0000000
--- a/assets/css/components/_refs.scss
+++ /dev/null
@@ -1,7 +0,0 @@
1.c-refs__item {
2 padding-left: 0;
3
4 &::before {
5 display: none;
6 }
7}
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss
index ba61b5f..6448d08 100644
--- a/assets/css/scopes/_page.scss
+++ b/assets/css/scopes/_page.scss
@@ -10,7 +10,7 @@
10 h1, 10 h1,
11 h2, 11 h2,
12 h3, 12 h3,
13 .c-refs__item, 13 .s-refs li,
14 pre { 14 pre {
15 position: relative; 15 position: relative;
16 margin-left: -1 * $page--item-prefix--width; 16 margin-left: -1 * $page--item-prefix--width;
@@ -46,7 +46,7 @@
46 content: '###'; 46 content: '###';
47 } 47 }
48 48
49 .c-refs__item::before { 49 .s-refs li::before {
50 content: '->'; 50 content: '->';
51 } 51 }
52 52
@@ -65,6 +65,22 @@
65 margin-left: -1 * $page--item-prefix--width; 65 margin-left: -1 * $page--item-prefix--width;
66 } 66 }
67 67
68 :link {
69 color: var(--page--link--idle--fg);
70 }
71
72 :visited {
73 color: var(--page--link--visited--fg);
74 }
75
76 :link,
77 :visited {
78 &:hover {
79 background-color: var(--page--link--hover--bg);
80 color: var(--page--link--hover--fg);
81 }
82 }
83
68 .c-page-header { 84 .c-page-header {
69 margin-left: -1 * $page--item-prefix--width; 85 margin-left: -1 * $page--item-prefix--width;
70 padding-left: $page--item-prefix--width; 86 padding-left: $page--item-prefix--width;
@@ -82,7 +98,7 @@
82 h1, 98 h1,
83 h2, 99 h2,
84 h3, 100 h3,
85 .c-refs__item, 101 .s-refs li,
86 pre { 102 pre {
87 margin-left: 0; 103 margin-left: 0;
88 padding-left: 0; 104 padding-left: 0;
diff --git a/assets/css/scopes/_refs.scss b/assets/css/scopes/_refs.scss
new file mode 100644
index 0000000..79434ff
--- /dev/null
+++ b/assets/css/scopes/_refs.scss
@@ -0,0 +1,9 @@
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 0473689..8d9a87f 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -2,12 +2,12 @@
2@import 'functions'; 2@import 'functions';
3@import 'basics'; 3@import 'basics';
4 4
5@import 'components/refs';
6@import 'components/nav'; 5@import 'components/nav';
7@import 'components/page-header'; 6@import 'components/page-header';
8 7
9@import 'layouts/container'; 8@import 'layouts/container';
10 9
10@import 'scopes/refs';
11@import 'scopes/page'; 11@import 'scopes/page';
12 12
13@import 'utils'; 13@import 'utils';
diff --git a/content/index.md b/content/index.md
index dd058d8..f9111ef 100644
--- a/content/index.md
+++ b/content/index.md
@@ -4,13 +4,13 @@ title: Home
4 4
5# Volpeon's Den 5# Volpeon's Den
6 6
7Welcome to my website! I'm Volpeon and here's an [inline link](#). 7Welcome to my website! I'm Volpeon and here's an [inline link](#c).
8 8
9> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 9> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
10> dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 10> dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
11> clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 11> clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
12 12
13Welcome to my website! I'm Volpeon and here's an [inline link](#). 13Welcome to my website! I'm Volpeon and here's an [inline link](#d).
14 14
15## Subtitle 15## Subtitle
16 16
@@ -22,7 +22,7 @@ Welcome to my website! I'm Volpeon and here's an [inline link](#).
221. Lorem ipsum dolor sit amet 221. Lorem ipsum dolor sit amet
232. Another item 232. Another item
24 24
25<ul> 25::: { .s-refs }
26 <li class="c-refs__item"><a href="#">Lorem ipsum dolor sit amet</a></li> 26- [Lorem ipsum dolor sit amet](#a)
27 <li class="c-refs__item"><a href="#">Another item</a></li> 27- [Another item](#b)
28</ul> 28:::
diff --git a/filters/links_to_refs.lua b/filters/links_to_refs.lua
new file mode 100644
index 0000000..f19a0f9
--- /dev/null
+++ b/filters/links_to_refs.lua
@@ -0,0 +1,3 @@
1function Link (el)
2 return { pandoc.Span(el.content), pandoc.Note { pandoc.Plain(pandoc.Link(el.content, el.target, el.title)) } }
3end
diff --git a/scripts/build_content.sh b/scripts/build_content.sh
index e3b97ea..feb3c0d 100755
--- a/scripts/build_content.sh
+++ b/scripts/build_content.sh
@@ -137,6 +137,7 @@ handle () {
137 --metadata "is$section" \ 137 --metadata "is$section" \
138 --metadata-file metadata/metadata.yaml \ 138 --metadata-file metadata/metadata.yaml \
139 --metadata-file "$subpages_meta_file" 139 --metadata-file "$subpages_meta_file"
140 # --lua-filter "filters/add_refs.lua"
140 141
141 rm "$subpages_meta_file" 142 rm "$subpages_meta_file"
142 else 143 else
diff --git a/templates/pagelistByYear.html b/templates/pagelistByYear.html
index 8270530..758d45b 100644
--- a/templates/pagelistByYear.html
+++ b/templates/pagelistByYear.html
@@ -1,9 +1,9 @@
1$for(pages)$ 1$for(pages)$
2 $for(it.by_year/pairs)$ 2 $for(it.by_year/pairs)$
3 <h2>$it.key$</h2> 3 <h2>$it.key$</h2>
4 <ul class="c-refs"> 4 <ul class="s-refs">
5 $for(it.value)$ 5 $for(it.value)$
6 <li class="c-refs__item"> 6 <li>
7 <a href="$it.url_rel$">$it.date$ - $it.title$</a> 7 <a href="$it.url_rel$">$it.date$ - $it.title$</a>
8 </li> 8 </li>
9 $endfor$ 9 $endfor$