article improvement

i18n/locales/de.json

@@ -276,10 +276,10 @@
         },
         "article": {
             "artikelUebersicht": "Artikelübersicht",
-            "autor": "Autor:",
+            "autor": "Autor",
-            "aktualisiert": "Aktualisiert am:",
+            "date": "Datum",
             "ladenOderNichtGefunden": "Der Artikel wird geladen oder wurde nicht gefunden.",              
-            "kontaktieren": "Jetzt kontaktieren"             
+            "buttonText": "Kontaktieren Sie uns"             
         }
     }  
 

pages/article/[link].vue

@@ -3,51 +3,52 @@
     <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>
 
     <NuxtImg
       v-if="article.image?.url"
       :src="article.image.url"
       :alt="article.image.alternativeText || article.header"
-            class="img_detail"
+      class="img_background"      
-            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>
 
-      <section class="articleBox container">
+    <div class="paper">
-        <div class="content" v-html="htmlContent(article.content)"/>
+        <p class="articleInfo">
+          <span><b>{{ $t('pages.article.autor') }}</b> {{ author }}</span> <span><b>{{ $t('pages.article.date') }}</b> {{ formattedDate }}</span>
+        </p>
+        <h1>{{ article.header }}</h1>
+        <NuxtImg
+          v-if="article.image?.url && screenWidth > 800"
+          :src="article.image.url"
+          :alt="article.image.alternativeText || article.header"
+          class="img_article"
+          provider="strapi"
+          role="img"
+        />
+        <p class="teaser">{{ article.teaser }}</p>
+
+
+      <div class="content" v-html="htmlContent(article.content)"></div>
+
       <button
         class="pinkBtn"
         role="button"
         aria-label="Kontakt aufnehmen"
         @click.prevent="toggleContactBubble"
       >
-          {{ $t('pages.article.kontaktieren') }}
+        {{ $t('pages.article.buttonText') }}
       </button>
-      </section>
     </div>
   </div>
 
-  <div v-else class="container topSpace">
+  <section v-else class="container topSpace">
     <p>{{ $t('pages.article.ladenOderNichtGefunden') }}</p>
-  </div>
+  </section>
 </template>
 
 
+  
   <script setup>
   definePageMeta({  
     name: 'article-link'
@@ -70,6 +71,8 @@
   
   const { t } = useI18n()
 
+  const screenWidth = computed(() => mainStore.screenWidth)
+  
   // Artikel suchen
   const article = computed(() => {
   if (!articles.value) return null
@@ -85,8 +88,8 @@
   // Beispiel Autor und formatierte Datum (kannst du anpassen)
   const author = 'Sabrina Hennrich'
   const formattedDate = computed(() => {
-    if (!article.value?.dateModified) return ''
+    if (!article.value?.createdAt) return ''
-    const d = new Date(article.value.dateModified)
+    const d = new Date(article.value.createdAt)
     return d.toLocaleDateString('de-DE')
   })
 
@@ -161,32 +164,49 @@
   
   <style lang="sass">
   .article
-    margin-top: 2rem
+    margin-top: -1rem
-    .teaserBox
+    .img_background
-      margin-bottom: 1.5rem 
+      position: absolute
+      top: 0
+      left: 0
+      width: 80%
+      height: auto
+      z-index: 0
+      border-bottom-right-radius: 50%
+    .img_article
+      float: right
+      margin: -1rem 0 1rem 2rem
+      border-radius: 1rem
+      width: 45%
+      max-width: 400px
+    .paper
+      background-color: rgba(white, .98)
+      width: 88%
+      margin: 10rem 6% 15vh 6%
+      position: relative
+      z-index: 1
+      border-radius: 1rem
+      border: 1px solid $lightgrey
+      padding: 1rem 6% 2rem 6%
+      box-shadow: 2px 2px 15px 2px rgba(black, .2)
     .teaser
       font-family: 'Mainfont-Bold'
     .articleInfo
       font-size: 0.8rem
-      color: lighten(#333, 50%)
+      color: lighten(#333, 20%)
+      text-align: right
       b
         color: #e91e63
+      span
+        margin-left: 1.5rem
+        display: inline-block
     h1
-      font-size: 1.6rem
+      font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem)
       font-family: 'Mainfont-Bold'
       margin-bottom: 1.5rem
-      line-height: 2.2rem
+      line-height: 140%   
-    .img_detail
+      max-width: 800px
-      width: 90%
+    
-      max-width: 350px
-      float: right
-      margin: 0 5% 2rem 10%
-      border-radius: 1rem
-      //filter: grayscale(100%)
-    .articleBox
-      display: flex
-      flex-direction: column
-      align-items: flex-start
     .content
       line-height: 140%
       hyphens: auto
@@ -202,8 +222,7 @@
         margin-bottom: .5rem
         font-size: 1.05rem
     .pinkBtn
-        clear: both
+      margin-top: 1.5rem
       display: block
-        width: max-content
   </style>
   

pages/magazin/index.vue

@@ -117,7 +117,7 @@ watch(articles, (newVal) => {
         align-items: flex-start
         overflow: hidden
         &:hover
-              transform: scale(1.08)
+              transform: scale(1.05)
 
         .article-link
           position: relative
@@ -154,21 +154,22 @@ watch(articles, (newVal) => {
             position: absolute
             top: 0
             left: 0
-            width: calc(100% - 4rem)
+            width: 80%
-            height: calc(100% - 6rem)
+            height: auto
-            background-color: rgba(255, 255, 255, 0.98)
+            min-height: 60%
-            margin: 1.5rem 3.5rem 4rem 1rem
+            background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.96) ) 
+            margin: 0 20% 7rem 0
             display: flex
             flex-direction: column
             align-items: center
-            justify-content: center
+            justify-content: flex-start
             padding: 1rem
-            //border-top-left-radius: 1rem
+            border-top-left-radius: 1rem
-            //border-top-right-radius: 1rem
+            border-bottom-right-radius: 1rem
-            border-radius: .5rem
+            //border-radius: .5rem
-            text-align: center
+            text-align: left
             transition: .3s
-            box-shadow: 2px 2px 5px 3px rgba(black, .6)
+            box-shadow: 2px 2px 5px 3px rgba(black, .2)
             
 
             h2
@@ -176,8 +177,7 @@ watch(articles, (newVal) => {
               font-size: 1.1rem
               line-height: 140%
               font-family: 'Mainfont-Bold'
-              margin-bottom: 0.5rem
+              margin: .2rem 1rem
-              margin-top: 0.5rem
 
             .mintBtn
               background-color: $primaryColor

pages/sectors/schools/index.vue

@@ -3,10 +3,6 @@
         <HeroBox
             image="/uploads/watercolor_da8a37ce48.webp"
             :aria-label="$t('pages.sectors.schools.hero.ariaLabel')"
-            overlay-image="/uploads/schul_Stifte_613bf7f7d0.webp"
-            overlay-alt-text="Schulmaterial"
-            :overlay-width="'32%'"
-            :overlay-position="{ top: '32%', right: '0' }"
             >
             <h1>{{ $t('pages.sectors.schools.hero.headline1') }}</h1>
             <h2>{{ $t('pages.sectors.schools.hero.headline2') }}</h2>
@@ -25,6 +21,8 @@
                     <h2>Sie möchten sich eine neue Webseite für Ihre Schule oder Ihren Kindergarten erstellen lassen?</h2> 
                 
                 <p> Wir entwickeln moderne, barrierefreie Webseiten, die Eltern, Schüler und Mitarbeitende klar informieren und sich ganz einfach pflegen lassen. </p> 
+                <p>Erfahren Sie worauf es bei Webseiten im Bildungsbereich ankommt.</p>
+                <a class="btn" href="/artikel/auf-was-man-bei-der-erstellung-von-schulwebseiten-achten-sollte">Artikel zum Thema lesen</a>
             </div>
                 
             </div> 

stores/main.ts

@@ -86,7 +86,7 @@ interface NewsArticle {
   content: any
   slug: string
   image?: CompanyLogo | null
-  testfield?: string
+  createdAt: string
   SEO?: SEO | null
   author?: {
     id: number
@@ -321,7 +321,7 @@ export const useMainStore = defineStore('main', {
             teaser: a.teaser,
             content: a.content,
             slug: a.slug,
-            testfield: a.testfield,
+            createdAt: a.createdAt,
             image: a.image?.data
               ? {
                   url: a.image.data.attributes.url,