34mdh/hugo-theme
2
0
Fork 0
forked from jakub/jakubb-hugo
Code Pull Requests Activity

commit

Browse Source
This commit is contained in:
worktop 2024-02-06 16:02:29 -05:00
parent dcc0dd02b4
commit 37e021db1c
3 changed files with 101 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
layouts/shortcodes/maps.html
View File

@ -27,8 +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 }}
<div class="location" >
<link rel="stylesheet" href="{{ "/css/maps.css" | relURL }}" />
<blockquote>
<div class="map" >
{{ with resources.GetRemote $MapApiUrl }}
{{ with resources.Copy $path . }}
@ -59,4 +58,4 @@
</div>
</div>
</div>
</div>
</blockquote>

104
static/css/maps.css
View File

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

100
static/css/style.css
View File

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