1
0
Fork 0
forked from github/pelican

feat: use Tailwind typography and implement rose pine, WIP

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

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

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

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>

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