From: Ardis Lu <ardisglu@gmail.com>
Date: Thu, 23 Feb 2023 04:16:21 +0000 (-0800)
Subject: Add basic styling
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=dd6941c123d9d9acd8b66360903d79d0fde3c5fd;p=static-encrypt

Add basic styling
---

diff --git a/template.html b/template.html
index 0e587ee..6725b95 100644
--- a/template.html
+++ b/template.html
@@ -8,11 +8,36 @@
   <title>Enter password</title>
   <style>
     body {
+      font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
       min-block-size: 100dvb;
       margin: 0;
+      background: hsl(216deg 50% 98%);
+      color: hsl(216deg 50% 10%);
       display: grid;
       place-items: center;
     }
+
+    input,
+    button {
+      font-size: 1rem;
+      padding-inline: 4px;
+      padding-block: 8px 6px;
+      border-radius: 4px;
+      border: 1px solid hsl(216deg 50% 80%);
+      transition: filter 600ms, border 600ms;
+    }
+
+    :is(input, button):focus-within,
+    button:hover {
+      border: 1px solid hsl(216deg 50% 70%);
+      filter: drop-shadow(0 0 4px hsl(216deg 50% 80%));
+      transition: filter 200ms, border 200ms;
+    }
+
+    button {
+      background: hsl(216deg 50% 90%);
+      cursor: pointer;
+    }
   </style>
 </head>