From eb7cd3b3384976509ead7f9e0d76afe1e3b47b4a Mon Sep 17 00:00:00 2001
From: André Oliveira <37463445+SpecialAro@users.noreply.github.com>
Date: Wed, 6 Jul 2022 13:11:17 +0100
Subject: Fix styling on welcome screen (#433)

---
 src/styles/welcome.scss | 203 ++++++++++++++++++++++++++----------------------
 1 file changed, 109 insertions(+), 94 deletions(-)

diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss
index 3ffc3f227..3f90964a6 100644
--- a/src/styles/welcome.scss
+++ b/src/styles/welcome.scss
@@ -1,120 +1,135 @@
-.auth .welcome {
-  height: auto;
+.auth {
+  height: calc(100% - 28px);
 
-  &__content {
-    align-items: center;
-    color: #fff;
-    display: flex;
-    justify-content: center;
+  .welcome {
     height: auto;
-  }
-
-  &__logo {
-    width: 100px;
-  }
+    width: 480px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
 
-  &__text {
-    h1 {
-      font-size: 60px;
-      letter-spacing: -0.4rem;
-      margin-bottom: 5px;
-      color: rgb(255, 255, 255);
-      justify-content: center;
-      margin-top: 5%;
+    &__content {
+      align-items: center;
+      color: #fff;
       display: flex;
+      justify-content: center;
+      height: auto;
     }
 
-    h2 {
-      margin-bottom: 0;
-      margin-left: 2px;
+    &__logo {
+      width: 100px;
     }
 
-    &__change-server {
-      display: flex;
-      margin: 10% auto auto auto;
-      justify-content: center;
-      color: #999;
+    &__text {
+      h1 {
+        font-size: 60px;
+        letter-spacing: -0.4rem;
+        margin-bottom: 5px;
+        color: rgb(255, 255, 255);
+        justify-content: center;
+        margin-top: 5%;
+        display: flex;
+      }
+
+      h2 {
+        margin-bottom: 0;
+        margin-left: 2px;
+      }
+
+      &__change-server {
+        display: flex;
+        margin: 10% auto auto auto;
+        justify-content: center;
+        color: #999;
+      }
     }
-  }
-
-  &__services {
-    height: 100%;
-    margin-left: -450px;
-    max-height: 600px;
-    max-width: 800px;
-    width: 100%;
-  }
 
-  &__buttons {
-    display: block;
-    margin-top: 100px;
-    text-align: center;
-    height: auto;
-
-    .button {
-      margin-right: 25px;
+    &__services {
+      height: 100%;
+      margin-left: -450px;
+      max-height: 600px;
+      max-width: 800px;
+      width: 100%;
     }
-  }
 
-  .button {
-    border-color: #fff;
-    color: #fff;
-    cursor: pointer;
+    &__buttons {
+      display: block;
+      margin-top: 100px;
+      text-align: center;
+      height: auto;
 
-    &:hover {
-      background: #fff;
-      color: $theme-brand-primary;
-    }
+      @media screen and (max-height: 750px) {
+        margin-top: 70px;
+      }
 
-    &__inverted {
-      background: #fff;
-      color: $theme-brand-primary;
+      .button {
+        margin-right: 25px;
+      }
     }
 
-    &__inverted:hover {
-      background: none;
+    .button {
+      border-color: #fff;
       color: #fff;
+      cursor: pointer;
+
+      &:hover {
+        background: #fff;
+        color: $theme-brand-primary;
+      }
+
+      &__inverted {
+        background: #fff;
+        color: $theme-brand-primary;
+      }
+
+      &__inverted:hover {
+        background: none;
+        color: #fff;
+      }
+
+      &__change-server {
+        display: flex;
+        margin: 0 0 0 1%;
+        color: #999;
+        text-decoration: underline;
+      }
+
+      &__change-server:hover {
+        display: flex;
+        margin: 0 0 0 1%;
+        color: rgb(20, 122, 255);
+        text-decoration: none;
+      }
     }
 
-    &__change-server {
-      display: flex;
-      margin: 0 0 0 1%;
-      color: #999;
-      text-decoration: underline;
-    }
-
-    &__change-server:hover {
+    &__featured-services {
+      align-items: center;
+      background: #fff;
+      border-radius: 6px;
       display: flex;
-      margin: 0 0 0 1%;
-      color: rgb(20, 122, 255);
-      text-decoration: none;
+      flex-wrap: wrap;
+      margin: 80px auto 0 auto;
+      padding: 20px 20px 5px;
+      text-align: center;
+      width: 480px;
+      height: auto;
+      @media screen and (max-height: 700px) {
+        display: none;
+      }
     }
-  }
 
-  &__featured-services {
-    align-items: center;
-    background: #fff;
-    border-radius: 6px;
-    display: flex;
-    flex-wrap: wrap;
-    margin: 80px auto 0 auto;
-    padding: 20px 20px 5px;
-    text-align: center;
-    width: 480px;
-    height: auto;
-  }
-
-  &__featured-service {
-    margin: 0 10px 15px;
-    height: 35px;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: 0.5s filter, 0.5s opacity;
-    }
-    width: 35px;
-
-    img {
-      width: 35px;
+    &__featured-service {
+      margin: 0 10px 15px;
       height: 35px;
+      @media (prefers-reduced-motion: no-preference) {
+        transition: 0.5s filter, 0.5s opacity;
+      }
+      width: 35px;
+
+      img {
+        width: 35px;
+        height: 35px;
+      }
     }
   }
 }
-- 
cgit v1.2.3-54-g00ecf