till/klarbild
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: mobile-first redesign (design-taste-frontend)

Browse Source 
- responsive nav: compact sticky topbar + bottom tab bar on mobile (SVG icons, safe-area insets), inline top nav on desktop; no more horizontal overflow
- previews show full aspect ratio (object-fit contain) on subtle checker bg for transparency (library, studio, queue)
- 16px inputs on mobile (no iOS zoom), tactile :active feedback, larger touch targets
- keeps Klarbild identity (Space Grotesk/Mono, blue, paper, regmark), no glows/gradients
This commit is contained in:
Till Heidrich
2026-07-23 18:43:47 +00:00
parent dba5620ff6
commit b047f55687
5 changed files with 105 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/LibraryApp.tsx
+7 -4
View File
@@ -112,11 +112,14 @@ function LibStyles() {
.hidden{display:none;}
.leer{padding:60px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;}
.leer h3{margin:0;font-size:17px;}.leer p{margin:0;color:var(--soft);max-width:38ch;}
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;}
.kachel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:9px;}
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;align-items:start;}
@media(min-width:768px){.galerie{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}}
.kachel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:8px;}
.kachel.gewaehlt{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.kachel-bild{position:relative;aspect-ratio:1;background:var(--paper);border-radius:2px;overflow:hidden;cursor:pointer;}
.kachel-bild img{width:100%;height:100%;object-fit:cover;display:block;}
.kachel-bild{position:relative;border-radius:3px;overflow:hidden;cursor:pointer;
background:repeating-conic-gradient(oklch(90% 0.006 95) 0% 25%, oklch(96% 0.004 95) 0% 50%) 50%/16px 16px;}
.kachel-bild img{width:100%;height:auto;display:block;transition:transform .12s;}
.kachel-bild:active img{transform:scale(.98);}
.haken{position:absolute;top:6px;left:6px;width:21px;height:21px;border-radius:50%;border:1.5px solid #fff;background:rgba(22,21,15,.35);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;}
.kachel.gewaehlt .haken{background:var(--accent);}
.name{margin-top:8px;width:100%;font-size:12.5px;padding:6px 8px;font-family:var(--font-mono);border:1px solid var(--line);border-radius:3px;background:#fff;}