GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-19 19:04:06 -06:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #82 from plastic-labs/vince/color-updates

Browse Source 
consistent brand identity. subversive solutions. plastic labs baby
This commit is contained in:
vintro 2024-12-13 17:14:09 -08:00 committed by GitHub
commit b05c8d4e3b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 129 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
quartz.config.ts
View File

@ -21,32 +21,34 @@ const config: QuartzConfig = {
theme: {
cdnCaching: true,
typography: {
header: "Exo 2",
body: "Hind Madurai",
header: "Departure Mono",
body: "Roboto Mono",
code: "Ubuntu Mono",
},
colors: {
lightMode: {
light: "#faf8f8",
lightgray: "#e5e5e5",
gray: "#b8b8b8",
light: "#E2E2E2",
lightgray: "#4e4e4e", //code, graph, outline
gray: "#4e4e4e", // graph nodes
darkgray: "#4e4e4e",
dark: "#2b2b2b",
dark: "#4E4E4E",
secondary: "#4e4e4e",
tertiary: "#FF5A7E",
customCallout: "#db424210",
highlight: "rgba(128, 128, 128, 0.15)",
tertiary: "#C0FFE1",
customCallout: "rgba(183, 255, 236, 0.35)",
highlight: "rgba(128, 128, 128, 0.35)", //code bg, note bg, graph bg (ONLY ON LIGHT MODE)
searchBackground: "#D3D3D3",
},
darkMode: {
light: "#161618",
lightgray: "#393639",
gray: "#646464",
darkgray: "#d4d4d4",
light: "#191919",
lightgray: "#393639", //code, graph edges, outline
gray: "#E2E2E2", //graph nodes
darkgray: "#E2E2E2",
dark: "#ebebec",
secondary: "#7C7C7C",
tertiary: "#09FEF8",
highlight: "rgba(125, 125, 125, 0.15)",
tertiary: "#C0FFE1",
highlight: "rgba(125, 125, 125, 0.15)", //code bg, note bg
customCallout: "#00b8d410",
searchBackground: "#252525",
},
},
},

13
quartz/cfg.ts
View File

@ -73,3 +73,16 @@ export interface FullPageLayout {
export type PageLayout = Pick<FullPageLayout, "beforeBody" | "left" | "right">
export type SharedLayout = Pick<FullPageLayout, "head" | "header" | "footer">
export interface ColorScheme {
light: string
lightgray: string
gray: string
darkgray: string
dark: string
secondary: string
tertiary: string
highlight: string
customCallout: string
searchBackground: string
}

6
quartz/components/styles/explorer.scss
View File

@ -65,6 +65,12 @@ button#explorer {
color: var(--dark);
opacity: 0.75;
pointer-events: all;
transition: all 0.2s ease;
&:hover {
opacity: 1;
color: var(--tertiary);
}
}
}
}

11
quartz/components/styles/graph.scss
View File

@ -14,6 +14,11 @@
margin: 0.5em 0;
position: relative;
overflow: hidden;
background-color: var(--highlight);
[saved-theme="dark"] & {
background-color: var(--light);
}
& > #global-graph-icon {
color: var(--dark);
@ -52,7 +57,7 @@
& > #global-graph-container {
border: 1px solid var(--lightgray);
background-color: var(--light);
background-color: var(--highlight);
border-radius: 5px;
box-sizing: border-box;
position: fixed;
@ -62,6 +67,10 @@
height: 60vh;
width: 50vw;
[saved-theme="dark"] & {
background-color: var(--light);
}
@media all and (max-width: $fullPageWidth) {
width: 90%;
}

4
quartz/components/styles/search.scss
View File

@ -6,7 +6,7 @@
flex-grow: 0.3;
& > #search-icon {
background-color: var(--lightgray);
background-color: var(--searchBackground);
border-radius: 4px;
height: 2rem;
display: flex;
@ -66,7 +66,7 @@
& > * {
width: 100%;
border-radius: 7px;
background: var(--light);
background: var(--searchBackground);
box-shadow:
0 14px 50px rgba(27, 33, 48, 0.12),
0 10px 30px rgba(27, 33, 48, 0.16);

15
quartz/components/styles/toc.scss
View File

@ -44,10 +44,21 @@ button#toc {
color: var(--dark);
opacity: 0.35;
transition:
0.5s ease opacity,
0.3s ease color;
0.2s ease opacity,
0.2s ease color;
&:hover {
opacity: 1;
color: var(--tertiary);
}
&.in-view {
opacity: 0.75;
&:hover {
opacity: 1;
color: var(--tertiary);
}
}
}
}

BIN
quartz/static/DepartureMono-Regular.otf Normal file
View File

Binary file not shown.

36
quartz/styles/base.scss
View File

@ -60,11 +60,14 @@ strong {
a {
font-weight: $semiBoldWeight;
text-decoration: none;
transition: color 0.2s ease;
transition: color 0.2s ease, background-color 0.2s ease;
color: var(--secondary);
&:hover {
color: var(--tertiary) !important;
background-color: var(--highlight);
border-radius: 5px;
padding: 0 0.1rem;
}
&.internal {
@ -74,6 +77,10 @@ a {
border-radius: 5px;
line-height: 1.4rem;
&:hover {
background-color: var(--highlight);
}
&:has(> img) {
background-color: none;
border-radius: 0;
@ -141,6 +148,12 @@ a {
p > strong {
color: var(--dark);
}
p {
letter-spacing: -0.03em;
line-height: 1.5;
font-size: 0.9rem;
}
}
& > #quartz-body {
@ -296,29 +309,33 @@ h6 {
// typography improvements
h1 {
font-size: 1.75rem;
font-size: 33px;
margin-top: 2.25rem;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
h2 {
font-size: 1.4rem;
font-size: 22px;
margin-top: 1.9rem;
margin-bottom: 1rem;
letter-spacing: -0.01em;
}
h3 {
font-size: 1.12rem;
font-size: 22px;
margin-top: 1.62rem;
margin-bottom: 1rem;
letter-spacing: -0.01em;
}
h4,
h5,
h6 {
font-size: 1rem;
font-size: 11px;
margin-top: 1.5rem;
margin-bottom: 1rem;
letter-spacing: 0;
}
figure[data-rehype-pretty-code-figure] {
@ -513,3 +530,12 @@ ol.overflow {
padding-left: 1rem;
}
}
input {
background-color: var(--light);
color: var(--dark);
border: 1px solid var(--lightgray);
border-radius: 5px;
padding: 0.5rem;
}

36
quartz/styles/custom.scss
View File

@ -1,6 +1,10 @@
@use "./base.scss";
// put your custom CSS here!
@font-face {
font-family: "Departure Mono";
src: url("../static/DepartureMono-Regular.otf");
}
// captions!
img + em {
@ -37,8 +41,8 @@ iframe {
.callout {
&[data-callout="custom"] {
--color: var(--tertiary);
--border:var(--tertiary);
--color: var(--darkgray);
--border: var(--tertiary);
--bg: var(--customCallout);
--callout-icon: var(--callout-icon-tip);
}
@ -65,3 +69,31 @@ iframe {
/* } */
/* } */
/* } */
.explorer {
font-size: 0.85rem;
.folder, .file {
a {
font-size: 0.85rem;
font-weight: 200 !important;
}
}
}
.toc {
font-size: 0.85rem;
a {
font-size: 0.85rem;
font-weight: 600 !important;
}
}
body {
font-size: 0.95rem;
}
input[type="search"] {
background-color: var(--searchBackground);
}

3
quartz/util/theme.ts
View File

@ -8,6 +8,7 @@ export interface ColorScheme {
tertiary: string
highlight: string
customCallout: string
searchBackground: string
}
interface Colors {
@ -50,6 +51,7 @@ ${stylesheet.join("\n\n")}
--tertiary: ${theme.colors.lightMode.tertiary};
--highlight: ${theme.colors.lightMode.highlight};
--customCallout: ${theme.colors.lightMode.customCallout};
--searchBackground: ${theme.colors.lightMode.searchBackground};
--headerFont: "${theme.typography.header}", ${DEFAULT_SANS_SERIF};
--bodyFont: "${theme.typography.body}", ${DEFAULT_SANS_SERIF};
@ -66,6 +68,7 @@ ${stylesheet.join("\n\n")}
--tertiary: ${theme.colors.darkMode.tertiary};
--highlight: ${theme.colors.darkMode.highlight};
--customCallout: ${theme.colors.darkMode.customCallout};
--searchBackground: ${theme.colors.darkMode.searchBackground};
}
`
}