feat: More glass-like navbar, support for author set in front matter, remove option to disable nav icons

config.toml

@@ -7,6 +7,7 @@ minify_html = true
 generate_feed = true
 feed_filename = "atom.xml"
 build_search_index = false
+author = "Duck Quack"
 
 taxonomies = [
   {name = "tags", feed = true},
@@ -45,8 +46,6 @@ source_url = "https://codeberg.org/daudix/duckquill"
 [extra.nav]
 # Display Atom/RSS feed button in the nav
 show_feed = true
-# Whether to use icons in the nav
-icons = true
 # Links used in the nav; any icon from https://icons.getbootstrap.com
 # can be used as the icon. The bi- prefix should not be added.
 links = [

content/blog/ipsum/index.md

@@ -1,4 +1,5 @@
 +++
+authors = ["John Ipsum"]
 title = "Ipsum"
 description = "Lorem ipsum dolor sit amet."
 date = 1970-01-02

content/blog/lorem/index.md

@@ -1,4 +1,5 @@
 +++
+authors = ["John Lorem"]
 title = "Lorem"
 description = "Lorem ipsum dolor sit amet."
 date = 1970-01-01

content/blog/the-quill-of-duck/index.md

@@ -1,4 +1,5 @@
 +++
+authors = ["Duck Quack"]
 title = "The Quill of Duck"
 description = "This is a Duckquill post example, this post has nothing but a bunch of text and random formatting, acting like a demo."
 date = 2023-08-31
@@ -7,7 +8,7 @@ tags = ["Demo", "Test"]
 [extra]
 toc = true
 disclaimer = """
-See [demo](/demo) for showcase of all Duckquill possibilities, this page is a demo of a post with title, publication date, tags, disclaimer, table of contents and comments.
+See [demo](@/demo/index.md) for showcase of all Duckquill possibilities, this page is a demo of a post with title, publication date, tags, disclaimer, table of contents and comments.
 """
 [extra.comments]
 id = ""

sass/_crt.scss

@@ -41,10 +41,10 @@
 
   @keyframes scanlines {
     from {
-      transform: translateY(0px);
+      transform: translateY(-8px);
     }
     to {
-      transform: translateY(-8px);
+      transform: translateY(0px);
     }
   }
 }

sass/_nav.scss

@@ -1,18 +1,19 @@
 #header {
-  -webkit-backdrop-filter: blur(24px);
-  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  backdrop-filter: saturate(180%) blur(20px);
   background-color: var(--nav-bg);
-  border-radius: 999px;
-  box-shadow: 0px 12px 24px -16px rgba(0, 0, 0, 0.5);
+  border-radius: 28px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0px 12px 24px -16px rgba(0, 0, 0, 0.5);
   margin: 1rem auto;
   position: sticky;
   top: 1rem;
   width: min(calc(var(--content-width) + 10rem), 90%);
   z-index: 1;
 
-  @media screen and (max-width: 630px) {
+  @media screen and (max-width: 480px) {
     & {
-      border-radius: 16px;
+      width: auto;
     }
   }
 
@@ -21,7 +22,7 @@
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
-    padding: 0.4rem;
+    padding: 0.5rem;
 
     @media screen and (max-width: 630px) {
       & {
@@ -29,6 +30,12 @@
       }
     }
 
+    @media screen and (max-width: 480px) {
+      #title {
+        margin: 0 0.2rem 0 0;
+      }
+    }
+
     ul {
       display: flex;
       flex-wrap: wrap;
@@ -47,13 +54,17 @@
       border-radius: 999px;
       color: var(--fg-muted-4);
       font-weight: 400;
-      padding: 0.4rem 1rem;
+      padding: 0.45rem 1rem;
       text-decoration: none;
       transition: var(--transition);
 
-      @media screen and (max-width: 630px) {
+      @media screen and (max-width: 480px) {
         & {
-          border-radius: var(--rounded-corner);
+          padding: 0.45rem 0.75rem;
+        }
+
+        span {
+          display: none;
         }
       }
 

sass/_variables.scss

@@ -11,14 +11,6 @@ $crt-bg: radial-gradient(
   color.scale($primary-color, $lightness: -90%)
 );
 
-$nav-bg-l: color.scale($bg-color-l, $alpha: -20%, $lightness: 50%);
-$nav-bg-d: color.scale(
-  $bg-color-d,
-  $alpha: -20%,
-  $lightness: 5%,
-  $saturation: -50%
-);
-
 $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
   0 2px 6px 2px color.scale($primary-color, $alpha: -95%),
   0 4px 24px 4px color.scale($primary-color, $alpha: -90%);
@@ -33,7 +25,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
   --fg-muted-3: rgba(0, 0, 0, 0.2);
   --fg-muted-4: rgba(0, 0, 0, 0.5);
   --fg-muted-5: rgba(0, 0, 0, 0.6);
-  --nav-bg: #{$nav-bg-l};
+  --nav-bg: rgba(242, 242, 242, 0.7);
   --orange-bg: rgba(255, 120, 0, 0.1);
   --orange-fg: rgb(255, 120, 0);
   --primary-color-alpha: #{$primary-color-alpha};
@@ -75,7 +67,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
     --fg-muted-3: rgba(255, 255, 255, 0.2);
     --fg-muted-4: rgba(255, 255, 255, 0.5);
     --fg-muted-5: rgba(255, 255, 255, 0.6);
-    --nav-bg: #{$nav-bg-d};
+    --nav-bg: rgba(25, 25, 25, 0.7);
     --orange-bg: rgba(255, 190, 111, 0.1);
     --orange-fg: rgb(255, 190, 111);
     --purple-bg: rgba(220, 138, 221, 0.1);

templates/blog.html

@@ -8,6 +8,10 @@
     <time datetime='{{ page.date | date(format='%+') }}' pubdate>
       {{- page.date | date(format=config.extra.date_format) -}}
     </time>
+    {%- if page.authors %}
+      <span>•</span>
+      <span>Author: {{ page.authors[0] }}</span>
+    {%- endif %}
     {%- if page.taxonomies %}
       {%- for name, taxon in page.taxonomies %}
       <span>•</span>

templates/blog_list.html

@@ -25,6 +25,10 @@
       <time datetime="{{ page.date | date(format='%+') }}" pubdate>
         {{- page.date | date(format=config.extra.date_format) -}}
       </time>
+      {%- if page.authors %}
+        <span>•</span>
+        <span>Author: {{ page.authors[0] }}</span>
+      {%- endif %}
       {%- if page.taxonomies %}
         {%- for name, taxon in page.taxonomies %}
         <span>•</span>

templates/includes/nav.html

@@ -1,30 +1,23 @@
 <header id="header">
   <nav>
-    <a href="{{ get_url(path='') }}">
-      {% if config.extra.nav.icons %}
-        <i class="bi bi-house"></i>
-      {% endif %}
-      {{ config.title }}
+    <a id="title" href="{{ get_url(path='') }}">
+      <i class="bi bi-house"></i>
+      <span>{{ config.title }}</span>
     </a>
     <ul>
       {% for link in config.extra.nav.links %}
       <li>
         <a href="{{ link.url | safe | replace(from='$BASE_URL', to=get_url(path='')) | safe }}">
-          {% if config.extra.nav.icons %}
-            {% if link.icon %}
-              <i class="bi bi-{{ link.icon }}"></i>
-            {% endif %}
-          {% endif %}
-          {{ link.name }}
+          <i class="bi bi-{{ link.icon }}"></i>
+          <span>{{ link.name }}</span>
         </a>
       </li>
-      {% endfor %} {% if config.extra.nav.show_feed %}
+      {% endfor %}
+      {% if config.extra.nav.show_feed %}
       <li>
         <a href="{{ get_url(path='') }}/{{ config.feed_filename }}">
-          {% if config.extra.nav.icons %}
-            <i class="bi bi-rss"></i>
-          {% endif %}
-          Feed
+          <i class="bi bi-rss"></i>
+          <span>Feed</span>
         </a>
       </li>
       {% endif %}