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

feat: use Tailwind typography and implement rose pine, WIP

Browse source
This commit is contained in:
Oliver Ladner 2024-10-26 00:28:57 +02:00
commit 08e2883d56
13 changed files with 4750 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

7
pelican/themes/simple/README.md
View file

@ -12,8 +12,15 @@ https://docs.getpelican.com/en/stable/themes.html
https://tailwindcss.com/docs/installation
### Tailwind CSS Typography plugin
```shell
npm install -D @tailwindcss/typography
```
## My requirements for this theme
- WCAG 2.2 :construction:
- Light and dark mode :construction:
- Code highlighting :construction:
- Markdown prettification

52
pelican/themes/simple/package-lock.json generated
View file

@ -5,6 +5,7 @@
"packages": {
"": {
"devDependencies": {
"@tailwindcss/typography": "^0.5.15",
"tailwindcss": "^3.4.13"
}
},
@ -141,6 +142,36 @@
"node": ">=14"
}
},
"node_modules/@tailwindcss/typography": {
"version": "0.5.15",
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.15.tgz",
"integrity": "sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==",
"dev": true,
"license": "MIT",
"dependencies": {
"lodash.castarray": "^4.4.0",
"lodash.isplainobject": "^4.0.6",
"lodash.merge": "^4.6.2",
"postcss-selector-parser": "6.0.10"
},
"peerDependencies": {
"tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20"
}
},
"node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
"version": "6.0.10",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
"dev": true,
"license": "MIT",
"dependencies": {
"cssesc": "^3.0.0",
"util-deprecate": "^1.0.2"
},
"engines": {
"node": ">=4"
}
},
"node_modules/ansi-regex": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
@ -636,6 +667,27 @@
"dev": true,
"license": "MIT"
},
"node_modules/lodash.castarray": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
"integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
"dev": true,
"license": "MIT"
},
"node_modules/lodash.isplainobject": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
"integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
"dev": true,
"license": "MIT"
},
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
"dev": true,
"license": "MIT"
},
"node_modules/lru-cache": {
"version": "10.4.3",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",

1
pelican/themes/simple/package.json
View file

@ -1,5 +1,6 @@
{
"devDependencies": {
"@tailwindcss/typography": "^0.5.15",
"tailwindcss": "^3.4.13"
}
}

112
pelican/themes/simple/static/css/highlight-rp-dawn.css Normal file
View file

@ -0,0 +1,112 @@
/*!
Theme: Rose Pine
Origin: https://rosepinetheme.com/
*/
/* Comment */
.hljs-meta,
.hljs-comment {
color: #9893a5;
}
/* Red */
/*INFO: This keyword, HTML elements, Regex group symbol, CSS units, Terminal Red */
.hljs-tag,
.hljs-doctag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-template-tag,
.hljs-selector-pseudo,
.hljs-selector-attr,
.hljs-variable.language_,
.hljs-deletion {
color: #b4637a;
}
/*Orange */
/*INFO: Number and Boolean constants, Language support constants */
.hljs-variable,
.hljs-template-variable,
.hljs-number,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-link {
color: #d7827e;
}
/* Yellow */
/* INFO: Function parameters, Regex character sets, Terminal Yellow */
.hljs-built_in,
.hljs-attribute {
color: #ea9d34;
}
/* cyan */
/* INFO: Language support functions, CSS HTML elements */
.hljs-selector-tag {
color: #286983;
}
/* light blue */
/* INFO: Object properties, Regex quantifiers and flags, Markdown headings, Terminal Cyan, Markdown code, Import/export keywords */
.hljs-keyword,
.hljs-title.function_,
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-subst,
.hljs-property {
color: #56949f;
}
/*Green*/
/* INFO: Object literal keys, Markdown links, Terminal Green */
.hljs-selector-tag {
color: #56949f;
}
/*Green(er) */
/* INFO: Strings, CSS class names */
.hljs-quote,
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
color: #286983;
}
/* INFO: Function names, CSS property names, Terminal Blue */
.hljs-code,
.hljs-formula,
.hljs-section {
color: #d7827e;
}
/* Magenta */
/*INFO: Control Keywords, Storage Types, Regex symbols and operators, HTML Attributes, Terminal Magenta */
.hljs-name,
.hljs-keyword,
.hljs-operator,
.hljs-keyword,
.hljs-char.escape_,
.hljs-attr {
color: #907aa9;
}
.hljs-punctuation {
color: #575279;
}
.hljs {
background: #faf4ed;
color: #575279;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}

114
pelican/themes/simple/static/css/highlight-rp-moon.css Normal file
View file

@ -0,0 +1,114 @@
/*!
Theme: Rose Pine
Origin: https://rosepinetheme.com/
*/
/* Comment */
.hljs-meta,
.hljs-comment {
color: #6e6a86;
}
/* Red */
/*INFO: This keyword, HTML elements, Regex group symbol, CSS units, Terminal Red */
.hljs-tag,
.hljs-doctag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-template-tag,
.hljs-selector-pseudo,
.hljs-selector-attr,
.hljs-variable.language_,
.hljs-deletion {
color: #eb6f92;
}
/*Orange */
/*INFO: Number and Boolean constants, Language support constants */
.hljs-variable,
.hljs-template-variable,
.hljs-number,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-link {
color: #ea9a97;
}
/* Yellow */
/* INFO: Function parameters, Regex character sets, Terminal Yellow */
.hljs-built_in,
.hljs-attribute {
color: #f6c177;
}
/* cyan */
/* INFO: Language support functions, CSS HTML elements */
.hljs-selector-tag {
color: #3e8fb0;
}
/* light blue */
/* INFO: Object properties, Regex quantifiers and flags, Markdown headings, Terminal Cyan, Markdown code, Import/export keywords */
.hljs-keyword,
.hljs-title.function_,
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-subst,
.hljs-property {
color: #9ccfd8;
}
/*Green*/
/* INFO: Object literal keys, Markdown links, Terminal Green */
.hljs-selector-tag {
color: #9ccfd8;
}
/*Green(er) */
/* INFO: Strings, CSS class names */
.hljs-quote,
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
color: #3e8fb0;
}
/* INFO: Function names, CSS property names, Terminal Blue */
.hljs-code,
.hljs-formula,
.hljs-section {
color: #ea9a97;
}
/* Magenta */
/*INFO: Control Keywords, Storage Types, Regex symbols and operators, HTML Attributes, Terminal Magenta */
.hljs-name,
.hljs-keyword,
.hljs-operator,
.hljs-keyword,
.hljs-char.escape_,
.hljs-attr {
color: #c4a7e7;
}
/* white*/
/* INFO: Variables, Class names, Terminal White */
.hljs-punctuation {
color: #e0def4;
}
.hljs {
background: #232136;
color: #6e6a86;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}

22
pelican/themes/simple/static/css/in.css
View file

@ -1,4 +1,4 @@
@tailwind base; /* Preflight will be injected here */
@tailwind base; /* Preflight is injected here */
@tailwind components;
@tailwind utilities;
@ -9,19 +9,19 @@
@apply font-sans;
}
a {
@apply text-green-600 hover:text-green-300 underline decoration-2 underline-offset-4;
@apply text-rp-moon-iris underline decoration-4 underline-offset-4;
}
h1 {
@apply font-sans text-7xl;
@apply font-sans text-7xl text-rp-moon-gold prose prose-h1:text-rp-moon-gold;
}
h2 {
@apply font-sans text-5xl mb-6 mt-4;
@apply font-sans text-5xl text-rp-moon-gold prose prose-h1:text-rp-moon-gold;
}
h3 {
@apply font-sans text-4xl mb-6 mt-4;
@apply font-sans text-4xl text-rp-moon-gold prose prose-h1:text-rp-moon-gold;
}
h4 {
@apply font-sans text-3xl mb-6 mt-4;
@apply font-sans text-3xl text-rp-moon-gold prose prose-h1:text-rp-moon-gold;
}
h5 {
@apply font-sans text-2xl mb-6 mt-4;
@ -29,14 +29,4 @@
h6 {
@apply font-sans text-xl mb-6 mt-4;
}
ul {
@apply list-disc list-inside;
}
dd {
@apply pl-8;
}
}
.highlight {
@apply bg-gray-300 font-mono m-5 p-5;
/*@apply bg-gray-300 font-mono m-5 p-5 block;*/
}

3217
pelican/themes/simple/static/css/out.css
View file

File diff suppressed because it is too large Load diff

1213
pelican/themes/simple/static/js/highlight.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

54
pelican/themes/simple/tailwind.config.js
View file

@ -1,28 +1,50 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./templates/*.html"],
plugins: [require("@tailwindcss/typography")],
theme: {
//spacing: {},
//fontSize: {
// sm: "0.8rem",
// base: "1.2rem",
// xl: "1.25rem",
// "2xl": "1.563rem",
// "3xl": "1.953rem",
// "4xl": "2.441rem",
// "5xl": "3.052rem",
// "6xl": "4.052rem",
// "7xl": "5.052rem",
//},
//fontFamily: {
//sans: ["Erode", "sans-serif"],
//serif: ["Recia", "serif"],
//},
// We don't use extend as we want to limit certain things like colors,
// fontsize to our own liking
extend: {},
extend: {
colors: {
// rose pine palette: https://rosepinetheme.com/palette/
"rp-moon-base": "#faf4ed", // main background
"rp-moon-surface": "#fffaf3", // navigation background
"rp-moon-overlay": "#f2e9e1", // content background
"rp-moon-foam": "#56949f", // main site title
"rp-moon-text": "#575279",
"rp-moon-muted": "#9893a5",
"rp-moon-subtle": "#797593",
"rp-moon-iris": "#907aa9", // links
"rp-moon-highlight-med": "#dfdad9", // footer
"rp-moon-gold": "#ea9d34", // headings
},
typography: {
DEFAULT: {
css: {
// remove backticks from Typography for inline code
"code::before": {
content: '""',
},
// remove backticks from Typography for inline code
"code::after": {
content: '""',
},
//code: {
// "background-color": "#f4ede8",
// padding: "0.3rem",
//},
//highlight: {
// "background-color": "#e5e7eb",
// padding: "0.3rem",
//},
},
},
},
},
},
plugins: [],
//corePlugins: {
// preflight: false,
//},

4
pelican/themes/simple/templates/archives.html vendored
View file

@ -3,6 +3,9 @@
{% block title %}{{ SITENAME|striptags }} - Archives{% endblock %}
{% block content %}
<div class="prose prose-slate md:prose-lg lg:prose-xl">
<h2>Blog post archive</h2>
All blog posts ever published.
@ -13,4 +16,5 @@
<dd><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></dd>
{% endfor %}
</dl>
</div>
{% endblock %}

25
pelican/themes/simple/templates/article.html vendored
View file

@ -6,11 +6,6 @@
{% block head %}
{{ super() }}
{% import 'translations.html' as translations with context %}
{% if translations.entry_hreflang(article) %}
{{ translations.entry_hreflang(article) }}
{% endif %}
{% if article.description %}
<meta name="description" content="{{article.description}}" />
{% endif %}
@ -22,29 +17,25 @@
{% endblock %}
{% block content %}
<article>
<article class="prose text-rp-moon-text prose-headings:text-rp-moon-iris md:prose-lg lg:prose-xl">
<header>
{% if not article.image %}
<h2>{{ article.title }}</h2>
{% endif %}
{% if article.image %}
<div class="relative overflow-hidden h-[350px]">
<div class="not-prose relative overflow-hidden h-[350px] mb-12">
<img class="w-full h-full object-cover object-center rounded-lg opacity-65" src="/img/banner/{{ article.image }}" alt="" />
<div class="absolute bottom-8 left-0 text-green-300">
<h2><span class="leading-relaxed bg-gray-700 p-2"><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}" class="no-underline text-green-300">{{ article.title }}</a></span></h2>
<div class="absolute bottom-8 left-0 text-rp-moon-gold">
<h2>
<span class="leading-relaxed bg-rp-moon-gold p-2">
<a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}" class="no-underline text-rp-moon-overlay">{{ article.title }}</a>
</span>
</h2>
</div>
</div>
{% endif %}
{% import 'translations.html' as translations with context %}
{{ translations.translations_for(article) }}
</header>
<div class="leading-relaxed">
{{ article.content }}
</div>
<footer>
<p>Published: <time datetime="{{ article.date.isoformat() }}">
{{ article.locale_date }}

23
pelican/themes/simple/templates/base.html vendored
View file

@ -37,23 +37,26 @@
<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[]=recia@400&f[]=erode@600&display=swap" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/theme/css/highlight-rp-dawn.css" />
{% endblock head %}
<script src="/theme/js/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</head>
<body>
<div class="grid grid-cols-5">
<div class="col-span-3 bg-green-400 p-8">
<div class="col-span-3 bg-rp-moon-overlay p-8">
<header>
<hgroup>
<h1 class="font-bold"><a href="{{ SITEURL }}/">{{ SITENAME }}</a></h1>
<h1 class="font-bold text-rp-moon-foam"><a class="no-underline text-rp-moon-foam" href="{{ SITEURL }}/">{{ SITENAME }}</a></h1>
{% if SITESUBTITLE %}
<p class="text-3xl font-bold text-slate-500 italic">{{ SITESUBTITLE }}</p>
<p class="text-3xl font-bold text-rp-moon-muted italic">{{ SITESUBTITLE }}</p>
{% endif %}
</hgroup>
</header>
</div>
<div class="col-span-2">
<nav class="bg-green-700/95 p-4 text-2xl">
<nav class="bg-rp-moon-surface p-4 text-2xl">
<ul class="list-none">
{% for title, link in MENUITEMS %}
<li><a href="{{ link }}" class="no-underline">{{ title }}</a></li>
@ -74,19 +77,19 @@
</ul>
</nav>
</div>
<div class="bg-green-200">
<div class="bg-rp-moon-base">
</div>
<div class="col-span-3 bg-green-200 p-4">
<div class="col-span-3 bg-rp-moon-base p-4">
<main>
{% block content %}
{% endblock %}
</main>
</div>
<div class="bg-green-200">
<div class="bg-rp-moon-base">
</div>
<div class="bg-gradient-to-b from-green-200 from-10% to-green-400/95">
<div class="bg-rp-moon-overlay">
</div>
<div class="col-span-3 pt-20 pb-60 bg-gradient-to-b from-green-200 from-10% to-green-400/95">
<div class="col-span-3 pt-20 pb-60 bg-rp-moon-overlay">
<footer>
<div class="flex justify-between text-center">
<div>Generated by <a href="https://github.com/getpelican/pelican" target="_blank">Pelican</a></div>
@ -95,7 +98,7 @@
</div>
</footer>
</div>
<div class="bg-gradient-to-b from-green-200 from-10% to-green-400/95">
<div class="bg-rp-moon-overlay">
</div>
</div>
</body>

5
pelican/themes/simple/templates/page.html vendored
View file

@ -21,7 +21,7 @@
{% if page.image %}
<div class="relative overflow-hidden h-[350px]">
<div class="relative overflow-hidden h-[350px] mb-12">
<img class="w-full h-full object-cover object-center rounded-lg opacity-65" src="/img/banner/{{ page.image }}" alt="" />
<div class="absolute bottom-8 left-0 text-green-300">
<h2><span class="leading-relaxed bg-gray-700 p-2"><a href="{{ SITEURL }}/{{ page.url }}" rel="bookmark" title="Permalink to {{ page.title|striptags }}" class="no-underline text-green-300">{{ page .title }}</a></span></h2>
@ -33,14 +33,13 @@
</header>
{% import 'translations.html' as translations with context %}
{{ translations.translations_for(page) }}
<div class="leading-relaxed">
<div class="prose prose-slate md:prose-lg lg:prose-xl">
{{ page.content }}
</div>
{% if page.modified %}
<footer>
<p>
Last updated: {{ page.locale_modified }}
</p>
</footer>
{% endif %}