forked from github/pelican
fix: headings hierarchy, font sizes, optimize sizes for breakpoints
This commit is contained in:
parent
6c0f3cbd58
commit
49ea09bbbe
9 changed files with 298 additions and 215 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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,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 %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue