restructure files onto electron-vite boilerplate

2026-05-08 04:50:12 +02:00 · 2025-05-18 14:03:18 -07:00
parent 91ce2cd8a1
commit 1cf587bc8f
457 changed files with 9927 additions and 11705 deletions
@@ -0,0 +1,153 @@
+.library-header {
+    position: relative;
+    display: grid;
+    grid-template-areas: 'image info';
+    grid-template-rows: 100%;
+    grid-template-columns: 175px minmax(0, 1fr);
+    gap: 1rem;
+    width: 100%;
+    max-width: 100%;
+    height: 30vh;
+    min-height: 340px;
+    max-height: 500px;
+    padding: 5rem 2rem 2rem;
+
+    :global(.item-image-placeholder) {
+        width: 175px !important;
+        height: 175px;
+    }
+
+    .image {
+        width: 175px !important;
+        height: 175px;
+    }
+
+    @container (max-width: 599px) {
+        grid-template-columns: 175px minmax(0, 1fr);
+
+        h1 {
+            height: 40px;
+        }
+
+        .image {
+            width: 175px !important;
+            height: 175px;
+        }
+
+        :global(.item-image-placeholder) {
+            width: 175px !important;
+            height: 175px;
+        }
+    }
+
+    @container (min-width: 600px) {
+        grid-template-columns: 200px minmax(0, 1fr);
+
+        h1 {
+            height: 80px;
+        }
+
+        .image {
+            width: 200px !important;
+            height: 200px;
+        }
+
+        :global(.item-image-placeholder) {
+            width: 200px !important;
+            height: 200px;
+        }
+    }
+
+    @container (min-width: 768px) {
+        grid-template-columns: 225px minmax(0, 1fr);
+
+        h1 {
+            height: 100px;
+        }
+
+        .image {
+            width: 225px !important;
+            height: 225px;
+        }
+
+        :global(.item-image-placeholder) {
+            width: 225px !important;
+            height: 225px;
+        }
+    }
+
+    @container (min-width: 1200px) {
+        grid-template-columns: 250px minmax(0, 1fr);
+
+        .image {
+            width: 250px !important;
+            height: 250px;
+        }
+
+        :global(.item-image-placeholder) {
+            width: 250px !important;
+            height: 250px;
+        }
+    }
+}
+
+.image-section {
+    z-index: 15;
+    display: flex;
+    grid-area: image;
+    align-items: flex-end;
+    justify-content: center;
+    height: 100%;
+    filter: drop-shadow(0 0 8px rgb(0, 0, 0, 50%));
+}
+
+.metadata-section {
+    z-index: 15;
+    font-size: 1.15rem;
+    display: flex;
+    flex-direction: column;
+    grid-area: info;
+    justify-content: flex-end;
+    width: 100%;
+}
+
+.image {
+    object-fit: var(--image-fit);
+    border-radius: 5px;
+}
+
+.background {
+    position: absolute;
+    top: 0;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.9;
+    background-size: cover !important;
+    background-position: center !important;
+}
+
+.background-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--bg-header-overlay);
+}
+
+.opaque-overlay {
+    opacity: 0.5;
+}
+
+.title {
+    display: -webkit-box;
+    overflow: hidden;
+    color: var(--main-fg);
+    font-size: 2rem;
+    line-height: 1.2;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}