abdullahtarawneh.com/assets/scss/components/intro.scss
2021-12-24 00:20:07 -06:00

56 lines
1.3 KiB
SCSS

#intro {
--headerHeight: 4em;
--navHeight: 4em;
background-color: #00234F;
color: white;
background-image: url('/images/puzzlehead.svg');
background-size: contain;
background-position-x: center;
background-position-y: bottom;
background-repeat: no-repeat;
min-height: calc(100vh - var(--headerHeight) - var(--navHeight));
min-height: calc(var(--vh, 1vh) * 100 - var(--headerHeight) - var(--navHeight));
@media (min-width: 960px) {
min-height: calc(100vh - var(--headerHeight));
min-height: calc(var(--vh, 1vh) * 100 - var(--headerHeight));
}
padding: 0;
display: flex;
flex: 1;
.container {
position: relative;
padding: 1em;
}
.tagline {
font-size: 1.5em;
font-weight: 700;
em {color: #0f6;font-style: italic;}
margin-bottom: 0.7rem;
line-height: 1.1;
}
.blurb {
margin-bottom: 1.75em;
max-width: 30ch;
font-size: 1.1em;
line-height: 1.4;
}
// TODO: matrix of weird sizes for intro breakpoints
//
// END: matrix of weird sizes for breakpoints
.button {
background: #06f;
color: white;
width: max-content;
i {margin: 0;}
span {display: none;}
@media (min-width: 30em) {
span {display: block;}
padding: 1em 2em;
}
border-radius: 100em;
position: absolute;
bottom: 1em;
right: 1em;
@include box-shadow;
}
}