56 lines
1.3 KiB
SCSS
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;
|
||
|
|
}
|
||
|
|
}
|