wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add styling for meta and credit

Browse source
This commit is contained in:
madrilene 2024-02-08 09:46:18 +01:00
parent 45f217c71c
commit 2ad496ecf2
2 changed files with 28 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/_layouts/post.njk
View file

@ -7,21 +7,20 @@ schema: blog
<div class="wrapper flow prose"> <div class="wrapper flow prose">
<h1 class="gradient-text">{{ title }}</h1> <h1 class="gradient-text">{{ title }}</h1>
{% if image %}
<!-- image --> <!-- image -->
{% if image %}{% eleventyImage image, alt or title, null, "eager", "feature" %} {% {% eleventyImage image, alt or title, null, "eager", "feature" %} {% endif %} {% if
endif %} credit %}
<!-- credit --> <!-- credit -->
{% if credit %} <p class="credit feature | text-step-min-1">© {{ credit }}</p>
<p class="feature text-step-min-1">© {{ credit }}</p>
{% endif %} {% endif %}
<p class="cluster text-step-min-1" style="--gutter: var(--space-xs-s)"> <p class="meta | cluster" style="--gutter: var(--space-xs-s)">
<!-- date --> <!-- date -->
{% set definedDate = date %} {% include "components/date.njk" %} {% set definedDate = date %} {% include "components/date.njk" %} {% if tags.length >
1 %}
<!-- tags --> <!-- tags -->
{% if tags.length > 1 %} {% for tag in tags %} {% if tag != "posts" %} {% for tag in tags %} {% if tag != "posts" %}
<a class="button post-tag" href="/tags/{{ tag }}"> <a class="button post-tag" href="/tags/{{ tag }}">
{{ tag }} {{ tag }}
</a> </a>

20
src/assets/css/blocks/post.css
View file

@ -17,3 +17,23 @@
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
} }
.date {
font-size: var(--size-step-1);
color: var(--color-text-light);
}
.credit {
font-size: var(--size-step-min-1);
color: var(--color-text-accent);
background-color: var(--color-bg);
padding: var(--space-xs) var(--space-s);
border-radius: var(--border-radius);
transform: translateY(-4ch) translateX(-0.5ch);
max-inline-size: fit-content;
}
.meta {
font-size: var(--size-step-min-1);
margin-block-end: var(--space-m);
}