diff --git a/quartz.config.ts b/quartz.config.ts index f2689fe1f..bed9ee8f6 100644 --- a/quartz.config.ts +++ b/quartz.config.ts @@ -35,7 +35,7 @@ const config: QuartzConfig = { secondary: "#4e4e4e", tertiary: "#C0FFE1", customCallout: "rgba(183, 255, 236, 0.35)", - highlight: "rgba(128, 128, 128, 0.15)", + highlight: "rgba(128, 128, 128, 0.35)", searchBackground: "#D3D3D3", }, darkMode: { diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index 43a915a86..3c1c2a68b 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -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] { @@ -521,3 +538,4 @@ input { border-radius: 5px; padding: 0.5rem; } +