feat: css refactor for easy font change
This commit is contained in:
Jacky Zhao
parent
e235f00fd1
commit
4db93bf384
@ -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`,
|
||||
|
||||
@ -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,22 +63,27 @@ p, ul, text {
|
||||
padding: revert;
|
||||
}
|
||||
|
||||
.mainTOC {
|
||||
background: var(--lightgray);
|
||||
border-radius: 5px;
|
||||
padding: 0.75em 1em;
|
||||
tbody, li {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.mainTOC details summary {
|
||||
.mainTOC {
|
||||
border-radius: 5px;
|
||||
padding: 0.75em 0;
|
||||
|
||||
& details {
|
||||
& summary {
|
||||
cursor: zoom-in;
|
||||
font-family: Inter;
|
||||
font-family: var(--font-header);
|
||||
color: var(--dark);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mainTOC details[open] summary {
|
||||
&[open] summary {
|
||||
cursor: zoom-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#TableOfContents > ol {
|
||||
counter-reset: section;
|
||||
@ -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 {
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
// Add your own CSS here!
|
||||
|
||||
:root {
|
||||
--light: #faf8f8;
|
||||
--dark: #141021;
|
||||
@ -23,3 +24,6 @@
|
||||
--lightgray: #292633 !important;
|
||||
--outlinegray: #343434 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 <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/
|
||||
```
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user