- Commit
- 887ce52adc1cd6fa17849472ecb5382b6d24c243
- Parent
- 334a4f63cec07d0392e1bac976a8ae99525a9c2b
- Author
- Pablo <pablo-escobar@riseup.net>
- Date
Updated the HTML files based on the output of stagit
photo-gallery-styles
Design documents for photos.pablopie.xyz 📸️
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 ‐ 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 ‐ 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's Photo Gallery ‐ 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's Photo Gallery ‐ 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'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'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 "Parador la Torre", spanish for "La Torre Gas Station"." 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'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 "MEU SOCORRO VEM DE DEUS TAPIOCA OLHE PARE E PENSE COMA TAPIOCA", portuguese for "MY SALVATION COMES FROM GOD TAPIOCA LOOK STOP AND THINK EAT TAPIOCA". Behind the window we can see the food truck'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'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's green neon lights create a striking contrast against the dark sky, while the picture'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>