responsive step added

rustnl · Jan 9, 2024 · 754a5e2 · 754a5e2
1 parent ac8c747
commit 754a5e2
Show file tree

Hide file tree

Showing 10 changed files with 195 additions and 193 deletions.
diff --git a/index.html b/index.html
@@ -63,7 +63,7 @@ <h1>Rust what?</h1>
       </section>
       <section class="container space-y-12">
         <div class="space-y-12 md:grid md:cols-2 md:space-y-0">
-          <div class="space-y-6 md:space-y-12 xl:px-12">
+          <div class="space-y-6 md:space-y-12 sm:px-6 xl:px-12">
             <h3 class="text-2xl">Schedule <strong>day 1</strong></h3>
             <ul class="timetable">
               <li>
@@ -111,7 +111,7 @@ <h3 class="text-2xl">Schedule <strong>day 1</strong></h3>
               </li>
             </ul>
           </div>
-          <div class="space-y-6 xl:space-y-12 xl:px-12">
+          <div class="space-y-6 xl:space-y-12 sm:px-6 xl:px-12">
             <h3 class="text-2xl">Schedule <strong>day 2</strong></h3>
             <ul class="timetable">
               <li>
@@ -155,7 +155,7 @@ <h3 class="text-2xl">Schedule <strong>day 2</strong></h3>
           <div class="benefit">
             <div class="icon"></div>
             <div>
-              <strong>First edition</strong>in Amsterdam in 2023
+              <strong>First edition</strong> in Amsterdam in 2023
             </div>
           </div>
           <div class="benefit">

diff --git a/sass/_maps.scss b/sass/_maps.scss
@@ -2,6 +2,6 @@ $breakpoints: (
   'sm': 40rem,
   'md': 48rem,
   'lg': 64rem,
-  'xl': 80rem,
+  'xl': 75rem,
   'xxl': 90rem,
 );
diff --git a/sass/components/_benefits.scss b/sass/components/_benefits.scss
@@ -17,7 +17,7 @@
   padding: var(--space-12) var(--space-6);
   text-align: center;
 
-  @include mixins.breakpoint(lg) {
+  @include mixins.breakpoint(md) {
     padding: var(--space-24) var(--space-6);
   }
 

diff --git a/sass/components/_hero.scss b/sass/components/_hero.scss
@@ -50,7 +50,7 @@
     bottom: 0;
     content: '';
     height: var(--space-6);
-    max-width: 41.5rem;
+    max-width: 44.25rem;
     position: absolute;
     width: 100%;
   }

diff --git a/sass/components/_location.scss b/sass/components/_location.scss
@@ -3,7 +3,7 @@
 .location {
   position: relative;
 
-  @include mixins.breakpoint(md) {
+  @include mixins.breakpoint(sm) {
     display: grid;
     grid-template-areas: 
     "a b"
@@ -37,7 +37,7 @@
   > .ferris {
     display: none;
 
-    @include mixins.breakpoint(md) {
+    @include mixins.breakpoint(sm) {
       align-items: center;
       aspect-ratio: 16 / 9;
       display: flex;
@@ -51,7 +51,7 @@
     }
 
     img {
-      @include mixins.breakpoint(md) {
+      @include mixins.breakpoint(sm) {
         rotate: -30deg;
         width: 144px;
       }
@@ -70,7 +70,7 @@
   .image:nth-of-type(1) {
     aspect-ratio: 16 / 18;
 
-    @include mixins.breakpoint(md) {
+    @include mixins.breakpoint(sm) {
       aspect-ratio: auto;
       grid-area: a;
     }
@@ -90,7 +90,7 @@
   .image:nth-of-type(2) {
     aspect-ratio: 16 / 9;
 
-    @include mixins.breakpoint(md) {
+    @include mixins.breakpoint(sm) {
       grid-area: b;
     }
 
@@ -109,7 +109,7 @@
   .image:nth-of-type(3) {
     display: none;
 
-    @include mixins.breakpoint(md) {
+    @include mixins.breakpoint(sm) {
       aspect-ratio: 16 / 9;
       background-color: var(--color-yellow-400);
       grid-area: c;
@@ -119,7 +119,7 @@
     }
 
     &::after {
-      @include mixins.breakpoint(md) {
+      @include mixins.breakpoint(sm) {
         background-color: var(--color-yellow-500);
         content: '';
         inset: 0 50% 0 0;
@@ -128,21 +128,21 @@
     }
 
     &:has(:hover) .ferris {
-      @include mixins.breakpoint(md) {
+      @include mixins.breakpoint(sm) {
         translate: -24px;
       }
     }
 
     &:has(:hover) .ferris-arms {
-      @include mixins.breakpoint(md) {
+      @include mixins.breakpoint(sm) {
         opacity: 0;
         translate: 32px;
       }
     }
 
     > .ferris,
     > .ferris-arms {
-      @include mixins.breakpoint(md) {
+      @include mixins.breakpoint(sm) {
         background-repeat: no-repeat;
         background-size: contain;
         height: 120px;
@@ -158,7 +158,7 @@
     } 
 
     > .ferris {
-      @include mixins.breakpoint(md) {
+      @include mixins.breakpoint(sm) {
         background-image: url('./images/ferris.png');
         transition-duration: 750ms;
         transition-property: translate;
@@ -167,7 +167,7 @@
     }
 
     > .ferris-arms {
-      @include mixins.breakpoint(md) {
+      @include mixins.breakpoint(sm) {
         background-image: url('./images/ferris-arms.png');
         background-position: center -12px;
         transition-delay: 250ms;

diff --git a/sass/components/_timetable.scss b/sass/components/_timetable.scss
@@ -5,12 +5,13 @@
 
   li {
     display: flex;
-    gap: var(--space-6);
+    gap: var(--space-3);
     padding-block: var(--space-6);
 
-    @include mixins.breakpoint(lg) {
+    @include mixins.breakpoint(xl) {
       align-items: center;
       font-size: var(--font-size-lg);
+      gap: var(--space-6);
     }
 
     &:not(:first-child) {

diff --git a/sass/global/_root.scss b/sass/global/_root.scss
@@ -26,7 +26,7 @@
     --space-#{$i}: calc(0.25rem * #{$i});
   }
 
-  @include mixins.breakpoint(lg) {
+  @include mixins.breakpoint(xl) {
     --font-size-scale: 1.414;
   }
 }
diff --git a/sass/layout/_container.scss b/sass/layout/_container.scss
@@ -3,7 +3,7 @@
 .container {
   margin-inline: auto;
   padding-inline: var(--space-4);
-  width: min(100%, 90rem);
+  width: min(100%, 96rem);
 
   @include mixins.breakpoint(md) {
     padding-inline: var(--space-6);