Customizable ascent color

apvarun · Jul 18, 2021 · 9f7b99d · 9f7b99d
1 parent 4d785a1
commit 9f7b99d
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>