add styling for meta and credit

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

View file

@ -7,21 +7,20 @@ schema: blog
<div class="wrapper flow prose">
<h1 class="gradient-text">{{ title }}</h1>
{% if image %}
<!-- image -->
{% if image %}{% eleventyImage image, alt or title, null, "eager", "feature" %} {%
endif %}
{% eleventyImage image, alt or title, null, "eager", "feature" %} {% endif %} {% if
credit %}
<!-- credit -->
{% if credit %}
<p class="feature text-step-min-1">© {{ credit }}</p>
<p class="credit feature | text-step-min-1">© {{ credit }}</p>
{% 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 -->
{% set definedDate = date %} {% include "components/date.njk" %}
{% set definedDate = date %} {% include "components/date.njk" %} {% if tags.length >
1 %}
<!-- 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 }}">
{{ tag }}
</a>

View file

@ -17,3 +17,23 @@
object-fit: cover;
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);
}