ndumas
/
quartz
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: css refactor for easy font change

Browse Source
hugo
Jacky Zhao 2 years ago
parent 8b2a82a96a
commit 22c8981bb9
8 changed files with 93 additions and 98 deletions
Show Stats Download Patch File Download Diff File

2
assets/js/popover.js
Unescape Escape View File

@ -50,7 +50,7 @@ function initPopover(baseURL, useContextualBacklinks, renderLatex) {
li.addEventListener("mouseover", () => { li.addEventListener("mouseover", () => {
// fix tooltip positioning // fix tooltip positioning
window.FloatingUIDOM.computePosition(li, el, { 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 }) => { }).then(({ x, y }) => {
Object.assign(el.style, { Object.assign(el.style, {
left: `${x}px`, left: `${x}px`,

167
assets/styles/base.scss
Unescape Escape View File

@ -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 { :root {
--lt-colours-light: var(--light) !important; --font-body: "Source Sans Pro";
--lt-colours-lightgray: var(--lightgray) !important; --font-header: "Inter";
--lt-colours-dark: var(--secondary) !important; --font-mono: "Fira Code"
--lt-colours-secondary: var(--tertiary) !important; }
--lt-colours-gray: var(--outlinegray) !important;
// 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 { h1, h2, h3, h4, h5, h6, ol, ul, thead {
font-family: Inter; font-family: var(--font-header);
color: var(--dark); color: var(--dark);
font-weight: revert; font-weight: revert;
margin: revert; margin: revert;
@ -19,15 +47,15 @@ h1, h2, h3, h4, h5, h6, ol, ul, thead {
} }
.hanchor { .hanchor {
font-family: Inter; font-family: var(--font-header);
margin-left: -1em; margin-left: -1em;
opacity: 0.3; opacity: 0.3;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
color: var(--secondary); color: var(--secondary);
} }
p, ul, text { p, ul, text, a, tr, td {
font-family: 'Source Sans Pro', sans-serif; font-family: var(--font-body);
color: var(--gray); color: var(--gray);
fill: var(--gray); fill: var(--gray);
font-weight: revert; font-weight: revert;
@ -35,21 +63,26 @@ p, ul, text {
padding: revert; padding: revert;
} }
tbody, li {
line-height: 1.5em;
}
.mainTOC { .mainTOC {
background: var(--lightgray);
border-radius: 5px; border-radius: 5px;
padding: 0.75em 1em; padding: 0.75em 0;
}
.mainTOC details summary { & details {
cursor: zoom-in; & summary {
font-family: Inter; cursor: zoom-in;
color: var(--dark); font-family: var(--font-header);
font-weight: 700; color: var(--dark);
} font-weight: 700;
}
.mainTOC details[open] summary { &[open] summary {
cursor: zoom-out; cursor: zoom-out;
}
}
} }
#TableOfContents > ol { #TableOfContents > ol {
@ -74,13 +107,21 @@ p, ul, text {
} }
& > li::marker, & > li > ol > li::marker { & > li::marker, & > li > ol > li::marker {
font-family: Source Sans Pro; font-family: var(--font-body);
font-weight: 700; font-weight: 700;
} }
} }
table { table {
border: 1px solid var(--outlinegray);
width: 100%; width: 100%;
padding: 1.5em;
border-collapse: collapse;
}
td, th {
padding: 0.2em 1em;
border: 1px solid var(--outlinegray);
} }
img { img {
@ -89,7 +130,7 @@ img {
margin: 1em 0; margin: 1em 0;
} }
p>img+em { p > img + em {
display: block; display: block;
transform: translateY(-1em); transform: translateY(-1em);
} }
@ -98,29 +139,11 @@ sup {
line-height: 0 line-height: 0
} }
p, tbody, li {
font-family: Source Sans Pro;
color: var(--gray);
line-height: 1.5em;
}
blockquote { blockquote {
margin-left: 0em; margin-left: 0em;
border-left: 3px solid var(--secondary); border-left: 3px solid var(--secondary);
padding-left: 1em; padding-left: 1em;
transition: border-color 0.2s ease; transition: border-color 0.2s ease;
&:hover {
border-color: var(--tertiary);
}
}
table {
padding: 1.5em;
}
td, th {
padding: 0.1em 0.5em;
} }
.footnotes p { .footnotes p {
@ -156,7 +179,6 @@ td, th {
.section { .section {
& h3 > a { & h3 > a {
font-weight: 700; font-weight: 700;
font-family: Inter;
margin: 0; margin: 0;
} }
& p { & p {
@ -165,13 +187,16 @@ td, th {
} }
article { article {
& > h1 {
font-size: 2em;
}
& > .meta { & > .meta {
margin: -1.5em 0 1em 0; margin: -1.5em 0 1em 0;
opacity: 0.7; opacity: 0.7;
} }
& a { & a {
font-family: Source Sans Pro;
font-weight: 600; font-weight: 600;
&.internal-link { &.internal-link {
@ -233,55 +258,36 @@ sup > a {
padding: 0 0.1em 0 0.2em; padding: 0 0.1em 0 0.2em;
} }
#page-title > a {
font-family: var(--font-header);
}
a { a {
font-family: Inter, sans-serif;
font-size: 1em; font-size: 1em;
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
transition: all 0.2s ease; transition: all 0.2s ease;
color: var(--secondary); color: var(--secondary);
&:hover { &:hover {
color: var(--tertiary) !important; color: var(--tertiary) !important;
} }
} }
pre { pre {
font-family: 'Fira Code'; font-family: var(--font-mono);
padding: 0.75em; padding: 0.75em;
border-radius: 3px; border-radius: 3px;
overflow-x: scroll; overflow-x: scroll;
} }
code { code {
font-family: 'Fira Code'; font-family: var(--font-mono);
font-size: 0.85em; font-size: 0.85em;
padding: 0.15em 0.3em; padding: 0.15em 0.3em;
border-radius: 5px; border-radius: 5px;
background: var(--lightgray); 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 { @keyframes fadeIn {
0% {opacity:0;} 0% {opacity:0;}
100% {opacity:1;} 100% {opacity:1;}
@ -305,14 +311,6 @@ hr {
background-color: var(--dark); background-color: var(--dark);
} }
.singlePage {
padding: 4em 30vw;
@media all and (max-width: 1200px) {
padding: 25px 5vw;
}
}
.page-end { .page-end {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -357,10 +355,6 @@ hr {
margin-top: 30vh; margin-top: 30vh;
} }
article > h1 {
font-size: 2em;
}
header { header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -444,7 +438,7 @@ header {
& > input { & > input {
box-sizing: border-box; box-sizing: border-box;
padding: 0.5em 1em; padding: 0.5em 1em;
font-family: Inter, sans-serif; font-family: var(--font-body);
color: var(--dark); color: var(--dark);
font-size: 1.1em; font-size: 1.1em;
border: 1px solid var(--outlinegray); border: 1px solid var(--outlinegray);
@ -544,11 +538,11 @@ header {
.popover { .popover {
z-index: 999; z-index: 999;
position: absolute; position: absolute;
width: 20em; width: 20rem;
display: none; display: none;
background-color: var(--light); background-color: var(--light);
padding: 1em; padding: 1rem;
margin: 1em; margin: 1rem;
border: 1px solid var(--outlinegray); border: 1px solid var(--outlinegray);
border-radius: 5px; border-radius: 5px;
pointer-events: none; pointer-events: none;
@ -570,17 +564,18 @@ header {
& > h3 { & > h3 {
font-size: 1rem; font-size: 1rem;
margin: 0.25em 0; margin: 0.25rem 0;
} }
& > .meta { & > .meta {
margin-top: 0.25em; margin-top: 0.25rem;
opacity: 0.5; opacity: 0.5;
font-family: "JetBrains Mono", monospace; font-family: var(--font-mono);
font-size: 0.8rem; font-size: 0.8rem;
} }
& > p, & > a { & > p, & > a {
font-size: 1rem;
margin: 0; margin: 0;
font-weight: 400; font-weight: 400;
user-select: none; user-select: none;

2
assets/styles/code-title.scss
Unescape Escape View File

@ -1,6 +1,6 @@
.code-title { .code-title {
color: var(--primary) ; color: var(--primary) ;
font-family: monospace; font-family: var(--font-mono);
width: max-content; width: max-content;
overflow-x: auto; overflow-x: auto;
display: inline-block; display: inline-block;

4
assets/styles/custom.scss
Unescape Escape View File

@ -1,4 +1,5 @@
// Add your own CSS here! // Add your own CSS here!
:root { :root {
--light: #faf8f8; --light: #faf8f8;
--dark: #141021; --dark: #141021;
@ -23,3 +24,6 @@
--lightgray: #292633 !important; --lightgray: #292633 !important;
--outlinegray: #343434 !important; --outlinegray: #343434 !important;
} }

2
assets/styles/syntax.scss
Unescape Escape View File

@ -45,7 +45,7 @@
} }
.chroma code { .chroma code {
font-family: 'Fira Code' !important; font-family: var(--font-mono) !important;
font-size: 0.85em !important; font-size: 0.85em !important;
line-height: 2em !important; line-height: 2em !important;
background: none !important; background: none !important;

6
content/notes/preview changes.md
Unescape Escape View File

@ -14,7 +14,7 @@ This step will generate the list of backlinks for Hugo to parse. Ensure you have
```shell ```shell
# Install and link `hugo-obsidian` locally # 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. 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 # Navigate to your local Quartz folder
$ cd <location-of-your-local-quartz> cd <location-of-your-local-quartz>
# Start local server # Start local server
$ make serve make serve
# View your site in a browser at http://localhost:1313/ # View your site in a browser at http://localhost:1313/
``` ```

2
content/notes/setup.md
Unescape Escape View File

@ -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. 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 ```shell
$ git clone https://github.com/YOUR-USERNAME/quartz git clone https://github.com/YOUR-USERNAME/quartz
``` ```
## Editing ## Editing

4
layouts/partials/head.html
Unescape Escape View File

@ -23,10 +23,6 @@
{{ end }} {{ end }}
<!-- CSS Stylesheets and Fonts --> <!-- 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" }} {{$sass := resources.Match "styles/[!_]*.scss" }}
{{$css := slice }} {{$css := slice }}
{{range $sass}} {{range $sass}}

Write Preview
Loading…
Cancel
Save