From a56cda851a4ff75f58b5a70ecbb2c90090405b58 Mon Sep 17 00:00:00 2001 From: Sabrina Hennrich Date: Mon, 9 Jun 2025 10:14:10 +0200 Subject: [PATCH] magazin improvement --- components/SideBarNaviSlider.vue | 2 +- i18n/locales/de.json | 7 ++-- pages/article/[link].vue | 5 ++- pages/magazin/index.vue | 64 +++++++++++++++++++++----------- 4 files changed, 50 insertions(+), 28 deletions(-) diff --git a/components/SideBarNaviSlider.vue b/components/SideBarNaviSlider.vue index bbe35d3..2f436eb 100644 --- a/components/SideBarNaviSlider.vue +++ b/components/SideBarNaviSlider.vue @@ -50,7 +50,7 @@ const props = defineProps({ letter-spacing: .05rem top: 40vh right: -80px // Startposition außerhalb des Bildschirms - padding: 1.2rem .8rem 1.6rem .8rem + padding: 1.2rem .4rem 1.6rem .3rem writing-mode: vertical-lr transform: rotate(180deg) border-bottom-right-radius: 1rem diff --git a/i18n/locales/de.json b/i18n/locales/de.json index f2bd845..ac5c489 100644 --- a/i18n/locales/de.json +++ b/i18n/locales/de.json @@ -266,9 +266,10 @@ } }, "magazin": { - "title": "Wissenswertes rund ums Thema Webseite", - "teaser1": "In unserem Wissensbereich zeigen wir, worauf es bei Suchmaschinen-Optimierung, Barrierefreiheit, Webdesign, Webperformance und Online-Marketing ankommt.", - "teaser2": "Entdecken Sie aktuelle Trends und praxisnahe Tipps, um Ihre Online-Präsenz gezielt zu stärken.", + "title": "Wissenswertes für digitale Entscheider", + "title2": "Webdesign und Webentwicklung, SEO, Performance & AI", + "teaser1": "In unserem Fachmagazin erfahren Sie, wie moderne Webseiten aufgebaut sein müssen, um technisch, inhaltlich und strategisch zu überzeugen. Themen wie KI-gestütztes SEO (AI-SEO), nachhaltige Webentwicklung, Barrierefreiheit, Ladezeit-Optimierung, User Experience und Headless CMS zeigen, worauf es heute im Webdesign wirklich ankommt.", + "teaser2": "Entdecken Sie praxisnahe Insights und zukunftsorientierte Lösungen für mehr Sichtbarkeit, Effizienz und Erfolg im digitalen Raum.", "readmore": "Artikel lesen" }, "article": { diff --git a/pages/article/[link].vue b/pages/article/[link].vue index 345b54e..59c4f90 100644 --- a/pages/article/[link].vue +++ b/pages/article/[link].vue @@ -177,10 +177,10 @@ margin-bottom: 1.5rem line-height: 2.2rem .img_detail - width: 100% + width: 90% max-width: 350px float: right - margin: 0 0 2rem 2rem + margin: 0 5% 2rem 10% border-radius: 1rem //filter: grayscale(100%) .articleBox @@ -189,6 +189,7 @@ align-items: flex-start .content line-height: 140% + hyphens: auto h2, h3, h4 margin: 2rem auto .8rem auto h2 diff --git a/pages/magazin/index.vue b/pages/magazin/index.vue index f75c5e4..d51dade 100644 --- a/pages/magazin/index.vue +++ b/pages/magazin/index.vue @@ -2,9 +2,13 @@
-

{{ $t('pages.magazin.title') }}

-

{{ $t('pages.magazin.teaser1') }}

-

{{ $t('pages.magazin.teaser2') }}

+

Wissenswertes für digitale Entscheider

+

Webdesign und Webentwicklung, SEO, Performance & AI

+

In unserem Fachmagazin erfahren Sie, wie moderne Webseiten aufgebaut sein müssen, + um technisch, inhaltlich und strategisch zu überzeugen. + Themen wie KI-gestütztes SEO (AI-SEO), nachhaltige Webentwicklung, Barrierefreiheit, + Ladezeit-Optimierung, User Experience und Headless CMS zeigen, worauf es heute im Webdesign wirklich ankommt.

+

Entdecken Sie praxisnahe Insights und zukunftsorientierte Lösungen für mehr Sichtbarkeit, Effizienz und Erfolg im digitalen Raum.

@@ -28,8 +32,9 @@ />

{{ article.header }}

- +
+
@@ -92,8 +97,8 @@ watch(articles, (newVal) => { .grid display: grid - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) - gap: 1rem + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) + gap: 2rem justify-content: start width: 100% max-width: 100% @@ -101,16 +106,18 @@ watch(articles, (newVal) => { .article width: 100% - max-width: 450px + max-width: 500px border: 1px solid $beige background: linear-gradient(to bottom right, white, $lightgrey) border-radius: 1rem - transition: .8s + transition: .5s position: relative display: flex flex-direction: column align-items: flex-start overflow: hidden + &:hover + transform: scale(1.08) .article-link position: relative @@ -121,43 +128,56 @@ watch(articles, (newVal) => { .image-wrapper position: relative width: 100% - height: 220px + height: 280px + border: 1px solid $lightgrey .article-image width: 100% - height: 450px + height: 500px object-fit: cover border-top-left-radius: 1rem border-top-right-radius: 1rem + opacity: .6 + + button + position: absolute + bottom: .6rem + right: 0rem + border: 1px solid darken($primaryColor, 30%) + font-size: 1rem + box-shadow: 1px 1px 4px 2px rgba(black, .2) + background-color: darken($primaryColor, 15%) + letter-spacing: .05rem .overlay position: absolute top: 0 left: 0 - width: 100% - height: 100% - background-color: rgba(0, 0, 0, 0.7) + width: calc(100% - 4rem) + height: calc(100% - 6rem) + background-color: rgba(255, 255, 255, 0.98) + margin: 1.5rem 3.5rem 4rem 1rem display: flex flex-direction: column align-items: center justify-content: center padding: 1rem - border-top-left-radius: 1rem - border-top-right-radius: 1rem + //border-top-left-radius: 1rem + //border-top-right-radius: 1rem + border-radius: .5rem text-align: center - transition: .5s - &:hover - background-color: rgba(255, 255, 255, 0.8) - h2 - color: black + transition: .3s + box-shadow: 2px 2px 5px 3px rgba(black, .6) + h2 - color: white + color: black font-size: 1.1rem - line-height: 130% + line-height: 140% font-family: 'Mainfont-Bold' margin-bottom: 0.5rem + margin-top: 0.5rem .mintBtn background-color: $primaryColor