May 17th 6:30 PM - May 19th 4:30 PM
diff --git a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss
index 1f5c3cca..51522d4d 100644
--- a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss
+++ b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss
@@ -1,114 +1,164 @@
.container {
- background-color: #fff5e0;
- height: 100%;
- width: 100%;
- position: absolute;
- display: grid;
- place-content: center;
-
- .logo {
- max-width: max(50vw, 360px);
- margin: 0 auto;
- padding-bottom: 60%;
-
- @media screen and (min-width: 800px) {
- padding-bottom: 30%;
- }
-
- path {
- stroke-width: 5;
- .word {
- stroke-dashoffset: 10px;
- stroke-width: 5;
- stroke-dasharray: 1500;
- opacity: 0;
-
- @for $i from 1 through 10 {
- &:nth-child(#{$i}n) {
- animation: fadeIn forwards 1s #{$i * 350}ms ease-in;
- }
- }
- }
- }
- }
-
- .info {
- font-size: 1.8em;
- text-align: center;
- position: absolute;
- place-self: center;
- bottom: 15%;
- z-index: 110;
-
- .time {
- font-size: min(4vw, 40px);
- grid-column: 1/3;
- font-family: "Gluten", cursive;
- font-weight: 600;
- margin-bottom: 24px;
-
- }
-
- .wrapper {
- display: grid;
- grid-template-columns: 1fr;
- column-gap: 40px;
- row-gap: 10px;
- max-width: 800px;
- margin: 0 auto;
-
- @media screen and (max-width: 800px) {
- grid-template-columns: 1fr;
- .border{
- padding: 4px !important;
- }
- .app {
- border-radius: 16px !important;
- padding: 14px 20px !important;
- font-size: 18px !important;
-
- }
- }
-
- .border {
- margin: 0 auto;
- width: max-content;
- border-radius: 20px;
- background: linear-gradient(93.29deg, #1F3066 8.27%, #F84E72 74.24%, #FF6969 99.26%);
- padding: 6px;
- transition: background 250ms;
-
- &:hover {
-
- background: #1F3066;
- .app {
- background: #1F3066;
- color: white;
- }
-
- }
-
- .app {
- transition: background 250ms, color 250ms;
- background-color: #fff5e0;
- width: 100%;
- border-radius: 14px;
- font-size: 0.6em;
- padding: 20px 40px;
- }
- }
-
- }
- }
+ background-color: #fff5e0;
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ display: grid;
+ place-content: center;
+
+ .logo {
+ position: relative;
+ max-width: max(50vw, 360px);
+ margin: 0 auto;
+ padding-bottom: 60%;
+
+ @media screen and (min-width: 800px) {
+ padding-bottom: 40%;
+ }
+
+ path {
+ stroke-width: 5;
+ .word {
+ stroke-dashoffset: 10px;
+ stroke-width: 5;
+ stroke-dasharray: 1500;
+ opacity: 0;
+
+ @for $i from 1 through 10 {
+ &:nth-child(#{$i}n) {
+ animation: fadeIn forwards 1s #{$i * 350}ms ease-in;
+ }
+ }
+ }
+ }
+ }
+
+ .info {
+ font-size: 1.8em;
+ text-align: center;
+ position: absolute;
+ place-self: center;
+ bottom: 15%;
+ z-index: 110;
+
+ .time {
+ font-size: min(4vw, 40px);
+ grid-column: 1/3;
+ font-family: "Gluten", cursive;
+ font-weight: 600;
+ margin-bottom: 24px;
+ }
+
+ .wrapper {
+ display: grid;
+ grid-template-columns: 1fr;
+ column-gap: 40px;
+ row-gap: 10px;
+ max-width: 800px;
+ margin: 0 auto;
+
+ @media screen and (max-width: 800px) {
+ grid-template-columns: 1fr;
+ .border {
+ padding: 4px !important;
+ }
+ .app {
+ border-radius: 16px !important;
+ padding: 14px 20px !important;
+ font-size: 18px !important;
+ }
+ }
+
+ .border {
+ margin: 0 auto;
+ width: max-content;
+ border-radius: 20px;
+ background: linear-gradient(
+ 93.29deg,
+ #1f3066 8.27%,
+ #f84e72 74.24%,
+ #ff6969 99.26%
+ );
+ padding: 6px;
+ transition: background 250ms;
+
+ &:hover {
+ background: #1f3066;
+ .app {
+ background: #1f3066;
+ color: white;
+ }
+ }
+
+ .app {
+ transition:
+ background 250ms,
+ color 250ms;
+ background-color: #fff5e0;
+ width: 100%;
+ border-radius: 14px;
+ font-size: 0.6em;
+ padding: 20px 40px;
+ }
+ }
+ }
+ }
}
@keyframes fadeIn {
- from {
- opacity: 0;
- }
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+.decoration {
+ position: absolute;
- to {
- opacity: 1;
- }
+ max-width: 30%;
+}
+
+.tl_clouds {
+ top: 0;
+ left: 0;
+
+ max-width: 40%;
+
+ @media screen and (min-width: 800px) {
+ max-width: 20%;
+ }
+}
+
+.butterfly {
+ top: 55%;
+ left: 0;
+
+ @media screen and (min-width: 800px) {
+ top: 30%;
+ }
+}
+
+.bl_star_stripe {
+ bottom: 0;
+ left: 0;
+}
+
+.mr_cloud_stars {
+ top: unset;
+ bottom: 35%;
+ right: 0;
+ max-width: 40%;
-}
\ No newline at end of file
+ @media screen and (min-width: 800px) {
+ top: 20%;
+ max-width: 20%;
+ }
+}
+
+.br_star_stripe {
+ bottom: 0;
+ right: 0;
+}
diff --git a/src/app/styles/animations.scss b/src/app/styles/animations.scss
index 4a77a926..4b48d6ea 100644
--- a/src/app/styles/animations.scss
+++ b/src/app/styles/animations.scss
@@ -101,7 +101,8 @@
@keyframes rainbow-fadein {
0% {
- transform: perspective(256px) translateY(-64px) scale(1.24) rotateX(60deg);
+ transform: perspective(256px) translateY(-64px) scale(1.24)
+ rotateX(60deg);
filter: hue-rotate(360deg);
}