feat: Improved tags; get rid of bootstrap icons and scanlines

- Tags now use horizontal unordered list and have dope hover effect (shoutout to https://libreivan.com)
- Get rid of Bootstrap Icons and Scanlines scss files, the former added extra ~90kb to the stylesheet which I think is bloat, one can use emojis for this, and the scanlines were replaced by much simpler code from https://aroace.space
- Replace fg09 with fg10; it just makes more sense
- Simplify anchor styling
- Update woodpecker.yml to work with Woodpecker 2.0

.woodpecker.yml

@@ -1,18 +1,5 @@
-clone:
+steps:
-  git:
-    image: fish
-    commands:
-      - cd ~/.exoci
-      - if test -d duckquill
-      -   cd duckquill
-      -   git pull
-      - else
-      -   git clone https://git.exozy.me/daudix/duckquill.git
-      - end
-
-pipeline:
   build:
     image: fish
     commands:
-      - cd ~/.exoci/duckquill
       - zola build --output-dir /srv/http/pages/duckquill --force

README.md

@@ -25,9 +25,6 @@ The main repo is https://git.exozy.me/daudix/duckquill, but since only exozy.me
 
 - [Jakub Steiner](https://jimmac.eu) for the [OS Component Website](https://jimmac.github.io/os-component-website), on top of which this whole thing is built
 - [Cassidy James](https://cassidyjames.com) for the [Mastodon-powered Comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon)
-- [Mehdi Merah](https://mehdi.cc) for the [CSS Scanlines](https://codepen.io/meduzen/pen/zxbwRV)
+- [Adobe Fonts](https://github.com/adobe-fonts) for the [Source Code Pro](https://adobe-fonts.github.io/source-code-pro/) font
-- [Bootstrap team](https://getbootstrap.com/docs/5.3/about/team/) for the [Bootstrap Icons](https://icons.getbootstrap.com)
-- [Adobe Fonts](https://github.com/adobe-fonts) for the [Source Code Pro](https://github.com/adobe-fonts/source-code-pro) font
 - [Rasmus](https://rsms.me) for the [Inter](https://rsms.me/inter/) font
-- dwb, ejm and jgs for the ASCII art
 - Everyone who supported me and said good stuff <3

config.toml

@@ -43,16 +43,13 @@ source_url = "https://git.exozy.me/daudix/duckquill"
 # ]
 
 [extra.nav]
-# Display RSS/Atom feed button in the nav
+# Display Atom/RSS feed button in the nav
 show_feed = true
-# Show icons next to links in the nav
+# Links used 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 = [
-  {url = "https://git.exozy.me/daudix/duckquill", name = "Repo", icon = "git"},
+  {url = "https://git.exozy.me/daudix/duckquill", name = "Repo"},
-  {url = "/demo", name = "Demo", icon = "car-front-fill"},
+  {url = "/demo", name = "Demo"},
-  {url = "/blog", name = "Blog", icon = "journal-bookmark-fill"},
+  {url = "/blog", name = "Blog"},
 ]
 
 [extra.footer]

content/_index.md

@@ -1,5 +1,4 @@
 +++
-insert_anchor_links = "right"
 +++
 
 {% crt() %}
@@ -21,7 +20,7 @@ Edit a bit of metadata and tweak some of the included graphics and have a blog u
 - For a very pleasant look, the colors are tinted with the primary color.
 - Proper favicon for modern browsers and Apple device icons.
 - Mastodon, Lemmy and other social media meta cards for easy sharing. Try [Share Preview](https://apps.gnome.org/SharePreview/) to test.
-- Local copy of the amazing [Inter](https://rsms.me/inter/) and [Source Code Pro](https://adobe-fonts.github.io/source-code-pro/) fonts, plus [Bootstrap Icons](https://icons.getbootstrap.com). No slowdowns pulling from external hosting.
+- Local copy of the amazing [Inter](https://rsms.me/inter/) and [Source Code Pro](https://adobe-fonts.github.io/source-code-pro/) fonts. No slowdowns pulling from external hosting.
 - Mobile friendly, with proper dark variant.
 - [Mastodon-powered comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon). Comment using any ActivityPub service by replying to Mastodon post.
 
@@ -159,9 +158,6 @@ The main repo is [git.exozy.me/daudix/duckquill](https://git.exozy.me/daudix/duc
 
 - [Jakub Steiner](https://jimmac.eu) for the [OS Component Website](https://jimmac.github.io/os-component-website), on top of which this whole thing is built
 - [Cassidy James](https://cassidyjames.com) for the [Mastodon-powered Comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon)
-- [Mehdi Merah](https://mehdi.cc) for the [CSS Scanlines](https://codepen.io/meduzen/pen/zxbwRV)
-- [Bootstrap team](https://getbootstrap.com/docs/5.3/about/team/) for the [Bootstrap Icons](https://icons.getbootstrap.com)
 - [Adobe Fonts](https://github.com/adobe-fonts) for the [Source Code Pro](https://adobe-fonts.github.io/source-code-pro/) font
 - [Rasmus](https://rsms.me) for the [Inter](https://rsms.me/inter/) font
-- dwb, ejm and jgs for the ASCII art
 - Everyone who supported me and said good stuff <3

sass/_gnome-hig.scss

@@ -1,3 +1,4 @@
+/* GNOME HIG Colors */
 :root {
   --blue1: rgb(153, 193, 241);
   --blue2: rgb(98, 160, 234);

sass/_main.scss

@@ -82,17 +82,13 @@ h6 {
   line-height: 1.25;
 
   .zola-anchor {
-    color: inherit;
+    display: none;
-
+    visibility: hidden;
-    .bi {
-      display: none;
-      visibility: hidden;
-      color: var(--fg50);
-    }
   }
 
-  &:hover .zola-anchor .bi {
+  &:hover .zola-anchor {
     display: inline-block;
+    text-decoration: none;
     visibility: visible;
   }
 }
@@ -138,10 +134,9 @@ a {
   cursor: pointer;
   font-weight: 600;
   text-decoration: none;
-  text-decoration: underline;
 
   &:hover {
-    text-decoration: underline wavy;
+    text-decoration: underline;
   }
 }
 
@@ -255,18 +250,19 @@ pre {
 }
 
 kbd {
+  background-color: var(--fg05);
+  border-radius: var(--rounded-corner-small);
+  box-shadow: inset 0 -2px 0 var(--fg10), 0 -1px 0 var(--fg10);
+  cursor: pointer;
   display: inline-block;
+  font-size: 0.8rem;
   line-height: normal;
   padding: 2px 6px;
-  border-radius: var(--rounded-corner-small);
-  background-color: var(--fg05);
-  box-shadow: inset 0 -2px 0 var(--fg09), 0 -1px 0 var(--fg09);
-  cursor: pointer;
 
   // small nice thingy, keys can be pressed!
   &:active {
-    background-color: var(--fg09);
+    background-color: var(--fg10);
-    box-shadow: inset 0 1px 0 var(--fg09);
+    box-shadow: inset 0 1px 0 var(--fg10);
     transform: translateY(2px);
   }
 }
@@ -401,11 +397,11 @@ img {
     background-color: transparent;
     color: var(--fg50);
     transition: var(--transition);
-    text-decoration: none;
 
     &:hover {
       background-color: var(--fg05);
       color: var(--primary-color);
+      text-decoration: none;
     }
   }
 
@@ -474,12 +470,11 @@ img {
   display: inline-block;
   font-size: 0.9rem;
   padding: 0.4rem 1rem;
-  text-decoration: none;
   transition: var(--transition);
 }
 
 .inline-button:hover {
-  background-color: var(--fg09);
+  background-color: var(--fg10);
   text-decoration: none;
 }
 
@@ -491,18 +486,38 @@ img {
   background: var(--crt-bg);
 
   pre {
-    text-shadow: var(--primary-color) 0 0 12px;
     color: var(--primary-color);
     padding: 1rem 1rem;
+    text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px;
     // unset some <pre> stuff
-    margin: unset;
     background-color: unset;
     box-shadow: unset;
+    margin: unset;
   }
+}
 
-  a {
+.scanlines {
-    text-decoration: underline;
+  position: relative;
-  }
+  overflow: hidden;
+}
+
+.scanlines::after {
+  display: block;
+  pointer-events: none;
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0.25),
+    rgba(0, 0, 0, 0.25) 1px,
+    transparent 3px,
+    transparent 4px
+  );
 }
 
 .cursor {
@@ -566,17 +581,43 @@ img {
   border: none;
 }
 
-.pill {
+.tags {
-  background-color: var(--fg05);
+  list-style: none;
+  padding: 0;
+  display: inline-block;
+
+  li {
+    display: inline-block;
+    margin: 0 0.2rem 0.4rem 0;
+  }
+}
+
+.tag {
   border-radius: 9999px;
   color: var(--fg-color);
   padding: 0.25rem 0.75rem;
-  text-decoration: none;
   transition: var(--transition);
+  background-color: var(--fg05);
 
   &:hover {
-    background-color: var(--fg09);
+    color: rgb(255, 255, 255);
-    color: var(--primary-color);
+    background-color: var(--purple3);
+    background-image: radial-gradient(at 0 0, var(--blue3) 0, transparent 50%),
+      radial-gradient(at 100% 100%, var(--red2) 0, transparent 50%);
     text-decoration: none;
   }
+
+  &::before {
+    content: "#";
+  }
+
+  @media (prefers-color-scheme: dark) {
+    &:hover {
+      color: rgba(0, 0, 0, 0.8);
+      background-color: var(--purple2);
+      background-image: radial-gradient(at 0 0, var(--blue2) 0, transparent 50%),
+        radial-gradient(at 100% 100%, var(--red1) 0, transparent 50%);
+      text-decoration: none;
+    }
+  }
 }

sass/_scanlines.scss

@@ -1,107 +0,0 @@
-/*! scanlines.scss | MIT License | https://codepen.io/meduzen/pen/zxbwRV */
-
-// REGULAR SCANLINES SETTINGS
-
-// width of 1 scanline (min.: 1px)
-$scan-width: 2px;
-
-// emulates a damage-your-eyes bad pre-2000 CRT screen ♥ (true, false)
-$scan-crt: true;
-
-// frames-per-second (should be > 1), only applies if $scan-crt: true;
-$scan-fps: 60;
-
-// scanline-color (rgba)
-$scan-color: rgba(black, 0.2);
-
-// set z-index on 8, like in ♥ 8-bits ♥, or…
-// set z-index on 2147483648 or more to enable scanlines on Chrome fullscreen (doesn't work in Firefox or IE);
-// $scan-z-index: 2147483648;
-
-// MOVING SCANLINE SETTINGS
-
-// moving scanline (true, false)
-$scan-moving-line: true;
-
-// opacity of the moving scanline
-$scan-opacity: 0.75;
-
-// MIXINS
-
-// apply CRT animation: @include scan-crt($scan-crt);
-@mixin scan-crt($scan-crt) {
-  @if $scan-crt == true {
-    animation: scanlines 1s steps($scan-fps) infinite;
-  } @else {
-    animation: none;
-  }
-  @media (prefers-reduced-motion) {
-    animation: none;
-  }
-}
-
-// apply CRT animation: @include scan-crt($scan-crt);
-@mixin scan-moving($scan-moving-line) {
-  @if $scan-moving-line == true {
-    animation: scanline 6s linear infinite;
-  } @else {
-    animation: none;
-  }
-  @media (prefers-reduced-motion) {
-    animation: none;
-  }
-}
-
-// CSS .scanlines CLASS
-.scanlines {
-  position: relative;
-  overflow: hidden; // only to animate the unique scanline
-
-  &:before,
-  &:after {
-    display: block;
-    pointer-events: none;
-    content: "";
-    position: absolute;
-  }
-
-  // unique scanline travelling on the screen
-  &:before {
-    // position: absolute;
-    // bottom: 100%;
-    width: 100%;
-    height: $scan-width * 1;
-    // z-index: $scan-z-index + 1;
-    background: $scan-color;
-    opacity: $scan-opacity;
-    // animation: scanline 6s linear infinite;
-    @include scan-moving($scan-moving-line);
-  }
-
-  // the scanlines, so!
-  &:after {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    // z-index: $scan-z-index;
-    background: linear-gradient(to bottom, transparent 50%, $scan-color 51%);
-    background-size: 100% $scan-width * 2;
-    @include scan-crt($scan-crt);
-  }
-}
-
-// ANIMATE UNIQUE SCANLINE
-@keyframes scanline {
-  0% {
-    transform: translate3d(0, 200000%, 0);
-    // bottom: 0%; // to have a continuous scanline move, use this line (here in 0% step) instead of transform and write, in &:before, { position: absolute; bottom: 100%; }
-  }
-}
-
-@keyframes scanlines {
-  0% {
-    background-position: 0 50%;
-    // bottom: 0%; // to have a continuous scanline move, use this line (here in 0% step) instead of transform and write, in &:before, { position: absolute; bottom: 100%; }
-  }
-}

sass/_variables.scss

@@ -32,7 +32,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
 
   // CUSTOM COLOR PALETTE
   --fg05: rgba(0, 0, 0, 0.05);
-  --fg09: rgba(0, 0, 0, 0.09);
+  --fg10: rgba(0, 0, 0, 0.1);
   --fg50: rgba(0, 0, 0, 0.5);
   --nav-bg: #{$nav-bg-l};
 
@@ -70,7 +70,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
 
     // CUSTOM COLOR PALETTE
     --fg05: rgba(255, 255, 255, 0.05);
-    --fg09: rgba(255, 255, 255, 0.09);
+    --fg10: rgba(255, 255, 255, 0.1);
     --fg50: rgba(255, 255, 255, 0.5);
     --nav-bg: #{$nav-bg-d};
 

sass/style.scss

@@ -9,14 +9,11 @@
  */
 
 @use "normalize";
-
 @use "variables";
 @use "gnome-hig";
 @use "fonts";
 @use "main";
 @use "comments";
-@use "scanlines";
-@use "bootstrap-icons";
 
 @import url("syntax-theme-dark.css") (prefers-color-scheme: dark);
 @import url("syntax-theme-light.css") (prefers-color-scheme: light);

templates/anchor-link.html

@@ -1 +0,0 @@
-<a class="zola-anchor" href="#{{ id }}" aria-label="Anchor link for: {{ id }}"><i class="bi bi-link-45deg"></i></a>

templates/blog.html

@@ -8,16 +8,16 @@
     <time datetime='{{ page.date | date(format='%+') }}' pubdate>
       {{- page.date | date(format=config.extra.date_format) -}}
     </time>
-    
     {%- if page.taxonomies %}
       {%- for name, taxon in page.taxonomies %}
-        •
+      <ul class="tags">
-        {%- for item in taxon %}
+        <span>•&nbsp;</span>
-          <a class="pill" href="{{ get_taxonomy_url(kind=name, name=item) }}">
+        {%-for item in taxon %}
-            <i class="bi bi-tag-fill"></i>
+        <li>
-            {{ item }}
+          <a class="tag" href="{{ get_taxonomy_url(kind=name, name=item) }}">{{ item }}</a>
-          </a>&nbsp;
+        </li>
         {%- endfor %}
+      </ul>
       {%- endfor %}
     {%- endif %}
   </small>

templates/blog_list.html

@@ -26,13 +26,14 @@
       </time>
       {%- if page.taxonomies %}
         {%- for name, taxon in page.taxonomies %}
-        •
+        <ul class="tags">
+          <span>•&nbsp;</span>
           {%-for item in taxon %}
-          <a class="pill" href="{{ get_taxonomy_url(kind=name, name=item) }}">
+          <li>
-            <i class="bi bi-tag-fill"></i>
+            <a class="tag" href="{{ get_taxonomy_url(kind=name, name=item) }}">{{ item }}</a>
-            {{ item }}
+          </li>
-          </a>&nbsp;
           {%- endfor %}
+        </ul>
         {%- endfor %}
       {%- endif %}
     </small>

templates/includes/nav.html

@@ -1,32 +1,15 @@
 <nav class="nav">
   <div class="nav-container">
-    <a href="{{ config.base_url }}">
+    <a href="{{ config.base_url }}">{{ config.title }}</a>
-      {% if config.extra.nav.icons %}
-        <i class="bi bi-house-fill"></i>
-      {% endif %}
-      {{ config.title }}
-    </a>
     <ul>
       {% for link in config.extra.nav.links %}
         <li>
-          <a href="{{ link.url }}">
+          <a href="{{ link.url }}">{{ link.name }}</a>
-            {% if config.extra.nav.icons %}
-              {% if link.icon %}
-                <i class="bi bi-{{ link.icon }}"></i>
-              {% endif %}
-            {% endif %}
-            {{ link.name }}
-          </a>
         </li>
       {% endfor %}
       {% if config.extra.nav.show_feed %}
         <li>
-          <a href="{{ config.base_url }}/atom.xml">
+          <a href="{{ config.base_url }}/atom.xml">Feed</a>
-            {% if config.extra.nav.icons %}
-              <i class="bi bi-rss-fill"></i>
-            {% endif %}
-            Feed
-          </a>
         </li>
       {% endif %}
     </ul>

templates/taxonomy_list.html

@@ -3,17 +3,14 @@
 {% block content %}
 <h1>Tags</h1>
 <small> {{ terms | length }} tags in total </small>
-<article>
+<br />
-  <br />
+<small>
-  <br />
+  <ul class="tags">
-  {% for tag in terms %}
+    {% for tag in terms %}
-  <small>
+    <li>
-    <a class="pill" href="{{ get_taxonomy_url(kind='tags', name=tag.name) }}">
+      <a class="tag" href="{{ get_taxonomy_url(kind='tags', name=tag.name) }}">{{ tag.name }}</a>
-      <i class="bi bi-tag-fill"></i>
+    </li>
-      {{ tag.name }}
+    {% endfor %}
-    </a>
+  </ul>
-    <br />
+</small>
-  </small>
-  {% endfor %}
-</article>
 {% endblock content %}

templates/taxonomy_single.html

@@ -20,13 +20,14 @@
     </time>
     {%- if page.taxonomies %}
       {%- for name, taxon in page.taxonomies %}
-        •
+      <ul class="tags">
-        {%- for item in taxon %}
+        <span>•&nbsp;</span>
-          <a class="pill" href="{{ get_taxonomy_url(kind=name, name=item) }}">
+        {%-for item in taxon %}
-            <i class="bi bi-tag-fill"></i>
+        <li>
-            {{ item }}
+          <a class="tag" href="{{ get_taxonomy_url(kind=name, name=item) }}">{{ item }}</a>
-          </a>&nbsp;
+        </li>
         {%- endfor %}
+      </ul>
       {%- endfor %}
     {%- endif %}
   </small>