diff --git a/layouts/_default/documents.html b/layouts/_default/documents.html
index b04e234..405a9af 100644
--- a/layouts/_default/documents.html
+++ b/layouts/_default/documents.html
@@ -16,7 +16,7 @@
{{- template "listDir" (dict "dir" (printf "%s/%s" $dir .Name)) -}}
{{- else -}}
{{- with resources.Get (printf "%s/%s" $dir .Name) -}}
- {{ title (replaceRE `[_-]` " " (path.BaseName .Name)) }}
+ {{ title (replaceRE `[_-]` " " (path.BaseName .Name)) }}
{{- end -}}
{{- end -}}
diff --git a/static/css/colorschemes/colors.css b/static/css/colorschemes/colors.css
index 63b12d6..505a156 100644
--- a/static/css/colorschemes/colors.css
+++ b/static/css/colorschemes/colors.css
@@ -1,18 +1,51 @@
/* Mostly based off of gruvbox */
:root {
- --bg: #f9f5d7;
- --fg: #3c3836;
- --alt-bg: #d5c4a1;
- --acc-1: #076678;
- --shadow: #504945;
+ --col-1: #DEE4F7;
+
+
+
+/* Color Sheme linking */
+ --body-bg: var(--col-1);
+ --body-fg: var(--light-0);
+
+ --link-fg: var();
+
+ --header-bg: var(--col-2);
+ --header-shadow: var(--body-bg);
+
+
+
+ --header-shadow-hov: var();
+
+ --hamburger-fg: var(--light-0);
+ --hamburger-fg-checked: var(--col-acc);
+
+ --table-bg: var(--col-2);
+ --table-bg-alt: var(--col-3);
+ --table-border: var();
+
+ --blockquote-border: var(--col-0);
+
+ --maps-bg: #2C3963;
+ --maps-border: var(--acc);
+
+ --button-bg: var(--acc);
+ --button-fg: var();
+
+
+
+
+
+
+
+ --langs-bg: var(--header-bg);
+ --lang-btn-bg: var(--header-bg) ;
+ --langs-bg-hov: var(--header-bg-hov);
+
+
- --table: #fbf1c7;
- --table-alt: #d5c4a1;
- --lang-btn-bg: black;
- --langs-bg: black;
- --langs-bg-hov: gray;
--cal-bg: darkslategray;
--cal-fg: white;
@@ -34,16 +67,27 @@
--cal-event-fg: white;
--cal-event-bg: var(--acc-1) ;
+
+
+/* Light Mode Colors */
+ --bg: #f9f5d7;
+ --fg: #3c3836;
+ --alt-bg: #d5c4a1;
+ --acc-1: #076678;
+ --shadow: #504945;
}
@media (prefers-color-scheme: dark) {
:root {
+/* Dark Mode Colors */
--bg: #1d2021;
--fg: #ebdbb2;
--alt-bg: #504945;
--acc-1: #83a598;
--shadow: #1d2021;
+/* Dark Mode Colorsheme Link Overides */
+
--table: #282828;
--table-alt: #504945;
diff --git a/static/css/style.css b/static/css/style.css
index 0f9739b..a641938 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -11,8 +11,8 @@ html, body {
body{
/* font-size: 100%; */
line-height: 1.5;
- background-color: var(--bg);
- color: var(--fg);
+ background-color: var(--body-bg);
+ color: var(--body-fg);
display: flex;
flex-direction: column;
min-height: 100vh;
@@ -20,7 +20,7 @@ body{
a{
text-decoration: none;
- color: var(--acc-1);
+ color: var(--link-fg);
}
@@ -47,8 +47,8 @@ footer.fixed {
/* Header and Navigation Menu */
.header {
width: 100%;
- background-color: var(--alt-bg);
- box-shadow: inset 0 -20px 20px -20px var(--shadow);
+ background-color: var(--header-bg);
+ box-shadow: inset 0 -20px 20px -20px var(--header-shadow);
position: fixed;
top: 0;
z-index: 100;
@@ -59,9 +59,9 @@ footer.fixed {
}
.menu-entries a:hover{
- background-color: var(--acc-1);
- color: var(--alt-bg);
- box-shadow: inset 0 -20px 20px -20px var(--shadow);
+ background-color: var(--header-bg-hov);
+ color: var(--header-fg-hov);
+ box-shadow: inset 0 -20px 20px -20px var(--header-shadow-hov);
}
@@ -127,8 +127,8 @@ a.home-link { display: none; }
.menu-btn:checked ~ .menu .logo, .menu-entries a:hover {
/* BG Color on logo an hover effect */
- background-color: var(--acc-1);
- color: var(--alt-bg);
+ background-color: var(--header-bg-hov);
+ color: var(--header-fg-hov);
}
.menu li, .menu-entries a{ display: block; }
@@ -152,13 +152,13 @@ a.home-link { display: none; }
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
- background-color: var(--acc-1);
+ background-color: var(--hamburger-fg);
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
- background-color: var(--alt-bg);
+ background-color: var(--hamburger-fg-checked);
transform: translate(0, 11px) rotate(45deg);
}
@@ -166,7 +166,7 @@ a.home-link { display: none; }
.change .bar3 {
transform: translate(0, -11px) rotate(-45deg);
- background-color: var(--alt-bg);
+ background-color: var(--hamburger-fg-checked);
}
}
/* Wide window - links on the left in a sidebar */
@@ -174,7 +174,7 @@ a.home-link { display: none; }
.header {
width: 15%;
height: 100%;
- box-shadow: inset -22px 0 20px -20px var(--shadow);
+ box-shadow: inset -22px 0 20px -20px var(--header-shadow);
}
.menu-entries{
@@ -194,7 +194,7 @@ a.home-link { display: none; }
}
.menu-entries a:hover{
- box-shadow: inset -22px 0 20px -20px var(--shadow);
+ box-shadow: inset -22px 0 20px -20px var(--header-shadow-hov);
}
footer {
@@ -211,23 +211,23 @@ a.home-link { display: none; }
table { width: 100%; }
th, td, table {
- border: 1px solid var(--bg);
+ border: 1px solid var(--table-border);
border-collapse: collapse;
padding: 6px 13px;
}
-table thead tr { background-color: var(--table); }
+table thead tr { background-color: var(--table-bg); }
-table tr { background-color: var(--table-alt); }
+table tr { background-color: var(--table-bg-alt); }
-table tr:nth-child(2n) { background-color: var(--table); }
+table tr:nth-child(2n) { background-color: var(--table-bg); }
/* Markdown Blockquote styles */
blockquote {
- border-left-color: var(--alt-bg);
+ border-left-color: var(--blockquote-border);
border-left-width: 5px;
border-left-style: solid;
margin: 20px 0;
@@ -238,8 +238,8 @@ blockquote blockquote { margin-left: 20px }
/* Maps Shortcode */
blockquote.location {
- background-color: var(--alt-bg);
- border-left-color: var(--acc-1);
+ background-color: var(--maps-bg);
+ border-left-color: var(--maps-border);
padding: 20px;
}
@@ -264,10 +264,10 @@ blockquote.location p { padding: inherit; }
}
.button {
- color: var(--fg);
- background-color: var(--acc-1);
+ color: var(--button-fg);
+ background-color: var(--button-bg);
padding: 5px;
- border: solid 3px var(--acc-1);
+ border: solid 3px var(--button-bg);
border-radius: 8px;
margin-top: 10px;
margin-bottom: 10px;
@@ -365,7 +365,7 @@ blockquote.location p { padding: inherit; }
}
.lang-switch a:hover {
- background-color: gray;
+ background-color: var(--langs-bg-hov);
}
@@ -399,6 +399,10 @@ blockquote.location p { padding: inherit; }
max-height: 100px;
}
+.lang-btn:checked ~ .lang-switch {
+ background-color: var(--langs-bg-hov);
+}
+
@media screen and (min-width: 1040px) {
.lang-switch {
width: 100%;