diff --git a/_config.ts b/_config.ts index 3a1033e..857d31a 100644 --- a/_config.ts +++ b/_config.ts @@ -12,8 +12,10 @@ site.use(codeHighlight()); site.use(googleFonts({ cssFile: "/styles/main.css", placeholder: "/* import fonts */", - // fonts: "https://fonts.google.com/share?selection.family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700", - fonts: "https://fonts.google.com/share?selection.family=JetBrains+Mono:ital,wght@0,100..800;1,100..800", + fonts: { + "Atkinson Hyperlegible": "https://fonts.google.com/share?selection.family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700", + "JetBrains Mono": "https://fonts.google.com/share?selection.family=JetBrains+Mono:ital,wght@0,100..800;1,100..800", + }, })); site.copy("/styles"); diff --git a/styles/main.css b/styles/main.css index 07699fd..fc7acf1 100644 --- a/styles/main.css +++ b/styles/main.css @@ -5,7 +5,7 @@ --color-foreground-dimmed: color-mix(in srgb, var(--color-foreground), transparent 40%); /* --color-accent: #0692aa; */ --max-width: 900px; - --font-base-size: 16px; + --font-base-size: 20px; } @media (prefers-color-scheme: dark) { @@ -19,7 +19,8 @@ } body { - font-family: "JetBrains Mono"; + /* font-family: "JetBrains Mono"; */ + font-family: "Atkinson Hyperlegible"; display: grid; grid-template-rows: auto 1fr auto; min-height: 100svh; @@ -58,8 +59,7 @@ header>nav { text-decoration: underline; } -#site-root { -} +#site-root {} #header-nav-current { font-weight: bold; @@ -70,7 +70,9 @@ main { width: 100%; } -h1, h2, h3 { +h1, +h2, +h3 { margin: 0.5em 0; } @@ -92,3 +94,24 @@ footer { font-size: smaller; color: var(--color-foreground-dimmed); } + +.card { + border: 1px solid var(--color-foreground-dimmed); + border-radius: 16px; + padding: 0.5em 1em; + margin: 1em 0; +} + +.card hr { + margin: 30px -1em 1em; + border: 0; + border-top: 1px solid var(--color-foreground-dimmed); +} + +.pl-badge { + border: 1px solid; + border-radius: 8px; + padding: 0.5em; + margin: 0.25em; + display: inline-block; +} \ No newline at end of file