pluie.me
Source code + assets for pluie.me
1/*
2 Like that fancy expanding/contracting splash screen I have in the main page?
3 Now you can have it too! Just uh... this is not really that adaptable
4 Good luck!!!
5 JavaScript *is* required. There's no way you can do this in CSS without some
6 seriously evil crimes
7*/
8
9.splash {
10 transition: padding 0.5s ease-out;
11
12 .intro {
13 padding: calc(50vh - 3 * 4rem) 0;
14 transition: padding 0.5s ease-out;
15
16 @media (max-width: 1024px) {
17 padding: 0;
18 }
19 }
20
21 &.compact .intro {
22 padding: 0;
23 }
24
25 .scroll-down {
26 @apply text-main-fg-sub transition absolute;
27 bottom: 3rem;
28 left: 50%;
29 transform: translate(-50%, 0);
30 animation: 0.75s infinite alternate bob;
31
32 &::after {
33 @apply mx-auto block h-6 w-6 border-2 border-main-fg-sub border-l-0
34 border-t-0 origin-center;
35 transform: scale(1.5, 1.25) rotate(45deg);
36 content: "";
37 }
38 }
39 .bottom-detector {
40 position: absolute;
41 bottom: -5rem;
42 }
43}