From 5c2a9a8e95d684d95c38c88735d7ea2c2ad03c6f Mon Sep 17 00:00:00 2001
From: Hideki Shimizu <shimiz@cns.s.u-tokyo.ac.jp>
Date: Wed, 4 Sep 2019 00:41:57 +0900
Subject: [PATCH] [add] categories_color in config.html and tag_button's loop
 in postcard.html #69

---
 layouts/_default/terms.html       |  1 -
 layouts/shortcodes/postcards.html | 45 ++++++++++++++++++++++++++-----
 static/css/postcard.css           | 39 +++++++++++++++++++--------
 3 files changed, 66 insertions(+), 19 deletions(-)

diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
index a515b7d..334d238 100644
--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@@ -11,4 +11,3 @@
   {{ end }}
 </ul>
 {{ end }}
-
diff --git a/layouts/shortcodes/postcards.html b/layouts/shortcodes/postcards.html
index 8413da8..d445c04 100644
--- a/layouts/shortcodes/postcards.html
+++ b/layouts/shortcodes/postcards.html
@@ -1,5 +1,6 @@
 <!-- For future posts -->
 <h3>Upcoming</h3>
+<link rel="stylesheet" href="{{ .Site.BaseURL }}css/postcard.css">
 {{ range ($.Page.CurrentSection.Pages.ByParam "endEventDate") }}
   {{ $FormattedNow := (now.AddDate 0 0 -1) }}
   {{ if le $FormattedNow .Params.eventEndDate }}
@@ -10,9 +11,19 @@
           {{ $numtags := len .Params.tags }}
 	  {{ if gt $numtags 0 }}
       <div class="tags">
-	    {{ range .Params.tags }}
-      <a href="{{ $.Site.BaseURL | absLangURL }}/tags/{{ lower . }}" class="tagbutton {{ . }}">{{ . }}</a>
-	    {{ end }}
+      {{ range .Params.tags }}
+        {{ $category_name := . }}
+        {{ $categories_color := $.Site.Params.categories_color }}
+        {{ if in $categories_color $category_name }} {{/* if tag_name is defined in categories_color */}}
+          {{ range $i, $tag_name := $categories_color }}
+            {{ if eq $tag_name $category_name }} 
+              <a href="{{ $.Site.BaseURL | absLangURL }}/tags/{{ lower $category_name }}/" class="tagbutton {{ index $categories_color (add $i 1) }}">{{ $category_name }}</a>
+            {{ end }}
+          {{ end }}
+          {{ else }}
+            <a href="{{ $.Site.BaseURL | absLangURL }}/tags/{{ lower $category_name }}/" class="tagbutton">{{ $category_name }}</a>
+        {{ end }}
+      {{ end }}
       </div>
 	  {{ end }}
 	</div>
@@ -22,10 +33,20 @@
           {{ $numtags := len .Params.tags }}
           {{ if gt $numtags 0 }}
       <div class="tags">
-	    {{ range .Params.tags }}
-	      <a href="{{ $.Site.BaseURL | relLangURL }}/tags/{{ lower . }}/" class="tagbutton {{ . }}">{{ . }}</a>
+      {{ range .Params.tags }}
+        {{ $category_name := . }}
+        {{ $categories_color := $.Site.Params.categories_color }}
+        {{ if in $categories_color $category_name }} {{/* if tag_name is defined in categories_color */}}
+          {{ range $i, $tag_name := $categories_color }}
+            {{ if eq $tag_name $category_name }} 
+              <a href="{{ $.Site.BaseURL | relLangURL }}/tags/{{ lower $category_name }}/" class="tagbutton {{ index $categories_color (add $i 1) }}">{{ $category_name }}</a>
+            {{ end }}
+          {{ end }}
+          {{ else }}
+            <a href="{{ $.Site.BaseURL | relLangURL }}/tags/{{ lower $category_name }}/" class="tagbutton">{{ $category_name }}</a>
         {{ end }}
-        </div>
+      {{ end }}
+      </div>
 	  {{ end }}
 	</div>
       {{ end }}
@@ -48,7 +69,17 @@
       {{ dateFormat "2 Jan, 2006" .Date }}
       <div class="tags">
       {{ range .Params.tags }}
-        <a href="{{ $.Site.BaseURL | relLangURL }}/tags/{{ lower . }}/" class="tagbutton {{ . }}">{{ . }}</a>
+        {{ $category_name := . }}
+        {{ $categories_color := $.Site.Params.categories_color }}
+        {{ if in $categories_color $category_name }} {{/* if tag_name is defined in categories_color */}}
+          {{ range $i, $tag_name := $categories_color }}
+            {{ if eq $tag_name $category_name }} 
+              <a href="{{ $.Site.BaseURL | relLangURL }}/tags/{{ lower $category_name }}/" class="tagbutton {{ index $categories_color (add $i 1) }}">{{ $category_name }}</a>
+            {{ end }}
+          {{ end }}
+          {{ else }}
+            <a href="{{ $.Site.BaseURL | relLangURL }}/tags/{{ lower $category_name }}/" class="tagbutton">{{ $category_name }}</a>
+        {{ end }}
       {{ end }}
       </div>
     </div>
diff --git a/static/css/postcard.css b/static/css/postcard.css
index f6c2fbe..c54308a 100644
--- a/static/css/postcard.css
+++ b/static/css/postcard.css
@@ -1,3 +1,10 @@
+:root {
+  --gray-color: #808080;
+  --red-color: #8b0000;
+  --green-color: #2f4f4f;
+  --blue-color: #00008b;
+}
+
 .postcard {
   background-color: #fff;
   padding: 10px;
@@ -149,33 +156,43 @@
   border-radius: 8px;
   transition: .4s;
   text-decoration: none;
-  color:#8b0000;
-  border: solid 1px #8b0000;
+  color:var(--gray-color);
+  border: solid 1px var(--gray-color);
   transition: .4s;
 }
 
 .postcard div a.tagbutton:hover {
-  background-image: linear-gradient(45deg, #8b0000 0%, #b22222 100%);
+  background-image: linear-gradient(45deg, var(--gray-color) 0%, var(--gray-color) 100%);
   color: white;
 }
 
 .postcard div a.red {
-  color:#8b0000;
-  border: solid 1px #8b0000;
+  color:var(--red-color);
+  border: solid 1px var(--red-color);
 }
 
 .postcard div a.red:hover {
-  background-image: linear-gradient(45deg, #8b0000 0%, #b22222 100%);
+  background-image: linear-gradient(45deg, var(--red-color) 0%, var(--red-color) 100%);
+  color: white;
+}
+
+.postcard div a.blue{
+  color:var(--blue-color);
+  border: solid 1px var(--blue-color);
+}
+
+.postcard div a.blue:hover {
+  background-image: linear-gradient(45deg, var(--blue-color) 0%, var(--blue-color) 100%);
   color: white;
 }
 
-.postcard div a.Seminar {
-  color:#2f4f4f;
-  border: solid 1px #2f4f4f;
+.postcard div a.green{
+  color:var(--green-color);
+  border: solid 1px var(--green-color);
 }
 
-.postcard div a.Seminar:hover {
-  background-image: linear-gradient(45deg, #1d2d2d 0%, #2f4f4f 100%);
+.postcard div a.green:hover {
+  background-image: linear-gradient(45deg, var(--green-color) 0%, var(--green-color) 100%);
   color: white;
 }
 
-- 
GitLab