jbrechtel/roux
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use Quicksand for body, Pompiere for headings

Browse Source 
- Import both Google Fonts in one @import
- body: Quicksand (sans-serif) for main content
- h1, h3: Pompiere (cursive) for titles and section headers
- h2: Quicksand 600 weight, uppercase for subsection labels
- Add .pompiere and .quicksand utility classes
This commit is contained in:
James Brechtel
2026-05-19 09:59:59 -04:00
parent d1582e9034
commit 0bb198555b
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Roux/Html.hs
+8 -6
View File
@@ -79,16 +79,18 @@ page title content =
H.style $
H.toHtml $
T.unlines
[ "@import url('https://fonts.googleapis.com/css2?family=Pompiere&display=swap');"
[ "@import url('https://fonts.googleapis.com/css2?family=Pompiere&family=Quicksand:wght@300..700&display=swap');"
, ""
, ":root { --roux-bg: #F5EFE0; --roux-text: #3D2C1E; --roux-accent: #B85C38; }"
, ".pompiere-regular { font-family: \"Pompiere\", sans-serif; font-weight: 400; font-style: normal; }"
, ".pompiere { font-family: \"Pompiere\", cursive; font-weight: 400; font-style: normal; }"
, ".quicksand { font-family: \"Quicksand\", sans-serif; font-optical-sizing: auto; font-style: normal; }"
, ""
, "body { background: var(--roux-bg); color: var(--roux-text); font-family: \"Pompiere\", serif; }"
, "body { background: var(--roux-bg); color: var(--roux-text); font-family: \"Quicksand\", sans-serif; }"
, "main.container { padding-top: 1.5rem; }"
, "h1 { font-family: \"Pompiere\", serif; font-size: 2rem; font-weight: 500; margin: 0 0 0.5rem; line-height: 1.15; color: var(--roux-text); }"
, "h2 { font-size: 0.75rem; font-weight: 500; margin: 0 0 1rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--roux-accent); }"
, "h3 { font-family: \"Pompiere\", serif; font-size: 1rem; font-weight: 500; margin: 1.5rem 0 0.5rem; color: var(--roux-text); text-transform: uppercase; opacity: 0.75; }"
, "h1, h3 { font-family: \"Pompiere\", cursive; }"
, "h1 { font-size: 2rem; font-weight: 500; margin: 0 0 0.5rem; line-height: 1.15; color: var(--roux-text); }"
, "h2 { font-family: \"Quicksand\", sans-serif; font-size: 0.7rem; font-weight: 600; margin: 0 0 1rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--roux-accent); }"
, "h3 { font-size: 1rem; font-weight: 500; margin: 1.5rem 0 0.5rem; color: var(--roux-text); text-transform: uppercase; opacity: 0.75; }"
, "a { color: var(--roux-accent); text-decoration: none; }"
, "a:hover { text-decoration: underline; }"
, "a[role=button] { --pico-color: var(--roux-accent); }"