From ac73f7ff7739157254bfcec36ef9463c86b0de72 Mon Sep 17 00:00:00 2001
From: Nguyễn Gia Phong <mcsinyx@disroot.org>
Date: Tue, 16 Nov 2021 17:35:21 +0700
Subject: Overhaul style

---
 _css/style.css | 76 +++++++++++++++++++++++++---------------------------------
 1 file changed, 32 insertions(+), 44 deletions(-)

(limited to '_css')

diff --git a/_css/style.css b/_css/style.css
index b2d724b..369bc2c 100644
--- a/_css/style.css
+++ b/_css/style.css
@@ -39,20 +39,13 @@ html {
     background-color: var(--text-bg);
     box-sizing: border-box;
     color: var(--text-fg);
+    font-size: min(max(100%, 2vw), 24px);
     margin: auto;
     max-width: 72ch;
-    padding: 1ch;
     scrollbar-color: var(--fade-fg) var(--block-bg);
 }
 
-/* Keep minimum font size to the usual default of 16px */
-@media (min-width: 800px) {
-    html {
-        font-size: min(23px, 2vw);
-        margin-left: auto;
-        margin-right: auto;
-    }
-}
+body { margin: 0 1rem }
 
 .franklin-content .row { display: block }
 
@@ -76,18 +69,6 @@ html {
 }
 
 /* Titles */
-.franklin-content h1 {
-    padding-bottom: 0.5rem;
-    border-bottom: 0.15rem solid var(--fade-fg);
-    margin-top: 2rem;
-}
-
-.franklin-content h2 {
-    padding-bottom: 0.3rem;
-    border-bottom: 0.08rem solid var(--fade-fg);
-    margin-top: 2rem;
-}
-
 .franklin-content h1 a,
 .franklin-content h2 a,
 .franklin-content h3 a,
@@ -110,18 +91,8 @@ html {
     list-style-type: lower-alpha;
 }
 
-.franklin-content blockquote {
-    background: var(--block-bg);
-    border-left: 0.25rem solid var(--fade-fg);
-    font-style: italic;
-    margin: 0;
-    padding: 1ch 1ch;
-}
-
-.franklin-content blockquote p { display: inline }
-
 /* General formatting */
-/* Spacing between bullet points. */
+.franklin-content ol, .franklin-content ul { margin: 1ch 0 }
 .franklin-content li p { margin: 1ch 0 }
 
 .franklin-content a {
@@ -178,15 +149,29 @@ html {
  */
 
 /* Boxes */
+.franklin-content blockquote, .note {
+    margin: 0 -1rem;
+    padding-bottom: 1ex;
+    padding-left: 0.75rem;
+    padding-right: 1rem;
+    padding-top: 1ex;
+}
+
+.franklin-content blockquote p, .note p { display: inline }
+
+.franklin-content blockquote {
+    background: var(--block-bg);
+    border-left: 0.25rem solid var(--fade-fg);
+}
+
 .note {
     background-color: #51affe25;
     border-left: 0.25rem solid var(--blue);
-    padding: 0.1rem 1rem;
 }
 
 /* Header */
 header {
-    margin: 1rem -0.5rem;
+    margin: 1.5rem -0.5rem;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
@@ -203,22 +188,25 @@ header a {
 }
 header a:hover { color: var(--text-fg) }
 
-/* Footer */
-.franklin-content .page-foot a {
+/* Metadata */
+.metadata, .page-foot {
     color: var(--fade-fg);
-    text-decoration: underline;
+    font-size: 80%;
+}
+
+.metadata {
+    margin-top: -1rem;
+    margin-bottom: 1rem;
 }
 
 .page-foot {
-    color: var(--fade-fg);
-    font-size: 80%;
-    margin: 1.5rem 0;
+    margin-top: 1.5rem;
+    margin-bottom: 2rem;
 }
 
-/* Balance the horizontal margin with extra vertical ones. */
-@media (min-width: 576px) {
-    header { margin-top: 2rem }
-    .page-foot { margin-bottom: 3rem }
+.metadata a, .franklin-content .page-foot a {
+    color: var(--fade-fg);
+    text-decoration: underline;
 }
 
 nav, nav li { display: inline-block }
-- 
cgit 1.4.1