From e4caa0d1d7fb3bdca6dee07fee299a3acdf40043 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Tue, 28 Dec 2021 00:35:42 +0000
Subject: [PATCH] add taxonomy and term lists

---
 assets/base.scss |  192 ++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 152 insertions(+), 40 deletions(-)

diff --git a/assets/base.scss b/assets/base.scss
index a1b5c7b..c4447ee 100644
--- a/assets/base.scss
+++ b/assets/base.scss
@@ -8,26 +8,19 @@
 
 h1, h2, h3, h4, ol, ul, thead {
   font-family: Inter;
-  color: var(--dark)
+  color: var(--dark);
+  font-weight: revert;
+  margin: revert;
+  padding: revert;
 }
 
 p, ul, text {
   font-family: 'Source Sans Pro', sans-serif;
   color: var(--gray);
   fill: var(--gray);
-}
-
-a {
-  font-family: Inter;
-  font-weight: 700;
-  font-size: 1em;
-  text-decoration: none;
-  transition: all 0.2s ease;
-  color: var(--secondary);
-
-  &:hover {
-    color: var(--tertiary) !important;
-  }
+  font-weight: revert;
+  margin: revert;
+  padding: revert;
 }
 
 #TableOfContents > ol {
@@ -88,12 +81,8 @@
   line-height: 1.5em;
 }
 
-h2 {
-  opacity: 0.85;
-}
-
-h3 {
-  opacity: 0.75;
+h2, h3 {
+  opacity: 0.9;
 }
 
 blockquote {
@@ -119,12 +108,91 @@
   margin: 0.5em 0;
 }
 
-article a {
-  font-family: Source Sans Pro;
+.pagination {
+  list-style: none;
+  padding-left: 0;
+  display: flex;
+  margin-top: 2em;
+  gap: 1.5em;
+  justify-content: center;
+
+  & > li {
+    text-align: center;
+    display: inline-block;
+
+    & a {
+      background-color: transparent !important;
+    }
+
+    & a[href$="#"] {
+      opacity: 0.2;
+    }
+  }
+}
+
+.section {
+  & h3 > a {
+    font-weight: 700;
+    font-family: Inter;
+    margin: 0;
+  }
+  & p {
+    margin-top: 0;
+  }
+}
+
+article {
+  & > .meta {
+    margin: -1.5em 0 1em 0;
+    opacity: 0.7;
+  }
+
+  & > .tags {
+    list-style: none;
+    padding-left: 0;
+
+    & .meta {
+      & > h1 {
+        margin: 0;
+      }
+      & > p {
+        margin: 0;
+      }
+    }
+
+    & > li {
+      display: inline-block;
+    }
+    & > li > a {
+      border-radius: 8px;
+      border: var(--outlinegray) 1px solid;
+      padding: 0.2em 0.5em;
+      &::before {
+        content: "#";
+        margin-right: 0.3em;
+        color: var(--outlinegray);
+      }
+    }
+  }
+
+  & a {
+    font-family: Source Sans Pro;
+    font-weight: 600;
+
+    // internal link
+    &[href^="./"], &[href^="/"] {
+      text-decoration: none;
+      background-color: transparentize(#8f9fa9, 0.85);
+      padding: 0 0.1em;
+      margin: auto -0.1em;
+      border-radius: 3px;
+    }
+  }
+}
+
+.backlinks a {
   font-weight: 600;
-  text-decoration: underline;
-  text-decoration-color: var(--tertiary);
-  text-decoration-thickness: .15em;
+  font-size: 0.9rem;
 }
 
 sup > a {
@@ -132,6 +200,19 @@
   padding: 0 0.1em 0 0.2em;
 }
 
+a {
+  font-family: Inter, sans-serif;
+  font-size: 1em;
+  font-weight: 700;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  color: var(--secondary);
+
+  &:hover {
+    color: var(--tertiary) !important;
+  }
+}
+
 pre {
   font-family: 'Fira Code';
   padding: 0.75em;
@@ -184,14 +265,6 @@
   background-color: var(--dark);
 }
 
-// internal link
-a[href^="/"] {
-  text-decoration: none;
-  background-color: #afbfc922;
-  padding: 0 0.2em;
-  border-radius: 3px;
-}
-
 .singlePage {
   margin: 4em 30vw;
 
@@ -229,7 +302,7 @@
 
   & #graph-container {
     border: var(--outlinegray) 1px solid;
-    border-radius: 5px
+    border-radius: 5px;
   }
 }
 
@@ -237,19 +310,23 @@
   margin-top: 30vh;
 }
 
+article > h1 {
+  font-size: 2em;
+}
+
 header {
   display: flex;
   flex-direction: row;
   align-items: center;
 
+  & > h1 {
+    font-size: 2em;
+  }
+
   & > nav {
     @media all and (max-width: 600px) {
       display: none;
     }
-
-    & > a {
-      margin-left: 2em;
-    }
   }
 
   & > .spacer {
@@ -280,7 +357,8 @@
   left: 0;
   top: 0;
   width: 100vw;
-  height: 100vh;
+  height: 100%;
+  overflow: scroll;
   display: none;
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
@@ -323,8 +401,20 @@
         transition: background 0.2s ease;
         border: 1px solid var(--outlinegray);
         border-bottom: none;
+        width: 100%;
 
-        &:hover {
+        // normalize button props
+        font-family: inherit;
+        font-size: 100%;
+        line-height: 1.15;
+        margin: 0;
+        overflow: visible;
+        text-transform: none;
+        text-align: left;
+        background: var(--light);
+        outline: none;
+
+        &:hover, &:focus {
           background: rgba(180, 180, 180, 0.15);
         }
 
@@ -351,4 +441,26 @@
       }
     }
   }
+}
+
+.section-ul {
+  list-style: none;
+  padding-left: 0;
+
+  & > li {
+    border: 1px solid var(--outlinegray);
+    border-radius: 5px;
+    padding: 0 1em;
+    margin-bottom: 1em;
+
+    & h3 {
+      opacity: 1;
+      font-weight: 700;
+      margin-bottom: 0em;
+    }
+
+    & .meta {
+      opacity: 0.6;
+    }
+  }
 }
\ No newline at end of file

--
Gitblit v1.10.0