photo-gallery-styles

Design documents for photos.pablopie.xyz 📸️

Commit
0d978cd8a26b457459767f2975f6a340f50d5295
Parent
7746b3826cef753d92a7d4a97d070289dd55d53d
Author
Pablo <pablo-escobar@riseup.net>
Date

Changed the display of attributions in pictures

Moved the attributions to the footer of the webpage

Diffstat

3 files changed, 11 insertions, 29 deletions

Status File Name N° Changes Insertions Deletions
Modified 9-de-julho.jpg.html 12 4 8
Modified dummond-adams.png.html 12 4 8
Modified styles.css 16 3 13 
diff --git a/9-de-julho.jpg.html b/9-de-julho.jpg.html
@@ -31,19 +31,15 @@
 <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>
 <footer>
-made with 💛 by <a role="author" href="https://pablopie.xyz">@pablo</a>
+original work by <a role="author" href="https://pablopie.xyz">Pablo</a>
+<br>
+licensed under
+<a role="license" href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA-4.0</a>
 </footer>
 </body>
 </html>

diff --git a/dummond-adams.png.html b/dummond-adams.png.html
@@ -31,14 +31,7 @@
 <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
@@ -46,7 +39,10 @@ The Dummond Adams building at Paulista Avenue, São Paulo, Brazil
 </figure>
 </main>
 <footer>
-made with 💛 by <a role="author" href="https://pablopie.xyz">@pablo</a>
+original work by <a role="author" href="https://pablopie.xyz">Pablo</a>
+<br>
+licensed under
+<a role="license" href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA-4.0</a>
 </footer>
 </body>
 </html>

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