style: adjust pinboard positioning and radius

contao/dca/tl_pinnwand.php

@@ -97,7 +97,7 @@ $GLOBALS['TL_DCA']['tl_pinnwand'] = [
             'exclude' => true,
             'search' => true,
             'inputType' => 'textarea',
-            'eval' => ['mandatory' => true, 'maxlength' => 3000, 'tl_class' => 'clr'],
+            'eval' => ['mandatory' => false, 'maxlength' => 3000, 'tl_class' => 'clr'],
             'sql' => 'text NULL',
         ],
         'link' => [

contao/templates/frontend/pinnwand.html.twig

@@ -14,12 +14,6 @@
         aria-label="{{ entry.headline }}"
       >
         <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 %}
             <h3 class="pin-note__headline">{{ entry.headline }}</h3>
           {% endif %}
@@ -28,6 +22,12 @@
             <div class="pin-note__text">{{ entry.text|e|nl2br }}</div>
           {% endif %}
 
+          {% if entry.imageFigure %}
+            <figure class="pin-note__image-wrap">
+              {% with {figure: entry.imageFigure} %}{{ block('figure_component') }}{% endwith %}
+            </figure>
+          {% endif %}
+
           {% if entry.link %}
             <p class="pin-note__link-wrap">
               <a href="{{ entry.link }}" class="pin-note__link" target="_blank" rel="noopener">Mehr erfahren</a>

public/assets/pinboard.css

@@ -8,6 +8,9 @@
 
 .pinboard {
   --pin-gap: 1.25rem;
+  margin-top: -80px;
+  position: relative;
+  z-index: 1;
 }
 
 .pinboard__surface {
@@ -15,7 +18,7 @@
   min-height: 42rem;
   padding: 1.2rem;
   border: 30px solid #cba888;
-  border-radius: 1.2rem;
+  border-radius: 0.7rem;
   overflow: hidden;
   background:
     radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.18), transparent 42%),
@@ -56,6 +59,7 @@
   width: 18px;
   height: 18px;
   transform: translateX(-50%);
+  z-index: 1;
   border-radius: 50%;
   background: radial-gradient(circle at 35% 35%, #f2f2f2, #979797 68%, #707070 100%);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
@@ -100,6 +104,10 @@
   border-radius: 0.25rem;
 }
 
+figure.pin-note__image-wrap a:hover img {
+  transform: none;
+}
+
 .pin-note__headline {
   margin: 0 0 0.5rem;
   font-size: 1.1rem;