From b50c0b64ed6354570a9f8ab6195f5d4b0b4d150f Mon Sep 17 00:00:00 2001 From: Jakub Date: Mon, 5 Feb 2024 06:39:47 -0500 Subject: [PATCH] added a map shortcode --- layouts/shortcodes/maps.html | 34 +++++++ static/css/maps.css | 174 +++++++++++++++++++++++++++++++++++ static/css/style.css | 25 ++--- 3 files changed, 214 insertions(+), 19 deletions(-) create mode 100644 layouts/shortcodes/maps.html create mode 100644 static/css/maps.css diff --git a/layouts/shortcodes/maps.html b/layouts/shortcodes/maps.html new file mode 100644 index 0000000..f1bd286 --- /dev/null +++ b/layouts/shortcodes/maps.html @@ -0,0 +1,34 @@ + + + + + + +
+ +
+{{ $apiKey := .Site.Params.apiKey }} +{{ $label := .Get "label" }} +{{ $adr := .Get "address" }} +{{ $adrURL := urlquery $adr }} +{{ $LLapiURL := printf "https://api.geoapify.com/v1/geocode/search?text=%s&format=json&apiKey=%s" $adrURL $apiKey }} + +{{ $data := getJSON $LLapiURL }} +{{ with index $data.results 0 }} + {{ $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 }} + + +
+

{{ $label }}

+

{{ .address_line1 }}
{{ replaceRE `, United States of America$` "" .address_line2 }}

+{{end}} +
+
+ See on Google Maps +
+
+
+
+
diff --git a/static/css/maps.css b/static/css/maps.css new file mode 100644 index 0000000..e56dd4a --- /dev/null +++ b/static/css/maps.css @@ -0,0 +1,174 @@ +.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 */ + } + + .grid-item { + margin: 0; + position: relative; + } + + .grid-item p { + margin: 0; + } + + /* Adjust the first row to span two columns */ + .grid-item:first-child { + grid-column: span 2; /* Span two columns */ + } + + + +/* .location { */ +/* */ +/* */ +/* } */ +/* */ +/* */ +/* */ +.map-button { + color: var(--fg); + background-color: var(--acc-1); + padding: 5px; + border: solid 3px var(--acc-1); + border-radius: 8px; +} + +/* */ +/* */ +@media screen and (max-width: 755px) { + .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; + + /* display: block; */ + background-color: var(--alt-bg); + border-left-color: var(--acc-1); + border-left-width: 5px; + border-left-style: solid; + padding: 15px 15px 15px 10px; + /* padding: 20px; */ + /* margin: 0; */ + } + + .map img { + width: 100%; + } + + .map-txt-grid { + margin-top: 10px; + } +} + +/* .map span.map-txt { margin-top: 5px; } */ +/* */ +/* p.label, p.adress { margin: 0; } */ +/* */ +/* p.adress { width: 50%;} */ +/* */ +/* /* span.map-txt a.map-button { */ */ +/* /* float: right; */ */ +/* /* bottom: 0; */ */ +/* /* right: 0; */ */ +/* /* } */ */ +/* } */ + + + + + + + + + + + + + +/* .map { */ +/* max-width: 100%; */ +/* width: 50rem; */ +/* height: 50rem; */ +/* background: url(/img/marker.svg) center calc(50% - 1rem) / auto 2rem no-repeat, url(/img/map.jpg) center center / cover no-repeat; */ +/* position: relative; */ +/* display: block; */ +/* } */ + +/* .map > div { */ +/* position: absolute; */ +/* top: 50%; */ +/* width: 100%; */ +/* text-align: center; */ +/* color: #b31412; */ +/* font-weight: 400; */ +/* line-height: 1.2; */ +/* } */ +/* */ +/* .map > div.button.large span { */ +/* color: #1a73e8; */ +/* font-size: 0.65rem; */ +/* } */ +/* */ +/* .map > div.button.large { */ +/* color: black; */ +/* text-align: left; */ +/* padding: 0.4rem 0.6rem; */ +/* height: auto; */ +/* top: 0.5rem; */ +/* bottom: auto; */ +/* width: 13rem; */ +/* left: 0.5rem; */ +/* right: auto; */ +/* background: white; */ +/* } */ +/* */ +/* .map a { */ +/* color: white; */ +/* text-decoration: none; */ +/* } */ +/* */ +/* .map body { */ +/* font-family: 'Roboto', sans-serif; */ +/* line-height: 1.6; */ +/* color: #333; */ +/* background: white; */ +/* font-weight: 300; */ +/* } */ +/* */ +/* .map > div.button { */ +/* top: auto; */ +/* bottom: 1.5rem; */ +/* width: 2rem; */ +/* height: 2rem; */ +/* right: 0.5rem; */ +/* background: white url(/img/open_in_new_FILL0_wght400_GRAD0_opsz48.svg) center center / 88% auto no-repeat; */ +/* box-shadow: 0px 0px 0.25rem rgb(0 0 0 / 20%); */ +/* } */ +/* */ +/* .map > div.footer { */ +/* background: rgba(255,255,255,0.75); */ +/* line-height: 1.85; */ +/* color: #333; */ +/* font-weight: 400; */ +/* top: auto; */ +/* bottom: 0; */ +/* left: 0; */ +/* font-size: 0.55rem; */ +/* padding: 0 0.25rem; */ +/* text-align: left; */ +/* } */ diff --git a/static/css/style.css b/static/css/style.css index b1aad36..0faf824 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -103,6 +103,7 @@ footer { .logo { pointer-events: none; + text-align: center; } .menu-icon { @@ -133,7 +134,7 @@ a.logo { .menu-btn:checked ~ .menu li .menu-entries { height: auto; - max-height: 200px; + max-height: 900px; transition-property: all; transition-duration: 400ms; @@ -145,12 +146,6 @@ a.logo { transition: 400ms; } - - - - - - .hamburger { display: block; float: right; @@ -185,18 +180,6 @@ a.logo { background-color: var(--alt-bg); } - - - - - - - - - - - - } @media screen and (min-width: 755px) and (max-width: 1040px) { @@ -206,6 +189,10 @@ a.logo { top: 0; right: 0; } + + .menu li { + display: inline-block; + } } @media screen and (min-width: 1040px) {