198 lines
3.9 KiB
Sass
198 lines
3.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/montserrat/Montserrat-Light.otf') format("opentype")
|
|
font-weight: normal
|
|
font-style: normal
|
|
font-display: swap
|
|
|
|
@font-face
|
|
font-family: 'Mainfont-Bold'
|
|
src: url('@/assets/fonts/montserrat/Montserrat-Medium.otf') format("opentype")
|
|
font-weight: normal
|
|
font-style: normal
|
|
font-display: swap
|
|
|
|
@font-face
|
|
font-family: 'Comfortaa'
|
|
src: url('@/assets/fonts/Comfortaa-Light.ttf') format("truetype")
|
|
font-weight: normal
|
|
font-style: normal
|
|
font-display: swap
|
|
|
|
@font-face
|
|
font-family: 'Comfortaa-Bold'
|
|
src: url('@/assets/fonts/Comfortaa-Bold.ttf') format("truetype")
|
|
font-weight: normal
|
|
font-style: normal
|
|
font-display: swap
|
|
|
|
@font-face
|
|
font-family: 'Typewriter'
|
|
src: url('@/assets/fonts/JMH_Typewriter.ttf') format("truetype")
|
|
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
|
|
|
|
|
|
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%
|
|
|
|
.fade-enter-active, .fade-leave-active
|
|
transition: opacity 1.2s ease
|
|
|
|
.fade-enter-from, .fade-leave-to
|
|
opacity: 0
|
|
|
|
*:focus
|
|
outline: 1px solid transparent
|
|
|
|
/*.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
|
|
|
|
|
|
|
|
|
|
// +++++++++++++++++
|
|
// 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)
|
|
|