From 9f7b99d4fbd90b309430c35aad99b99365ddc007 Mon Sep 17 00:00:00 2001
From: Varun A P <varunlakshmananap@gmail.com>
Date: Sun, 18 Jul 2021 09:57:35 +0200
Subject: [PATCH] Customizable ascent color

---
 assets/css/tailwind.config.js | 2 ++
 exampleSite/config.toml       | 5 +++++
 layouts/index.html            | 2 +-
 layouts/partials/intro.html   | 2 +-
 layouts/partials/social.html  | 2 +-
 5 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/assets/css/tailwind.config.js b/assets/css/tailwind.config.js
index 412191df..d330d641 100644
--- a/assets/css/tailwind.config.js
+++ b/assets/css/tailwind.config.js
@@ -7,9 +7,11 @@ module.exports = {
       themeDir + "layouts/**/*.html",
       themeDir + "content/**/*.html",
       "layouts/**/*.html",
+      "config.toml",
       "content/**/*.html",
       "assets/js/search.js",
       "exampleSite/layouts/**/*.html",
+      "exampleSite/config.toml",
       "exampleSite/content/**/*.html",
     ],
   },
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 46d7a4a0..6fd3b6ab 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -17,6 +17,11 @@ title = "Blist Theme"
   copyright = "Copyright © 2021 - Katheryn Fox · All rights reserved"
   favicon = "favicon.svg"
 
+  # Color for the intro details and social links block, not applicable for dark mode
+  # Supported values: Any color from TailwindCSS default colors
+  # Reference: https://tailwindcss.com/docs/customizing-colors
+  ascentColor = "bg-blue-100"
+
 [params.homepage]
   title = "Hey! I'm Katheryn Fox"
   description = "26 y/o junior developer who enjoys social card games, blogging and painting"
diff --git a/layouts/index.html b/layouts/index.html
index a574319b..1704c646 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -8,7 +8,7 @@
 
   {{ if gt (len (where .Site.RegularPages.ByDate.Reverse "Type" "blog")) 6 }}
   <div class="text-center mb-8">
-    <a class="px-8 py-3 rounded transition-colors bg-pink-50 text-gray-500 hover:text-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:text-white" href="/blog">
+    <a class="px-8 py-3 rounded transition-colors {{ .Site.Params.ascentColor | default "bg-pink-50" }} text-gray-500 hover:text-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:text-white" href="/blog">
       More posts
     </a>
   </div>
diff --git a/layouts/partials/intro.html b/layouts/partials/intro.html
index 87efbb2b..037882a7 100644
--- a/layouts/partials/intro.html
+++ b/layouts/partials/intro.html
@@ -1,4 +1,4 @@
-<section class="bg-pink-50 dark:bg-gray-900">
+<section class="{{ .Site.Params.ascentColor | default "bg-pink-50" }} dark:bg-gray-900">
   <div class="container max-w-screen-lg mx-auto px-6 py-12 grid md:grid-cols-2 gap-4 lg:gap-16 items-center">
     <div>
       <h1 class="text-4xl font-bold mb-4">{{ .Site.Params.homepage.title }}</h1>
diff --git a/layouts/partials/social.html b/layouts/partials/social.html
index 219bedad..d98f2e86 100644
--- a/layouts/partials/social.html
+++ b/layouts/partials/social.html
@@ -1,4 +1,4 @@
-<div class="bg-pink-50 dark:bg-gray-900">
+<div class="{{ .Site.Params.ascentColor | default "bg-pink-50" }} dark:bg-gray-900">
   <div class="container px-6 py-12 mx-auto max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
     <div>
       <div class="text-2xl font-bold mb-2">Follow me</div>