Adding tertiary color and new button design.

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 {

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;
+        box-shadow: 0px 0px 6px 0px #888888;
-        filter: brightness(90%);
+        filter: brightness(95%);
     }
 }

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) {
+    &.primary:not(.tag), &.secondary:not(.tag), &.tertiary:not(.tag) {
-        margin: 0.1em;
+        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 {
+        background-image: linear-gradient(70deg, var(--first-color) 0%, var(--second-color) 51%, var(--first-color) 100%);
-            box-shadow: 0px 0px 8px 0px #000000;
+        background-size: 200% auto;
-            filter: brightness(80%);
+    
+        &: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;
+            padding: 0.55em;
-            background-color: var(--theme-color);
+            /*background-color: var(--theme-color);*/
         }
     }
 }

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 <https://www.gnu.org/licenses/>.
 -->
 {{ range . }}
-<div role="button" class="{{ if .Secondary }}secondary{{ else if .Tag }}tag{{ else }}primary{{ end }}">
+<div role="button" class="{{ if .Tertiary }}tertiary{{ else if .Secondary }}secondary{{ else if .Tag }}tag{{ else }}primary{{ end }}">
 <a href="{{ .URL | safeURL }}" role="button" title="{{ .Title }}" {{ if .NewTab }}target="_blank"{{ end }}>
  {{ if .Icon }}<i class="icon-{{ lower .Icon }} icon-as-text" alt="{{ .Icon }}"></i>{{ end }}{{ if .Image }}<img class="icon-as-text" alt="{{ .Icon }}" src="{{ .Image }}" loading="lazy"></img>{{ end }}{{ .Title }}
 </a>

layouts/shortcodes/card.html

@@ -28,7 +28,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
   <br>
   <div class="grid flex-center">&nbsp;
       {{ 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 }}
   </div>
  </div>

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 {
+.badge:hover {
-    box-shadow: 0px 0px 8px 0px #000000;
+    box-shadow: 0px 0px 6px 0px #888888;
-    filter: brightness(90%);
+    filter: brightness(95%);
 }