photo-gallery-styles

Design documents for photos.pablopie.xyz 📸️

Commit
3a7e4dd91e6069c5ff71688eb643849fef64ab87
Parent
8c08e9fe4d5613614da8712d4506a01c992a11df
Author
Pablo <pablo-escobar@riseup.net>
Date

Refined the styling for mobile devices

Made the margins thiner and the images larger

Diffstat

1 file changed, 13 insertions, 6 deletions

Status File Name N° Changes Insertions Deletions
Modified styles.css 19 13 6 
diff --git a/styles.css b/styles.css
@@ -4,7 +4,7 @@ body {
   font: 14pt sans-serif;
 
   margin: 0;
-  padding: 14pt 15vw;
+  padding: 14pt;
 }
 
 a {
@@ -43,11 +43,19 @@ figure {
 figure img {
   margin: 0 auto;
   max-width: calc(100% - 14pt);
-  max-height: 80vh;
   border: solid 3.5pt white;
 }
 
+footer {
+  margin-top: 14pt;
+  text-align: center;
+}
+
 @media (orientation: landscape) and (min-width: 800px) {
+  body {
+    padding: 14pt 15vw;
+  }
+
   #gallery {
     display: flex;
     flex-wrap: wrap;
@@ -71,9 +79,8 @@ figure img {
     content: "";
     flex-grow: 999;
   }
-}
 
-footer {
-  margin-top: 14pt;
-  text-align: center;
+  figure img {
+    max-height: 80vh;
+  }
 }