chore: Keep nice look while having good contrast

sass/_comments.scss

@@ -144,6 +144,10 @@ section#comments {
         padding: 1rem;
         text-align: left;
 
+        p {
+          color: var(--fg60);
+        }
+
         * {
           display: inline-block;
           margin: 0;

sass/_main.scss

@@ -141,7 +141,7 @@ strong {
 }
 
 small {
-  // color: var(--fg50);
+  color: var(--fg60);
   font-size: 0.8rem;
 }
 
@@ -162,30 +162,23 @@ dl {
 }
 
 hr {
-  border: 0.125rem solid var(--fg50);
+  border: 0.125rem solid var(--fg20);
   margin: 3rem auto;
   width: 40%;
   border-radius: 9999px;
 }
 
 blockquote {
-  padding: 0 0.75em;
   border-left: 0.25rem solid var(--primary-color);
+  border-radius: var(--rounded-corner-small);
+  color: var(--fg60);
   margin: 0;
-  border-radius: 2.5px;
+  padding: 0 0.75rem;
 
-  > :first-child {
+  // make border slightly transparent for nested blockquote
-    margin-top: 0;
+  > blockquote {
+    border-left: 0.3rem solid var(--primary-color-alpha);
   }
-
-  > :last-child {
-    margin-bottom: 0;
-  }
-
-  // // make border slightly transparent for nested blockquote
-  // > blockquote {
-  //   border-left: 0.3rem solid var(--primary-color-alpha);
-  // }
 }
 
 abbr {
@@ -202,7 +195,7 @@ code {
 code:not(pre code) {
   padding: 2px 6px;
   border-radius: var(--rounded-corner-small);
-  background-color: var(--fg05);
+  background-color: var(--fg10);
   color: var(--red-fg);
 }
 
@@ -303,7 +296,7 @@ table {
   th,
   td {
     padding: 0.5rem 1rem;
-    border: 1px solid var(--fg50);
+    border: 1px solid var(--fg20);
   }
 }
 
@@ -363,7 +356,7 @@ img {
   background-color: var(--nav-bg);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
-  // position: sticky;
+  position: sticky;
   top: 1rem;
   z-index: 1;
 
@@ -621,8 +614,14 @@ img {
 
 .heading {
   text-align: center;
-  // &::after {
+  &::after {
-  //   content: ".";
+    content: ".";
-  //   color: var(--primary-color);
+    color: var(--primary-color);
-  // }
+  }
+}
+
+.date-row {
+  display: flex;
+  justify-content: center;
+  text-align: center;
 }

sass/_variables.scss

@@ -26,14 +26,16 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
   --fg-color: rgba(0, 0, 0, 0.8);
   --primary-color-alpha: #{$primary-color-alpha};
   --primary-color: #{$primary-color};
-  --rounded-corner-big: 1.2rem;
+  --rounded-corner-big: 18px;
-  --rounded-corner-small: 0.5rem;
+  --rounded-corner-small: 8px;
-  --rounded-corner: 0.75rem;
+  --rounded-corner: 12px;
 
   // 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);
@@ -71,7 +73,9 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
     // CUSTOM COLOR PALETTE
     --fg05: rgba(255, 255, 255, 0.05);
     --fg10: rgba(255, 255, 255, 0.1);
+    --fg20: rgba(255, 255, 255, 0.1);
     --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);

templates/blog.html

@@ -4,23 +4,25 @@
 <h1 class="heading">{{ page.title }}</h1>
 
 {%- if page.date %}
-  <small>
+  <div class="date-row">
-    <time datetime='{{ page.date | date(format='%+') }}' pubdate>
+    <small>
-      {{- page.date | date(format=config.extra.date_format) -}}
+      <time datetime='{{ page.date | date(format='%+') }}' pubdate>
-    </time>
+        {{- page.date | date(format=config.extra.date_format) -}}
-    {%- if page.taxonomies %}
+      </time>
-      {%- for name, taxon in page.taxonomies %}
+      {%- if page.taxonomies %}
-      <ul class="tags">
+        {%- for name, taxon in page.taxonomies %}
-        <span>•&nbsp;</span>
+        <span>•</span>
-        {%-for item in taxon %}
+        <ul class="tags">
-        <li>
+          {%-for item in taxon %}
-          <a class="tag" href="{{ get_taxonomy_url(kind=name, name=item) }}">{{ item }}</a>
+          <li>
-        </li>
+            <a class="tag" href="{{ get_taxonomy_url(kind=name, name=item) }}">{{ item }}</a>
+          </li>
+          {%- endfor %}
+        </ul>
         {%- endfor %}
-      </ul>
+      {%- endif %}
-      {%- endfor %}
+    </small>
-    {%- endif %}
+  </div>
-  </small>
 {%- endif %}
 
 {% if page.extra.archive %}

templates/blog_list.html

@@ -26,8 +26,8 @@
       </time>
       {%- if page.taxonomies %}
         {%- for name, taxon in page.taxonomies %}
+        <span>•</span>
         <ul class="tags">
-          <span>•&nbsp;</span>
           {%-for item in taxon %}
           <li>
             <a class="tag" href="{{ get_taxonomy_url(kind=name, name=item) }}">{{ item }}</a>

templates/taxonomy_single.html

@@ -20,8 +20,8 @@
     </time>
     {%- if page.taxonomies %}
       {%- for name, taxon in page.taxonomies %}
+      <span>•</span>
       <ul class="tags">
-        <span>•&nbsp;</span>
         {%-for item in taxon %}
         <li>
           <a class="tag" href="{{ get_taxonomy_url(kind=name, name=item) }}">{{ item }}</a>