photo-gallery-styles

Design documents for photos.pablopie.xyz 📸️

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

Added design documents for pages on individual pictures

Diffstat

3 files changed, 66 insertions, 0 deletions

Status File Name N° Changes Insertions Deletions
Added 1.png.html 27 27 0
Added 2.jpg.html 27 27 0
Modified styles.css 12 12 0 
diff --git a/1.png.html b/1.png.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Pablo's Photo Gallery &dash; 1.png</title>
+<meta content='width=device-width, initial-scale=1.0' name='viewport'>
+<meta content='Pablo' name='author'>
+<meta content='GPLv2' name='copyright'>
+<meta content='text/html; charset=utf-8' http-equiv='content-type'>
+<link href='./images/icons/favicon.svg' rel='icon' sizes='16x16 24x24 32x32 48x48 64x64 128x128 256x256 512x512' type='image/svg+xml'>
+<link href='./styles.css' rel='stylesheet'>
+<link as='image' href='./photos/1.png' rel='preload'>
+</head>
+<body>
+<main>
+<nav>
+<a href='./index.html'>photos.pablopie.xyz</a>
+</nav>
+<figure>
+<img src='./photos/1.png'>
+</figure>
+</main>
+<footer>
+made with 💛 by
+<a href='https://pablopie.xyz' role='author'>@pablo</a>
+</footer>
+</body>
+</html>

diff --git a/2.jpg.html b/2.jpg.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Pablo's Photo Gallery &dash; 2.jpg</title>
+<meta content='width=device-width, initial-scale=1.0' name='viewport'>
+<meta content='Pablo' name='author'>
+<meta content='GPLv2' name='copyright'>
+<meta content='text/html; charset=utf-8' http-equiv='content-type'>
+<link href='./images/icons/favicon.svg' rel='icon' sizes='16x16 24x24 32x32 48x48 64x64 128x128 256x256 512x512' type='image/svg+xml'>
+<link href='./styles.css' rel='stylesheet'>
+<link as='image' href='./photos/2.jpg' rel='preload'>
+</head>
+<body>
+<main>
+<nav>
+<a href='./index.html'>photos.pablopie.xyz</a>
+</nav>
+<figure>
+<img src='./photos/2.jpg'>
+</figure>
+</main>
+<footer>
+made with 💛 by
+<a href='https://pablopie.xyz' role='author'>@pablo</a>
+</footer>
+</body>
+</html>

diff --git a/styles.css b/styles.css
@@ -35,6 +35,18 @@ nav {
   width: 100%;
 }
 
+figure {
+  margin: 0;
+  display: flex;
+}
+
+figure img {
+  margin: 0 auto;
+  max-width: calc(100% - 14pt);
+  max-height: 80vh;
+  border: solid 3.5pt white;
+}
+
 @media (orientation: landscape) and (min-width: 800px) {
   #gallery {
     display: flex;