photo-gallery-styles

Design documents for photos.pablopie.xyz 📸️

git clone: git://git.pablopie.xyz/photo-gallery-styles
Log
Files
Refs
README
LICENSE

Commit: 3990f3b0c24324b11b6b62f77eb0833849924c31
Parent: 483a62948f2135bc6d1350e5ac18287ffd9c41e8
Author: Pablo <pablo-escobar@riseup.net>
Date: Sun, 26 Nov 2023 20:57:26 +0000

Improved the styling

Added rules for mobile devices

Also tweaked the spacing of stuff

Diffstat

1 file changed, 31 insertions, 18 deletions

Status	File Name	N° Changes	Insertions	Deletions
Modified	styles.css	49	31	18

diff --git a/styles.css b/styles.css
@@ -4,7 +4,7 @@ body {
   font: 14pt sans-serif;
 
   margin: 0;
-  padding: 3.5pt 15vw;
+  padding: 14pt 15vw;
 }
 
 a {
@@ -17,35 +17,48 @@ nav {
 }
 
 #gallery {
-  display: flex;
   list-style: none;
   padding: 0;
   margin: 0;
-
-  flex-wrap: wrap;
-  gap: 7pt;
 }
 
 #gallery li {
-  height: 200px;
-  cursor: pointer;
-  position: relative;
-  flex: 1 1 auto;
-
-  padding: 3.5pt;
-  background: white;
+  display: block;
+  margin-top: 7pt;
+  border: solid 3.5pt white;
 }
 
+#gallery li::first-child {
+  margin-top: 0;
+}
 #gallery li img {
-  object-fit: cover;
   width: 100%;
-  height: 100%;
-  vertical-align: middle;
 }
 
-#gallery::after {
-  content: "";
-  flex-grow: 999;
+@media (orientation: landscape) and (min-width: 800px) {
+  #gallery {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 7pt;
+  }
+
+  #gallery li {
+    margin: 0;
+    height: 200px;
+    position: relative;
+    flex: 1 1 auto;
+  }
+
+  #gallery li img {
+    object-fit: cover;
+    height: 100%;
+    vertical-align: middle;
+  }
+
+  #gallery::after {
+    content: "";
+    flex-grow: 999;
+  }
 }
 
 footer {