summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-11-19 20:39:55 +0100
committerVolpeon <git@volpeon.ink>2021-11-19 20:39:55 +0100
commit670696ff6e7c91d6d92951d2da47d7d4c85ee1d3 (patch)
treedd018124053c3b29be66e7300b928b966459578b
parentAdded print style (diff)
downloadvolpeon.ink-670696ff6e7c91d6d92951d2da47d7d4c85ee1d3.tar.gz
volpeon.ink-670696ff6e7c91d6d92951d2da47d7d4c85ee1d3.tar.bz2
volpeon.ink-670696ff6e7c91d6d92951d2da47d7d4c85ee1d3.zip
Added text ellipsis to cards, added macro to use icons in content
-rw-r--r--assets/css/_utils.scss5
-rw-r--r--assets/css/components/_card.scss6
-rw-r--r--assets/css/objects/_icon.scss5
-rw-r--r--content/index.md3
-rw-r--r--filters/icons.lua11
-rw-r--r--templates/partials/grid_card.html10
6 files changed, 32 insertions, 8 deletions
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index 86a18cf..14d32a1 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -59,3 +59,8 @@
59@include utility('fs0') { 59@include utility('fs0') {
60 flex-shrink: 0; 60 flex-shrink: 0;
61} 61}
62
63@include utility('elp') {
64 overflow: hidden;
65 text-overflow: ellipsis;
66}
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 9a2455b..2e36d3e 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -92,8 +92,10 @@
92 } 92 }
93 93
94 @include element('block') { 94 @include element('block') {
95 flex: 0 0 auto; 95 flex: 0 0 auto;
96 padding: prop(--dims --pad-y) calc(.5 * #{prop(--dims --pad-x)}); 96 padding: prop(--dims --pad-y) calc(.5 * #{prop(--dims --pad-x)});
97 overflow: hidden;
98 text-overflow: ellipsis;
97 99
98 @include modifier('main') { 100 @include modifier('main') {
99 flex-shrink: 1; 101 flex-shrink: 1;
diff --git a/assets/css/objects/_icon.scss b/assets/css/objects/_icon.scss
index e708dd5..cbce5cf 100644
--- a/assets/css/objects/_icon.scss
+++ b/assets/css/objects/_icon.scss
@@ -6,5 +6,10 @@
6 stroke-width: 1.5px; 6 stroke-width: 1.5px;
7 stroke-linecap: round; 7 stroke-linecap: round;
8 stroke-linejoin: round; 8 stroke-linejoin: round;
9
10 @include modifier('inline') {
11 display: inline-block;
12 vertical-align: -.1em;
13 }
9 } 14 }
10} 15}
diff --git a/content/index.md b/content/index.md
index 75efead..be9e2c5 100644
--- a/content/index.md
+++ b/content/index.md
@@ -2,4 +2,5 @@
2title: Volpeon's Den 2title: Volpeon's Den
3--- 3---
4 4
5Hi, I'm Volpeon! I'm a software developer who creates vector art. 5Hi, I'm Volpeon! I'm a software developer with a very minor case of severe fox obsession.
6In my spare time I create vector art.
diff --git a/filters/icons.lua b/filters/icons.lua
new file mode 100644
index 0000000..3800e5d
--- /dev/null
+++ b/filters/icons.lua
@@ -0,0 +1,11 @@
1function Str(el)
2 local icon = el.text:match('^:(.*):$')
3
4 if icon then
5 return pandoc.RawInline('html',
6 '<svg class="o-icon o-icon--inline" width="1em" height="1em"><use href="/symbols.svg#' .. icon ..
7 '"></use></svg>')
8 end
9
10 return el
11end
diff --git a/templates/partials/grid_card.html b/templates/partials/grid_card.html
index 4b24711..449b25c 100644
--- a/templates/partials/grid_card.html
+++ b/templates/partials/grid_card.html
@@ -9,11 +9,11 @@
9 $endif$ 9 $endif$
10 <div class="c-card__block c-card__block--main"> 10 <div class="c-card__block c-card__block--main">
11 $if(it.subtitle)$ 11 $if(it.subtitle)$
12 <strong class="u-db">$it.title$</strong> 12 <strong class="u-db u-elp">$it.title$</strong>
13 <small class="u-db">$it.subtitle$</small> 13 <small class="u-db u-elp">$it.subtitle$</small>
14 $elseif(it.category)$ 14 $elseif(it.category)$
15 <small class="u-db">$it.category$</small> 15 <small class="u-db u-elp">$it.category$</small>
16 <strong class="u-db">$it.title$</strong> 16 <strong class="u-db u-elp">$it.title$</strong>
17 $elseif(it.date)$ 17 $elseif(it.date)$
18 <time datetime="$it.date.yyyy_mm_dd$"> 18 <time datetime="$it.date.yyyy_mm_dd$">
19 <small class="u-dn@sm-hi"> 19 <small class="u-dn@sm-hi">
@@ -23,7 +23,7 @@
23 $it.date.long$ 23 $it.date.long$
24 </small> 24 </small>
25 </time> 25 </time>
26 <strong class="u-db">$it.title$</strong> 26 <strong class="u-db u-elp">$it.title$</strong>
27 $else$ 27 $else$
28 $it.title$ 28 $it.title$
29 $endif$ 29 $endif$