ref: Refactor css

- Move to display to flex
- Move away from `px`. Now most of the size are using `em`

1 files changed, 13 insertions, 8 deletions

diff --git a/index.html b/index.html
index 54231b4..9fad9fe 100644
--- a/index.html
+++ b/index.html
@@ -27,18 +27,18 @@ body {
 }
 
 header {
-    position: relative;
+    display: flex;
+    justify-content: space-between;
     margin: auto;
-    margin-bottom: 20px;
+    margin-bottom: 1em;
     background: #0062cc;
-    padding: 10px;
+    padding: .75em;
     max-width: 960px;
 }
 
 nav {
-    position: absolute;
-    top: 10px;
-    right: 10px;
+    top: .75em;
+    right: .75em;
 }
 
 .warning {
@@ -59,6 +59,7 @@ nav {
   color: #000;
   border-radius: 0;
   text-decoration: none;
+  transition: 0.5s all;
 }
 
 .btn:hover {
@@ -72,10 +73,14 @@ nav li {
 
 .section {
     justify-content: center;
-    margin-bottom: 20px;
+    margin-bottom: 1em;
     display: flex;
 }
 
+.section input {
+    max-width: 10em;
+}
+
 .form-ctl {
     border-radius: 0;
     border-color: #888;
@@ -95,7 +100,7 @@ main {
             <nav>
                 <ul>
                     <li>
-                    <a class="btn" href="https://git.sr.ht/~gabrielgio/tres">Código fonte ➤</a>
+                        <a class="btn" href="https://git.sr.ht/~gabrielgio/tres">Código fonte ➤</a>
                     </li>
                 </ul>
             </nav>