chore: better gallery layout and astro image tags

2024-11-21 22:52:05 +01:00
parent 48bd9e459c
commit 58e8e5d43c
10 changed files with 86 additions and 39 deletions
@@ -753,35 +753,60 @@
    }

    .gallery-collage {
-        display: flex;
+        // display: flex;
+        // flex-wrap: wrap;

-        place-content: center;
-        align-items: center;
+        // width: 64rem;
+        max-width: 100%;
+
+        --cell-size: 6rem;
+
+        display: grid;
+        grid-template-columns: repeat(auto-fit, calc(var(--cell-size)));
+        grid-auto-rows: calc(var(--cell-size));
+
+        grid-auto-flow: dense;
        gap: 1rem;

-        flex-wrap: wrap;
+        // place-content: center;
+        // align-items: center;

-        width: 100%;
-
-        max-width: 64rem;
+        @media screen and (max-width: $screen-desktop-min) {
+            grid-template-columns: auto;
+            grid-template-rows: auto;
+            grid-auto-rows: auto;
+        }

        & > .card {
            padding: 3px;

            overflow: hidden;

+            width: 100%;
+            height: 100%;
+
+            grid-column: span var(--cols, 1);
+            grid-row: span var(--rows, 1);
+
            @media screen and (max-width: $screen-desktop-min) {
                max-width: 100%;
+
+                grid-column: span 1;
+                grid-row: span 1;
            }

            img {
                display: grid;

-                max-width: 25rem;
-                max-height: 25rem;
+                width: 100%;
+                height: 100%;
+
+                overflow: hidden;

                border-radius: 3px;

+                object-fit: cover;
+
                @media screen and (max-width: $screen-desktop-min) {
                    max-height: none;