Optimized for phones

pages/home/style.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.cdnfonts.com/css/google-sans');
+
 /* Material Customization */
 :root {
     --pure-material-primary-rgb: 255, 191, 0;
@@ -15,15 +17,15 @@ body {
 .registration {
     position: relative;
     border-radius: 8px;
-    padding: 16px 48px;
+    padding: 16px 48px 30px 30px;
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
     overflow: hidden;
     background-color: white;
 }
 
-h1 {
+.registration h1 {
     margin: 32px 0;
-    font-family: "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system;
+    font-family: 'Product Sans', sans-serif;
     font-weight: normal;
     text-align: center;
 }
@@ -35,114 +37,69 @@ h1 {
 }
 
 p {
-    font-family: "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system;
+    font-family: 'Product Sans', sans-serif;
     font-weight: normal;
     text-align: center;
+    color: #2b2b2b;
 }
 
 a.matter-button-contained {
+    font-family: 'Product Sans', sans-serif;
     text-decoration: none;
 }
 
 a {
     color: rgb(var(--pure-material-primary-rgb));
+    font-family: 'Product Sans', sans-serif;
     text-decoration: none;
 }
 
 a:hover {
-    text-decoration: underline;
-}
-
-button {
-    display: block !important;
-    margin: 32px auto;
-}
-
-.done,
-.progress {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background-color: white;
-    visibility: hidden;
-}
-
-.done {
-    transition: visibility 0s 1s;
-}
-
-.signed > .done {
-    visibility: visible;
-}
-
-.done > a {
-    display: inline-block;
     text-decoration: none;
 }
 
-.progress {
-    opacity: 0;
+.matter-button-contained {
+    margin-top: 10px;
 }
 
-.signed > .progress {
-    animation: loading 4s;
-}
+@media only screen and (max-width: 980px) {
 
-@keyframes loading {
-    0% {
-        visibility: visible;
+    .registration {
+        position: fixed;
+        border-radius: none;
+        padding: auto;
+        box-shadow: none;
+        overflow: visible;
     }
-    12.5% {
-        opacity: 0;
+
+    .registration {
+        width: 95%;
+        height: auto;
     }
-    25% {
-        opacity: 1;
+
+    .registration h1 {
+        font-size: 64px;
     }
-    87.5% {
-        opacity: 1;
+
+    body {
+        background: none;
+        min-height: 85vh;
     }
-    100% {
-        opacity: 0;
+
+    p {
+        font-size: 42px;
     }
-}
 
-.left-footer,
-.right-footer {
-    position: fixed;
-    padding: 14px;
-    bottom: 14px;
-    color: #555;
-    background-color: #eee;
-    font-family: "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system;
-    font-size: 14px;
-    line-height: 1.5;
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-}
+    .matter-button-contained {
+        padding-top: 0.5em;
+        padding-bottom: 1.3em;
+        padding-left: 0.65em;
+        padding-right: 0.65em;
+        border-radius: 7px;
+    }
 
-.left-footer {
-    left: 0;
-    border-radius: 0 4px 4px 0;
-    text-align: left;
-}
+    a.matter-button-contained {
+        font-size: 3.2em;
+    }
 
-.right-footer {
-    right: 0;
-    border-radius: 4px 0 0 4px;
-    text-align: right;
-}
-
-.left-footer > a,
-.right-footer > a {
-    color: black;
-}
-
-.left-footer > a:hover,
-.right-footer > a:hover {
-    text-decoration: underline;
 }