/* * Author: Caleb Bronn * Last Update: 8 Apr 2025 * This page modifies and add to the styling from universal.css for the Story of Rosa page. */ /* Applies a shadow over the left side of the image to blend it with the blakc background color of the */ .shadow-right { /* Remove img from document flow and position in top left corner, behind everything else */ position: absolute; top: 0; left: 0; z-index: -1; } /* Apply shadow only on wide screens */ @media screen and (orientation: landscape){ .shadow-right::after { content: ''; position: absolute; top: 0; width: 100%; height: 100vmin; box-shadow: inset -100px 0 100px #000; } } /* Because Rosa is positioned on the far left in this image */ .hero-img { background-position: 20% 50%; } #img-nav { width: 100vmin; height: 100vmin; display: flex; flex-flow: column nowrap; justify-content: space-evenly; } #img-nav li { width: 40%; height: 25%; margin: 0 10%; box-shadow: 10px 10px 10px 0px #000; border: 2px solid #fff; position: relative; /* for children and animation */ } #img-nav li:nth-of-type(even) { /* Push to the left */ margin-right: auto; transform: rotate(-10deg); animation: imgSlideInEven 1.5s ease-out 0s; } #img-nav li:nth-of-type(odd) { /* Push to the right */ margin-left: auto; transform: rotate(10deg); animation: imgSlideInOdd 1.5s ease-out 0s; } /* Some fun animations that make the images come tumbling in when the page loads, like they're doing cartwheels */ @keyframes imgSlideInEven { from { left: -100%; transform: rotate(-90deg); } to { left: 0; transform: rotate(-10deg); } } @keyframes imgSlideInOdd { from { left: -100%; transform: rotate(90deg); } to { left: 0; transform: rotate(10deg); } } #img-nav li p { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 0.5em; text-align: center; font-size: min(5vw, 2rem); color: #fff; text-shadow: 5px 5px 5px #000; opacity: 0; transition: all 0.3s ease-in-out; } /* On screens that support hovering, allow the text to display when the user hovers over the image */ @media screen and (hover: hover) { #img-nav li:hover p { color: #fff; opacity: 1; } } #img-nav img { width: 100%; height: 100%; object-fit: cover; }