diff --git a/index.html b/index.html
index e71b2b2..8175617 100644
--- a/index.html
+++ b/index.html
@@ -60,6 +60,12 @@
+
+
diff --git a/script.js b/script.js
index 8e1480a..54fb7a3 100644
--- a/script.js
+++ b/script.js
@@ -137,6 +137,7 @@ const defaultPreferences = {
view: "cards",
accent: "violet",
};
+const availableViews = ["cards", "list", "compact-cards", "compact-list"];
const preferences = { ...defaultPreferences, ...readPreferences() };
const catalog = document.querySelector("[data-catalog-root]");
@@ -355,10 +356,14 @@ function attachCardInteractions() {
}
function applyPreferences(nextPreferences) {
+ if (!availableViews.includes(nextPreferences.view)) {
+ nextPreferences.view = defaultPreferences.view;
+ }
+
document.documentElement.dataset.theme = nextPreferences.theme;
document.documentElement.dataset.accent = nextPreferences.accent;
- catalog.classList.toggle("cards-view", nextPreferences.view === "cards");
- catalog.classList.toggle("list-view", nextPreferences.view === "list");
+ catalog.classList.remove("cards-view", "list-view", "compact-cards-view", "compact-list-view");
+ catalog.classList.add(`${nextPreferences.view}-view`);
setActiveButton(themeButtons, "theme", nextPreferences.theme);
setActiveButton(viewButtons, "view", nextPreferences.view);
setActiveButton(accentButtons, "accent", nextPreferences.accent);
diff --git a/styles.css b/styles.css
index 2f3f3b9..08eeb77 100644
--- a/styles.css
+++ b/styles.css
@@ -242,10 +242,11 @@ h1 {
.segmented {
flex: 1;
min-height: 34px;
+ min-width: 0;
border-radius: 12px;
background: transparent;
color: var(--muted);
- font-size: 0.88rem;
+ font-size: 0.84rem;
font-weight: 800;
}
@@ -560,7 +561,8 @@ h1 {
grid-template-columns: 1fr;
}
-.catalog.list-view .nav-card {
+.catalog.list-view .nav-card,
+.catalog.compact-list-view .nav-card {
min-height: 112px;
display: grid;
grid-template-columns: 58px minmax(0, 1fr) 42px;
@@ -568,11 +570,94 @@ h1 {
gap: 16px;
}
-.catalog.list-view .arrow {
+.catalog.list-view .arrow,
+.catalog.compact-list-view .arrow {
position: static;
justify-self: end;
}
+.catalog.compact-cards-view .items-grid {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.catalog.compact-list-view .items-grid {
+ grid-template-columns: 1fr;
+}
+
+.catalog.compact-cards-view .section-head,
+.catalog.compact-list-view .section-head {
+ padding: 18px 20px;
+}
+
+.catalog.compact-cards-view .section-head p:not(.eyebrow),
+.catalog.compact-list-view .section-head p:not(.eyebrow),
+.catalog.compact-cards-view .group-head p:not(.group-number),
+.catalog.compact-list-view .group-head p:not(.group-number),
+.catalog.compact-cards-view .tags,
+.catalog.compact-list-view .tags {
+ display: none;
+}
+
+.catalog.compact-cards-view .section-head h2,
+.catalog.compact-list-view .section-head h2 {
+ font-size: clamp(1.35rem, 3vw, 2rem);
+}
+
+.catalog.compact-cards-view .group-head,
+.catalog.compact-list-view .group-head {
+ padding: 14px 16px;
+ align-items: center;
+}
+
+.catalog.compact-cards-view .group-head h3,
+.catalog.compact-list-view .group-head h3 {
+ margin-top: 4px;
+ font-size: 1.05rem;
+}
+
+.catalog.compact-cards-view .nav-card {
+ min-height: 132px;
+ gap: 10px;
+ padding: 14px;
+}
+
+.catalog.compact-cards-view .nav-card img {
+ width: 44px;
+ height: 44px;
+}
+
+.catalog.compact-cards-view .nav-card h4,
+.catalog.compact-list-view .nav-card h4 {
+ font-size: 0.98rem;
+}
+
+.catalog.compact-cards-view .item-type,
+.catalog.compact-list-view .item-type {
+ font-size: 0.82rem;
+}
+
+.catalog.compact-cards-view .arrow {
+ width: 30px;
+ height: 30px;
+ right: 12px;
+ bottom: 12px;
+}
+
+.catalog.compact-list-view .nav-card {
+ min-height: 78px;
+ padding: 12px 14px;
+ grid-template-columns: 42px minmax(0, 1fr) 34px;
+}
+
+.catalog.compact-list-view .nav-card img {
+ width: 42px;
+ height: 42px;
+}
+
+.catalog.compact-list-view .item-number {
+ font-size: 0.72rem;
+}
+
.empty-state {
min-height: 280px;
display: grid;
@@ -603,6 +688,10 @@ h1 {
.items-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
+
+ .catalog.compact-cards-view .items-grid {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
}
@media (max-width: 720px) {
@@ -626,6 +715,10 @@ h1 {
flex-wrap: wrap;
}
+ .control-group .segmented {
+ flex-basis: calc(50% - 4px);
+ }
+
.control-group > span {
width: 100%;
min-width: 0;
@@ -657,6 +750,10 @@ h1 {
padding: 12px;
}
+ .catalog.compact-cards-view .items-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
.nav-card {
min-height: 210px;
}
@@ -666,7 +763,13 @@ h1 {
min-height: 136px;
}
- .catalog.list-view .arrow {
+ .catalog.compact-list-view .nav-card {
+ grid-template-columns: 42px minmax(0, 1fr);
+ min-height: 84px;
+ }
+
+ .catalog.list-view .arrow,
+ .catalog.compact-list-view .arrow {
position: absolute;
}