- Commit
- 3738aef5180280b416a7b3bad3561640eaafd016
- Parent
- d417d591376570f1ae74a3629b9d2a6b7c8fb838
- Author
- Pablo <pablo-escobar@riseup.net>
- Date
Added favicons to the page
Design documents for photos.pablopie.xyz 📸️
Added favicons to the page
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; } }