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

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 */
[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));
}
}

231
tailwind.config.js
View file

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

2
templates/archives.html
View file

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

7
templates/article.html
View file

@ -19,10 +19,10 @@
{% block content %}
<article class="prose dark:prose-dark md:prose-base lg:prose-lg prose-img:rounded hyphens-auto">
<header>
<h1 class="text-5xl">
<h3 class="text-3xl md:text-5xl">
{{ article.title }}</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">
<li>
<span class="flex items-center">
@ -72,8 +72,7 @@
{% endif %}
</header>
{{ 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 text-sm 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="col-span-1">
<!--Category: <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>-->
{% if article.category %}

22
templates/base.html
View file

@ -36,7 +36,7 @@
{% 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" />
{% 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>
<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" />
@ -53,20 +53,20 @@
{% endblock head %}
</head>
<body>
<div class="grid grid-cols-5">
<div class="grid grid-cols-9">
<!--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>
<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 %}
<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 %}
</hgroup>
</header>
</div>
<div class="col-span-2">
<nav class="bg-rp-dawn-surface dark:bg-rp-moon-surface p-4 text-xl">
<div class="col-span-9 md:col-span-3 bg-rp-dawn-surface dark:bg-rp-moon-surface p-8 text-xl">
<nav class="uppercase">
<ul class="list-none">
{% if DISPLAY_PAGES_ON_MENU %}
<div>
@ -78,7 +78,7 @@
{% for title, link in MENUITEMS %}
<li><a href="{{ link }}" class="no-underline">{{ title }}</a></li>
{% endfor %}
<div class="border-b-4 border-rp-dawn-overlay dark:border-rp-moon-overlay">
<div>
{% for title, link in LINKS %}
<li><a href="{{ link }}" class="no-underline">{{ title }}</a></li>
{% endfor %}
@ -86,7 +86,7 @@
{% if DISPLAY_CATEGORIES_ON_MENU %}
<div>
{% 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 %}
</div>
{% endif %}
@ -97,7 +97,7 @@
<div class="bg-rp-dawn-base dark:bg-rp-moon-base">
<!--Empty spacer-->
</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>
{% block content %}
{% endblock %}
@ -110,9 +110,9 @@
<div class="bg-rp-dawn-surface dark:bg-rp-moon-surface">
<!--Empty spacer-->
</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>
<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">
<p>
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 %}
<div class="md:text-base lg:text-lg">
<h2>Categories</h2>
<ul>
<h2>Blog categories</h2>
<ul class="hyphens-auto">
{% for category, articles in categories|sort %}
<li><a href="{{ SITEURL }}/{{ category.url }}">{{ category }}</a> ({{ articles|count }})</li>
{% endfor %}

6
templates/index.html
View file

@ -1,7 +1,7 @@
{% extends "base.html" %}
{% block content %}
{% block content_title %}
<h1 class="text-5xl">Recent blog posts</h1>
<h2>Recent blog posts</h2>
{% endblock %}
<!--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">
@ -12,8 +12,8 @@
<time datetime="{{ article.date.isoformat() }}" class="italic">{{ article.locale_date }}</time>
</footer>
<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>
</h2>
<h3 class="text-3xl mb-3 hyphens-auto"><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a>
</h3>
</header>
<section>{{ article.summary }}</section>
</article>

16
templates/page.html
View file

@ -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 %}
<article>
<div class="prose dark:prose-dark md:prose-base lg:prose-lg hyphens-auto">
<h1 class="text-5xl">{{ page.title }}</h1>
{{ page.content }}
</div>
{% if page.modified %}
<footer>
<p>
</p>
</footer>
{% endif %}
<div class="prose dark:prose-dark md:prose-base lg:prose-lg hyphens-auto">
<h3 class="text-3xl md:text-5xl">{{ page.title }}</h3>
{{ page.content }}
</div>
</article>
{% endblock %}