add initial item detail list design

2026-06-14 23:44:01 +02:00 · 2025-09-29 17:35:03 -07:00
parent d4b8b12687
commit 3f3a02ba8c
4 changed files with 533 additions and 0 deletions
@@ -0,0 +1,84 @@
+.container {
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: var(--theme-spacing-sm);
+    width: 100%;
+    height: 100%;
+    padding: var(--theme-spacing-sm);
+    container-type: inline-size;
+    background: var(--theme-colors-surface);
+    border-radius: var(--theme-radius-md);
+
+    @container (min-width: 500px) {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
+.image-container {
+    position: relative;
+    display: none;
+    height: 100%;
+    min-height: 0;
+    aspect-ratio: 1/1;
+
+    &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        content: '';
+        background-color: rgb(0 0 0);
+        opacity: 0;
+        transition: all 0.2s ease-in-out;
+    }
+
+    &:hover {
+        &::before {
+            opacity: 0.6;
+        }
+    }
+
+    @container (min-width: 500px) {
+        display: block;
+    }
+}
+
+.image {
+    aspect-ratio: 1/1;
+}
+
+.metadata-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--theme-spacing-sm);
+    width: 100%;
+    height: 100%;
+    padding: var(--theme-spacing-xs) 0;
+    overflow: hidden;
+}
+
+.metadata-container .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-weight: 600;
+    line-height: 1.2;
+}
+
+.metadata-container .header .title {
+    max-width: 70%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.metadata-container .content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--theme-spacing-xs);
+}
+
+.metadata-container .content .tags {
+}