From 7f29b8ad56ce441d624332603326566cc00bf9cf Mon Sep 17 00:00:00 2001
From: Gabriel Arazas <foodogsquared@foodogsquared.one>
Date: Mon, 27 Feb 2023 18:21:58 +0800
Subject: [PATCH] Update site styling

---
 assets/css/rouge.scss   |   8 +---
 assets/scss/extend.scss | 101 +++++++++-------------------------------
 2 files changed, 23 insertions(+), 86 deletions(-)

diff --git a/assets/css/rouge.scss b/assets/css/rouge.scss
index 01c8a9b..98fb02e 100644
--- a/assets/css/rouge.scss
+++ b/assets/css/rouge.scss
@@ -4,13 +4,7 @@
 */
 .rouge.highlight {
   color: var(--base05);
-  background-color: var(--base00);
-
-  pre {
-    color: var(--base05);
-    background-color: var(--base00);
-    margin: 0px;
-  }
+  background: var(--base00);
 
   code {
     background: unset;
diff --git a/assets/scss/extend.scss b/assets/scss/extend.scss
index f3c96a2..baccdd3 100644
--- a/assets/scss/extend.scss
+++ b/assets/scss/extend.scss
@@ -3,32 +3,18 @@ $tooltip-size: 5em;
 $line-height: 1.45;
 
 :root {
-  --accented-border-style: var(--content-color) solid .1vw;
-  --content-color: var(--base05);
-  --selection-color: var(--base04);
+  --accented-border-style: var(--foreground) solid .1vw;
 
   --body-family: "Source Serif Pro", "IBM Plex Serif", "Noto Serif", serif;
   --header-family: "Source Sans Pro", "IBM Plex Sans", "Noto Sans", sans-serif;
   --mono-family: "Source Code Pro", "IBM Plex Mono", "Noto Mono", monospace;
-  color: var(--base05);
-}
-
-// Hugo-specific blocks.
-#TableOfContents {
-  > ul { margin-bottom: unset; }
 }
 
 // Base styles.
-code {
-  background: var(--base01);
-}
+a:hover { color: var(--base0B); }
 
 hr {
-  border-color: var(--content-color);
-}
-
-pre {
-  background: var(--base00);
+  border-color: var(--foreground);
 }
 
 main > article {
@@ -43,27 +29,11 @@ main > article {
   line-height: unset;
 }
 
-.site__socials {
-  margin-top: 1em;
-}
-
-.site__social-icon svg {
-  fill: currentColor;
-}
-
 article.post {
   padding: 0.5em;
   background: var(--base01);
 }
 
-.post__meta--single {
-  p > span:first-child {
-    white-space: nowrap;
-  }
-
-  &:empty { display: none; }
-}
-
 // Asciidoctor roles (e.g., [.text-center]) on a block.
 .text-center {
   text-align: center;
@@ -137,12 +107,6 @@ article.post {
   }
 }
 
-// Prism CSS
-code[class*="language-"], pre[class*="language-"] {
-  color: var(--base05);
-}
-
-
 // Asciidoctor-specific styles
 sup.footnote {
   vertical-align: baseline;
@@ -189,8 +153,7 @@ sup.footnote {
   }
 }
 
-#footnotes > *:not(hr) {
-  line-height: $line-height;
+#footnotes > :not(hr) {
   margin: 1em;
 }
 
@@ -198,26 +161,6 @@ sup.footnote {
   margin: var(--vertical-rhythm) 0;
 }
 
-table.tableblock {
-  border: var(--border-style);
-  margin: var(--vertical-rhythm) auto;
-  caption { margin: unset; }
-
-  thead tr {
-    background: var(--base05);
-    color: var(--base00);
-  }
-
-  th, td { padding: 0.5em; }
-
-  th::selection { background: var(--selection-color); }
-
-  tbody {
-    tr + tr, tr:first-child { border-top: var(--border-style); }
-  }
-}
-
-
 p.tableblock {
   margin: unset;
 }
@@ -225,14 +168,10 @@ p.tableblock {
 *:not(.listingblock, .openblock) {
   > .attribution,
   > .title {
-    background: var(--content-color);
+    background: var(--foreground);
     color: var(--base00);
     font-size: 0.9em;
     padding: 0.5em;
-
-    &::selection {
-      background: var(--selection-color);
-    }
   }
 
   > .content {
@@ -245,20 +184,16 @@ p.tableblock {
   position: relative;
 
   > *.title {
-    background: var(--content-color);
-    color: var(--base00);
+    background: var(--foreground);
+    color: var(--background);
     font-size: 0.9em;
     padding: 0.5em;
 
     code { background: unset; }
-
-    &::selection {
-      background: var(--selection-color);
-    }
   }
 
-  pre {
-    margin: 0;
+  > *.content pre {
+    margin-top: unset;
   }
 
   > .listingblock__btn-row {
@@ -275,12 +210,12 @@ p.tableblock {
     right: 0;
 
     > button {
-      background: var(--base02);
+      background: var(--base01);
       padding: $gap;
 
       &:hover {
-        background: var(--base06);
-        color: var(--base00);
+        background: var(--selection-color);
+        color: var(--base05);
       }
 
       &:active {
@@ -306,8 +241,16 @@ p.tableblock {
 }
 
 .admonitionblock {
+  table {
+    border: unset;
+
+    tbody {
+      tr + tr, tr:first-child { border-top: unset; }
+    }
+  }
+
   .icon {
-    background: var(--content-color);
+    background: var(--foreground);
     vertical-align: middle;
     width: 12%;
 
@@ -362,7 +305,7 @@ p {
 // This setup will use asciidoctor-rouge.
 .rouge.highlight, code[data-lang] {
   &::selection, ::selection {
-    background: var(--base02);
+    background: var(--selection-color);
     color: unset;
   }
 }