sjs/spirit-tracker
1
0
Fork 0
mirror of https://github.com/samsonjs/spirit-tracker.git synced 2026-04-27 15:07:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

UX Improvements

Browse source
This commit is contained in:
Brennan Wilkes (Text Groove) 2026-02-02 18:54:20 -08:00
parent a85a62677d
commit 8c8bf9dc95
1 changed files with 25 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
viz/style.css
View file

@ -305,19 +305,36 @@ a.skuLink:hover { text-decoration: underline; cursor: pointer; }
margin-top: 12px; /* slightly more gap from the top text */ margin-top: 12px; /* slightly more gap from the top text */
} }
.storeBar { .storeBar{
display: grid; display:flex;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:8px;
gap: 8px; flex-wrap:wrap;
width: 100%; width:100%;
justify-content:flex-start; /* no space-between weirdness */
} }
.storeBtn { /* 6 per row on desktop */
justify-content: center; /* center text within each pill */ .storeBtn{
width: 100%; /* make each pill fill its grid cell */ flex: 0 0 calc(16.666% - 8px);
justify-content: center;
text-align: center; text-align: center;
} }
/* 4 per row on smaller screens */
@media (max-width: 900px){
.storeBtn{ flex-basis: calc(25% - 8px); }
}
/* 3 per row */
@media (max-width: 640px){
.storeBtn{ flex-basis: calc(33.333% - 8px); }
}
/* 2 per row */
@media (max-width: 420px){
.storeBtn{ flex-basis: calc(50% - 8px); }
}
.storeBtn { .storeBtn {
border: 1px solid var(--border); border: 1px solid var(--border);