Style a bit

This commit is contained in:
nelle 2024-07-08 17:16:08 -06:00
parent 87bb71db05
commit 96172e6db4
3 changed files with 13 additions and 25 deletions

View file

@ -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);
}

View file

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

View file

@ -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>