clean css, again. after i finito map, iwill keep css clean (no promise)

layouts/shortcodes/maps.html

@@ -27,7 +27,7 @@
 	{{ $lon := .lon }}
 	{{ $lat := .lat }}
 	{{ $MapApiUrl := printf "https://maps.geoapify.com/v1/staticmap?style=osm-bright&width=500&height=500&center=lonlat:%f,%f&zoom=12&marker=lonlat:%f,%f;color:%%23ff0000;size:medium&scaleFactor=2&apiKey=%s" $lon $lat $lon $lat $apiKey }}
-<blockquote>
+<blockquote class="location">
 	<div class="map" >
 	{{ with resources.GetRemote $MapApiUrl }}
  		{{ with resources.Copy $path . }}

static/css/style.css

@@ -1,34 +1,8 @@
+/* Include */
 @import url('./colorschemes/gruvbox.css'); /* Include colorscheme */
 
 
-
+/* Global options  */
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/* For cleanup ================================ */ 
-/* Globals  */
 html, body {
   margin: 0;
   padding: 0;
@@ -48,37 +22,23 @@ a{
 
 
 /* Main Body */
+.content { margin: 5em 5% auto 5%; }
 
-.content {
+footer {
-  margin: 5em 5% auto 5%;
+	width: 100%;
+	text-align: center;
+	padding-bottom: 20px;
 }
 
-blockquote {
-	background-color: var(--alt-bg);
-  border-left-color: var(--acc-1);
-  border-left-width: 5px;
-  border-left-style: solid;
-  padding: 20px;
-  margin: 20px 0;
-}
 
-blockquote p {
+/* Header and Navigation Menu */
-	margin: 0;
-}
-	
-/* Navigation Menu */
 .header { 
 	width: 100%;
 	background-color: var(--alt-bg);
 	box-shadow:  inset 0 -20px 20px -20px var(--shadow);
 	position: fixed;
 	top: 0;
-
+	z-index: 100;
-
-}
-
-.hamburger {
-	display: none;
 }
 
 .menu-entries a{
@@ -99,11 +59,15 @@ blockquote p {
 
 .menu li {
 	list-style-type: none;
+	display: inline-block;
 }
 
 .menu-entries {
 	float: right;
 	padding: inherit;
+	position: absolute;
+	top: 0;
+	right: 0;
 }
 
 .menu-btn {
@@ -116,71 +80,55 @@ blockquote p {
 }
 
 
-/* Footer */
-footer {
-	/* position: fixed; */
-
-	width: 100%;
-	text-align: center;
-	padding-bottom: 14px;
-
-}
-
-@media screen and (max-width: 755px) {
 /* Mobile layout - logo now serves as toggle for rest of menu items */
+@media screen and (max-width: 755px) {
 
+	/* disable clicking and clickable cursor indication */
 	.logo {
 		pointer-events: none;
 		text-align: center;
 	}
 
-.menu-icon {
-	cursor: pointer;
- }
-
 	.menu-entries {
 		text-align: center;
 		float: none;
+		position: inherit;
+
+		/* Hide Entries until toggled */
 		height: 0;
 		max-height: 0;
-	transition-property: all;
-	transition-duration: 400ms;
 		overflow: hidden;
-}
 
-a.logo {
+		/* Slide out Animation */
-	display: block;
 		transition: 400ms;
-}
-
-	.menu-btn:checked ~ 
-		.menu li .menu-entries,
-		.menu li .menu-entries a{
-			display: block;
-	}
-
-	.menu-btn:checked ~ 
-	.menu li .menu-entries {
-		height: auto;
-		max-height: 900px;
 		transition-property: all;
-		transition-duration: 400ms;
+	}
 
+	.menu-btn:checked ~ .menu li .menu-entries {
+		/* Reveal Entries */
+		height: auto;
+		max-height: 900px; /* May Need to be change manually for nav lists */
 	}
 
 	.menu-btn:checked ~ .menu .logo, .menu-entries a:hover	 {
+		/* BG Color on logo an hover effect */
 		background-color: var(--acc-1);
 		color: var(--alt-bg);
-	transition: 400ms;
 	}
 
+	.menu li, .menu-entries a{ display: block; }
+	/* TODO Make sure we can combine these 2 blocks */
+
+	a.logo { display: block; transition: 400ms; }
+
+
+	/* Hamburger Menu */
 	.hamburger {
 		display: block;
 		float: right;
 		position: absolute;
 		top: 0;
 		right: 0;
-
 		margin-top: 12px;
 		margin-right: 12px;
 		cursor: pointer;
@@ -199,46 +147,28 @@ a.logo {
   	transform: translate(0, 11px) rotate(45deg);
 	}	
 
-.change .bar2 {
+	.change .bar2 { opacity: 0; }
-	opacity: 0;
-}
 	
 	.change .bar3 {
   	transform: translate(0, -11px) rotate(-45deg);
 		background-color: var(--alt-bg);
-
 	}
 }
-
+/* Wide window - links on the left in a sidebar */	
-@media screen and (min-width: 755px) and (max-width: 1040px) {
-
-	.menu-entries {
-		position: absolute;
-		top: 0;
-		right: 0;
-	}
-
-	.menu li {
-		display: inline-block;
-	}
-}
-
 @media screen and (min-width: 1040px) {
-/* Wide window - links on a left sidebar */	
 	.header {
 		width: 15%;
 		height: 100%;
 		box-shadow: inset -22px 0 20px -20px var(--shadow);
 	}
 
-	.menu a {
-		display: block;
-	}
-
 	.menu-entries{ 
 		float: none;
+		position: inherit;
 	}
 
+	.menu a, .menu li { display: block; }
+
 	.content { 
 		margin: auto 5% auto 20%;
 		padding: 1px 16px;
@@ -249,6 +179,34 @@ a.logo {
 	}
 }
 
+/* Hugo Supported Markdown Styling */
+/* ToDO style md elements that have yet to been styled */
+blockquote {
+  border-left-color: var(--acc-1);
+  border-left-width: 5px;
+  border-left-style: solid;
+	margin: 0;
+}
+
+blockquote blockquote { margin-left: 20px }
+
+blockquote p {
+  padding: 20px;
+	margin-left: 5px;
+}
+
+/* Maps Shortcode */
+blockquote.location {
+	background-color: var(--alt-bg);
+	padding: 20px;
+}
+
+blockquote.location p { padding: inherit; }
+
+
+/* =========================================== Still Needs cleaning  */
+/* Maps shortcode styling */
+/* TODO rename most grid related elements for clarity */
 
 .grid-item {
 	margin: 0;
@@ -282,6 +240,48 @@ a.logo {
   grid-gap: 10px;
 	position: relative;
 	left: 15px;
+
+	z-index: 1;
+}
+
+.map img {
+	display: block;
+}
+
+.grid-item {
+	margin: 0;
+	position: relative;
+ }
+
+.grid-item p {
+	margin: 0;
+}
+	
+.map-button {
+	color: var(--fg);
+	background-color: var(--acc-1);
+	padding: 5px;
+	border: solid 3px var(--acc-1);
+	border-radius: 8px;
+}
+
+.map {
+	display: flex;
+}
+
+.map img {
+	width: 350px;
+	max-height: 350px;
+}
+.map-txt-grid {
+	display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: 1fr;
+  grid-gap: 10px;
+	position: relative;
+	left: 15px;
+
+	z-index: 1;
 }
 
 .map img {