yuriy/quartz-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

various typography and styling fixes

Browse Source
This commit is contained in:
Jacky Zhao
2023-07-23 11:02:45 -07:00
parent ab228748ab
commit 27a5f7ef8e
3 changed files with 31 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
quartz/components/Head.tsx
View File

@@ -16,7 +16,7 @@ export default (() => {
<head> <head>
<title>{title}</title> <title>{title}</title>
<meta charSet="utf-8" /> <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:title" content={title} />
<meta property="og:description" content={title} /> <meta property="og:description" content={title} />
<meta property="og:image" content={ogImagePath} /> <meta property="og:image" content={ogImagePath} />

2
quartz/components/Header.tsx
View File

@@ -9,7 +9,7 @@ header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin: 2em 0; margin: 2rem 0;
gap: 1.5rem; gap: 1.5rem;
} }

31
quartz/styles/base.scss
View File

@@ -5,6 +5,8 @@
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
-webkit-text-size-adjust: none;
text-size-adjust: none;
} }
body { body {
@@ -221,13 +223,38 @@ h6 {
font-family: var(--codeFont); font-family: var(--codeFont);
user-select: none; user-select: none;
} }
&[id]:hover > a { &[id]:hover > a {
opacity: 1; 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] { div[data-rehype-pretty-code-fragment] {
line-height: 1.5rem; line-height: 1.6rem;
position: relative; position: relative;
& > div[data-rehype-pretty-code-title] { & > div[data-rehype-pretty-code-title] {
@@ -313,7 +340,7 @@ code {
tbody, tbody,
li, li,
p { p {
line-height: 1.5rem; line-height: 1.6rem;
} }
table { table {