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 */ + } +}