move buttons to global css; use buttons styling on iceshrimp page

_includes/layouts/iceshrimp.njk

@@ -23,7 +23,7 @@ permalink: "/iceshrimp/"
     <section style="text-align:center;">
         <h1><a href="https://iceshrimp.net" target="_blank" style="vertical-align:middle;"><img src="/assets/isnet.png" alt="Iceshrimp.NET source" style="height:2rem;margin-right:.4rem;border-radius:.2rem" /></a>Icesynth!</h1>
         <p>Beep! A small instance themed around <a href="https://synthspecies.com">synths</a>, but accepts all.</p>
-        <p><a href="https://beeping.synth.download/login">Log in</a> <span aria-hidden="true">•</span> <a href="https://beeping.synth.download/register">Register</a></p>
+        <p><a class="button" href="https://beeping.synth.download/login"><span class="tabler--login"></span> Log in</a> <a class="button" href="https://beeping.synth.download/register"><span class="tabler--user-plus"></span> Register</a></p>
     </section>
 </div>
 

_includes/styles/base.css

@@ -351,21 +351,6 @@ details.styled {
             margin-top: 0rem !important;
             margin-bottom: .4rem !important;
         }
-
-        .button {
-            background-color: color-mix(in srgb, var(--accent) 30%, transparent);
-            border-radius: 1rem;
-            color: var(--foreground);
-            padding: .4rem;
-            text-decoration: none;
-            text-shadow: none;
-            transition: all .2s;
-        }
-        .button:hover {
-            background-color: var(--accent);
-            color: var(--background);
-            transition: all .2s;
-        }
     }
     .card.last {
         margin-bottom: unset !important;
@@ -425,6 +410,23 @@ summary {
     display: flex;
 }
 
+/* link "button" styling */
+.button {
+    background-color: color-mix(in srgb, var(--accent) 30%, transparent);
+    border-radius: 1rem;
+    color: var(--foreground);
+    padding: .4rem;
+    text-decoration: none;
+    text-shadow: none;
+    transition: all .2s;
+}
+
+.button:hover {
+    background-color: var(--accent);
+    color: var(--background);
+    transition: all .2s;
+}
+
 /* ---------------
 - alt text popup -
 --------------- */

_includes/styles/icons.css

@@ -430,6 +430,21 @@
     -webkit-mask-size: 100% 100%;
     mask-size: 100% 100%;
 }
+/* ti-user-plus */
+.tabler--user-plus {
+    display: inline-block;
+    width: 1.3rem;
+    height: 1.3rem;
+    vertical-align: top;
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0m8 12h6m-3-3v6M6 21v-2a4 4 0 0 1 4-4h4'/%3E%3C/svg%3E");
+    background-color: currentColor;
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+}
 /* ti-heart */
 .tabler--heart {
     display: inline-block;
@@ -759,4 +774,19 @@
     mask-repeat: no-repeat;
     -webkit-mask-size: 100% 100%;
     mask-size: 100% 100%;
+}
+/* ti-login */
+.tabler--login {
+    display: inline-block;
+    width: 1.3rem;
+    height: 1.3rem;
+    vertical-align: top;
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M15 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2'/%3E%3Cpath d='M21 12H8l3-3m0 6l-3-3'/%3E%3C/g%3E%3C/svg%3E");
+    background-color: currentColor;
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
 }