Fix css centering

josh-keller · May 5, 2022 · 9db3c09 · 9db3c09
1 parent 3cc258a
commit 9db3c09
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 13 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -73,8 +73,24 @@ select {
   }
 }
 
+html {
+  width: 100%;
+  padding: 1em 3em;
+  font-family: sans-serif;
+}
+
+header, body, main {
+  width: 100%;
+}
+
+button {
+  display: block;
+  margin: 2em auto;
+}
+
 h1 {
-  margin-top: 1.5em;
+  margin: 1.5em auto 0;
+  text-align: center;
 }
 
 h2 {
@@ -85,11 +101,6 @@ h3 {
   margin-top: 1em;
 }
 
-html {
-  padding: 1em 3em;
-  font-family: sans-serif;
-}
-
 div.request {
   margin-top: 1em;
 }

diff --git a/public/index.html b/public/index.html
@@ -4,12 +4,16 @@
     <title>Welcome to Rekwest Bin</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="css/style.css" rel="stylesheet">
+    <link href="/css/style.css" rel="stylesheet">
   </head>
   <body>
-    <h1>Welcome to Rekwest Bin</h1>
-    <form method='POST' action='/new/'>
-      <button type='submit'>Create a bin</button>
-    </form>
+    <header>
+      <h1>Rekwest Bin</h1>
+    </header>
+    <main>
+      <form method='POST' action='/new/'>
+        <button type='submit'>Create a bin</button>
+      </form>
+    </main>
   </body>
 </html>
diff --git a/templates/inspect.html b/templates/inspect.html
@@ -9,8 +9,9 @@
   </head>
   <body>
     <header>
-      <h1>Bin: {{.BinId}}</h1>
-      <p> Bin created: {{.Timestamp}} </p>
+      <h1>Rekwest Bin</h1>
+      <h2>BinID: {{.BinId}}</h2>
+      <p>Bin created at: {{.Timestamp}} </p>
       <p>Make a request to: http://{{.Host}}/r/{{.BinId}}</p>
       <p>View request at: http://{{.Host}}/inspect/{{.BinId}}</p>
     </header>