117 lines
No EOL
2.3 KiB
SCSS
117 lines
No EOL
2.3 KiB
SCSS
#work #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(100vh - var(--header-height) - var(--nav-height));
|
|
max-height: calc(var(--vh) * 100 - var(--header-height) - var(--nav-height));
|
|
@media (min-width: $container-width) {
|
|
max-height: calc(100vh - var(--header-height));
|
|
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.5em;
|
|
line-height: 1.1;
|
|
}
|
|
.blurb {
|
|
font-size: 1.1em;
|
|
margin-bottom: 2em;
|
|
max-width: 38ch;
|
|
line-height: 1.4;
|
|
}
|
|
.button {
|
|
background: #06f;
|
|
color: white;
|
|
width: max-content;
|
|
svg {
|
|
width: 1.75em;
|
|
height: 1.75em;
|
|
margin: 0;
|
|
}
|
|
span {
|
|
display: none;
|
|
font-size: 1.25em;
|
|
}
|
|
border-radius: 100em;
|
|
@include box-shadow;
|
|
justify-self: start;
|
|
align-self: start;
|
|
position: absolute;
|
|
bottom: 1em;
|
|
right: 1em;
|
|
}
|
|
@media (max-width: $container-width) {
|
|
@media (min-height: 25em) {
|
|
.tagline {
|
|
font-size: clamp(1.5em,6vw,3em)
|
|
}
|
|
.blurb {
|
|
font-size: clamp(1.1em, 3vw, 1.25em)
|
|
}
|
|
}
|
|
@media (min-height: 31.25em) {
|
|
@media (min-width: 32em) {
|
|
.button {
|
|
position: revert;
|
|
span {display: block;}
|
|
padding: 1em 2em;
|
|
}
|
|
aspect-ratio: 7.7/7;
|
|
}
|
|
@media (min-width: 37.5em) {
|
|
aspect-ratio: 640 / 540
|
|
}
|
|
@media (min-width: 40em) {
|
|
aspect-ratio: 720 / 600
|
|
}
|
|
@media (min-width: 42.5em) {
|
|
aspect-ratio: 744 / 600
|
|
}
|
|
@media (min-width: 50em) {
|
|
aspect-ratio: 800 / 620
|
|
}
|
|
@media (min-width: 52.5em) {
|
|
aspect-ratio: 840 / 640
|
|
}
|
|
@media (min-width: 55em) {
|
|
aspect-ratio: 880 / 640
|
|
}
|
|
}
|
|
}
|
|
@media (min-width: $container-width) {
|
|
@media (min-height: 25em) {
|
|
.tagline {font-size: 3em}
|
|
.blurb {font-size: 1.25em}
|
|
.button {
|
|
position: revert;
|
|
span {display: block;}
|
|
padding: 1em 2em;
|
|
}
|
|
max-height: 46em;
|
|
}
|
|
@media (min-height: 40em) {
|
|
.tagline {margin-top: 1em;}
|
|
}
|
|
}
|
|
} |