up-for-grabs#1160 add styling to popular tags

cweave · Oct 7, 2022 · 99e1fbd · 99e1fbd
1 parent 670472f
commit 99e1fbd
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 13 deletions.
diff --git a/_includes/scripts.html b/_includes/scripts.html
@@ -46,11 +46,11 @@
   </div>
   <div class="filters-panel cf">
     <label class="filter-label" >Popular tags:</label>
-    <ul class="popular-tags">
+    <div class="popular-tags">
     <% _.each(popularTags, function(entry, key){ %>
-      <li><a><%-entry.name%></a> (<%-entry.frequency%>)</li>
+      <a title="Popular Tag: <%-entry.name%>" tabindex="0"><%-entry.name%> <span class="popular-tags__frequency">(<%-entry.frequency%>)</span></a>
     <% }) %>
-    </ul>
+    </div>
   </div>
   <div class="projects">
     <% let count=0 %>

diff --git a/javascripts/dark-mode.js b/javascripts/dark-mode.js
@@ -25,6 +25,7 @@ define([], () => {
     root.style.setProperty('--box-shadow-color', 'rgba(27, 30, 33, 0.5)');
     root.style.setProperty('--heading-color', '#7bc6f2');
     root.style.setProperty('--container-border', 'transparent');
+    root.style.setProperty('--container-border-alt', '#dbdbdb');
     root.style.setProperty('--databox-bg', '#32404d');
     root.style.setProperty('--databox-text', '#7bceff');
 

diff --git a/javascripts/main.js b/javascripts/main.js
@@ -154,7 +154,7 @@ define([
       });
 
     projectsPanel
-      .find('ul.popular-tags')
+      .find('div.popular-tags')
       .children()
       .each((i, elem) => {
         $(elem).on('click', function () {

diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css
@@ -27,7 +27,9 @@ MeyerWeb Reset
   --abs: #FFF;
   --view-mode: true;
   --heading-color: #005485;
-  --container-border: #dbdbdb;
+  --container-rgb: 219, 219, 219;
+  --container-border: rgb(var(--container-rgb));
+  --container-border-alt: #303030;
   --databox-bg: #fff;
   --databox-text: #2e7ba9;
 }
@@ -866,16 +868,33 @@ form {
   width: 16px;
 }
 
-.popular-tags li {
-  display: inline-block;
-  font-size: 18px;
-  padding-left: 0;
-  font-size: 16px;
+.popular-tags a {
+  display: inline-flex;
+  align-content: center;
+  padding: 0.5em 0.75em;
+  font-size: 15px;
+  border: 1px solid var(--container-border-alt, transparent);
+  border-radius: 1em;
+  text-decoration: none;
+  transition: all 0.3s;
 }
 
-.popular-tags li::before {
-  content: ' ';
-  margin-right: 12px;
+.popular-tags a:not(:last-of-type) {
+  margin-right: 0.35em;
+}
+
+.popular-tags a:hover,
+.popular-tags a:focus,
+.popular-tags a:focus-within {
+  background-color: rgba(var(--container-rgb), 0.2);
+  border-color: var(--databox-text);
+  color: var(--databox-text);
+}
+
+.popular-tags a span.popular-tags__frequency {
+  margin-left: 0.45em;
+  font-size: 10px;
+  color: var(--body-color);
 }
 
 @media (max-width: 768px) {