Make responsive

website/index.html

@@ -4,6 +4,7 @@
     <link rel="shortcut icon" href="favicon.png">
     <link rel="stylesheet" type="text/css" href="style.css">
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Dank mnemonic seed phrases.">
     <meta property="og:site_name" content="Doge Seed">
     <meta property="og:title" content="Doge Seed">

website/style.css

@@ -4,6 +4,22 @@
 body {
   background: #f2ede0;
   min-width: 960px;
+  font-size: 1rem;
+}
+
+@media only screen and (max-width: 800px) {
+  body {
+    font-size: 2rem;
+  }
+  .generator .seed-text {
+    font-size: 1.2rem;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  body {
+    font-size: 2.4rem;
+  }
 }
 
 *:focus {
@@ -39,25 +55,19 @@ a:hover {
 }
 
 .generator .seed-text-container {
-  position: relative;
   background-color: rgba(0, 0, 0, 0.05);
   border: 2px solid rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   text-align: center;
   font-size: 1.4em;
   font-family: "Comic Sans MS", cursive, sans-serif;
-  height: 4em;
   margin-bottom: 1em;
 }
 
 .generator .seed-text {
-  position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-  box-sizing: border-box;
-  padding: 0 1em;
+  padding: 1em 0.5em;
 }
 
 .generator .seed-text span:nth-of-type(1),
@@ -142,6 +152,7 @@ a:hover {
   cursor: pointer;
   border-radius: 3px;
   transition: background-color 0.2s ease;
+  touch-action: manipulation;
 }
 .regenerate-seed:hover {
   background-color: #42a042;