diff --git a/.zed/settings.json b/.zed/settings.json new file mode 100644 index 0000000..f76c1c9 --- /dev/null +++ b/.zed/settings.json @@ -0,0 +1,7 @@ +// Folder-specific settings +// +// For a full list of overridable settings, and general information on folder-specific settings, +// see the documentation: https://zed.dev/docs/configuring-zed#settings-files +{ + "soft_wrap": "editor_width" +} diff --git a/website/public/css/base.css b/website/public/css/base.css index d4c070a..fd5bbf2 100644 --- a/website/public/css/base.css +++ b/website/public/css/base.css @@ -2,6 +2,7 @@ :root { --colour-primary-10: #060300; + --colour-primary-15: #150800; --colour-primary-20: #1f1400; --colour-primary-30: #3c2b00; --colour-primary-40: #5c4300; @@ -26,19 +27,22 @@ --colour-primary-fg: var(--colour-primary-90); --colour-primary-fg-accent: var(--colour-primary-80); --colour-primary-bg: var(--colour-primary-10); + --colour-code-fg: var(--colour-primary-90); + --colour-code-bg: var(--colour-primary-15); --colour-hyperlink: var(--colour-hyperlink-80); --font-size-sm: 1rem; - --font-size-base: 1.25rem; - --font-size-md: 1.75rem; - --font-size-lg: 2.5rem; - --font-size-xl: 3.5rem; + --font-size-base: 1.125rem; + --font-size-md: 1.5rem; + --font-size-lg: 2rem; + --font-size-xl: 3rem; --spacing-block-xs: 0.5rem; --spacing-block-sm: 1.75rem; --spacing-block-md: 2.5rem; --spacing-block-lg: 3.5rem; --spacing-block-xl: 5rem; + --spacing-inline-xs: 0.25rem; --spacing-inline-sm: 0.5rem; --spacing-inline-md: 1.5rem; --spacing-inline-lg: 3rem; @@ -92,9 +96,10 @@ body { img { margin-inline: auto; + height: auto; } -@media (min-width: 36rem) { +@media (min-width: 48rem) { body { display: grid; grid-template-columns: @@ -108,7 +113,7 @@ img { --body-margin-inline-end: 6rem; --grid-margin-inline: 6rem; - --grid-total-width: 36rem; + --grid-total-width: 48rem; --grid-max-content-width: calc( var(--grid-total-width) - var(--body-margin-inline-start) @@ -133,12 +138,6 @@ img { } } -@media (min-width: 48rem) { - body { - --grid-total-width: 48rem; - } -} - /** Headings */ h1 { @@ -262,3 +261,28 @@ blockquote :is(i, em) { .small-caps { font-variant: small-caps; } + +/** Pre-formatted blocks */ +pre { + border: 2px solid var(--colour-primary-fg); + border-radius: 2px; + background-color: var(--colour-code-bg) !important; + margin-block-start: var(--spacing-block-sm); + padding-inline: var(--spacing-inline-sm); + padding-block: var(--spacing-block-xs); +} + +/** Code blocks */ +code { + border: 2px solid var(--colour-primary-fg); + border-radius: 2px; + padding-inline: var(--spacing-inline-xs); + color: var(--colour-code-fg); + background-color: var(--colour-code-bg); + font-size: var(--font-size-sm); +} +pre code { + border: none; + border-radius: none; + padding: none; +} diff --git a/website/src/components/BlogFeed.astro b/website/src/components/BlogFeed.astro index f1559b9..5d5f727 100644 --- a/website/src/components/BlogFeed.astro +++ b/website/src/components/BlogFeed.astro @@ -64,7 +64,7 @@ const canonicalBlogUrl = new URL('blog', Astro.site)