website/assets/sass/countdown.scss

206 lines
3.4 KiB
SCSS
Raw Normal View History

2023-07-06 20:21:40 +00:00
.countdown-page {
background-color: $background;
color: white;
height: 100vh;
overflow: hidden;
}
.countdown-page__content__container {
display: flex;
justify-content: center;
height: 100%;
}
.countdown-page__content {
margin-top: -5rem;
display: flex;
align-items: center;
}
.accent-band {
background-color: $accent;
height: 1.5vh;
width: 100%;
}
.launch-logo-back {
margin-top: -1.8rem;
opacity: 0.05;
position: absolute;
top: 0rem;
left: 0;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
svg {
height: 80vh;
}
}
.launch-logo-aligner {
margin-top: -10rem;
height: 100%;
display: grid;
grid-template-columns: 1fr 8fr;
}
.launch-logo-large {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 4rem;
svg {
height: 10rem;
}
}
.launch-logo {
svg {
width: 10rem;
height: auto;
}
}
.launch-introduction {
margin-top: 3rem;
margin-bottom: 2rem;
letter-spacing: .33rem;
text-transform: uppercase;
font-size: .8rem;
text-align: center;
}
.countdown__container {
.countdown__content {
flex-shrink: 1;
display: flex;
}
.timer__value {
font-size: 5.4rem;
}
.timer__label {
font-size: 1rem;
text-align: center;
}
.timer__separator {
margin: 0 1rem;
display: flex;
flex-direction: column;
justify-content: center;
.timer__value {
opacity: 0.5;
margin-top: -.4rem;
font-weight: 300;
}
.timer__label {
opacity: 0;
}
}
.timer__value {
display: flex;
justify-content: center;
align-items: center;
}
}
@media (max-width: $md-breakpoint) {
.launch-logo-back {
top: 0;
margin-top: 0;
}
.countdown-page__content {
// margin-top: -10rem;
}
.countdown__container {
.timer__value {
font-size: 3rem;
}
.timer__separator {
margin: 0 .8rem;
.timer__value {
font-size: 2rem;
}
}
.timer__label {
font-size: .8rem;
}
}
.countdown__content {
justify-content: center;
}
}
.countdown-footer {
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
width: 100%;
background-color: rgba(1, 1, 1, .5);
color: white;
// background-color: $tertiary;
.page-container {
display: flex;
justify-content: space-between;
}
padding: .5rem 0;
.countdown-footer__logo {
padding: .3rem 0;
svg {
width: auto;
height: 5rem;
}
}
}
.socials {
display: flex;
align-items: center;
.social-icon {
width: 1.4rem;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.social-item {
display: flex;
justify-content: center;
align-items: center;
}
.social-text {
margin-right: .8rem;
}
a {
color: white;
opacity: 0.8;
}
svg {
fill: white;
opacity: 0.8;
}
}
@media (max-width: $md-breakpoint) {
.socials {
.social-text {
display: none;
}
}
}