From ae39985f4cb5969df4c06342062fc800b90b882d Mon Sep 17 00:00:00 2001
From: Sabrina Hennrich <sabrina@digimedialoop.de>
Date: Sun, 8 Jun 2025 21:23:48 +0200
Subject: [PATCH] article optimized

---
 components/Breadcrumbs.vue | 15 ++++---
 pages/article/[link].vue   | 88 ++++++++++++++++++++++----------------
 stores/main.ts             |  2 +-
 3 files changed, 59 insertions(+), 46 deletions(-)

diff --git a/components/Breadcrumbs.vue b/components/Breadcrumbs.vue
index 997db7f..af435b9 100644
--- a/components/Breadcrumbs.vue
+++ b/components/Breadcrumbs.vue
@@ -143,12 +143,12 @@ watch(() => route.fullPath, () => {
 <style lang="sass" scoped>
 .breadcrumbs
   position: fixed
-  top: 22vh
-  left: -5px
+  top: 12vh
+  left: -12px
   background-color: rgba(white, .98)
   border: 1px solid darken($lightgrey, 5%)
   z-index: 22
-  padding: .25rem
+  padding: .2rem 0
   border-top-right-radius: .8rem
   border-bottom-right-radius: .8rem
   transition: all 0.4s ease
@@ -169,6 +169,7 @@ watch(() => route.fullPath, () => {
       svg
         width: 1rem
         height: 1rem
+        transform: translateX(10px)
 
         path
           fill: darken($lightgrey, 20%)
@@ -198,9 +199,9 @@ watch(() => route.fullPath, () => {
         opacity: 0
 
       li
-        font-size: 1.2rem
+        font-size: 1.1rem
         display: flex
-        padding: .5rem
+        padding: 0.1rem .3rem
         align-items: center
         color: $darkgrey
 
@@ -214,7 +215,7 @@ watch(() => route.fullPath, () => {
 
       .close-btn
         cursor: pointer
-        font-size: 1.4rem
+        font-size: 1.2rem
         font-weight: bold
         background-color: darken($beige, 10%)
         color: white
@@ -222,7 +223,7 @@ watch(() => route.fullPath, () => {
         height: 1.5rem
         border-radius: 50%
         position: relative
-        margin: .5rem .5rem 0 2rem
+        margin: .2rem .5rem 0 1rem
 
         &::before
           position: absolute
diff --git a/pages/article/[link].vue b/pages/article/[link].vue
index 179dee6..345b54e 100644
--- a/pages/article/[link].vue
+++ b/pages/article/[link].vue
@@ -3,43 +3,43 @@
     <SideBarNaviSlider link="/wissenswertes">
       {{ $t('pages.article.artikelUebersicht') }}
     </SideBarNaviSlider>
+    <div class="paper">
 
-    <section class="teaserBox topSpace">
-      <div class="container-10">
-        <p class="articleInfo">
-          <b>{{ $t('pages.article.autor') }}</b> {{ author }} <!--|
-          <b>{{ $t('pages.article.aktualisiert') }}</b> {{ formattedDate }}-->
-        </p>
+      <section class="teaserBox topSpace">
+        <div class="container-10">
+          <p class="articleInfo">
+            <b>{{ $t('pages.article.autor') }}</b> {{ author }} <!--|
+            <b>{{ $t('pages.article.aktualisiert') }}</b> {{ formattedDate }}-->
+          </p>
 
-        <NuxtImg
-          v-if="article.image?.url"
-          :src="article.image.url"
-          :alt="article.image.alternativeText || article.header"
-          class="img_detail"
-          width="350"
-          height="auto"
-          priority
-          provider="strapi"
-          :sizes="'(max-width: 600px) 90vw, 350px'"
-          role="img"
-        />
+          <NuxtImg
+            v-if="article.image?.url"
+            :src="article.image.url"
+            :alt="article.image.alternativeText || article.header"
+            class="img_detail"
+            width="350"
+            height="auto"
+            provider="strapi"
+            :sizes="'(max-width: 600px) 90vw, 350px'"
+            role="img"
+          />
+          <h1>{{ article.header }}</h1>
+          <p class="teaser">{{ article.teaser }}</p>
+        </div>
+      </section>
 
-        <h1>{{ article.header }}</h1>
-        <p class="teaser">{{ article.teaser }}</p>
-      </div>
-    </section>
-
-    <section class="articleBox container">
-      <div class="content" v-html="htmlContent(article.content)"/>
-      <button
-        class="pinkBtn"
-        role="button"
-        aria-label="Kontakt aufnehmen"
-        @click.prevent="toggleContactBubble"
-      >
-        {{ $t('pages.article.kontaktieren') }}
-      </button>
-    </section>
+      <section class="articleBox container">
+        <div class="content" v-html="htmlContent(article.content)"/>
+        <button
+          class="pinkBtn"
+          role="button"
+          aria-label="Kontakt aufnehmen"
+          @click.prevent="toggleContactBubble"
+        >
+          {{ $t('pages.article.kontaktieren') }}
+        </button>
+      </section>
+    </div>
   </div>
 
   <div v-else class="container topSpace">
@@ -159,11 +159,11 @@
 
   </script>
   
-  <style scoped lang="sass">
+  <style lang="sass">
   .article
     margin-top: 2rem
     .teaserBox
-      margin-bottom: 1.5rem !important
+      margin-bottom: 1.5rem 
       .teaser
         font-family: 'Mainfont-Bold'
     .articleInfo
@@ -182,12 +182,24 @@
       float: right
       margin: 0 0 2rem 2rem
       border-radius: 1rem
-      filter: grayscale(100%)
+      //filter: grayscale(100%)
     .articleBox
       display: flex
       flex-direction: column
       align-items: flex-start
-  
+      .content
+        line-height: 140%
+        h2, h3, h4
+          margin: 2rem auto .8rem auto
+        h2
+          font-size: 1.6rem !important
+          color: darken($primaryColor, 40%)
+        h3
+          font-size: 1.3rem !important
+          color: darken($primaryColor, 30%)
+        li
+          margin-bottom: .5rem
+          font-size: 1.05rem
       .pinkBtn
         clear: both
         display: block
diff --git a/stores/main.ts b/stores/main.ts
index 1ef0ae3..b2bd0bd 100644
--- a/stores/main.ts
+++ b/stores/main.ts
@@ -224,7 +224,7 @@ export const useMainStore = defineStore('main', {
           $fetch(`${cfg.cmsBaseUrl}/api/references?populate=projectImages,Technologien,customer&sort=launchDate:desc`, {
             headers: { Authorization: `Bearer ${cfg.cmsToken}` },
           }),
-          $fetch(`${cfg.cmsBaseUrl}/api/newsarticels?populate=image,SEO,author&locale=all`, {
+          $fetch(`${cfg.cmsBaseUrl}/api/newsarticels?populate=image,SEO,author&locale=all&sort=createdAt:desc`, {
             headers: { Authorization: `Bearer ${cfg.cmsToken}` },
           }),
         ])