photo-gallery-styles

Design documents for photos.pablopie.xyz 📸️

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

Commit: 3738aef5180280b416a7b3bad3561640eaafd016
Parent: d417d591376570f1ae74a3629b9d2a6b7c8fb838
Author: Pablo <pablo-escobar@riseup.net>
Date: Mon, 27 Nov 2023 09:40:58 +0000

Added favicons to the page

Diffstat

12 files changed, 78 insertions, 6 deletions

Status	File Name	N° Changes	Insertions	Deletions
Modified	1.png.html	3	2	1
Modified	2.jpg.html	3	2	1
Modified	404.html	3	2	1
Added	icons/Makefile	4	4	0
Added	icons/favicon-16.png	0	0	0
Added	icons/favicon-24.png	0	0	0
Added	icons/favicon-32.png	0	0	0
Added	icons/favicon.ico	0	0	0
Added	icons/icon.svg	56	56	0
Modified	index.haml	5	4	1
Modified	index.html	3	2	1
Modified	styles.css	7	6	1

diff --git a/1.png.html b/1.png.html
@@ -6,13 +6,14 @@
 <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='./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>
 <nav>
+<img aria-hidden='true' height='24' src='./icons/icon.svg' width='24'>
 <a href='./index.html'>photos.pablopie.xyz</a>
 </nav>
 <figure>

diff --git a/2.jpg.html b/2.jpg.html
@@ -6,13 +6,14 @@
 <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='./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>
 <nav>
+<img aria-hidden='true' height='24' src='./icons/icon.svg' width='24'>
 <a href='./index.html'>photos.pablopie.xyz</a>
 </nav>
 <figure>

diff --git a/404.html b/404.html
@@ -6,13 +6,14 @@
 <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='./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'>
 </head>
 <body>
 <main>
 <nav>
+<img aria-hidden='true' height='24' src='./icons/icon.svg' width='24'>
 <a href='./index.html'>photos.pablopie.xyz</a>
 </nav>
 <figure>

diff --git a/icons/Makefile b/icons/Makefile
@@ -0,0 +1,4 @@
+
+favicon.ico: favicon-16.png favicon-24.png favicon-32.png
+	convert -background transparent $^ $@
+

diff --git a/icons/favicon-16.png b/icons/favicon-16.png
Binary files differ.

diff --git a/icons/favicon-24.png b/icons/favicon-24.png
Binary files differ.

diff --git a/icons/favicon-32.png b/icons/favicon-32.png
Binary files differ.

diff --git a/icons/favicon.ico b/icons/favicon.ico
Binary files differ.

diff --git a/icons/icon.svg b/icons/icon.svg
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 6.3499999 6.35"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   sodipodi:docname="icon.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="11.313708"
+     inkscape:cx="13.037281"
+     inkscape:cy="10.385631"
+     inkscape:window-width="1356"
+     inkscape:window-height="685"
+     inkscape:window-x="5"
+     inkscape:window-y="5"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:#ffffff;stroke-width:12.3072;stroke-linejoin:bevel"
+       id="rect1"
+       width="6.3499999"
+       height="6.3499999"
+       x="0"
+       y="-1.110223e-16" />
+    <rect
+       style="fill:#15151a;fill-opacity:1;stroke-width:12.0456;stroke-linejoin:bevel"
+       id="rect2"
+       width="4.7624998"
+       height="3.96875"
+       x="0.79374999"
+       y="0.79374999" />
+  </g>
+</svg>

diff --git a/index.haml b/index.haml
@@ -2,13 +2,15 @@
 %html
   %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/svg+xml" sizes="16x16 24x24 32x32 48x48 64x64 128x128 256x256 512x512" href="./images/icons/favicon.svg")
+    %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 }
@@ -16,6 +18,7 @@
   %body
     %main
       %nav
+        %img(width="24" height="24" aria-hidden="true" src="./icons/icon.svg")
         %a(href="./index.html") photos.pablopie.xyz
 
       %ul#gallery

diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
 <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='./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'>
@@ -25,6 +25,7 @@
 <body>
 <main>
 <nav>
+<img aria-hidden='true' height='24' src='./icons/icon.svg' width='24'>
 <a href='./index.html'>photos.pablopie.xyz</a>
 </nav>
 <ul id='gallery'>

diff --git a/styles.css b/styles.css
@@ -16,6 +16,11 @@ nav {
   font-weight: bold;
 }
 
+nav img {
+  position: relative;
+  top: .4rem;
+}
+
 #gallery {
   list-style: none;
   padding: 0;
@@ -91,7 +96,7 @@ footer {
   }
 
   #picture-container img {
-    max-height: 80vh;
+    max-height: 90vh;
   }
 }