From 7634557b2840ea9b1cd3ffa8481c17ebb69e31b2 Mon Sep 17 00:00:00 2001 From: Ad5001 Date: Sat, 15 Oct 2022 15:33:13 +0200 Subject: [PATCH] Adding tertiary color and new button design. --- assets/scss/common.scss | 24 ++++++++++++++++++-- assets/scss/components/blocks/badge.scss | 6 ++--- assets/scss/components/common/button.scss | 27 ++++++++++++++--------- layouts/partials/links.html | 2 +- layouts/shortcodes/card.html | 2 +- static/css/badge.css | 8 +++---- 6 files changed, 47 insertions(+), 22 deletions(-) diff --git a/assets/scss/common.scss b/assets/scss/common.scss index 219173f..85a3913 100644 --- a/assets/scss/common.scss +++ b/assets/scss/common.scss @@ -31,7 +31,11 @@ body { margin: 0px; --light-font: 'Metropolis Light', 'Fira Sans Light','Ubuntu Light', 'Noto Sans Light', sans-serif; --primary-color: #50DC71; + --primary-color-second: #8EF78C; --secondary-color: #FAFAFA; + --secondary-color-second: #DFDFDF; + --tertiary-color: #1FA2FF; + --tertiary-color-second: #12D8FA; --nav-background: var(--secondary-color); --nav-background-dark: #282828; --footer-background: #111111; @@ -52,16 +56,32 @@ hr { opacity: 0.5; } +.primary, .secondary, .tertiary { + background: var(--first-color) +} + .primary { - background-color: var(--primary-color); + --first-color: var(--primary-color); + --second-color: var(--primary-color-second); --theme-color: var(--primary-color); } .secondary { - background-color: var(--secondary-color); + --first-color: var(--secondary-color); + --second-color: var(--secondary-color-second); --theme-color: var(--secondary-color); } +.tertiary { + --first-color: var(--tertiary-color); + --second-color: var(--tertiary-color-second); + --theme-color: var(--tertiary-color); +} + +.primary:hover, .secondary:hover, .tertiary:hover { + background-position: right center; +} + /* format */ .fill-width { diff --git a/assets/scss/components/blocks/badge.scss b/assets/scss/components/blocks/badge.scss index 6066b16..3165235 100644 --- a/assets/scss/components/blocks/badge.scss +++ b/assets/scss/components/blocks/badge.scss @@ -17,13 +17,13 @@ */ .badge { width: Min(300px, calc(100% - 2em)); - box-shadow: 0px 0px 0px 0px #000000; + box-shadow: 0px 0px 0px 0px #888888; transition: box-shadow 0.15s ease-in-out, filter 0.15s ease-in-out; border-radius: 0.5em; filter: brightness(100%); &:hover { - box-shadow: 0px 0px 8px 0px #000000; - filter: brightness(90%); + box-shadow: 0px 0px 6px 0px #888888; + filter: brightness(95%); } } diff --git a/assets/scss/components/common/button.scss b/assets/scss/components/common/button.scss index 9bba45a..50474c0 100644 --- a/assets/scss/components/common/button.scss +++ b/assets/scss/components/common/button.scss @@ -25,7 +25,8 @@ height: -moz-fit-content; width: fit-content; height: fit-content; - transition: box-shadow 0.15s ease-in-out, filter 0.15s ease-in-out; + transition: box-shadow 0.15s ease-in-out, filter 0.15s ease-in-out, background-position 0.5s; + border-radius: 5px; &.tag { border: solid 1px #AEAEAE; @@ -52,31 +53,35 @@ } } - &.primary:not(.tag), &.secondary:not(.tag) { - margin: 0.1em; + &.primary:not(.tag), &.secondary:not(.tag), &.tertiary:not(.tag) { + margin: 0.2em; text-transform: uppercase; font-size: larger; - box-shadow: 0px 0px 2px 0px #000000; + box-shadow: 0px 0px 2px 0px #888888; filter: brightness(100%); - &:active { - box-shadow: 0px 0px 8px 0px #000000; - filter: brightness(80%); + background-image: linear-gradient(70deg, var(--first-color) 0%, var(--second-color) 51%, var(--first-color) 100%); + background-size: 200% auto; + + &:active, &:hover { + box-shadow: 2px 2px 6px 0px #888888; z-index: 2 } + + &:active { + filter: brightness(80%); + } &:hover { - box-shadow: 0px 0px 8px 0px #000000; filter: brightness(98%); - z-index: 2 } & a, &:not(div) { text-decoration: none; display: inline-block; color: black; - padding: 0.5em; - background-color: var(--theme-color); + padding: 0.55em; + /*background-color: var(--theme-color);*/ } } } diff --git a/layouts/partials/links.html b/layouts/partials/links.html index a5f5e2b..c210775 100644 --- a/layouts/partials/links.html +++ b/layouts/partials/links.html @@ -17,7 +17,7 @@ You should have received a copy of the GNU Affero General Public License along with this program. If not, see . --> {{ range . }} -
+
{{ if .Icon }}{{ end }}{{ if .Image }}{{ .Icon }}{{ end }}{{ .Title }} diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html index 5c3982b..90c7ea1 100644 --- a/layouts/shortcodes/card.html +++ b/layouts/shortcodes/card.html @@ -28,7 +28,7 @@ along with this program. If not, see .
  {{ if (.Get 5) }} - {{ partial "links.html" (slice (dict "Icon" (.Get 5) "Title" (.Get 6) "URL" (.Get 7) "Secondary" (.Get 8) "NewTab" (.Get 9) )) }} + {{ partial "links.html" (slice (dict "Icon" (.Get 5) "Title" (.Get 6) "URL" (.Get 7) "Secondary" (.Get 8) "Tertiary" (.Get 9) "NewTab" (.Get 10) )) }} {{ end }}
diff --git a/static/css/badge.css b/static/css/badge.css index b468f4b..61ffc7e 100644 --- a/static/css/badge.css +++ b/static/css/badge.css @@ -17,13 +17,13 @@ */ .badge { width: Min(300px, calc(100% - 2em)); - box-shadow: 0px 0px 0px 0px #000000; + box-shadow: 0px 0px 0px 0px #888888; transition: box-shadow 0.15s ease-in-out, filter 0.15s ease-in-out; border-radius: 0.5em; filter: brightness(100%); } -.badge::hover { - box-shadow: 0px 0px 8px 0px #000000; - filter: brightness(90%); +.badge:hover { + box-shadow: 0px 0px 6px 0px #888888; + filter: brightness(95%); }