text change improvement
This commit is contained in:
parent
3f6482aa3e
commit
ab5384364a
329
pages/index.vue
329
pages/index.vue
@ -17,8 +17,18 @@
|
||||
<span class="loopHeader" v-html="getHtmlBySection('home_loopHeader').value"></span>
|
||||
<div class="content">
|
||||
<div class="column">
|
||||
<span v-html="getHtmlBySection('home_loopInput').value"></span>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="column">
|
||||
<NuxtImg
|
||||
src="/uploads/Loop_83b4311dd0.webp"
|
||||
@ -28,7 +38,18 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
<span v-html="getHtmlBySection('home_loopOutput').value"></span>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -170,58 +191,145 @@ 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%
|
||||
h2
|
||||
font-size: clamp(1.8rem, .9rem + 2vw, 2.4rem)
|
||||
margin-bottom: 0
|
||||
margin-top: -.5rem
|
||||
h3
|
||||
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
|
||||
.loopHeader
|
||||
text-align: center
|
||||
|
||||
h2
|
||||
font-size: clamp(1.8rem, .9rem + 2vw, 2rem)
|
||||
margin-bottom: 0
|
||||
margin-top: -.5rem
|
||||
|
||||
h3
|
||||
font-size: clamp(1.2rem, .5rem + 2vw, 1.6rem)
|
||||
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
|
||||
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
|
||||
padding: .8rem 2rem .2rem 2rem
|
||||
color: $darkgrey
|
||||
|
||||
border-top-left-radius: .5rem
|
||||
border-top-right-radius: .5rem
|
||||
font-family: 'Mainfont-Bold'
|
||||
@ -229,12 +337,29 @@ const logoItems = computed(() => {
|
||||
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
|
||||
|
||||
@ -244,10 +369,10 @@ const logoItems = computed(() => {
|
||||
object-fit: cover
|
||||
object-position: center center
|
||||
|
||||
|
||||
@media screen and (max-width: $breakPointLG)
|
||||
.content
|
||||
flex-direction: column
|
||||
|
||||
.column
|
||||
width: 90%
|
||||
min-width: 90%
|
||||
@ -281,171 +406,21 @@ const logoItems = computed(() => {
|
||||
text-align: center
|
||||
padding: 2rem 5%
|
||||
border-radius: 1rem
|
||||
|
||||
@media(max-width: $breakPointLG)
|
||||
width: 90%
|
||||
margin: 3rem 5% 3rem 5%
|
||||
background-color: rgba(255,255,255,.8)
|
||||
margin: 3rem 5%
|
||||
background-color: rgba(255,255,255,.95)
|
||||
|
||||
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(1.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: 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>
|
||||
|
||||
|
||||
@ -3,11 +3,7 @@
|
||||
<section class="webagentur">
|
||||
<div class="container">
|
||||
<div class="contentBox topSpace">
|
||||
<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')" />
|
||||
<div v-html="getHtmlBySection('webagent_hero').value"></div>
|
||||
<button
|
||||
class="my-4 btn pinkBtn"
|
||||
role="button"
|
||||
@ -123,6 +119,9 @@ 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);
|
||||
@ -135,6 +134,12 @@ 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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user