Massive formatting and added figcaption

2 files changed, 50 insertions, 41 deletions

diff --git a/themes/simple/layouts/_default/_markup/render-image.html b/themes/simple/layouts/_default/_markup/render-image.html
index 6f46efa..d3df1fd 100644
--- a/themes/simple/layouts/_default/_markup/render-image.html
+++ b/themes/simple/layouts/_default/_markup/render-image.html
@@ -5,6 +5,7 @@
     <img
       loading="lazy"
       src="{{ .Destination }}?v={{ $cachebuster }}"
-      alt="{{ .Text }}" title="{{ .Text }}"> 
+      alt="{{ .Text }}" title="{{ .Text }}">
   </a>
+  <figcaption>{{ .Text }}</figcaption>
 </figure>
diff --git a/themes/simple/static/css/tailwind.css b/themes/simple/static/css/tailwind.css
index b99c7fc..51b922c 100644
--- a/themes/simple/static/css/tailwind.css
+++ b/themes/simple/static/css/tailwind.css
@@ -6,153 +6,161 @@
 
 /* Container */
 .container-blog {
-  max-width: 700px;
+        max-width: 700px;
 }
 
 /* User text selection */
 ::selection {
-  @apply bg-yellow-100 text-black;
+        @apply bg-yellow-100 text-black;
 }
 
 ::-moz-selection {
-  @apply bg-yellow-100 text-black;
+        @apply bg-yellow-100 text-black;
 }
 
 /* Helpers */
 
 a:hover {
-  color: blue;
+        color: blue;
 }
 
 .blue {
-  color: blue;
+        color: blue;
 }
 
 /* Headings */
 article.single h2 {
-  @apply text-2xl font-bold mb-8 mt-8 leading-tight;
+        @apply text-2xl font-bold mb-8 mt-8 leading-tight;
 }
 
 article.single.note h2 {
-  @apply text-2xl font-bold mb-1 mt-8 leading-tight;
+        @apply text-2xl font-bold mb-1 mt-8 leading-tight;
 }
 
 article.single h3 {
-  @apply text-xl font-bold mb-4 mt-8 leading-tight;
+        @apply text-xl font-bold mb-4 mt-8 leading-tight;
 }
 
 article.single h4 {
-  @apply text-lg font-bold mb-4 mt-8 leading-tight;
+        @apply text-lg font-bold mb-4 mt-8 leading-tight;
 }
 
 /* Paragraph */
 article.single p {
-  @apply mb-5;
+        @apply mb-5;
 }
 
 /* Links */
 article.single a {
-  @apply underline-offset-2 underline hover:bg-yellow-100;
+        @apply underline-offset-2 underline hover:bg-yellow-100;
 }
 
 /* Blockquote */
 article.single .content blockquote {
-  background-image: url('/general/alert-light.svg');
-  background-size: 30px 30px;
-  background-repeat: no-repeat;
-  background-position: 0 5px;
-  @apply pl-12 my-8;
+        background-image: url('/general/alert-light.svg');
+        background-size: 30px 30px;
+        background-repeat: no-repeat;
+        background-position: 0 5px;
+        @apply pl-12 my-8;
 }
 
 article.single .content blockquote p {
-  @apply mb-2;
+        @apply mb-2;
 }
 
 /* Media: Images, audio, video */
+article.single figure {
+        @apply my-8;
+}
+
+article.single figure figcaption {
+        @apply text-center italic mt-1;
+}
+
 article.single img {
-  @apply rounded w-full !bg-gray-50 my-8;
+        @apply rounded w-full !bg-gray-50;
 
-  image-rendering: crisp-edges;
-  image-rendering: -webkit-optimize-contrast;
+        image-rendering: crisp-edges;
+        image-rendering: -webkit-optimize-contrast;
 }
 
 article.single video {
-  @apply rounded w-full !bg-gray-50;
+        @apply rounded w-full !bg-gray-50;
 }
 
 article.single audio {
-  @apply w-full mb-6;
+        @apply w-full mb-6;
 }
 
 /* Code */
 article.single code {
-  @apply bg-yellow-100 rounded px-2 py-1 text-xs font-medium;
+        @apply bg-yellow-100 rounded px-2 py-1 text-xs font-medium;
 }
 
 article.single.note code {
-  @apply bg-gray-100 rounded px-2 py-1 text-xs font-medium;
+        @apply bg-gray-100 rounded px-2 py-1 text-xs font-medium;
 }
 
 article.single pre {
-  @apply !bg-gray-50 rounded text-xs p-4 mb-6 overflow-x-auto;
+        @apply !bg-gray-50 rounded text-xs p-4 mb-6 overflow-x-auto;
 }
 
 article.single pre code,
 article.single.note pre code {
-  background: unset;
-  padding: unset;
-  @apply leading-relaxed;
+        background: unset;
+        padding: unset;
+        @apply leading-relaxed;
 }
 
 /* Tables */
 article.single table {
-  @apply w-full border border-black border-collapse mb-4;
+        @apply w-full border border-black border-collapse mb-4;
 }
 
 article.single table tr,
 article.single table td,
 article.single table th {
-  @apply px-4 py-2 border text-left;
+        @apply px-4 py-2 border text-left;
 }
 
 /* Unordered list */
 article.single .content ul {
-  @apply list-disc pl-6 md:pl-10 mb-6;
+        @apply list-disc pl-6 md:pl-10 mb-6;
 }
 
 /* Ordered list */
 article.single .content ol {
-  @apply list-decimal pl-8 md:pl-10 mb-6;
+        @apply list-decimal pl-8 md:pl-10 mb-6;
 }
 
 /* Table of contents */
 article.single #TableOfContents {
-  @apply mb-10 ml-4 leading-relaxed;
+        @apply mb-10 ml-4 leading-relaxed;
 }
 article.single #TableOfContents ul {
-  @apply list-decimal pl-4 md:pl-6;
+        @apply list-decimal pl-4 md:pl-6;
 }
 
 /* Lists */
 article.single .content ul ul {
-  margin-bottom: auto;
+        margin-bottom: auto;
 }
 
 /* Katex */
 article.single .katex-display {
-  @apply my-10;
+        @apply my-10;
 }
 
 /* Lazy loading of iframes */
 article.single .ll-iframe {
-  @apply bg-gray-100 rounded;
+        @apply bg-gray-100 rounded;
 }
 
 article.single .ll-iframe::before {
-  @apply h-full flex border-2 border-gray-300 rounded justify-center items-center font-medium text-sm cursor-pointer animate-pulse;
-  content: 'Click here to load resource…';
+        @apply h-full flex border-2 border-gray-300 rounded justify-center items-center font-medium text-sm cursor-pointer animate-pulse;
+        content: 'Click here to load resource…';
 }
 
 article.single .ll-iframe.empty::before {
-  content: none;
+        content: none;
 }