photo-gallery-styles

Design documents for photos.pablopie.xyz 📸️

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

Commit: 8c08e9fe4d5613614da8712d4506a01c992a11df
Parent: 8fcf2343b85b2c3dd1b2310cc85355079e4380d9
Author: Pablo <pablo-escobar@riseup.net>
Date: Sun, 26 Nov 2023 21:27:30 +0000

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;