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

feat: image floats, wcag, remove target blank links

Browse source
This commit is contained in:
Oliver Ladner 2025-02-17 11:08:37 +01:00
commit f8ca328568
4 changed files with 93 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

13
static/css/in.css
View file

@ -61,6 +61,11 @@
}
}
/*Hide heading anchor links unless hovering over them*/
.headerlink {
@apply no-underline text-rp-dawn-love ml-1 md:ml-2 hover:no-underline;
}
.note {
@apply bg-rp-dawn-highlight-med dark:bg-rp-moon-highlight-med m-8 p-4;
}
@ -68,6 +73,14 @@
@apply bg-rp-dawn-text text-rp-dawn-base dark:bg-rp-moon-text dark:text-rp-moon-base m-8 p-4;
}
/*Attempt to only float thumbnails to the right*/
.image-process-article-image,
.image-process-thumb,
.image-process-responsive {
/*@apply lg:float-right p-2 lg:p-4;*/
@apply lg:float-right px-1 lg:px-3;
}
#skiptocontent a {
position: absolute;
top: -40px;

75
static/css/out.css
View file

@ -1217,6 +1217,10 @@ 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;
}
@ -1368,6 +1372,16 @@ code {
background-color: rgb(255 250 243 / var(--tw-bg-opacity, 1));
}
.bg-green-600 {
--tw-bg-opacity: 1;
background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-yellow-300 {
--tw-bg-opacity: 1;
background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1));
}
.p-1 {
padding: 0.25rem;
}
@ -1380,10 +1394,6 @@ code {
padding: 1rem;
}
.p-5 {
padding: 1.25rem;
}
.p-8 {
padding: 2rem;
}
@ -1450,11 +1460,6 @@ code {
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));
}
.text-rp-dawn-pine {
--tw-text-opacity: 1;
color: rgb(40 105 131 / var(--tw-text-opacity, 1));
@ -1475,6 +1480,25 @@ code {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
/*Hide heading anchor links unless hovering over them*/
.headerlink {
margin-left: 0.25rem;
--tw-text-opacity: 1;
color: rgb(180 99 122 / var(--tw-text-opacity, 1));
text-decoration-line: none;
}
.headerlink:hover {
text-decoration-line: none;
}
@media (min-width: 768px) {
.headerlink {
margin-left: 0.5rem;
}
}
.note {
margin: 2rem;
--tw-bg-opacity: 1;
@ -1507,6 +1531,26 @@ code {
}
}
/*Attempt to only float thumbnails to the right*/
.image-process-article-image,
.image-process-thumb,
.image-process-responsive {
/*@apply lg:float-right p-2 lg:p-4;*/
padding-left: 0.25rem;
padding-right: 0.25rem;
}
@media (min-width: 1024px) {
.image-process-article-image,
.image-process-thumb,
.image-process-responsive {
float: right;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
#skiptocontent a {
position: absolute;
top: -40px;
@ -2070,6 +2114,11 @@ code {
text-decoration-line: none;
}
.prose-img\:mx-auto :is(:where(img):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
margin-left: auto;
margin-right: auto;
}
.prose-img\:rounded :is(:where(img):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
border-radius: 0.25rem;
}
@ -2083,10 +2132,18 @@ code {
grid-column: span 6 / span 6;
}
.md\:col-span-7 {
grid-column: span 7 / span 7;
}
.md\:grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.md\:grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.md\:border-l-4 {
border-left-width: 4px;
}

6
templates/article.html
View file

@ -1,7 +1,7 @@
{% extends "base.html" %}
{% block html_lang %}{{ article.lang }}{% endblock %}
{% block title %}{{ SITENAME|striptags }} - {{ article.title|striptags }}{% endblock %}
{% block title %}{{ article.title|striptags }} - {{ SITENAME|striptags }}{% endblock %}
{% block head %}
{{ super() }}
@ -17,11 +17,11 @@
{% endblock %}
{% 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 prose-img:mx-auto hyphens-auto">
<header>
<h1 class="text-3xl md:text-5xl">
{{ article.title }}
<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-pine dark:text-rp-moon-iris">#</a>
</h1>
<ul class="list-none border-b-2 border-rp-dawn-overlay dark:border-rp-moon-overlay">
<li>

22
templates/base.html
View file

@ -98,7 +98,7 @@
<div class="bg-rp-dawn-base dark:bg-rp-moon-base">
<!--Empty spacer-->
</div>
<div class="col-span-7 bg-rp-dawn-base dark:bg-rp-moon-base p-4">
<div class="col-span-9 md:col-span-7 bg-rp-dawn-base dark:bg-rp-moon-base p-4">
<main id="content">
{% block content %}
{% endblock %}
@ -111,27 +111,27 @@
<div class="bg-rp-dawn-surface dark:bg-rp-moon-surface">
<!--Empty spacer-->
</div>
<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">
<div class="col-span-9 md: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-5">
<div class="col-span-2 p-5">
<div class="grid grid-cols-1 md:grid-cols-6">
<div class="col-span-3 p-4">
<p>
Generated by <a href="https://getpelican.com" target="_blank">Pelican</a> with a
<a href="https://arrakis.fly.dev/weeheavy/pelican-theme" target="_blank">bespoke</a> theme inspired by <a href="https://rosepinetheme.com" target="_blank">Rosé Pine</a>.
Generated by <a href="https://getpelican.com">Pelican</a> with a
<a href="https://arrakis.fly.dev/weeheavy/pelican-theme">bespoke</a> theme inspired by <a href="https://rosepinetheme.com">Rosé Pine</a>.
</p>
<p>
<a href="https://buymeacoffee.com/lugh" target="_blank"><b>Buy me a coffee?</b></a>
<a href="https://buymeacoffee.com/lugh"><b>Buy me a coffee?</b></a>
</p>
</div>
<div class="p-5 md:border-l-4 border-rp-dawn-overlay dark:border-rp-moon-overlay">
<div class="col-span-3 p-4 md:border-l-4 border-rp-dawn-overlay dark:border-rp-moon-overlay">
<p>
<!--Valid <a href="https://wave.webaim.org/report#/https://lugh.ch" target="_blank">WCAG AAA</a>.-->
Mostly valid <a href="https://wave.webaim.org/report#/https://lugh.ch">WCAG 2.2 AA</a>
</p>
<p>
100% organic content licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display: inline-block">CC BY-SA 4.0</a>
100% organic content licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1" rel="license noopener noreferrer" style="display: inline-block">CC BY-SA 4.0</a>
</p>
<p>
<a href="/feeds/atom.xml" target="_blank">Atom feed</a>
<a href="/feeds/atom.xml">Atom feed</a>
</p>
</div>
</div>