@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap"); @layer demo { /* Poor man's CSS Reset */ * { box-sizing: border-box; } /* Config */ :root { --slide-width: 36vmin; --slide-height: calc(var(--slide-width) * 1.4); --gap: 2rem; } /* Default Colors */ html, body { background: #111; color: #fff; font-family: "Rubik", sans-serif; } /* Center Carousel in */ html { height: 100%; } body { height: 100%; display: grid; place-items: safe center; } /* Basic Carousel Styles */ .slides { list-style: none; overflow: scroll; width: calc(80vmin - 4rem); margin: 0 auto; white-space: nowrap; outline: 1px solid #333; background: #000; padding: 0; margin: 0; touch-action: pan-x; } /* Only scroll-snap when not dragging */ .slides:not(.dragging) { scroll-snap-type: x mandatory; } .slide { padding: 0; margin: 0; display: inline-block; width: var(--slide-width); height: var(--slide-height); scroll-snap-align: center; position: relative; overflow: clip; /* Use clip, not hidden! */ } .slide + .slide { margin-left: var(--gap); } /* Lay out the slide contents */ .slide > a { text-decoration: none; mix-blend-mode: lighten; background: rgb(255, 255, 255); color: rgb(0, 0, 0); font-size: 2rem; transform: rotate(90deg) translateX(-100%); transform-origin: 0% 100%; bottom: 0.5rem; left: 0rem; display: inline-block; padding: 0.5rem 1rem; text-align: center; position: absolute; } .slide > a > span { padding-right: 0.1rem; font-size: 0.5em; } .slide > img { display: block; width: 100%; height: 100%; /* Stick 'm to the right of their frame */ position: absolute; right: 0; } }