article optimized

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

pages/article/[link].vue

@@ -3,6 +3,7 @@
     <SideBarNaviSlider link="/wissenswertes">
       {{ $t('pages.article.artikelUebersicht') }}
     </SideBarNaviSlider>
+    <div class="paper">
 
       <section class="teaserBox topSpace">
         <div class="container-10">
@@ -18,12 +19,10 @@
             class="img_detail"
             width="350"
             height="auto"
-          priority
             provider="strapi"
             :sizes="'(max-width: 600px) 90vw, 350px'"
             role="img"
           />
-
           <h1>{{ article.header }}</h1>
           <p class="teaser">{{ article.teaser }}</p>
         </div>
@@ -41,6 +40,7 @@
         </button>
       </section>
     </div>
+  </div>
 
   <div v-else class="container topSpace">
     <p>{{ $t('pages.article.ladenOderNichtGefunden') }}</p>
@@ -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

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}` },
           }),
         ])