Implemented phase 1 for the POC prototype in the Website service.

2026-09-21 11:16:52 +02:00
1 parent 6d7ab4bcba
commit ea89ea892a
@@ -0,0 +1,142 @@
+/* CCN — search results page. */
+
+.search {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.search__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding-bottom: var(--space-5);
+  border-bottom: 1px solid var(--line);
+}
+
+.search__heading {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.search__heading .type-h1 {
+  overflow-wrap: anywhere;
+}
+
+.search__count {
+  color: var(--muted);
+}
+
+.search__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.search__results {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--space-6);
+  min-width: 0;
+}
+
+.search__pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+/* The filter rail: a disclosure below desktop, always open on it. */
+.filters__toggle {
+  width: 100%;
+  list-style: none;
+}
+
+.filters__toggle::-webkit-details-marker {
+  display: none;
+}
+
+.filters__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  padding-top: var(--space-5);
+}
+
+.filters__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.filters__title {
+  color: var(--ink);
+  font-size: 13px;
+}
+
+.filters__clear {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.filters__group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.filters__group legend {
+  margin-bottom: 10px;
+  padding: 0;
+}
+
+.filters__range {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.filters__field {
+  display: flex;
+  flex: 1 1 0;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+@media (min-width: 1024px) {
+  .search {
+    gap: var(--space-7);
+    padding-top: var(--space-8);
+  }
+
+  .search__body {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--space-10);
+  }
+
+  .filters {
+    flex-shrink: 0;
+    width: 260px;
+  }
+
+  .filters__toggle {
+    display: none;
+  }
+
+  .filters::details-content {
+    display: block;
+    content-visibility: visible;
+  }
+
+  .filters__form {
+    gap: var(--space-7);
+    padding-top: 0;
+  }
+}