[WIP]: add layout changes

src/_includes/modules/featured/course.njk

@@ -3,7 +3,7 @@
   {%- if module.heading -%}
     <h2>{{ module.heading }}</h2>
   {%- endif -%}
-  <ul>
+  <ul class="grid-col-3 unstyled-list">
     {%- for item in module.items -%}
       {%- set id = item | upper -%}
       <li>

src/pages/index.njk

@@ -10,12 +10,12 @@ meta:
   bodyClass: home
 ---
 {%- set hero = heros[featured['home']['hero']] -%}
-{%- set heroClass = "home-hero bg-mono-800 full-bleed" -%}
+{%- set heroClass = "home-hero bg-mono-800 full-bleed grid-col-1-2" -%}
 {%- include 'modules/hero.njk' -%}
 
 <section class="how-gymnasium-works">
   <h1>How Gymnasium Works</h1>
-  <ul>
+  <ul class="grid-col-4 unstyled-list">
     <li>
       <h2>Free Online Courses</h2>
       <p>Our courses are taught by industry experts. You can enroll anytime,
@@ -49,16 +49,3 @@ meta:
   </header>
   {%- include 'modules/jobs.njk' -%}
 </section>
-
-<section class="as-seen-in">
-  <header>
-    <h1>As Seen In</h1>
-  </header>
-  <ul>
-    {%- for i in range(1,6) -%}
-    <li>
-      <img src="https://placehold.co/200x50?text=logo {{ i }}" alt="Logo">
-    </li>
-    {%- endfor -%}
-  </ul>
-</section>

src/scss/base/_backgrounds.scss

@@ -18,6 +18,7 @@
         }
 
         // TODO: determine if this is the best way to handle a 'full bleed' approach
+        // TODO: this full bleed breaks on small screens (see the home hero for an example
         &.full-bleed {
           box-shadow: -30rem 0 var(--#{$color}-#{$shade}), 30rem 0 var(--#{$color}-#{$shade}), -70rem 0 var(--#{$color}-#{$shade}), 70rem 0 var(--#{$color}-#{$shade}), -140rem 0 var(--#{$color}-#{$shade}), 140rem 0 var(--#{$color}-#{$shade});
         }

src/scss/base/_colors.scss

@@ -10,6 +10,7 @@ $colors: (
   secondary: (
     100: hsl(19, 100%, 54%), // #ff5f14
   ),
+  // TODO: consider remapping this from dark (100) to light (900)
   mono: (
     100: hsl(0 0% 100%), // white
     200: hsl(0 0% 92%), // #ebebeb

src/scss/base/_layouts.scss

@@ -3,10 +3,46 @@
 // | -------------------------------------------------------------
 
 @use 'breakpoints' as *;
+@use 'variables' as *;
 
-// TODO: consider better naming conventions
-.layout-1fr-2fr {
+// Any class containing `grid-` will automatically display as a grid
+[class*="grid-"] {
   display: grid;
-  grid-template-columns: 1fr 2fr;
-  grid-gap: 2.6em;
+  gap: $grid-gap;
 }
+
+// Used in hero, course about MFE, courses index
+.grid-col-1-2 {
+  @media (min-width: 75em) {
+    grid-template-columns: 1fr 2fr;
+  }
+}
+
+// TODO: consider improved stacking/breakpoints, etc
+.grid-col-3 {
+  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+
+
+  // TODO: Check breakpoints for consistency
+  @media (min-width: 38em) and (max-width: 57em) {
+    :first-child {
+      grid-column: span 2; // TODO: check `span all` support
+    }
+  }
+}
+
+// TODO: refine as necessary
+.grid-col-4 {
+  // see home page text for the implementation
+  gap: $grid-gap;
+
+  @media (min-width: 38em) {
+    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+  }
+
+  @media (min-width: 58em) {
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  }
+}
+
+

src/scss/base/_lists.scss

@@ -4,6 +4,7 @@
 
 @use 'breakpoints' as *;
 
+// TODO: revisit these contraptions, as Justin described them...
 nav ul {
   list-style: none linear-gradient(transparent, transparent);  // Fallback
   list-style: ""; // Re-add list semantics
@@ -75,3 +76,11 @@ ol.incremented {
     }
   }
 }
+
+// TODO: if we rename, be sure to search/replace everywhere (static, MFE, theme)
+.unstyled-list {
+  list-style: none linear-gradient(transparent, transparent);  // Fallback
+  list-style: ""; // Re-add list semantics
+  margin: 0;
+  padding-left: 0;
+}

src/scss/base/_variables.scss

@@ -0,0 +1,4 @@
+// TODO: populate this with reusable tokens for our sanity
+// See @https://carbondesignsystem.com/elements/spacing/overview/ for inspiration
+$global-spacing: 2rem;
+$grid-gap: $global-spacing;

src/scss/pages/_home.scss

@@ -9,13 +9,6 @@
     margin-top: 0;
   }
 
-  // hero styling (full compiled class name is`.home-hero`)
-  &-hero {
-    display: grid;
-    grid-template-columns: 1fr 2fr;
-    grid-gap: 2.6em;
-  }
-
   // top/bottom padding for each component of the home page
   article,
   section {
@@ -28,40 +21,3 @@
     }
   }
 }
-
-
-
-.how-gymnasium-works {
-
-  ul {
-    list-style: none;
-    margin: 0;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    grid-gap: 2.6em;
-  }
-}
-
-.home-featured-courses {
-  ul {
-    list-style: none;
-    margin: 0;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-gap: 2.6em;
-  }
-}
-
-.home-find-work {
-
-}
-
-.as-seen-in {
-  ul {
-    list-style: none;
-    margin: 0;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-    grid-gap: 2.6em;
-  }
-}