abdullahtarawneh.com/assets/scss/components/intro.scss

59 lines
1.2 KiB
SCSS
Raw Normal View History

2021-12-24 06:20:07 +00:00
#intro {
--headerHeight: 4em;
--navHeight: 4em;
background-color: rgb(80, 102, 124);
color: #fff;
2021-12-24 06:20:07 +00:00
padding: 0;
display: flex;
flex: 1;
.container {
display: grid;
grid-template-rows: auto auto 1fr;
2021-12-24 06:20:07 +00:00
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));
}
2021-12-24 06:20:07 +00:00
}
.tagline {
font-size: 1.5em;
font-weight: 700;
em {color: #76ff03;font-style: italic;}
2021-12-24 06:20:07 +00:00
margin-bottom: 0.7rem;
line-height: 1.1;
}
.blurb {
margin-bottom: 2.5em;
2021-12-24 06:20:07 +00:00
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;
2021-12-24 06:20:07 +00:00
position: absolute;
bottom: 1em;
right: 1em;
}
}