Style a bit

public/css/classes.css

@@ -30,13 +30,13 @@
     padding: 0.5em;
     margin-top: 1em;
     margin-bottom: 1em;
-    border: 3px solid #fab387;
+    border: 3px solid var(--accent-color);
     border-radius: 5px;
     opacity: 0.9;
     background: rgba(0, 0, 0, .66);
-    -webkit-box-shadow: 0 0 20px #f5a97f;
-    -moz-box-shadow: 0 0 20px #f5a97f;
-    box-shadow: 0 0 20px #f5a97f;
+    -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);
 }
 
 .small-quote {
@@ -44,30 +44,16 @@
     color: #a6adc8;
 }
 
-.ntfy-send::before {
-    content: "[[";
-}
-
-.ntfy-send::after {
-    content: "]]";
-}
-
-.ntfy-box {
-    margin: 0 1ch;
-    padding: 1ch 2ch 2ch 2ch;
-    background: #ffffff13;
-    border-radius: 10px;
-}
-
 textarea {
-    width: 85%;
+    width: 82%;
     appearance: none;
     outline: none;
     font-family: inherit;
     background: transparent;
     color: inherit;
     border-bottom: 1px solid currentColor;
-    -webkit-box-shadow: 0 0 20px #f5a97f;
-    -moz-box-shadow: 0 0 20px #f5a97f;
-    box-shadow: 0 0 20px #f5a97f;
+    border-radius: 10px;
+    -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);
 }

public/css/limepot.css

@@ -20,6 +20,8 @@
     font-family: system-ui, sans-serif;
     line-height: 1.6;
     margin: auto;
+
+    --accent-color: #fab387;
 }
 
 footer {

src/pages/index.astro

@@ -66,8 +66,8 @@ import Layout from "../layouts/Layout.astro";
       <p><a href="https://www.youtube.com/channel/UCk_yKIpDnMv_DvuDb9RGfcA">==> Youtube</a></p>
       <br>
       <div class="ntfy-box">
-        <p>send me a notification! type words and press send</p>
-        <textarea id="ntfy-input" placeholder="Hi Nelle~!"></textarea><a class="ntfy-send nob4" href="javascript:sendNotification()">send</a>
+        <h4>send me a notification! type words and press send</h4>
+        <textarea id="ntfy-input" placeholder="Hi Nelle~!"></textarea><button class="ntfy-send nob4 custom-btn btn-1" onclick="javascript:sendNotification()" style="margin-left:10px;">Send</button>
       </div>
     </div>
   </main>