feat: change button hover, change small textimage design

packages/base/ContentBlocks/ContentElements/hero/assets/frontend.css

@@ -65,8 +65,6 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: var(--bs-primary);
-  color: var(--bs-yellow);
   font-size: 1rem;
   padding: 1rem;
   text-decoration: none;
@@ -74,10 +72,6 @@
   transition: background 0.3s;
 }
 
-.frame-type-cloonar_hero .social-icon:hover {
-  background: var(--bs-primary-light);
-}
-
 .frame-type-cloonar_hero .hero-image-wrapper {
   margin-top: 1rem;
   align-self: flex-end;

packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html

@@ -14,8 +14,8 @@
         <f:format.html>{data.bodytext}</f:format.html>
       </div>
       <div class="hero-social-icons">
-        <a href="https://www.instagram.com/lena.ats/" target="_blank" aria-label="Lena Schillings Instagram" class="social-icon"><i class="ci ci-instagram"></i></a>
+        <a href="https://www.instagram.com/lena.ats/" target="_blank" aria-label="Lena Schillings Instagram" class="btn social-icon"><i class="ci ci-instagram"></i></a>
-        <a href="https://www.tiktok.com/@dieschilling" target="_blank" aria-label="Lena Schillings TikTok" class="social-icon"><i class="ci ci-tiktok"></i></a>
+        <a href="https://www.tiktok.com/@dieschilling" target="_blank" aria-label="Lena Schillings TikTok" class="btn social-icon"><i class="ci ci-tiktok"></i></a>
       </div>
       <div class="hero-image-wrapper">
         <f:if condition="{data.image}">

packages/base/ContentBlocks/ContentElements/textimage/assets/frontend.css

@@ -41,15 +41,12 @@
   flex-direction: column;
 }
 
-/* Size classes apply at all viewports */
-.textimage-image-wrapper.size-25 .textimage-picture {
-}
-
-.textimage-image-wrapper.size-50 .textimage-picture {
-}
-
 /* On larger screens, arrange horizontally for image position settings */
 @media (min-width: 768px) {
+    .textimage-container.size-25 {
+        --gap: 8rem;
+    }
+
   .textimage-container.image-pos-25 {
     flex-direction: row;
   }
@@ -59,9 +56,13 @@
   }
 
     .textimage-image-wrapper.size-25 {
-        flex: 0 0 calc(25% - (var(--gap) / 2));
+        flex: 0 0 calc(40% - (var(--gap) / 2));
     }
 
+    /* .textimage-wrapper.size-25 { */
+    /*     flex: 0 0 calc(40% - (var(--gap) / 2)); */
+    /* } */
+
     .textimage-image-wrapper.size-50 {
         flex: 0 0 calc(50% - (var(--gap) / 2));
     }

packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html

@@ -13,7 +13,7 @@
     <f:then><f:variable name="sizeClass" value="size-50" /></f:then>
   </f:if>
 
-  <div class="textimage-container image-pos-{data.imageorient} fade-in-on-scroll">
+  <div class="textimage-container image-pos-{data.imageorient} {sizeClass} fade-in-on-scroll">
     <div class="textimage-image-wrapper {sizeClass}">
       <f:if condition="{data.image}">
         <f:then>
@@ -53,7 +53,7 @@
         </f:else>
       </f:if>
     </div>
-    <div class="textimage-wrapper">
+    <div class="textimage-wrapper {sizeClass}">
       <f:if condition="{data.header}">
         <h2 class="textimage-header">{data.header}</h2>
         <h3 class="textimage-subheader">{data.subheader}</h3>

packages/base/Resources/Public/Scss/abstracts/_variables.scss

@@ -24,6 +24,7 @@ $xl: 1200px;
   --breakpoint-xl: 1200px;
 
   --bs-primary: #233600;
+  --bs-primary-dark: #1C2B00;
   --bs-yellow: #F5AE07;
   --bs-primary-light: #4E5E32;
   --bs-light-green: #F4F6EC;

packages/base/Resources/Public/Scss/components/_buttons.scss

@@ -10,7 +10,7 @@
   transition: background 0.3s;
 
   &:hover {
-    background-color: var(--bs-primary-light);
+    background-color: var(--bs-primary-dark);
     color: var(--bs-yellow);
   }
 }