From c188ce1152ed0a15ffed95608a7910b6452fdbfa Mon Sep 17 00:00:00 2001 From: Oliver Ladner Date: Tue, 7 Jan 2025 17:27:27 +0100 Subject: [PATCH] feat: add skip links and note/warn blocks --- static/css/in.css | 25 +++++++++ static/css/out.css | 121 ++++++++++++++++++++++++++------------------ templates/base.html | 5 +- 3 files changed, 100 insertions(+), 51 deletions(-) diff --git a/static/css/in.css b/static/css/in.css index 8febdd4e..76740807 100644 --- a/static/css/in.css +++ b/static/css/in.css @@ -57,3 +57,28 @@ @apply bg-rp-dawn-highlight-low dark:bg-rp-moon-highlight-low; } } + +.note { + @apply bg-rp-dawn-highlight-med dark:bg-rp-moon-highlight-med m-8 p-4; +} +.warn { + @apply bg-rp-dawn-text text-rp-dawn-base dark:bg-rp-moon-text dark:text-rp-moon-base m-8 p-4; +} + +#skiptocontent a { + position: absolute; + top: -40px; + left: 0px; + /*color: white;*/ + /*border-right: 1px solid white;*/ + /*border-bottom: 1px solid white;*/ + z-index: 100; + @apply bg-rp-dawn-text text-rp-dawn-surface dark:bg-rp-moon-text dark:text-rp-moon-surface; +} + +#skiptocontent a:focus { + position: absolute; + left: 0px; + top: 0px; + outline-color: transparent; +} diff --git a/static/css/out.css b/static/css/out.css index 8d46ffaa..d5e7de90 100644 --- a/static/css/out.css +++ b/static/css/out.css @@ -1382,22 +1382,10 @@ code { vertical-align: top; } -.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 { font-size: 1.875rem; line-height: 2.25rem; @@ -1417,10 +1405,6 @@ code { font-weight: 700; } -.font-medium { - font-weight: 500; -} - .uppercase { text-transform: uppercase; } @@ -1434,6 +1418,11 @@ code { color: rgb(86 148 159 / var(--tw-text-opacity, 1)); } +.text-rp-dawn-love { + --tw-text-opacity: 1; + color: rgb(180 99 122 / var(--tw-text-opacity, 1)); +} + .text-rp-dawn-overlay { --tw-text-opacity: 1; color: rgb(242 233 225 / var(--tw-text-opacity, 1)); @@ -1449,16 +1438,6 @@ code { 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 { text-decoration-line: none; } @@ -1469,6 +1448,68 @@ code { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.note { + margin: 2rem; + --tw-bg-opacity: 1; + background-color: rgb(223 218 217 / var(--tw-bg-opacity, 1)); + padding: 1rem; +} + +@media (prefers-color-scheme: dark) { + .note { + --tw-bg-opacity: 1; + background-color: rgb(68 65 90 / var(--tw-bg-opacity, 1)); + } +} + +.warn { + margin: 2rem; + --tw-bg-opacity: 1; + background-color: rgb(87 82 121 / var(--tw-bg-opacity, 1)); + padding: 1rem; + --tw-text-opacity: 1; + color: rgb(250 244 237 / var(--tw-text-opacity, 1)); +} + +@media (prefers-color-scheme: dark) { + .warn { + --tw-bg-opacity: 1; + background-color: rgb(224 222 244 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(35 33 54 / var(--tw-text-opacity, 1)); + } +} + +#skiptocontent a { + position: absolute; + top: -40px; + left: 0px; + /*color: white;*/ + /*border-right: 1px solid white;*/ + /*border-bottom: 1px solid white;*/ + z-index: 100; + --tw-bg-opacity: 1; + background-color: rgb(87 82 121 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(255 250 243 / var(--tw-text-opacity, 1)); +} + +@media (prefers-color-scheme: dark) { + #skiptocontent a { + --tw-bg-opacity: 1; + background-color: rgb(224 222 244 / var(--tw-bg-opacity, 1)); + --tw-text-opacity: 1; + color: rgb(42 39 63 / var(--tw-text-opacity, 1)); + } +} + +#skiptocontent a:focus { + position: absolute; + left: 0px; + top: 0px; + outline-color: transparent; +} + @media (min-width: 768px) { .md\:prose-base { font-size: 1rem; @@ -2003,14 +2044,6 @@ code { } @media (min-width: 768px) { - .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; } @@ -2091,6 +2124,11 @@ code { color: rgb(156 207 216 / var(--tw-text-opacity, 1)); } + .dark\:text-rp-moon-iris { + --tw-text-opacity: 1; + color: rgb(196 167 231 / var(--tw-text-opacity, 1)); + } + .dark\:text-rp-moon-rose { --tw-text-opacity: 1; color: rgb(234 154 151 / var(--tw-text-opacity, 1)); @@ -2100,19 +2138,4 @@ code { --tw-text-opacity: 1; 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/templates/base.html b/templates/base.html index 525e5256..29f8f92c 100644 --- a/templates/base.html +++ b/templates/base.html @@ -57,10 +57,11 @@
+

{{ SITENAME }}

{% if SITESUBTITLE %} -
{{ SITESUBTITLE }}
+

{{ SITESUBTITLE }}

{% endif %}
@@ -98,7 +99,7 @@
-
+
{% block content %} {% endblock %}