From 27a5f7ef8ef0b52ade767138ebd1e202f8b66476 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sun, 23 Jul 2023 18:02:45 +0000
Subject: [PATCH] various typography and styling fixes

---
 quartz/components/Header.tsx |    2 +-
 quartz/styles/base.scss      |   31 +++++++++++++++++++++++++++++--
 quartz/components/Head.tsx   |    2 +-
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index f57e0e2..44decac 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -16,7 +16,7 @@
       <head>
         <title>{title}</title>
         <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta property="og:title" content={title} />
         <meta property="og:description" content={title} />
         <meta property="og:image" content={ogImagePath} />
diff --git a/quartz/components/Header.tsx b/quartz/components/Header.tsx
index 3fd8eca..5281f72 100644
--- a/quartz/components/Header.tsx
+++ b/quartz/components/Header.tsx
@@ -9,7 +9,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin: 2em 0;
+  margin: 2rem 0;
   gap: 1.5rem;
 }
 
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index c6e343b..bfde0f9 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -5,6 +5,8 @@
 
 html {
   scroll-behavior: smooth;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
 }
 
 body {
@@ -221,13 +223,38 @@
     font-family: var(--codeFont);
     user-select: none;
   }
+
   &[id]:hover > a {
     opacity: 1;
   }
 }
 
+// typography improvements
+h1 {
+  font-size: 1.75rem;
+  margin-top: 2.75rem;
+}
+
+h2 {
+  font-size: 1.4rem;
+  opacity: 0.95;
+  margin-top: 2.4rem;
+}
+
+h3 {
+  font-size: 1.12rem;
+  margin-top: 2.12rem;
+  opacity: 0.9;
+}
+
+h4, h5, h6 {
+  font-size: 1rem;
+  margin-top: 2rem;
+  opacity: 0.85;
+}
+
 div[data-rehype-pretty-code-fragment] {
-  line-height: 1.5rem;
+  line-height: 1.6rem;
   position: relative;
 
   & > div[data-rehype-pretty-code-title] {
@@ -313,7 +340,7 @@
 tbody,
 li,
 p {
-  line-height: 1.5rem;
+  line-height: 1.6rem;
 }
 
 table {

--
Gitblit v1.10.0