From fcd9ae305c002f457c314fb5e82c1a1f022953c7 Mon Sep 17 00:00:00 2001
From: zaaarf <me@zaaarf.foo>
Date: Sun, 24 Dec 2023 19:09:35 +0100
Subject: [PATCH] feat: added configurable colors

---
 sass/_colors.scss      | 62 ------------------------------------------
 sass/_main.scss        | 31 ++++++++++-----------
 sass/style.scss        |  1 -
 templates/head.html    | 18 ++++++++++++
 templates/section.html |  2 +-
 5 files changed, 34 insertions(+), 80 deletions(-)
 delete mode 100644 sass/_colors.scss

diff --git a/sass/_colors.scss b/sass/_colors.scss
deleted file mode 100644
index d6faacd..0000000
--- a/sass/_colors.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-:root,
-:root.light {
-  --bgColor: #EEEEEE;
-  --fgColor: #41474E;
-  --metaColor: var(--orange);
-  --headColor: #;
-  --linkColor: var(--blue);
-  --dimLinkcolor: var(--dimBlue);
-  --hovColor: var(--dimGreen);
-  --bgSelect: var(--yellow);
-  --bgUrl: url(https://i.ibb.co/Qpkrw4V/tile-Light.webp) repeat;
-  /* veqev colors */
-  --red: #D26878;
-  --dimRed: #623039;
-  --orange: #e08f67;
-  --dimOrange: #926048;
-  --yellow: #FFFAE1;
-  --dimYellow: #D5C5A1;
-  --green: #56AFA0;
-  --dimGreen: #22453F;
-  --blue: #5690AF;
-  --dimBlue: #223844;
-  --purple: #9271D6;
-  --dimPurple: #47356C;
-  --grey: #CBCDCD;
-  --dimGrey: #646868;
-  /* ftbsc colors (TODO: come up with variants) */
-  --ftbscGreen: #2E8757;
-  --ftbscOrange: #FF4D17;
-  --ftbscReddish: #BF616A;
-}
-
-:root.dark {
-  --bgColor: #222529;
-  --fgColor: #D6D6D6;
-  --metaColor: var(--ftbscOrange);
-  --headColor: #;
-  --linkColor: var(--yellow);
-  --dimLinkColor: var(--dimYellow);
-  --hovColor: var(--orange);
-  --bgSelect: var(--dimGrey);
-  --bgUrl: url(https://i.ibb.co/LzrFBFJ/tileDark.webp) repeat;
-  /* veqev colors */
-  --red: #CD909B;
-  --dimRed: #684249;
-  --orange: #E2AEA2;
-  --dimOrange: #704941;
-  --yellow: #DBD5BC;
-  --dimYellow: #6F6847;
-  --green: #78B6AD;
-  --dimGreen: #3E615C;
-  --blue: #87C9E5;
-  --dimBlue: #38494F;
-  --purple: #CEA7DE;
-  --dimPurple: #5E406A;
-  --grey: #CBCDCD;
-  --dimGrey: #464949;
-  /* ftbsc colors */
-  --ftbscGreen: #2E8757;
-  --ftbscOrange: #FF4D17;
-  --ftbscReddish: #BF616A;
-}
diff --git a/sass/_main.scss b/sass/_main.scss
index ce69609..3a6e8df 100644
--- a/sass/_main.scss
+++ b/sass/_main.scss
@@ -57,7 +57,7 @@ a {
 	}
 
 	span.postDate {
-		color: var(--dimLinkColor);
+		color: var(--dateLinkColor);
 	}
 }
 
@@ -146,21 +146,20 @@ footer {
 	color: var(--fgColor);
 	fill: var(--fgColor);
 	background-color: transparent;
-}
 
-.icons__background:hover {
-	background-color: transparent;
-	color: var(--metaColor);
+	&__background:hover {
+		color: var(--linkColor);
+	}
 }
 
 .navBar {
 	padding: 1rem 0 0 0;
 	gap: .4rem;
 	flex-wrap: wrap;
-}
 
-.navBar a {
-	float: right;
+	a {
+		float: right;
+	}
 }
 
 .themeButton {
@@ -194,15 +193,15 @@ footer {
 
 .footnote-definition {
 	margin: 0 0 0 2rem;
-}
+	
+	&-label {
+		color: var(--metaColor);
+	}
 
-.footnote-definition-label {
-	color: var(--metaColor);
-}
-
-.footnote-definition p {
-	display: inline;
-	padding: 0 0 0 1rem;
+	p {
+		display: inline;
+		padding: 0 0 0 1rem;
+	}
 }
 
 .footContainer {
diff --git a/sass/style.scss b/sass/style.scss
index 3540ac5..4917618 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -1,4 +1,3 @@
-@import 'colors';
 @import 'main';
 @import 'home';
 @import 'code';
diff --git a/templates/head.html b/templates/head.html
index d715e48..13197ca 100644
--- a/templates/head.html
+++ b/templates/head.html
@@ -95,6 +95,24 @@
 {% endblock feed %}
 {% endif %}
 {% block css %}
+<style>
+:root,
+:root.dark {
+	--bgColor: {% if config.extra.colors.dark.background_color %}{{ config.extra.colors.dark.background_color }}{% else %}#222529{% endif %};
+	--fgColor: {% if config.extra.colors.dark.foreground_color %}{{ config.extra.colors.dark.foreground_color }}{% else %}#D6D6D6{% endif %};
+	--metaColor: {% if config.extra.colors.dark.meta_color %}{{ config.extra.colors.dark.meta_color }}{% else %}#78B6AD{% endif %};
+	--linkColor: {% if config.extra.colors.dark.link_color %}{{ config.extra.colors.dark.link_color }}{% else %}#DBD5BC{% endif %};
+	--dateLinkColor: {% if config.extra.colors.dark.date_link_color %}{{ config.extra.colors.dark.date_link_color }}{% else %}#6F6847{% endif %};
+}
+
+:root.light {
+	--bgColor: {% if config.extra.colors.light.background_color %}{{ config.extra.colors.light.background_color }}{% else %}#EEEEEE{% endif %};
+	--fgColor: {% if config.extra.colors.light.foreground_color %}{{ config.extra.colors.light.foreground_color }}{% else %}#41474E{% endif %};
+	--metaColor: {% if config.extra.colors.light.meta_color %}{{ config.extra.colors.light.meta_color }}{% else %}#D26878{% endif %};
+	--linkColor: {% if config.extra.colors.light.link_color %}{{ config.extra.colors.light.link_color }}{% else %}#5690AF{% endif %};
+	--dateLinkColor: {% if config.extra.colors.light.date_link_color %}{{ config.extra.colors.light.date_link_color }}{% else %}#223844{% endif %};
+}
+</style>
 <link rel="stylesheet" href="{{ get_url(path='style.css', trailing_slash=false) | safe }}"/>
 {% endblock css %}
 <script>
diff --git a/templates/section.html b/templates/section.html
index 68bd359..7ce4a38 100644
--- a/templates/section.html
+++ b/templates/section.html
@@ -14,7 +14,7 @@
 <ul class="titleList">
 {% for page in pages %}
 <li>
-	<a href="{{ page.permalink | safe }}">{{ page.title }}<span class="postDate"> @ {{ page.date }}</span></a>
+	<a href="{{ page.permalink | safe }}">{{ page.title }}{% if config.extra.show_date_paginator and config.extra.show_date_paginator == true %}<span class="postDate"> @ {{ page.date }}</span>{% endif %}</a>
 </li>
 {% endfor %}
 </ul>