feat: Rename color variables, tweak some styles

content/demo/index.md

@@ -22,8 +22,6 @@ There should be whitespace between paragraphs. We recommend including a README,
 
 # Heading 1
 
-> Yes, H1 has ultra-bold style and a dot at the end. You probably shouldn't use it for anything other than page header :)
-
 This is a normal paragraph following a header. Codeberg is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.
 
 ## Heading 2

sass/_main.scss

@@ -27,7 +27,6 @@ body {
 
 body {
   font-family: "Inter Variable", sans-serif;
-  font-weight: 400;
   line-height: 1.6;
   color: var(--fg-color);
   background-color: var(--bg-color);
@@ -135,13 +134,8 @@ a {
   }
 }
 
-b,
-strong {
-  font-weight: 600;
-}
-
 small {
-  color: var(--fg60);
+  color: var(--fg-muted-5);
   font-size: 0.8rem;
 }
 
@@ -162,7 +156,7 @@ dl {
 }
 
 hr {
-  border: 0.125rem solid var(--fg20);
+  border: 0.125rem solid var(--fg-muted-3);
   margin: 3rem auto;
   width: 40%;
   border-radius: 9999px;
@@ -170,15 +164,10 @@ hr {
 
 blockquote {
   border-left: 0.25rem solid var(--primary-color);
-  border-radius: var(--rounded-corner-small);
+  border-radius: 0.25rem;
-  color: var(--fg60);
+  color: var(--fg-muted-5);
   margin: 0;
   padding: 0 0.75rem;
-
-  // make border slightly transparent for nested blockquote
-  > blockquote {
-    border-left: 0.3rem solid var(--primary-color-alpha);
-  }
 }
 
 abbr {
@@ -195,7 +184,7 @@ code {
 code:not(pre code) {
   padding: 2px 6px;
   border-radius: var(--rounded-corner-small);
-  background-color: var(--fg10);
+  background-color: var(--fg-muted-2);
   color: var(--red-fg);
 }
 
@@ -221,7 +210,7 @@ pre {
 
   mark {
     display: block;
-    background-color: var(--fg05);
+    background-color: var(--fg-muted-1);
     color: var(--fg-color); // unset mark color from primary color to text color
     border-radius: 0; // unset code block border radius
     padding: 0; // unset mark padding
@@ -239,9 +228,9 @@ pre {
 }
 
 kbd {
-  background-color: var(--fg05);
+  background-color: var(--fg-muted-1);
   border-radius: var(--rounded-corner-small);
-  box-shadow: inset 0 -2px 0 var(--fg10), 0 -1px 0 var(--fg10);
+  box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-2);
   cursor: pointer;
   display: inline-block;
   font-size: 0.8rem;
@@ -250,8 +239,8 @@ kbd {
 
   // small nice thingy, keys can be pressed!
   &:active {
-    background-color: var(--fg10);
+    background-color: var(--fg-muted-2);
-    box-shadow: inset 0 1px 0 var(--fg10);
+    box-shadow: inset 0 1px 0 var(--fg-muted-2);
     transform: translateY(2px);
   }
 }
@@ -268,12 +257,12 @@ figcaption {
   margin-bottom: 2rem;
   display: block;
   text-align: center;
-  color: var(--fg50);
+  color: var(--fg-muted-4);
   font-size: 0.8rem;
 }
 
 details {
-  background-color: var(--fg05);
+  background-color: var(--fg-muted-1);
   border-radius: var(--rounded-corner);
   box-shadow: var(--shadow);
   padding: 1rem;
@@ -285,9 +274,9 @@ details {
 
 // TABLES
 table {
-  display: block;
-  overflow-x: auto;
   border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
 
   th {
     font-weight: bold;
@@ -296,7 +285,18 @@ table {
   th,
   td {
     padding: 0.5rem 1rem;
-    border: 1px solid var(--fg20);
+  }
+
+  tr {
+    border-bottom: 1px solid var(--fg-muted-2);
+
+    &:nth-child(even) {
+      background-color: var(--fg-muted-1);
+    }
+
+    th {
+      background-color: var(--fg-muted-2);
+    }
   }
 }
 
@@ -349,7 +349,7 @@ img {
 .nav {
   overflow: auto;
   width: 80vw;
-  // max-width: var(--content-width);
+  max-width: calc(var(--content-width) + 10rem);
   margin: 1rem auto;
   box-shadow: 0px 12px 24px -16px rgba(0, 0, 0, 0.5);
   border-radius: var(--rounded-corner-big);
@@ -384,11 +384,11 @@ img {
     padding: 0.4rem 1rem;
     border-radius: var(--rounded-corner);
     background-color: transparent;
-    color: var(--fg50);
+    color: var(--fg-muted-4);
     transition: var(--transition);
 
     &:hover {
-      background-color: var(--fg05);
+      background-color: var(--fg-muted-1);
       color: var(--primary-color);
       text-decoration: none;
     }
@@ -453,18 +453,27 @@ img {
 }
 
 .inline-button {
-  background-color: var(--fg05);
+  background-color: var(--fg-muted-1);
   border-radius: var(--rounded-corner);
   color: var(--fg-color);
   display: inline-block;
   font-size: 0.9rem;
   padding: 0.4rem 1rem;
   transition: var(--transition);
+
+  &:hover {
+    background-color: var(--fg-muted-2);
+    text-decoration: none;
   }
 
-.inline-button:hover {
+  &.colored {
-  background-color: var(--fg10);
+    color: var(--primary-color);
-  text-decoration: none;
+    background-color: transparent;
+
+    &:hover {
+      background-color: var(--primary-color-alpha);
+    }
+  }
 }
 
 // CRT
@@ -477,8 +486,7 @@ img {
   pre {
     color: var(--primary-color);
     padding: 1rem 1rem;
-    text-shadow: var(--primary-color-alpha) 0 0 4px,
+    text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px;
-      var(--primary-color) 0 0 12px;
     // unset some <pre> stuff
     background-color: unset;
     box-shadow: unset;
@@ -587,7 +595,7 @@ img {
   color: var(--fg-color);
   padding: 0.25rem 0.75rem;
   transition: var(--transition);
-  background-color: var(--fg05);
+  background-color: var(--fg-muted-1);
 
   &:hover {
     color: rgb(255, 255, 255);
@@ -612,16 +620,44 @@ img {
   }
 }
 
-.heading {
+.post-nav {
-  text-align: center;
+  display: flex;
-  &::after {
+  margin-top: 6rem;
-    content: ".";
+  border-top: 1px solid var(--fg-muted-2);
+
+  .post-nav-item {
+    border-bottom: 0;
+    font-weight: 600;
+    padding-bottom: 0.5rem;
+    width: 50%;
+    padding-top: 1rem;
+    text-decoration: none;
+    box-sizing: border-box;
+
+    &:hover .post-title {
       color: var(--primary-color);
     }
+
+    &:nth-child(2n+1) {
+      padding-left: 0;
+      padding-right: 1rem;
     }
 
-.date-row {
+    &:nth-child(2n) {
-  display: flex;
+      text-align: right;
-  justify-content: center;
+      padding-right: 0;
-  text-align: center;
+      padding-left: 1rem;
+    }
+
+    .nav-arrow {
+      font-weight: 400;
+      color: var(--fg-muted-5);
+      margin-bottom: 0.5rem;
+    }
+
+    .post-title {
+      color: var(--fg-color);
+      transition: var(--transition);
+    }
+  }
 }

sass/_variables.scss

@@ -19,27 +19,20 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
   0 4px 24px 4px color.scale($primary-color, $alpha: -90%);
 
 :root {
-  // GENERAL SETUP
+  // COLORS
   --bg-color: #{$bg-color-l};
-  --content-width: 720px;
   --crt-bg: #{$crt-bg};
   --fg-color: rgba(0, 0, 0, 0.8);
-  --primary-color-alpha: #{$primary-color-alpha};
+  --fg-muted-1: rgba(0, 0, 0, 0.05);
-  --primary-color: #{$primary-color};
+  --fg-muted-2: rgba(0, 0, 0, 0.1);
-  --rounded-corner-big: 18px;
+  --fg-muted-3: rgba(0, 0, 0, 0.2);
-  --rounded-corner-small: 8px;
+  --fg-muted-4: rgba(0, 0, 0, 0.5);
-  --rounded-corner: 12px;
+  --fg-muted-5: rgba(0, 0, 0, 0.6);
-
-  // CUSTOM COLOR PALETTE
-  --fg05: rgba(0, 0, 0, 0.05);
-  --fg10: rgba(0, 0, 0, 0.1);
-  --fg20: rgba(0, 0, 0, 0.2);
-  --fg50: rgba(0, 0, 0, 0.5);
-  --fg60: rgba(0, 0, 0, 0.6);
   --nav-bg: #{$nav-bg-l};
-
   --orange-bg: rgba(255, 120, 0, 0.1);
   --orange-fg: rgb(255, 120, 0);
+  --primary-color-alpha: #{$primary-color-alpha};
+  --primary-color: #{$primary-color};
   --purple-bg: rgba(145, 65, 172, 0.1);
   --purple-fg: rgb(145, 65, 172);
   --red-bg: rgba(224, 27, 36, 0.1);
@@ -47,15 +40,15 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
   --yellow-bg: rgba(156, 110, 3, 0.1);
   --yellow-fg: rgb(156, 110, 3);
 
-  // CUSTOM VARIABLES
+  // VARIABLES
-  --shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07),
+  --content-width: 720px;
-    0 2px 6px 2px rgba(0, 0, 0, 0.03);
+  --drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
-  --shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06),
-    0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06);
-  --drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
-    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
   --glow: #{$glow};
-
+  --rounded-corner-big: 18px;
+  --rounded-corner-small: 8px;
+  --rounded-corner: 12px;
+  --shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06);
+  --shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03);
   --transition-bezier: 350ms cubic-bezier(0.17, 0.89, 0.32, 1.28);
   --transition-long: 800ms;
   --transition-longer: 400ms;
@@ -66,18 +59,15 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
   :root {
     color-scheme: dark;
 
-    // GENERAL SETUP
+    // COLORS
     --bg-color: #{$bg-color-d};
     --fg-color: rgb(255, 255, 255);
-
+    --fg-muted-1: rgba(255, 255, 255, 0.05);
-    // CUSTOM COLOR PALETTE
+    --fg-muted-2: rgba(255, 255, 255, 0.1);
-    --fg05: rgba(255, 255, 255, 0.05);
+    --fg-muted-3: rgba(255, 255, 255, 0.2);
-    --fg10: rgba(255, 255, 255, 0.1);
+    --fg-muted-4: rgba(255, 255, 255, 0.5);
-    --fg20: rgba(255, 255, 255, 0.2);
+    --fg-muted-5: rgba(255, 255, 255, 0.6);
-    --fg50: rgba(255, 255, 255, 0.5);
-    --fg60: rgba(255, 255, 255, 0.6);
     --nav-bg: #{$nav-bg-d};
-
     --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

@@ -1,10 +1,9 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1 class="heading">{{ page.title }}</h1>
+<h1>{{ page.title }}</h1>
 
 {%- if page.date %}
-  <div class="date-row">
   <small>
     <time datetime='{{ page.date | date(format='%+') }}' pubdate>
       {{- page.date | date(format=config.extra.date_format) -}}
@@ -22,7 +21,6 @@
       {%- endfor %}
     {%- endif %}
   </small>
-  </div>
 {%- endif %}
 
 {% if page.extra.archive %}
@@ -72,30 +70,27 @@
 
 {% if page.extra.comments.id %}
   {% include "includes/comments.html" %}
-  <hr>
 {% endif %}
 
 {% if page.lower or page.higher %}
-  {% if page.lower %}
+  <nav class="post-nav">
-  <h2>
-    Read Next
-  </h2>
-  <a class="link-page" href="{{ page.lower.permalink }}">
-    {{ page.lower.title }}
-  </a>
-  {% endif %}
   {% if page.higher %}
-  <h2>
+    <a class="post-nav-item post-nav-prev" href="{{ page.higher.permalink }}">
-    Read Previous
+      <div class="nav-arrow">← Previous</div>
-  </h2>
+      <span class="post-title">{{ page.higher.title }}</span>
-  <a class="link-page" href="{{ page.higher.permalink }}">
-    {{ page.higher.title }}
     </a>
   {% endif %}
+  {% if page.lower %}
+  <a class="post-nav-item post-nav-next" href="{{ page.lower.permalink }}">
+    <div class="nav-arrow">Next →</div>
+    <span class="post-title">{{ page.lower.title }}</span>
+  </a>
+  {% endif %}
+  </nav>
 {% endif %}
 
 <p class="dialog-buttons">
-  <a href="#top" class="inline-button">Go to top</a>
+  <a class="inline-button" href="#top">Go to top</a>
-  <a href="{{ config.extra.issues_url }}">File an issue</a>
+  <a class="inline-button colored" href="{{ config.extra.issues_url }}">File an issue</a>
 </p>
 {% endblock content %}

templates/blog_list.html

@@ -39,6 +39,5 @@
     </small>
   {%- endif %}
 </article>
-<hr>
 {% endfor %}
 {% endblock content %}