From d0f926db53fce545fdf72b9c6710f083ed9514a9 Mon Sep 17 00:00:00 2001
From: Joshua Goins <josh@redstrate.com>
Date: Mon, 17 Apr 2023 15:42:54 -0400
Subject: [PATCH] Fix page pics on mobile

---
 content/_index.md                              |  1 +
 themes/red/assets/css/site.css                 | 18 ++++++++++++++++++
 themes/red/layouts/_default/art.html           |  2 +-
 themes/red/layouts/_default/software.html      |  2 +-
 themes/red/layouts/shortcodes/insert-pic.html  |  2 +-
 .../red/layouts/shortcodes/recent-posts.html   |  2 --
 6 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/content/_index.md b/content/_index.md
index 8d2636a..36dfd4c 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -16,4 +16,5 @@ Enjoyed what you see? Consider signing the [guestbook]({{< ref "guestbook" >}})!
 # Featured Artwork
 {{< featured-art >}}
 
+# Recent Blog Posts
 {{< recent-posts >}}
diff --git a/themes/red/assets/css/site.css b/themes/red/assets/css/site.css
index dc988b4..3ef72f7 100644
--- a/themes/red/assets/css/site.css
+++ b/themes/red/assets/css/site.css
@@ -36,6 +36,11 @@
     .grid-sizer, .grid-item {
         width: 400px;
     }
+
+    .page-pic {
+        float: right;
+        margin: 10px;
+    }
 }
 
 /* mobile devices */
@@ -75,6 +80,14 @@
         width: 100%;
         height: auto;
     }
+
+    .page-pic {
+        margin-left: auto;
+        margin-right: auto;
+        display: block;
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
 }
 
 body {
@@ -437,3 +450,8 @@ model-viewer {
     margin-left: auto;
     margin-right: auto;
 }
+
+.page-pic {
+    width: 200px;
+    height: 200px;
+}
diff --git a/themes/red/layouts/_default/art.html b/themes/red/layouts/_default/art.html
index 363c659..8009438 100644
--- a/themes/red/layouts/_default/art.html
+++ b/themes/red/layouts/_default/art.html
@@ -4,7 +4,7 @@
     <hr>
 
     {{ with resources.Get "pics/pic-gallery.png" }}
-        <img class="gallery-img" alt="Gallery" title="Gallery" style="width: 200px; height: 200px; float: right" width="{{ .Width }}" height="{{ .Height }}" src="{{ .RelPermalink }}">
+        <img class="gallery-img page-pic" alt="Gallery" title="Gallery" width="{{ .Width }}" height="{{ .Height }}" src="{{ .RelPermalink }}">
     {{ end }}
 
     {{ $paginator := .Paginate (where .RegularPagesRecursive "Type" "art") }}
diff --git a/themes/red/layouts/_default/software.html b/themes/red/layouts/_default/software.html
index 9b27355..f78e386 100644
--- a/themes/red/layouts/_default/software.html
+++ b/themes/red/layouts/_default/software.html
@@ -5,7 +5,7 @@
     {{ .Content }}
 
     {{ with resources.Get "pics/pic-software.webp" }}
-        <img class="gallery-img" style="width: 200px; height: 200px; float: right" width="{{ .Width }}" height="{{ .Height }}" src="{{ .RelPermalink }}">
+        <img class="gallery-img page-pic" width="{{ .Width }}" height="{{ .Height }}" src="{{ .RelPermalink }}">
     {{ end }}
 
     <h3>Personal Projects</h3>
diff --git a/themes/red/layouts/shortcodes/insert-pic.html b/themes/red/layouts/shortcodes/insert-pic.html
index 927793c..317b52c 100644
--- a/themes/red/layouts/shortcodes/insert-pic.html
+++ b/themes/red/layouts/shortcodes/insert-pic.html
@@ -4,5 +4,5 @@
 {{ $path := printf "pics/%s" $name}}
 
 {{ with resources.Get $path }}
-<img alt="{{ $alt }}" title="{{ $alt }}" class="gallery-img" style="width: 200px; height: 200px; float: right; margin: 10px;" width="{{ .Width }}" height="{{ .Height }}" src="{{ .RelPermalink }}">
+<img alt="{{ $alt }}" title="{{ $alt }}" class="gallery-img page-pic" width="{{ .Width }}" height="{{ .Height }}" src="{{ .RelPermalink }}">
 {{ end }}
diff --git a/themes/red/layouts/shortcodes/recent-posts.html b/themes/red/layouts/shortcodes/recent-posts.html
index 7fdb476..9bb2a69 100644
--- a/themes/red/layouts/shortcodes/recent-posts.html
+++ b/themes/red/layouts/shortcodes/recent-posts.html
@@ -1,5 +1,3 @@
-<h3>Recent Blog Posts</h3>
-
 <div class="generic-con">
     <ul style="padding: 0">
     {{ range first 3 (where .Site.Pages "Type" "blog").ByDate.Reverse }}