FestivalServer/Public/assets/festival.scss

262 lines
4.7 KiB
SCSS
Raw Normal View History

2021-11-20 12:19:50 +01:00
html {
font-family: -apple-system, BlinkMacSystemFont, "SF Hello", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
font-weight: 200;
}
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #2D212D;
}
.wrapper {
padding: 0; margin: 0;
min-height: 100%;
background: linear-gradient(160deg, #784141, #271c27);
}
.texts {
padding: 5%;
width: 90%;
color: white;
display: -ms-grid;
display: grid;
row-gap: 10px;
-webkit-column-gap: 0px;
column-gap: 0px;
grid-template-columns: 100%;
justify-items: center;
position: absolute;
top: 20%;
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
}
.title-text {
font-size: 144px;
-ms-grid-row: 1;
grid-row: 1;
}
.normal-text {
font-size: 56px;
-ms-grid-column: 1;
grid-column: 1;
font-weight: 100;
}
.date-text {
-ms-grid-row: 2;
grid-row: 2;
}
.location-text {
-ms-grid-row: 3;
grid-row: 3;
}
.site-title {
font-size: 56px;
color: white;
top: 20px;
left: 5%;
width: 90%;
position: absolute;
}
.button {
padding: 10px 40px;
border: thin solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
background: rgba(255, 255, 255, 0.1);
min-width: 100px;
text-align: center;
}
.half-button {
padding: 10px 20px;
min-width: 80px;
}
.button:hover {
border: thin solid rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.2);
}
.register-button {
-ms-grid-row: 4;
grid-row: 4;
margin-top: 20px;
-webkit-transition-duration: 300ms;
transition-duration: 300ms;
}
.participation-buttons {
-ms-grid-row: 5;
grid-row: 5;
-ms-grid-column: 1;
grid-column: 1;
display: none;
}
.not-participate-button {
margin-right: 10px;
}
.participate-button {
margin-left: 10px;
}
.name-form {
-ms-grid-row: 4;
grid-row: 4;
-ms-grid-column: 1;
grid-column: 1;
margin-top: 20px;
display: none;
}
input[type=text] {
background-color: rgba(255, 255, 255, 0.3);
font-size: 56px;
color: white;
border: thin solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 10px 10px;
font-family: -apple-system, BlinkMacSystemFont, "SF Hello", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
font-weight: 100;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: rgb(211, 211, 211);
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: rgb(211, 211, 211);
}
::-ms-input-placeholder { /* Microsoft Edge */
color: rgb(211, 211, 211);
}
.final-text {
-ms-grid-row: 4;
grid-row: 4;
margin: 40px 0;
}
.registered-text {
display: none;
}
.declined-text {
display: none;
}
.error-text {
display: none;
}
.add-calender-event {
-ms-grid-row: 5;
grid-row: 5;
}
@media only screen and (max-width: 800px) {
.title-text {
font-size: 18vw;
}
.normal-text {
font-size: 7vw;
}
input[type=text] {
font-size: 7vw;
}
}
@media only screen and (min-aspect-ratio: 1/1) {
.title-text {
font-size: 12vh;
}
.normal-text {
font-size: 4vh;
}
input[type=text] {
font-size: 4vh;
}
}
@keyframes blinkOff {
from { opacity: 1.0; }
to { opacity: 0.0; }
}
@keyframes blinkOn {
from { opacity: 0.0; }
to { opacity: 1.0; }
}
.bokeh {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
$bokehCount: 50;
$bokehBaseSize: 5rem;
$bokehBaseDuration: 0.6s;
$colorSet: (
#f8f2e7,
#e0c5a5,
#ffe0a9,
#ebe1b2,
rgb(255, 255, 217),
rgb(222, 208, 162),
rgb(230, 185, 123),
);
.bokeh div {
position: absolute;
overflow: hidden;
border-radius: 50%;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
@for $i from 1 through $bokehCount {
$childSize: random(12) * 0.4rem + $bokehBaseSize;
$childLeft: random(120) * 1% - 20%;
$childColor: nth($colorSet, random(length($colorSet)));
$childDuration: $bokehBaseDuration + random(100) * 0.01s;
$childDown: (random(250) * 0.1rem);
$cFirstOpacity: 0.3 + random(20) * 0.01;
$cSecondOpacity: 0.2 + random(20) * 0.01;
$cFirstBlur: 0.1rem + random(10) * 0.1rem;
$cSecondBlur: 0.6rem + random(20) * 0.1rem;
&:nth-child(#{(2*$i)-1}) {
width: $childSize;
height: $childSize;
top: -$childSize;
left: $childLeft;
color: rgba($childColor, $cFirstOpacity);
box-shadow: 0 $childDown $cFirstBlur currentColor;
animation-duration: $childDuration;
animation-name: blinkOn;
}
&:nth-child(#{2*$i}) {
width: $childSize;
height: $childSize;
top: -$childSize;
left: $childLeft;
color: rgba($childColor, $cSecondOpacity);
box-shadow: 0 $childDown $cSecondBlur currentColor;
animation-duration: $childDuration;
animation-name: blinkOff;
}
}
}