244 lines
4.9 KiB
Sass
244 lines
4.9 KiB
Sass
|
|
$primaryColor: #67caac
|
|
$pink: #CA6785
|
|
$purple: #983553
|
|
$yellow: #F0AE48
|
|
$darkgrey: #373737
|
|
$lightgrey: #f9f9f9
|
|
$beige: #EEEBE5
|
|
|
|
// BREAKPOINTS like Bootstrap
|
|
$breakPointSM: 576px
|
|
$breakPointMD: 768px
|
|
$breakPointLG: 992px
|
|
$breakPointXL: 1200px
|
|
$breakPointXXL: 1400px
|
|
|
|
@font-face
|
|
font-family: 'Mainfont'
|
|
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")
|
|
font-weight: normal
|
|
font-style: normal
|
|
font-display: swap
|
|
|
|
@font-face
|
|
font-family: 'Comfortaa'
|
|
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")
|
|
font-weight: normal
|
|
font-style: normal
|
|
font-display: swap
|
|
|
|
/*@font-face
|
|
font-family: 'Typewriter'
|
|
src: url('@/assets/fonts/ttf/JMH_Typewriter.woff2') format("woff2")
|
|
font-weight: normal
|
|
font-style: normal
|
|
font-display: swap*/
|
|
|
|
$fontSizeRoot: 18px
|
|
$fontSizeLarge: calc(1.2rem + 2vw)
|
|
$fontSizeMedium: calc(1.2rem + .8vw)
|
|
$fontSizeNormal: 1.2rem
|
|
$fontSizeSmall: calc(.9rem + .2vw)
|
|
|
|
$loopShape: 51% 49% 52% 48% / 53% 38% 62% 47%
|
|
|
|
/* Varianten für die Shape */
|
|
$loopShape1: 51% 49% 52% 48% / 53% 38% 62% 47% // Original
|
|
$loopShape2: 49% 51% 48% 52% / 38% 53% 47% 62% // Horizontal gespiegelt
|
|
$loopShape3: 52% 48% 51% 49% / 62% 47% 53% 38% // Vertikal gespiegelt
|
|
$loopShape4: 48% 52% 49% 51% / 47% 62% 38% 53% // Horizontal & vertikal gespiegelt
|
|
$loopShape5: 50% 50% 53% 47% / 55% 40% 60% 45% // Leichte Variation für Abwechslung
|
|
|
|
$innerShadow: inset 0 0 15px rgba(255, 255, 255, 0.5)
|
|
|
|
@keyframes bubble-wobble
|
|
0%, 100%
|
|
transform: scale(1) translate(0, 0)
|
|
25%
|
|
transform: scale(1.05) translate(2px, -4px)
|
|
50%
|
|
transform: scale(1.1) translate(4px, -1px)
|
|
75%
|
|
transform: scale(1.1) translate(4px, 2px)
|
|
|
|
@keyframes gradient-animation
|
|
0%
|
|
background-position: 0% 0%
|
|
50%
|
|
background-position: 50% 50%
|
|
100%
|
|
background-position: 100% 100%
|
|
|
|
@keyframes blobIn
|
|
0%
|
|
transform: scale(0)
|
|
opacity: 0
|
|
60%
|
|
transform: scale(1.2)
|
|
opacity: 1
|
|
100%
|
|
transform: scale(1)
|
|
opacity: 1
|
|
|
|
@keyframes float
|
|
0%, 100%
|
|
transform: scale(1) translate(0, 0)
|
|
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), 0 0 0 5px #f9f9f9
|
|
|
|
25%
|
|
transform: scale(1.025) translate(1px, -3px)
|
|
box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.6), 0 0 0 5px #f9f9f9
|
|
|
|
50%
|
|
transform: scale(1.035) translate(3px, -1px)
|
|
box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.7), 0 0 0 5px #f9f9f9
|
|
|
|
75%
|
|
transform: scale(1.025) translate(1px, 1px)
|
|
box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.6), 0 0 0 5px #f9f9f9
|
|
|
|
|
|
|
|
body
|
|
overflow-x: hidden
|
|
font-family: 'Mainfont', Arial
|
|
margin: 0
|
|
padding: 0
|
|
|
|
.container-5
|
|
width: 90%
|
|
margin: auto 5%
|
|
|
|
.container-10
|
|
width: 80%
|
|
margin: auto 10%
|
|
|
|
.container-15
|
|
width: 70%
|
|
margin: auto 15%
|
|
|
|
.container-20
|
|
width: 60%
|
|
margin: auto 20%
|
|
|
|
.fade-enter-active, .fade-leave-active
|
|
transition: opacity 1.2s ease
|
|
|
|
.fade-enter-from, .fade-leave-to
|
|
opacity: 0
|
|
|
|
*:focus
|
|
outline: none
|
|
|
|
body.user-is-tabbing *:focus
|
|
outline: none
|
|
box-shadow: 0 0 0 4px $pink !important
|
|
border-radius: 5px
|
|
|
|
/*.router-link-active
|
|
position: relative
|
|
text-decoration: none
|
|
&::after
|
|
content: ''
|
|
position: absolute
|
|
bottom: -4px
|
|
left: -10%
|
|
width: 110%
|
|
height: 4px
|
|
background: linear-gradient(to right, transparent, $pink, transparent)
|
|
transform: rotate(-1deg) */
|
|
|
|
|
|
// Page Route transition
|
|
|
|
.fade-enter-active,
|
|
.fade-leave-active
|
|
transition: opacity 1s, transform 1s
|
|
|
|
.fade-enter-from
|
|
transform: translateY(200px)
|
|
opacity: 0
|
|
|
|
.fade-enter-to
|
|
transform: translateY(0)
|
|
opacity: 1
|
|
|
|
.fade-leave-from
|
|
transform: translateY(0)
|
|
opacity: 1
|
|
|
|
.fade-leave-to
|
|
transform: translateY(200px)
|
|
opacity: 0
|
|
|
|
/* Welle oben */
|
|
.sectionWave.wave-top
|
|
position: absolute
|
|
left: 0
|
|
width: 100%
|
|
z-index: 1
|
|
transform: scaleY(1) scaleX(-1)
|
|
top: -2px
|
|
/* Welle unten */
|
|
.sectionWave.wave-bottom
|
|
position: absolute
|
|
left: 0
|
|
width: 100%
|
|
z-index: 1
|
|
transform: scaleY(-1)
|
|
bottom: -2px
|
|
|
|
|
|
// +++++++++++++++++
|
|
// ANIME Animations ++++
|
|
// +++++++++++++++++
|
|
|
|
// Basiszustand
|
|
.anime
|
|
opacity: 0
|
|
transform: translateY(20px)
|
|
transition: opacity 0.5s ease, transform 0.5s ease
|
|
|
|
// Sichtbarer Zustand
|
|
.visible
|
|
opacity: 1
|
|
transform: translateY(0)
|
|
|
|
// Fade-In-Animation
|
|
.anime_fadeIn.visible
|
|
animation: fadeIn 3s ease forwards
|
|
|
|
@keyframes fadeIn
|
|
from
|
|
opacity: 0
|
|
to
|
|
opacity: 1
|
|
|
|
// Pop-In-Animation
|
|
.anime_popIn.visible
|
|
animation: popIn 0.5s ease forwards
|
|
|
|
@keyframes popIn
|
|
from
|
|
opacity: 0
|
|
transform: scale(0.8)
|
|
to
|
|
opacity: 1
|
|
transform: scale(1)
|
|
|