From 1a7786b458c42b4d9e5669345a7777af432d36b1 Mon Sep 17 00:00:00 2001
From: edwardbrodski <brodskiedward@gmail.com>
Date: Mon, 13 Nov 2023 20:45:24 +0000
Subject: [PATCH] make grid

---
 src/App.css | 43 ++++++++++++++++++++++++++++++++++++-------
 src/App.tsx | 10 ++++------
 2 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/src/App.css b/src/App.css
index 1657b93..6e05196 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,7 +1,7 @@
 body {
   min-height: 100vh;
   background-color: #282c34;
-  color: #B9B8D6;
+  color: #b9b8d6;
 }
 
 .Header {
@@ -24,7 +24,7 @@ body {
   flex-direction: column;
   text-align: center;
 
-	background-color: #3B3E49;
+  background-color: #3b3e49;
 
   border-radius: 10px 10px 0px 0px;
   margin: 0 0 1em 0;
@@ -35,17 +35,18 @@ body {
 .GalleryItem > a {
   color: inherit;
 
-  margin: 0.5em;
+  margin: 0;
   overflow: clip;
 }
 
-.GalleryItem > img, video {
+.GalleryItem > img,
+video {
   max-height: 80vh;
 }
 
 .DirectoryItem > button {
-	background-color: #44655D;
-  color: #B9B8D6;
+  background-color: #44655d;
+  color: #b9b8d6;
   border: none;
   padding: 10px 20px;
   text-align: center;
@@ -63,6 +64,34 @@ body {
 }
 
 .ParentDirectoryItem > button {
-	background-color: #4D4F5D;
+  background-color: #4d4f5d;
 }
 
+@media (min-width: 62em) {
+  .GalleryItem {
+    margin: 1em;
+    border-radius: 1em;
+
+    overflow: hidden;
+  }
+
+  .Contents {
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    align-content: center;
+    flex-wrap: wrap;
+  }
+
+  .GalleryImg {
+    object-fit: cover;
+    width: 12em;
+    height: 9em;
+  }
+
+  .GalleryVid {
+    object-fit: cover;
+    width: 12em;
+    height: 9em;
+  }
+}
diff --git a/src/App.tsx b/src/App.tsx
index b0e6bc6..51af25c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -115,9 +115,8 @@ function ImageItem({ thumbnail_url, url }: galleryItem) {
   return (
     <div className="GalleryItem">
       <a href={url} target="_blank">
-        {getFileName(url)}
+        <img className="GalleryImg" src={thumbnail_url} loading="lazy" />
       </a>
-      <img src={thumbnail_url} loading="lazy" />
     </div>
   );
 }
@@ -126,11 +125,10 @@ function VideoItem({ url }: galleryItem) {
   return (
     <div className="GalleryItem">
       <a href={url} target="_blank">
-        {getFileName(url)}
+        <video controls>
+          <source className="GalleryVid" src={url} type="video/mp4" />
+        </video>
       </a>
-      <video controls>
-        <source src={url} type="video/mp4" />
-      </video>
     </div>
   );
 }