Change html structure to get get rid of id's
This commit is contained in:
vollstock committed
1 parent
6bd456764e
commit
fa97f2c369
4 files changed
+215
-162
No files matched your search
+84
-92
@@ -30,98 +30,90 @@
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* Custom snappy styling */
|
||||
/* Colors from Open color (https://yeun.github.io/open-color) */
|
||||
.snappy-carousel {
|
||||
counter-reset: snappy-slide;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.snappy-slide {
|
||||
counter-increment: snappy-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;
|
||||
}
|
||||
}
|
||||
|
||||
.snappy-slide:nth-child(even) {
|
||||
background-color: #e9ecef;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: #343a40;
|
||||
color: #f8f9fa;
|
||||
}
|
||||
}
|
||||
|
||||
.snappy-slide:before {
|
||||
content: counter(snappy-slide);
|
||||
}
|
||||
|
||||
.snappy-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.snappy-button {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
background-color: #f1f3f5;
|
||||
color: #339af0;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: #dee2e6;
|
||||
.scroll-container {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: #495057;
|
||||
.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: #868e96;
|
||||
color: #1971c2;
|
||||
background-color: #dee2e6;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: #495057;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: #868e96;
|
||||
color: #1971c2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.snappy-pagination {
|
||||
display: flex;
|
||||
}
|
||||
.pagination {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.snappy-pagination-dot {
|
||||
width: 0.66rem !important;
|
||||
height: 0.66rem !important;
|
||||
border-radius: 0.33rem;
|
||||
background-color: #dee2e6 !important;
|
||||
margin: 0 0.25rem;
|
||||
.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);
|
||||
transition-property: width, background;
|
||||
transition-duration: .8s;
|
||||
transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.snappy-pagination-dot:hover {
|
||||
background-color: #adb5bd !important;
|
||||
}
|
||||
.pagination .dot:hover {
|
||||
background-color: #adb5bd !important;
|
||||
}
|
||||
|
||||
.snappy-pagination-dot.is-active {
|
||||
background-color: #1971c2 !important;
|
||||
width: 2rem !important;
|
||||
.pagination .dot.is-active {
|
||||
background-color: #1971c2 !important;
|
||||
width: 2rem !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="dist/snappy.css">
|
||||
@@ -151,21 +143,21 @@
|
||||
data-snap-align="start"
|
||||
data-snap-align="end"
|
||||
-->
|
||||
<div id="demo-carousel" class="snappy-carousel" data-gap="1rem" data-snap-align="start">
|
||||
<div class="snappy-slide"></div>
|
||||
<div class="snappy-slide"></div>
|
||||
<div class="snappy-slide"></div>
|
||||
<div class="snappy-slide"></div>
|
||||
<div class="snappy-slide"></div>
|
||||
<div class="snappy-slide"></div>
|
||||
<div class="snappy-slide"></div>
|
||||
<div class="snappy-slide"></div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="snappy-controls">
|
||||
<button class="snappy-button snappy-prev" data-carousel="demo-carousel">❮</button>
|
||||
<button class="snappy-button snappy-next" data-carousel="demo-carousel">❯</button>
|
||||
<div class="snappy-pagination" data-carousel="demo-carousel"></div>
|
||||
<button class="prev">❮</button>
|
||||
<button class="next">❯</button>
|
||||
<div class="pagination"></div>
|
||||
</div>
|
||||
|
||||
<!-- Javascript is only needed for pagination and buttons -->
|
||||
|
||||
Reference in new issue
Block a user