From 49ea09bbbe4c8cbbecd4215dda96b30aeae26839 Mon Sep 17 00:00:00 2001 From: Oliver Ladner Date: Thu, 19 Dec 2024 23:22:34 +0100 Subject: [PATCH] fix: headings hierarchy, font sizes, optimize sizes for breakpoints --- static/css/in.css | 10 +- static/css/out.css | 219 ++++++++++++++++++++++++++---------- tailwind.config.js | 231 +++++++++++++++++++------------------- templates/archives.html | 2 +- templates/article.html | 7 +- templates/base.html | 22 ++-- templates/categories.html | 4 +- templates/index.html | 6 +- templates/page.html | 16 +-- 9 files changed, 300 insertions(+), 217 deletions(-) diff --git a/static/css/in.css b/static/css/in.css index 9d0f136f..8febdd4e 100644 --- a/static/css/in.css +++ b/static/css/in.css @@ -26,16 +26,16 @@ @apply font-headings text-rp-dawn-text dark:text-rp-moon-love; } h1 { - @apply text-7xl mb-9; + @apply text-5xl md:text-7xl mb-9; } h2 { - @apply text-5xl mb-9; + @apply text-4xl md:text-5xl mb-9; } h3 { - @apply text-4xl; + @apply text-3xl md:text-4xl; } h4 { - @apply text-3xl; + @apply md:text-3xl; } h5 { @apply text-2xl; @@ -47,7 +47,7 @@ @apply drop-shadow-lg; } dd { - @apply ml-24; + @apply ml-12 md:ml-24; } } diff --git a/static/css/out.css b/static/css/out.css index 5fe8c5e0..8d46ffaa 100644 --- a/static/css/out.css +++ b/static/css/out.css @@ -107,7 +107,7 @@ } /* -! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com +! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */ /* @@ -550,7 +550,7 @@ video { /* Make elements with the HTML hidden attribute stay hidden by default */ -[hidden] { +[hidden]:where(:not([hidden="until-found"])) { display: none; } @@ -559,7 +559,7 @@ html { /* text-xl == prose-xl */ font-family: Erode, serif; --tw-text-opacity: 1; - color: rgb(87 82 121 / var(--tw-text-opacity)); + color: rgb(87 82 121 / var(--tw-text-opacity, 1)); } @media (min-width: 768px) { @@ -579,19 +579,19 @@ html { @media (prefers-color-scheme: dark) { html { --tw-text-opacity: 1; - color: rgb(196 167 231 / var(--tw-text-opacity)); + color: rgb(196 167 231 / var(--tw-text-opacity, 1)); } } text { --tw-text-opacity: 1; - color: rgb(87 82 121 / var(--tw-text-opacity)); + color: rgb(87 82 121 / var(--tw-text-opacity, 1)); } @media (prefers-color-scheme: dark) { text { --tw-text-opacity: 1; - color: rgb(196 167 231 / var(--tw-text-opacity)); + color: rgb(196 167 231 / var(--tw-text-opacity, 1)); } } @@ -629,7 +629,7 @@ h1, h6 { font-family: Fira Sans, sans-serif; --tw-text-opacity: 1; - color: rgb(87 82 121 / var(--tw-text-opacity)); + color: rgb(87 82 121 / var(--tw-text-opacity, 1)); } @media (prefers-color-scheme: dark) { @@ -640,32 +640,53 @@ h1, h5, h6 { --tw-text-opacity: 1; - color: rgb(235 111 146 / var(--tw-text-opacity)); + color: rgb(235 111 146 / var(--tw-text-opacity, 1)); } } h1 { - margin-bottom: 2.25rem; - font-size: 4.5rem; - line-height: 1; -} - -h2 { margin-bottom: 2.25rem; font-size: 3rem; line-height: 1; } -h3 { +@media (min-width: 768px) { + h1 { + font-size: 4.5rem; + line-height: 1; + } +} + +h2 { + margin-bottom: 2.25rem; font-size: 2.25rem; line-height: 2.5rem; } -h4 { +@media (min-width: 768px) { + h2 { + font-size: 3rem; + line-height: 1; + } +} + +h3 { font-size: 1.875rem; line-height: 2.25rem; } +@media (min-width: 768px) { + h3 { + font-size: 2.25rem; + line-height: 2.5rem; + } + + h4 { + font-size: 1.875rem; + line-height: 2.25rem; + } +} + h5 { font-size: 1.5rem; line-height: 2rem; @@ -682,14 +703,20 @@ img { } dd { - margin-left: 6rem; + margin-left: 3rem; +} + +@media (min-width: 768px) { + dd { + margin-left: 6rem; + } } /* Preflight is injected here */ .prose { color: #575279; - max-width: 65ch; + max-width: 80ch; } .prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { @@ -1162,13 +1189,13 @@ dd { code { --tw-bg-opacity: 1; - background-color: rgb(244 237 232 / var(--tw-bg-opacity)); + background-color: rgb(244 237 232 / var(--tw-bg-opacity, 1)); } @media (prefers-color-scheme: dark) { code { --tw-bg-opacity: 1; - background-color: rgb(42 40 62 / var(--tw-bg-opacity)); + background-color: rgb(42 40 62 / var(--tw-bg-opacity, 1)); } } @@ -1180,8 +1207,12 @@ code { grid-column: span 2 / span 2; } -.col-span-3 { - grid-column: span 3 / span 3; +.col-span-7 { + grid-column: span 7 / span 7; +} + +.col-span-9 { + grid-column: span 9 / span 9; } .m-10 { @@ -1192,10 +1223,18 @@ code { margin: 1rem; } +.-mt-9 { + margin-top: -2.25rem; +} + .mb-3 { margin-bottom: 0.75rem; } +.ml-14 { + margin-left: 3.5rem; +} + .block { display: block; } @@ -1241,8 +1280,8 @@ code { grid-template-columns: repeat(3, minmax(0, 1fr)); } -.grid-cols-5 { - grid-template-columns: repeat(5, minmax(0, 1fr)); +.grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); } .grid-cols-\[max-content_max-content_max-content\] { @@ -1274,38 +1313,43 @@ code { border-bottom-width: 2px; } -.border-b-4 { - border-bottom-width: 4px; -} - .border-t-2 { border-top-width: 2px; } +.border-rp-dawn-gold { + --tw-border-opacity: 1; + border-color: rgb(234 157 52 / var(--tw-border-opacity, 1)); +} + .border-rp-dawn-overlay { --tw-border-opacity: 1; - border-color: rgb(242 233 225 / var(--tw-border-opacity)); + border-color: rgb(242 233 225 / var(--tw-border-opacity, 1)); } .bg-rp-dawn-base { --tw-bg-opacity: 1; - background-color: rgb(250 244 237 / var(--tw-bg-opacity)); + background-color: rgb(250 244 237 / var(--tw-bg-opacity, 1)); } .bg-rp-dawn-overlay { --tw-bg-opacity: 1; - background-color: rgb(242 233 225 / var(--tw-bg-opacity)); + background-color: rgb(242 233 225 / var(--tw-bg-opacity, 1)); } .bg-rp-dawn-surface { --tw-bg-opacity: 1; - background-color: rgb(255 250 243 / var(--tw-bg-opacity)); + background-color: rgb(255 250 243 / var(--tw-bg-opacity, 1)); } .p-1 { padding: 0.25rem; } +.p-3 { + padding: 0.75rem; +} + .p-4 { padding: 1rem; } @@ -1338,8 +1382,20 @@ code { vertical-align: top; } -.font-tags { - font-family: ui-sans-serif, sans-serif; +.align-middle { + vertical-align: middle; +} + +.align-bottom { + vertical-align: bottom; +} + +.font-subheading { + font-family: Stardom, sans-serif; +} + +.font-texts { + font-family: Erode, serif; } .text-3xl { @@ -1352,52 +1408,55 @@ code { line-height: 2.5rem; } -.text-5xl { - font-size: 3rem; - line-height: 1; -} - -.text-sm { - font-size: 0.875rem; - line-height: 1.25rem; -} - .text-xl { font-size: 1.25rem; line-height: 1.75rem; } -.text-xs { - font-size: 0.75rem; - line-height: 1rem; -} - .font-bold { font-weight: 700; } +.font-medium { + font-weight: 500; +} + +.uppercase { + text-transform: uppercase; +} + .italic { font-style: italic; } .text-rp-dawn-foam { --tw-text-opacity: 1; - color: rgb(86 148 159 / var(--tw-text-opacity)); + color: rgb(86 148 159 / var(--tw-text-opacity, 1)); } .text-rp-dawn-overlay { --tw-text-opacity: 1; - color: rgb(242 233 225 / var(--tw-text-opacity)); + color: rgb(242 233 225 / var(--tw-text-opacity, 1)); } .text-rp-dawn-pine { --tw-text-opacity: 1; - color: rgb(40 105 131 / var(--tw-text-opacity)); + color: rgb(40 105 131 / var(--tw-text-opacity, 1)); } .text-rp-dawn-text { --tw-text-opacity: 1; - color: rgb(87 82 121 / var(--tw-text-opacity)); + color: rgb(87 82 121 / var(--tw-text-opacity, 1)); +} + +.text-rp-dawn-rose { + --tw-text-opacity: 1; + color: rgb(215 130 126 / var(--tw-text-opacity, 1)); +} + +.text-rp-dawn-love { + --tw-text-opacity: 1; + color: rgb(180 99 122 / var(--tw-text-opacity, 1)); } .no-underline { @@ -1944,8 +2003,24 @@ code { } @media (min-width: 768px) { - .md\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); + .md\:col-span-4 { + grid-column: span 4 / span 4; + } + + .md\:col-span-5 { + grid-column: span 5 / span 5; + } + + .md\:col-span-3 { + grid-column: span 3 / span 3; + } + + .md\:col-span-6 { + grid-column: span 6 / span 6; + } + + .md\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); } .md\:border-l-4 { @@ -1957,6 +2032,11 @@ code { line-height: 2rem; } + .md\:text-5xl { + font-size: 3rem; + line-height: 1; + } + .md\:text-7xl { font-size: 4.5rem; line-height: 1; @@ -1988,36 +2068,51 @@ code { @media (prefers-color-scheme: dark) { .dark\:border-rp-moon-overlay { --tw-border-opacity: 1; - border-color: rgb(57 53 82 / var(--tw-border-opacity)); + border-color: rgb(57 53 82 / var(--tw-border-opacity, 1)); } .dark\:bg-rp-moon-base { --tw-bg-opacity: 1; - background-color: rgb(35 33 54 / var(--tw-bg-opacity)); + background-color: rgb(35 33 54 / var(--tw-bg-opacity, 1)); } .dark\:bg-rp-moon-overlay { --tw-bg-opacity: 1; - background-color: rgb(57 53 82 / var(--tw-bg-opacity)); + background-color: rgb(57 53 82 / var(--tw-bg-opacity, 1)); } .dark\:bg-rp-moon-surface { --tw-bg-opacity: 1; - background-color: rgb(42 39 63 / var(--tw-bg-opacity)); + background-color: rgb(42 39 63 / var(--tw-bg-opacity, 1)); } .dark\:text-rp-moon-foam { --tw-text-opacity: 1; - color: rgb(156 207 216 / var(--tw-text-opacity)); + color: rgb(156 207 216 / var(--tw-text-opacity, 1)); } .dark\:text-rp-moon-rose { --tw-text-opacity: 1; - color: rgb(234 154 151 / var(--tw-text-opacity)); + color: rgb(234 154 151 / var(--tw-text-opacity, 1)); } .dark\:text-rp-moon-text { --tw-text-opacity: 1; - color: rgb(224 222 244 / var(--tw-text-opacity)); + color: rgb(224 222 244 / var(--tw-text-opacity, 1)); + } + + .dark\:text-rp-moon-gold { + --tw-text-opacity: 1; + color: rgb(246 193 119 / var(--tw-text-opacity, 1)); + } + + .dark\:text-rp-moon-base { + --tw-text-opacity: 1; + color: rgb(35 33 54 / var(--tw-text-opacity, 1)); + } + + .dark\:text-rp-moon-iris { + --tw-text-opacity: 1; + color: rgb(196 167 231 / var(--tw-text-opacity, 1)); } } diff --git a/tailwind.config.js b/tailwind.config.js index 320ce9d1..2dcbdfbf 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,124 +1,121 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["./templates/*.html"], - plugins: [require("@tailwindcss/typography")], - variants: { - typography: ["dark"], + content: ["./templates/*.html"], + plugins: [require("@tailwindcss/typography")], + variants: { + typography: ["dark"], + }, + theme: { + fontFamily: { + texts: ["Erode", "serif"], + headings: ["Fira Sans", "sans-serif"], + subheading: ["Stardom", "sans-serif"], }, - theme: { - fontFamily: { - texts: ["Erode", "serif"], - headings: ["Fira Sans", "sans-serif"], - tags: ["ui-sans-serif", "sans-serif"], - }, - extend: { - // NOTE: this is for non-prose (so not Markdown rendered with typography plugin) - colors: { - // https://rosepinetheme.com/palette/ - "rp-dawn-base": "#faf4ed", // main background - "rp-dawn-surface": "#fffaf3", // navigation background - "rp-dawn-overlay": "#f2e9e1", // content background - "rp-dawn-muted": "#9893a5", - "rp-dawn-subtle": "#797593", - "rp-dawn-text": "#575279", // text - "rp-dawn-love": "#b4637a", - "rp-dawn-gold": "#ea9d34", - "rp-dawn-rose": "#d7827e", - "rp-dawn-pine": "#286983", - "rp-dawn-foam": "#56949f", // main site title - "rp-dawn-iris": "#907aa9", // links - "rp-dawn-highlight-low": "#f4ede8", - "rp-dawn-highlight-med": "#dfdad9", // footer - "rp-dawn-highlight-high": "#cecacd", - "rp-moon-base": "#232136", // main background - "rp-moon-surface": "#2a273f", // navigation background - "rp-moon-overlay": "#393552", // content background - "rp-moon-muted": "#6e6a86", - "rp-moon-subtle": "#908caa", - "rp-moon-text": "#e0def4", - "rp-moon-love": "#eb6f92", - "rp-moon-gold": "#f6c177", - "rp-moon-rose": "#ea9a97", - "rp-moon-pine": "#3e8fb0", - "rp-moon-foam": "#9ccfd8", // main site title - "rp-moon-iris": "#c4a7e7", // text, - "rp-moon-highlight-low": "#2a283e", - "rp-moon-highlight-med": "#44415a", // footer - "rp-moon-highlight-high": "#56526e", + extend: { + // NOTE: this is for non-prose (so not Markdown rendered with typography plugin) + colors: { + // https://rosepinetheme.com/palette/ + "rp-dawn-base": "#faf4ed", // main background + "rp-dawn-surface": "#fffaf3", // navigation background + "rp-dawn-overlay": "#f2e9e1", // content background + "rp-dawn-muted": "#9893a5", + "rp-dawn-subtle": "#797593", + "rp-dawn-text": "#575279", // text + "rp-dawn-love": "#b4637a", + "rp-dawn-gold": "#ea9d34", + "rp-dawn-rose": "#d7827e", + "rp-dawn-pine": "#286983", + "rp-dawn-foam": "#56949f", // main site title + "rp-dawn-iris": "#907aa9", // links + "rp-dawn-highlight-low": "#f4ede8", + "rp-dawn-highlight-med": "#dfdad9", // footer + "rp-dawn-highlight-high": "#cecacd", + "rp-moon-base": "#232136", // main background + "rp-moon-surface": "#2a273f", // navigation background + "rp-moon-overlay": "#393552", // content background + "rp-moon-muted": "#6e6a86", + "rp-moon-subtle": "#908caa", + "rp-moon-text": "#e0def4", + "rp-moon-love": "#eb6f92", + "rp-moon-gold": "#f6c177", + "rp-moon-rose": "#ea9a97", + "rp-moon-pine": "#3e8fb0", + "rp-moon-foam": "#9ccfd8", // main site title + "rp-moon-iris": "#c4a7e7", // text, + "rp-moon-highlight-low": "#2a283e", + "rp-moon-highlight-med": "#44415a", // footer + "rp-moon-highlight-high": "#56526e", + }, + typography: (theme) => ({ + // NOTE: This is for prose (Markdown) in LIGHT mode + DEFAULT: { + css: { + maxWidth: "80ch", + pre: null, + code: null, + "code::before": null, + "code::after": null, + "pre code": null, + "pre code::before": null, + "pre code::after": null, + // remove backticks from typography for inline code + "code::before": { + content: '""', }, - typography: (theme) => ({ - // NOTE: This is for prose (Markdown) in LIGHT mode - DEFAULT: { - css: { - pre: null, - code: null, - "code::before": null, - "code::after": null, - "pre code": null, - "pre code::before": null, - "pre code::after": null, - // remove backticks from typography for inline code - "code::before": { - content: '""', - }, - "code::after": { - content: '""', - }, - color: theme("colors.rp-dawn-text"), // main text - a: { - color: theme("colors.rp-dawn-text"), // align w/ in.css - "text-decoration-color": theme( - "colors.rp-dawn-gold", - ), // align w/ in.css - "text-decoration-thickness": "2px", // align w/ in.css - }, - "h1, h2, h3, h4, h5, h6": { - color: theme("colors.rp-dawn-text"), - }, - blockquote: { - "border-color": theme("colors.rp-dawn-muted"), - "background-color": theme("colors.rp-dawn-overlay"), - color: theme("colors.rp-dawn-text"), - }, - strong: { - color: theme("colors.rp-dawn-text"), // align w/ main text color - fontWeight: "800", - }, - }, - }, - // NOTE: This is for prose (Markdown) in DARK mode - dark: { - css: { - pre: null, - code: null, - "pre code": null, - color: theme("colors.rp-moon-iris"), // main text - a: { - color: theme("colors.rp-moon-iris"), // align w/ in.css - "text-decoration-color": theme( - "colors.rp-moon-pine", - ), // align w/ in.css - "text-decoration-thickness": "2px", // align w/ in.css - }, - "h1, h2, h3, h4, h5, h6": { - color: theme("colors.rp-moon-love"), - }, - blockquote: { - "border-color": theme("colors.rp-moon-overlay"), - "background-color": theme("colors.rp-moon-surface"), - color: theme("colors.rp-moon-text"), - }, - strong: { - color: theme("colors.rp-moon-iris"), // align w/ main text color - fontWeight: "800", - }, - }, - }, - }), + "code::after": { + content: '""', + }, + color: theme("colors.rp-dawn-text"), // main text + a: { + color: theme("colors.rp-dawn-text"), // align w/ in.css + "text-decoration-color": theme("colors.rp-dawn-gold"), // align w/ in.css + "text-decoration-thickness": "2px", // align w/ in.css + }, + "h1, h2, h3, h4, h5, h6": { + color: theme("colors.rp-dawn-text"), + }, + blockquote: { + "border-color": theme("colors.rp-dawn-muted"), + "background-color": theme("colors.rp-dawn-overlay"), + color: theme("colors.rp-dawn-text"), + }, + strong: { + color: theme("colors.rp-dawn-text"), // align w/ main text color + fontWeight: "800", + }, + }, }, + // NOTE: This is for prose (Markdown) in DARK mode + dark: { + css: { + pre: null, + code: null, + "pre code": null, + color: theme("colors.rp-moon-iris"), // main text + a: { + color: theme("colors.rp-moon-iris"), // align w/ in.css + "text-decoration-color": theme("colors.rp-moon-pine"), // align w/ in.css + "text-decoration-thickness": "2px", // align w/ in.css + }, + "h1, h2, h3, h4, h5, h6": { + color: theme("colors.rp-moon-love"), + }, + blockquote: { + "border-color": theme("colors.rp-moon-overlay"), + "background-color": theme("colors.rp-moon-surface"), + color: theme("colors.rp-moon-text"), + }, + strong: { + color: theme("colors.rp-moon-iris"), // align w/ main text color + fontWeight: "800", + }, + }, + }, + }), }, - corePlugins: { - // preflight: false, - divideStyle: true, - }, + }, + corePlugins: { + // preflight: false, + divideStyle: true, + }, }; diff --git a/templates/archives.html b/templates/archives.html index 393a37d5..882148bc 100644 --- a/templates/archives.html +++ b/templates/archives.html @@ -6,7 +6,7 @@

Blog archive

-
+
{% for article in dates %}
{{ article.locale_date }}
{{ article.title }}
diff --git a/templates/article.html b/templates/article.html index a20efe84..d39cf64f 100644 --- a/templates/article.html +++ b/templates/article.html @@ -19,10 +19,10 @@ {% block content %}
-

+

{{ article.title }} # -

+
  • @@ -72,8 +72,7 @@ {% endif %}
{{ article.content }} - -
+
{% if article.category %} diff --git a/templates/base.html b/templates/base.html index e6281227..525e5256 100644 --- a/templates/base.html +++ b/templates/base.html @@ -36,7 +36,7 @@ {% if TAG_FEED_RSS and tag %} {% endif %} - + @@ -53,20 +53,20 @@ {% endblock head %} -
+
-
+

{{ SITENAME }}

{% if SITESUBTITLE %} -

{{ SITESUBTITLE }}

+
{{ SITESUBTITLE }}
{% endif %}
-
-
diff --git a/templates/page.html b/templates/page.html index 041e014d..791ae288 100644 --- a/templates/page.html +++ b/templates/page.html @@ -1,6 +1,5 @@ {% extends "base.html" %} {% block html_lang %}{{ page.lang }}{% endblock %} - {% block title %}{{ SITENAME|striptags }} - {{ page.title|striptags }}{%endblock%} {% block head %} @@ -9,16 +8,9 @@ {% block content %}
-
-

{{ page.title }}

- {{ page.content }} -
- - {% if page.modified %} -
-

-

-
- {% endif %} +
+

{{ page.title }}

+ {{ page.content }} +
{% endblock %}