Styling of figures and images, both swipebox and regular

jacmoe · Sep 20, 2023 · 39b37e5 · 39b37e5
1 parent de1aa44
commit 39b37e5
Show file tree

Hide file tree

Showing 50 changed files with 312 additions and 155 deletions.
diff --git a/assets/css/custom.css b/assets/css/custom.css
@@ -91,3 +91,24 @@ html {
                 }
             }
         }
+
+figure {
+  border: thin #c0c0c0 solid;
+   display: flex;
+   flex-flow: column;
+   padding: 5px;
+   /* margin: auto; */
+   img {
+       margin: 0;
+   }
+   margin-bottom: 1em;
+}
+
+figcaption {
+  h4 {
+      font-size: 0.65em;
+      font-style: italic;
+      padding: 1px;
+      text-align: center;
+  }
+}
diff --git a/assets/images/rodents.jpg b/assets/images/rodents.jpg
diff --git a/content-org/jacmoes.org b/content-org/jacmoes.org
@@ -83,12 +83,18 @@ Two years ago I wanted to start writing by hand. I quickly realized, however, th
 #+begin_description
 #+end_description
 
-* draft When rodents ate my internet connection :@post:creativity:
+* draft When rodents ate my internet connection :@post:creativity:boredom:
 :PROPERTIES:
 :EXPORT_FILE_NAME: when-rodents-ate-my-internet-connection
+:EXPORT_HUGO_CUSTOM_FRONT_MATTER: :image "/images/rodents.jpg"
 :END:
 #+begin_description
+Being without internet access for three weeks taught me about creativity and boredom.
 #+end_description
+#+hugo: {{< figure src="/images/rodents/rodents.jpg" title="A roof rat peeks out between the railroad ties. (Joshua J. Cotten, Unsplash: https://unsplash.com/photos/QNaBO0oHeyo)" alt="A roof rat peeks out between the railroad ties.">}}
+
+#+print_bibliography:
+
 * draft I Am Autistic :@post:autism:
 :PROPERTIES:
 :EXPORT_FILE_NAME: i-am-autistic
@@ -205,7 +211,7 @@ CLOSED: [2022-03-29 Tue 00:50]
 I used Emacs to export to WordPress, and had to tweak the HTML, and that has obviously put me off writing blog posts, as evidenced by the single blog post in two and a half years. Hugo, Github Pages, and the excellent Ox-hugo Org-mode exporter has made my blogging pipe-line smooth and enjoyable. I expect to blog a lot more in the future.
 #+end_description
 
-#+hugo: {{< figure src="/images/hugoblog.png" alt="My new Emacs powered blog">}}
+#+hugo: {{< figure src="/images/hugoblog.png" alt="My new Emacs powered blog" title="My new Emacs powered blog">}}
 
 My [[https://jacmoes.wordpress.com/][old blog]] at WordPress only has one single post in it.
 

diff --git a/content/posts/colemak-one-year-later.md b/content/posts/colemak-one-year-later.md
@@ -1,5 +1,5 @@
 +++
-title = "Colemak one year later"
+title = "The typing of the well read"
 author = ["Jacob Moena"]
 tags = ["colemak", "efficiency"]
 categories = ["post"]

diff --git a/content/posts/creatively-writing-longhand.md b/content/posts/creatively-writing-longhand.md
@@ -132,7 +132,7 @@ From 1850 to 1925, Spencerian Script was the de facto writing style for business
 
     There is a website dedicated to the Palmer method of business writing: <https://palmermethod.com/> where you can find a series of self-teaching lessons.
 
-    ## Bibliography
+    ## References
 
     <style>.csl-entry{text-indent: -1.5em; margin-left: 1.5em;}</style><div class="csl-bib-body">
     </div>

diff --git a/content/posts/welcome-to-my-new-blog.md b/content/posts/welcome-to-my-new-blog.md
@@ -10,7 +10,7 @@ image = "/images/hugoblog.png"
 hideToc = true
 +++
 
-{{< figure src="/images/hugoblog.png" alt="My new Emacs powered blog">}}
+{{< figure src="/images/hugoblog.png" alt="My new Emacs powered blog" title="My new Emacs powered blog">}}
 
 My [old blog](https://jacmoes.wordpress.com/) at WordPress only has one single post in it.
 

diff --git a/content/posts/when-rodents-ate-my-internet-connection.md b/content/posts/when-rodents-ate-my-internet-connection.md
@@ -1,7 +1,16 @@
 +++
 title = "When rodents ate my internet connection"
 author = ["Jacob Moena"]
-tags = ["creativity"]
+description = "Being without internet access for three weeks taught me about creativity and boredom."
+tags = ["creativity", "boredom"]
 categories = ["post"]
 draft = true
+image = "/images/rodents.jpg"
 +++
+
+{{< figure src="/images/rodents/rodents.jpg" title="A roof rat peeks out between the railroad ties. (Joshua J. Cotten, Unsplash: https://unsplash.com/photos/QNaBO0oHeyo)" alt="A roof rat peeks out between the railroad ties.">}}
+
+## References
+
+<style>.csl-entry{text-indent: -1.5em; margin-left: 1.5em;}</style><div class="csl-bib-body">
+</div>
diff --git a/docs/404.html b/docs/404.html
@@ -155,7 +155,7 @@
 
 
 
-<link type="text/css" rel="stylesheet" href="/css/bundle.min.686a7e842517376303c8f4d5daf0f58d05cc0b02d665887a70e98c44bb1ae5ca.css">
+<link type="text/css" rel="stylesheet" href="/css/bundle.min.714721c57f43d63a13522ebb3fd674ad172c6c4707ba9a5f8002460d5fafc714.css">
 <link rel="stylesheet" href="https://jacmoe.github.io//css/justifiedGallery.min.css">
 <link rel="stylesheet" href="https://jacmoe.github.io//css/swipebox.min.css">
 <link rel="me" value="https://writing.exchange/@jacmoe" />

diff --git a/docs/about/about/index.html b/docs/about/about/index.html
@@ -159,7 +159,7 @@
 
 
 
-<link type="text/css" rel="stylesheet" href="/css/bundle.min.686a7e842517376303c8f4d5daf0f58d05cc0b02d665887a70e98c44bb1ae5ca.css">
+<link type="text/css" rel="stylesheet" href="/css/bundle.min.714721c57f43d63a13522ebb3fd674ad172c6c4707ba9a5f8002460d5fafc714.css">
 <link rel="stylesheet" href="https://jacmoe.github.io//css/justifiedGallery.min.css">
 <link rel="stylesheet" href="https://jacmoe.github.io//css/swipebox.min.css">
 <link rel="me" value="https://writing.exchange/@jacmoe" />

diff --git a/docs/about/index.html b/docs/about/index.html
@@ -160,7 +160,7 @@
 
 
 
-<link type="text/css" rel="stylesheet" href="/css/bundle.min.686a7e842517376303c8f4d5daf0f58d05cc0b02d665887a70e98c44bb1ae5ca.css">
+<link type="text/css" rel="stylesheet" href="/css/bundle.min.714721c57f43d63a13522ebb3fd674ad172c6c4707ba9a5f8002460d5fafc714.css">
 <link rel="stylesheet" href="https://jacmoe.github.io//css/justifiedGallery.min.css">
 <link rel="stylesheet" href="https://jacmoe.github.io//css/swipebox.min.css">
 <link rel="me" value="https://writing.exchange/@jacmoe" />

diff --git a/docs/categories/announcement/index.html b/docs/categories/announcement/index.html
@@ -156,7 +156,7 @@
 
 
 
-<link type="text/css" rel="stylesheet" href="/css/bundle.min.686a7e842517376303c8f4d5daf0f58d05cc0b02d665887a70e98c44bb1ae5ca.css">
+<link type="text/css" rel="stylesheet" href="/css/bundle.min.714721c57f43d63a13522ebb3fd674ad172c6c4707ba9a5f8002460d5fafc714.css">
 <link rel="stylesheet" href="https://jacmoe.github.io//css/justifiedGallery.min.css">
 <link rel="stylesheet" href="https://jacmoe.github.io//css/swipebox.min.css">
 <link rel="me" value="https://writing.exchange/@jacmoe" />

diff --git a/docs/categories/announcement/index.xml b/docs/categories/announcement/index.xml
@@ -13,7 +13,7 @@
       <pubDate>Tue, 29 Mar 2022 00:50:00 +0200</pubDate>
 
       <guid>https://jacmoe.github.io/posts/welcome-to-my-new-blog/</guid>
-      <description>My old blog at WordPress only has one single post in it.
+      <description>My new Emacs powered blog My old blog at WordPress only has one single post in it.
 I wrote it using Org-mode in Emacs, and used an extension to put it on WordPress.
 That was good.
 I had to perform a lot of tweaking to the HTML, however, and that has obviously put me off just writing blog posts.

diff --git a/docs/categories/index.html b/docs/categories/index.html
@@ -156,7 +156,7 @@
 
 
 
-<link type="text/css" rel="stylesheet" href="/css/bundle.min.686a7e842517376303c8f4d5daf0f58d05cc0b02d665887a70e98c44bb1ae5ca.css">
+<link type="text/css" rel="stylesheet" href="/css/bundle.min.714721c57f43d63a13522ebb3fd674ad172c6c4707ba9a5f8002460d5fafc714.css">
 <link rel="stylesheet" href="https://jacmoe.github.io//css/justifiedGallery.min.css">
 <link rel="stylesheet" href="https://jacmoe.github.io//css/swipebox.min.css">
 <link rel="me" value="https://writing.exchange/@jacmoe" />

diff --git a/docs/categories/post/index.html b/docs/categories/post/index.html
@@ -156,7 +156,7 @@
 
 
 
-<link type="text/css" rel="stylesheet" href="/css/bundle.min.686a7e842517376303c8f4d5daf0f58d05cc0b02d665887a70e98c44bb1ae5ca.css">
+<link type="text/css" rel="stylesheet" href="/css/bundle.min.714721c57f43d63a13522ebb3fd674ad172c6c4707ba9a5f8002460d5fafc714.css">
 <link rel="stylesheet" href="https://jacmoe.github.io//css/justifiedGallery.min.css">
 <link rel="stylesheet" href="https://jacmoe.github.io//css/swipebox.min.css">
 <link rel="me" value="https://writing.exchange/@jacmoe" />

diff --git a/docs/categories/post/index.xml b/docs/categories/post/index.xml
@@ -13,9 +13,9 @@
       <pubDate>Fri, 17 Mar 2023 17:15:00 +0100</pubDate>
 
       <guid>https://jacmoe.github.io/posts/first_entry_in_my_new_gemini_log/</guid>
-      <description>The first entry of my Gemini Log (Gemlog) is up: 2023-03-17 - Hello, Universe! I am thinking that my Gemini Capsule should be a place for me to share my writing, my writer’s journal, and my musings about writing.
+      <description>First entry in my new Gemlog The first entry of my Gemini Log (Gemlog) is up: 2023-03-17 - Hello, Universe! I am thinking that my Gemini Capsule should be a place for me to share my writing, my writer’s journal, and my musings about writing.
 Much simpler to put something up on Gemini: simply write a simple text, and put it on the server.
-Here’s to many more entries in the Gemlog! 🚀</description>
+Here’s to many more entries in the Gemlog!</description>
     </item>
 
     <item>

diff --git a/...0f58d05cc0b02d665887a70e98c44bb1ae5ca.css → ...674ad172c6c4707ba9a5f8002460d5fafc714.css b/...0f58d05cc0b02d665887a70e98c44bb1ae5ca.css → ...674ad172c6c4707ba9a5f8002460d5fafc714.css
diff --git a/docs/gallery/gallery/index.html b/docs/gallery/gallery/index.html
@@ -132,7 +132,7 @@
         },
         "datePublished": "2023-09-10",
         "description": "",
-        "wordCount":  5 ,
+        "wordCount":  52 ,
         "mainEntityOfPage": "True",
         "dateModified": "2023-09-10",
         "image": {
@@ -159,7 +159,7 @@
 
 
 
-<link type="text/css" rel="stylesheet" href="/css/bundle.min.686a7e842517376303c8f4d5daf0f58d05cc0b02d665887a70e98c44bb1ae5ca.css">
+<link type="text/css" rel="stylesheet" href="/css/bundle.min.714721c57f43d63a13522ebb3fd674ad172c6c4707ba9a5f8002460d5fafc714.css">
 <link rel="stylesheet" href="https://jacmoe.github.io//css/justifiedGallery.min.css">
 <link rel="stylesheet" href="https://jacmoe.github.io//css/swipebox.min.css">
 <link rel="me" value="https://writing.exchange/@jacmoe" />
@@ -404,69 +404,117 @@ <h1 class="post-title">
   <p>HHotel California of Creative Writing</p>
 <div id="gallery">
 
-<a href="/gallery/hoca/1splash.png" rel="test" class="swipebox" title="Test image">
-    <img alt="Test image" src="/gallery/hocasmall/1splash.png"/>
-</a>
+<figure>
+    <a href="/gallery/hoca/1splash.png" rel="test" class="swipebox" caption="Test image" title="Test image">
+        <img alt="Test image" src="/gallery/hocasmall/1splash.png"/>
+    </a>
+    <figcaption><h4>Test image</h4></figcaption>
+</figure>
 
-<a href="/gallery/hoca/2zen.png" rel="test" class="swipebox" title="Test image 2">
-    <img alt="Test image 2" src="/gallery/hocasmall/2zen.png"/>
-</a>
+<figure>
+    <a href="/gallery/hoca/2zen.png" rel="test" class="swipebox" caption="Test image 2" title="Test image 2">
+        <img alt="Test image 2" src="/gallery/hocasmall/2zen.png"/>
+    </a>
+    <figcaption><h4>Test image 2</h4></figcaption>
+</figure>
 
-<a href="/gallery/hoca/3tracktable.png" rel="test" class="swipebox" title="Test image 2">
-    <img alt="Test image 2" src="/gallery/hocasmall/3tracktable.png"/>
-</a>
+<figure>
+    <a href="/gallery/hoca/3tracktable.png" rel="test" class="swipebox" caption="Test image 2" title="Test image 2">
+        <img alt="Test image 2" src="/gallery/hocasmall/3tracktable.png"/>
+    </a>
+    <figcaption><h4>Test image 2</h4></figcaption>
+</figure>
 
-<a href="/gallery/hoca/4dictionary.png" rel="test" class="swipebox" title="Test image 2">
-    <img alt="Test image 2" src="/gallery/hocasmall/4dictionary.png"/>
-</a>
+<figure>
+    <a href="/gallery/hoca/4dictionary.png" rel="test" class="swipebox" caption="Test image 2" title="Test image 2">
+        <img alt="Test image 2" src="/gallery/hocasmall/4dictionary.png"/>
+    </a>
+    <figcaption><h4>Test image 2</h4></figcaption>
+</figure>
 
-<a href="/gallery/hoca/5webster.png" rel="test" class="swipebox" title="Test image 2">
-    <img alt="Test image 2" src="/gallery/hocasmall/5webster.png"/>
-</a>
+<figure>
+    <a href="/gallery/hoca/5webster.png" rel="test" class="swipebox" caption="Test image 2" title="Test image 2">
+        <img alt="Test image 2" src="/gallery/hocasmall/5webster.png"/>
+    </a>
+    <figcaption><h4>Test image 2</h4></figcaption>
+</figure>
 
-<a href="/gallery/hoca/6synonyms.png" rel="test" class="swipebox" title="Test image 2">
-    <img alt="Test image 2" src="/gallery/hocasmall/6synonyms.png"/>
-</a>
+<figure>
+    <a href="/gallery/hoca/6synonyms.png" rel="test" class="swipebox" caption="Test image 2" title="Test image 2">
+        <img alt="Test image 2" src="/gallery/hocasmall/6synonyms.png"/>
+    </a>
+    <figcaption><h4>Test image 2</h4></figcaption>
+</figure>
 
-<a href="/gallery/hoca/7definitions.png" rel="test" class="swipebox" title="Test image 2">
-    <img alt="Test image 2" src="/gallery/hocasmall/7definitions.png"/>
-</a>
+<figure>
+    <a href="/gallery/hoca/7definitions.png" rel="test" class="swipebox" caption="Test image 2" title="Test image 2">
+        <img alt="Test image 2" src="/gallery/hocasmall/7definitions.png"/>
+    </a>
+    <figcaption><h4>Test image 2</h4></figcaption>
+</figure>
 
-<a href="/gallery/hoca/8sentences.png" rel="test" class="swipebox" title="Test image 2">
-    <img alt="Test image 2" src="/gallery/hocasmall/8sentences.png"/>
-</a>
+<figure>
+    <a href="/gallery/hoca/8sentences.png" rel="test" class="swipebox" caption="Test image 2" title="Test image 2">
+        <img alt="Test image 2" src="/gallery/hocasmall/8sentences.png"/>
+    </a>
+    <figcaption><h4>Test image 2</h4></figcaption>
+</figure>
 
-<a href="/gallery/hoca/9clocktable.png" rel="test" class="swipebox" title="Test image 2">
-    <img alt="Test image 2" src="/gallery/hocasmall/9clocktable.png"/>
-</a>
+<figure>
+    <a href="/gallery/hoca/9clocktable.png" rel="test" class="swipebox" caption="Test image 2" title="Test image 2">
+        <img alt="Test image 2" src="/gallery/hocasmall/9clocktable.png"/>
+    </a>
+    <figcaption><h4>Test image 2</h4></figcaption>
+</figure>
 
-<a href="/gallery/hoca/10pomodoro.png" rel="test" class="swipebox" title="Test image 2">
-    <img alt="Test image 2" src="/gallery/hocasmall/10pomodoro.png"/>
-</a>
+<figure>
+    <a href="/gallery/hoca/10pomodoro.png" rel="test" class="swipebox" caption="Test image 2" title="Test image 2">
+        <img alt="Test image 2" src="/gallery/hocasmall/10pomodoro.png"/>
+    </a>
+    <figcaption><h4>Test image 2</h4></figcaption>
+</figure>
 
-<a href="/gallery/hoca/11pomodoro_light.png" rel="test" class="swipebox" title="Test image 2">
-    <img alt="Test image 2" src="/gallery/hocasmall/11pomodoro_light.png"/>
-</a>
+<figure>
+    <a href="/gallery/hoca/11pomodoro_light.png" rel="test" class="swipebox" caption="Test image 2" title="Test image 2">
+        <img alt="Test image 2" src="/gallery/hocasmall/11pomodoro_light.png"/>
+    </a>
+    <figcaption><h4>Test image 2</h4></figcaption>
+</figure>
 
-<a href="/gallery/hoca/12columns.png" rel="test" class="swipebox" title="Test image 2">
-    <img alt="Test image 2" src="/gallery/hocasmall/12columns.png"/>
-</a>
+<figure>
+    <a href="/gallery/hoca/12columns.png" rel="test" class="swipebox" caption="Test image 2" title="Test image 2">
+        <img alt="Test image 2" src="/gallery/hocasmall/12columns.png"/>
+    </a>
+    <figcaption><h4>Test image 2</h4></figcaption>
+</figure>
 
-<a href="/gallery/hoca/13orgwc.png" rel="test" class="swipebox" title="Test image 2">
-    <img alt="Test image 2" src="/gallery/hocasmall/13orgwc.png"/>
-</a>
+<figure>
+    <a href="/gallery/hoca/13orgwc.png" rel="test" class="swipebox" caption="Test image 2" title="Test image 2">
+        <img alt="Test image 2" src="/gallery/hocasmall/13orgwc.png"/>
+    </a>
+    <figcaption><h4>Test image 2</h4></figcaption>
+</figure>
 
-<a href="/gallery/hoca/14writegoodmode.png" rel="test" class="swipebox" title="Test image 2">
-    <img alt="Test image 2" src="/gallery/hocasmall/14writegoodmode.png"/>
-</a>
+<figure>
+    <a href="/gallery/hoca/14writegoodmode.png" rel="test" class="swipebox" caption="Test image 2" title="Test image 2">
+        <img alt="Test image 2" src="/gallery/hocasmall/14writegoodmode.png"/>
+    </a>
+    <figcaption><h4>Test image 2</h4></figcaption>
+</figure>
 
-<a href="/gallery/hoca/15proselint.png" rel="test" class="swipebox" title="Test image 2">
-    <img alt="Test image 2" src="/gallery/hocasmall/15proselint.png"/>
-</a>
+<figure>
+    <a href="/gallery/hoca/15proselint.png" rel="test" class="swipebox" caption="Test image 2" title="Test image 2">
+        <img alt="Test image 2" src="/gallery/hocasmall/15proselint.png"/>
+    </a>
+    <figcaption><h4>Test image 2</h4></figcaption>
+</figure>
 
-<a href="/gallery/hoca/16diff.png" rel="test" class="swipebox" title="Test image 2">
-    <img alt="Test image 2" src="/gallery/hocasmall/16diff.png"/>
-</a>
+<figure>
+    <a href="/gallery/hoca/16diff.png" rel="test" class="swipebox" caption="Test image 2" title="Test image 2">
+        <img alt="Test image 2" src="/gallery/hocasmall/16diff.png"/>
+    </a>
+    <figcaption><h4>Test image 2</h4></figcaption>
+</figure>
 
 </div>