Fix page pics on mobile

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 >}}

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;
+}

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") }}

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>

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 }}

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 }}