walkah/blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

💄 simple layout

Browse Source
This commit is contained in:
James Walker
2022-11-11 23:26:39 -05:00
parent c023d0e7e4
commit 2592e84d07
7 changed files with 419 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/layouts/default.njk
View File

@ -12,7 +12,7 @@
<body class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
<div class="container max-w-2xl mb-24 mt-8 mx-auto">
<div class="px-5 md:px-8">
<main id="main">
<main id="main" class="prose lg:prose-lg dark:prose-invert">
{% block content %}
{% endblock content %}
</main>

47
_includes/layouts/post.njk
View File

@ -5,21 +5,34 @@
{% set codeinjection_foot = post.codeinjection_foot %}
{% block content %}
<article class="h-entry prose lg:prose-lg dark:prose-invert" role="article">
<header>
<h1 class="p-name">{{ title }}</h1>
<time class="dt-published" datetime={{ post.published_at }} pubdate><a class="u-url text-gray-500 text-sm" href={{ post.url }}>{{ post.published_at }}</a></time>
</header>
{% if post.feature_image %}
<figure class="md:-mx-12">
<img class="u-featured rounded-md shadow-md w-full" src="{{ post.feature_image }}" alt="{{ title }}">
</figure>
{% endif %}
<section class="e-content load-external-scripts">
{{ content | safe}}
</section>
<footer class="flex flex-row not-prose">
</footer>
</article>
<article class="h-entry prose lg:prose-lg dark:prose-invert" role="article">
<header>
<h1 class="p-name">{{ title }}</h1>
</header>
{% if post.feature_image %}
<figure class="md:-mx-12">
<img class="u-featured rounded-md shadow-md w-full" src="{{ post.feature_image }}" alt="{{ post.feature_image_alt }}">
{% if post.feature_image_caption %}
<figcaption>
<cite>{{ post.feature_image_caption }}</cite>
</figcaption>
{% endif %}
</figure>
{% endif %}
<section class="e-content" load-external-scripts>
{{ content | safe }}
</section>
<footer class="flex flex-row not-prose">
<div rel="author" class="p-author h-card basis-1/2">
<a href="/">
<img class="u-photo w-8 inline-block" src="/images/walkah-avatar.png" > walkah
</a>
</div>
<div class="text-right basis-1/2">
<time class="dt-published" datetime="{{ post.published_at }}" pubdate>
<a class="u-url text-gray-500 text-sm" href="{{ post.url }}">{{ post.date.toLocaleDateString() }}</a>
</time>
</div>
</footer>
</article>
{% endblock %}