Merge pull request #5 from pdevq/master

Styling Tags - Search Bar Icon Fix - Dark Theme Link Hover Text

6 files changed, 51 insertions, 11 deletions

diff --git a/README.md b/README.md
index d2a6500..62bbd77 100644
--- a/README.md
+++ b/README.md
@@ -42,7 +42,7 @@ links:
 
 # Services
 # First level array represent a group.
-# Leave only a "items" key if not using group (group name & icon are optional, section separation will not be displayed).
+# Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed).
 services:
   - name: "DevOps"
     icon: "fa-code-fork"
@@ -58,6 +58,8 @@ services:
         logo: "/assets/tools/rabbitmq.png"
         subtitle: "Manage & monitor RabbitMQ server"
         tag: "haproxy"
+        # Optional tagstyle
+        tagstyle: "is-success"
         url: "#"
   - name: "Monitoring"
     icon: "fa-heartbeat"
diff --git a/app.css b/app.css
index 8a97742..27617de 100644
--- a/app.css
+++ b/app.css
@@ -9,6 +9,8 @@ body {
     transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
     background-color: #f5f5f5;
     color: #363636; }
+    body #app a:hover {
+      color: #363636; }
     body #app .title {
       color: #303030; }
     body #app .subtitle {
@@ -25,6 +27,8 @@ body {
       body #app {
         background-color: #f5f5f5;
         color: #363636; }
+        body #app a:hover {
+          color: #363636; }
         body #app .title {
           color: #303030; }
         body #app .subtitle {
@@ -41,6 +45,8 @@ body {
       body #app {
         background-color: #131313;
         color: #eaeaea; }
+        body #app a:hover {
+          color: #ffdd57; }
         body #app .title {
           color: #fafafa; }
         body #app .subtitle {
@@ -56,6 +62,8 @@ body {
     body #app.is-light {
       background-color: #f5f5f5;
       color: #363636; }
+      body #app.is-light a:hover {
+        color: #363636; }
       body #app.is-light .title {
         color: #303030; }
       body #app.is-light .subtitle {
@@ -71,6 +79,8 @@ body {
     body #app.is-dark {
       background-color: #131313;
       color: #eaeaea; }
+      body #app.is-dark a:hover {
+        color: #ffdd57; }
       body #app.is-dark .title {
         color: #fafafa; }
       body #app.is-dark .subtitle {
@@ -130,6 +140,7 @@ body {
       body #bighead .navbar a {
         color: #ffffff; }
         body #bighead .navbar a:hover {
+          color: #ffffff;
           background-color: #5a95f5; }
   body #main-section {
     margin-bottom: 2rem;
@@ -165,6 +176,8 @@ body {
     overflow: hidden;
     transition: all 0.2s ease-out;
     padding: 0; }
+    body .tag .tag-text {
+      display: none; }
   body .card {
     border-radius: 5px;
     border: none;
@@ -178,6 +191,8 @@ body {
       width: auto;
       color: #ffffff;
       padding: 0 0.75em; }
+      body .card:hover .tag .tag-text {
+        display: block; }
   body .card-content {
     height: 85px;
     padding: 1.3rem; }
@@ -215,11 +230,12 @@ body {
         width: 250px;
         background-color: #ffffff; }
     body .search-bar .search-label::before {
-      font-family: 'FontAwesome';
+      font-family: 'Font Awesome 5 Free';
       position: absolute;
       top: 12px;
       left: 8px;
       content: "\f002";
+      font-weight: 900;
       width: 20px;
       height: 20px; }
     body .search-bar:focus-within .search-label::before {
diff --git a/app.css.map b/app.css.map
index 9e5dc0c..d03711d 100644
--- a/app.css.map
+++ b/app.css.map
@@ -1,7 +1,7 @@
 {
 "version": 3,
-"mappings": "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",
+"mappings": "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",
 "sources": ["app.scss"],
 "names": [],
 "file": "app.css"
-}
\ No newline at end of file
+}
diff --git a/app.js b/app.js
index 41bdd9d..def0be7 100644
--- a/app.js
+++ b/app.js
@@ -85,7 +85,9 @@ Vue.component('service', {
                         <p class="subtitle is-6">{{ item.subtitle }}</p>
                     </div>
                 </div>
-                <strong class="tag" v-if="item.tag">#{{ item.tag }}</strong>
+                <div class="tag" :class="item.tagstyle" v-if="item.tag">
+                    <strong class="tag-text">#{{ item.tag }}</strong>
+                </div>
             </div>
         </a>
     </div></div>`
diff --git a/app.scss b/app.scss
index d4d2099..defd931 100644
--- a/app.scss
+++ b/app.scss
@@ -9,7 +9,8 @@ $theme-light: (
   text: #363636,
   text-title: #303030,
   text-subtitle: #424242,
-  card-shadow: rgba(0, 0, 0, 0.1)
+  card-shadow: rgba(0, 0, 0, 0.1),
+  a-hover: #363636
 );
 $theme-dark: (
   background: #131313,
@@ -17,7 +18,8 @@ $theme-dark: (
   text: #eaeaea,
   text-title: #fafafa,
   text-subtitle: #f5f5f5,
-  card-shadow: rgba(0, 0, 0, 0.4)
+  card-shadow: rgba(0, 0, 0, 0.4),
+  a-hover: #ffdd57
 );
 
   
@@ -25,7 +27,12 @@ $theme-dark: (
 @mixin theme($theme) {
   background-color: map-get($theme, "background");
   color: map-get($theme, "text");
-
+  a {
+    &:hover {
+      color: map-get($theme, "a-hover");
+    }
+  }
+  
   .title {
     color: map-get($theme, "text-title");
   }
@@ -154,6 +161,7 @@ body {
       a {
         color: #ffffff;
         &:hover {
+          color: #ffffff;
           background-color: lighten( $secondary-color, 5% );
         }
       }
@@ -212,6 +220,10 @@ body {
     overflow: hidden;
     transition: all 0.2s ease-out;
     padding: 0;
+    
+    .tag-text {
+      display: none;
+    }
   }
 
   .card {
@@ -232,6 +244,10 @@ body {
       width: auto;
       color: #ffffff;
       padding: 0 0.75em;
+      
+      .tag-text {
+        display: block;
+      }
     }
   }
 
@@ -289,11 +305,12 @@ body {
     }
 
     .search-label::before {
-      font-family: 'FontAwesome';
+      font-family: 'Font Awesome 5 Free';
       position: absolute;
       top: 12px;
       left: 8px;
       content: "\f002";
+      font-weight: 900;
       width: 20px;
       height: 20px;
     }
diff --git a/config.yml b/config.yml
index 69c87ea..8060119 100644
--- a/config.yml
+++ b/config.yml
@@ -1,6 +1,6 @@
 ---
 # Homepage configuration
-# See https://fontawesome.com/v4.7.0/icons/ for icons options
+# See https://fontawesome.com/icons for icons options
 
 title: "Simple homepage"
 subtitle: "Homer"
@@ -25,7 +25,7 @@ links:
 
 # Services
 # First level array represent a group.
-# Leave only a "items" key if not using group (group name & icon are optional, section separation will not be displayed).
+# Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed).
 services:
   - name: "DevOps"
     icon: "fas fa-code-branch"
@@ -39,6 +39,9 @@ services:
         logo: "/assets/tools/rabbitmq.png"
         subtitle: "Manage & monitor RabbitMQ server"
         tag: "haproxy"
+        # Optional tagstyle
+        # Same styling options as the optional message.
+        tagstyle: "is-success"
         url: "#"
   - name: "Monitoring"
     icon: "fas fa-heartbeat"