Compare commits

..

3 Commits

Author SHA1 Message Date
Jürgen Mummert 2d0018bf1b style: remove pinboard outer padding 2026-04-01 13:51:11 +02:00
Jürgen Mummert 14723880d6 style: adjust pinboard positioning and radius 2026-04-01 13:49:31 +02:00
Jürgen Mummert 6a157f1a26 feat: render text entries before image 2026-04-01 13:43:09 +02:00
2 changed files with 11 additions and 8 deletions
+6 -6
View File
@@ -14,12 +14,6 @@
aria-label="{{ entry.headline }}" aria-label="{{ entry.headline }}"
> >
<div class="pin-note__inner" data-pin-note-inner> <div class="pin-note__inner" data-pin-note-inner>
{% if entry.imageFigure %}
<figure class="pin-note__image-wrap">
{% with {figure: entry.imageFigure} %}{{ block('figure_component') }}{% endwith %}
</figure>
{% endif %}
{% if entry.headline %} {% if entry.headline %}
<h3 class="pin-note__headline">{{ entry.headline }}</h3> <h3 class="pin-note__headline">{{ entry.headline }}</h3>
{% endif %} {% endif %}
@@ -28,6 +22,12 @@
<div class="pin-note__text">{{ entry.text|e|nl2br }}</div> <div class="pin-note__text">{{ entry.text|e|nl2br }}</div>
{% endif %} {% endif %}
{% if entry.imageFigure %}
<figure class="pin-note__image-wrap">
{% with {figure: entry.imageFigure} %}{{ block('figure_component') }}{% endwith %}
</figure>
{% endif %}
{% if entry.link %} {% if entry.link %}
<p class="pin-note__link-wrap"> <p class="pin-note__link-wrap">
<a href="{{ entry.link }}" class="pin-note__link" target="_blank" rel="noopener">Mehr erfahren</a> <a href="{{ entry.link }}" class="pin-note__link" target="_blank" rel="noopener">Mehr erfahren</a>
+5 -2
View File
@@ -2,12 +2,15 @@
width: 100%; width: 100%;
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
padding: 2em; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
.pinboard { .pinboard {
--pin-gap: 1.25rem; --pin-gap: 1.25rem;
margin-top: -80px;
position: relative;
z-index: 1;
} }
.pinboard__surface { .pinboard__surface {
@@ -15,7 +18,7 @@
min-height: 42rem; min-height: 42rem;
padding: 1.2rem; padding: 1.2rem;
border: 30px solid #cba888; border: 30px solid #cba888;
border-radius: 1.2rem; border-radius: 0.7rem;
overflow: hidden; overflow: hidden;
background: background:
radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.18), transparent 42%), radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.18), transparent 42%),