Merge pull request #18 from TxtDot/styling2

Completed styling
2024-10-18 14:40:19 +03:00 · 2023-08-16 14:33:08 +03:00 · 2023-08-16 14:33:08 +03:00 · 0750485e4b
commit 0750485e4b
parent 34af751bdc 7975fa0cf9
6 changed files with 101 additions and 9 deletions
--- a/src/routes/get.ts
+++ b/src/routes/get.ts
@ -27,7 +27,7 @@ export default async function getRoute(fastify: FastifyInstance) {
        return parsed.textContent;
      } else {
        reply.type("text/html; charset=utf-8");
-        return reply.view("/templates/get.ejs", { parsed: parsed });
+        return reply.view("/templates/get.ejs", { parsed, remoteUrl });
      }
    }
  );
--- a/static/common.css
+++ b/static/common.css
@ -6,8 +6,11 @@
  --bg: #fff;
  --fg: #111;

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

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

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

@ -36,3 +42,23 @@ main {
  width: 100%;
  margin: auto;
 }
+
+.button {
+  padding: 0.25rem 0.75rem;
+
+  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,8 +1,19 @@
+.menu {
+  display: flex;
+  flex-direction: row;
+  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/static/index.css
+++ b/static/index.css
@ -4,11 +4,22 @@ main {
  align-items: center;
 }

+h1 {
+  width: fit-content;
+  margin: auto;
+}
+h1 > span {
+  color: var(--accent);
+}
+
 .input-grid {
  display: grid;
  /* 2 columns: auto width, min-content width */
  grid-template-columns: auto min-content;

+  /* gap: row column */
+  gap: 0.5rem 0.25rem;
+
  width: fit-content;
 }

@ -16,8 +27,48 @@ main {
  display: flex;
  flex-direction: row;
  align-items: center;
+  gap: 0.75rem;
+}
+
+.input {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+label {
+  font-size: 0.9rem;
 }

 #url {
  width: 100%;
+  height: 100%;  /* shrink to #submit height */
+
+  outline: none;
+  border: 0;
+  border-bottom: 0.125rem solid var(--fg2);
+
+  background: var(--bg);
+  color: var(--fg);
+  font-size: 1rem;
+}
+#url::placeholder {
+  color: var(--fg2);
+  opacity: 1;
+}
+
+#submit {
+  font-size: 1rem;
+}
+
+select {
+  border: 0;
+  border-bottom: 0.125rem solid var(--accent);
+
+  background: var(--bg);
+  color: var(--fg);
+
+  font-weight: 500;
+  font-size: 0.9rem;
 }
--- a/templates/get.ejs
+++ b/templates/get.ejs
@ -11,6 +11,10 @@
  </head>
  <body>
    <main>
+      <div class="menu">
+        <a class="button secondary" href="/">Home</a>
+        <a class="button secondary" href="<%= remoteUrl %>">Original page</a>
+      </div>
      <div class="title">
        <%= parsed.title %>
      </div>
--- a/templates/index.ejs
+++ b/templates/index.ejs
@ -13,7 +13,7 @@
  <body>
    <main>
      <header>
-        <h1>txt.</h1>
+        <h1>txt<span>.</span></h1>
        <p><%= desc %></p>
      </header>
      <form action="/get" method="get" class="input-grid">
@ -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">