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