From 06d2dddb1b18885f5ea87ff94b3298349e826934 Mon Sep 17 00:00:00 2001
From: Dominik Polakovics <dominik.polakovics@cloonar.com>
Date: Mon, 16 Dec 2024 14:09:03 +0100
Subject: [PATCH] feat: design changes

---
 .../hero/templates/frontend.html              |  4 +--
 .../ContentElements/text/assets/frontend.css  |  3 ++
 .../text/templates/frontend.html              | 19 +++++++-----
 .../Extensions/News/Partials/List/Item.html   |  6 ++--
 .../Private/PageView/Layouts/Default.html     |  9 ++----
 .../Public/Scss/abstracts/_fonts.scss         | 31 ++++++++++++++++---
 .../Public/Scss/abstracts/_variables.scss     |  1 +
 .../Public/Scss/components/_buttons.scss      |  4 +++
 .../Public/Scss/components/_news.scss         | 11 ++++++-
 9 files changed, 64 insertions(+), 24 deletions(-)

diff --git a/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
index f9ffa70..22b15bc 100644
--- a/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
+++ b/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://instagram.com" aria-label="Lena Schillings Instagram" class="social-icon"><i class="ci ci-instagram"></i></a>
-        <a href="https://tiktok.com" aria-label="Lena Schillings TikTok" class="social-icon"><i class="ci ci-tiktok"></i></a>
+        <a href="https://www.instagram.com/lena.ats/" aria-label="Lena Schillings Instagram" class="social-icon"><i class="ci ci-instagram"></i></a>
+        <a href="https://www.tiktok.com/@dieschilling" aria-label="Lena Schillings TikTok" class="social-icon"><i class="ci ci-tiktok"></i></a>
       </div>
       <div class="hero-image-wrapper">
         <f:if condition="{data.image}">
diff --git a/packages/base/ContentBlocks/ContentElements/text/assets/frontend.css b/packages/base/ContentBlocks/ContentElements/text/assets/frontend.css
index 102a265..401f875 100644
--- a/packages/base/ContentBlocks/ContentElements/text/assets/frontend.css
+++ b/packages/base/ContentBlocks/ContentElements/text/assets/frontend.css
@@ -1 +1,4 @@
 /* CSS for text content element */
+.frame-type-cloonar_text .text-bodytext {
+    max-width: 750px;
+}
diff --git a/packages/base/ContentBlocks/ContentElements/text/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/text/templates/frontend.html
index 70f6ede..0b463f1 100644
--- a/packages/base/ContentBlocks/ContentElements/text/templates/frontend.html
+++ b/packages/base/ContentBlocks/ContentElements/text/templates/frontend.html
@@ -1,11 +1,14 @@
 <f:layout name="Default" />
 <f:section name="Main">
-  <f:if condition="{data.header}">
-    <f:then><h2>{data.header}</h2></f:then>
-  </f:if>
-  <f:if condition="{data.bodytext}">
-    <f:then>
-      <div class="text-bodytext"><f:format.html>{data.bodytext}</f:format.html></div>
-    </f:then>
-  </f:if>
+    <f:asset.css identifier="CBText" href="{cb:assetPath()}/frontend.css" />
+    <div>
+        <f:if condition="{data.header}">
+            <f:then><h2>{data.header}</h2></f:then>
+        </f:if>
+        <f:if condition="{data.bodytext}">
+            <f:then>
+                <div class="text-bodytext"><f:format.html>{data.bodytext}</f:format.html></div>
+            </f:then>
+        </f:if>
+    </div>
 </f:section>
diff --git a/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html b/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html
index decc7c3..7b3465a 100644
--- a/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html
+++ b/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html
@@ -34,9 +34,9 @@
             </f:then>
         </f:if>
         <div class="news-item-content">
-            <f:if condition="{newsItem.firstCategory}">
-                <div class="news-item-category">{newsItem.firstCategory.title}</div>
-            </f:if>
+            <time itemprop="datePublished" datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}">
+              <f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date>
+            </time>
             <h3 class="news-item-title">{newsItem.title}</h3>
         </div>
     </f:link.page>
diff --git a/packages/base/Resources/Private/PageView/Layouts/Default.html b/packages/base/Resources/Private/PageView/Layouts/Default.html
index 94aa3dd..a5c8fba 100644
--- a/packages/base/Resources/Private/PageView/Layouts/Default.html
+++ b/packages/base/Resources/Private/PageView/Layouts/Default.html
@@ -25,14 +25,11 @@
                     <f:cObject typoscriptObjectPath="lib.dynamicContentSlide" data="{pageUid: '{data.uid}', colPos: '91'}" />
                     <div class="frame site-footer__social">
                         <div class="container">
-                            <a href="https://tiktok.com" target="_blank" rel="noopener noreferrer" title="TikTok">
-                                <i class="ci ci-tiktok"></i>
-                            </a>
-                            <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" title="Instagram">
+                            <a href="https://www.instagram.com/lena.ats/" target="_blank" rel="noopener noreferrer" title="Instagram">
                                 <i class="ci ci-instagram"></i>
                             </a>
-                            <a href="https://x.com" target="_blank" rel="noopener noreferrer" title="X">
-                                <i class="ci ci-x"></i>
+                            <a href="https://www.tiktok.com/@dieschilling" target="_blank" rel="noopener noreferrer" title="TikTok">
+                                <i class="ci ci-tiktok"></i>
                             </a>
                         </div>
                     </div>
diff --git a/packages/base/Resources/Public/Scss/abstracts/_fonts.scss b/packages/base/Resources/Public/Scss/abstracts/_fonts.scss
index 1c3b04a..3bab277 100644
--- a/packages/base/Resources/Public/Scss/abstracts/_fonts.scss
+++ b/packages/base/Resources/Public/Scss/abstracts/_fonts.scss
@@ -20,7 +20,7 @@ body {
   font-weight: 500;
 }
 
-h1, h2, h3 {
+h1, h2 {
   font-family: 'Hajime Sans', sans-serif;
   color: var(--bs-primary);
   font-weight: 400;
@@ -28,6 +28,7 @@ h1, h2, h3 {
 
 h1 {
   text-align: center;
+  font-size: 4.5rem;
 }
 h1 span.tapered {
   background-size: 100% 15%;
@@ -37,11 +38,29 @@ h1 span.tapered {
 }
 
 h2 {
-  font-size: 4rem;
+  font-size: 2rem;
+
+  @media (min-width: $breakpoint-md) {
+    font-size: 3rem;
+  }
+}
+
+h3 {
+  font-size: 1.125rem;
+  font-weight: 600;
+
+  @media (min-width: $breakpoint-md) {
+    font-size: 1.5rem;
+  }
 }
 
 h4 {
-  font-size: 1.5rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+
+  @media (min-width: $breakpoint-md) {
+    font-size: 1.5rem;
+  }
 }
 
 p {
@@ -49,9 +68,13 @@ p {
 }
 
 a {
-    color: var(--cl-primary);
+    color: var(--bs-primary);
     text-decoration: none;
     font-weight: 700;
+
+    &:hover {
+      color: var(--bs-primary-light)
+    }
 }
 
 button, .btn {
diff --git a/packages/base/Resources/Public/Scss/abstracts/_variables.scss b/packages/base/Resources/Public/Scss/abstracts/_variables.scss
index 4e8f74c..942d154 100644
--- a/packages/base/Resources/Public/Scss/abstracts/_variables.scss
+++ b/packages/base/Resources/Public/Scss/abstracts/_variables.scss
@@ -25,6 +25,7 @@ $xl: 1200px;
 
   --bs-primary: #233600;
   --bs-yellow: #F5AE07;
+  --bs-primary-light: #4E5E32;
   --bs-light-green: #F4F6EC;
   --cl-primary: #233600;
 
diff --git a/packages/base/Resources/Public/Scss/components/_buttons.scss b/packages/base/Resources/Public/Scss/components/_buttons.scss
index 71d7460..aeb5af0 100644
--- a/packages/base/Resources/Public/Scss/components/_buttons.scss
+++ b/packages/base/Resources/Public/Scss/components/_buttons.scss
@@ -7,4 +7,8 @@
   padding: 0.75rem 1.5rem;
   border: none;
   cursor: pointer;
+
+  &:hover {
+    background-color: var(--bs-primary-light);
+  }
 }
diff --git a/packages/base/Resources/Public/Scss/components/_news.scss b/packages/base/Resources/Public/Scss/components/_news.scss
index a50cd9e..e9c951f 100644
--- a/packages/base/Resources/Public/Scss/components/_news.scss
+++ b/packages/base/Resources/Public/Scss/components/_news.scss
@@ -110,11 +110,20 @@
         mask-repeat: no-repeat;
         mask-position: center;
         background-color: currentColor;
-        vertical-align: middle;
+        /* vertical-align: middle; */
         mask-image: url(../Icons/angle-right.svg);
       }
     }
 
+    time {
+      font-size: 0.75rem;
+      font-weight: 400;
+
+      @media (min-width: $breakpoint-md) {
+        font-size: 1rem;
+      }
+    }
+
     h3 {
       font-family: 'Inter', sans-serif;
       font-size: 1.25rem;