Merge pull request #180 from CeduDev/master

Add support for customizable link text color

exampleSite/config.yaml

@@ -89,6 +89,7 @@ params:
   # color:
   #   textColor: "#343a40"
   #   secondaryTextColor: "#6c757d"
+  #   textLinkColor: "#007bff"
   #   backgroundColor: "#eaedf0"
   #   secondaryBackgroundColor: "#64ffda1a"
   #   primaryColor: "#007bff"
@@ -97,6 +98,7 @@ params:
   #   darkmode:
   #     textColor: "#e4e6eb"
   #     secondaryTextColor: "#b0b3b8"
+  #     textLinkColor: "#ffffff"
   #     backgroundColor: "#18191a"
   #     secondaryBackgroundColor: "#212529"
   #     primaryColor: "#ffffff"

layouts/partials/head.html

@@ -44,6 +44,7 @@
     :root {
         --text-color: {{ .Site.Params.color.textColor | default "#343a40" }};
         --text-secondary-color: {{ .Site.Params.color.secondaryTextColor | default "#6c757d" }};
+        --text-link-color: {{ .Site.Params.color.textLinkColor | default (.Site.Params.color.primaryColor | default "#007bff") }};
         --background-color: {{ .Site.Params.color.backgroundColor | default "#eaedf0" }};
         --secondary-background-color: {{ .Site.Params.color.secondaryBackgroundColor | default "#64ffda1a" }};
         --primary-color: {{ .Site.Params.color.primaryColor | default "#007bff" }};
@@ -52,6 +53,7 @@
         /* dark mode colors */
         --text-color-dark: {{ .Site.Params.color.darkmode.textColor | default "#e4e6eb" }};
         --text-secondary-color-dark: {{ .Site.Params.color.darkmode.secondaryTextColor | default "#b0b3b8" }};
+        --text-link-color-dark: {{ .Site.Params.color.darkmode.textLinkColor | default (.Site.Params.color.darkmode.primaryColor | default "#ffffff") }};
         --background-color-dark: {{ .Site.Params.color.darkmode.backgroundColor | default "#18191a" }};
         --secondary-background-color-dark: {{ .Site.Params.color.darkmode.secondaryBackgroundColor | default "#212529" }};
         --primary-color-dark: {{ .Site.Params.color.darkmode.primaryColor | default "#ffffff" }};

static/css/about.css

@@ -27,7 +27,7 @@
 #single .page-content a {
     display: inline-block;
     text-decoration: none;
-    color: var(--primary-color) !important;
+    color: var(--text-link-color) !important;
 }
 
 #single .page-content a::after {

static/css/footer.css

@@ -4,7 +4,7 @@ footer a h5 {
 
 footer a {
   text-decoration: none;
-  color: var(--text-secondary-color) !important;
+  color: var(--text-link-color) !important;
 }
 
 footer a:hover {
@@ -35,7 +35,7 @@ footer .card-footer {
 }
 
 footer .card-footer a {
-    color: var(--text-secondary-color) !important;
+    color: var(--text-link-color) !important;
     border-color: var(--primary-color) !important;
     transition: none;
     background-color: var(--background-color) !important;

static/css/index.css

@@ -175,7 +175,7 @@ header .navbar.animate {
 #hero .hero-content > a {
     display: inline-block;
     text-decoration: none;
-    color: var(--primary-color) !important;
+    color: var(--text-link-color) !important;
 }
 
 #hero .hero-content > a::after {
@@ -243,7 +243,7 @@ header .navbar.animate {
 #about a {
     display: inline-block;
     text-decoration: none;
-    color: var(--primary-color) !important;
+    color: var(--text-link-color) !important;
 }
 
 #about a::after {
@@ -322,7 +322,7 @@ header .navbar.animate {
     opacity: 0.9;
     display: inline-block;
     text-decoration: none;
-    color: var(--primary-color) !important;
+    color: var(--text-link-color) !important;
 }
 
 #experience a::after {
@@ -432,7 +432,7 @@ header .navbar.animate {
 }
 
 #education .card .card-body .education-content a {
-    color: var(--primary-color) !important;
+    color: var(--text-link-color) !important;
     text-decoration: none;
     opacity: 0.9;
 }
@@ -440,7 +440,7 @@ header .navbar.animate {
 #education .card .card-body > a h6 {
     display: inline-block;
     text-decoration: none;
-    color: var(--primary-color) !important;
+    color: var(--text-link-color) !important;
 }
 
 #education .card .card-body > a h6::after {

static/css/projects.css

@@ -6,7 +6,7 @@
 
 #projects a {
     text-decoration: none;
-    color: var(--text-color) !important;
+    color: var(--text-link-color) !important;
 }
 
 #projects .badge {

static/css/single.css

@@ -33,7 +33,7 @@
 #single .page-content a {
     display: inline-block;
     text-decoration: none;
-    color: var(--primary-color) !important;
+    color: var(--text-link-color) !important;
 }
 
 #single .page-content a::after {
@@ -52,7 +52,7 @@
 }
 
 #single .page-content h1, #single .page-content h2, #single .page-content h3, #single .page-content h4, #single .page-content h5, #single .page-content h6 {
-    color: var(--primary-color) !important;
+    color: var(--text-link-color) !important;
     margin-bottom: 0.7em;
     opacity: 0.9;
 }
@@ -188,7 +188,7 @@
     border-radius: 10px;
     background-color: var(--background-color);
     text-decoration: none;
-    color: var(--text-color);
+    color: var(--text-link-color) !important;
 }
 
 #single aside.tags ul.tags-ul li {
@@ -223,7 +223,7 @@
 #single aside.toc .toc-content ol li a, #single aside.toc .toc-content ul li a {
     font-size: 16px;
     text-decoration: none;
-    color: var(--text-color);
+    color: var(--text-link-color) !important;
     opacity: 0.9;
 }
 
@@ -261,7 +261,7 @@
 #single aside.social .social-content ul li a {
     border: 1px solid var(--primary-color);
     padding: .7rem;
-    color: var(--text-color);
+    color: var(--text-link-color) !important;
     border-radius: 10px;
     overflow: hidden;
 }
@@ -273,7 +273,7 @@
 
 #single aside.social .social-content ul li:hover a {
     opacity: .8;
-    color: var(--primary-color);
+    color: var(--text-link-color) !important;
 }
 
 /* Top scroll */

static/css/theme.css

@@ -14,6 +14,7 @@
     --secondary-background-color: var(--secondary-background-color-dark) !important;
     --text-color: var(--text-color-dark) !important;
     --text-secondary-color: var(--text-secondary-color-dark) !important;
+    --text-link-color: var(--text-link-color-dark) !important;
     --primary-color: var(--primary-color-dark);
     --secondary-color: var(--secondary-color-dark);
 }