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

language fix

Browse Source
This commit is contained in:
Sabrina Hennrich 2025-07-05 10:41:33 +02:00
parent 2b60d8970b
commit 5c787473f4
12 changed files with 199 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/ArticleCard.vue
View File

@ -96,7 +96,7 @@
flex-direction: column flex-direction: column
align-items: center align-items: center
justify-content: flex-start justify-content: flex-start
padding: 1rem padding: 1rem 3vw
border-top-left-radius: 1rem border-top-left-radius: 1rem
border-bottom-right-radius: 50% border-bottom-right-radius: 50%
box-shadow: 2px 2px 5px 3px rgba(black, .2) box-shadow: 2px 2px 5px 3px rgba(black, .2)
@ -106,7 +106,7 @@
font-size: 1rem font-size: 1rem
line-height: 140% line-height: 140%
font-family: 'Mainfont-Bold' font-family: 'Mainfont-Bold'
margin: .2rem 1rem margin: .2rem 0
hyphens: auto hyphens: auto
</style> </style>

6
components/CallToActionBox.vue
View File

@ -26,11 +26,11 @@
}) })
</script> </script>
<style scoped lang="sass"> <style lang="sass">
.ctaBox .ctaBox
margin: 8rem 10% margin: 5% 10%
text-align: center text-align: center
h3 h3
font-size: clamp(1.4rem, .8rem + 2vw, 1.8rem) font-size: clamp(1.5rem, .8rem + 2vw, 1.8rem)
</style> </style>

2
components/LanguageBox.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div v-show="false" v-if="locales.length >=2" class="languageBox" @click="toggleOpen"> <div v-if="locales.length >=2" class="languageBox" @click="toggleOpen">
<div v-if="!open" class="current">{{ currentLanguage }}</div> <div v-if="!open" class="current">{{ currentLanguage }}</div>
<transition name="slide"> <transition name="slide">

62
components/MarqueeBanner.vue
View File

@ -21,11 +21,14 @@
<span v-html="title"></span> <span v-html="title"></span>
<div class="marquee"> <div class="marquee">
<div class="marquee-track" :style="`animation-duration: ${speed}s`"> <div
class="marquee-track"
:style="`animation-duration: ${speed}s`"
>
<ul class="marquee-list"> <ul class="marquee-list">
<li <li
v-for="(item, index) in items" v-for="(item, index) in items"
:key="index" :key="'first-' + index"
class="marquee-item" class="marquee-item"
> >
<NuxtLink v-if="item.link" :to="item.link" class="custLogoLink"> <NuxtLink v-if="item.link" :to="item.link" class="custLogoLink">
@ -52,12 +55,45 @@
format="webp" format="webp"
loading="lazy" loading="lazy"
:class="['custLogo', { greyscale: greyscale }]" :class="['custLogo', { greyscale: greyscale }]"
/>
</li>
<!-- 👇 DUPLIKAT für nahtlosen Scroll -->
<li
v-for="(item, index) in items"
:key="'second-' + index"
class="marquee-item"
>
<!-- identischer Inhalt wie oben -->
<NuxtLink v-if="item.link" :to="item.link" class="custLogoLink">
<NuxtImg
provider="strapi"
:src="item.image.url"
:alt="item.image.alternativeText || item.text || 'Image'"
:title="item.text"
width="250"
:height="logoHeight"
format="webp"
loading="lazy"
class="custLogo"
/>
</NuxtLink>
<NuxtImg
v-else
provider="strapi"
:src="item.image.url"
:alt="item.image.alternativeText || item.text || 'Image'"
:title="item.text"
width="250"
height="50"
format="webp"
loading="lazy"
:class="['custLogo', { greyscale: greyscale }]"
/> />
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -127,7 +163,6 @@ const props = defineProps({
svg svg
margin: 0 margin: 0
.box .box
background-color: $beige background-color: $beige
width: 100% width: 100%
@ -139,21 +174,22 @@ const props = defineProps({
h2 h2
color: #333 color: #333
font-size: 1.2rem font-size: 1.4rem
font-family: 'Mainfont-Bold' font-family: 'Mainfont-Bold'
padding-top: 0rem padding-top: 0rem
.marquee .marquee
overflow: hidden overflow: hidden
width: 100% width: 100%
padding: 3rem auto position: relative
margin: 2rem 0
.marquee-track .marquee-track
display: flex display: flex
animation: scroll 20s linear infinite width: fit-content
width: max-content animation: scroll linear infinite
.marquee-list .marquee-list
display: flex display: flex
gap: 3rem gap: 3rem
list-style: none list-style: none
@ -176,9 +212,9 @@ const props = defineProps({
filter: grayscale(0) filter: grayscale(0)
@keyframes scroll @keyframes scroll
from 0%
transform: translateX(0) transform: translateX(0)
to 100%
transform: translateX(-50%) transform: translateX(-50%)
.waveBox .waveBox

90
components/template/NavBar.vue
View File

@ -7,7 +7,6 @@
scrollPosition > 50 ? 'scrolled' : '' scrollPosition > 50 ? 'scrolled' : ''
]" ]"
aria-label="Hauptnavigation" aria-label="Hauptnavigation"
role="menu"
> >
<!-- Burger Icon als Button --> <!-- Burger Icon als Button -->
<button <button
@ -41,7 +40,6 @@
@mouseleave="screenWidth >= 1350 && link.subNav && hideSubNav(link.label)" @mouseleave="screenWidth >= 1350 && link.subNav && hideSubNav(link.label)"
@focusin="screenWidth >= 1350 && link.subNav && showSubNav(link.label)" @focusin="screenWidth >= 1350 && link.subNav && showSubNav(link.label)"
@focusout="screenWidth >= 1350 && link.subNav && hideSubNav(link.label)" @focusout="screenWidth >= 1350 && link.subNav && hideSubNav(link.label)"
role="menuitem"
> >
<!-- Mit SubNav --> <!-- Mit SubNav -->
<template v-if="link.subNav"> <template v-if="link.subNav">
@ -59,15 +57,27 @@
{{ isActiveSubNav(link.label) ? 'Untermenü schließen' : 'Untermenü öffnen' }} {{ isActiveSubNav(link.label) ? 'Untermenü schließen' : 'Untermenü öffnen' }}
</span> </span>
</button> </button>
<button v-else> <button
type="button"
v-else
aria-haspopup="true"
:aria-expanded="isSubNavOpen === link.label"
:aria-controls="`submenu-${link.label}`"
@keydown="handleKeyDown($event, link.label)"
@focus="showSubNav(link.label)"
@blur="hideSubNav(link.label)"
>
{{ $t(link.label) }} {{ $t(link.label) }}
<span class="arrow" :class="{ open: isSubNavOpen === link.label }"></span> <span class="arrow" :class="{ open: isSubNavOpen === link.label }"></span>
</button> </button>
<ul <ul
:id="`submenu-${link.label}`" :id="`submenu-${link.label}`"
class="submenu" class="submenu"
:class="{ open: isActiveSubNav(link.label) }" :class="{ open: isActiveSubNav(link.label) }"
role="group"
:aria-label="`${$t(link.label)} Untermenü`"
> >
<li v-for="sublink in link.subNav" :key="sublink.label"> <li v-for="sublink in link.subNav" :key="sublink.label">
<NuxtLinkLocale <NuxtLinkLocale
@ -94,52 +104,69 @@
</nav> </nav>
</template> </template>
<script setup>
import { ref, computed } from 'vue'
import { useMainStore } from '@/stores/main'
const mainStore = useMainStore()
<script setup> const screenWidth = computed(() => mainStore.screenWidth)
import { ref, computed } from 'vue' const scrollPosition = computed(() => mainStore.scrollPosition)
import { useMainStore } from '@/stores/main'
const mainStore = useMainStore()
const screenWidth = computed(() => mainStore.screenWidth) const isSubNavOpen = ref(null)
const scrollPosition = computed(() => mainStore.scrollPosition) const isMobileSubNavOpen = ref(null)
const isSubNavOpen = ref(null) function toggleMobileSubNav(routeKey) {
const isMobileSubNavOpen = ref(null)
function toggleMobileSubNav(routeKey) {
if (screenWidth.value < 1350) { if (screenWidth.value < 1350) {
isMobileSubNavOpen.value = isMobileSubNavOpen.value === routeKey ? null : routeKey isMobileSubNavOpen.value =
} isMobileSubNavOpen.value === routeKey ? null : routeKey
} }
}
function showSubNav(routeKey) { function showSubNav(routeKey) {
if (screenWidth.value >= 1350) {
isSubNavOpen.value = routeKey isSubNavOpen.value = routeKey
} }
function hideSubNav(routeKey) { }
if (isSubNavOpen.value === routeKey) {
function hideSubNav(routeKey) {
if (screenWidth.value >= 1350 && isSubNavOpen.value === routeKey) {
isSubNavOpen.value = null isSubNavOpen.value = null
} }
} }
function isActiveSubNav(label) { function isActiveSubNav(label) {
return (screenWidth.value < 1350 ? isMobileSubNavOpen.value : isSubNavOpen.value) === label return (screenWidth.value < 1350 ? isMobileSubNavOpen.value : isSubNavOpen.value) === label
} }
const isMenuOpen = computed(() => mainStore.menuOpen) const isMenuOpen = computed(() => mainStore.menuOpen)
const toggleMenu = () => mainStore.toggleMenu() const toggleMenu = () => mainStore.toggleMenu()
const toggleContactBubble = () => mainStore.toggleContactBubble() const handleMobileClose = () => {
const handleMobileClose = () => {
if (screenWidth.value < 1350 && isMenuOpen.value) { if (screenWidth.value < 1350 && isMenuOpen.value) {
toggleMenu() toggleMenu()
} else { } else {
hideSubNav() isSubNavOpen.value = null
}
} }
}
const navigationLinks = [ // Tastatursteuerung für Desktop-Menü
function handleKeyDown(event, linkLabel) {
if (screenWidth.value < 1350) return
switch (event.key) {
case 'Enter':
case ' ':
event.preventDefault()
isSubNavOpen.value = isSubNavOpen.value === linkLabel ? null : linkLabel
break
case 'Escape':
isSubNavOpen.value = null
break
}
}
const navigationLinks = [
{ routeKey: 'webagency', label: 'menu.webagency' }, { routeKey: 'webagency', label: 'menu.webagency' },
{ {
routeKey: '', routeKey: '',
@ -161,8 +188,9 @@
}, },
{ routeKey: 'magazin', label: 'menu.menuMagazin' }, { routeKey: 'magazin', label: 'menu.menuMagazin' },
{ routeKey: 'references', label: 'menu.references' } { routeKey: 'references', label: 'menu.references' }
] ]
</script> </script>
<style lang="sass"> <style lang="sass">
.mainNav .mainNav

3
layouts/default.vue
View File

@ -89,7 +89,8 @@ main
color: darken($primaryColor, 20%) color: darken($primaryColor, 20%)
.supheadlinePink, supheadlineMint .supheadlinePink, supheadlineMint
margin-bottom: -.5rem margin-bottom: -.5rem
font-size: calc(.5rem + 1vw) font-size: clamp(1rem, 1rem + 1vw, 1.3rem)
line-height: 1.4
.supheadlinePink .supheadlinePink
color: darken($pink, 10%) color: darken($pink, 10%)
.supheadlineMint .supheadlineMint

4
nuxt.config.ts
View File

@ -94,8 +94,8 @@ export default defineNuxtConfig({
langDir: 'locales', langDir: 'locales',
locales: [ locales: [
{ code: 'de', name: 'Deutsch', file: 'de.json' }, { code: 'de', name: 'Deutsch', file: 'de.json' },
{ code: 'en', name: 'English', file: 'en.json' }, /*{ code: 'en', name: 'English', file: 'en.json' },
/*{ code: 'es', name: 'Español', file: 'es.json' }, { code: 'es', name: 'Español', file: 'es.json' },
{ code: 'fr', name: 'Français', file: 'fr.json' }, { code: 'fr', name: 'Français', file: 'fr.json' },
{ code: 'it', name: 'Italiano', file: 'it.json' }, { code: 'it', name: 'Italiano', file: 'it.json' },
{ code: 'tr', name: 'Türkçe', file: 'tr.json' }*/ { code: 'tr', name: 'Türkçe', file: 'tr.json' }*/

41
pages/designer/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="landing topSpace"> <div class="landing topSpace">
<section class="heroBox"> <section class="heroBox">
<div class="container"> <div class="container-10">
<div class="contentBox"> <div class="contentBox">
<p class="supheadlinePink">Webentwicklung für Grafikdesigner und Mediengestalter</p> <p class="supheadlinePink">Webentwicklung für Grafikdesigner und Mediengestalter</p>
<h1>Du hast ein geniales Design im Kopf ... </h1> <h1>Du hast ein geniales Design im Kopf ... </h1>
@ -9,7 +9,7 @@
<h3>Jou! Das kann richtig frustrierend sein - muss es aber nicht! <br>Gemeinsam setzen wir deine kreativen Ideen pixelgenau, performant und individuell um!</h3> <h3>Jou! Das kann richtig frustrierend sein - muss es aber nicht! <br>Gemeinsam setzen wir deine kreativen Ideen pixelgenau, performant und individuell um!</h3>
</div> </div>
<div class="speechBox d-flex align-items-start"> <div v-if="false" class="speechBox d-flex align-items-start">
<NuxtImg <NuxtImg
class="profileImage" class="profileImage"
src="/uploads/sabrinahennrich_0f07d46857.jpg" src="/uploads/sabrinahennrich_0f07d46857.jpg"
@ -255,37 +255,10 @@ onUnmounted(() => {
position: relative position: relative
overflow-x: hidden overflow-x: hidden
overflow-y: hidden overflow-y: hidden
/*&::after
content: '' .container-10
position: absolute margin-top: 0
top: 2vh margin-bottom: 1rem
right: -50vw
width: 80vw
height: 90%
min-height: 500px
max-height: 800px
background-image: url('https://strapi.digimedialoop.de/uploads/Screen_Shot_Tool_20250225214638_2209c9c92e.png')
background-repeat: no-repeat
background-position: center right
background-size: cover
border-radius: 42% 49% 52% 48% / 53% 38% 62% 47%
animation: bubble-wobble 25s infinite ease alternate, gradient-animation 70s infinite alternate ease-in-out
box-shadow: $innerShadow
opacity: 1
@media(max-width: $breakPointXL)
right: -60vw
@media(max-width: $breakPointLG)
right: -60vw
min-height: 300px
max-height: 500px
@media(max-width: $breakPointLG)
min-height: 200px
max-height: 400px
right: -65vw
@media(max-width: $breakPointLG)
min-height: 200px
max-height: 400px
right: -70vw */
h2 h2
margin-bottom: 1rem margin-bottom: 1rem
font-size: 1.4rem font-size: 1.4rem
@ -301,7 +274,7 @@ onUnmounted(() => {
.speechBox .speechBox
display: flex display: flex
align-items: center align-items: center
max-width: 100% width: 100%
margin: 0 auto margin: 0 auto
padding: 1rem 0 padding: 1rem 0
gap: 4vw gap: 4vw

6
pages/index.vue
View File

@ -145,7 +145,7 @@
:button-text="$t('buttons.contactUs')" :button-text="$t('buttons.contactUs')"
/> />
<MarqueeBanner :items="logoItems" :logo-height="60" :title="getHtmlBySection('home_company_trustus').value" :greyscale="true" /> <MarqueeBanner :items="logoItems" :logo-height="60" :speed="30" :title="getHtmlBySection('home_company_trustus').value" :greyscale="true" />
<FAQArea page-link="/" :headline="$t('pages.home.faqArea.headline')" /> <FAQArea page-link="/" :headline="$t('pages.home.faqArea.headline')" />
</div> </div>
@ -281,7 +281,7 @@ const logoItems = computed(() => {
text-align: center text-align: center
padding: 2rem 5% padding: 2rem 5%
border-radius: 1rem border-radius: 1rem
@media(max-width: $breakPointMD) @media(max-width: $breakPointLG)
width: 90% width: 90%
margin: 3rem 5% 3rem 5% margin: 3rem 5% 3rem 5%
background-color: rgba(255,255,255,.8) background-color: rgba(255,255,255,.8)
@ -293,7 +293,7 @@ const logoItems = computed(() => {
font-family: 'Mainfont-Bold' font-family: 'Mainfont-Bold'
font-size: clamp(1.2rem, .9rem + 2vw, 1.6rem) font-size: clamp(1.2rem, .9rem + 2vw, 1.6rem)
p p
font-size: clamp(1rem, .5rem + 2vw, 1.2rem) font-size: clamp(1.1rem, .5rem + 2vw, 1.2rem)

5
pages/services/accessibility/index.vue
View File

@ -127,6 +127,7 @@ const toggleContactBubble = () => mainStore.toggleContactBubble();
<style lang="sass"> <style lang="sass">
.accessiblityPage .accessiblityPage
hyphens: auto
.articleBox .articleBox
margin-top: 5rem margin-top: 5rem
margin-bottom: 6rem margin-bottom: 6rem
@ -142,7 +143,9 @@ const toggleContactBubble = () => mainStore.toggleContactBubble();
float: right float: right
width: 30% width: 30%
max-width: 350px max-width: 350px
margin: 1rem 0 2rem 2rem min-width: 130px
margin: 1rem 0 2rem 2vw
.implementation .implementation
margin: 8vh 0 margin: 8vh 0
padding: 1vh 0 3vh 0 padding: 1vh 0 3vh 0

15
pages/services/cms/index.vue
View File

@ -124,7 +124,7 @@
<MarqueeBanner <MarqueeBanner
:items="projectItems" :items="projectItems"
:logo-height="200" :logo-height="200"
title="Aus der Praxis: Unsere Projekte mit Headless Architektur" title="<h2>Aus der Praxis: Unsere Projekte mit Headless Architektur</h2>"
link="projekt" link="projekt"
aria-label="Headless CMS Projekte" aria-label="Headless CMS Projekte"
speed="15" speed="15"
@ -267,7 +267,7 @@ const timeline = [
.timeline .timeline
position: relative position: relative
margin-left: 2rem margin-left: 0
padding-left: 0 padding-left: 0
border-left: 10px solid $lightgrey border-left: 10px solid $lightgrey
@ -282,13 +282,13 @@ const timeline = [
.circle .circle
position: absolute position: absolute
left: -5.2rem left: -11%
top: 0 top: -1rem
width: 10rem width: 10rem
height: 7rem height: 7rem
background: #37857C background: #37857C
border-radius: $loopShape border-radius: $loopShape
border: 2px solid white border: 1px solid #F1F1F1
display: flex display: flex
align-items: center align-items: center
justify-content: center justify-content: center
@ -304,8 +304,8 @@ const timeline = [
.period .period
font-weight: bold font-weight: bold
font-size: 1rem font-size: 1.3rem
font-family: monospace font-family: 'Comfortaa-Bold'
.content-box .content-box
background: white background: white
@ -321,6 +321,7 @@ const timeline = [
color: #2B3E3F color: #2B3E3F
font-family: 'Mainfont-Bold' font-family: 'Mainfont-Bold'
margin: 1rem 0 margin: 1rem 0
font-size: clamp(1.2rem, 2vw, 1.5rem)
h4 h4
color: #37857C color: #37857C
font-family: 'Mainfont-Bold' font-family: 'Mainfont-Bold'

17
pages/webagency/index.vue
View File

@ -30,7 +30,6 @@
:alt="`Profilbild von ${companyinfo?.name || 'Ansprechpartnerin'}`" :alt="`Profilbild von ${companyinfo?.name || 'Ansprechpartnerin'}`"
sizes="sm:100vw md:50vw lg:30vw" sizes="sm:100vw md:50vw lg:30vw"
format="webp" format="webp"
class="rounded-full w-full h-full object-cover"
/> />
</div> </div>
@ -212,6 +211,8 @@ const navigateTo = useRouter().push;
border-radius: 50% border-radius: 50%
content: '' content: ''
display: block display: block
img
animation: bubble-wobble 25s infinite ease alternate
@media(max-width: $breakPointSM) @media(max-width: $breakPointSM)
width: 80vw width: 80vw
margin-left: -5vw margin-left: -5vw
@ -220,12 +221,15 @@ const navigateTo = useRouter().push;
height: 70vw height: 70vw
max-height: 400px max-height: 400px
clip-path: none clip-path: none
img
border-radius: $loopShape border-radius: $loopShape
margin-left: 5vw
.teamContainer .teamContainer
width: 100% width: 100%
padding-left: calc(2vw + 5vw) padding-left: calc(2vw + 5vw)
@media(max-width: $breakPointSM) @media(max-width: $breakPointSM)
padding-left: 0 padding-left: 0
margin-top: 6vh
h2 h2
color: darken($lightgrey, 30%) color: darken($lightgrey, 30%)
font-size: .9rem font-size: .9rem
@ -234,20 +238,23 @@ const navigateTo = useRouter().push;
font-size: 2rem font-size: 2rem
margin-bottom: .1rem margin-bottom: .1rem
margin-top: 1rem margin-top: 1rem
p
font-size: 1.2rem
.smallFont .smallFont
font-size: 1.1rem font-size: 1.2rem
font-family: 'Mainfont-Bold' font-family: 'Mainfont-Bold'
.smaller .smaller
font-size: .9rem font-size: 1rem
.quotation .quotation
background-color: $lightgrey background-color: $lightgrey
padding: 2.5rem 4rem 2rem 6rem padding: 2.5rem 4rem 2rem 6rem
border-radius: 1rem border-radius: 1rem
font-size: 1rem font-size: 1.2rem
position: relative position: relative
margin-top: 2rem margin-top: 2rem
p p
font-size: 1rem font-size: 1.2rem
@media(max-width: $breakPointMD) @media(max-width: $breakPointMD)
padding: 5rem 2rem 2rem 2rem padding: 5rem 2rem 2rem 2rem
hyphens: auto hyphens: auto