167 lines
4.4 KiB
HTML
167 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Snappy</title>
|
||
<style>
|
||
html,
|
||
body {
|
||
/* Transitional from https://modernfontstacks.com/ */
|
||
font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
|
||
font-weight: normal;
|
||
font-size: 1.25rem;
|
||
background-color: #f8f9fa;
|
||
color: #343a40;
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
background-color: #212529;
|
||
color: #f8f9fa;
|
||
}
|
||
}
|
||
|
||
body {
|
||
margin: 2rem;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 3rem;
|
||
margin-bottom: 1em;
|
||
}
|
||
|
||
/* Custom snappy styling */
|
||
/* Colors from Open color (https://yeun.github.io/open-color) */
|
||
.snappy-carousel {
|
||
.scroll-container {
|
||
max-height: 300px;
|
||
}
|
||
|
||
.slide {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 33%;
|
||
aspect-ratio: 3/2;
|
||
max-height: 400px;
|
||
|
||
background-color: #f1f3f5;
|
||
color: #343a40;
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
background-color: #495057;
|
||
color: #f8f9fa;
|
||
}
|
||
}
|
||
|
||
.slide:nth-child(even) {
|
||
background-color: #e9ecef;
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
background-color: #343a40;
|
||
color: #f8f9fa;
|
||
}
|
||
}
|
||
|
||
.prev,
|
||
.next {
|
||
width: 1.5rem;
|
||
height: 1.5rem;
|
||
font-size: 1rem;
|
||
border: none;
|
||
background-color: #f1f3f5;
|
||
color: #339af0;
|
||
|
||
&:hover,
|
||
&:active {
|
||
background-color: #dee2e6;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
background-color: #495057;
|
||
|
||
&:hover,
|
||
&:active {
|
||
background-color: #868e96;
|
||
color: #1971c2;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pagination {
|
||
display: flex;
|
||
}
|
||
|
||
.pagination .dot {
|
||
width: 0.66rem !important;
|
||
height: 0.66rem !important;
|
||
border-radius: 0.33rem;
|
||
background-color: #dee2e6 !important;
|
||
margin: 0 0.25rem;
|
||
|
||
transition-property: width, background;
|
||
transition-duration: .8s;
|
||
transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
|
||
|
||
cursor: pointer;
|
||
}
|
||
|
||
.pagination .dot:hover {
|
||
background-color: #adb5bd !important;
|
||
}
|
||
|
||
.pagination .dot.is-active {
|
||
background-color: #1971c2 !important;
|
||
width: 2rem !important;
|
||
}
|
||
}
|
||
</style>
|
||
<link rel="stylesheet" href="dist/snappy.css">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<h1>Snappy</h1>
|
||
|
||
<!--
|
||
Options
|
||
-------
|
||
|
||
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap
|
||
|
||
data-direction="x"
|
||
data-direction="y"
|
||
|
||
data-gap="var(--size-1)"
|
||
data-gap="10px"
|
||
data-gap="1rem"
|
||
|
||
data-snap-stop="always"
|
||
data-snap-stop="normal"
|
||
|
||
data-snap-align="center"
|
||
data-snap-align="start"
|
||
data-snap-align="end"
|
||
-->
|
||
<div class="snappy-carousel" data-gap="1rem" data-snap-align="start">
|
||
<div class="scroll-container">
|
||
<div class="slide">1</div>
|
||
<div class="slide">2</div>
|
||
<div class="slide">3</div>
|
||
<div class="slide">4</div>
|
||
<div class="slide">5</div>
|
||
<div class="slide">6</div>
|
||
<div class="slide">7</div>
|
||
<div class="slide">8</div>
|
||
</div>
|
||
|
||
<button class="prev">❮</button>
|
||
<button class="next">❯</button>
|
||
<div class="pagination"></div>
|
||
</div>
|
||
|
||
<!-- Javascript is only needed for pagination and buttons -->
|
||
<script src="dist/snappy.js" defer></script>
|
||
</body>
|
||
|
||
</html> |