fix: better responsivenss display component

Proof-Of-Humanity · Jul 26, 2024 · 043a223 · 043a223
1 parent e0fa05f
commit 043a223
Showing 1 changed file with 106 additions and 114 deletions.
diff --git a/components/Display/style.module.scss b/components/Display/style.module.scss
@@ -2,144 +2,136 @@
 @use "@styles/media";
 
 .main {
-    display: flex;
-    position: relative;
+  display: flex;
+  position: relative;
+  width: 100%;
+  min-height: calc(748px + (180 * (100vw - 400px) / (560 - 360)));
+  padding: 0 16px;
+
+  &::before {
+    content: "";
+    position: absolute;
+    height: 100%;
     width: 100%;
-    min-height: 740px;
-    padding: 0 16px;
+    left: 51%;
+    transform: translateX(-50%);
+    margin-top: 392px;
+    z-index: -1;
+    background-image: url("../../assets/poster.png");
+    background-repeat: no-repeat;
+    background-size: 100%;
+  }
+
+  @include media.bp("phablet") {
+    min-height: 920px;
 
     &::before {
-        content: "";
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        right: 0;
-        margin-top: 392px;
-        z-index: -1;
-        background-image: url("../../assets/poster.png");
-        background-repeat: no-repeat;
-        background-size: 100%;
+      height: 600px;
+      width: 600px;
     }
+  }
 
-    @include media.bp("phone") {
-        min-height: 820px;
-    }
-
-    @include media.bp("phone-wide") {
-        min-height: 880px;
-    }
-
-    @include media.bp("phablet") {
-        min-height: 920px;
-
-        &::before {
-            height: 600px;
-            width: 600px;
-            left: 50%;
-            transform: translateX(-50%);
-        }
-    }
+  @include media.bp("desktop") {
+    min-height: calc(100vh - 82px);
+    height: auto;
+    margin: 0 64px 64px;
+    padding: 100px 0 132px 16px;
 
-    @include media.bp("desktop") {
-        min-height: calc(100vh - 82px);
-        height: auto;
-        margin: 0 64px 64px;
-        padding: 100px 0 132px 16px;
-
-        &::before {
-            width: 50%;
-            top: 0;
-            left: auto;
-            transform: none;
-            bottom: auto;
-            margin-top: 60px;
-            margin-right: 80px;
-        }
+    &::before {
+      width: 50%;
+      top: 0;
+      left: auto;
+      transform: none;
+      bottom: auto;
+      margin-top: 60px;
+      margin-right: 80px;
+      right: 0;
     }
+  }
 
-    @include media.bp("desktop-wide") {
-        padding: 100px 0 312px 128px;
-    }
+  @include media.bp("desktop-wide") {
+    padding: 100px 0 312px 128px;
+  }
 }
 
 .content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    @include media.bp("desktop") {
-        width: 30%;
-        align-items: flex-start;
-    }
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @include media.bp("desktop") {
+    width: 30%;
+    align-items: flex-start;
+  }
 }
 
 .title {
-    display: flex;
-    flex-direction: column;
-    margin: 32px 0 10px;
-    line-height: 1.2;
-    
-    font-size: 3.5em;
-    color: colors.$text-primary;
-    font-weight: 300;
-    
-    & strong {
-      font-weight: 600;
-    }
-    
-    @include media.bp("desktop") {
-        align-items: flex-start;
-        font-size: 4em;
-        margin: 0 0 20px;
-    }
+  display: flex;
+  flex-direction: column;
+  margin: 32px 0 10px;
+  line-height: 1.2;
+
+  font-size: 3.5em;
+  color: colors.$text-primary;
+  font-weight: 300;
+
+  & strong {
+    font-weight: 600;
+  }
+
+  @include media.bp("desktop") {
+    align-items: flex-start;
+    font-size: 4em;
+    margin: 0 0 20px;
+  }
 }
 
 .text {
-    color: colors.$text-secondary;
-    margin: 0 0 32px 0;
-    background: radial-gradient(50% 50% at 50% 50%, white 50%, hsla(0, 0%, 100%, 0.50) 90%, transparent 100%);
-    text-align: center;
-
-    @include media.bp("tablet-small") {
-        width: 600px;
-    }
-
-    @include media.bp("desktop") {
-        text-align: left;
-        width: auto;
-    }
+  color: colors.$text-secondary;
+  margin: 0 0 32px 0;
+  background: radial-gradient(50% 50% at 50% 50%, white 50%, hsla(0, 0%, 100%, 0.50) 90%, transparent 100%);
+  text-align: center;
+
+  @include media.bp("tablet-small") {
+    width: 600px;
+  }
+
+  @include media.bp("desktop") {
+    text-align: left;
+    width: auto;
+  }
 }
 
 .action {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 24px;
-    margin-bottom: 24px;
-
-    @include media.bp("tablet-small") {
-        margin-bottom: 32px;
-    }
-
-    @include media.bp("desktop") {
-        margin-bottom: 60px;
-    }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+  margin-bottom: 24px;
+
+  @include media.bp("tablet-small") {
+    margin-bottom: 32px;
+  }
+
+  @include media.bp("desktop") {
+    margin-bottom: 60px;
+  }
 }
 
 .builtby {
-    display: flex;
-    @include media.bp("tablet-small") {
-    }
+  display: flex;
+  @include media.bp("tablet-small") {
+  }
 }
 
 .backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100vh;
-    background-color: hsla(0, 0%, 0%, 0.5);
-    z-index: 100;
-    display: grid;
-    place-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: hsla(0, 0%, 0%, 0.5);
+  z-index: 100;
+  display: grid;
+  place-content: center;
 }