style

astro/public/styles/css/classes.css

@@ -1,3 +1,5 @@
+@import "nav-buttons.css";
+
 .container {
     display: flex;
     align-content:  center;
@@ -50,4 +52,28 @@ a:visited {
 
 a:hover {
     color: var(--hover);
+}
+
+textarea {
+    -webkit-box-shadow: 0 0 20px var(--accent-color);
+    -moz-box-shadow: 0 0 20px var(--accent-color);
+    box-shadow: 0 0 20px var(--accent-color);
+    resize: none;
+}
+
+textarea,
+select {
+    width: 82%;
+    appearance: none;
+    outline: none;
+    font-family: inherit;
+    background: transparent;
+    color: inherit;
+    border-bottom: 1px solid currentColor;
+    border-radius: 10px;
+}
+
+hr {
+    width: 32%;
+    color: var(--gray);
 }

astro/public/styles/css/nav-buttons.css

@@ -0,0 +1,109 @@
+.custom-btn {
+    width: 130px;
+    height: 40px;
+    color: #4c4f69;
+    border-radius: 5px;
+    padding: 10px 25px;
+    font-weight: 500;
+    background: transparent;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+    display: inline-block;
+    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
+        7px 7px 20px 0px rgba(0, 0, 0, .1),
+        4px 4px 5px 0px rgba(0, 0, 0, .1);
+    outline: none;
+    font-size: large;
+    -webkit-box-shadow: 0 0 10px var(--other-accent);
+    -moz-box-shadow: 0 0 10px var(--other-accent);
+    box-shadow: 0 0 10px var(--other-accent);
+}
+
+/* 8 */
+.btn-1 {
+    background-color: var(--overlay);
+    background-image: linear-gradient(315deg, var(--overlay) 0%, var(--accent-color) 74%);
+    line-height: 42px;
+    padding: 0;
+    border: none;
+}
+
+.btn-1 span {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.btn-1:before,
+.btn-1:after {
+    position: absolute;
+    content: "";
+    right: 0;
+    bottom: 0;
+    background: var(--accent-color);
+    /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
+                -4px -4px 6px 0 rgba(116, 125, 136, .2), 
+      inset -4px -4px 6px 0 rgba(255,255,255,.5),
+      inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
+    transition: all 0.3s ease;
+}
+
+.btn-1:before {
+    height: 0%;
+    width: 2px;
+}
+
+.btn-1:after {
+    width: 0%;
+    height: 2px;
+}
+
+.btn-1:hover:before {
+    height: 100%;
+}
+
+.btn-1:hover:after {
+    width: 100%;
+}
+
+.btn-1:hover {
+    background: transparent;
+}
+
+.btn-1 span:hover {
+    color: var(--accent-color);
+}
+
+.btn-1 span:before,
+.btn-1 span:after {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 0;
+    background: var(--accent-color);
+    /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
+                -4px -4px 6px 0 rgba(116, 125, 136, .2), 
+      inset -4px -4px 6px 0 rgba(255,255,255,.5),
+      inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
+    transition: all 0.3s ease;
+}
+
+.btn-1 span:before {
+    width: 2px;
+    height: 0%;
+}
+
+.btn-1 span:after {
+    height: 2px;
+    width: 0%;
+}
+
+.btn-1 span:hover:before {
+    height: 100%;
+}
+
+.btn-1 span:hover:after {
+    width: 100%;
+}

astro/src/pages/index.astro

@@ -26,8 +26,7 @@ import Layout from "../layouts/Layout.astro";
           ></span
         >
       </div>
-      <br>
+      <hr>
-
       <div class="ntfy-box">
         <h4 style="margin-bottom: 0px;">send me a notification! type words and press send</h4>
         <small style="font-size: 15px;">music recs, questions, jokes, confessions of your sins, etc, welcome, I respond to all or most as vagueposts on the fediverse</small>