From d75fb258f62319a0713f4ce42f0ee68134df2ac3 Mon Sep 17 00:00:00 2001
From: sylhare <sylhare@outlook.com>
Date: Thu, 24 Oct 2024 01:44:26 -0400
Subject: [PATCH 1/3] Add specific aligner scss file

---
 _sass/base/_global.scss      | 10 ----------
 _sass/includes/_aligner.scss | 33 +++++++++++++++++++++++++++++++++
 _sass/layouts/_page.scss     | 26 --------------------------
 _sass/type-on-strap.scss     |  1 +
 4 files changed, 34 insertions(+), 36 deletions(-)
 create mode 100644 _sass/includes/_aligner.scss

diff --git a/_sass/base/_global.scss b/_sass/base/_global.scss
index 53ed3d0a62..f1d9a3d5b0 100644
--- a/_sass/base/_global.scss
+++ b/_sass/base/_global.scss
@@ -281,14 +281,4 @@ details {
     padding-top: 2em;
     max-width: 100%;
   }
-}
-
-.caption-style {
-  font-style: italic;
-  font-size: 0.8em;
-  text-align: center;
-  color: var(--meta);
-  font-weight: 200;
-  padding-bottom: 5px;
-  padding-top: 5px;
 }
\ No newline at end of file
diff --git a/_sass/includes/_aligner.scss b/_sass/includes/_aligner.scss
new file mode 100644
index 0000000000..6e88d5794c
--- /dev/null
+++ b/_sass/includes/_aligner.scss
@@ -0,0 +1,33 @@
+/* --- Aligner --- */
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  padding: 0.9% 0 1.5% 0;
+}
+
+.caption-style {
+  order: 1;
+  flex: 1 1 100%;
+  display: block;
+  font-style: italic;
+  font-size: 0.8em;
+  text-align: center;
+  color: var(--meta);
+  font-weight: 200;
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+
+.column {
+  flex: 1 0;
+
+  img {
+    min-width: 250px;
+  }
+  .single {
+    width: 100%;
+    display: block;
+  }
+}
\ No newline at end of file
diff --git a/_sass/layouts/_page.scss b/_sass/layouts/_page.scss
index 0e7654671d..eac4b9716d 100644
--- a/_sass/layouts/_page.scss
+++ b/_sass/layouts/_page.scss
@@ -13,29 +13,3 @@ h1.title {
   margin-top: 5px;
   text-shadow: 1px 1px 2px var(--text-shadow);
 }
-
-//Shared css in _post.scss
-
-
-/* --- Aligner --- */
-/* within page/posts */
-
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0.9% 0 1.5% 0;
-}
-
-.column {
-  flex: 50%;
-
-  img {
-    width: 100%;
-    min-width: 250px;
-  }
-
-  .single {
-    width: 50%;
-    display: block;
-  }
-}
diff --git a/_sass/type-on-strap.scss b/_sass/type-on-strap.scss
index 377597f46a..9401cbdc90 100644
--- a/_sass/type-on-strap.scss
+++ b/_sass/type-on-strap.scss
@@ -27,6 +27,7 @@
 @import 'includes/blog_nav';
 @import 'includes/gallery';
 @import 'includes/portfolio';
+@import 'includes/aligner';
 
 /* Posts */
 // Linked with the html in the _layouts folder

From ff16c895f05e460a8ebcc1d0d6c4e296df8235a6 Mon Sep 17 00:00:00 2001
From: sylhare <sylhare@outlook.com>
Date: Thu, 24 Oct 2024 01:46:20 -0400
Subject: [PATCH 2/3] Update the example

---
 _posts/2018-10-29-feature-images.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/_posts/2018-10-29-feature-images.md b/_posts/2018-10-29-feature-images.md
index 9d6c96f9fc..3c83cb0f1b 100644
--- a/_posts/2018-10-29-feature-images.md
+++ b/_posts/2018-10-29-feature-images.md
@@ -27,11 +27,11 @@ It by default look into `assets/img/` so give the path from there, example:
 
 {% highlight ruby %}
 {% raw %}
-{% include aligner.html images="pexels/book-glass.jpeg,triangle.png" %}
+{% include aligner.html images="pexels/book-glass.jpeg,triangle.png" caption="A caption under the images" %}
 {% endraw %}
 {% endhighlight %}
 
-{% include aligner.html images="pexels/book-glass.jpeg,feature-img/desk-messy.jpeg" %}
+{% include aligner.html images="pexels/book-glass.jpeg,feature-img/desk-messy.jpeg" caption="A caption under the images" %}
 
 
 Here you have two images side by side, but you can set more and set the amount per columns 
@@ -50,9 +50,9 @@ However you can just use the Markdown way of doing it to get the image normal si
 
 {% highlight ruby %}
 {% raw %}
-# Markdown way (bigger)
+# Markdown way
 ![Travel]({{ "/assets/img/pexels/computer.jpeg" | relative_url}})
-# Aligner with only One (50% of width)
+# Aligner with only one image
 {% include aligner.html images="pexels/computer.jpeg" %}
 {% endraw %}
 {% endhighlight %}

From 15805861e9c01899861cc0dbd628a1395a2a0b91 Mon Sep 17 00:00:00 2001
From: sylhare <sylhare@outlook.com>
Date: Thu, 24 Oct 2024 01:46:40 -0400
Subject: [PATCH 3/3] Simplify aligner html

---
 _includes/aligner.html | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/_includes/aligner.html b/_includes/aligner.html
index 1aee8278e2..798025205f 100644
--- a/_includes/aligner.html
+++ b/_includes/aligner.html
@@ -6,19 +6,19 @@
 {% assign column = 100.0 | divided_by: include.column %}
 {% endif %}
 
-<div class="row">
-    <figure>
-        {% for image in images %}
-        <div {% if column %} style="flex: {{ column }}%" {% else %} class="column" {% endif %}  >
-            <img {% if images.size == 1 %}class="single"{% endif %}
-                 src="{{ image | prepend: 'assets/img/' | relative_url }}"
-                 alt="{{ image | prepend: '/' | split: '/' | last }}">
-        </div>
-        {% endfor %}
-        {% if include.caption %}
-        <figcaption class="caption-style">{{ include.caption }}</figcaption>
-        {% endif %}
-    </figure>
-</div>
+
+<figure class="row">
+    {% for image in images %}
+    <div class="column">
+        <img {% if images.size== 1 %}class="single" {% endif %}
+             src="{{ image | prepend: 'assets/img/' | relative_url }}"
+             alt="{{ image | prepend: '/' | split: '/' | last }}">
+    </div>
+    {% endfor %}
+    {% if include.caption %}
+    {% endif %}
+    <figcaption class="caption-style">{{ include.caption }}</figcaption>
+</figure>
+
 
 {% assign column = false %}