Added text ellipsis to cards, added macro to use icons in content

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 @@
 @include utility('fs0') {
     flex-shrink: 0;
 }
+
+@include utility('elp') {
+    overflow:      hidden;
+    text-overflow: ellipsis;
+}
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 @@
         }
 
         @include element('block') {
-            flex:    0 0 auto;
-            padding: prop(--dims --pad-y) calc(.5 * #{prop(--dims --pad-x)});
+            flex:          0 0 auto;
+            padding:       prop(--dims --pad-y) calc(.5 * #{prop(--dims --pad-x)});
+            overflow:      hidden;
+            text-overflow: ellipsis;
 
             @include modifier('main') {
                 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 @@
         stroke-width:    1.5px;
         stroke-linecap:  round;
         stroke-linejoin: round;
+
+        @include modifier('inline') {
+            display:        inline-block;
+            vertical-align: -.1em;
+        }
     }
 }
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 @@
 title: Volpeon's Den
 ---
 
-Hi, I'm Volpeon! I'm a software developer who creates vector art.
+Hi, I'm Volpeon! I'm a software developer with a very minor case of severe fox obsession.
+In 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 @@
+function Str(el)
+    local icon = el.text:match('^:(.*):$')
+
+    if icon then
+        return pandoc.RawInline('html',
+            '<svg class="o-icon o-icon--inline" width="1em" height="1em"><use href="/symbols.svg#' .. icon ..
+                '"></use></svg>')
+    end
+
+    return el
+end
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 @@
     $endif$
     <div class="c-card__block c-card__block--main">
         $if(it.subtitle)$
-            <strong class="u-db">$it.title$</strong>
-            <small class="u-db">$it.subtitle$</small>
+            <strong class="u-db u-elp">$it.title$</strong>
+            <small class="u-db u-elp">$it.subtitle$</small>
         $elseif(it.category)$
-            <small class="u-db">$it.category$</small>
-            <strong class="u-db">$it.title$</strong>
+            <small class="u-db u-elp">$it.category$</small>
+            <strong class="u-db u-elp">$it.title$</strong>
         $elseif(it.date)$
             <time datetime="$it.date.yyyy_mm_dd$">
                 <small class="u-dn@sm-hi">
@@ -23,7 +23,7 @@
                     $it.date.long$
                 </small>
             </time>
-            <strong class="u-db">$it.title$</strong>
+            <strong class="u-db u-elp">$it.title$</strong>
         $else$
             $it.title$
         $endif$