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,129 +80,95 @@ 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) {
 
-.logo {
+	/* disable clicking and clickable cursor indication */
-	pointer-events: none;
+	.logo {
-	text-align: center;
+		pointer-events: none;
-}
+		text-align: center;
-
-.menu-icon {
-	cursor: pointer;
- }
-
-.menu-entries {
-	text-align: center;
-	float: none;
-	height: 0;
-	max-height: 0;
-	transition-property: all;
-	transition-duration: 400ms;
-	overflow: hidden;
-}
-	
-a.logo {
-	display: block;
-	transition: 400ms;
-}
-
-	.menu-btn:checked ~ 
-		.menu li .menu-entries,
-		.menu li .menu-entries a{
-			display: block;
 	}
 
-	.menu-btn:checked ~ 
+	.menu-entries {
-	.menu li .menu-entries {
+		text-align: center;
-		height: auto;
+		float: none;
-		max-height: 900px;
+		position: inherit;
-		transition-property: all;
-		transition-duration: 400ms;
 
+		/* Hide Entries until toggled */
+		height: 0;
+		max-height: 0;
+		overflow: hidden;
+
+		/* Slide out Animation */
+		transition: 400ms;
+		transition-property: all;
+	}
+
+	.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	 {
-	background-color: var(--acc-1);
+		/* BG Color on logo an hover effect */
-	color: var(--alt-bg);
+		background-color: var(--acc-1);
-	transition: 400ms;
+		color: var(--alt-bg);
 	}
 
-.hamburger {
+	.menu li, .menu-entries a{ display: block; }
-  display: block;
+	/* TODO Make sure we can combine these 2 blocks */
-	float: right;
-	position: absolute;
-	top: 0;
-	right: 0;
 
-	margin-top: 12px;
+	a.logo { display: block; transition: 400ms; }
-	margin-right: 12px;
-  cursor: pointer;
-}
 
-.bar1, .bar2, .bar3 {
-  width: 35px;
-  height: 5px;
-	background-color: var(--acc-1);
-  margin: 6px 0;
-  transition: 0.4s;
-}
 
-.change .bar1 {
+	/* Hamburger Menu */
-	background-color: var(--alt-bg);
+	.hamburger {
-  transform: translate(0, 11px) rotate(45deg);
+		display: block;
-}
+		float: right;
-
-.change .bar2 {
-	opacity: 0;
-}
-
-.change .bar3 {
-  transform: translate(0, -11px) rotate(-45deg);
-	background-color: var(--alt-bg);
-
-}
-}
-
-@media screen and (min-width: 755px) and (max-width: 1040px) {
-
-	.menu-entries {
 		position: absolute;
 		top: 0;
 		right: 0;
+		margin-top: 12px;
+		margin-right: 12px;
+		cursor: pointer;
 	}
 
-	.menu li {
+	.bar1, .bar2, .bar3 {
-		display: inline-block;
+  	width: 35px;
+  	height: 5px;
+		background-color: var(--acc-1);
+  	margin: 6px 0;
+  	transition: 0.4s;
+	}
+
+	.change .bar1 {
+		background-color: var(--alt-bg);
+  	transform: translate(0, 11px) rotate(45deg);
+	}	
+
+	.change .bar2 { 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: 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 {
@@ -293,7 +293,7 @@ a.logo {
 	.map {
 		display: block;
 	}
-
+	
 	.map-button {
 		position: absolute;
 		bottom: 0;
@@ -304,18 +304,18 @@ a.logo {
 		width: 100%;
 		max-height: inherit;
 	}
-
+	
 	.map-txt-grid {
 		display: grid;
 		grid-template-rows: auto auto; /* Two rows, first row adjusts to content, second row adjusts to content */
 		grid-template-columns: 1fr 1fr; /* Two columns for the entire grid */
 	}
-
+	
 	.map-txt-grid {
 		margin-top: 10px;
 		left: 0;
 	}
-
+	
 	.grid-item:first-child {
 		grid-column: span 2; /* Span two columns */
 	}