Merge pull request #44 from welpo/style/links-metadata-rehaul

💄 style: coloured links in paragraph; meta changes
welpo · Feb 18, 2023 · c05b9b8 · c05b9b8
2 parents 83e211a + 4390b7b
commit c05b9b8
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 21 deletions.
diff --git a/sass/main.scss b/sass/main.scss
@@ -92,12 +92,12 @@ html {
   color: var(--text-color);
   line-height: 1.6em;
 }
+
 body {
   margin: 0;
   padding: 0;
-align-items:center;
-justify-content:center;
 }
+
 .content {
   max-width: var(--max-layout-width);
   margin: 0 auto;
@@ -176,6 +176,7 @@ p {
   font-family: 'Source Serif Pro', serif;
   margin-top: 0.4rem;
   margin-bottom: 2.3vmin;
+  line-height: 2rem;
   font-size: 1em;
 }
 

diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss
@@ -77,6 +77,13 @@ header {
   padding-bottom: 1vmin;
 }
 
+.meta a {
+  color: var(--meta-color);
+  text-decoration-color: none;
+  font-weight: inherit;
+  text-decoration: none;
+}
+
 .card-meta {
   color: var(--meta-color);
 }

diff --git a/sass/parts/_misc.scss b/sass/parts/_misc.scss
@@ -37,6 +37,10 @@
   color: var(--hover-color);
 }
 
+.nav.tags {
+  display: inline-block;
+}
+
 p {
   line-height: 1.5;
 }
@@ -60,6 +64,12 @@ a {
   font-weight: 580;
 }
 
+p a {
+  color: var(--accent-color);
+  text-decoration: inherit;
+  font-weight: inherit;
+}
+
 a:hover {
   background-color: var(--primary-color);
   color: var(--hover-color);

diff --git a/templates/macros/macros.html b/templates/macros/macros.html
@@ -86,36 +86,33 @@
                 {{ page.title }}
             </div>
             <div class="meta">
-                {% if page.date %}
-                Posted on {{ page.date | date(format=config.extra.timeformat) }}
-                •
-                {% endif %}
-                <span> {{ page.reading_time }} minute read</span>
                 {% if page.draft %}
                 <span class="draft-label">DRAFT</span>
                 {% endif %}
 
+                {% if page.date %}
+                {{ page.date | date(format=config.extra.timeformat) }} •
+                {% endif %}
+
+                <span> {{ page.reading_time }} minute read{% if page.taxonomies and page.taxonomies.tags %}&nbsp;{%
+                    endif %}</span>
+
                 {% if page.taxonomies and page.taxonomies.tags %}
-                <div class="post-tags">
-                    <nav class="nav tags">
-                        {% for tag in page.taxonomies.tags %}
-                        <svg class="tags-item-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
-                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
-                            <line x1="7" y1="7" x2="7.01" y2="7"></line>
-                        </svg>
-                        <a href={{ get_taxonomy_url(kind='tags' , name=tag) | safe }}>{{ tag }}</a>&nbsp;
-                        {% endfor %}
-                    </nav>
-                </div>
+                <nav class="nav tags"> • Categories:
+                    {% for tag in page.taxonomies.tags %}
+                    <a href={{ get_taxonomy_url(kind='tags' , name=tag) | safe }}>{{ tag }}</a>{% if not loop.last %},
+                    {% endif %}
+                    {% endfor %}
+                </nav>
                 {% endif %}
+
             </div>
         </div>
 
         {% if page.extra.tldr %}
         <div class="tldr">
-            <strong>tl;dr:</strong>
-            {{ page.extra.tldr }}
+            <h3>TL;DR:</h3>
+            <p>{{ page.extra.tldr }}</p>
         </div>
         {% endif %}