changes
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
# yaml-language-server: $schema=./quartz/plugins/quartz-plugins.schema.json
|
||||
configuration:
|
||||
pageTitle: Quartz 5
|
||||
pageTitle: Z Notes
|
||||
pageTitleSuffix: ""
|
||||
enableSPA: true
|
||||
enablePopovers: true
|
||||
@@ -16,30 +16,48 @@ configuration:
|
||||
fontOrigin: googleFonts
|
||||
cdnCaching: true
|
||||
typography:
|
||||
header: Schibsted Grotesk
|
||||
body: Source Sans Pro
|
||||
title:
|
||||
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
|
||||
colors:
|
||||
lightMode:
|
||||
light: "#faf8f8"
|
||||
lightgray: "#e5e5e5"
|
||||
gray: "#b8b8b8"
|
||||
darkgray: "#4e4e4e"
|
||||
dark: "#2b2b2b"
|
||||
secondary: "#284b63"
|
||||
tertiary: "#84a59d"
|
||||
highlight: rgba(143, 159, 169, 0.15)
|
||||
textHighlight: "#fff23688"
|
||||
light: "#f4eedf"
|
||||
lightgray: "#d8ccb3"
|
||||
gray: "#a79575"
|
||||
darkgray: "#43382c"
|
||||
dark: "#241c16"
|
||||
secondary: "#7a2632"
|
||||
tertiary: "#365c48"
|
||||
highlight: "rgba(171, 137, 73, 0.18)"
|
||||
textHighlight: "#d7b95f66"
|
||||
darkMode:
|
||||
light: "#161618"
|
||||
lightgray: "#393639"
|
||||
gray: "#646464"
|
||||
darkgray: "#d4d4d4"
|
||||
dark: "#ebebec"
|
||||
secondary: "#7b97aa"
|
||||
tertiary: "#84a59d"
|
||||
highlight: rgba(143, 159, 169, 0.15)
|
||||
textHighlight: "#b3aa0288"
|
||||
light: "#1b1713"
|
||||
lightgray: "#393026"
|
||||
gray: "#74634d"
|
||||
darkgray: "#d8cbb3"
|
||||
dark: "#f0e5cf"
|
||||
secondary: "#c59a59"
|
||||
tertiary: "#78947b"
|
||||
highlight: "rgba(197, 154, 89, 0.17)"
|
||||
textHighlight: "#936f3466"
|
||||
plugins:
|
||||
- source: github:quartz-community/created-modified-date
|
||||
enabled: true
|
||||
@@ -220,7 +238,7 @@ plugins:
|
||||
position: afterBody
|
||||
priority: 10
|
||||
- source: github:quartz-community/footer
|
||||
enabled: true
|
||||
enabled: false
|
||||
options:
|
||||
links:
|
||||
GitHub: https://github.com/jackyzha0/quartz
|
||||
@@ -256,13 +274,6 @@ plugins:
|
||||
position: beforeBody
|
||||
priority: 15
|
||||
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
|
||||
enabled: true
|
||||
options:
|
||||
|
||||
@@ -1,3 +1,430 @@
|
||||
@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