From a01850cab0f7d7447343221b9fe560e685ba61ac Mon Sep 17 00:00:00 2001
From: DarkCat09 <gh@dc09.ru>
Date: Wed, 18 Oct 2023 15:33:57 +0400
Subject: [PATCH] Icons, colors, homepage design

---
 .gitignore                 |   2 +-
 assets/icon.less           |  19 +++++++++++++++++++
 assets/index.less          |  38 ++++++++++++++++++++++++++++++++++++-
 assets/theme.less          |  26 +++++++++++++++++++++++++
 public/tabler.231017.woff2 | Bin 0 -> 1556 bytes
 views/index.html           |  10 +++++++---
 6 files changed, 90 insertions(+), 5 deletions(-)
 create mode 100644 assets/icon.less
 create mode 100644 assets/theme.less
 create mode 100644 public/tabler.231017.woff2

diff --git a/.gitignore b/.gitignore
index 5f4bf13..92d5376 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,5 +13,5 @@
 
 # NodeJS
 node_modules/
-public/
+public/assets/
 .parcel-cache/
diff --git a/assets/icon.less b/assets/icon.less
new file mode 100644
index 0000000..c0d1cab
--- /dev/null
+++ b/assets/icon.less
@@ -0,0 +1,19 @@
+@font-face {
+  font-family: "tabler-icons";
+  font-style: normal;
+  font-weight: 400;
+  src: url('/public/tabler.231017.woff2') format('woff2');
+}
+
+.icon {
+  font-family: "tabler-icons";
+  font-style: normal;
+  font-weight: 400;
+  font-variant: normal;
+  text-transform: none;
+  text-decoration: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  speak: none;
+}
diff --git a/assets/index.less b/assets/index.less
index 208d16d..401a5d6 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -1 +1,37 @@
-body {}
+body {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  background: var(--gradient);
+}
+
+main {
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  gap: 0.5rem;
+}
+
+.logo {
+  @size: 4rem;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .logo-text {
+    font-size: @size;
+    font-weight: 400;
+    font-family: "Ubuntu";
+    text-transform: uppercase;
+  }
+
+  .logo-hex {
+    font-size: @size;
+    user-select: none;
+  }
+}
diff --git a/assets/theme.less b/assets/theme.less
new file mode 100644
index 0000000..704955f
--- /dev/null
+++ b/assets/theme.less
@@ -0,0 +1,26 @@
+.theme-mixin(@light: bool) {
+  @bg: if(@light, #e8e8ff, #181822);
+  @fg: if(@light, #111111, #eeeeee);
+  @mult: if(@light, 0.75, 2.75);
+
+  --bg: @bg;
+  --fg: @fg;
+  --color1: hsl(hue(@bg), saturation(@bg) * @mult, lightness(@bg) * @mult);
+  --color2: hsl(hue(@bg) + 40, saturation(@bg) * @mult, lightness(@bg) * @mult);
+  --gradient: linear-gradient(135deg, var(--color1) 0%, var(--bg) 25%, var(--bg) 75%, var(--color2) 100%);
+}
+
+body {
+  .theme-mixin(true);
+
+  @media (prefers-color-scheme: dark) {
+    .theme-mixin(false);
+  }
+
+  &.dark {
+    .theme-mixin(false);
+  }
+
+  background: var(--bg);
+  color: var(--fg);
+}
diff --git a/public/tabler.231017.woff2 b/public/tabler.231017.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..13bb27456b4fce603fe7af508e4e419535aba0a6
GIT binary patch
literal 1556
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
G1^@uXug{7A

literal 0
HcmV?d00001

diff --git a/views/index.html b/views/index.html
index 5a8c95b..f02dc4f 100644
--- a/views/index.html
+++ b/views/index.html
@@ -4,20 +4,24 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>PrivacyHex</title>
+    <link rel="stylesheet" href={{ GetAsset "theme.css" }}>
+    <link rel="stylesheet" href={{ GetAsset "index.css" }}>
+    <link rel="stylesheet" href={{ GetAsset "icon.css" }}>
   </head>
   <body>
     <main>
       <div class="logo">
         <span class="logo-text">Privacy</span>
+        <span class="logo-hex icon">&#xec02;</span>
       </div>
       <form action="/goto" method="get">
         <label>
           <input type="text" name="q" placeholder="Search query or URL">
         </label>
-        <label>
-          <input type="clear">
+        <label class="input-clear">
+          <input type="reset">
         </label>
-        <label>
+        <label class="input-submit">
           <input type="submit">
         </label>
       </form>