74 lines
1.1 KiB
SCSS
74 lines
1.1 KiB
SCSS
@import "normalize.css";
|
|
|
|
body,
|
|
html {
|
|
font-size: 18px;
|
|
}
|
|
|
|
$content-width: 100ch;
|
|
$max-content-width: calc(100% - 2rem);
|
|
|
|
.banner {
|
|
width: $content-width;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
display: block;
|
|
}
|
|
|
|
.details-wrapper {
|
|
position: sticky;
|
|
padding-top: 1rem;
|
|
top: 0;
|
|
background-color: white;
|
|
|
|
.details {
|
|
width: $content-width;
|
|
max-width: $max-content-width;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
.content-wrapper {
|
|
display: grid;
|
|
width: 100%;
|
|
grid-template-columns: 1fr min($content-width, $max-content-width) 1fr;
|
|
|
|
& > * {
|
|
grid-column: 2;
|
|
width: 100%;
|
|
}
|
|
|
|
.full-bleed {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.bleed {
|
|
grid-column: 1 / -1;
|
|
width: ($content-width * 1.2);
|
|
max-width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.inset {
|
|
width: ($content-width * 0.8);
|
|
max-width: $max-content-width;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
#scroll-indicator-container {
|
|
height: 5px;
|
|
width: 100%;
|
|
position: relative;
|
|
top: 5px;
|
|
|
|
#scroll-indicator {
|
|
background-color: green;
|
|
height: 100%;
|
|
opacity: 0;
|
|
width: 0;
|
|
transition: opacity 0.2s linear;
|
|
}
|
|
}
|