photo-gallery-styles

Design documents for photos.pablopie.xyz 📸️

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

Commit: 7746b3826cef753d92a7d4a97d070289dd55d53d
Parent: cc49ce2bd6ff0e33aaa2f5e1137ed68a591ddeb8
Author: Pablo <pablo-escobar@riseup.net>
Date: Tue, 12 Dec 2023 10:33:47 +0000

Added licensing information to the pages on individual pictures

Diffstat

3 files changed, 27 insertions, 3 deletions

Status	File Name	N° Changes	Insertions	Deletions
Modified	9-de-julho.jpg.html	7	7	0
Modified	dummond-adams.png.html	7	7	0
Modified	styles.css	16	13	3

diff --git a/9-de-julho.jpg.html b/9-de-julho.jpg.html
@@ -31,7 +31,14 @@
 <main>
 <figure aria-label="File 9-de-julho.jpg">
 <div id="picture-container">
+<div id="picture-frame">
 <img alt="A tall rundown building covered in graffiti art against a blue sky backdrop" src="./photos/9-de-julho.jpg">
+<div>
+by <a role="author" href="https://pablopie.xyz">Pablo</a>
+(licensed under
+<a role="license" href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA-4.0</a>)
+</div>
+</div>
 </div>
 </figure>
 </main>

diff --git a/dummond-adams.png.html b/dummond-adams.png.html
@@ -31,7 +31,14 @@
 <main>
 <figure>
 <div id="picture-container">
+<div id="picture-frame">
 <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>
+by <a role="author" href="https://pablopie.xyz">Pablo</a>
+(licensed under
+<a role="license" href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA-4.0</a>)
+</div>
+</div>
 </div>
 <figcaption>
 The Dummond Adams building at Paulista Avenue, São Paulo, Brazil

diff --git a/styles.css b/styles.css
@@ -68,10 +68,20 @@ figcaption {
   display: flex;
 }
 
-#picture-container img {
+#picture-frame {
   margin: 0 auto;
-  max-width: calc(100% - 14pt);
-  border: solid 3.5pt white;
+  padding: 3.5pt;
+  background: white;
+  color: #15151a;
+  font-size: .8rem;
+}
+
+#picture-frame a {
+  color: #15151a;
+}
+
+#picture-frame img {
+  max-width: 100%;
 }
 
 footer {