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

fix: headings hierarchy, font sizes, optimize sizes for breakpoints

Browse source
This commit is contained in:
Oliver Ladner 2024-12-19 23:22:34 +01:00
commit 49ea09bbbe
9 changed files with 298 additions and 215 deletions
Download patch file Download diff file Expand all files Collapse all files

10
static/css/in.css
View file

@ -26,16 +26,16 @@
@apply font-headings text-rp-dawn-text dark:text-rp-moon-love; @apply font-headings text-rp-dawn-text dark:text-rp-moon-love;
} }
h1 { h1 {
@apply text-7xl mb-9; @apply text-5xl md:text-7xl mb-9;
} }
h2 { h2 {
@apply text-5xl mb-9; @apply text-4xl md:text-5xl mb-9;
} }
h3 { h3 {
@apply text-4xl; @apply text-3xl md:text-4xl;
} }
h4 { h4 {
@apply text-3xl; @apply md:text-3xl;
} }
h5 { h5 {
@apply text-2xl; @apply text-2xl;
@ -47,7 +47,7 @@
@apply drop-shadow-lg; @apply drop-shadow-lg;
} }
dd { dd {
@apply ml-24; @apply ml-12 md:ml-24;
} }
} }

219
static/css/out.css
View file

@ -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 */ /* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] { [hidden]:where(:not([hidden="until-found"])) {
display: none; display: none;
} }
@ -559,7 +559,7 @@ html {
/* text-xl == prose-xl */ /* text-xl == prose-xl */
font-family: Erode, serif; font-family: Erode, serif;
--tw-text-opacity: 1; --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) { @media (min-width: 768px) {
@ -579,19 +579,19 @@ html {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html { html {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(196 167 231 / var(--tw-text-opacity)); color: rgb(196 167 231 / var(--tw-text-opacity, 1));
} }
} }
text { text {
--tw-text-opacity: 1; --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) { @media (prefers-color-scheme: dark) {
text { text {
--tw-text-opacity: 1; --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 { h6 {
font-family: Fira Sans, sans-serif; font-family: Fira Sans, sans-serif;
--tw-text-opacity: 1; --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) { @media (prefers-color-scheme: dark) {
@ -640,32 +640,53 @@ h1,
h5, h5,
h6 { h6 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(235 111 146 / var(--tw-text-opacity)); color: rgb(235 111 146 / var(--tw-text-opacity, 1));
} }
} }
h1 { h1 {
margin-bottom: 2.25rem;
font-size: 4.5rem;
line-height: 1;
}
h2 {
margin-bottom: 2.25rem; margin-bottom: 2.25rem;
font-size: 3rem; font-size: 3rem;
line-height: 1; 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; font-size: 2.25rem;
line-height: 2.5rem; line-height: 2.5rem;
} }
h4 { @media (min-width: 768px) {
h2 {
font-size: 3rem;
line-height: 1;
}
}
h3 {
font-size: 1.875rem; font-size: 1.875rem;
line-height: 2.25rem; 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 { h5 {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 2rem; line-height: 2rem;
@ -682,14 +703,20 @@ img {
} }
dd { dd {
margin-left: 6rem; margin-left: 3rem;
}
@media (min-width: 768px) {
dd {
margin-left: 6rem;
}
} }
/* Preflight is injected here */ /* Preflight is injected here */
.prose { .prose {
color: #575279; color: #575279;
max-width: 65ch; max-width: 80ch;
} }
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { .prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
@ -1162,13 +1189,13 @@ dd {
code { code {
--tw-bg-opacity: 1; --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) { @media (prefers-color-scheme: dark) {
code { code {
--tw-bg-opacity: 1; --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; grid-column: span 2 / span 2;
} }
.col-span-3 { .col-span-7 {
grid-column: span 3 / span 3; grid-column: span 7 / span 7;
}
.col-span-9 {
grid-column: span 9 / span 9;
} }
.m-10 { .m-10 {
@ -1192,10 +1223,18 @@ code {
margin: 1rem; margin: 1rem;
} }
.-mt-9 {
margin-top: -2.25rem;
}
.mb-3 { .mb-3 {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.ml-14 {
margin-left: 3.5rem;
}
.block { .block {
display: block; display: block;
} }
@ -1241,8 +1280,8 @@ code {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
} }
.grid-cols-5 { .grid-cols-9 {
grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-columns: repeat(9, minmax(0, 1fr));
} }
.grid-cols-\[max-content_max-content_max-content\] { .grid-cols-\[max-content_max-content_max-content\] {
@ -1274,38 +1313,43 @@ code {
border-bottom-width: 2px; border-bottom-width: 2px;
} }
.border-b-4 {
border-bottom-width: 4px;
}
.border-t-2 { .border-t-2 {
border-top-width: 2px; 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 { .border-rp-dawn-overlay {
--tw-border-opacity: 1; --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 { .bg-rp-dawn-base {
--tw-bg-opacity: 1; --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 { .bg-rp-dawn-overlay {
--tw-bg-opacity: 1; --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 { .bg-rp-dawn-surface {
--tw-bg-opacity: 1; --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 { .p-1 {
padding: 0.25rem; padding: 0.25rem;
} }
.p-3 {
padding: 0.75rem;
}
.p-4 { .p-4 {
padding: 1rem; padding: 1rem;
} }
@ -1338,8 +1382,20 @@ code {
vertical-align: top; vertical-align: top;
} }
.font-tags { .align-middle {
font-family: ui-sans-serif, sans-serif; vertical-align: middle;
}
.align-bottom {
vertical-align: bottom;
}
.font-subheading {
font-family: Stardom, sans-serif;
}
.font-texts {
font-family: Erode, serif;
} }
.text-3xl { .text-3xl {
@ -1352,52 +1408,55 @@ code {
line-height: 2.5rem; line-height: 2.5rem;
} }
.text-5xl {
font-size: 3rem;
line-height: 1;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xl { .text-xl {
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.75rem; line-height: 1.75rem;
} }
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.font-bold { .font-bold {
font-weight: 700; font-weight: 700;
} }
.font-medium {
font-weight: 500;
}
.uppercase {
text-transform: uppercase;
}
.italic { .italic {
font-style: italic; font-style: italic;
} }
.text-rp-dawn-foam { .text-rp-dawn-foam {
--tw-text-opacity: 1; --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 { .text-rp-dawn-overlay {
--tw-text-opacity: 1; --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 { .text-rp-dawn-pine {
--tw-text-opacity: 1; --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 { .text-rp-dawn-text {
--tw-text-opacity: 1; --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 { .no-underline {
@ -1944,8 +2003,24 @@ code {
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.md\:grid-cols-3 { .md\:col-span-4 {
grid-template-columns: repeat(3, minmax(0, 1fr)); 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 { .md\:border-l-4 {
@ -1957,6 +2032,11 @@ code {
line-height: 2rem; line-height: 2rem;
} }
.md\:text-5xl {
font-size: 3rem;
line-height: 1;
}
.md\:text-7xl { .md\:text-7xl {
font-size: 4.5rem; font-size: 4.5rem;
line-height: 1; line-height: 1;
@ -1988,36 +2068,51 @@ code {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.dark\:border-rp-moon-overlay { .dark\:border-rp-moon-overlay {
--tw-border-opacity: 1; --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 { .dark\:bg-rp-moon-base {
--tw-bg-opacity: 1; --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 { .dark\:bg-rp-moon-overlay {
--tw-bg-opacity: 1; --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 { .dark\:bg-rp-moon-surface {
--tw-bg-opacity: 1; --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 { .dark\:text-rp-moon-foam {
--tw-text-opacity: 1; --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 { .dark\:text-rp-moon-rose {
--tw-text-opacity: 1; --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 { .dark\:text-rp-moon-text {
--tw-text-opacity: 1; --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));
} }
} }

231
tailwind.config.js
View file

@ -1,124 +1,121 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ["./templates/*.html"], content: ["./templates/*.html"],
plugins: [require("@tailwindcss/typography")], plugins: [require("@tailwindcss/typography")],
variants: { variants: {
typography: ["dark"], typography: ["dark"],
},
theme: {
fontFamily: {
texts: ["Erode", "serif"],
headings: ["Fira Sans", "sans-serif"],
subheading: ["Stardom", "sans-serif"],
}, },
theme: { extend: {
fontFamily: { // NOTE: this is for non-prose (so not Markdown rendered with typography plugin)
texts: ["Erode", "serif"], colors: {
headings: ["Fira Sans", "sans-serif"], // https://rosepinetheme.com/palette/
tags: ["ui-sans-serif", "sans-serif"], "rp-dawn-base": "#faf4ed", // main background
}, "rp-dawn-surface": "#fffaf3", // navigation background
extend: { "rp-dawn-overlay": "#f2e9e1", // content background
// NOTE: this is for non-prose (so not Markdown rendered with typography plugin) "rp-dawn-muted": "#9893a5",
colors: { "rp-dawn-subtle": "#797593",
// https://rosepinetheme.com/palette/ "rp-dawn-text": "#575279", // text
"rp-dawn-base": "#faf4ed", // main background "rp-dawn-love": "#b4637a",
"rp-dawn-surface": "#fffaf3", // navigation background "rp-dawn-gold": "#ea9d34",
"rp-dawn-overlay": "#f2e9e1", // content background "rp-dawn-rose": "#d7827e",
"rp-dawn-muted": "#9893a5", "rp-dawn-pine": "#286983",
"rp-dawn-subtle": "#797593", "rp-dawn-foam": "#56949f", // main site title
"rp-dawn-text": "#575279", // text "rp-dawn-iris": "#907aa9", // links
"rp-dawn-love": "#b4637a", "rp-dawn-highlight-low": "#f4ede8",
"rp-dawn-gold": "#ea9d34", "rp-dawn-highlight-med": "#dfdad9", // footer
"rp-dawn-rose": "#d7827e", "rp-dawn-highlight-high": "#cecacd",
"rp-dawn-pine": "#286983", "rp-moon-base": "#232136", // main background
"rp-dawn-foam": "#56949f", // main site title "rp-moon-surface": "#2a273f", // navigation background
"rp-dawn-iris": "#907aa9", // links "rp-moon-overlay": "#393552", // content background
"rp-dawn-highlight-low": "#f4ede8", "rp-moon-muted": "#6e6a86",
"rp-dawn-highlight-med": "#dfdad9", // footer "rp-moon-subtle": "#908caa",
"rp-dawn-highlight-high": "#cecacd", "rp-moon-text": "#e0def4",
"rp-moon-base": "#232136", // main background "rp-moon-love": "#eb6f92",
"rp-moon-surface": "#2a273f", // navigation background "rp-moon-gold": "#f6c177",
"rp-moon-overlay": "#393552", // content background "rp-moon-rose": "#ea9a97",
"rp-moon-muted": "#6e6a86", "rp-moon-pine": "#3e8fb0",
"rp-moon-subtle": "#908caa", "rp-moon-foam": "#9ccfd8", // main site title
"rp-moon-text": "#e0def4", "rp-moon-iris": "#c4a7e7", // text,
"rp-moon-love": "#eb6f92", "rp-moon-highlight-low": "#2a283e",
"rp-moon-gold": "#f6c177", "rp-moon-highlight-med": "#44415a", // footer
"rp-moon-rose": "#ea9a97", "rp-moon-highlight-high": "#56526e",
"rp-moon-pine": "#3e8fb0", },
"rp-moon-foam": "#9ccfd8", // main site title typography: (theme) => ({
"rp-moon-iris": "#c4a7e7", // text, // NOTE: This is for prose (Markdown) in LIGHT mode
"rp-moon-highlight-low": "#2a283e", DEFAULT: {
"rp-moon-highlight-med": "#44415a", // footer css: {
"rp-moon-highlight-high": "#56526e", 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) => ({ "code::after": {
// NOTE: This is for prose (Markdown) in LIGHT mode content: '""',
DEFAULT: { },
css: { color: theme("colors.rp-dawn-text"), // main text
pre: null, a: {
code: null, color: theme("colors.rp-dawn-text"), // align w/ in.css
"code::before": null, "text-decoration-color": theme("colors.rp-dawn-gold"), // align w/ in.css
"code::after": null, "text-decoration-thickness": "2px", // align w/ in.css
"pre code": null, },
"pre code::before": null, "h1, h2, h3, h4, h5, h6": {
"pre code::after": null, color: theme("colors.rp-dawn-text"),
// remove backticks from typography for inline code },
"code::before": { blockquote: {
content: '""', "border-color": theme("colors.rp-dawn-muted"),
}, "background-color": theme("colors.rp-dawn-overlay"),
"code::after": { color: theme("colors.rp-dawn-text"),
content: '""', },
}, strong: {
color: theme("colors.rp-dawn-text"), // main text color: theme("colors.rp-dawn-text"), // align w/ main text color
a: { fontWeight: "800",
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",
},
},
},
}),
}, },
// 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, corePlugins: {
divideStyle: true, // preflight: false,
}, divideStyle: true,
},
}; };

2
templates/archives.html
View file

@ -6,7 +6,7 @@
<div class="md:text-base lg:text-lg"> <div class="md:text-base lg:text-lg">
<h2>Blog archive</h2> <h2>Blog archive</h2>
<dl> <dl class="hyphens-auto">
{% for article in dates %} {% for article in dates %}
<dt>{{ article.locale_date }}</dt> <dt>{{ article.locale_date }}</dt>
<dd><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></dd> <dd><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></dd>

7
templates/article.html
View file

@ -19,10 +19,10 @@
{% block content %} {% block content %}
<article class="prose dark:prose-dark md:prose-base lg:prose-lg prose-img:rounded hyphens-auto"> <article class="prose dark:prose-dark md:prose-base lg:prose-lg prose-img:rounded hyphens-auto">
<header> <header>
<h1 class="text-5xl"> <h3 class="text-3xl md:text-5xl">
{{ article.title }}</a> {{ article.title }}</a>
<a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}" class="no-underline text-rp-dawn-overlay">#</a> <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}" class="no-underline text-rp-dawn-overlay">#</a>
</h1> </h3>
<ul class="list-none border-b-2 border-rp-dawn-overlay dark:border-rp-moon-overlay"> <ul class="list-none border-b-2 border-rp-dawn-overlay dark:border-rp-moon-overlay">
<li> <li>
<span class="flex items-center"> <span class="flex items-center">
@ -72,8 +72,7 @@
{% endif %} {% endif %}
</header> </header>
{{ article.content }} {{ article.content }}
<!--<div class="grid grid-cols-3 font-tags text-xs p-5 border-t-2 border-rp-dawn-overlay dark:border-rp-moon-overlay">--> <div class="grid grid-cols-3 p-3 border-t-2 border-rp-dawn-overlay dark:border-rp-moon-overlay">
<div class="grid grid-cols-3 text-sm p-5 border-t-2 border-rp-dawn-overlay dark:border-rp-moon-overlay">
<div class="col-span-1"> <div class="col-span-1">
<!--Category: <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>--> <!--Category: <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>-->
{% if article.category %} {% if article.category %}

22
templates/base.html
View file

@ -36,7 +36,7 @@
{% if TAG_FEED_RSS and tag %} {% if TAG_FEED_RSS and tag %}
<link href="{{ FEED_DOMAIN }}/{% if TAG_FEED_RSS_URL %}{{ TAG_FEED_RSS_URL.format(slug=tag.slug) }}{% else %}{{ TAG_FEED_RSS.format(slug=tag.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME|striptags }} Tags RSS Feed" /> <link href="{{ FEED_DOMAIN }}/{% if TAG_FEED_RSS_URL %}{{ TAG_FEED_RSS_URL.format(slug=tag.slug) }}{% else %}{{ TAG_FEED_RSS.format(slug=tag.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME|striptags }} Tags RSS Feed" />
{% endif %} {% endif %}
<link href="https://api.fontshare.com/v2/css?f[]=erode@400&f[]=fira-sans@600&display=swap" rel="stylesheet"> <link href="https://api.fontshare.com/v2/css?f[]=erode@400&f[]=fira-sans@600&f[]=stardom@400&display=swap" rel="stylesheet">
<script src="/theme/js/prism.js"></script> <script src="/theme/js/prism.js"></script>
<link rel="stylesheet" type="text/css" href="/theme/css/prism.css" /> <link rel="stylesheet" type="text/css" href="/theme/css/prism.css" />
<link rel="stylesheet" type="text/css" href="/theme/css/prism-rose-pine-moon-alt.css" /> <link rel="stylesheet" type="text/css" href="/theme/css/prism-rose-pine-moon-alt.css" />
@ -53,20 +53,20 @@
{% endblock head %} {% endblock head %}
</head> </head>
<body> <body>
<div class="grid grid-cols-5"> <div class="grid grid-cols-9">
<!--header--> <!--header-->
<div class="col-span-3 bg-rp-dawn-overlay dark:bg-rp-moon-overlay p-8"> <div class="col-span-9 md:col-span-6 bg-rp-dawn-overlay dark:bg-rp-moon-overlay p-8">
<header> <header>
<hgroup> <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> <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 %} {% if SITESUBTITLE %}
<h2 class="text-xl md:text-2xl font-bold text-rp-dawn-text italic">{{ SITESUBTITLE }}</h2> <div class="font-subheading text-xl -mt-9 ml-14 md:text-2xl text-rp-dawn-love dark:text-rp-moon-iris">{{ SITESUBTITLE }}</div>
{% endif %} {% endif %}
</hgroup> </hgroup>
</header> </header>
</div> </div>
<div class="col-span-2"> <div class="col-span-9 md:col-span-3 bg-rp-dawn-surface dark:bg-rp-moon-surface p-8 text-xl">
<nav class="bg-rp-dawn-surface dark:bg-rp-moon-surface p-4 text-xl"> <nav class="uppercase">
<ul class="list-none"> <ul class="list-none">
{% if DISPLAY_PAGES_ON_MENU %} {% if DISPLAY_PAGES_ON_MENU %}
<div> <div>
@ -78,7 +78,7 @@
{% for title, link in MENUITEMS %} {% for title, link in MENUITEMS %}
<li><a href="{{ link }}" class="no-underline">{{ title }}</a></li> <li><a href="{{ link }}" class="no-underline">{{ title }}</a></li>
{% endfor %} {% endfor %}
<div class="border-b-4 border-rp-dawn-overlay dark:border-rp-moon-overlay"> <div>
{% for title, link in LINKS %} {% for title, link in LINKS %}
<li><a href="{{ link }}" class="no-underline">{{ title }}</a></li> <li><a href="{{ link }}" class="no-underline">{{ title }}</a></li>
{% endfor %} {% endfor %}
@ -86,7 +86,7 @@
{% if DISPLAY_CATEGORIES_ON_MENU %} {% if DISPLAY_CATEGORIES_ON_MENU %}
<div> <div>
{% for cat, null in categories %} {% for cat, null in categories %}
<li><a href="{{ SITEURL }}/{{ cat.url }}" class="no-underline" {% if cat==category %} aria-current="page" {% endif %}>{{ cat}}</a></li> <li class="border-b-2 border-rp-dawn-gold"><a href="{{ SITEURL }}/{{ cat.url }}" class="no-underline" {% if cat==category %} aria-current="page" {% endif %}>{{ cat}}</a></li>
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
@ -97,7 +97,7 @@
<div class="bg-rp-dawn-base dark:bg-rp-moon-base"> <div class="bg-rp-dawn-base dark:bg-rp-moon-base">
<!--Empty spacer--> <!--Empty spacer-->
</div> </div>
<div class="col-span-3 bg-rp-dawn-base dark:bg-rp-moon-base p-4"> <div class="col-span-7 bg-rp-dawn-base dark:bg-rp-moon-base p-4">
<main> <main>
{% block content %} {% block content %}
{% endblock %} {% endblock %}
@ -110,9 +110,9 @@
<div class="bg-rp-dawn-surface dark:bg-rp-moon-surface"> <div class="bg-rp-dawn-surface dark:bg-rp-moon-surface">
<!--Empty spacer--> <!--Empty spacer-->
</div> </div>
<div class="col-span-3 pt-20 pb-60 bg-rp-dawn-surface dark:bg-rp-moon-surface text-rp-dawn-text dark:text-rp-moon-rose"> <div class="col-span-7 pt-20 pb-60 bg-rp-dawn-surface dark:bg-rp-moon-surface text-rp-dawn-text dark:text-rp-moon-rose">
<footer> <footer>
<div class="grid grid-cols-1 md:grid-cols-3"> <div class="grid grid-cols-1 md:grid-cols-5">
<div class="col-span-2 p-5"> <div class="col-span-2 p-5">
<p> <p>
Generated by <a href="https://getpelican.com" target="_blank">Pelican</a> with a Generated by <a href="https://getpelican.com" target="_blank">Pelican</a> with a

4
templates/categories.html
View file

@ -4,8 +4,8 @@
{% block content %} {% block content %}
<div class="md:text-base lg:text-lg"> <div class="md:text-base lg:text-lg">
<h2>Categories</h2> <h2>Blog categories</h2>
<ul> <ul class="hyphens-auto">
{% for category, articles in categories|sort %} {% for category, articles in categories|sort %}
<li><a href="{{ SITEURL }}/{{ category.url }}">{{ category }}</a> ({{ articles|count }})</li> <li><a href="{{ SITEURL }}/{{ category.url }}">{{ category }}</a> ({{ articles|count }})</li>
{% endfor %} {% endfor %}

6
templates/index.html
View file

@ -1,7 +1,7 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
{% block content_title %} {% block content_title %}
<h1 class="text-5xl">Recent blog posts</h1> <h2>Recent blog posts</h2>
{% endblock %} {% endblock %}
<!--This needs to align to the PAGINATION value in pelicanconf.py--> <!--This needs to align to the PAGINATION value in pelicanconf.py-->
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8"> <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8">
@ -12,8 +12,8 @@
<time datetime="{{ article.date.isoformat() }}" class="italic">{{ article.locale_date }}</time> <time datetime="{{ article.date.isoformat() }}" class="italic">{{ article.locale_date }}</time>
</footer> </footer>
<header> <header>
<h2 class="text-3xl mb-3 hyphens-auto"><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a> <h3 class="text-3xl mb-3 hyphens-auto"><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a>
</h2> </h3>
</header> </header>
<section>{{ article.summary }}</section> <section>{{ article.summary }}</section>
</article> </article>

16
templates/page.html
View file

@ -1,6 +1,5 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block html_lang %}{{ page.lang }}{% endblock %} {% block html_lang %}{{ page.lang }}{% endblock %}
{% block title %}{{ SITENAME|striptags }} - {{ page.title|striptags }}{%endblock%} {% block title %}{{ SITENAME|striptags }} - {{ page.title|striptags }}{%endblock%}
{% block head %} {% block head %}
@ -9,16 +8,9 @@
{% block content %} {% block content %}
<article> <article>
<div class="prose dark:prose-dark md:prose-base lg:prose-lg hyphens-auto"> <div class="prose dark:prose-dark md:prose-base lg:prose-lg hyphens-auto">
<h1 class="text-5xl">{{ page.title }}</h1> <h3 class="text-3xl md:text-5xl">{{ page.title }}</h3>
{{ page.content }} {{ page.content }}
</div> </div>
{% if page.modified %}
<footer>
<p>
</p>
</footer>
{% endif %}
</article> </article>
{% endblock %} {% endblock %}