feat: Style improvements, use Source Code Pro for monospace, update Inter to 4.0, pill-like nav on desktop, color changes

2023-11-22 03:29:55 +03:00 · 2023-11-22 03:29:55 +03:00 · 9202b7fe92
commit 9202b7fe92
parent 0ce950d0b3
24 changed files with 194 additions and 108 deletions
--- a/README.md
+++ b/README.md
@ -27,7 +27,7 @@ The main repo is https://git.exozy.me/daudix/duckquill, but since only exozy.me
 - [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://github.com/adobe-fonts/source-code-pro) font
 - [Rasmus](https://rsms.me) for the [Inter](https://rsms.me/inter/) font
- [JetBrains](https://www.jetbrains.com) for the [JetBrains Mono](https://www.jetbrains.com/lp/mono/) font
 - dwb, ejm and jgs for the ASCII art
 - Everyone who supported me and said good stuff <3
--- a/content/_index.md
+++ b/content/_index.md
@ -17,11 +17,11 @@ jgs~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~

 Edit a bit of metadata and tweak some of the included graphics and have a blog up in minutes!

- Pretty, yet lightweight. No JavaScript are used.
+- Pretty, yet lightweight. No JavaScript is used.
 - 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 [JetBrains Mono](https://www.jetbrains.com/lp/mono/) 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, plus [Bootstrap Icons](https://icons.getbootstrap.com). 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.

@ -85,7 +85,7 @@ First, change the primary color in `config.toml`:

 ```toml
 [extra]
-primary_color = "#HEX_COLOR_CODE"
+primary_color = "COLOR_CODE"
 ```

 Then, add `custom.css` to additional stylesheets.
@ -102,17 +102,20 @@ Then, paste the following code inside `sass/custom.scss` (inside your site, not
 ```scss
@use "sass:color";

-$primary-color: #HEX_COLOR_CODE;
+$primary-color: COLOR_CODE;
 $primary-color-alpha: color.scale($primary-color, $alpha: -80%);

-$bg-color-l: color.mix($primary-color, rgb(250, 250, 250), 10%);
-$bg-color-d: color.mix($primary-color, rgb(11, 11, 11), 5%);
+$bg-color-l: color.scale($primary-color, $lightness: 80%);
+$bg-color-d: color.scale($primary-color, $lightness: -90%, $saturation: -50%);

 $crt-bg: radial-gradient(
  color.scale($primary-color, $lightness: -80%),
  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%);
@ -120,6 +123,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
 :root {
  --bg-color: #{$bg-color-l};
  --crt-bg: #{$crt-bg};
+  --nav-bg: #{$nav-bg-l};
  --primary-color-alpha: #{$primary-color-alpha};
  --primary-color: #{$primary-color};
  --glow: #{$glow};
@ -128,6 +132,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #{$bg-color-d};
+    --nav-bg: #{$nav-bg-d};
  }
 }
 ```
@ -156,7 +161,7 @@ The main repo is [git.exozy.me/daudix/duckquill](https://git.exozy.me/daudix/duc
 - [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
- [JetBrains](https://www.jetbrains.com) for the [JetBrains Mono](https://www.jetbrains.com/lp/mono/) font
 - dwb, ejm and jgs for the ASCII art
 - Everyone who supported me and said good stuff <3
--- a/content/blog/ipsum/index.md
+++ b/content/blog/ipsum/index.md
@ -0,0 +1,15 @@
+++
+title = "Ipsum"
+description = "Lorem ipsum dolor sit amet."
+date = 1970-01-02
+[taxonomies]
+tags = ["Lorem", "Ipsum"]
+[extra]
+toc = false
+++
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea.
+
+Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est.
+
+Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea.
--- a/content/blog/lorem/index.md
+++ b/content/blog/lorem/index.md
@ -0,0 +1,15 @@
+++
+title = "Lorem"
+description = "Lorem ipsum dolor sit amet."
+date = 1970-01-01
+[taxonomies]
+tags = ["Lorem", "Ipsum"]
+[extra]
+toc = false
+++
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea.
+
+Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est.
+
+Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea.
--- a/sass/_comments.scss
+++ b/sass/_comments.scss
@ -62,6 +62,7 @@ section#comments {
        font-size: 0.8rem;
        font-weight: normal;
        padding: 0.25rem 0.75rem;
+        transition: var(--transition);

        &:hover {
          opacity: 0.8;
--- a/sass/_fonts.scss
+++ b/sass/_fonts.scss
@ -1,23 +1,34 @@
@font-face {
-  font-family: "Inter";
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: oblique italic 0deg 10deg;
-  src: url("./fonts/inter.woff2?v=4.0") format("woff2");
-}
-
-@font-face {
-  font-family: "JetBrains Mono";
-  font-weight: 100 900;
-  font-display: swap;
+  font-family: "Inter Variable";
  font-style: normal;
-  src: url("./fonts/jetbrains-mono.woff2?v=2.304") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("./fonts/inter-variable.woff2?v=4.0") format("woff2"),
+    url("./fonts/inter-variable.ttf?v=4.0") format("truetype");
+}
+@font-face {
+  font-family: "Inter Variable";
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("./fonts/inter-variable-italic.woff2?v=4.0") format("woff2"),
+    url("./fonts/inter-variable-italic.ttf?v=4.0") format("truetype");
 }

@font-face {
-  font-family: "JetBrains Mono";
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: italic;
-  src: url("./fonts/jetbrains-mono-italic.woff2?v=2.304") format("woff2");
+  font-family: "Source Code VF";
+  font-style: normal;
+  font-weight: 200 900;
+  font-stretch: normal;
+  src: url("./fonts/source-code-vf-upright.woff2?v=1.026R") format("woff2"),
+    url("./fonts/source-code-vf-upright.ttf?v=1.026R") format("truetype");
+}
+
+@font-face {
+  font-family: "Source Code VF";
+  font-style: italic;
+  font-weight: 200 900;
+  font-stretch: normal;
+  src: url("./fonts/source-code-vf-italic.woff2?v=1.026R") format("woff2"),
+    url("./fonts/source-code-vf-italic.ttf?v=1.026R") format("truetype");
 }
--- a/sass/_main.scss
+++ b/sass/_main.scss
@ -9,6 +9,7 @@ html {
  scroll-behavior: smooth;
  scrollbar-color: var(--primary-color) transparent;
  accent-color: var(--primary-color);
+  overflow-wrap: break-word;
 }

 // smaller font size on mobile
@ -25,7 +26,7 @@ body {
 }

 body {
-  font-family: "Inter", sans-serif;
+  font-family: "Inter Variable", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg-color);
@ -58,7 +59,7 @@ body {

 // LAYOUT
 .container {
-  width: 80%;
+  width: 80vw;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--content-width);
@ -66,7 +67,7 @@ body {

@media only screen and (max-device-width: 480px) {
  .container {
-    width: 90%;
+    width: 90vw;
  }
 }

@ -99,7 +100,7 @@ h6 {
 h1 {
  letter-spacing: -0.08rem;
  font-weight: 900;
-  font-size: 2.4rem;
+  font-size: 3rem;

  a {
    font-weight: 900;
@ -112,17 +113,35 @@ h1 {
 }

 h2 {
-  font-size: 1.4rem;
+  font-size: 2.4rem;
+  letter-spacing: -0.04rem;
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
+h4 {
+  font-size: 1.25rem;
+}
+
+h5 {
+  font-size: 1rem;
+}
+
+h6 {
+  font-size: 0.75rem;
 }

 a {
-  font-weight: 600;
-  text-decoration: none;
  color: var(--primary-color);
  cursor: pointer;
+  font-weight: 600;
+  text-decoration: none;
+  text-decoration: underline;

  &:hover {
-    text-decoration: underline;
+    text-decoration: underline wavy;
  }
 }

@ -153,18 +172,16 @@ dl {
 }

 hr {
-  background-color: var(--primary-color);
-  height: 0.3rem;
-  margin: 3rem auto 4rem;
+  border: 0.125rem solid var(--fg05);
+  margin: 3rem auto;
  width: 40%;
-  border: 0;
 }

 blockquote {
  padding: 0 1rem;
  margin-left: 0;
  color: var(--fg50);
-  border-left: 0.3rem solid var(--primary-color);
+  border-left: 0.25rem solid var(--primary-color);

  > :first-child {
    margin-top: 0;
@ -185,34 +202,19 @@ abbr {
  text-decoration: underline dotted;
 }

-kbd {
-  display: inline-block;
-  line-height: normal;
-  font-family: "JetBrains Mono", monospace;
-  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);
-    box-shadow: inset 0 1px 0 var(--fg09);
-    transform: translateY(2px);
-  }
+// CODE
+pre,
+code {
+  font-family: "Source Code VF", monospace;
 }

-// CODE
-code {
-  font-family: "JetBrains Mono", monospace;
+code:not(pre code) {
  padding: 2px 6px;
  border-radius: var(--rounded-corner-small);
  background-color: var(--fg05);
  color: var(--red-fg);
 }

-// apply monospace font to everything inside the <pre>
 pre {
  line-height: normal; // unset line height
  padding: 1rem;
@ -222,17 +224,6 @@ pre {
  box-shadow: var(--shadow);
  overflow: auto;

-  & * {
-    font-family: "JetBrains Mono", monospace;
-  }
-
-  code {
-    background-color: unset;
-    border-radius: unset;
-    color: unset;
-    padding: unset;
-  }
-
  table td {
    padding: 0;
    border: none;
@ -263,6 +254,23 @@ pre {
  }
 }

+kbd {
+  display: inline-block;
+  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);
+    box-shadow: inset 0 1px 0 var(--fg09);
+    transform: translateY(2px);
+  }
+}
+
 mark {
  padding: 2px 6px;
  border-radius: var(--rounded-corner-small);
@ -293,13 +301,8 @@ details {
 // TABLES
 table {
  display: block;
+  overflow-x: auto;
  border-collapse: collapse;
-  border-spacing: 0;
-  max-width: 100vw;
-  overflow: auto;
-  word-break: normal;
-  word-break: keep-all; // for Firefox to horizontally scroll wider tables.
-  -webkit-overflow-scrolling: touch;

  th {
    font-weight: bold;
@ -360,12 +363,12 @@ img {
 // NAVBAR
 .nav {
  overflow: auto;
-  width: 80%;
+  width: 80vw;
  max-width: var(--content-width);
  margin: 1rem auto;
-  box-shadow: var(--shadow);
+  box-shadow: 0px 12px 24px -16px rgba(0, 0, 0, 0.5);
  border-radius: var(--rounded-corner-big);
-  background-color: var(--fg05);
+  background-color: var(--nav-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  position: sticky;
@ -400,8 +403,7 @@ img {
    transition: var(--transition);
    text-decoration: none;

-    &:hover,
-    &:focus {
+    &:hover {
      background-color: var(--fg05);
      color: var(--primary-color);
    }
@ -409,13 +411,15 @@ img {

  @media only screen and (max-device-width: 480px) {
    & {
-      width: 90%;
+      width: 90vw;
      position: static;
    }
  }

  @media (min-width: 600px) {
    & {
+      border-radius: 9999px;
+
      &-container {
        text-align: left;
      }
@ -425,6 +429,10 @@ img {
        position: absolute;
        right: 0;
      }
+
+      a {
+        border-radius: 9999px;
+      }
    }
  }
 }
@ -460,12 +468,19 @@ img {
 }

 .inline-button {
+  background-color: var(--fg05);
+  border-radius: var(--rounded-corner);
+  color: var(--fg-color);
  display: inline-block;
  font-size: 0.9rem;
  padding: 0.4rem 1rem;
-  border-radius: var(--rounded-corner);
-  background-color: var(--fg05);
-  color: var(--fg-color);
+  text-decoration: none;
+  transition: var(--transition);
+}
+
+.inline-button:hover {
+  background-color: var(--fg09);
+  text-decoration: none;
 }

 // CRT
@ -509,20 +524,22 @@ img {
 // STATEMENTS
 .statement-container {
  margin: 1rem 0 1rem;
-  padding: 1rem 1rem;
+  padding: 1rem 1rem 0.5rem 1rem;
  border-radius: var(--rounded-corner);
  box-shadow: var(--shadow);

-  h2 {
-    margin: 0 0 1rem;
-  }
-
-  p {
+  * {
    margin: 0;
  }

-  ul {
-    margin: 0;
+  p,
+  ul,
+  ol {
+    margin: 0.5rem 0 0.5rem;
+  }
+
+  .big {
+    font-size: 150%;
  }

  &.archive {
@ -548,3 +565,18 @@ img {
  height: min(90px, 12.367vw);
  border: none;
 }
+
+.pill {
+  background-color: var(--fg05);
+  border-radius: 9999px;
+  color: var(--fg-color);
+  padding: 0.25rem 0.75rem;
+  text-decoration: none;
+  transition: var(--transition);
+
+  &:hover {
+    background-color: var(--fg09);
+    color: var(--primary-color);
+    text-decoration: none;
+  }
+}
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@ -3,14 +3,17 @@
 $primary-color: #ff7800;
 $primary-color-alpha: color.scale($primary-color, $alpha: -80%);

-$bg-color-l: color.mix($primary-color, rgb(250, 250, 250), 10%);
-$bg-color-d: color.mix($primary-color, rgb(11, 11, 11), 5%);
+$bg-color-l: color.scale($primary-color, $lightness: 80%);
+$bg-color-d: color.scale($primary-color, $lightness: -90%, $saturation: -50%);

 $crt-bg: radial-gradient(
  color.scale($primary-color, $lightness: -80%),
  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%);
@ -20,7 +23,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
  --bg-color: #{$bg-color-l};
  --content-width: 720px;
  --crt-bg: #{$crt-bg};
-  --fg-color: var(--dark4);
+  --fg-color: rgba(0, 0, 0, 0.8);
  --primary-color-alpha: #{$primary-color-alpha};
  --primary-color: #{$primary-color};
  --rounded-corner-big: 1.2rem;
@ -31,6 +34,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
  --fg05: rgba(0, 0, 0, 0.05);
  --fg09: rgba(0, 0, 0, 0.09);
  --fg50: rgba(0, 0, 0, 0.5);
+  --nav-bg: #{$nav-bg-l};

  --orange-bg: rgba(255, 120, 0, 0.1);
  --orange-fg: rgb(255, 120, 0);
@ -50,6 +54,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
  --glow: #{$glow};

+  --transition-bezier: 350ms cubic-bezier(0.17, 0.89, 0.32, 1.28);
  --transition-long: 800ms;
  --transition-longer: 400ms;
  --transition: 200ms;
@ -61,12 +66,13 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),

    // GENERAL SETUP
    --bg-color: #{$bg-color-d};
-    --fg-color: var(--light2);
+    --fg-color: rgb(255, 255, 255);

    // CUSTOM COLOR PALETTE
    --fg05: rgba(255, 255, 255, 0.05);
    --fg09: rgba(255, 255, 255, 0.09);
    --fg50: rgba(255, 255, 255, 0.5);
+    --nav-bg: #{$nav-bg-d};

    --orange-bg: rgba(255, 190, 111, 0.1);
    --orange-fg: rgb(255, 190, 111);
--- a/static/fonts/inter-variable-italic.ttf
+++ b/static/fonts/inter-variable-italic.ttf
--- a/static/fonts/inter-variable-italic.woff2
+++ b/static/fonts/inter-variable-italic.woff2
--- a/static/fonts/inter-variable.ttf
+++ b/static/fonts/inter-variable.ttf
--- a/static/fonts/inter-variable.woff2
+++ b/static/fonts/inter-variable.woff2
--- a/static/fonts/inter.woff2
+++ b/static/fonts/inter.woff2
--- a/static/fonts/jetbrains-mono-italic.woff2
+++ b/static/fonts/jetbrains-mono-italic.woff2
--- a/static/fonts/jetbrains-mono.woff2
+++ b/static/fonts/jetbrains-mono.woff2
--- a/static/fonts/source-code-vf-italic.ttf
+++ b/static/fonts/source-code-vf-italic.ttf
--- a/static/fonts/source-code-vf-italic.woff2
+++ b/static/fonts/source-code-vf-italic.woff2
--- a/static/fonts/source-code-vf-upright.ttf
+++ b/static/fonts/source-code-vf-upright.ttf
--- a/static/fonts/source-code-vf-upright.woff2
+++ b/static/fonts/source-code-vf-upright.woff2
--- a/templates/404.html
+++ b/templates/404.html
@ -2,7 +2,7 @@

 {% block content %}
 <picture>
-  <source srcset="{{ get_url(path='404.png') }}" class="full pixels transparent no-hover" media="(prefers-reduced-motion: reduce)"></source> 
+  <source srcset="{{ get_url(path='404.png') }}" media="(prefers-reduced-motion: reduce)"></source> 
  <img srcset="{{ get_url(path='404.gif') }}" class="full pixels transparent no-hover">
 </picture>

--- a/templates/blog.html
+++ b/templates/blog.html
@ -13,7 +13,7 @@
      {%- for name, taxon in page.taxonomies %}
        •
        {%- for item in taxon %}
-          <a href="{{ get_taxonomy_url(kind=name, name=item) }}">
+          <a class="pill" href="{{ get_taxonomy_url(kind=name, name=item) }}">
            <i class="bi bi-tag-fill"></i>
            {{ item }}
          </a>&nbsp;
@ -25,21 +25,21 @@

 {% if page.extra.archive %}
  <div class="statement-container archive">
-    <h2>⚠ Archived</h2>
+    <strong class="big">⚠ Archived</strong>
    {{ page.extra.archive | markdown | safe }}
  </div>
 {% endif %}

 {% if page.extra.trigger %}
  <div class="statement-container trigger">
-    <h2>⚠ Trigger Warning</h2>
+    <strong class="big">⚠ Trigger Warning</strong>
    {{ page.extra.trigger | markdown | safe }}
  </div>
 {% endif %}

 {% if page.extra.disclaimer %}
  <div class="statement-container disclaimer">
-    <h2>⚠ Disclaimer(s)</h2>
+    <strong class="big">⚠ Disclaimer(s)</strong>
    {{ page.extra.disclaimer | markdown | safe }}
  </div>
 {% endif %}
--- a/templates/blog_list.html
+++ b/templates/blog_list.html
@ -13,9 +13,9 @@

 {% for page in section.pages %}
 <article>
-  <h2>
+  <h3>
    <a class="link-page" href="{{ page.permalink | safe }}">{{ page.title }}</a>
-  </h2>
+  </h3>
  {%- if page.description %}
    <p>{{ page.description }}</p>
  {%- endif %}
@ -28,7 +28,7 @@
        {%- for name, taxon in page.taxonomies %}
        •
          {%-for item in taxon %}
-          <a href="{{ get_taxonomy_url(kind=name, name=item) }}">
+          <a class="pill" href="{{ get_taxonomy_url(kind=name, name=item) }}">
            <i class="bi bi-tag-fill"></i>
            {{ item }}
          </a>&nbsp;
@ -38,5 +38,6 @@
    </small>
  {%- endif %}
 </article>
+<hr>
 {% endfor %}
 {% endblock content %}
--- a/templates/taxonomy_list.html
+++ b/templates/taxonomy_list.html
@ -8,7 +8,7 @@
  <br />
  {% for tag in terms %}
  <small>
-    <a href="{{ get_taxonomy_url(kind='tags', name=tag.name) }}">
+    <a class="pill" href="{{ get_taxonomy_url(kind='tags', name=tag.name) }}">
      <i class="bi bi-tag-fill"></i>
      {{ tag.name }}
    </a>
--- a/templates/taxonomy_single.html
+++ b/templates/taxonomy_single.html
@ -9,11 +9,11 @@
 </small>
 <article>
  {% for page in term.pages %}
-  <h2>
+  <h3>
    <a class="link-page" href="{{ page.permalink | safe }}">
      {{ page.title }}
    </a>
-  </h2>
+  </h3>
  <small>
    <time datetime='{{ page.date | date(format='%+') }}' pubdate>
      {{- page.date | date(format=config.extra.date_format) -}}
@ -22,7 +22,7 @@
      {%- for name, taxon in page.taxonomies %}
        •
        {%- for item in taxon %}
-          <a href="{{ get_taxonomy_url(kind=name, name=item) }}">
+          <a class="pill" href="{{ get_taxonomy_url(kind=name, name=item) }}">
            <i class="bi bi-tag-fill"></i>
            {{ item }}
          </a>&nbsp;