various typography and styling fixes

jackyzha0 · Jul 23, 2023 · 27a5f7e · 27a5f7e
1 parent ab22874
commit 27a5f7e
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
@@ -16,7 +16,7 @@ export default (() => {
  <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
@@ -9,7 +9,7 @@ header {
  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
@@ -5,6 +5,8 @@
 
 html {
  scroll-behavior: smooth;
+ -webkit-text-size-adjust: none;
+ text-size-adjust: none;
 }
 
 body {
@@ -221,13 +223,38 @@ h6 {
  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 @@ code {
 tbody,
 li,
 p {
- line-height: 1.5rem;
+ line-height: 1.6rem;
 }
 
 table {