Merge pull request #17 from CodeBoxxTechSchool/ml/mobile-enhancement

Ml/mobile enhancement

Author: minuitcinq

src/pages/Home.jsx

@@ -181,11 +181,12 @@ function ScriptTitle({ index, children, dark }) {
   );
 }
 
-function SectionHead({ eyebrow, index, title, lede, children }) {
+function SectionHead({ eyebrow, index, title, lede, children, badge }) {
   return (
     <div className="section-head">
       <div className="d-flex flex-column gap-3">
         <ScriptTitle index={index}>{eyebrow}</ScriptTitle>
+        {badge}
         <h2 className="h2">{title}</h2>
         {lede ? <p className="lede">{lede}</p> : null}
       </div>
@@ -242,21 +243,22 @@ function DivisionBand({
   intro,
   left,
   aside,
+  badge,
 }) {
   return (
     <section id={id} className={'sect' + (alt ? ' sect-alt' : '')}>
       <div className="wrap">
         {aside ? (
           <div className="d-flex gap-5 align-items-start justify-content-between flex-wrap">
             <div className="division-main">
-              <SectionHead index={index} eyebrow={role} title={name} lede={lede} />
+              <SectionHead index={index} eyebrow={role} title={name} lede={lede} badge={badge} />
               {intro}
             </div>
             {aside}
           </div>
         ) : (
           <React.Fragment>
-            <SectionHead index={index} eyebrow={role} title={name} lede={lede} />
+            <SectionHead index={index} eyebrow={role} title={name} lede={lede} badge={badge} />
             {intro}
           </React.Fragment>
         )}
@@ -848,6 +850,7 @@ function Academy({ onEnroll }) {
       index="05"
       role={t('home.academy.role')}
       name={t('home.academy.name')}
+      badge={<Badge bg="brand">{t('home.academy.nextIntake')}</Badge>}
       after={
         <React.Fragment>
           <IntakeCalendar onEnroll={onEnroll} />
@@ -888,12 +891,9 @@ function Academy({ onEnroll }) {
       }
     >
       <div className="panel panel-sticky">
-        <div className="d-flex justify-content-between align-items-center gap-3">
-          <span className="kicker">
-            {topics[active].kicker || t('home.academy.cohortStructureLabel')}
-          </span>
-          <Badge bg="brand">{t('home.academy.nextIntake')}</Badge>
-        </div>
+        <span className="kicker">
+          {topics[active].kicker || t('home.academy.cohortStructureLabel')}
+        </span>
         <p className="pbody">{topics[active].detail}</p>
         {topics[active].people ? (
           <div className="people-grid people-grid-4">

src/styles/_chrome.scss

@@ -132,14 +132,37 @@
   .nav-item {
     height: auto;
     width: 100%;
-    padding: 12px 0;
+    flex-direction: column;
+    align-items: stretch;
+    padding: 0;
+
+    &:not(:last-child) {
+      box-shadow: inset 0 -1px 0 0 v.$ui-slate-200;
+    }
+
+    > a {
+      width: 100%;
+      justify-content: space-between;
+      padding: 16px 0;
+    }
   }
 
   .nav-dropdown {
     position: static;
-    margin: 8px 0 0;
+    width: 100%;
+    min-width: 0;
+    margin: 0 0 12px;
+    padding: 0;
+    border-radius: 0;
     box-shadow: none;
-    padding-left: 12px;
+    background: none;
+
+    a {
+      width: 100%;
+      padding: 12px 16px;
+      border-radius: v.$radius-md;
+      color: v.$ui-slate-500;
+    }
   }
 }
 

src/styles/_components.scss

@@ -225,7 +225,7 @@
   position: relative;
   width: 100%;
   min-height: 560px;
-  padding: 64px 48px;
+  padding: 64px 30px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -239,11 +239,20 @@
   h1 {
     margin: 0;
     max-width: 900px;
-    font-size: v.$text-hero;
+    font-size: v.$text-specimen;
     font-weight: v.$weight-black;
-    line-height: v.$leading-hero;
+    line-height: v.$leading-mobile-hero;
     color: v.$neutral-0;
   }
+
+  @media (min-width: 768px) {
+    padding: 64px 48px;
+
+    h1 {
+      font-size: v.$text-hero;
+      line-height: v.$leading-hero;
+    }
+  }
 }
 
 .hero-logo {

src/styles/_home.scss

@@ -72,6 +72,7 @@
   letter-spacing: 0.5px;
   text-transform: uppercase;
   color: v.$ui-slate-900;
+  overflow-wrap: break-word;
 
   &.active {
     color: v.$blue-500;
@@ -305,7 +306,7 @@
 // media query to collapse to 1 column on narrow viewports.
 .calendar-cols {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
 }
 // One row per Sanity `program` document that has intake rows — data-driven, not
 // fixed at 2, same spirit as `.calendar-cols`.
@@ -325,6 +326,10 @@
   background: v.$navy-500;
   border-radius: v.$radius-xl;
   padding: 48px;
+
+  @media (max-width: v.$breakpoint-md) {
+    padding: 24px;
+  }
 }
 .calendar-head {
   display: flex;
@@ -379,6 +384,7 @@
   display: flex;
   align-items: baseline;
   justify-content: space-between;
+  flex-wrap: wrap;
   gap: 16px;
 }
 .calendar-row-left {
@@ -391,6 +397,12 @@
   align-items: center;
   gap: 12px;
 }
+@media (max-width: v.$breakpoint-md) {
+  .calendar-row-left,
+  .calendar-row-right {
+    flex: 1 1 100%;
+  }
+}
 .calendar-date {
   font-size: v.$text-h3;
   font-weight: v.$weight-semibold;

src/styles/_layout.scss

@@ -12,18 +12,18 @@
 
 .grid2 {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 24px;
   align-items: start;
 }
 .grid3 {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 24px;
 }
 .grid4 {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 24px;
 }
 
@@ -37,9 +37,11 @@
   .grid2,
   .grid3,
   .grid4 {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
   }
   .sect {
     padding: 64px 0;
+    width: 100%;
+    overflow: hidden;
   }
 }

src/styles/_variables.scss

@@ -165,6 +165,7 @@ $text-nano: 10px;
 
 $leading-tight: 100%;
 $leading-hero: 72px;
+$leading-mobile-hero: 54px;
 $leading-body: 20px;
 
 $tracking-eyebrow: 1px;