Move markdown images to image.html

likeich · Sep 20, 2024 · d55943c · d55943c
1 parent dbad7ff
commit d55943c
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 26 deletions.
diff --git a/_includes/image.html b/_includes/image.html
@@ -0,0 +1,27 @@
+<div class="content-preview no-padding">
+    <div class="center-div">
+        <img
+            src="{{ include.image_src }}"
+            alt="{{ include.description }}"
+            class="image-shadow"
+        />
+        {% if include.description %}
+        <p>{{ include.description }}</p>
+        {% endif %}
+    </div>
+</div>
+
+<style>
+    .image-shadow {
+        width: 100%;
+    }
+
+    .center-div {
+        text-align: center;
+    }
+
+    .center-div p {
+        padding: 20px;
+        margin: 0px;
+    }
+</style>
diff --git a/_posts/2014-03-03-MCW-Website.md b/_posts/2014-03-03-MCW-Website.md
@@ -5,13 +5,13 @@ title: Miracle Car Wash Website
 
 The purpose of the Miracle Car Wash website is to show off the business I work for to potential customers. It was created as part of our ongoing modernization effort to update the wash to today's technology.
 
-![Miracle Car Wash](/images/mcw-website/mcw-main.webp)
+{% include image.html image_src='/images/mcw-website/mcw-main.webp' description='Miracle Car Wash' %}
 
 [Visit Miracle Car Wash](https://miraclecarwashonline.com)
 
-![The old car wash website on the WayBack Machine](/images/mcw-website/mcw-old.webp)
+{% include image.html image_src='/images/mcw-website/mcw-old.webp' description='The old car wash website on the WayBack Machine' %}
 
-![The new website's front page](/images/mcw-website/mcw-new.webp)
+{% include image.html image_src='/images/mcw-website/mcw-new.webp' description="The new website's front page" %}
 
 ### Features:
 - Weather widget and links to our social media accounts.

diff --git a/_posts/2019-11-02-Grayson-Highlands.md b/_posts/2019-11-02-Grayson-Highlands.md
@@ -6,7 +6,7 @@ date: 2019-11-02
 
 I just took an overnight backpacking trip to Grayson Highlands with a group of friends. The main goal of the trip was to visit Mount Rogers, the highest peak in Virginia, and to see its beautiful ecosystem. For the trip, I decided to challenge myself by bringing only a small backpack, my 26L GoRuck GR1, to test how far I could push the pack and my own comfort levels. Although it was a 1-night trip, the temperatures dropped to 20°F with strong winds on the mountain. I had limited space, so I had to figure out what was essential.
 
-![Grayson Highlands]({{ site.baseurl }}/images/grayson-highlands/MtRogersChilly.webp)
+{% include image.html image_src='/images/grayson-highlands/MtRogersChilly.webp' description='Grayson Highlands' %}
 
 ## The Gear
 
@@ -16,11 +16,11 @@ To prepare, I packed my backpack the week before the trip, excluding food and wa
 
 **Hydration System**
 
-![Hydration System]({{ site.baseurl }}/images/grayson-highlands/HydrationSystem.webp)
+{% include image.html image_src='/images/grayson-highlands/HydrationSystem.webp' description='Hydration System' %}
 
-![Outside Backpack]({{ site.baseurl }}/images/grayson-highlands/OutsideBackpack.webp)
+{% include image.html image_src='/images/grayson-highlands/OutsideBackpack.webp' description='Outside Backpack' %}
 
-![Packed Full]({{ site.baseurl }}/images/grayson-highlands/PackedFull.webp)
+{% include image.html image_src='/images/grayson-highlands/PackedFull.webp' description='Packed Full' %}
 
 **Outside of My Backpack**
 
@@ -42,9 +42,9 @@ To prepare, I packed my backpack the week before the trip, excluding food and wa
 
 ### What Changed
 
-![Open at Base Camp]({{ site.baseurl }}/images/grayson-highlands/OpenAtBaseCamp.webp)
+{% include image.html image_src='/images/grayson-highlands/OpenAtBaseCamp.webp' description='Open at Base Camp' %}
 
-![ROCK]({{ site.baseurl }}/images/grayson-highlands/ROCK.webp)
+{% include image.html image_src='/images/grayson-highlands/ROCK.webp' description='ROCK' %}
 
 I replaced the down throw blanket with a fleece sleeping bag liner but had to ditch both due to space issues. I added an Army-issue bivy cover for my sleeping bag and packed 2 trash bags as emergency rain covers. The compression cube was used for dirty clothes.
 
@@ -54,15 +54,15 @@ I replaced the down throw blanket with a fleece sleeping bag liner but had to di
 
 Both hikes were easy, but I struggled to regulate my temperature. Either I wore my raincoat and sweated, or I braved the wind without it. I opted for the latter to avoid freezing at night. The views were beautiful, and wild ponies added a fun touch. The open fields and rock outcroppings were a refreshing change from the Shenandoah National Park.
 
-![A View and Some Mountains]({{ site.baseurl }}/images/grayson-highlands/MeAndMountains.webp)
+{% include image.html image_src='/images/grayson-highlands/MeAndMountains.webp' description='A View and Some Mountains' %}
 
-![Wild Ponies]({{ site.baseurl }}/images/grayson-highlands/Horses.webp)
+{% include image.html image_src='/images/grayson-highlands/Horses.webp' description='Wild Ponies' %}
 
-![Mountains]({{ site.baseurl }}/images/grayson-highlands/Mountains.webp)
+{% include image.html image_src='/images/grayson-highlands/Mountains.webp' description='Mountains' %}
 
 ### The Long Night
 
-![My Camp Home]({{ site.baseurl }}/images/grayson-highlands/MyCampHome.webp)
+{% include image.html image_src='/images/grayson-highlands/MyCampHome.webp' description='My Camp Home' %}
 
 The cold night was a challenge, compounded by the time change, which meant an extra hour in the hammock. My strategy to stay warm:
 
@@ -152,4 +152,4 @@ The plan worked! I stayed warm all night, waking only a few times, never from th
 - 4x S-biners
 - 2x Trash bags
 
-![Feet by the Fire]({{ site.baseurl }}/images/grayson-highlands/feet-by-the-fire.webp "A happy place")
+{% include image.html image_src='/images/grayson-highlands/feet-by-the-fire.webp' description='Feet by the Fire - A happy place' %}
diff --git a/_posts/2020-06-03-Catchball.md b/_posts/2020-06-03-Catchball.md
@@ -8,9 +8,9 @@ date: 2020-06-03
 - I made this to learn about uploading apps to the Google Play Store and to gain experience polishing a project.
 - It was programmed in GDScript and made in Godot.
 
-![Catchball Header](/images/catchball/header.webp)
+{% include image.html image_src='/images/catchball/header.webp' description='Catchball Header' %}
 
-![Catchball Levels](/images/catchball/mainmenu.webp)
+{% include image.html image_src='/images/catchball/mainmenu.webp' description='Catchball Levels' %}
 *The purpose of the game is to catch all the balls in each level in one catcher. It includes 60 levels.*
 
-![Catchball Gameplay](/images/catchball/gameplay.webp)
+{% include image.html image_src='/images/catchball/gameplay.webp' description='Catchball Gameplay' %}
diff --git a/_posts/2020-08-02-Front-Office-2.md b/_posts/2020-08-02-Front-Office-2.md
@@ -7,7 +7,7 @@ title: Front Office 2.0
 - Currently over 6000 lines of code written by me personally, 11000+ in total
 - 20 Java classes and more FXML files
 
-![Main Picture]({{ site.baseurl }}/images/frontoffice2/main-pic.webp)
+{% include image.html image_src='/images/frontoffice2/main-pic.webp' description='Main Picture' %}
 
 ---
 
@@ -33,20 +33,20 @@ This system is now halting upgrades to bring the computers at the washes up to m
 - Created using the Gradle build system.
 - Designed with the Metro UI Design Language in mind.
 
-![This is a testing setup to test the polling of the card readers that I put together. It uses an RS232 to RS485 adaptor. In practice, multiple readers will be attached to this system. To poll them, a specific code and acknowledgement has to be sent through a serial port.]({{ site.baseurl }}/images/frontoffice2/test-setup.webp)
+{% include image.html image_src='/images/frontoffice2/test-setup.webp' description='This is a testing setup to test the polling of the card readers that I put together. It uses an RS232 to RS485 adaptor. In practice, multiple readers will be attached to this system. To poll them, a specific code and acknowledgement has to be sent through a serial port.' %}
 
 ---
 
-![The Card Monitor]({{ site.baseurl }}/images/frontoffice2/card-monitor.webp)
+{% include image.html image_src='/images/frontoffice2/card-monitor.webp' description='The Card Monitor' %}
 
-![A simple MDB upload in progress]({{ site.baseurl }}/images/frontoffice2/mdb-upload.webp)
+{% include image.html image_src='/images/frontoffice2/mdb-upload.webp' description='A simple MDB upload in progress' %}
 
-![Loading a card from the database]({{ site.baseurl }}/images/frontoffice2/loading-card.webp)
+{% include image.html image_src='/images/frontoffice2/loading-card.webp' description='Loading a card from the database' %}
 
-![My personal card history, queried from 630,000+ log files]({{ site.baseurl }}/images/frontoffice2/washcard-history.webp)
+{% include image.html image_src='/images/frontoffice2/washcard-history.webp' description='My personal card history, queried from 630,000+ log files' %}
 
-![Reissuing a card]({{ site.baseurl }}/images/frontoffice2/reissue-card.webp)
+{% include image.html image_src='/images/frontoffice2/reissue-card.webp' description='Reissuing a card' %}
 
-![Search for a card]({{ site.baseurl }}/images/frontoffice2/search-card.webp)
+{% include image.html image_src='/images/frontoffice2/search-card.webp' description='Search for a card' %}
 
-![Delete a card menu]({{ site.baseurl }}/images/frontoffice2/delete-card.webp)
+{% include image.html image_src='/images/frontoffice2/delete-card.webp' description='Delete a card menu' %}
diff --git a/_sass/_components.scss b/_sass/_components.scss
@@ -77,13 +77,18 @@ nav {
     margin-bottom: 20px;
     background-color: $lightBackground;
     border-radius: 10px;
+    overflow: hidden;
     box-shadow: 0 4px 6px $shadowColor;
     scale: 1;
     transition:
         box-shadow 0.2s ease-in-out,
         scale 0.2s ease-in-out;
 }
 
+.content-preview.no-padding {
+    padding: 0px !important; /* Override padding */
+}
+
 .content-preview:hover {
     box-shadow: 0 6px 10px $strongShadowColor;
     scale: 1.02;