Merge pull request #92 from casper-network/section-css-update

MODIFIED: various style improvements
casper-network · May 29, 2024 · 4b84455 · 4b84455
2 parents 2d4549d + 089e23c
commit 4b84455
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 3 deletions.
diff --git a/src/components/blocks/Hero.vue b/src/components/blocks/Hero.vue
@@ -243,11 +243,16 @@ div.hero {
       color: var(--color-black);
       font-weight: 300;
       flex: 1 0 40%;
+      text-wrap: pretty;
 
       span {
         font-weight: 300;
       }
 
+      @include breakpoint('m') {
+        min-width: 65vw;
+      }
+
       @include breakpoint('sm') {
         width: 100%;
         max-width: 100%;

diff --git a/src/components/blocks/Stack.vue b/src/components/blocks/Stack.vue
@@ -193,20 +193,24 @@ export default {
 
     p {
       font-weight: 300;
-      padding-left: 20px;
-      padding-right: 20px;
+
+      @include breakpoint('sm') {
+        padding-left: 20px;
+        padding-right: 20px;
+      }
     }
 
     & > .half {
       display: flex;
       width: 100%;
+      gap: 40px;
 
       & > div {
         width: 50%;
         max-width: 50%;
 
         &.content {
-          width: 33.33%;
+          width: 50%;
 
           @include breakpoint('sm') {
             width: 50vw;
@@ -280,6 +284,46 @@ export default {
       h2.h1 {
         color: var(--color-pelati);
       }
+
+      @include breakpoint('sm') {
+        & > .half {
+          & > div {
+            &.content {
+              width: 100%;
+              min-width: calc(100% - 40px);
+              z-index: 2;
+            }
+            &.media {
+              pointer-events: none;
+              user-select: none;
+              position: relative;
+              z-index: 1;
+              right: calc(25% - 20px);
+              width: calc(50vw + 20px);
+              min-width: calc(50vw + 20px);
+              height: inherit;
+              max-width: none;
+              transform: translate(-50%, 0);
+
+              @include breakpoint('s') {
+                right: calc(38% - 20px);
+                width: 100vw;
+                min-width: 100vw;
+              }
+
+              & > img {
+                opacity: 0.15;
+                height: 100%;
+                width: auto;
+                max-width: none;
+                transform: none;
+                left: 0;
+                top: auto;
+              }
+            }
+          }
+        }
+      }
     }
   }
 
@@ -317,6 +361,13 @@ export default {
                 max-width: none;
                 transform: none;
               }
+
+              @include breakpoint('sm') {
+                max-height: 33vh;
+              }
+              @include breakpoint('s') {
+                max-height: 180px;
+              }
             }
           }
         }