Buttons styling

2023-08-16 14:35:03 +04:00 · 2023-08-16 14:35:03 +04:00 · 6a3d541fb4
commit 6a3d541fb4
parent 22b8af4012
4 changed files with 36 additions and 10 deletions
--- a/static/common.css
+++ b/static/common.css
@ -6,8 +6,10 @@
  --bg: #fff;
  --fg: #111;

-  --link: hsl(207, 100%, 40%);
-  --link-hl: hsl(207, 100%, 20%);
+  --bg2: #bbb;
+
+  --accent: hsl(207, 100%, 40%);
+  --accent-hl: hsl(207, 100%, 20%);
 }

@media (prefers-color-scheme: dark) {
@ -15,8 +17,10 @@
    --bg: #222;
    --fg: #eee;

-    --link: hsl(207, 100%, 60%);
-    --link-hl: hsl(207, 100%, 80%);
+    --bg2: #444;
+
+    --accent: hsl(207, 100%, 60%);
+    --accent-hl: hsl(207, 100%, 80%);
  }
 }

@ -36,3 +40,23 @@ main {
  width: 100%;
  margin: auto;
 }
+
+.button {
+  padding: 0.25rem 0.5rem;
+
+  border: 0.125rem solid var(--accent);
+  border-radius: 0.25rem;
+
+  background: var(--bg);
+  color: var(--fg);
+  text-decoration: none;
+
+  cursor: pointer;
+}
+.button.secondary {
+  border-color: var(--bg2);
+}
+.button:hover {
+  background: var(--bg2);
+  color: var(--fg);
+}
--- a/static/get.css
+++ b/static/get.css
@ -1,17 +1,19 @@
 .menu {
  display: flex;
  flex-direction: row;
-  column-gap: 1rem;
+  column-gap: 0.25rem;
+
+  font-size: 0.9rem;
 }
 .title {
  font-weight: 500;
 }

 a {
-  color: var(--link);
+  color: var(--accent);
 }
 a:hover {
-  color: var(--link-hl);
+  color: var(--accent-hl);
 }

 pre {
--- a/templates/get.ejs
+++ b/templates/get.ejs
@ -12,8 +12,8 @@
  <body>
    <main>
      <div class="menu">
-        <a href="/">Home</a>
-        <a href="<%= remoteUrl %>">Original page</a>
+        <a class="button secondary" href="/">Home</a>
+        <a class="button secondary" href="<%= remoteUrl %>">Original page</a>
      </div>
      <div class="title">
        <%= parsed.title %>
--- a/templates/index.ejs
+++ b/templates/index.ejs
@ -21,7 +21,7 @@
          <input type="text" name="url" id="url" placeholder="URL">
        </div>
        <div class="input">
-          <input type="submit" id="submit" value="Parse">
+          <input type="submit" id="submit" class="button" value="Parse">
        </div>
        <div class="input-row">
          <div class="input">