From 91d16dab6e7ee1a843b62e327caffcac1e8ac65d Mon Sep 17 00:00:00 2001 From: profitroll Date: Thu, 22 Dec 2022 12:59:50 +0100 Subject: [PATCH] Optimized for phones --- pages/home/style.css | 127 ++++++++++++++----------------------------- 1 file changed, 42 insertions(+), 85 deletions(-) diff --git a/pages/home/style.css b/pages/home/style.css index 8c429e9..bab0a7e 100644 --- a/pages/home/style.css +++ b/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; } \ No newline at end of file