feat: home page with URL conversion endpoint

style: mobile optimization

public/globals.css

@@ -0,0 +1,11 @@
+a {
+    color: #92adff;
+}
+
+
+html {
+    margin: 0;
+    padding: 0;
+    width: 100vw;
+    height: 100vh;
+}

public/home.css

@@ -0,0 +1,74 @@
+body {
+    background-color: #1b1f26;
+    font-family: sans-serif;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    height: 100vh;
+    width: 100vw;
+
+    overflow: hidden;
+    margin: 0;
+
+    color: white;
+}
+
+.container {
+    width: 40rem;
+}
+
+.footer {
+    font-size: 0.8rem;
+    text-align: center;
+}
+
+.view-form {
+    display: flex;
+    gap: .5rem;
+    align-items: center;
+}
+
+.view-input {
+    width: 100%;
+    padding: .5rem;
+    border: 2px solid transparent;
+    border-radius: 3px;
+
+    background-color: #2b303b;
+
+    color: white;
+
+    transition-duration: 200ms;
+}
+
+.view-input:focus {
+    outline: none;
+    border: 2px solid rgb(168, 168, 168);
+}
+
+.view-button {
+    padding: .5rem;
+    border: 2px solid transparent;
+    border-radius: 3px;
+
+    background-color: #2b303b;
+
+    color: white;
+
+    transition-duration: 200ms;
+
+    cursor: pointer;
+}
+
+.view-button:hover {
+    background-color: #3b404b;
+}
+
+@media screen and (max-width: 800px) {
+    body {
+        padding: 1rem;
+        box-sizing: border-box;
+    }
+}

public/question.css

@@ -2,13 +2,6 @@
     --code-bg: #36383d;
 }
 
-html {
-    margin: 0;
-    padding: 0;
-    width: 100vw;
-    height: 100vh;
-}
-
 body {
     margin: 0;
     width: 100vw;
@@ -57,10 +50,6 @@ pre {
     font-size: 0.8rem;
 }
 
-a {
-    color: #92adff;
-}
-
 .answer-divider {
     margin-top: 3rem;
     margin-bottom: 3rem;
@@ -99,4 +88,11 @@ img {
     border-radius: 5px;
     text-align: right;
     font-size: .8rem;
+}
+
+@media only screen and (max-width: 800px) {
+    body {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
 }