html {
--scrolly-window-height-about: 70vh;
--max-width-scrolly-card: 225pt;
}
/* Extra small devices + default behavior */
/* PUT ALL CSS FOR SMALL DEVICES HERE!!!! */
/* Makes hype frame square */
.square {
position: relative;
width: 100%;
padding: 0;
margin: 0;
/* Prevents erroneous text selection on mobile when you try to highlight text but the image gets caught */
pointer-events: none;
}
/* Makes hype frame square */
.square:after {
content: "";
display: block;
padding-bottom: 100%;
margin: 0;
/* background: rgb(255, 140, 0); */
/* Prevents erroneous text selection on mobile when you try to highlight text but the image gets caught */
pointer-events: none;
}
.square-content {
position: absolute;
width: 100%;
height: 100%;
border-radius: VAR(--bb-card-radius);
/* border: 2pt solid black; */
overflow: hidden;
/* padding: 5pt; */
/* margin: 5pt; */
/* background: rgb(32, 114, 255); */
/* Horiz Vert Blur Spread Color */
box-shadow: 0pt 5pt 20pt 5pt rgba(0, 0, 0, 0.112);
/* Prevents erroneous text selection on mobile when you try to highlight text but the image gets caught */
pointer-events: none;
}
/* I didn't make this class I think hype did... but when the page loads it's showing a chartruese small rect as a flash and this CSS fixes that */
.HYPE_document {
background-color: rgb(255, 255, 255);
width: 100%;
height: 100%;
}
/* Top-level grid container for scrolly story */
.scrolly-container {
display: grid;
grid-template-columns: 1fr;
width: 100%;
gap: 0 VAR(--main-padding);
/* This helps for narrow layout cuz the text is bottom aligned */
padding-bottom: 60pt;
}
/* This is a trick to make the replay link take you a bit above where it usually would. See: https://css-tricks.com/hash-tag-links-padding/ */
/* .scrolly-container::before {
display: block;
content: " ";
margin-top: -285px;
height: 285px;
visibility: hidden;
pointer-events: none;
} */
/* Add this class to the parent scrolly-container to give it a gray rounded box container */
.scrolly-container-card-style {
padding: 2em 2em 60pt 2em;
background-color: VAR(--bb-bg-fill-gray);
border-radius: VAR(--bb-card-radius);
}
/* Container that holds the sliding image for scrolly story (an additional grid container) */
.scrolly-image-container {
position: sticky;
top: CALC((100vh - VAR(--scrolly-window-height-about))/2);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
grid-column: 1 / span 1;
grid-row: 1 / span 6;
margin: 0;
height: VAR(--scrolly-window-height-about);
/* background-color: rgba(255, 218, 185, 0.27); */
z-index: 4000;
/* Prevents erroneous text selection on mobile when you try to highlight text but the image gets caught */
pointer-events: none;
}
/* Container that holds the sliding text for scrolly story */
.scrolly-text-container{
grid-column: 1 / span 1;
grid-row: 1 / span 6;
margin: 0;
/* background-color: rgba(134, 94, 174, 0.311); */
z-index: 2000;
}
/* Image that is layered within */
.scrolly-image-layer {
width: 100%;
max-width: VAR(--max-width-scrolly-card);
/* max-width: VAR(--scrolly-window-height-about); */
/* background-color: rgba(185, 255, 201, 0.907); */
/* Prevents erroneous text selection on mobile when you try to highlight text but the image gets caught */
pointer-events: none;
}
/* Container for alt aria image descrptions */
.scrolly-img-desc {
/* background-color: green; */
}
/* Full-screen-height container (used as js trigger) that holds a single text block for scrolly story */
.scrolly-text-item {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
overflow: hidden;
height: VAR(--scrolly-window-height-about);
margin: 0;
text-align: center;
/* border: 2pt solid rgba(0, 255, 128, 0.434); */
/* background-color: rgba(69, 28, 111, 0.318); */
}
/* Container that holds headers / paragraph / other text in a scrolly story */
.scrolly-text-item > * {
color: rgb(188, 188, 188);
/* background-color: rgba(244, 165, 96, 0.331); */
}
/* this dot notation means "Selects all elements with both classes within its class attribute and apply these to all children" */
.scrolly-text-item.entered > * {
/* background: #fff888; */
color: rgb(0, 0, 0);
transition-property: color;
transition-duration: 0.2s;
}
/* Give max width to text within scrolly story */
.scrolly-text {
/* background-color: violet; */
width: 100%;
max-width: VAR(--max-width-scrolly-card);
}
.scrolly-replay-link-container {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
/* background: chartreuse; */
}
/* Used for replaying the scrollystory */
.scrolly-replay-link {
margin: 20pt 20pt 40pt 20pt;
text-align: center;
/* background-color: springgreen; */
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
/* Make text align to the left when view is side-by-side */
.scrolly-text-item {
text-align: left;
}
/* Top-level grid container for scrolly story */
.scrolly-container {
grid-template-columns: 1fr 1fr;
padding-bottom: 0;
}
/* Container that holds the sliding image for scrolly story (an additional grid container) */
.scrolly-image-container {
grid-column: 1 / span 1;
justify-content: center;
}
/* Container that holds the sliding text for scrolly story */
.scrolly-text-container{
grid-column: 2 / span 1;
}
/* Remove max width to text within scrolly story for large screens */
.scrolly-text {
/* background-color: rgb(94, 50, 94); */
max-width: none;
}
/* Image that is layered within */
.scrolly-image-layer {
width: 100%;
max-width: 300pt;
}
/* Full-screen-height container (used as js trigger) that holds a single text block for scrolly story */
.scrolly-text-item {
justify-content: center;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}