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', {

{{ item.subtitle }}

- #{{ item.tag }} +
+ #{{ item.tag }} +
` 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"