From 63043549fbdb44369506fde8ef01277be66a6575 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Thu, 7 Mar 2024 14:23:08 -0500
Subject: [PATCH 1/3] add layout changes from collab

---
 src/_includes/modules/featured/course.njk |  2 +-
 src/pages/index.njk                       | 17 ++-------
 src/scss/base/_colors.scss                |  1 +
 src/scss/base/_layouts.scss               | 44 ++++++++++++++++++++---
 src/scss/base/_lists.scss                 |  9 +++++
 src/scss/base/_variables.scss             |  3 ++
 src/scss/pages/_home.scss                 | 34 +++++++-----------
 7 files changed, 69 insertions(+), 41 deletions(-)
 create mode 100644 src/scss/base/_variables.scss

diff --git a/src/_includes/modules/featured/course.njk b/src/_includes/modules/featured/course.njk
index 4a5d4c01..ebfee72e 100644
--- a/src/_includes/modules/featured/course.njk
+++ b/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>
diff --git a/src/pages/index.njk b/src/pages/index.njk
index 622c04f2..201c06fd 100644
--- a/src/pages/index.njk
+++ b/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>
\ No newline at end of file
diff --git a/src/scss/base/_colors.scss b/src/scss/base/_colors.scss
index 97bd8136..ba05551e 100644
--- a/src/scss/base/_colors.scss
+++ b/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
diff --git a/src/scss/base/_layouts.scss b/src/scss/base/_layouts.scss
index de54b6b0..39e6ff34 100644
--- a/src/scss/base/_layouts.scss
+++ b/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));
+  }
+}
+
+
diff --git a/src/scss/base/_lists.scss b/src/scss/base/_lists.scss
index b88d4b2a..8bc31673 100644
--- a/src/scss/base/_lists.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/scss/base/_variables.scss b/src/scss/base/_variables.scss
new file mode 100644
index 00000000..41ade0d9
--- /dev/null
+++ b/src/scss/base/_variables.scss
@@ -0,0 +1,3 @@
+// TODO: populate this with reusable tokens for our sanity
+$global-spacing: 2rem;
+$grid-gap: $global-spacing;
\ No newline at end of file
diff --git a/src/scss/pages/_home.scss b/src/scss/pages/_home.scss
index 7e251d2e..04a4f45a 100644
--- a/src/scss/pages/_home.scss
+++ b/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 {
@@ -31,24 +24,23 @@
 
 
 
-.how-gymnasium-works {
+// .how-gymnasium-works {
 
-  ul {
-    list-style: none;
-    margin: 0;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    grid-gap: 2.6em;
-  }
-}
+//   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;
+
+    // display: grid;
+    // grid-template-columns: 1fr 1fr 1fr;
+    // grid-gap: 2.6em;
   }
 }
 

From 6145015aa55dc39b9fbbcb35d18e57cb6e3f321f Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Thu, 7 Mar 2024 14:26:58 -0500
Subject: [PATCH 2/3] cleanup/notes

---
 src/scss/base/_backgrounds.scss |  1 +
 src/scss/pages/_home.scss       | 36 ---------------------------------
 2 files changed, 1 insertion(+), 36 deletions(-)

diff --git a/src/scss/base/_backgrounds.scss b/src/scss/base/_backgrounds.scss
index 95e86bab..7016c29b 100644
--- a/src/scss/base/_backgrounds.scss
+++ b/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});
         }
diff --git a/src/scss/pages/_home.scss b/src/scss/pages/_home.scss
index 04a4f45a..9073913f 100644
--- a/src/scss/pages/_home.scss
+++ b/src/scss/pages/_home.scss
@@ -21,39 +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 {
-
-    // 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;
-  }
-}
\ No newline at end of file

From cc91fa0cc1f6e0fa156dad328a2acc4027877f1b Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Thu, 7 Mar 2024 15:02:05 -0500
Subject: [PATCH 3/3] add note

---
 src/scss/base/_variables.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/scss/base/_variables.scss b/src/scss/base/_variables.scss
index 41ade0d9..775def55 100644
--- a/src/scss/base/_variables.scss
+++ b/src/scss/base/_variables.scss
@@ -1,3 +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;
\ No newline at end of file