weeheavy/pelican-theme
1
0
Fork 0
forked from github/pelican
Code Pull requests Activity

feat: add skip links and note/warn blocks

Browse source
This commit is contained in:
Oliver Ladner 2025-01-07 17:27:27 +01:00
commit c188ce1152
3 changed files with 100 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

25
static/css/in.css
View file

@ -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;
}

121
static/css/out.css
View file

@ -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));
}
}

5
templates/base.html
View file

@ -57,10 +57,11 @@
<!--header-->
<div class="col-span-9 md:col-span-6 bg-rp-dawn-overlay dark:bg-rp-moon-overlay p-8">
<header>
<div id="skiptocontent"><a href="#content">skip to main content</a></div>
<hgroup>
<h1 class="text-4xl md:text-7xl font-bold text-rp-dawn-foam"><a class="no-underline text-rp-dawn-pine dark:text-rp-moon-foam" href="{{ SITEURL }}/">{{ SITENAME }}</a></h1>
{% if SITESUBTITLE %}
<div class="font-subheading text-xl -mt-9 ml-14 md:text-2xl text-rp-dawn-love dark:text-rp-moon-iris">{{ SITESUBTITLE }}</div>
<h2 class="font-subheading text-xl -mt-9 ml-14 md:text-2xl text-rp-dawn-love dark:text-rp-moon-iris">{{ SITESUBTITLE }}</h2>
{% endif %}
</hgroup>
</header>
@ -98,7 +99,7 @@
<!--Empty spacer-->
</div>
<div class="col-span-7 bg-rp-dawn-base dark:bg-rp-moon-base p-4">
<main>
<main id="content">
{% block content %}
{% endblock %}
</main>