fix: responsiveness issues on display, introducing, footer, guide, pr…

…ocess
Proof-Of-Humanity · Jul 24, 2024 · e15f0d0 · e15f0d0
1 parent 8454e27
commit e15f0d0
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 32 deletions.
diff --git a/assets/icons/github.svg b/assets/icons/github.svg
diff --git a/assets/icons/telegram.svg b/assets/icons/telegram.svg
diff --git a/assets/icons/x.svg b/assets/icons/x.svg
diff --git a/components/Display/style.module.scss b/components/Display/style.module.scss
@@ -4,7 +4,7 @@
 .main {
     position: relative;
     width: 100%;
-    height: calc(100vh - 82px);
+    min-height: 740px;
     padding: 0 16px;
 
     &::before {
@@ -14,15 +14,27 @@
         height: 100%;
         width: 100%;
         right: 0;
-        margin-top: 248px;
+        margin-top: 260px;
         z-index: -1;
         background-image: url("../../assets/poster.png");
         background-repeat: no-repeat;
         background-size: 100%;
     }
 
+    @include media.bp("phone") {
+        min-height: 780px;
+    }
+
+    @include media.bp("phone-wide") {
+        min-height: 840px;
+    }
+
+    @include media.bp("phablet") {
+        min-height: 920px;
+    }
+
     @include media.bp("tablet-small") {
-        height: calc(100vh + 132px);
+        height: 920px;
 
         &::before {
             width: 80%;
@@ -38,6 +50,7 @@
     }
 
     @include media.bp("desktop") {
+        min-height: calc(100vh - 82px);
         height: auto;
         margin: 0 64px 64px;
         padding: 100px 0 132px 16px;
@@ -126,7 +139,6 @@
 
 .builtby {
     position: absolute;
-    left: 13%;
     bottom: 36px;
 
     @include media.bp("tablet-small") {

diff --git a/components/Introducing/style.module.scss b/components/Introducing/style.module.scss
@@ -72,21 +72,23 @@
   font-weight: bold;
   color: transparent;
   -webkit-text-stroke: 1.2px white;
-  text-align: left;
+  text-align: center;
 
   @include media.bp("desktop") {
     font-size: 36px;
     -webkit-text-stroke: 1.5px white;
+    text-align: left;
   }
 }
 
 .divider {
-  width: 4px;
-  height: 60px;
+  width: 60px;
+  height: 4px;
   background-color: #9414fc;
   margin: 20px 0;
 
   @include media.bp("desktop") {
+    width: 4px;
     height: 140px;
     margin: 0 40px;
   }

diff --git a/components/Process/style.module.scss b/components/Process/style.module.scss
@@ -26,7 +26,7 @@
     display: flex;
     align-items: center;
     flex-direction: column;
-    width: 372px;
+    width: 84vw;
     padding: 24px;
     border-radius: 24px;
     border: 1px solid colors.$stroke;

diff --git a/styles/styles.scss b/styles/styles.scss
@@ -51,29 +51,16 @@ nav {
 
 footer {
   padding: 24px;
-  display: grid;
-  grid-template-areas: 
-    "logo   social"
-    "kleros social";
+  display: flex;
+  flex-direction: column;
   place-items: center;
+  gap: 24px;
 
   border-top: 1px solid colors.$stroke;
 
-  > img {
-    grid-area: logo;
-  }
-
   .logos {
-    grid-area: social;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+    display: flex;
     gap: 24px;
-
-  }
-
-  .kleros {
-    grid-area: kleros;
-    margin: 12px 0;
   }
 
   @include media.bp("tablet-small") {
@@ -91,6 +78,7 @@ footer {
     .logos {
       display: flex;
       align-items: center;
+      justify-content: center;
     }
   }
 
@@ -137,12 +125,12 @@ section {
 .guide {
   display: flex;
   width: 80%;
-  margin: 48px auto 0;
+  margin: 32px auto 0;
   padding: 16px;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
-  gap: 16px;
+  gap: 12px;
 
   background: white;
   border: 1px solid colors.$stroke;
@@ -156,7 +144,7 @@ section {
     font-weight: 400;
 
     img {
-      margin: 0 10px 0 10px;
+      margin: 0 8px 0 0px;
     }
   }
 
@@ -174,10 +162,15 @@ section {
 
     .label {
       img {
-        margin: 0 22px 0 42px;
+        margin: 0 20px 0 42px;
       }
     }
   }
+
+  @include media.bp("desktop") {
+    margin: 48px auto 0;
+    gap: 16px;
+  }
 }
 
 button, .link-button {