From d55943c860d7920f7c1e7f62afd77f91bf920253 Mon Sep 17 00:00:00 2001 From: Kyle Eichlin <57882701+likeich@users.noreply.github.com> Date: Fri, 20 Sep 2024 09:36:36 -1000 Subject: [PATCH] Move markdown images to image.html --- _includes/image.html | 27 ++++++++++++++++++++++++++ _posts/2014-03-03-MCW-Website.md | 6 +++--- _posts/2019-11-02-Grayson-Highlands.md | 22 ++++++++++----------- _posts/2020-06-03-Catchball.md | 6 +++--- _posts/2020-08-02-Front-Office-2.md | 18 ++++++++--------- _sass/_components.scss | 5 +++++ 6 files changed, 58 insertions(+), 26 deletions(-) create mode 100644 _includes/image.html diff --git a/_includes/image.html b/_includes/image.html new file mode 100644 index 0000000000000..9cc08549a43bf --- /dev/null +++ b/_includes/image.html @@ -0,0 +1,27 @@ +
+
+ {{ include.description }} + {% if include.description %} +

{{ include.description }}

+ {% endif %} +
+
+ + diff --git a/_posts/2014-03-03-MCW-Website.md b/_posts/2014-03-03-MCW-Website.md index 60003f63ec000..62cf1d3d8059e 100644 --- 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 index 3f3ec8134379f..f46e4b84f7cc0 100644 --- 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 index 0ca419cfd0238..f96dbd88a7b70 100644 --- 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 index e34daa3aa4d2f..37a34e5ca587a 100644 --- 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 index 040cb5194698d..63cdb3cabcbbe 100644 --- a/_sass/_components.scss +++ b/_sass/_components.scss @@ -77,6 +77,7 @@ nav { margin-bottom: 20px; background-color: $lightBackground; border-radius: 10px; + overflow: hidden; box-shadow: 0 4px 6px $shadowColor; scale: 1; transition: @@ -84,6 +85,10 @@ nav { 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;