changes
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
# yaml-language-server: $schema=./quartz/plugins/quartz-plugins.schema.json
|
# yaml-language-server: $schema=./quartz/plugins/quartz-plugins.schema.json
|
||||||
configuration:
|
configuration:
|
||||||
pageTitle: Quartz 5
|
pageTitle: Z Notes
|
||||||
pageTitleSuffix: ""
|
pageTitleSuffix: ""
|
||||||
enableSPA: true
|
enableSPA: true
|
||||||
enablePopovers: true
|
enablePopovers: true
|
||||||
@@ -16,30 +16,48 @@ configuration:
|
|||||||
fontOrigin: googleFonts
|
fontOrigin: googleFonts
|
||||||
cdnCaching: true
|
cdnCaching: true
|
||||||
typography:
|
typography:
|
||||||
header: Schibsted Grotesk
|
title:
|
||||||
body: Source Sans Pro
|
name: Cormorant Garamond
|
||||||
|
weights:
|
||||||
|
- 600
|
||||||
|
- 700
|
||||||
|
includeItalic: true
|
||||||
|
header:
|
||||||
|
name: Cormorant Garamond
|
||||||
|
weights:
|
||||||
|
- 500
|
||||||
|
- 600
|
||||||
|
- 700
|
||||||
|
includeItalic: true
|
||||||
|
body:
|
||||||
|
name: Source Serif 4
|
||||||
|
weights:
|
||||||
|
- 400
|
||||||
|
- 600
|
||||||
|
- 700
|
||||||
|
includeItalic: true
|
||||||
code: IBM Plex Mono
|
code: IBM Plex Mono
|
||||||
colors:
|
colors:
|
||||||
lightMode:
|
lightMode:
|
||||||
light: "#faf8f8"
|
light: "#f4eedf"
|
||||||
lightgray: "#e5e5e5"
|
lightgray: "#d8ccb3"
|
||||||
gray: "#b8b8b8"
|
gray: "#a79575"
|
||||||
darkgray: "#4e4e4e"
|
darkgray: "#43382c"
|
||||||
dark: "#2b2b2b"
|
dark: "#241c16"
|
||||||
secondary: "#284b63"
|
secondary: "#7a2632"
|
||||||
tertiary: "#84a59d"
|
tertiary: "#365c48"
|
||||||
highlight: rgba(143, 159, 169, 0.15)
|
highlight: "rgba(171, 137, 73, 0.18)"
|
||||||
textHighlight: "#fff23688"
|
textHighlight: "#d7b95f66"
|
||||||
darkMode:
|
darkMode:
|
||||||
light: "#161618"
|
light: "#1b1713"
|
||||||
lightgray: "#393639"
|
lightgray: "#393026"
|
||||||
gray: "#646464"
|
gray: "#74634d"
|
||||||
darkgray: "#d4d4d4"
|
darkgray: "#d8cbb3"
|
||||||
dark: "#ebebec"
|
dark: "#f0e5cf"
|
||||||
secondary: "#7b97aa"
|
secondary: "#c59a59"
|
||||||
tertiary: "#84a59d"
|
tertiary: "#78947b"
|
||||||
highlight: rgba(143, 159, 169, 0.15)
|
highlight: "rgba(197, 154, 89, 0.17)"
|
||||||
textHighlight: "#b3aa0288"
|
textHighlight: "#936f3466"
|
||||||
plugins:
|
plugins:
|
||||||
- source: github:quartz-community/created-modified-date
|
- source: github:quartz-community/created-modified-date
|
||||||
enabled: true
|
enabled: true
|
||||||
@@ -220,7 +238,7 @@ plugins:
|
|||||||
position: afterBody
|
position: afterBody
|
||||||
priority: 10
|
priority: 10
|
||||||
- source: github:quartz-community/footer
|
- source: github:quartz-community/footer
|
||||||
enabled: true
|
enabled: false
|
||||||
options:
|
options:
|
||||||
links:
|
links:
|
||||||
GitHub: https://github.com/jackyzha0/quartz
|
GitHub: https://github.com/jackyzha0/quartz
|
||||||
@@ -256,13 +274,6 @@ plugins:
|
|||||||
position: beforeBody
|
position: beforeBody
|
||||||
priority: 15
|
priority: 15
|
||||||
display: all
|
display: all
|
||||||
- source:
|
|
||||||
name: quartz-themes
|
|
||||||
repo: github:saberzero1/quartz-themes
|
|
||||||
subdir: plugin
|
|
||||||
enabled: true
|
|
||||||
options:
|
|
||||||
theme: default
|
|
||||||
- source: github:quartz-community/obsidian-plugin-excalidraw
|
- source: github:quartz-community/obsidian-plugin-excalidraw
|
||||||
enabled: true
|
enabled: true
|
||||||
options:
|
options:
|
||||||
|
|||||||
@@ -1,3 +1,430 @@
|
|||||||
@use "./variables.scss" as *;
|
@use "./variables.scss" as *;
|
||||||
|
@use "sass:map";
|
||||||
|
|
||||||
// put your custom CSS here!
|
// Old Library — a source-controlled, reading-first theme.
|
||||||
|
:root {
|
||||||
|
--paper-shadow: rgba(66, 43, 23, 0.09);
|
||||||
|
--paper-rule: rgba(122, 38, 50, 0.28);
|
||||||
|
--paper-grain: rgba(74, 51, 29, 0.026);
|
||||||
|
--panel: rgba(255, 252, 242, 0.48);
|
||||||
|
--code-surface: rgba(91, 67, 39, 0.075);
|
||||||
|
--focus-ring: #9b7137;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[saved-theme="dark"] {
|
||||||
|
--paper-shadow: rgba(0, 0, 0, 0.34);
|
||||||
|
--paper-rule: rgba(197, 154, 89, 0.28);
|
||||||
|
--paper-grain: rgba(238, 219, 180, 0.018);
|
||||||
|
--panel: rgba(65, 51, 37, 0.32);
|
||||||
|
--code-surface: rgba(238, 219, 180, 0.055);
|
||||||
|
--focus-ring: #d1aa6b;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
line-height: 1.72;
|
||||||
|
letter-spacing: 0.003em;
|
||||||
|
background-image:
|
||||||
|
repeating-linear-gradient(0deg, transparent 0, transparent 3px, var(--paper-grain) 4px),
|
||||||
|
radial-gradient(circle at 18% 12%, var(--paper-grain) 0 1px, transparent 1.5px),
|
||||||
|
radial-gradient(circle at 78% 62%, var(--paper-grain) 0 1px, transparent 1.5px);
|
||||||
|
background-size:
|
||||||
|
auto,
|
||||||
|
31px 29px,
|
||||||
|
37px 41px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: color-mix(in srgb, var(--secondary) 24%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus-visible {
|
||||||
|
outline: 2px solid var(--focus-ring);
|
||||||
|
outline-offset: 3px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
max-width: 1390px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body {
|
||||||
|
box-sizing: border-box;
|
||||||
|
grid-template-columns: minmax(220px, 255px) minmax(0, 780px) minmax(205px, 250px);
|
||||||
|
column-gap: clamp(1.5rem, 3vw, 3.25rem);
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body .sidebar {
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 4.25rem 0.6rem 2rem;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body .center {
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 clamp(0.25rem, 1.25vw, 1rem) 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body .center::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 3.3rem -1.2rem 1.5rem;
|
||||||
|
z-index: -1;
|
||||||
|
border-inline: 1px solid color-mix(in srgb, var(--lightgray) 65%, transparent);
|
||||||
|
box-shadow: 0 1.1rem 2.8rem -2.2rem var(--paper-shadow);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
font-size: 1.02rem;
|
||||||
|
hanging-punctuation: first last;
|
||||||
|
}
|
||||||
|
|
||||||
|
article > p,
|
||||||
|
article > ul,
|
||||||
|
article > ol,
|
||||||
|
article > blockquote {
|
||||||
|
max-width: 70ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
article p {
|
||||||
|
margin: 0.85rem 0 1.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
color: var(--dark);
|
||||||
|
font-family: var(--headerFont);
|
||||||
|
line-height: 1.13;
|
||||||
|
letter-spacing: -0.018em;
|
||||||
|
text-wrap: balance;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-title {
|
||||||
|
margin: 0.35rem 0 0.35rem;
|
||||||
|
font-size: clamp(2.45rem, 5vw, 4rem);
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 0.98;
|
||||||
|
}
|
||||||
|
|
||||||
|
article h2 {
|
||||||
|
margin-top: 2.7rem;
|
||||||
|
padding-bottom: 0.28rem;
|
||||||
|
border-bottom: 1px solid var(--paper-rule);
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
article h3 {
|
||||||
|
margin-top: 2.1rem;
|
||||||
|
font-size: 1.55rem;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
article h4 {
|
||||||
|
margin-top: 1.8rem;
|
||||||
|
font-size: 1.22rem;
|
||||||
|
letter-spacing: 0.025em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration-color: color-mix(in srgb, var(--secondary) 48%, transparent);
|
||||||
|
text-decoration-thickness: 1px;
|
||||||
|
text-underline-offset: 0.16em;
|
||||||
|
}
|
||||||
|
|
||||||
|
article a:not(.internal):not(.tag-link) {
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.internal {
|
||||||
|
border-radius: 2px;
|
||||||
|
background: linear-gradient(to top, var(--highlight) 42%, transparent 42%);
|
||||||
|
padding-inline: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
height: 1px;
|
||||||
|
margin: 2.8rem auto;
|
||||||
|
border: 0;
|
||||||
|
background: linear-gradient(90deg, transparent, var(--gray) 18%, var(--gray) 82%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
position: relative;
|
||||||
|
margin: 1.8rem 0;
|
||||||
|
padding: 0.2rem 1.4rem 0.2rem 1.65rem;
|
||||||
|
border-left: 3px double var(--secondary);
|
||||||
|
color: var(--darkgray);
|
||||||
|
font-style: italic;
|
||||||
|
background: linear-gradient(90deg, var(--highlight), transparent 78%);
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote::before {
|
||||||
|
content: "“";
|
||||||
|
position: absolute;
|
||||||
|
top: -0.55rem;
|
||||||
|
left: 0.35rem;
|
||||||
|
color: var(--secondary);
|
||||||
|
font-family: var(--headerFont);
|
||||||
|
font-size: 2.5rem;
|
||||||
|
opacity: 0.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code {
|
||||||
|
font-size: 0.86em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
border: 1px solid var(--lightgray);
|
||||||
|
border-radius: 3px;
|
||||||
|
background: var(--code-surface) !important;
|
||||||
|
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--tertiary) 65%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
:not(pre) > code {
|
||||||
|
border: 1px solid color-mix(in srgb, var(--lightgray) 72%, transparent);
|
||||||
|
border-radius: 2px;
|
||||||
|
background: var(--code-surface);
|
||||||
|
padding: 0.08em 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 0.92rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
border-bottom: 2px double var(--gray);
|
||||||
|
color: var(--dark);
|
||||||
|
font-family: var(--headerFont);
|
||||||
|
font-size: 1rem;
|
||||||
|
letter-spacing: 0.035em;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
border-bottom: 1px solid color-mix(in srgb, var(--lightgray) 74%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:nth-child(even) td {
|
||||||
|
background: var(--panel);
|
||||||
|
}
|
||||||
|
|
||||||
|
.callout {
|
||||||
|
border-width: 1px !important;
|
||||||
|
border-radius: 3px !important;
|
||||||
|
background: var(--panel) !important;
|
||||||
|
box-shadow: 0 0.4rem 1.3rem -1rem var(--paper-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.callout-title {
|
||||||
|
font-family: var(--headerFont);
|
||||||
|
letter-spacing: 0.025em;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"] {
|
||||||
|
accent-color: var(--tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title a {
|
||||||
|
color: var(--dark);
|
||||||
|
font-family: var(--titleFont);
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-variant: small-caps;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.075em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title a::after {
|
||||||
|
content: " · commonplace";
|
||||||
|
color: var(--gray);
|
||||||
|
font-size: 0.62rem;
|
||||||
|
font-variant: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.13em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-meta,
|
||||||
|
.breadcrumbs,
|
||||||
|
.tags {
|
||||||
|
color: var(--gray);
|
||||||
|
font-size: 0.76rem;
|
||||||
|
letter-spacing: 0.075em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs {
|
||||||
|
padding-bottom: 0.55rem;
|
||||||
|
border-bottom: 1px solid color-mix(in srgb, var(--lightgray) 72%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar > *:not(.page-title):not(.spacer) {
|
||||||
|
padding-block: 0.75rem;
|
||||||
|
border-top: 1px solid color-mix(in srgb, var(--lightgray) 70%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar h3,
|
||||||
|
.sidebar h4,
|
||||||
|
.explorer .folder-title,
|
||||||
|
.toc .toc-header {
|
||||||
|
font-family: var(--headerFont);
|
||||||
|
letter-spacing: 0.045em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar ul,
|
||||||
|
.sidebar ol,
|
||||||
|
.explorer-content {
|
||||||
|
font-size: 0.83rem;
|
||||||
|
line-height: 1.42;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search > .search-button {
|
||||||
|
border: 1px solid var(--lightgray);
|
||||||
|
border-radius: 2px;
|
||||||
|
background: var(--panel);
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph,
|
||||||
|
.backlinks,
|
||||||
|
.toc {
|
||||||
|
opacity: 0.88;
|
||||||
|
transition: opacity 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph:hover,
|
||||||
|
.backlinks:hover,
|
||||||
|
.toc:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover {
|
||||||
|
border: 1px solid var(--gray);
|
||||||
|
border-radius: 3px;
|
||||||
|
background-color: var(--light);
|
||||||
|
box-shadow: 0 1rem 2.2rem var(--paper-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-link {
|
||||||
|
border: 1px solid color-mix(in srgb, var(--secondary) 35%, var(--lightgray));
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--panel) !important;
|
||||||
|
padding: 0.08rem 0.48rem !important;
|
||||||
|
font-size: 0.76rem;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
article > img,
|
||||||
|
article p > img {
|
||||||
|
box-shadow: 0 0.6rem 1.6rem -1rem var(--paper-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and ($tablet) {
|
||||||
|
.page > #quartz-body {
|
||||||
|
grid-template-columns: minmax(210px, 245px) minmax(0, 1fr);
|
||||||
|
column-gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body .sidebar {
|
||||||
|
padding-top: 3.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body .center::before {
|
||||||
|
right: -0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and ($mobile) {
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr);
|
||||||
|
padding-inline: clamp(1rem, 5vw, 1.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body .sidebar.left {
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.55rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
border-bottom: 1px double var(--paper-rule);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body .sidebar.right {
|
||||||
|
gap: 1rem;
|
||||||
|
padding-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body .sidebar > * {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body .center {
|
||||||
|
padding-inline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body .center::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title a {
|
||||||
|
font-size: 1.45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title a::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-title {
|
||||||
|
font-size: clamp(2.25rem, 12vw, 3.35rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
article h2 {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
article table {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
max-width: calc(100vw - 2rem);
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
scroll-behavior: auto !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@use "./themes";
|
||||||
|
|||||||
428
quartz/styles/custom.scssr
Normal file
428
quartz/styles/custom.scssr
Normal file
@@ -0,0 +1,428 @@
|
|||||||
|
@use "./variables.scss" as *;
|
||||||
|
@use "sass:map";
|
||||||
|
|
||||||
|
// Old Library — a source-controlled, reading-first theme.
|
||||||
|
:root {
|
||||||
|
--paper-shadow: rgba(66, 43, 23, 0.09);
|
||||||
|
--paper-rule: rgba(122, 38, 50, 0.28);
|
||||||
|
--paper-grain: rgba(74, 51, 29, 0.026);
|
||||||
|
--panel: rgba(255, 252, 242, 0.48);
|
||||||
|
--code-surface: rgba(91, 67, 39, 0.075);
|
||||||
|
--focus-ring: #9b7137;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[saved-theme="dark"] {
|
||||||
|
--paper-shadow: rgba(0, 0, 0, 0.34);
|
||||||
|
--paper-rule: rgba(197, 154, 89, 0.28);
|
||||||
|
--paper-grain: rgba(238, 219, 180, 0.018);
|
||||||
|
--panel: rgba(65, 51, 37, 0.32);
|
||||||
|
--code-surface: rgba(238, 219, 180, 0.055);
|
||||||
|
--focus-ring: #d1aa6b;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
line-height: 1.72;
|
||||||
|
letter-spacing: 0.003em;
|
||||||
|
background-image:
|
||||||
|
repeating-linear-gradient(0deg, transparent 0, transparent 3px, var(--paper-grain) 4px),
|
||||||
|
radial-gradient(circle at 18% 12%, var(--paper-grain) 0 1px, transparent 1.5px),
|
||||||
|
radial-gradient(circle at 78% 62%, var(--paper-grain) 0 1px, transparent 1.5px);
|
||||||
|
background-size:
|
||||||
|
auto,
|
||||||
|
31px 29px,
|
||||||
|
37px 41px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: color-mix(in srgb, var(--secondary) 24%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus-visible {
|
||||||
|
outline: 2px solid var(--focus-ring);
|
||||||
|
outline-offset: 3px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
max-width: 1390px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body {
|
||||||
|
box-sizing: border-box;
|
||||||
|
grid-template-columns: minmax(220px, 255px) minmax(0, 780px) minmax(205px, 250px);
|
||||||
|
column-gap: clamp(1.5rem, 3vw, 3.25rem);
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body .sidebar {
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 4.25rem 0.6rem 2rem;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body .center {
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 clamp(0.25rem, 1.25vw, 1rem) 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body .center::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 3.3rem -1.2rem 1.5rem;
|
||||||
|
z-index: -1;
|
||||||
|
border-inline: 1px solid color-mix(in srgb, var(--lightgray) 65%, transparent);
|
||||||
|
box-shadow: 0 1.1rem 2.8rem -2.2rem var(--paper-shadow);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
font-size: 1.02rem;
|
||||||
|
hanging-punctuation: first last;
|
||||||
|
}
|
||||||
|
|
||||||
|
article > p,
|
||||||
|
article > ul,
|
||||||
|
article > ol,
|
||||||
|
article > blockquote {
|
||||||
|
max-width: 70ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
article p {
|
||||||
|
margin: 0.85rem 0 1.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
color: var(--dark);
|
||||||
|
font-family: var(--headerFont);
|
||||||
|
line-height: 1.13;
|
||||||
|
letter-spacing: -0.018em;
|
||||||
|
text-wrap: balance;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-title {
|
||||||
|
margin: 0.35rem 0 0.35rem;
|
||||||
|
font-size: clamp(2.45rem, 5vw, 4rem);
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 0.98;
|
||||||
|
}
|
||||||
|
|
||||||
|
article h2 {
|
||||||
|
margin-top: 2.7rem;
|
||||||
|
padding-bottom: 0.28rem;
|
||||||
|
border-bottom: 1px solid var(--paper-rule);
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
article h3 {
|
||||||
|
margin-top: 2.1rem;
|
||||||
|
font-size: 1.55rem;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
article h4 {
|
||||||
|
margin-top: 1.8rem;
|
||||||
|
font-size: 1.22rem;
|
||||||
|
letter-spacing: 0.025em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration-color: color-mix(in srgb, var(--secondary) 48%, transparent);
|
||||||
|
text-decoration-thickness: 1px;
|
||||||
|
text-underline-offset: 0.16em;
|
||||||
|
}
|
||||||
|
|
||||||
|
article a:not(.internal):not(.tag-link) {
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.internal {
|
||||||
|
border-radius: 2px;
|
||||||
|
background: linear-gradient(to top, var(--highlight) 42%, transparent 42%);
|
||||||
|
padding-inline: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
height: 1px;
|
||||||
|
margin: 2.8rem auto;
|
||||||
|
border: 0;
|
||||||
|
background: linear-gradient(90deg, transparent, var(--gray) 18%, var(--gray) 82%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
position: relative;
|
||||||
|
margin: 1.8rem 0;
|
||||||
|
padding: 0.2rem 1.4rem 0.2rem 1.65rem;
|
||||||
|
border-left: 3px double var(--secondary);
|
||||||
|
color: var(--darkgray);
|
||||||
|
font-style: italic;
|
||||||
|
background: linear-gradient(90deg, var(--highlight), transparent 78%);
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote::before {
|
||||||
|
content: "“";
|
||||||
|
position: absolute;
|
||||||
|
top: -0.55rem;
|
||||||
|
left: 0.35rem;
|
||||||
|
color: var(--secondary);
|
||||||
|
font-family: var(--headerFont);
|
||||||
|
font-size: 2.5rem;
|
||||||
|
opacity: 0.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code {
|
||||||
|
font-size: 0.86em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
border: 1px solid var(--lightgray);
|
||||||
|
border-radius: 3px;
|
||||||
|
background: var(--code-surface) !important;
|
||||||
|
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--tertiary) 65%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
:not(pre) > code {
|
||||||
|
border: 1px solid color-mix(in srgb, var(--lightgray) 72%, transparent);
|
||||||
|
border-radius: 2px;
|
||||||
|
background: var(--code-surface);
|
||||||
|
padding: 0.08em 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 0.92rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
border-bottom: 2px double var(--gray);
|
||||||
|
color: var(--dark);
|
||||||
|
font-family: var(--headerFont);
|
||||||
|
font-size: 1rem;
|
||||||
|
letter-spacing: 0.035em;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
border-bottom: 1px solid color-mix(in srgb, var(--lightgray) 74%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:nth-child(even) td {
|
||||||
|
background: var(--panel);
|
||||||
|
}
|
||||||
|
|
||||||
|
.callout {
|
||||||
|
border-width: 1px !important;
|
||||||
|
border-radius: 3px !important;
|
||||||
|
background: var(--panel) !important;
|
||||||
|
box-shadow: 0 0.4rem 1.3rem -1rem var(--paper-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.callout-title {
|
||||||
|
font-family: var(--headerFont);
|
||||||
|
letter-spacing: 0.025em;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"] {
|
||||||
|
accent-color: var(--tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title a {
|
||||||
|
color: var(--dark);
|
||||||
|
font-family: var(--titleFont);
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-variant: small-caps;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.075em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title a::after {
|
||||||
|
content: " · commonplace";
|
||||||
|
color: var(--gray);
|
||||||
|
font-size: 0.62rem;
|
||||||
|
font-variant: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.13em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-meta,
|
||||||
|
.breadcrumbs,
|
||||||
|
.tags {
|
||||||
|
color: var(--gray);
|
||||||
|
font-size: 0.76rem;
|
||||||
|
letter-spacing: 0.075em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs {
|
||||||
|
padding-bottom: 0.55rem;
|
||||||
|
border-bottom: 1px solid color-mix(in srgb, var(--lightgray) 72%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar > *:not(.page-title):not(.spacer) {
|
||||||
|
padding-block: 0.75rem;
|
||||||
|
border-top: 1px solid color-mix(in srgb, var(--lightgray) 70%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar h3,
|
||||||
|
.sidebar h4,
|
||||||
|
.explorer .folder-title,
|
||||||
|
.toc .toc-header {
|
||||||
|
font-family: var(--headerFont);
|
||||||
|
letter-spacing: 0.045em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar ul,
|
||||||
|
.sidebar ol,
|
||||||
|
.explorer-content {
|
||||||
|
font-size: 0.83rem;
|
||||||
|
line-height: 1.42;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search > .search-button {
|
||||||
|
border: 1px solid var(--lightgray);
|
||||||
|
border-radius: 2px;
|
||||||
|
background: var(--panel);
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph,
|
||||||
|
.backlinks,
|
||||||
|
.toc {
|
||||||
|
opacity: 0.88;
|
||||||
|
transition: opacity 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph:hover,
|
||||||
|
.backlinks:hover,
|
||||||
|
.toc:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover {
|
||||||
|
border: 1px solid var(--gray);
|
||||||
|
border-radius: 3px;
|
||||||
|
background-color: var(--light);
|
||||||
|
box-shadow: 0 1rem 2.2rem var(--paper-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-link {
|
||||||
|
border: 1px solid color-mix(in srgb, var(--secondary) 35%, var(--lightgray));
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--panel) !important;
|
||||||
|
padding: 0.08rem 0.48rem !important;
|
||||||
|
font-size: 0.76rem;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
article > img,
|
||||||
|
article p > img {
|
||||||
|
box-shadow: 0 0.6rem 1.6rem -1rem var(--paper-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and ($tablet) {
|
||||||
|
.page > #quartz-body {
|
||||||
|
grid-template-columns: minmax(210px, 245px) minmax(0, 1fr);
|
||||||
|
column-gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body .sidebar {
|
||||||
|
padding-top: 3.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body .center::before {
|
||||||
|
right: -0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and ($mobile) {
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr);
|
||||||
|
padding-inline: clamp(1rem, 5vw, 1.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body .sidebar.left {
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.55rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
border-bottom: 1px double var(--paper-rule);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body .sidebar.right {
|
||||||
|
gap: 1rem;
|
||||||
|
padding-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body .sidebar > * {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body .center {
|
||||||
|
padding-inline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > #quartz-body .center::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title a {
|
||||||
|
font-size: 1.45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title a::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-title {
|
||||||
|
font-size: clamp(2.25rem, 12vw, 3.35rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
article h2 {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
article table {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
max-width: calc(100vw - 2rem);
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
scroll-behavior: auto !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
56
quartz/styles/themes/README.md
Normal file
56
quartz/styles/themes/README.md
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
# Tokyo Night
|
||||||
|
|
||||||
|
- Theme: Tokyo Night
|
||||||
|
- Author: tcmmichaelb139
|
||||||
|
|
||||||
|
## Preview
|
||||||
|
|
||||||
|
[Open live preview (Quartz)](https://quartz-themes.github.io/tokyo-night/)
|
||||||
|
|
||||||
|
[Open live preview (Publish)](https://publish.saberzero.one/tokyo-night)
|
||||||
|
|
||||||
|
## Usage (Quartz)
|
||||||
|
|
||||||
|
### GitHub Actions
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
env:
|
||||||
|
THEME_NAME: tokyo-night
|
||||||
|
```
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
- name: Fetch Quartz Theme
|
||||||
|
run: curl -s -S https://raw.githubusercontent.com/saberzero1/quartz-themes/master/action.sh | bash -s -- $THEME_NAME
|
||||||
|
```
|
||||||
|
|
||||||
|
### Automatic install into Quartz repository
|
||||||
|
|
||||||
|
```bash
|
||||||
|
curl -s -S -o action.sh https://raw.githubusercontent.com/saberzero1/quartz-themes/master/action.sh
|
||||||
|
|
||||||
|
./action.sh tokyo-night
|
||||||
|
```
|
||||||
|
|
||||||
|
### Manual install
|
||||||
|
|
||||||
|
Copy [\_index.scss](./_index.scss) into your Quartz repository's `quartz/styles/themes/` directory. (Create the `themes` directory if it does not exist.)
|
||||||
|
|
||||||
|
Then, add the following to your `quartz/styles/custom.scss` file after the `@use "base";` line:
|
||||||
|
|
||||||
|
```scss
|
||||||
|
@use "themes";
|
||||||
|
```
|
||||||
|
|
||||||
|
> [!IMPORTANT]
|
||||||
|
> For dark-only or light-only themes, remember to remove `Component.Darkmode()` from your `quartz.config.ts` file.
|
||||||
|
|
||||||
|
### Quartz Syncer
|
||||||
|
|
||||||
|
> [!IMPORTANT]
|
||||||
|
> This setup method is not yet available. It is currently being tested and will be released in the future.
|
||||||
|
|
||||||
|
## Usage (Publish)
|
||||||
|
|
||||||
|
Download the [publish.css](./publish.css) file and copy it into your Obsidian Publish vault.
|
||||||
|
|
||||||
|
Then, in Obsidian Publish, open the Publish modal and select the `publish.css` file and click the "Publish" button at the bottom.
|
||||||
11382
quartz/styles/themes/_index.scss
Normal file
11382
quartz/styles/themes/_index.scss
Normal file
File diff suppressed because it is too large
Load Diff
8870
quartz/styles/themes/publish.css
Normal file
8870
quartz/styles/themes/publish.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user