diff --git a/layouts/shortcodes/maps.html b/layouts/shortcodes/maps.html
index 89d2726..25b8693 100644
--- a/layouts/shortcodes/maps.html
+++ b/layouts/shortcodes/maps.html
@@ -27,8 +27,7 @@
{{ $lon := .lon }}
{{ $lat := .lat }}
{{ $MapApiUrl := printf "https://maps.geoapify.com/v1/staticmap?style=osm-bright&width=500&height=500¢er=lonlat:%f,%f&zoom=12&marker=lonlat:%f,%f;color:%%23ff0000;size:medium&scaleFactor=2&apiKey=%s" $lon $lat $lon $lat $apiKey }}
-
-
+
{{ with resources.GetRemote $MapApiUrl }}
{{ with resources.Copy $path . }}
@@ -59,4 +58,4 @@
-
+
diff --git a/static/css/maps.css b/static/css/maps.css
deleted file mode 100644
index 58751d0..0000000
--- a/static/css/maps.css
+++ /dev/null
@@ -1,104 +0,0 @@
-
-
- .grid-item {
- margin: 0;
- position: relative;
- }
-
- .grid-item p {
- margin: 0;
- }
-
- /* Adjust the first row to span two columns */
-
-
-.location {
- background-color: var(--alt-bg);
- border-left-color: var(--acc-1);
- border-left-width: 5px;
- border-left-style: solid;
- padding: 15px 15px 15px 10px;
-
-
-}
-/* .location { */
-/* */
-/* */
-/* } */
-/* */
-/* */
-/* */
-.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-txt-grid {
- display: grid;
- grid-template-rows: auto 1fr auto;
- grid-template-columns: 1fr;
- grid-gap: 10px;
- position: relative;
- left: 15px;
-}
-
-.map img {
- display: block;
-}
-
-
-
-@media screen and (max-width: 755px) {
-
- .map {
- display: block;
- }
-
- .map-button {
- position: absolute;
- bottom: 0;
- right: 0;
- }
-
- /* .map img, .map-txt-grid { */
- /* width: 95%; */
- /* display: block; */
- /* margin-left: auto; */
- /* margin-right: auto; */
- /* } */
-
- div.location {
- width: 95%;
- margin-left: auto;
- margin-right: auto;
-
-
- /* padding: 20px; */
- /* margin: 0; */
- }
-
- .map img {
- width: 100%;
- }
-
- .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 */
- }
-
-}
diff --git a/static/css/style.css b/static/css/style.css
index 0faf824..7fe138e 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,5 +1,33 @@
@import url('./colorschemes/gruvbox.css'); /* Include colorscheme */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* For cleanup ================================ */
/* Globals */
html, body {
margin: 0;
@@ -31,7 +59,7 @@ blockquote {
border-left-width: 5px;
border-left-style: solid;
padding: 20px;
- margin: 0;
+ margin: 20px 0;
}
blockquote p {
@@ -222,3 +250,73 @@ a.logo {
}
+.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;
+}
+
+.map img {
+ display: block;
+}
+
+
+@media screen and (max-width: 755px) {
+ .map {
+ display: block;
+ }
+
+ .map-button {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ }
+
+ .map img {
+ 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 */
+ }
+}