update style

GabrielCzar · GabrielCzar · commit f1babddf1dd2 · 2018-11-06T22:22:36.000-03:00
diff --git a/render-gist.html b/render-gist.html
@@ -8,23 +8,23 @@
     <title>Render Raw Gist</title>
     <link rel="stylesheet" href="style.css" />
 </head>
-<body>
 
+<body>
     <main>
-        <h1>Render Raw Gist</h1>
-
-        <div>
-            <input id="urlHtml" placeholder="HTML raw gist file url" />
+        <div class="container">
+            <h1>Render Raw Gist</h1>
 
-            <input id="urlCss" placeholder="CSS raw gist file url" />
-        </div>
+            <div>
+                <input id="urlHtml" placeholder="HTML raw gist file url" />
 
-        <button onclick="renderContent()">Render</button>
+                <input id="urlCss" placeholder="CSS raw gist file url" />
+            </div>
 
+            <button onclick="renderContent()">Render</button>
+        </div>
     </main>
 
     <script src="app.js"></script>
-
 </body>
 
 </html>
diff --git a/style.css b/style.css
@@ -8,22 +8,24 @@
 }
 
 body {
-    background: linear-gradient(0deg, #0288d1 0%, #53cde2 100%);                      
+    background: linear-gradient(0deg, #0288d1 0%, #53cde2 100%);
 }
 
 main {
-    display: flex;
-    flex-flow: column;
-    align-items: center;
+    display: grid;
+    width: 100vw;
+    height: 100vh;
     justify-content: center;
+    align-content: center;
 }
 
 h1 {
+    text-align: center;
     font-size: 54px;
     font-weight: 800;
     text-transform: uppercase;
     color: #edf9fc;
-}   
+}
 
 input {
     margin: 8px;
@@ -35,16 +37,24 @@ input {
     line-height: 1.5em;
     background-color: transparent;
     color: white;
-    
 }
 
-::placeholder { color: #53cde2 }
-:-ms-input-placeholder { color: #53cde2 }
-::-ms-input-placeholder { color: #53cde2 }
+::placeholder {
+    color: #53cde2
+}
+
+:-ms-input-placeholder {
+    color: #53cde2
+}
+
+::-ms-input-placeholder {
+    color: #53cde2
+}
 
 button {
-    margin: 23px;   
-    padding: 12px 34px 12px 34px;  
+    width: 10vw;
+    margin: 23px;
+    padding: 12px 34px 12px 34px;
     border: 1px solid white;
     border-radius: 160px;
     background: transparent;
@@ -70,13 +80,11 @@ button {
 button:hover {
     background-color: #edf9fc;
     border: 1px solid #edf9fc;
-    color: #0289d1ce ;
+    color: #0289d1ce;
 }
 
-@media (max-height: 950px) { main { height: 860px; } }
-@media (max-height: 850px) { main { height: 760px; } }
-@media (max-height: 750px) { main { height: 660px; } }
-@media (max-height: 650px) { main { height: 560px; } }
-@media (max-height: 550px) { main { height: 460px; } }
-@media (max-height: 350px) { main { height: 320px; } }
-@media (min-height: 950px) { main { height: 1000px; } }
+.container {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+}
