59 lines
1.2 KiB
SCSS
59 lines
1.2 KiB
SCSS
#intro {
|
|
--headerHeight: 4em;
|
|
--navHeight: 4em;
|
|
background-color: rgb(80, 102, 124);
|
|
color: #fff;
|
|
|
|
padding: 0;
|
|
display: flex;
|
|
flex: 1;
|
|
.container {
|
|
display: grid;
|
|
grid-template-rows: auto auto 1fr;
|
|
position: relative;
|
|
padding: 1em;
|
|
|
|
background-image: url('/images/puzzlehead.svg');
|
|
background-size: contain;
|
|
background-position-x: right;
|
|
background-position-y: bottom;
|
|
background-repeat: no-repeat;
|
|
|
|
aspect-ratio: 1;
|
|
max-height: calc(var(--vh) * 100 - var(--header-height) - var(--nav-height));
|
|
@media (min-width: $container-width) {
|
|
max-height: calc(var(--vh) * 100 - var(--header-height));
|
|
}
|
|
}
|
|
.tagline {
|
|
font-size: 1.5em;
|
|
font-weight: 700;
|
|
em {color: #76ff03;font-style: italic;}
|
|
margin-bottom: 0.7rem;
|
|
line-height: 1.1;
|
|
}
|
|
.blurb {
|
|
margin-bottom: 2.5em;
|
|
max-width: 30ch;
|
|
font-size: 1.1em;
|
|
line-height: 1.4;
|
|
}
|
|
.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;
|
|
@include box-shadow;
|
|
justify-self: end;
|
|
align-self: end;
|
|
position: absolute;
|
|
bottom: 1em;
|
|
right: 1em;
|
|
}
|
|
} |