photo-gallery-styles

Design documents for photos.pablopie.xyz 📸️

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

Commit: 887ce52adc1cd6fa17849472ecb5382b6d24c243
Parent: 334a4f63cec07d0392e1bac976a8ae99525a9c2b
Author: Pablo <pablo-escobar@riseup.net>
Date: Mon, 11 Dec 2023 12:54:54 +0000

Updated the HTML files based on the output of stagit

Diffstat

8 files changed, 177 insertions, 164 deletions

Status	File Name	N° Changes	Insertions	Deletions
Modified	.gitignore	2	1	1
Deleted	1.png.html	32	0	32
Deleted	2.jpg.html	32	0	32
Modified	404.html	33	22	11
Added	9-de-julho.jpg.html	42	42	0
Added	dummond-adams.png.html	45	45	0
Deleted	index.haml	35	0	35
Modified	index.html	120	67	53

diff --git a/.gitignore b/.gitignore
@@ -1 +1 @@
-photos/*
+/photos

diff --git a/1.png.html b/1.png.html
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang='en'>
-<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='./icons/favicon.ico' rel='icon' sizes='16x16 24x24 32x32' type='image/x-icon'>
-<link href='./styles.css' rel='stylesheet'>
-<link as='image' href='./photos/1.png' rel='preload'>
-</head>
-<body>
-<main>
-<header>
-<nav>
-<img aria-hidden='true' height='24' src='./icons/icon.svg' width='24'>
-<a href='./index.html'>photos.pablopie.xyz</a>
-</nav>
-</header>
-<figure>
-<div id='picture-container'>
-<img src='./photos/1.png'>
-</div>
-</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
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang='en'>
-<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='./icons/favicon.ico' rel='icon' sizes='16x16 24x24 32x32' type='image/x-icon'>
-<link href='./styles.css' rel='stylesheet'>
-<link as='image' href='./photos/2.jpg' rel='preload'>
-</head>
-<body>
-<main>
-<header>
-<nav>
-<img aria-hidden='true' height='24' src='./icons/icon.svg' width='24'>
-<a href='./index.html'>photos.pablopie.xyz</a>
-</nav>
-</header>
-<figure>
-<div id='picture-container'>
-<img src='./photos/2.jpg'>
-</div>
-</figure>
-</main>
-<footer>
-made with 💛 by
-<a href='https://pablopie.xyz' role='author'>@pablo</a>
-</footer>
-</body>
-</html>

diff --git a/404.html b/404.html
@@ -1,23 +1,34 @@
 <!DOCTYPE html>
+<!-- This program is free software: you can redistribute it and/or modify
+     it under the terms of the GNU General Public License as published by
+     the Free Software Foundation, either version 3 of the License, or
+     (at your option) any later version.
+
+     This program is distributed in the hope that it will be useful,
+     but WITHOUT ANY WARRANTY; without even the implied warranty of
+     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+     GNU General Public License for more details.
+
+     You should have received a copy of the GNU General Public License
+     along with this program. If not, see <https://www.gnu.org/licenses/>. -->
 <html lang='en'>
 <head>
-<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='./icons/favicon.ico' rel='icon' sizes='16x16 24x24 32x32' type='image/x-icon'>
-<link href='./styles.css' rel='stylesheet'>
-<link rel='preload' as='image' href='https://picsum.photos/500/500'>
+<title>File Not Found</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="author" content="Pablo">
+<meta name="copyright" content="GPLv3">
+<meta content="text/html; charset=utf-8" http-equiv="content-type">
+<link rel="icon" href="./icons/favicon.ico" type="image/x-icon" sizes="16x16 24x24 32x32">
+<link rel="stylesheet" href="./styles.css">
 </head>
 <body>
-<main>
 <header>
 <nav>
-<img aria-hidden='true' height='24' src='./icons/icon.svg' width='24'>
-<a href='./index.html'>photos.pablopie.xyz</a>
+<img aria-hidden="true" alt="Website icon" width="24" height="24" src="./icons/icon.svg">
+<a href="./index.html">photos.pablopie.xyz</a>
 </nav>
 </header>
+<main>
 <figure>
 <div id='picture-container'>
 <img src='https://picsum.photos/500/500' alt='A random picture from the internet'>

diff --git a/9-de-julho.jpg.html b/9-de-julho.jpg.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!-- This program is free software: you can redistribute it and/or modify
+     it under the terms of the GNU General Public License as published by
+     the Free Software Foundation, either version 3 of the License, or
+     (at your option) any later version.
+
+     This program is distributed in the hope that it will be useful,
+     but WITHOUT ANY WARRANTY; without even the implied warranty of
+     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+     GNU General Public License for more details.
+
+     You should have received a copy of the GNU General Public License
+     along with this program. If not, see <https://www.gnu.org/licenses/>. -->
+<html lang="en">
+<head>
+<title>Pablo&apos;s Photo Gallery &dash; 9-de-julho.jpg</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="author" content="Pablo">
+<meta name="copyright" content="GPLv3">
+<meta content="text/html; charset=utf-8" http-equiv="content-type">
+<link rel="icon" href="./icons/favicon.ico" type="image/x-icon" sizes="16x16 24x24 32x32">
+<link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+<header>
+<nav>
+<img aria-hidden="true" alt="Website icon" width="24" height="24" src="./icons/icon.svg">
+<a href="./index.html">photos.pablopie.xyz</a>
+</nav>
+</header>
+<main>
+<figure aria-label="File 9-de-julho.jpg">
+<div id="picture-container">
+<img alt="A tall rundown building covered in graffiti art against a blue sky backdrop" src="./photos/9-de-julho.jpg">
+</div>
+</figure>
+</main>
+<footer>
+made with 💛 by <a role="author" href="https://pablopie.xyz">@pablo</a>
+</footer>
+</body>
+</html>

diff --git a/dummond-adams.png.html b/dummond-adams.png.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- This program is free software: you can redistribute it and/or modify
+     it under the terms of the GNU General Public License as published by
+     the Free Software Foundation, either version 3 of the License, or
+     (at your option) any later version.
+
+     This program is distributed in the hope that it will be useful,
+     but WITHOUT ANY WARRANTY; without even the implied warranty of
+     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+     GNU General Public License for more details.
+
+     You should have received a copy of the GNU General Public License
+     along with this program. If not, see <https://www.gnu.org/licenses/>. -->
+<html lang="en">
+<head>
+<title>Pablo&apos;s Photo Gallery &dash; dummond-adams.png</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="author" content="Pablo">
+<meta name="copyright" content="GPLv3">
+<meta content="text/html; charset=utf-8" http-equiv="content-type">
+<link rel="icon" href="./icons/favicon.ico" type="image/x-icon" sizes="16x16 24x24 32x32">
+<link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+<header>
+<nav>
+<img aria-hidden="true" alt="Website icon" width="24" height="24" src="./icons/icon.svg">
+<a href="./index.html">photos.pablopie.xyz</a>
+</nav>
+</header>
+<main>
+<figure>
+<div id="picture-container">
+<img alt="A black and white picture of a tall symmetrical building of international style. The building is covered by a thin veil and a layer of graffiti. White clouds drift across the dark sky above the building." src="./photos/dummond-adams.png">
+</div>
+<figcaption>
+The Dummond Adams building at Paulista Avenue, São Paulo, Brazil
+</figcaption>
+</figure>
+</main>
+<footer>
+made with 💛 by <a role="author" href="https://pablopie.xyz">@pablo</a>
+</footer>
+</body>
+</html>

diff --git a/index.haml b/index.haml
@@ -1,35 +0,0 @@
-!!!
-%html(lang="en")
-  %head
-    %title Pablo's Photo Gallery
-
-    %meta(name="viewport" content="width=device-width, initial-scale=1.0")
-    %meta(name="author" content="Pablo")
-    %meta(name="copyright" content="GPLv2")
-    %meta(http-equiv="content-type" content="text/html; charset=utf-8")
-
-    %link(rel="icon" type="image/x-icon" sizes="16x16 24x24 32x32" href="./icons/favicon.ico")
-    %link(rel="stylesheet" href="./styles.css")
-
-    - for img in Dir["photos/*.*"].sort
-      -# TODO: Preload WEBP preview images instead
-      %link{ :rel=>"preload", :as=>"image", :href=>"./" + img }
-
-  %body
-    %main
-      %header
-        %nav
-          %img(width="24" height="24" aria-hidden="true" src="./icons/icon.svg")
-          %a(href="./index.html") photos.pablopie.xyz
-
-      %ul#gallery
-        - for img in Dir["photos/*.*"].sort
-          - filename = img.gsub "photos/", ""
-          %li
-            %a{ :href => "./" + filename + ".html", :"aria-label"=> filename }
-              -# TODO: Render WEBP preview images instead
-              -# TODO: Add alt text
-              %img{ :src => "./" + img }
-    %footer
-      made with 💛 by
-      %a(role="author" href="https://pablopie.xyz") @pablo

diff --git a/index.html b/index.html
@@ -1,106 +1,120 @@
 <!DOCTYPE html>
-<html lang='en'>
+<!-- This program is free software: you can redistribute it and/or modify
+     it under the terms of the GNU General Public License as published by
+     the Free Software Foundation, either version 3 of the License, or
+     (at your option) any later version.
+
+     This program is distributed in the hope that it will be useful,
+     but WITHOUT ANY WARRANTY; without even the implied warranty of
+     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+     GNU General Public License for more details.
+
+     You should have received a copy of the GNU General Public License
+     along with this program. If not, see <https://www.gnu.org/licenses/>. -->
+<html lang="en">
 <head>
-<title>Pablo's Photo Gallery</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='./icons/favicon.ico' rel='icon' sizes='16x16 24x24 32x32' type='image/x-icon'>
-<link href='./styles.css' rel='stylesheet'>
-<link as='image' href='./photos/1.png' rel='preload'>
-<link as='image' href='./photos/10.jpg' rel='preload'>
-<link as='image' href='./photos/11.jpg' rel='preload'>
-<link as='image' href='./photos/12.jpg' rel='preload'>
-<link as='image' href='./photos/13.jpg' rel='preload'>
-<link as='image' href='./photos/2.jpg' rel='preload'>
-<link as='image' href='./photos/3.jpg' rel='preload'>
-<link as='image' href='./photos/4.jpg' rel='preload'>
-<link as='image' href='./photos/5.jpg' rel='preload'>
-<link as='image' href='./photos/6.jpg' rel='preload'>
-<link as='image' href='./photos/7.jpg' rel='preload'>
-<link as='image' href='./photos/8.jpg' rel='preload'>
-<link as='image' href='./photos/9.png' rel='preload'>
+<title>Pablo&apos;s Photo Gallery</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="author" content="Pablo">
+<meta name="copyright" content="GPLv3">
+<meta content="text/html; charset=utf-8" http-equiv="content-type">
+<link rel="icon" href="./icons/favicon.ico" type="image/x-icon" sizes="16x16 24x24 32x32">
+<link rel="stylesheet" href="./styles.css">
 </head>
 <body>
-<main>
 <header>
 <nav>
-<img aria-hidden='true' height='24' src='./icons/icon.svg' width='24'>
-<a href='./index.html'>photos.pablopie.xyz</a>
+<img aria-hidden="true" alt="Website icon" width="24" height="24" src="./icons/icon.svg">
+<a href="./index.html">photos.pablopie.xyz</a>
 </nav>
 </header>
-<ul id='gallery'>
+<main>
+<ul id="gallery">
+<li>
+<a aria-label="dummond-adams.png" href="./dummond-adams.png.html">
+<img alt="A black and white picture of a tall symmetrical building of international style. The building is covered by a thin veil and a layer of graffiti. White clouds drift across the dark sky above the building." src="./photos/dummond-adams.png">
+</a>
+</li>
+<li>
+<a aria-label="9-de-julho.jpg" href="./9-de-julho.jpg.html">
+<img alt="A tall rundown building covered in graffiti art against a blue sky backdrop" src="./photos/9-de-julho.jpg">
+</a>
+</li>
+<li>
+<a aria-label="jaragua.jpg" href="#">
+<img alt="A black and white picture of a telecom tower covered in parabolic antennas. The tower stands in the mist against a dark grey sky." src="./photos/jaragua.jpg">
+</a>
+</li>
 <li>
-<a aria-label='1.png' href='./1.png.html'>
-<img src='./photos/1.png'>
+<a aria-label="dead-pigeon.jpg" href="#">
+<img alt="The decomposing body of a dead pigeon against the cold grey pavement. The bird&apos;s head and torso has been chewed away by time, yet the remainings of its wings and legs resemble the image of an angel." src="./photos/dead-pigeon.jpg">
 </a>
 </li>
 <li>
-<a aria-label='10.jpg' href='./10.jpg.html'>
-<img src='./photos/10.jpg'>
+<a aria-label="train-tracks.jpg" href="#">
+<img alt="A black and white photograph of a train track drifting through a mountainous region" src="./photos/train-tracks.jpg">
 </a>
 </li>
 <li>
-<a aria-label='11.jpg' href='./11.jpg.html'>
-<img src='./photos/11.jpg'>
+<a aria-label="subway.gif" href="#">
+<img alt="A train moving through a dark subway tunnel with green lighting. The walls of the tunnel are covered in graffiti, with one particular drawing of a bear standing out due to its bright green paint." src="./photos/subway.gif">
 </a>
 </li>
 <li>
-<a aria-label='12.jpg' href='./12.jpg.html'>
-<img src='./photos/12.jpg'>
+<a aria-label="rar.jpg" href="#">
+<img alt="A yellow, lizard-like sculpture with a small grey beak. The up close framing of the sculpture and the shallow depth of field gives it the appearance of a real (yet fantastic) animal." src="./photos/rar.jpg">
 </a>
 </li>
 <li>
-<a aria-label='13.jpg' href='./13.jpg.html'>
-<img src='./photos/13.jpg'>
+<a aria-label="parador-la-torre.jpg" href="#">
+<img alt="A rusty Pepsi billboard stands against a peaceful desert landscape with clear blue skies in the afternoon. The Pepsi billboard says &quot;Parador la Torre&quot;, spanish for &quot;La Torre Gas Station&quot;." src="./photos/parador-la-torre.jpg">
 </a>
 </li>
 <li>
-<a aria-label='2.jpg' href='./2.jpg.html'>
-<img src='./photos/2.jpg'>
+<a aria-label="beheaded.jpg" href="#">
+<img alt="A small religious figure depicting a man and two dogs. The man&apos;s head has broken off." src="./photos/beheaded.jpg">
 </a>
 </li>
 <li>
-<a aria-label='3.jpg' href='./3.jpg.html'>
-<img src='./photos/3.jpg'>
+<a aria-label="quartering.png" href="#">
+<img alt="Wax candles resembling a human head, legs, a torso and a liver are placed in a blue basket" src="./photos/quartering.png">
 </a>
 </li>
 <li>
-<a aria-label='4.jpg' href='./4.jpg.html'>
-<img src='./photos/4.jpg'>
+<a
+  aria-label="meu-socorro-vem-de-deus-tapioca-olhe-pare-pense-coma-tapioca.jpg" href="#">
+<img alt="A window in a food truck with a red sign saying &quot;MEU SOCORRO VEM DE DEUS TAPIOCA OLHE PARE E PENSE COMA TAPIOCA&quot;, portuguese for &quot;MY SALVATION COMES FROM GOD TAPIOCA LOOK STOP AND THINK EAT TAPIOCA&quot;. Behind the window we can see the food truck&apos;s kitchen illuminated by bright yellow lights and a man wearing white cloths and a hat." src="./photos/meu-socorro-vem-de-deus-tapioca-olhe-pare-pense-coma-tapioca.jpg">
 </a>
 </li>
 <li>
-<a aria-label='5.jpg' href='./5.jpg.html'>
-<img src='./photos/5.jpg'>
+<a aria-label="tapioca.jpg" href="#">
+<img alt="A food truck&apos;s counter illuminated in a dim red light. On top of the counter there is a bright yellow sign listing multiple flavors of tapioca. Inside the truck we can see a man in white cloths working." src="./photos/tapioca.jpg">
 </a>
 </li>
 <li>
-<a aria-label='6.jpg' href='./6.jpg.html'>
-<img src='./photos/6.jpg'>
+<a aria-label="minhocao.gif" href="#">
+<img alt="A human figure with a blue light emanating from its head moves towards the camera through an elevated highway illuminated by dim orange light poles" src="./photos/minhocao.gif">
 </a>
 </li>
 <li>
-<a aria-label='7.jpg' href='./7.jpg.html'>
-<img src='./photos/7.jpg'>
+<a aria-label="mushroom.jpg" href="#">
+<img alt="A vibrant spining fairground ride at night. The ride&apos;s green neon lights create a striking contrast against the dark sky, while the picture&apos;s long exposure time conveys the movement of the scene." src="./photos/mushroom.jpg">
 </a>
 </li>
 <li>
-<a aria-label='8.jpg' href='./8.jpg.html'>
-<img src='./photos/8.jpg'>
+<a aria-label="cat.jpg" href="#">
+<img alt="A golden maneki-neko sitting on top of a metal shelf" src="./photos/cat.jpg">
 </a>
 </li>
 <li>
-<a aria-label='9.png' href='./9.png.html'>
-<img src='./photos/9.png'>
+<a aria-label="peruvian-boy.jpg" href="#">
+<img alt="A small boy wearing a light blue striped shirt dips is head into a water stream carved out of a rock wall" src="./photos/peruvian-boy.jpg">
 </a>
 </li>
 </ul>
 </main>
 <footer>
-made with 💛 by
-<a href='https://pablopie.xyz' role='author'>@pablo</a>
+made with 💛 by <a role="author" href="https://pablopie.xyz">@pablo</a>
 </footer>
 </body>
 </html>