From d831a55d1264909882b604c5fbbf7a265cee4e22 Mon Sep 17 00:00:00 2001
From: blend <151626101+blendtwenty@users.noreply.github.com>
Date: Mon, 5 Feb 2024 19:43:53 +1100
Subject: [PATCH] remove max height/width image styling; add hyperlink to intro
 figure;

---
 content/trailnap/_intro.md                    | 10 +++--
 .../layouts/partials/head.trailmap.html       | 38 ++++++++++++++++---
 2 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/content/trailnap/_intro.md b/content/trailnap/_intro.md
index cd6de90b..884d6ecc 100644
--- a/content/trailnap/_intro.md
+++ b/content/trailnap/_intro.md
@@ -1,7 +1,7 @@
 ---
 ---
 
-<img src="/doge-placehodlr-bright.webp"/>
+<img class="space-below center-div" src="/doge-placehodlr-bright.webp"/>
 
 # Introduction
 
@@ -20,9 +20,11 @@ of development deficit that needed to be addressed before we would be able to
 begin developing the features we beleive will establish Dogecoin as a viable 
 global currency for all humanity.
 
-<figure>
-<img src="/libdogecoin-ecosystem.png"/>
-<figcaption align="center"><b>2022 Trailmap developer utility plan</b></figcaption>
+<figure class="space-around center-div">
+	<a href="/libdogecoin-ecosystem.png" target="_blank">
+		<img src="/libdogecoin-ecosystem.png"/>
+		<figcaption align="center"><b>2022 Trailmap developer utility plan</b></figcaption>
+	</a>
 </figure>
 
 These projects: [libdogecoin](https://lib.dogecoin.org): a standard ANSI C library
diff --git a/themes/hello-friend-ng/layouts/partials/head.trailmap.html b/themes/hello-friend-ng/layouts/partials/head.trailmap.html
index 99b7a70f..cb20c3f9 100644
--- a/themes/hello-friend-ng/layouts/partials/head.trailmap.html
+++ b/themes/hello-friend-ng/layouts/partials/head.trailmap.html
@@ -18,6 +18,11 @@
 	    text-decoration: none;
 	}
 
+	.tm figure a {
+		color: unset;
+		text-decoration: none;
+	}
+
 	.tm a:hover {
 	    text-decoration: underline;
 	}
@@ -137,16 +142,39 @@
 	}
 
 	.tm header img, .tm footer img {
-	    max-width: 300px;
-	    max-height: 300px;
 	    background: #f1f1f2;
-	    margin: 0em auto 4em auto;
 	    @media only screen and (min-width: 980px) {
-	        margin: 2em auto 5em auto;
-	        max-width: 900px;
+
 	    }
 	}
 
+	.tm .space-around {
+		margin-top: 1.5em;
+		margin-bottom: 2em;
+		@media only screen and (min-width: 980px) {
+			margin-top: 3em;
+			margin-bottom: 4em;
+		}
+	}
+
+	.tm .space-below {
+		margin-top: 0em;
+		margin-bottom: 3em;
+		@media only screen and (min-width: 980px) {
+			margin-top: 0em;
+			margin-bottom: 4em;
+		}
+	}
+
+	.tm .center-div {
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.tm .center {
+		text-align: center;
+	}
+
 	.tm .card {
 	    margin: 20px 0px 50px 0px;
 	    width: auto;