Spaces:
Running
Running
Fix: thumbnails flex-wrap (wrap to new lines instead of overflow), mobile 48px thumbs
Browse files- index.html +6 -5
index.html
CHANGED
|
@@ -154,16 +154,17 @@ img{max-width:100%;display:block}a{text-decoration:none;color:inherit}
|
|
| 154 |
.gallery-dots{display:flex;justify-content:center;gap:6px;padding:6px 0}
|
| 155 |
.gallery-dot{width:8px;height:8px;border-radius:50%;background:var(--gl);cursor:pointer;transition:var(--t)}
|
| 156 |
.gallery-dot.active{background:var(--p);width:20px;border-radius:4px}
|
| 157 |
-
.gallery-thumbs{display:flex;
|
| 158 |
-
.gallery-thumbs::-webkit-scrollbar{
|
| 159 |
-
.gallery-thumb{width:
|
| 160 |
.gallery-thumb.active{border-color:var(--p)}
|
| 161 |
-
.gallery-thumb img{width:100%;height:100%;object-fit:contain;padding:
|
| 162 |
@media(max-width:768px){
|
| 163 |
.gallery-nav{opacity:.7;width:32px;height:32px;font-size:.85rem}
|
| 164 |
.gallery-slide{max-height:60vh}
|
| 165 |
.gallery-slide img{max-height:60vh}
|
| 166 |
-
.gallery-
|
|
|
|
| 167 |
}
|
| 168 |
|
| 169 |
/* Info */
|
|
|
|
| 154 |
.gallery-dots{display:flex;justify-content:center;gap:6px;padding:6px 0}
|
| 155 |
.gallery-dot{width:8px;height:8px;border-radius:50%;background:var(--gl);cursor:pointer;transition:var(--t)}
|
| 156 |
.gallery-dot.active{background:var(--p);width:20px;border-radius:4px}
|
| 157 |
+
.gallery-thumbs{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:6px}
|
| 158 |
+
.gallery-thumbs::-webkit-scrollbar{display:none}
|
| 159 |
+
.gallery-thumb{width:56px;height:56px;min-width:56px;border-radius:8px;overflow:hidden;border:2px solid var(--gl);cursor:pointer;flex-shrink:0;transition:var(--t);background:#f8fafc}
|
| 160 |
.gallery-thumb.active{border-color:var(--p)}
|
| 161 |
+
.gallery-thumb img{width:100%;height:100%;object-fit:contain;padding:2px}
|
| 162 |
@media(max-width:768px){
|
| 163 |
.gallery-nav{opacity:.7;width:32px;height:32px;font-size:.85rem}
|
| 164 |
.gallery-slide{max-height:60vh}
|
| 165 |
.gallery-slide img{max-height:60vh}
|
| 166 |
+
.gallery-thumbs{gap:5px}
|
| 167 |
+
.gallery-thumb{width:48px;height:48px;min-width:48px}
|
| 168 |
}
|
| 169 |
|
| 170 |
/* Info */
|