From 4eb4f80813f6c405ef14bd746620751465317d14 Mon Sep 17 00:00:00 2001
From: Sirn Thanabulpong <sirn@ogsite.net>
Date: Sun, 14 Aug 2022 20:01:13 +0900
Subject: [PATCH] Improve readability for pages

---
 assets/app/stylesheets/app.scss             | 64 ++++++++++++++++-----
 assets/app/stylesheets/themes/obsidian.scss | 14 ++++-
 assets/app/stylesheets/themes/topaz.scss    | 14 ++++-
 3 files changed, 74 insertions(+), 18 deletions(-)

diff --git a/assets/app/stylesheets/app.scss b/assets/app/stylesheets/app.scss
index 356b165..5d975bb 100644
--- a/assets/app/stylesheets/app.scss
+++ b/assets/app/stylesheets/app.scss
@@ -279,17 +279,14 @@ body {
 .content {
     font-size: $font-size;
     line-height: $line-height;
+    margin: $spacing-vertical-large 0;
 
-    h1 {
-        font-size: $font-size-larger;
-    }
-    h2 {
-        font-size: $font-size-large;
+    > :first-child {
+        margin-top: 0;
     }
-    h3,
-    h4,
-    h5 {
-        font-size: $font-size;
+
+    > :last-child {
+        margin-bottom: 0;
     }
 
     h1,
@@ -297,16 +294,55 @@ body {
     h3,
     h4,
     h5,
-    p,
     ul,
-    ol {
-        margin: 0 0 $spacing-vertical;
-        padding: 0;
+    ol,
+    p,
+    blockquote {
+        margin: 0.8rem 0;
+    }
+
+    h1 {
+        font-size: 1.5em;
+        margin-top: 2rem;
+    }
+
+    h2 {
+        font-size: 1.3em;
+        margin-top: 1.7rem;
+    }
+
+    h3 {
+        font-size: 1.15em;
+        margin-top: 1.5rem;
+    }
+
+    h4 {
+        font-size: 1.1rem;
+        margin-top: 1.3rem;
+    }
+
+    h5 {
+        font-size: 1rem;
+        margin-top: 1.2rem;
     }
 
     ul,
     ol {
-        padding: 0 $spacing-horizontal-larger 0;
+        padding: 0 2rem;
+
+        ul,
+        ol {
+            margin: 0;
+        }
+
+        li {
+            margin: 0.1rem 0 0;
+        }
+    }
+
+    blockquote {
+        padding: 0.3rem 2rem;
+        border-left: 3px solid;
     }
 }
 
diff --git a/assets/app/stylesheets/themes/obsidian.scss b/assets/app/stylesheets/themes/obsidian.scss
index de5d575..5890779 100644
--- a/assets/app/stylesheets/themes/obsidian.scss
+++ b/assets/app/stylesheets/themes/obsidian.scss
@@ -154,12 +154,22 @@
     }
 
     .content {
-        h1,
+        color: $color-text;
+
+        h1 {
+            color: $color-brand;
+        }
+
         h2,
         h3,
         h4,
         h5 {
-            color: $color-brand;
+            color: $color-gray-lighter;
+        }
+
+        blockquote {
+            border-color: $color-gray;
+            background-color: $color-gray-dark;
         }
     }
 
diff --git a/assets/app/stylesheets/themes/topaz.scss b/assets/app/stylesheets/themes/topaz.scss
index b5d67be..8c983ce 100644
--- a/assets/app/stylesheets/themes/topaz.scss
+++ b/assets/app/stylesheets/themes/topaz.scss
@@ -167,12 +167,22 @@
     }
 
     .content {
-        h1,
+        color: $color-text;
+
+        h1 {
+            color: $color-brand;
+        }
+
         h2,
         h3,
         h4,
         h5 {
-            color: $color-brand;
+            color: $color-brand-dark;
+        }
+
+        blockquote {
+            border-color: $color-gray-light;
+            background-color: $color-gray-lighter;
         }
     }
 
-- 
2.45.2