photo-gallery-styles

Design documents for photos.pablopie.xyz 📸️

Commit: f3b5ef178bf529e51b3d432828c7dadfb14412eb
Parent: 3a7e4dd91e6069c5ff71688eb643849fef64ab87
Author: Pablo <pablo-escobar@riseup.net>
Date: Sun, 26 Nov 2023 21:51:29 +0000

Updated the 404 page

Diffstat

4 files changed, 45 insertions, 42 deletions

Status	File Name	N° Changes	Insertions	Deletions
Modified	1.png.html	2	2	0
Modified	2.jpg.html	2	2	0
Modified	404.html	68	28	40
Modified	styles.css	15	13	2

diff --git a/1.png.html b/1.png.html
@@ -16,7 +16,9 @@
 <a href='./index.html'>photos.pablopie.xyz</a>
 </nav>
 <figure>
+<div id='picture-container'>
 <img src='./photos/1.png'>
+</div>
 </figure>
 </main>
 <footer>

diff --git a/2.jpg.html b/2.jpg.html
@@ -16,7 +16,9 @@
 <a href='./index.html'>photos.pablopie.xyz</a>
 </nav>
 <figure>
+<div id='picture-container'>
 <img src='./photos/2.jpg'>
+</div>
 </figure>
 </main>
 <footer>

diff --git a/404.html b/404.html
@@ -1,45 +1,33 @@
-<!DOCTYPE HTML>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html>
 <head>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Image not found</title>
-  <meta name="author" content="Pablo" />
-  <meta name="copyright" content="GPLv2" />
-  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-  <link type="text/css" rel="stylesheet" media="screen,projection" title="default" href="./shared/default.css" />
-  <link rel="icon" 
-        type="image/svg+xml" 
-        sizes="16x16 24x24 32x32 48x48 64x64 128x128 256x256 512x512" 
-        href="https://pablopie.xyz/images/icons/favicon.svg" />
-  <meta property="twitter:url" content="https:/photos.pablopie.xyz" />
-  <meta property="twitter:title" content="Image not found" />
-  <meta property="twitter:description" content="Image not found" />
-  <meta property="twitter:image" content="index.png" />
-  <meta property="twitter:card" content="summary_large_image" />
-  <meta property="og:title" content="Image not found" />
-  <meta property="og:image" content="index.png" />
-  <meta property="og:image:type" content="image/png" />
-  <meta property="og:url" content="https://photos.pablopie.xyz" />
-  <meta property="og:description" content="Image not found" />
-  <meta property="og:locale" content="en_US" />
-  <meta property="og:type" content="website" />
+<title>Image Not Found</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 rel='preload' as='image' href='https://picsum.photos/500/500'>
 </head>
 <body>
-  <nav role="navigation">
-    <a href="https://photos.pablopie.xyz">photos 📸️</a>
-    <a href="https://pablopie.xyz">@pablo 🚬️</a>
-  </nav>
-  <main>
-    <div id="image">
-    <figure>
-        <img src="https://picsum.photos/300/300?grayscale" 
-             alt="Random image from the internet" />
-    </figure>
-    <em>
-      The image you're look for could not be found, but here's a random image
-      from the internet!
-    </em>
-  </main>
-  <footer>Pablo © 2021</footer>
+<main>
+<nav>
+<a href='./index.html'>photos.pablopie.xyz</a>
+</nav>
+<figure>
+<div id='picture-container'>
+<img src='https://picsum.photos/500/500' alt='A random picture from the internet'>
+</div>
+<figcaption>
+The file you are looking for could not be found, but here's a random picture
+from <a href='https://picsum.photos'>picsum.photos</a>!
+</figcaption>
+</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
@@ -31,16 +31,26 @@ nav {
 #gallery li::first-child {
   margin-top: 0;
 }
+
 #gallery li img {
   width: 100%;
 }
 
 figure {
   margin: 0;
+}
+
+figcaption {
+  margin-top: 14pt;
+  text-align: center;
+  font-style: italic;
+}
+
+#picture-container {
   display: flex;
 }
 
-figure img {
+#picture-container img {
   margin: 0 auto;
   max-width: calc(100% - 14pt);
   border: solid 3.5pt white;
@@ -80,7 +90,8 @@ footer {
     flex-grow: 999;
   }
 
-  figure img {
+  #picture-container img {
     max-height: 80vh;
   }
 }
+