digimedialoop/dml_frontend
digimedialoop/dml_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

magazin improvement

Browse Source
This commit is contained in:
Sabrina Hennrich 2025-06-09 10:14:10 +02:00
parent ae39985f4c
commit a56cda851a
4 changed files with 50 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/SideBarNaviSlider.vue
View File

@ -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

7
i18n/locales/de.json
View File

@ -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": {

5
pages/article/[link].vue
View File

@ -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

64
pages/magazin/index.vue
View File

@ -2,9 +2,13 @@
<div class="knowledgeBox topSpace">
<section class="teaserBox">
<div class="container">
<h1>{{ $t('pages.magazin.title') }}</h1>
<p>{{ $t('pages.magazin.teaser1') }}</p>
<p>{{ $t('pages.magazin.teaser2') }}</p>
<h1>Wissenswertes für digitale Entscheider</h1>
<h2>Webdesign und Webentwicklung, SEO, Performance & AI</h2>
<p>In unserem Fachmagazin erfahren Sie, wie moderne Webseiten aufgebaut sein müssen,
um technisch, inhaltlich und strategisch zu überzeugen.
Themen wie <b>KI-gestütztes SEO (AI-SEO)</b>, <b>nachhaltige Webentwicklung</b>, <b>Barrierefreiheit</b>,
<b>Ladezeit-Optimierung</b>, <b>User Experience</b> und <b>Headless CMS</b> zeigen, worauf es heute im Webdesign wirklich ankommt.</p>
<p>Entdecken Sie <b>praxisnahe Insights und zukunftsorientierte Lösungen</b> für mehr Sichtbarkeit, Effizienz und Erfolg im digitalen Raum.</p>
</div>
</section>
@ -28,8 +32,9 @@
/>
<div class="overlay">
<h2>{{ article.header }}</h2>
<button class="mintBtn">{{ $t('pages.magazin.readmore') }}</button>
</div>
<button class="mintBtn">{{ $t('pages.magazin.readmore') }}</button>
</div>
</NuxtLinkLocale>
@ -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