Restore grid layout on desktop, stack on mobile
This commit is contained in:
parent
f0ad94aa37
commit
75476b62a3
@ -232,6 +232,7 @@ h1 {
|
|||||||
.save-item input { width: 18px; height: 18px; }
|
.save-item input { width: 18px; height: 18px; }
|
||||||
.save-actions { display: flex; justify-content: flex-end; gap: 8px; }
|
.save-actions { display: flex; justify-content: flex-end; gap: 8px; }
|
||||||
.icon-woodland { width: 22px; height: 22px; }
|
.icon-woodland { width: 22px; height: 22px; }
|
||||||
|
.import-selection { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; }
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
@ -247,11 +248,12 @@ h1 {
|
|||||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
align-items: start; /* Prevent shorter cards from stretching to tallest row mate */
|
align-items: start; /* Prevent shorter cards from stretching to tallest row mate */
|
||||||
|
grid-auto-flow: row dense; /* Fill gaps when possible */
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1280px) {
|
@media (max-width: 768px) {
|
||||||
.projects-grid {
|
.projects-grid {
|
||||||
grid-template-columns: repeat(3, minmax(320px, 1fr));
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -264,7 +266,6 @@ h1 {
|
|||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
transition: background-color 0.3s;
|
transition: background-color 0.3s;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
z-index: 10;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-header {
|
.project-header {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user