103 lines
1.6 KiB
Plaintext
103 lines
1.6 KiB
Plaintext
#kardaschow {
|
|
bottom: 0px;
|
|
//min-height: 50vh;
|
|
position: fixed;
|
|
top: 0px;
|
|
width: 100%;
|
|
|
|
// everything after the current visible and *every visible*
|
|
.current-fragment ~ .fragment,
|
|
.visible {
|
|
height: 8%;
|
|
h1 {
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
|
|
// but not the current (important)
|
|
.current-fragment {
|
|
height: 74% !important;
|
|
h1 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.expand {
|
|
display: initial !important;
|
|
}
|
|
}
|
|
|
|
div {
|
|
overflow: hidden;
|
|
|
|
// only the movement and size change is animated
|
|
h1 {
|
|
transition: all .2s ease;
|
|
}
|
|
|
|
.expand {
|
|
display: none !important;
|
|
}
|
|
|
|
// per default: 28% high
|
|
&:not(.visible) {
|
|
height: 30%;
|
|
// explot fragments initial hidden state
|
|
opacity: 1;
|
|
visibility: visible;
|
|
|
|
h1 {
|
|
position: relative;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
#type-1 {
|
|
background-color: #fc6769;
|
|
}
|
|
|
|
#type-2 {
|
|
background-color: #63c9ce;
|
|
}
|
|
|
|
#type-3 {
|
|
background-color: #f4e623;
|
|
|
|
// slow rotation of galaxy
|
|
/*img {
|
|
animation: rotate 300s infinite linear;
|
|
|
|
// easter egg
|
|
&:hover {
|
|
animation: rotate 1s infinite linear;
|
|
}
|
|
}*/
|
|
}
|
|
}
|
|
|
|
.expand {
|
|
img {
|
|
// remove upstream styles
|
|
margin: inherit !important;
|
|
background: inherit !important;
|
|
border: inherit !important;
|
|
box-shadow: inherit !important;
|
|
max-height: unset;
|
|
max-width: unset;
|
|
|
|
max-width: 95%;
|
|
max-height: 60%;
|
|
}
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|