From 4db93bf384ad4335c58a4976e3b344de1db23ca9 Mon Sep 17 00:00:00 2001 From: Jacky Zhao Date: Wed, 13 Jul 2022 23:37:54 -0700 Subject: [PATCH] feat: css refactor for easy font change --- assets/js/popover.js | 2 +- assets/styles/base.scss | 167 +++++++++++++++---------------- assets/styles/code-title.scss | 2 +- assets/styles/custom.scss | 6 +- assets/styles/syntax.scss | 2 +- content/notes/preview changes.md | 6 +- content/notes/setup.md | 2 +- layouts/partials/head.html | 4 - 8 files changed, 93 insertions(+), 98 deletions(-) diff --git a/assets/js/popover.js b/assets/js/popover.js index 8eb637d6..6fec7e5e 100644 --- a/assets/js/popover.js +++ b/assets/js/popover.js @@ -50,7 +50,7 @@ function initPopover(baseURL, useContextualBacklinks, renderLatex) { 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 8898ec39..f618a3ae 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 @@ h1, h2, h3, h4, h5, h6, ol, ul, thead { } .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 @@ p, ul, text { 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 @@ p, ul, text { } & > 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 @@ img { margin: 1em 0; } -p>img+em { +p > img + em { display: block; transform: translateY(-1em); } @@ -98,29 +139,11 @@ sup { 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 @@ td, th { .section { & h3 > a { font-weight: 700; - font-family: Inter; margin: 0; } & p { @@ -165,13 +187,16 @@ td, th { } 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 @@ sup > a { 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 @@ hr { 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 @@ hr { margin-top: 30vh; } -article > h1 { - font-size: 2em; -} - header { display: flex; flex-direction: row; @@ -444,7 +438,7 @@ header { & > 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 @@ header { .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 @@ header { & > 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 11b088a7..b384743b 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 54dbacef..a7a2e799 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 14153c9a..62a9fe93 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 d7e2770e..b79c635b 100644 --- a/content/notes/preview changes.md +++ b/content/notes/preview changes.md @@ -14,7 +14,7 @@ This step will generate the list of backlinks for Hugo to parse. Ensure you have ```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 @@ Hugo is the static site generator that powers Quartz. [Install Hugo with "extend ``` # Navigate to your local Quartz folder -$ cd +cd # 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 12df750e..00254159 100644 --- a/content/notes/setup.md +++ b/content/notes/setup.md @@ -21,7 +21,7 @@ Then, Fork the repository into your own GitHub account. If you don't have an acc 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 e3c6967a..4338c0b9 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -23,10 +23,6 @@ {{ end }} - {{$sass := resources.Match "styles/[!_]*.scss" }} {{$css := slice }} {{range $sass}}