From 22c8981bb9a97743f02ab5d5feabda7ff5a6afc4 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 14 Jul 2022 06:37:54 +0000
Subject: [PATCH] feat: css refactor for easy font change
---
assets/styles/custom.scss | 6 +
assets/styles/base.scss | 167 ++++++++++++++++++++---------------------
assets/js/popover.js | 2
assets/styles/code-title.scss | 2
content/notes/setup.md | 2
layouts/partials/head.html | 4 -
content/notes/preview changes.md | 6
assets/styles/syntax.scss | 2
8 files changed, 93 insertions(+), 98 deletions(-)
diff --git a/assets/js/popover.js b/assets/js/popover.js
index 8eb637d..6fec7e5 100644
--- a/assets/js/popover.js
+++ b/assets/js/popover.js
@@ -50,7 +50,7 @@
li.addEventListener("mouseover", () => {
// fix tooltip positioning
window.FloatingUIDOM.computePosition(li, el, {
- middleware: [window.FloatingUIDOM.offset(15), window.FloatingUIDOM.inline(), window.FloatingUIDOM.shift()],
+ middleware: [window.FloatingUIDOM.offset(10), window.FloatingUIDOM.inline(), window.FloatingUIDOM.shift()],
}).then(({ x, y }) => {
Object.assign(el.style, {
left: `${x}px`,
diff --git a/assets/styles/base.scss b/assets/styles/base.scss
index 8898ec3..f618a3a 100644
--- a/assets/styles/base.scss
+++ b/assets/styles/base.scss
@@ -1,13 +1,41 @@
+// Replace this with your own font imports!
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Inter:wght@400;600;700&family=Source+Sans+Pro:wght@400;600&display=swap');
:root {
- --lt-colours-light: var(--light) !important;
- --lt-colours-lightgray: var(--lightgray) !important;
- --lt-colours-dark: var(--secondary) !important;
- --lt-colours-secondary: var(--tertiary) !important;
- --lt-colours-gray: var(--outlinegray) !important;
+ --font-body: "Source Sans Pro";
+ --font-header: "Inter";
+ --font-mono: "Fira Code"
+}
+
+// typography
+html {
+ scroll-behavior: smooth;
+ &:lang(ar) {
+ & p, & h1, & h2, & h3, article {
+ direction: rtl;
+ text-align: right;
+ }
+ }
+}
+
+.singlePage {
+ padding: 4em 30vw;
+ @media all and (max-width: 1200px) {
+ padding: 25px 5vw;
+ }
+}
+
+
+body {
+ margin: 0;
+ height: 100vh;
+ width: 100vw;
+ max-width: 100%;
+ box-sizing: border-box;
+ background-color: var(--light);
}
h1, h2, h3, h4, h5, h6, ol, ul, thead {
- font-family: Inter;
+ font-family: var(--font-header);
color: var(--dark);
font-weight: revert;
margin: revert;
@@ -19,15 +47,15 @@
}
.hanchor {
- font-family: Inter;
+ font-family: var(--font-header);
margin-left: -1em;
opacity: 0.3;
transition: opacity 0.3s ease;
color: var(--secondary);
}
-p, ul, text {
- font-family: 'Source Sans Pro', sans-serif;
+p, ul, text, a, tr, td {
+ font-family: var(--font-body);
color: var(--gray);
fill: var(--gray);
font-weight: revert;
@@ -35,21 +63,26 @@
padding: revert;
}
+tbody, li {
+ line-height: 1.5em;
+}
+
.mainTOC {
- background: var(--lightgray);
border-radius: 5px;
- padding: 0.75em 1em;
-}
+ padding: 0.75em 0;
-.mainTOC details summary {
- cursor: zoom-in;
- font-family: Inter;
- color: var(--dark);
- font-weight: 700;
-}
+ & details {
+ & summary {
+ cursor: zoom-in;
+ font-family: var(--font-header);
+ color: var(--dark);
+ font-weight: 700;
+ }
-.mainTOC details[open] summary {
- cursor: zoom-out;
+ &[open] summary {
+ cursor: zoom-out;
+ }
+ }
}
#TableOfContents > ol {
@@ -74,13 +107,21 @@
}
& > li::marker, & > li > ol > li::marker {
- font-family: Source Sans Pro;
+ font-family: var(--font-body);
font-weight: 700;
}
}
table {
+ border: 1px solid var(--outlinegray);
width: 100%;
+ padding: 1.5em;
+ border-collapse: collapse;
+}
+
+td, th {
+ padding: 0.2em 1em;
+ border: 1px solid var(--outlinegray);
}
img {
@@ -89,7 +130,7 @@
margin: 1em 0;
}
-p>img+em {
+p > img + em {
display: block;
transform: translateY(-1em);
}
@@ -98,29 +139,11 @@
line-height: 0
}
-p, tbody, li {
- font-family: Source Sans Pro;
- color: var(--gray);
- line-height: 1.5em;
-}
-
blockquote {
margin-left: 0em;
border-left: 3px solid var(--secondary);
padding-left: 1em;
transition: border-color 0.2s ease;
-
- &:hover {
- border-color: var(--tertiary);
- }
-}
-
-table {
- padding: 1.5em;
-}
-
-td, th {
- padding: 0.1em 0.5em;
}
.footnotes p {
@@ -156,7 +179,6 @@
.section {
& h3 > a {
font-weight: 700;
- font-family: Inter;
margin: 0;
}
& p {
@@ -165,13 +187,16 @@
}
article {
+ & > h1 {
+ font-size: 2em;
+ }
+
& > .meta {
margin: -1.5em 0 1em 0;
opacity: 0.7;
}
& a {
- font-family: Source Sans Pro;
font-weight: 600;
&.internal-link {
@@ -233,55 +258,36 @@
padding: 0 0.1em 0 0.2em;
}
+#page-title > a {
+ font-family: var(--font-header);
+}
+
a {
- font-family: Inter, sans-serif;
font-size: 1em;
font-weight: 700;
text-decoration: none;
transition: all 0.2s ease;
color: var(--secondary);
-
&:hover {
color: var(--tertiary) !important;
}
}
pre {
- font-family: 'Fira Code';
+ font-family: var(--font-mono);
padding: 0.75em;
border-radius: 3px;
overflow-x: scroll;
}
code {
- font-family: 'Fira Code';
+ font-family: var(--font-mono);
font-size: 0.85em;
padding: 0.15em 0.3em;
border-radius: 5px;
background: var(--lightgray);
}
-html {
- scroll-behavior: smooth;
-
- &:lang(ar) {
- & p, & h1, & h2, & h3, article {
- direction: rtl;
- text-align: right;
- }
- }
-}
-
-body {
- margin: 0;
- height: 100vh;
- width: 100vw;
- //overflow-x: hidden;
- max-width: 100%;
- box-sizing: border-box;
- background-color: var(--light);
-}
-
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
@@ -305,14 +311,6 @@
background-color: var(--dark);
}
-.singlePage {
- padding: 4em 30vw;
-
- @media all and (max-width: 1200px) {
- padding: 25px 5vw;
- }
-}
-
.page-end {
display: flex;
flex-direction: row;
@@ -357,10 +355,6 @@
margin-top: 30vh;
}
-article > h1 {
- font-size: 2em;
-}
-
header {
display: flex;
flex-direction: row;
@@ -444,7 +438,7 @@
& > input {
box-sizing: border-box;
padding: 0.5em 1em;
- font-family: Inter, sans-serif;
+ font-family: var(--font-body);
color: var(--dark);
font-size: 1.1em;
border: 1px solid var(--outlinegray);
@@ -544,11 +538,11 @@
.popover {
z-index: 999;
position: absolute;
- width: 20em;
+ width: 20rem;
display: none;
background-color: var(--light);
- padding: 1em;
- margin: 1em;
+ padding: 1rem;
+ margin: 1rem;
border: 1px solid var(--outlinegray);
border-radius: 5px;
pointer-events: none;
@@ -570,17 +564,18 @@
& > h3 {
font-size: 1rem;
- margin: 0.25em 0;
+ margin: 0.25rem 0;
}
& > .meta {
- margin-top: 0.25em;
+ margin-top: 0.25rem;
opacity: 0.5;
- font-family: "JetBrains Mono", monospace;
+ font-family: var(--font-mono);
font-size: 0.8rem;
}
& > p, & > a {
+ font-size: 1rem;
margin: 0;
font-weight: 400;
user-select: none;
diff --git a/assets/styles/code-title.scss b/assets/styles/code-title.scss
index 11b088a..b384743 100644
--- a/assets/styles/code-title.scss
+++ b/assets/styles/code-title.scss
@@ -1,6 +1,6 @@
.code-title {
color: var(--primary) ;
- font-family: monospace;
+ font-family: var(--font-mono);
width: max-content;
overflow-x: auto;
display: inline-block;
diff --git a/assets/styles/custom.scss b/assets/styles/custom.scss
index 54dbace..a7a2e79 100644
--- a/assets/styles/custom.scss
+++ b/assets/styles/custom.scss
@@ -1,4 +1,5 @@
// Add your own CSS here!
+
:root {
--light: #faf8f8;
--dark: #141021;
@@ -22,4 +23,7 @@
--gray: #d4d4d4 !important;
--lightgray: #292633 !important;
--outlinegray: #343434 !important;
-}
\ No newline at end of file
+}
+
+
+
diff --git a/assets/styles/syntax.scss b/assets/styles/syntax.scss
index 14153c9..62a9fe9 100644
--- a/assets/styles/syntax.scss
+++ b/assets/styles/syntax.scss
@@ -45,7 +45,7 @@
}
.chroma code {
- font-family: 'Fira Code' !important;
+ font-family: var(--font-mono) !important;
font-size: 0.85em !important;
line-height: 2em !important;
background: none !important;
diff --git a/content/notes/preview changes.md b/content/notes/preview changes.md
index d7e2770..b79c635 100644
--- a/content/notes/preview changes.md
+++ b/content/notes/preview changes.md
@@ -14,7 +14,7 @@
```shell
# Install and link `hugo-obsidian` locally
-$ go install github.com/jackyzha0/hugo-obsidian@latest
+go install github.com/jackyzha0/hugo-obsidian@latest
```
If you are running into an error saying that `command not found: hugo-obsidian`, make sure you set your `GOPATH` correctly! This will allow your terminal to correctly recognize hugo-obsidian as an executable.
@@ -26,10 +26,10 @@
```
# Navigate to your local Quartz folder
-$ cd <location-of-your-local-quartz>
+cd <location-of-your-local-quartz>
# Start local server
-$ make serve
+make serve
# View your site in a browser at http://localhost:1313/
```
diff --git a/content/notes/setup.md b/content/notes/setup.md
index 12df750..0025415 100644
--- a/content/notes/setup.md
+++ b/content/notes/setup.md
@@ -21,7 +21,7 @@
After you've made a fork of the repository, you need to download the files locally onto your machine. Ensure you have `git`, then type the following command replacing `YOUR-USERNAME` with your GitHub username.
```shell
-$ git clone https://github.com/YOUR-USERNAME/quartz
+git clone https://github.com/YOUR-USERNAME/quartz
```
## Editing
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index e3c6967..4338c0b 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -23,10 +23,6 @@
{{ end }}
<!-- CSS Stylesheets and Fonts -->
- <link
- href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Source+Sans+Pro:wght@400;600;700&family=Fira+Code:wght@400;700&display=swap"
- rel="stylesheet"
- />
{{$sass := resources.Match "styles/[!_]*.scss" }}
{{$css := slice }}
{{range $sass}}
--
Gitblit v1.10.0