bep40 commited on
Commit
b85cc23
·
verified ·
1 Parent(s): 702ce2a

Fix: thumbnails flex-wrap (wrap to new lines instead of overflow), mobile 48px thumbs

Browse files
Files changed (1) hide show
  1. 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;gap:8px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
158
- .gallery-thumbs::-webkit-scrollbar{height:4px}
159
- .gallery-thumb{width:64px;height:64px;min-width:64px;border-radius:10px;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:3px}
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-thumb{width:52px;height:52px;min-width:52px}
 
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 */