Merge pull request #39 from marko-js/design-updates

chore: minor margin fixes

Author: DylanPiercey

src/routes/_home/tags/home-granular/home-granular.style.module.scss

@@ -40,7 +40,7 @@
   display: flex;
   flex-direction: column;
   order: 0;
-  margin-left: var(--root-bleed);
+  max-width: 35rem;
 
   @media (min-width: 90rem) {
     margin-left: 0;
@@ -125,10 +125,10 @@
   }
   @media (min-width: 64rem) {
     margin-bottom: 0;
-    padding: 5rem;
+    padding: 4rem;
     padding-top: 6rem;
     padding-bottom: 5rem;
-    margin-left: 3rem;
+    margin-left: 3.75rem;
     margin-right: var(--root-bleed);
     @media (prefers-color-scheme: light) {
       &::before {
@@ -140,7 +140,6 @@
         clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4rem), calc(100% - 4rem) 100%, 0 100%, 0 0);
       }
     }
-
     @media (prefers-color-scheme: dark) {
       border: 3px solid transparent;
       background-origin: border-box;
@@ -157,6 +156,10 @@
         );
     }
   }
+  @media (min-width: 90rem) {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
 
   > :first-child {
     filter: brightness(95%) grayscale(60%);

src/routes/_home/tags/home-streaming/home-streaming.style.module.scss

@@ -39,7 +39,7 @@
 .content {
   display: flex;
   flex-direction: column;
-  margin-right: var(--root-bleed);
+  max-width: 35rem;
   @media (min-width: 64rem) {
     order: 1;
   }
@@ -126,8 +126,8 @@
   }
   @media (min-width: 64rem) {
     margin-bottom: 0;
-    margin-right: 3rem;
-    padding: 5rem;
+    margin-right: 3.75rem;
+    padding: 4rem;
     padding-top: 6rem;
     padding-bottom: 5rem;
     margin-left: var(--root-bleed);
@@ -141,7 +141,6 @@
         clip-path: polygon(0 0, 4rem 0, 0 4rem, 0 100%, 100% 100%, 100% 0);
       }
     }
-
     @media (prefers-color-scheme: dark) {
       border: 3px solid transparent;
       background-origin: border-box;
@@ -158,6 +157,10 @@
         );
     }
   }
+  @media (min-width: 90rem) {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
 
   > :first-child {
     filter: brightness(95%) grayscale(60%);

src/routes/docs/+layout.style.module.scss

@@ -201,7 +201,7 @@ main {
     border: none;
     font-size: max(0.8rem, min(4dvw, 1.5rem));
     background-color: var(--section-color-dim);
-    border-radius: 1rem;
+    border-radius: 0.5rem;
     padding: 1.5rem;
     width: 100%;
     max-width: 100% !important;
@@ -211,7 +211,6 @@ main {
     position: relative;
     margin: 2rem 0;
     border: 1px solid var(--section-color);
-    background-color: color-mix(in srgb, var(--section-color-dim) 20%, var(--color-background));
     background-image: linear-gradient(to bottom left, color-mix(in srgb, var(--section-color-dim) 24%, var(--color-background)), color-mix(in srgb, var(--section-color-dim) 8%, var(--color-background)));
     padding: 1rem;
     padding-bottom: 0;