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 (
); } @@ -126,11 +125,10 @@ function VideoItem({ url }: galleryItem) { return ( ); }