Compare commits
No commits in common. "2de5fdfa2fa39c26c2bdd1e4e21536afd7ddf251" and "48ecb69816d167272c2f69db6216f44a98cac47d" have entirely different histories.
2de5fdfa2f
...
48ecb69816
2
app.vue
2
app.vue
@ -46,7 +46,7 @@ const handleResize = () => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
<style lang="sass" scoped>
|
||||
.page-enter-active,
|
||||
.page-leave-active
|
||||
transition: opacity 0.3s ease, transform 0.3s ease
|
||||
|
||||
@ -16,35 +16,35 @@ $breakPointXXL: 1400px
|
||||
|
||||
@font-face
|
||||
font-family: 'Mainfont'
|
||||
src: url('/assets/fonts/woff2/Montserrat-Light.woff2') format("woff2")
|
||||
src: url('@/assets/fonts/woff2/Montserrat-Light.woff2') format("woff2")
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
font-display: swap
|
||||
|
||||
@font-face
|
||||
font-family: 'Mainfont-Bold'
|
||||
src: url('/assets/fonts/woff2/Montserrat-Medium.woff2') format("woff2")
|
||||
src: url('@/assets/fonts/woff2/Montserrat-Medium.woff2') format("woff2")
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
font-display: swap
|
||||
|
||||
@font-face
|
||||
font-family: 'Comfortaa'
|
||||
src: url('/assets/fonts/woff2/Comfortaa-Light.woff2') format("woff2")
|
||||
src: url('@/assets/fonts/woff2/Comfortaa-Light.woff2') format("woff2")
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
font-display: swap
|
||||
|
||||
@font-face
|
||||
font-family: 'Comfortaa-Bold'
|
||||
src: url('/assets/fonts/woff2/Comfortaa-Bold.woff2') format("woff2")
|
||||
src: url('@/assets/fonts/woff2/Comfortaa-Bold.woff2') format("woff2")
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
font-display: swap
|
||||
|
||||
/*@font-face
|
||||
font-family: 'Typewriter'
|
||||
src: url('/assets/fonts/ttf/JMH_Typewriter.woff2') format("woff2")
|
||||
src: url('@/assets/fonts/ttf/JMH_Typewriter.woff2') format("woff2")
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
font-display: swap*/
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
<style scoped lang="sass">
|
||||
.article
|
||||
width: 100%
|
||||
max-width: 500px
|
||||
@ -96,7 +96,7 @@
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
justify-content: flex-start
|
||||
padding: 1rem 3vw
|
||||
padding: 1rem
|
||||
border-top-left-radius: 1rem
|
||||
border-bottom-right-radius: 50%
|
||||
box-shadow: 2px 2px 5px 3px rgba(black, .2)
|
||||
@ -106,7 +106,7 @@
|
||||
font-size: 1rem
|
||||
line-height: 140%
|
||||
font-family: 'Mainfont-Bold'
|
||||
margin: .2rem 0
|
||||
margin: .2rem 1rem
|
||||
hyphens: auto
|
||||
</style>
|
||||
|
||||
@ -26,11 +26,11 @@
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
<style scoped lang="sass">
|
||||
.ctaBox
|
||||
margin: 5% 10%
|
||||
margin: 8rem 10%
|
||||
text-align: center
|
||||
h3
|
||||
font-size: clamp(1.5rem, .8rem + 2vw, 1.8rem)
|
||||
font-size: clamp(1.4rem, .8rem + 2vw, 1.8rem)
|
||||
</style>
|
||||
|
||||
@ -13,8 +13,9 @@
|
||||
sizes="sm:100vw md:100vw lg:100vw"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
loading="eager"
|
||||
priority
|
||||
loading="eager"
|
||||
preload
|
||||
fetchpriority="high"
|
||||
/>
|
||||
<NuxtImg
|
||||
|
||||
@ -21,14 +21,11 @@
|
||||
<span v-html="title"></span>
|
||||
|
||||
<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">
|
||||
<li
|
||||
v-for="(item, index) in items"
|
||||
:key="'first-' + index"
|
||||
:key="index"
|
||||
class="marquee-item"
|
||||
>
|
||||
<NuxtLink v-if="item.link" :to="item.link" class="custLogoLink">
|
||||
@ -55,45 +52,12 @@
|
||||
format="webp"
|
||||
loading="lazy"
|
||||
: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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -163,6 +127,7 @@ const props = defineProps({
|
||||
svg
|
||||
margin: 0
|
||||
|
||||
|
||||
.box
|
||||
background-color: $beige
|
||||
width: 100%
|
||||
@ -174,20 +139,19 @@ const props = defineProps({
|
||||
|
||||
h2
|
||||
color: #333
|
||||
font-size: 1.4rem
|
||||
font-size: 1.2rem
|
||||
font-family: 'Mainfont-Bold'
|
||||
padding-top: 0rem
|
||||
|
||||
.marquee
|
||||
overflow: hidden
|
||||
width: 100%
|
||||
position: relative
|
||||
margin: 2rem 0
|
||||
padding: 3rem auto
|
||||
|
||||
.marquee-track
|
||||
display: flex
|
||||
width: fit-content
|
||||
animation: scroll linear infinite
|
||||
animation: scroll 20s linear infinite
|
||||
width: max-content
|
||||
|
||||
.marquee-list
|
||||
display: flex
|
||||
@ -212,9 +176,9 @@ const props = defineProps({
|
||||
filter: grayscale(0)
|
||||
|
||||
@keyframes scroll
|
||||
0%
|
||||
from
|
||||
transform: translateX(0)
|
||||
100%
|
||||
to
|
||||
transform: translateX(-50%)
|
||||
|
||||
.waveBox
|
||||
|
||||
@ -115,7 +115,7 @@
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="sass">
|
||||
<style lang="sass" scoped>
|
||||
.schema-typer
|
||||
background-color: #1e1e1e
|
||||
padding: 1.5rem
|
||||
|
||||
@ -10,13 +10,6 @@ const isLocalhost = window.location.hostname === 'localhost'
|
||||
// Umami nur aktivieren, wenn NICHT localhost
|
||||
if (import.meta.client && !isLocalhost) {
|
||||
useHead({
|
||||
link: [
|
||||
{
|
||||
rel: 'preconnect',
|
||||
href: 'https://umami.digimedialoop.de',
|
||||
crossorigin: ''
|
||||
}
|
||||
],
|
||||
meta: [
|
||||
{
|
||||
name: 'google-site-verification',
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
scrollPosition > 50 ? 'scrolled' : ''
|
||||
]"
|
||||
aria-label="Hauptnavigation"
|
||||
role="menu"
|
||||
>
|
||||
<!-- Burger Icon als Button -->
|
||||
<button
|
||||
@ -40,6 +41,7 @@
|
||||
@mouseleave="screenWidth >= 1350 && link.subNav && hideSubNav(link.label)"
|
||||
@focusin="screenWidth >= 1350 && link.subNav && showSubNav(link.label)"
|
||||
@focusout="screenWidth >= 1350 && link.subNav && hideSubNav(link.label)"
|
||||
role="menuitem"
|
||||
>
|
||||
<!-- Mit SubNav -->
|
||||
<template v-if="link.subNav">
|
||||
@ -57,27 +59,15 @@
|
||||
{{ isActiveSubNav(link.label) ? 'Untermenü schließen' : 'Untermenü öffnen' }}
|
||||
</span>
|
||||
</button>
|
||||
<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)"
|
||||
>
|
||||
<button v-else>
|
||||
{{ $t(link.label) }}
|
||||
<span class="arrow" :class="{ open: isSubNavOpen === link.label }"></span>
|
||||
</button>
|
||||
|
||||
|
||||
<ul
|
||||
:id="`submenu-${link.label}`"
|
||||
class="submenu"
|
||||
:class="{ open: isActiveSubNav(link.label) }"
|
||||
role="group"
|
||||
:aria-label="`${$t(link.label)} Untermenü`"
|
||||
>
|
||||
<li v-for="sublink in link.subNav" :key="sublink.label">
|
||||
<NuxtLinkLocale
|
||||
@ -104,10 +94,11 @@
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useMainStore } from '@/stores/main'
|
||||
|
||||
const mainStore = useMainStore()
|
||||
|
||||
const screenWidth = computed(() => mainStore.screenWidth)
|
||||
@ -118,19 +109,15 @@ const isMobileSubNavOpen = ref(null)
|
||||
|
||||
function toggleMobileSubNav(routeKey) {
|
||||
if (screenWidth.value < 1350) {
|
||||
isMobileSubNavOpen.value =
|
||||
isMobileSubNavOpen.value === routeKey ? null : routeKey
|
||||
isMobileSubNavOpen.value = isMobileSubNavOpen.value === routeKey ? null : routeKey
|
||||
}
|
||||
}
|
||||
|
||||
function showSubNav(routeKey) {
|
||||
if (screenWidth.value >= 1350) {
|
||||
isSubNavOpen.value = routeKey
|
||||
}
|
||||
}
|
||||
|
||||
function hideSubNav(routeKey) {
|
||||
if (screenWidth.value >= 1350 && isSubNavOpen.value === routeKey) {
|
||||
if (isSubNavOpen.value === routeKey) {
|
||||
isSubNavOpen.value = null
|
||||
}
|
||||
}
|
||||
@ -142,27 +129,13 @@ function isActiveSubNav(label) {
|
||||
const isMenuOpen = computed(() => mainStore.menuOpen)
|
||||
const toggleMenu = () => mainStore.toggleMenu()
|
||||
|
||||
const toggleContactBubble = () => mainStore.toggleContactBubble()
|
||||
|
||||
const handleMobileClose = () => {
|
||||
if (screenWidth.value < 1350 && isMenuOpen.value) {
|
||||
toggleMenu()
|
||||
} else {
|
||||
isSubNavOpen.value = null
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
hideSubNav()
|
||||
}
|
||||
}
|
||||
|
||||
@ -191,7 +164,6 @@ const navigationLinks = [
|
||||
]
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="sass">
|
||||
.mainNav
|
||||
position: fixed
|
||||
|
||||
@ -2,7 +2,7 @@ import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useMainStore } from '@/stores/main'
|
||||
import { useHtmlConverter } from '@/composables/useHTMLConverter'
|
||||
import { useHtmlConverter } from '@/composables/useHtmlConverter'
|
||||
|
||||
export function usePageContentRenderer() {
|
||||
const { locale } = useI18n()
|
||||
|
||||
@ -89,8 +89,7 @@ main
|
||||
color: darken($primaryColor, 20%)
|
||||
.supheadlinePink, supheadlineMint
|
||||
margin-bottom: -.5rem
|
||||
font-size: clamp(1rem, 1rem + 1vw, 1.3rem)
|
||||
line-height: 1.4
|
||||
font-size: calc(.5rem + 1vw)
|
||||
.supheadlinePink
|
||||
color: darken($pink, 10%)
|
||||
.supheadlineMint
|
||||
|
||||
@ -11,45 +11,6 @@ export default defineNuxtConfig({
|
||||
},
|
||||
link: [
|
||||
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
|
||||
// Fonts preloaden
|
||||
{
|
||||
rel: 'preload',
|
||||
href: '/assets/fonts/woff2/Montserrat-Light.woff2',
|
||||
as: 'font',
|
||||
type: 'font/woff2',
|
||||
crossorigin: 'anonymous',
|
||||
},
|
||||
{
|
||||
rel: 'preload',
|
||||
href: '/assets/fonts/woff2/Montserrat-Medium.woff2',
|
||||
as: 'font',
|
||||
type: 'font/woff2',
|
||||
crossorigin: 'anonymous',
|
||||
},
|
||||
{
|
||||
rel: 'preload',
|
||||
href: '/assets/fonts/woff2/Comfortaa-Light.woff2',
|
||||
as: 'font',
|
||||
type: 'font/woff2',
|
||||
crossorigin: 'anonymous',
|
||||
},
|
||||
{
|
||||
rel: 'preload',
|
||||
href: '/assets/fonts/woff2/Comfortaa-Bold.woff2',
|
||||
as: 'font',
|
||||
type: 'font/woff2',
|
||||
crossorigin: 'anonymous',
|
||||
},
|
||||
{
|
||||
rel: 'preconnect',
|
||||
href: 'https://analytics.digimedialoop.de',
|
||||
crossorigin: 'anonymous'
|
||||
},
|
||||
{
|
||||
rel: 'preconnect',
|
||||
href: 'https://umami.digimedialoop.de',
|
||||
crossorigin: 'anonymous'
|
||||
}
|
||||
],
|
||||
charset: 'utf-16',
|
||||
viewport: 'width=device-width, initial-scale=1, maximum-scale=5',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="articlePage">
|
||||
|
||||
<div v-if="article" class="articleBorder">
|
||||
<div v-if="article" class="article">
|
||||
<SideBarNaviSlider link="/magazin">
|
||||
{{ $t('pages.article.artikelUebersicht') }}
|
||||
</SideBarNaviSlider>
|
||||
@ -181,7 +181,7 @@
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.articleBorder
|
||||
.article
|
||||
margin-top: -1rem
|
||||
.img_background
|
||||
position: absolute
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="landing topSpace">
|
||||
<section class="heroBox">
|
||||
<div class="container-10">
|
||||
<div class="container">
|
||||
<div class="contentBox">
|
||||
<p class="supheadlinePink">Webentwicklung für Grafikdesigner und Mediengestalter</p>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div v-if="false" class="speechBox d-flex align-items-start">
|
||||
<div class="speechBox d-flex align-items-start">
|
||||
<NuxtImg
|
||||
class="profileImage"
|
||||
src="/uploads/sabrinahennrich_0f07d46857.jpg"
|
||||
@ -255,10 +255,37 @@ onUnmounted(() => {
|
||||
position: relative
|
||||
overflow-x: hidden
|
||||
overflow-y: hidden
|
||||
|
||||
.container-10
|
||||
margin-top: 0
|
||||
margin-bottom: 1rem
|
||||
/*&::after
|
||||
content: ''
|
||||
position: absolute
|
||||
top: 2vh
|
||||
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
|
||||
margin-bottom: 1rem
|
||||
font-size: 1.4rem
|
||||
@ -274,7 +301,7 @@ onUnmounted(() => {
|
||||
.speechBox
|
||||
display: flex
|
||||
align-items: center
|
||||
width: 100%
|
||||
max-width: 100%
|
||||
margin: 0 auto
|
||||
padding: 1rem 0
|
||||
gap: 4vw
|
||||
|
||||
321
pages/index.vue
321
pages/index.vue
@ -17,39 +17,18 @@
|
||||
<span class="loopHeader" v-html="getHtmlBySection('home_loopHeader').value"></span>
|
||||
<div class="content">
|
||||
<div class="column">
|
||||
<h4 @click="toggleSection('input')" :class="{ open: openSections.input }">
|
||||
Input
|
||||
<span>︾</span>
|
||||
</h4>
|
||||
<transition
|
||||
@before-enter="beforeEnter"
|
||||
@enter="enter"
|
||||
@leave="leave"
|
||||
>
|
||||
<div v-show="openSections.input" class="sliding-box" v-html="getHtmlBySection('home_loopInput').value" />
|
||||
</transition>
|
||||
<span v-html="getHtmlBySection('home_loopInput').value"></span>
|
||||
</div>
|
||||
<div class="column">
|
||||
<NuxtImg
|
||||
src="/uploads/Loop_83b4311dd0.webp"
|
||||
provider="strapi"
|
||||
class="loopImg"
|
||||
alt="Zentrale Webseite die als zentraler Touchpoint input verarbeitet und in qualifizierte Leads umwandelt"
|
||||
alt="Mensch"
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h4 @click="toggleSection('output')" :class="{ open: openSections.output }">
|
||||
Output
|
||||
<span>︾</span>
|
||||
</h4>
|
||||
<transition
|
||||
@before-enter="beforeEnter"
|
||||
@enter="enter"
|
||||
@leave="leave"
|
||||
>
|
||||
<div v-show="openSections.output" class="sliding-box" v-html="getHtmlBySection('home_loopOutput').value" />
|
||||
</transition>
|
||||
|
||||
<span v-html="getHtmlBySection('home_loopOutput').value"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -166,7 +145,7 @@
|
||||
:button-text="$t('buttons.contactUs')"
|
||||
/>
|
||||
|
||||
<MarqueeBanner :items="logoItems" :logo-height="60" :speed="30" :title="getHtmlBySection('home_company_trustus').value" :greyscale="true" />
|
||||
<MarqueeBanner :items="logoItems" :logo-height="60" :title="getHtmlBySection('home_company_trustus').value" :greyscale="true" />
|
||||
<FAQArea page-link="/" :headline="$t('pages.home.faqArea.headline')" />
|
||||
|
||||
</div>
|
||||
@ -191,145 +170,58 @@ const logoItems = computed(() => {
|
||||
}
|
||||
}))
|
||||
})
|
||||
|
||||
const openSections = ref({
|
||||
input: false,
|
||||
output: false
|
||||
})
|
||||
|
||||
const toggleSection = (key) => {
|
||||
openSections.value[key] = !openSections.value[key]
|
||||
}
|
||||
function beforeEnter(el) {
|
||||
el.style.height = '0'
|
||||
el.style.opacity = '0'
|
||||
el.style.overflow = 'hidden'
|
||||
}
|
||||
|
||||
function enter(el) {
|
||||
const height = el.scrollHeight
|
||||
el.style.transition = 'height 0.4s ease, opacity 0.4s ease'
|
||||
requestAnimationFrame(() => {
|
||||
el.style.height = height + 'px'
|
||||
el.style.opacity = '1'
|
||||
})
|
||||
|
||||
el.addEventListener('transitionend', () => {
|
||||
el.style.height = 'auto'
|
||||
el.style.overflow = 'visible'
|
||||
}, { once: true })
|
||||
}
|
||||
|
||||
function leave(el) {
|
||||
el.style.height = el.scrollHeight + 'px'
|
||||
el.style.opacity = '1'
|
||||
el.style.overflow = 'hidden'
|
||||
requestAnimationFrame(() => {
|
||||
el.style.transition = 'height 0.4s ease, opacity 0.4s ease'
|
||||
el.style.height = '0'
|
||||
el.style.opacity = '0'
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
@keyframes bounce-fade
|
||||
0%
|
||||
transform: translateY(0)
|
||||
opacity: 1
|
||||
50%
|
||||
transform: translateY(5px)
|
||||
opacity: 0
|
||||
51%
|
||||
transform: translateY(-5px)
|
||||
opacity: 0
|
||||
100%
|
||||
transform: translateY(0)
|
||||
opacity: 1
|
||||
|
||||
.slide-fade-enter-active, .slide-fade-leave-active
|
||||
transition: all 0.3s ease
|
||||
overflow: hidden
|
||||
|
||||
.slide-fade-enter-from, .slide-fade-leave-to
|
||||
max-height: 0
|
||||
opacity: 0
|
||||
transform: translateY(-10px)
|
||||
|
||||
.slide-fade-enter-to, .slide-fade-leave-from
|
||||
max-height: 500px
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
.homePage
|
||||
|
||||
.dmlLoop
|
||||
width: 80%
|
||||
margin: 3rem 10%
|
||||
.loopHeader
|
||||
text-align: center
|
||||
|
||||
h2
|
||||
font-size: clamp(1.8rem, .9rem + 2vw, 2rem)
|
||||
font-size: clamp(1.8rem, .9rem + 2vw, 2.4rem)
|
||||
margin-bottom: 0
|
||||
margin-top: -.5rem
|
||||
|
||||
h3
|
||||
font-size: clamp(1.2rem, .5rem + 2vw, 1.6rem)
|
||||
font-size: clamp(1.4rem, .7rem + 2vw, 2rem)
|
||||
margin: 0 0 1rem 0
|
||||
|
||||
h4
|
||||
font-size: clamp(1.2rem, .5rem + 2vw, 1.6rem)
|
||||
margin: .5rem 0 1.5rem 0
|
||||
|
||||
p
|
||||
margin-top: 1rem
|
||||
|
||||
.content
|
||||
display: flex
|
||||
flex-direction: row
|
||||
flex-direction: column
|
||||
gap: 2rem
|
||||
margin: 3rem 0
|
||||
|
||||
.column
|
||||
padding: 0
|
||||
border-radius: .5rem
|
||||
min-width: 280px
|
||||
width: calc((100% / 3) - 2rem)
|
||||
|
||||
// nur für 1 und 3 box
|
||||
// child(1) border rights offen und child(3) border left offen
|
||||
&:nth-child(1), &:nth-child(3)
|
||||
//border-top: 1px solid #effbf7
|
||||
border-bottom: 1px solid #effbf7
|
||||
|
||||
&:nth-child(1)
|
||||
border-left: 1px solid #effbf7
|
||||
|
||||
h4
|
||||
background-image: linear-gradient(to right, #effbf7, white)
|
||||
|
||||
&:nth-child(3)
|
||||
border-right: 1px solid #effbf7
|
||||
|
||||
h4
|
||||
background-image: linear-gradient(to right, white, #effbf7)
|
||||
|
||||
&:nth-child(2)
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
|
||||
img
|
||||
margin: 22% auto
|
||||
|
||||
&.sliding-box
|
||||
padding: .5rem 1rem
|
||||
font-size: .9rem
|
||||
transition: all 0.4s ease
|
||||
|
||||
h4
|
||||
margin: 0
|
||||
padding: .8rem 2rem .2rem 2rem
|
||||
padding: .8rem 2rem
|
||||
color: $darkgrey
|
||||
|
||||
border-top-left-radius: .5rem
|
||||
border-top-right-radius: .5rem
|
||||
font-family: 'Mainfont-Bold'
|
||||
@ -337,29 +229,12 @@ function leave(el) {
|
||||
text-transform: uppercase
|
||||
text-align: center
|
||||
letter-spacing: .05rem
|
||||
cursor: pointer
|
||||
margin-top: 8rem
|
||||
transition: .5s ease-in-out
|
||||
|
||||
span
|
||||
display: block
|
||||
animation: bounce-fade 1.5s infinite ease-in-out
|
||||
color: $darkgrey
|
||||
transition: transform 0.3s ease
|
||||
|
||||
&.open
|
||||
margin-top: 0
|
||||
span
|
||||
animation: none
|
||||
transform: rotate(180deg)
|
||||
|
||||
p
|
||||
padding: .5rem 1rem
|
||||
font-size: .9rem
|
||||
|
||||
ul
|
||||
margin-left: 2vw
|
||||
|
||||
li
|
||||
padding: .3rem 0
|
||||
|
||||
@ -369,13 +244,9 @@ function leave(el) {
|
||||
object-fit: cover
|
||||
object-position: center center
|
||||
|
||||
@media screen and (max-width: $breakPointLG)
|
||||
.content
|
||||
flex-direction: column
|
||||
|
||||
.column
|
||||
width: 90%
|
||||
min-width: 90%
|
||||
@media screen and (min-width: $breakPointLG)
|
||||
flex-direction: row
|
||||
|
||||
.whatWeDo
|
||||
position: relative
|
||||
@ -406,21 +277,171 @@ function leave(el) {
|
||||
text-align: center
|
||||
padding: 2rem 5%
|
||||
border-radius: 1rem
|
||||
|
||||
@media(max-width: $breakPointLG)
|
||||
@media(max-width: $breakPointMD)
|
||||
width: 90%
|
||||
margin: 3rem 5%
|
||||
background-color: rgba(255,255,255,.95)
|
||||
margin: 3rem 5% 3rem 5%
|
||||
background-color: rgba(255,255,255,.8)
|
||||
|
||||
h2
|
||||
font-size: clamp(1.5rem, .7rem + 2vw, 2rem)
|
||||
font-family: 'Comfortaa'
|
||||
|
||||
h3
|
||||
font-family: 'Mainfont-Bold'
|
||||
font-size: clamp(1.2rem, .9rem + 2vw, 1.6rem)
|
||||
p
|
||||
font-size: clamp(1rem, .5rem + 2vw, 1.2rem)
|
||||
|
||||
|
||||
|
||||
|
||||
.explainBox
|
||||
position: relative
|
||||
overflow: hidden
|
||||
min-height: 400px
|
||||
margin: 2vh 0 8vh 0
|
||||
padding: 8vh 0
|
||||
|
||||
.background-image
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
height: auto
|
||||
object-fit: cover
|
||||
object-position: center center
|
||||
z-index: 0
|
||||
pointer-events: none
|
||||
|
||||
|
||||
.content
|
||||
position: relative
|
||||
z-index: 1
|
||||
padding-left: 10%
|
||||
h2
|
||||
font-size: clamp(1.2rem, .7rem + 2vw, 2rem)
|
||||
font-family: 'Comfortaa'
|
||||
h3
|
||||
font-family: 'Mainfont-Bold'
|
||||
font-size: 1.2rem
|
||||
|
||||
.firstTeaser
|
||||
h2
|
||||
font-size: 1.6rem
|
||||
line-height: 2.4rem
|
||||
.subLine
|
||||
color: adjust-color($darkgrey, $lightness: 20%)
|
||||
font-size: 80%
|
||||
.pinkFont
|
||||
color: darken($pink, 10%)
|
||||
.imgRight
|
||||
float: right
|
||||
max-width: 50%
|
||||
.homeImageTop
|
||||
margin: 4.5rem 0 8vh 3rem !important
|
||||
|
||||
.sectionSolutions
|
||||
background-image: linear-gradient(to bottom right, $beige, white, $beige)
|
||||
min-height: 200px
|
||||
margin: 6rem 0
|
||||
padding: 6rem 0 7rem 0
|
||||
position: relative
|
||||
overflow: hidden
|
||||
|
||||
h2
|
||||
font-size: 1.8rem
|
||||
.sectorsBox
|
||||
display: flex
|
||||
gap: 5%
|
||||
justify-content: space-arround
|
||||
flex-wrap: wrap
|
||||
|
||||
.sector
|
||||
position: relative
|
||||
flex: 1 1 30%
|
||||
background: #f9f9f9
|
||||
padding: 1rem
|
||||
border-radius: 1rem
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05)
|
||||
transition: transform 0.3s ease
|
||||
border-radius: 1rem
|
||||
max-width: 450px
|
||||
margin-bottom: 2rem
|
||||
|
||||
.bgImage
|
||||
position: absolute
|
||||
inset: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
object-fit: cover
|
||||
object-position: center
|
||||
z-index: 0
|
||||
border-radius: 1rem
|
||||
|
||||
.contentBox
|
||||
position: relative
|
||||
z-index: 2
|
||||
background-image: linear-gradient(to top, rgba(white, .9), rgba(white, .7))
|
||||
width: 100%
|
||||
padding: 2rem
|
||||
border-radius: 1rem
|
||||
transform: rotate(-1deg)
|
||||
|
||||
.image-comparison-container
|
||||
text-align: center
|
||||
width: 80%
|
||||
max-width: 300px
|
||||
margin: 0 auto 2rem auto
|
||||
|
||||
h3
|
||||
font-size: 1.25rem
|
||||
margin: 1rem 0 0.5rem
|
||||
z-index: 3
|
||||
hyphens: auto
|
||||
|
||||
p
|
||||
font-size: clamp(1.1rem, .5rem + 2vw, 1.2rem)
|
||||
</style>
|
||||
font-size: 1rem
|
||||
color: #333
|
||||
margin-bottom: 1.5rem
|
||||
min-height: 4.5rem
|
||||
z-index: 3
|
||||
|
||||
.btn
|
||||
text-transform: none
|
||||
hyphens: auto
|
||||
font-size: 1.1rem
|
||||
font-family: 'Mainfont-Bold'
|
||||
|
||||
@media screen and (max-width: $breakPointMD)
|
||||
flex-direction: column
|
||||
.sector
|
||||
flex: 1 1 100%
|
||||
max-width: 100%
|
||||
padding: 1rem
|
||||
.btn
|
||||
font-size: 1.05rem
|
||||
|
||||
|
||||
|
||||
.compBox
|
||||
background-image: url(https://strapi.digimedialoop.de/uploads/watercolor_da8a37ce48.webp)
|
||||
background-size: cover
|
||||
background-repeat: no-repeat
|
||||
padding: 6rem 0 6rem 0
|
||||
.content
|
||||
background-color: rgba(255,255,255,.7)
|
||||
padding: 2rem 5%
|
||||
margin-top: 2rem
|
||||
margin-bottom: 2rem
|
||||
border-radius: 1rem
|
||||
transform: rotate(-1deg)
|
||||
.btnArea
|
||||
a
|
||||
margin-right: 1rem
|
||||
font-family: 'Mainfont-Bold'
|
||||
h2
|
||||
font-family: 'Comfortaa-Bold'
|
||||
h3
|
||||
line-height: 1.5
|
||||
p
|
||||
padding-right: 1rem
|
||||
</style>
|
||||
|
||||
@ -120,7 +120,7 @@ watchEffect(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
<style lang="sass" scoped>
|
||||
.referenceBox
|
||||
display: grid
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
|
||||
|
||||
@ -150,7 +150,7 @@ import { useMainStore } from '@/stores/main'
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
<style lang="sass" scoped>
|
||||
@keyframes moveSpotlight
|
||||
0%
|
||||
transform: translate(-30%, -30%) rotate(0deg)
|
||||
|
||||
@ -127,7 +127,6 @@ const toggleContactBubble = () => mainStore.toggleContactBubble();
|
||||
|
||||
<style lang="sass">
|
||||
.accessiblityPage
|
||||
hyphens: auto
|
||||
.articleBox
|
||||
margin-top: 5rem
|
||||
margin-bottom: 6rem
|
||||
@ -143,9 +142,7 @@ const toggleContactBubble = () => mainStore.toggleContactBubble();
|
||||
float: right
|
||||
width: 30%
|
||||
max-width: 350px
|
||||
min-width: 130px
|
||||
margin: 1rem 0 2rem 2vw
|
||||
|
||||
margin: 1rem 0 2rem 2rem
|
||||
.implementation
|
||||
margin: 8vh 0
|
||||
padding: 1vh 0 3vh 0
|
||||
|
||||
@ -124,7 +124,7 @@
|
||||
<MarqueeBanner
|
||||
:items="projectItems"
|
||||
:logo-height="200"
|
||||
title="<h2>Aus der Praxis: Unsere Projekte mit Headless Architektur</h2>"
|
||||
title="Aus der Praxis: Unsere Projekte mit Headless Architektur"
|
||||
link="projekt"
|
||||
aria-label="Headless CMS Projekte"
|
||||
speed="15"
|
||||
@ -267,7 +267,7 @@ const timeline = [
|
||||
|
||||
.timeline
|
||||
position: relative
|
||||
margin-left: 0
|
||||
margin-left: 2rem
|
||||
padding-left: 0
|
||||
border-left: 10px solid $lightgrey
|
||||
|
||||
@ -282,13 +282,13 @@ const timeline = [
|
||||
|
||||
.circle
|
||||
position: absolute
|
||||
left: -11%
|
||||
top: -1rem
|
||||
left: -5.2rem
|
||||
top: 0
|
||||
width: 10rem
|
||||
height: 7rem
|
||||
background: #37857C
|
||||
border-radius: $loopShape
|
||||
border: 1px solid #F1F1F1
|
||||
border: 2px solid white
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
@ -304,8 +304,8 @@ const timeline = [
|
||||
|
||||
.period
|
||||
font-weight: bold
|
||||
font-size: 1.3rem
|
||||
font-family: 'Comfortaa-Bold'
|
||||
font-size: 1rem
|
||||
font-family: monospace
|
||||
|
||||
.content-box
|
||||
background: white
|
||||
@ -321,7 +321,6 @@ const timeline = [
|
||||
color: #2B3E3F
|
||||
font-family: 'Mainfont-Bold'
|
||||
margin: 1rem 0
|
||||
font-size: clamp(1.2rem, 2vw, 1.5rem)
|
||||
h4
|
||||
color: #37857C
|
||||
font-family: 'Mainfont-Bold'
|
||||
|
||||
@ -3,7 +3,11 @@
|
||||
<section class="webagentur">
|
||||
<div class="container">
|
||||
<div class="contentBox topSpace">
|
||||
<div v-html="getHtmlBySection('webagent_hero').value"></div>
|
||||
<h1>{{ $t('pages.webagency.hero.title') }}</h1>
|
||||
<h2>{{ $t('pages.webagency.hero.subtitle') }}</h2>
|
||||
<p v-html="$t('pages.webagency.hero.text1')" />
|
||||
<p v-html="$t('pages.webagency.hero.text2')" />
|
||||
<p v-html="$t('pages.webagency.hero.text3')" />
|
||||
<button
|
||||
class="my-4 btn pinkBtn"
|
||||
role="button"
|
||||
@ -26,6 +30,7 @@
|
||||
:alt="`Profilbild von ${companyinfo?.name || 'Ansprechpartnerin'}`"
|
||||
sizes="sm:100vw md:50vw lg:30vw"
|
||||
format="webp"
|
||||
class="rounded-full w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -119,9 +124,6 @@ const designerLink = i18nPages.designer?.[locale.value] || '/designer'
|
||||
|
||||
const mainStore = useMainStore();
|
||||
const { companyinfo } = storeToRefs(mainStore);
|
||||
|
||||
const { getHtmlBySection } = usePageContentRenderer()
|
||||
|
||||
const toggleContactBubble = () => mainStore.toggleContactBubble();
|
||||
|
||||
const profileImageUrl = computed(() => companyinfo.value?.profileImage?.data?.attributes?.url || null);
|
||||
@ -134,12 +136,6 @@ const navigateTo = useRouter().push;
|
||||
position: relative
|
||||
overflow-x: hidden
|
||||
overflow-y: hidden
|
||||
h1
|
||||
font-size: clamp(2rem, 1rem + 2vw, 2.5rem)
|
||||
margin-bottom: .5rem
|
||||
h2
|
||||
font-size: clamp(1.5rem, 1rem + 1vw, 2rem)
|
||||
margin-top: 0
|
||||
&::after
|
||||
content: ''
|
||||
position: absolute
|
||||
@ -216,8 +212,6 @@ const navigateTo = useRouter().push;
|
||||
border-radius: 50%
|
||||
content: ''
|
||||
display: block
|
||||
img
|
||||
animation: bubble-wobble 25s infinite ease alternate
|
||||
@media(max-width: $breakPointSM)
|
||||
width: 80vw
|
||||
margin-left: -5vw
|
||||
@ -226,15 +220,12 @@ const navigateTo = useRouter().push;
|
||||
height: 70vw
|
||||
max-height: 400px
|
||||
clip-path: none
|
||||
img
|
||||
border-radius: $loopShape
|
||||
margin-left: 5vw
|
||||
.teamContainer
|
||||
width: 100%
|
||||
padding-left: calc(2vw + 5vw)
|
||||
@media(max-width: $breakPointSM)
|
||||
padding-left: 0
|
||||
margin-top: 6vh
|
||||
h2
|
||||
color: darken($lightgrey, 30%)
|
||||
font-size: .9rem
|
||||
@ -243,23 +234,20 @@ const navigateTo = useRouter().push;
|
||||
font-size: 2rem
|
||||
margin-bottom: .1rem
|
||||
margin-top: 1rem
|
||||
p
|
||||
font-size: 1.2rem
|
||||
|
||||
.smallFont
|
||||
font-size: 1.2rem
|
||||
font-size: 1.1rem
|
||||
font-family: 'Mainfont-Bold'
|
||||
.smaller
|
||||
font-size: 1rem
|
||||
font-size: .9rem
|
||||
.quotation
|
||||
background-color: $lightgrey
|
||||
padding: 2.5rem 4rem 2rem 6rem
|
||||
border-radius: 1rem
|
||||
font-size: 1.2rem
|
||||
font-size: 1rem
|
||||
position: relative
|
||||
margin-top: 2rem
|
||||
p
|
||||
font-size: 1.2rem
|
||||
font-size: 1rem
|
||||
@media(max-width: $breakPointMD)
|
||||
padding: 5rem 2rem 2rem 2rem
|
||||
hyphens: auto
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user