better frontend

TheBaum123 · May 21, 2023 · 81a8a34 · 81a8a34
1 parent dc17c2a
commit 81a8a34
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/public/index.html b/public/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Chat</title>
     <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="https://thebaum123.github.io/favicon.png" type="image/x-icon">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
@@ -23,7 +24,7 @@
     </dialog>
     <form action="" id="send-form">
         <input maxlength="2500" type="text" name="" id="send-box">
-        <input type="submit" id="sender">
+        <input type="submit" id="sender" value="➤">
     </form>
     <script src="chatClient.js"></script>
 </body>

diff --git a/public/style.css b/public/style.css
@@ -8,7 +8,7 @@
     --blue: #83a598;
     --green: #b8bb26;
 
-    font-size: 2rem;
+    font-size: clamp(1rem, 5vh, 2rem);
     font-family: 'Roboto Mono', monospace;
 
     scroll-behavior: smooth;
@@ -45,7 +45,7 @@ body {
     padding: 2%;
     width: 98%;
     background-color: var(--bg);
-    height: 5%;
+    height: clamp(50px, 10%, 100px);
 }
 
 .received-message,
@@ -88,7 +88,6 @@ body {
     overflow-x: hidden;
 }
 
-#name-box,
 #send-box,
 #sender {
     background-color: var(--bg_h);
@@ -98,15 +97,19 @@ body {
     border-radius: 100vh;
     transition: 250ms;
     line-height: 2em;
-    width: 20%;
     position: relative;
 }
 
+#sender {
+    aspect-ratio: 1/1;
+    font-size: 1rem;
+}
+
 #send-box {
-    width: 50%;
+    width: 70%;
+    font-size: clamp(1rem, 5vh, 2rem);
 }
 
-#name-box:focus,
 #send-box:focus,
 #sender:active {
     border: var(--red) 5px solid;
@@ -141,4 +144,21 @@ body {
     to {
         transform: translateX(0);
     }
+}
+
+@media only screen and (max-width: 1200px) {
+    #login-form {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    #login-form>* {
+        margin: 2%;
+    }
+}
+
+@media only screen and (max-width: 900px) {
+    #messages-wrapper>* {
+        border-radius: 0.5rem;
+    }
 }