jae/jaeswift-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: awesomelist grid to 4 columns with responsive breakpoints

Browse source
This commit is contained in:
jae 2026-04-04 02:19:18 +00:00
parent 6a53ef0d18
commit eeb1242a53
1 changed files with 14 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
css/awesomelist.css
View file

@ -139,7 +139,7 @@
/* ─── Sector Grid ──────────────────────────────────────── */ /* ─── Sector Grid ──────────────────────────────────────── */
.al-sector-grid { .al-sector-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 1rem; gap: 1rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@ -235,7 +235,7 @@
/* ─── List Cards (inside sector) ───────────────────────── */ /* ─── List Cards (inside sector) ───────────────────────── */
.al-list-grid { .al-list-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 0.8rem; gap: 0.8rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@ -318,7 +318,7 @@
/* ─── Subcategory Cards (inside list detail) ───────────── */ /* ─── Subcategory Cards (inside list detail) ───────────── */
.al-sub-grid { .al-sub-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 0.6rem; gap: 0.6rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -428,16 +428,24 @@
} }
/* ─── Responsive ───────────────────────────────────────── */ /* ─── Responsive ───────────────────────────────────────── */
@media (max-width: 900px) { @media (max-width: 600px) {
.al-sector-grid, .al-sector-grid,
.al-list-grid, .al-list-grid,
.al-sub-grid { .al-sub-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
@media (min-width: 901px) and (max-width: 1100px) { @media (min-width: 601px) and (max-width: 900px) {
.al-sector-grid, .al-sector-grid,
.al-list-grid { .al-list-grid,
.al-sub-grid {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
} }
@media (min-width: 901px) and (max-width: 1200px) {
.al-sector-grid,
.al-list-grid,
.al-sub-grid {
grid-template-columns: repeat(3, 1fr);
}
}