style: modularized stylesheets for button, card, pills

- better looking directional buttons
- consistent colors

static/button.css

@@ -0,0 +1,29 @@
+.btn {
+  text-decoration: none;
+  border-radius: 5px;
+  border: 1px solid;
+  color: var(--text-color-dark);
+  border-color: var(--border-color-light);
+  background-color: var(--bg-light);
+  padding: 0.25em 0.5em;
+  font-weight: bold;
+  font-size: var(--font-size-base);
+
+  &:hover {
+    color: var(--color-brand-blue-3);
+    border-color: var(--color-brand-blue-3);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .btn {
+    color: var(--text-color-light);
+    border-color: var(--border-color-dark);
+    background-color: var(--bg-dark);
+
+    &:hover {
+      color: var(--color-brand-complement);
+      border-color: var(--color-brand-complement);
+    }
+  }
+}

static/card.css

@@ -0,0 +1,170 @@
+.card_content {
+  & .invisible {
+    display: none;
+  }
+
+  & .emoji {
+    display: inline;
+    height: calc(1rem + 6px);
+    margin-bottom: -4px;
+  }
+
+  & .ellipsis::after {
+    content: "...";
+  }
+
+  & .body {
+    .hashtag:not(.pill),
+    .mention:not(.pill) {
+      color: var(--text-color-dark-faded);
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    & code {
+      font-size: var(--font-size-sm);
+      background: rgb(245, 242, 240);
+      padding: 0.25em 0.3em;
+      border-radius: 5px;
+      display: inline-block;
+      vertical-align: text-bottom;
+    }
+
+    & a:has(.link_card) {
+      text-decoration: none;
+    }
+
+    & .media,
+    & .link_card {
+      border: 1px solid rgba(34, 34, 34, 0.15);
+      border-radius: 5px;
+      box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.15);
+      max-width: 100%;
+      margin: 15px 0 1em;
+      object-fit: contain;
+      height: auto;
+      text-decoration: none;
+      text-wrap: balance;
+    }
+
+    & .media:hover,
+    & .link_card:hover {
+      color: var(--color-link);
+      text-decoration-color: var(--color-link);
+      border-color: var(--color-link);
+    }
+
+    & p {
+      margin-bottom: 1em;
+    }
+  }
+
+  & .heading {
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: 5px;
+    height: 20px;
+
+    & .author {
+      font-size: var(--font-size-lg);
+    }
+
+    & .right_menu {
+      font-size: var(--font-size-sm);
+      text-align: right;
+
+      & a,
+      & span {
+        line-height: 36px;
+      }
+
+      & a {
+        color: var(--text-color-dark-faded);
+        text-decoration: none;
+
+        &:hover {
+          color: var(--color-link);
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  & .link_card {
+    color: var(--text-color-dark-faded);
+    text-decoration: underline;
+    text-decoration-color: var(--text-color-light-faded);
+
+    & strong,
+    & small {
+      text-decoration-thickness: 1px;
+      display: block;
+    }
+
+    padding: 1rem;
+  }
+}
+
+article.card {
+  /* border-bottom: 1px solid;
+  border-color: var(--border-color-light);
+ */
+
+  & .bottom-menu {
+    padding: 1em 0;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .card_content {
+    & .action {
+      color: var(--color-brand-complement);
+    }
+
+    & .heading .right_menu a {
+      color: var(--text-color-light-faded);
+
+      &:hover {
+        color: var(--color-brand-complement);
+      }
+    }
+
+    & .body {
+      .hashtag:not(.pill),
+      .mention:not(.pill) {
+        color: var(--text-color-light-faded);
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      code {
+        background: rgb(45, 51, 59);
+        color: rgb(197, 209, 222);
+      }
+
+      & .media,
+      & .link_card {
+        border: 1px solid rgba(197, 209, 222, 0.15);
+        color: var(--text-color-light-faded);
+        background: var(--bg-dark);
+      }
+
+      & .media:hover,
+      & .link_card:hover {
+        color: var(--color-brand-complement);
+        text-decoration-color: var(--color-brand-complement);
+        border-color: var(--color-brand-complement);
+      }
+    }
+  }
+
+  /* article.card {
+    border-color: var(--border-color-dark);
+  } */
+}

static/pills.css

@@ -3,18 +3,18 @@
   & .pill {
     border-radius: 5px;
     border: 1px solid;
-    border-color: rgba(197, 209, 222, 0.25);
+    border-color: var(--border-color-light);
-    background-color: rgba(197, 209, 222, 0.15);
+    background-color: var(--bg-light);
     margin-bottom: 0.5em;
-    padding: 0.25em 1em;
+    padding: 0.25em 0.5em;
     display: inline-block;
     font-size: var(--font-size-sm);
     color: var(--text-color-dark-faded);
     text-decoration: none;
 
     &:hover {
-      color: var(--color-link);
+      color: var(--color-brand-blue-3);
-      border: 1px solid var(--color-link);
+      border: 1px solid var(--color-brand-blue-3);
     }
 
     & .pill-label {
@@ -32,8 +32,8 @@
     & .pill {
       color: var(--text-color-light-faded);
       border: 1px solid;
-      border-color: rgba(0, 0, 0, 0.25);
+      border-color: var(--border-color-dark);
-      background-color: rgba(0, 0, 0, 0.15);
+      background-color: var(--bg-dark);
       text-decoration: none;
 
       &:hover {
@@ -44,12 +44,24 @@
   }
 }
 
-.featured-tags .pill {
+.featured-tags {
+  & strong small {
+    color: var(--text-color-dark-faded);
+  }
+
+  & .pill {
     color: var(--text-color-dark);
   }
+}
 
 @media (prefers-color-scheme: dark) {
-  .featured-tags .pill {
+  .featured-tags {
+    & strong small {
+      color: var(--text-color-light-faded);
+    }
+
+    & .pill {
       color: var(--text-color-light);
     }
   }
+}

static/variables.css

@@ -22,6 +22,9 @@
   --text-color-light: #f8f9fa;
   --text-color-light-faded: #999;
 
+  --border-color-light: rgba(197, 209, 222, 0.7);
+  --bg-light: rgba(197, 209, 222, 0.15);
+  --border-color-dark: rgba(0, 0, 0, 0.25);
   --bg-dark: #343a40;
   --bg-darker: #212529;
   --bg-darkest: #000;

templates/_home.html

@@ -18,15 +18,6 @@
   <meta property="og:site_name" content="{{ app.site_name }}" />
   <meta property="og:title" content="{{ app.title }}" />
 
-  {% include "import-map.html" %}
-
-  <!-- Use parent app's variables & reset stylesheets -->
-  <link rel="stylesheet" href="{{ url_for('static', filename='variables.css') }}" />
-  <link rel="stylesheet" href="{{ url_for('static', filename='reset.css') }}" />
-
-  <!-- threads specific static css-->
-  <link rel="stylesheet" href="{{ url_for('threads.static', filename='pills.css') }}" />
-
   <style>
     html {
       scroll-behavior: smooth;
@@ -39,7 +30,6 @@
       color: var(--text-color-dark);
       font-size: var(--font-size-base);
       display: grid;
-      padding: 0 1em;
       gap: 1em;
 
       a {
@@ -149,6 +139,15 @@
 
     }
   </style>
+
+  <!-- Use parent app's variables & reset stylesheets -->
+  <link rel="stylesheet" href="{{ url_for('static', filename='variables.css') }}" />
+  <link rel="stylesheet" href="{{ url_for('static', filename='reset.css') }}" />
+
+  <!-- threads specific static css-->
+  {% include "styles.html" %}
+
+  {% include "import-map.html" %}
 </head>
 
 <body>
@@ -168,7 +167,7 @@
     {% endwith %}
     {% endif %}
     <div class="back">
-      <a href="{{url_for('threads.home')}}">Back</a>
+      <a class="btn" href="{{url_for('threads.home')}}">&larr; Back</a>
     </div>
     {% for thread in threads %}
     {% with thread=thread, parent_id=thread.id, is_thread=threads|length > 1, server=app.server %}
@@ -182,7 +181,7 @@
     {% endfor %}
     {% endif %}
     {% endfor %}
-    <a href="#top">Top</a>
+    <a class="btn" href="#top">&uarr; Top</a>
   </main>
   <footer>
     <p>

templates/_tag.html

@@ -18,14 +18,6 @@
   <meta property="og:site_name" content="{{ app.site_name }}" />
   <meta property="og:title" content="{{ app.title }} / {{ tag }}" />
 
-  {% include "import-map.html" %}
-
-  <!-- Use parent app's variables & reset stylesheets -->
-  <link rel="stylesheet" href="{{ url_for('static', filename='variables.css') }}" />
-  <link rel="stylesheet" href="{{ url_for('static', filename='reset.css') }}" />
-
-  <!-- threads specific static css-->
-  <link rel="stylesheet" href="{{ url_for('threads.static', filename='pills.css') }}" />
 
   <style>
     html {
@@ -39,7 +31,6 @@
       color: var(--text-color-dark);
       font-size: var(--font-size-base);
       display: grid;
-      padding: 0 1em;
       gap: 1em;
 
       a {
@@ -143,6 +134,15 @@
       }
     }
   </style>
+
+  <!-- Use parent app's variables & reset stylesheets -->
+  <link rel="stylesheet" href="{{ url_for('static', filename='variables.css') }}" />
+  <link rel="stylesheet" href="{{ url_for('static', filename='reset.css') }}" />
+
+  <!-- threads specific static css-->
+  {% include "styles.html" %}
+
+  {% include "import-map.html" %}
 </head>
 
 <body>
@@ -161,7 +161,7 @@
     {% endwith %}
     {% endif %} -->
     <div class="back">
-      <a href="{{url_for('threads.home')}}">Back</a>
+      <a class="btn" href="{{url_for('threads.home')}}">&larr; Back</a>
     </div>
     <h2>{{ tag }}</h2>
     {% for thread in threads %}
@@ -176,7 +176,7 @@
     {% endfor %}
     {% endif %}
     {% endfor %}
-    <a href="#top">Top</a>
+    <a class="btn" href="#top">&uarr; Top</a>
   </main>
   <footer>
     <p>

templates/card.html

@@ -1,165 +1,3 @@
-<style>
-  .card_content {
-
-    & .invisible {
-      display: none;
-    }
-
-    & .emoji {
-      display: inline;
-      height: calc(1rem + 6px);
-      margin-bottom: -4px;
-    }
-
-    & .ellipsis::after {
-      content: '...'
-    }
-
-    & .body {
-
-      .hashtag:not(.pill),
-      .mention:not(.pill) {
-        color: var(--text-color-dark-faded);
-        text-decoration: none;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-
-      & code {
-        font-size: var(--font-size-sm);
-        background: rgb(245, 242, 240);
-        padding: 0.25em 0.3em;
-        border-radius: 5px;
-        display: inline-block;
-        vertical-align: text-bottom;
-      }
-
-      & a:has(.link_card) {
-        text-decoration: none
-      }
-
-      & .media,
-      & .link_card {
-        border: 1px solid rgba(34, 34, 34, 0.15);
-        border-radius: 5px;
-        box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.15);
-        max-width: 100%;
-        margin: 15px 0 1em;
-        object-fit: contain;
-        height: auto;
-        text-decoration: none;
-        text-wrap: balance;
-      }
-
-      & .media:hover,
-      & .link_card:hover {
-        color: var(--color-link);
-        text-decoration-color: var(--color-link);
-        border-color: var(--color-link);
-      }
-
-      & p {
-        margin-bottom: 1em;
-      }
-    }
-
-    & .heading {
-
-      display: grid;
-      grid-template-columns: auto auto;
-      gap: 5px;
-      height: 20px;
-
-      & .author {
-        font-size: var(--font-size-lg)
-      }
-
-      & .right_menu {
-        font-size: var(--font-size-sm);
-        text-align: right;
-
-        & a,
-        & span {
-          line-height: 36px;
-        }
-
-        & a {
-          color: var(--text-color-dark);
-
-          &:hover {
-            color: var(--color-link);
-          }
-        }
-      }
-
-    }
-
-    & .link_card {
-      color: var(--text-color-dark-faded);
-      text-decoration: underline;
-      text-decoration-color: var(--text-color-light-faded);
-
-      & strong,
-      & small {
-        text-decoration-thickness: 1px;
-        display: block;
-      }
-
-      padding: 1rem;
-    }
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .card_content {
-
-      & .action {
-        color: var(--color-brand-complement);
-      }
-
-      & .heading .right_menu a {
-        color: var(--text-color-light);
-
-        &:hover {
-          color: var(--color-brand-complement);
-        }
-      }
-
-      & .body {
-
-        .hashtag:not(.pill),
-        .mention:not(.pill) {
-          color: var(--text-color-light-faded);
-          text-decoration: none;
-
-          &:hover {
-            text-decoration: underline;
-          }
-        }
-
-        code {
-          background: rgb(45, 51, 59);
-          color: rgb(197, 209, 222);
-        }
-
-        & .media,
-        & .link_card {
-          border: 1px solid rgba(197, 209, 222, 0.15);
-          color: var(--text-color-light-faded);
-          background: var(--bg-dark);
-        }
-
-        & .media:hover,
-        & .link_card:hover {
-          color: var(--color-brand-complement);
-          text-decoration-color: var(--color-brand-complement);
-          border-color: var(--color-brand-complement);
-        }
-      }
-    }
-  }
-</style>
 <article class="card">
   <div class="card_avatar">
     {% if thread.account.avatar is defined %}
@@ -219,6 +57,8 @@
 
     </div>
     {% if is_thread and not is_tag %}
-    <a href="{{ url_for('threads.thread', id=thread.id) }}">Read full thread</a>
+    <div class="bottom-menu">
+      <a class="btn" href="{{ url_for('threads.thread', id=thread.id) }}">Read full thread &rarr;</a>
+    </div>
     {% endif %}
 </article>

templates/styles.html

@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="{{ url_for('threads.static', filename='pills.css') }}" />
+<link rel="stylesheet" href="{{ url_for('threads.static', filename='card.css') }}" />
+<link rel="stylesheet" href="{{ url_for('threads.static', filename='button.css') }}" />

templates/tag-pills.html

@@ -1,4 +1,7 @@
 <div class="featured-tags">
+    <div>
+        <strong><small>Featured tags</small></strong>
+    </div>
     {% for tag in tags %}
     <a class="hashtag pill" href="{{url_for('threads.tag', id=tag.name) }}">
         {{ tag.name }}