Merge pull request #5 from pdevq/master

Styling Tags - Search Bar Icon Fix - Dark Theme Link Hover Text
2019-11-12 08:23:44 -08:00 · 2019-11-12 08:23:44 -08:00 · 05bdc26801
commit 05bdc26801
parent 8aa8398fba 7312bdd6bc
6 changed files with 51 additions and 11 deletions
--- 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"
--- 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 {
--- a/app.css.map
+++ b/app.css.map
@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAGA,IAAK;EACH,WAAW,EAAE,qBAAqB;EAClC,gBAAgB,EAAE,OAAO;EACzB,MAAM,EAAE,IAAI;EAEZ,oDAAuB;IACrB,WAAW,EAAE,kBAAkB;EAGjC,OAAG;IACD,SAAS,EAAE,IAAI;EAGjB,OAAG;IACD,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE,IAAI;IAChB,aAAa,EAAE,IAAI;IAEnB,WAAI;MACF,YAAY,EAAE,IAAI;MAClB,KAAK,EAtBO,OAAO;IAyBrB,YAAK;MACH,WAAW,EAAE,IAAI;MACjB,KAAK,EA3BO,OAAO;EA+BvB,cAAU;IACR,OAAO,EAAE,IAAI;EAGf,aAAS;IACP,KAAK,EAAE,OAAO;IAEd,8BAAiB;MACf,OAAO,EAAE,YAAY;IAGvB,yBAAY;MACV,MAAM,EAAE,KAAK;MACb,cAAc,EAAE,MAAM;MACtB,gBAAgB,EA9CN,OAAO;MAgDjB,4BAAG;QACD,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,IAAI;MAGjB,mCAAU;QACR,UAAU,EAAE,GAAG;QACf,SAAS,EAAE,MAAM;MAGnB,oCAAW;QACT,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,MAAM;MAGjB,6BAAI;QACF,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,IAAI;QAChB,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,IAAI;IAGjB,qBAAQ;MACN,gBAAgB,EAtEJ,OAAO;MAwEnB,uBAAE;QACA,KAAK,EAAE,OAAO;QAEd,6BAAQ;UACN,gBAAgB,EAAE,OAA+B;EAMzD,kBAAc;IACZ,aAAa,EAAE,IAAI;IACnB,OAAO,EAAE,CAAC;IAEV,qBAAG;MACD,aAAa,EAAE,eAAe;MAC9B,cAAc,EAAE,IAAI;IAGtB,yBAAO;MACL,SAAS,EAAE,KAAK;IAGlB,4BAAU;MACR,SAAS,EAAE,IAAI;IAGjB,0BAAQ;MACN,OAAO,EAAE,aAAa;IAGxB,2BAAS;MACP,UAAU,EAAE,IAAI;MAChB,UAAU,EAAE,+BAA+B;MAE3C,2CAAgB;QACd,WAAW,EAAE,IAAI;MAGnB,yCAAc;QACZ,MAAM,EAAE,IAAI;EAKlB,mBAAe;IACb,QAAQ,EAAE,OAAO;EAGnB,SAAK;IACH,KAAK,EA1HS,OAAO;IA2HrB,gBAAgB,EA3HF,OAAO;IA4HrB,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,IAAI;IACT,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,GAAG;IACV,QAAQ,EAAE,MAAM;IAChB,UAAU,EAAE,iBAAiB;IAC7B,OAAO,EAAE,CAAC;EAGZ,UAAM;IACJ,aAAa,EAAE,GAAG;IAClB,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,+BAA+B;IAC3C,UAAU,EAAE,wCACd;EAEA,gBAAY;IACV,gBAAgB,EAAE,OAAO;IACzB,SAAS,EAAE,kBAAkB;IAE7B,qBAAK;MACH,KAAK,EAAE,IAAI;MACX,KAAK,EAAE,OAAO;MACd,OAAO,EAAE,QAAQ;EAIrB,kBAAc;IACZ,MAAM,EAAE,KAAK;EAGf,YAAQ;IACN,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,WAAW;IACpB,UAAU,EAAE,IAAI;IAChB,gBAAgB,EAAE,OAAO;IACzB,UAAU,EAAE,iBAAiB;EAG/B,gBAAY;IACV,QAAQ,EAAE,QAAQ;IAClB,wBAAQ;MACN,MAAM,EAAE,IAAI;MACZ,gBAAgB,EAAE,OAA+B;MACjD,aAAa,EAAE,GAAG;MAClB,OAAO,EAAE,iBAAiB;MAC1B,MAAM,EAAE,MAAM;MACd,UAAU,EAAE,gBAAgB;MAC5B,KAAK,EAAE,OAAO;MACd,MAAM,EAAE,IAAI;MACZ,KAAK,EAAE,KAAK;MAGZ,8BAAQ;QACN,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,KAAK;QACZ,gBAAgB,EAAE,OAAO;IAI7B,sCAAsB;MACpB,WAAW,EAAE,aAAa;MAC1B,QAAQ,EAAE,QAAQ;MAClB,GAAG,EAAE,IAAI;MACT,IAAI,EAAE,GAAG;MACT,OAAO,EAAE,OAAO;MAChB,KAAK,EAAE,IAAI;MACX,MAAM,EAAE,IAAI;IAGZ,mDAAqC;MACjC,KAAK,EAAE,OAAO",
+"mappings": "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",
 "sources": ["app.scss"],
 "names": [],
 "file": "app.css"
--- 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>`
--- 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,6 +27,11 @@ $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;
    }
--- 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"