{{ with resources.GetRemote $MapApiUrl }}
{{ with resources.Copy $path . }}
diff --git a/static/css/style.css b/static/css/style.css
index 7fe138e..294a98e 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,34 +1,8 @@
+/* Include */
@import url('./colorschemes/gruvbox.css'); /* Include colorscheme */
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/* For cleanup ================================ */
-/* Globals */
+/* Global options */
html, body {
margin: 0;
padding: 0;
@@ -48,37 +22,23 @@ a{
/* Main Body */
+.content { margin: 5em 5% auto 5%; }
-.content {
- margin: 5em 5% auto 5%;
+footer {
+ 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 {
- margin: 0;
-}
-
-/* Navigation Menu */
+/* Header and Navigation Menu */
.header {
width: 100%;
background-color: var(--alt-bg);
box-shadow: inset 0 -20px 20px -20px var(--shadow);
position: fixed;
top: 0;
-
-
-}
-
-.hamburger {
- display: none;
+ z-index: 100;
}
.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 {
- 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;
+ /* disable clicking and clickable cursor indication */
+ .logo {
+ pointer-events: none;
+ text-align: center;
}
- .menu-btn:checked ~
- .menu li .menu-entries {
- height: auto;
- max-height: 900px;
- transition-property: all;
- transition-duration: 400ms;
+ .menu-entries {
+ text-align: center;
+ float: none;
+ position: inherit;
+ /* 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);
- color: var(--alt-bg);
- transition: 400ms;
+ /* BG Color on logo an hover effect */
+ background-color: var(--acc-1);
+ color: var(--alt-bg);
}
-.hamburger {
- display: block;
- float: right;
- position: absolute;
- top: 0;
- right: 0;
+ .menu li, .menu-entries a{ display: block; }
+ /* TODO Make sure we can combine these 2 blocks */
- margin-top: 12px;
- margin-right: 12px;
- cursor: pointer;
-}
+ a.logo { display: block; transition: 400ms; }
-.bar1, .bar2, .bar3 {
- 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);
-
-}
-}
-
-@media screen and (min-width: 755px) and (max-width: 1040px) {
-
- .menu-entries {
+ /* Hamburger Menu */
+ .hamburger {
+ display: block;
+ float: right;
position: absolute;
top: 0;
right: 0;
+ margin-top: 12px;
+ margin-right: 12px;
+ cursor: pointer;
}
- .menu li {
- display: inline-block;
+ .bar1, .bar2, .bar3 {
+ 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 */
}