chore(curriculum): unify some spacing (#10872)

* feat(curriculum): adjust spacing + group label Adjust spacing for module cards. Move group label on top of heading. * fix moduels list list spacing * fix
mdn · Apr 15, 2024 · 8e38b5e · 8e38b5e
1 parent 52bda8f
commit 8e38b5e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/client/src/curriculum/module.scss b/client/src/curriculum/module.scss
@@ -10,11 +10,6 @@
         "icon heading"
         "icon category";
       justify-content: flex-start;
-      @media screen and (min-width: $screen-md) {
-        grid-template-areas:
-          "icon heading group"
-          "icon category .";
-      }
 
       .topic-icon {
         --background-primary: var(--curriculum-bg-color-topic);

diff --git a/client/src/curriculum/modules-list.scss b/client/src/curriculum/modules-list.scss
@@ -65,6 +65,7 @@
         > label {
           color: var(--text-inactive);
           cursor: pointer;
+          width: max-content;
         }
 
         &#modules-0 {
@@ -146,6 +147,8 @@
       }
 
       li.module-list-item {
+        --spacing: 1rem;
+        --icon-size: 4rem;
         display: block;
 
         > a {
@@ -178,12 +181,15 @@
             background-color: var(--curriculum-bg-color-list-item-header);
             display: flex;
             flex-direction: column;
-            height: 10rem;
-            padding: 1rem;
+            font-weight: var(--font-body-strong-weight);
+            height: 10.5rem;
+            height: calc(3 * var(--spacing) + var(--icon-size) + 2lh);
+            padding: var(--spacing);
+            row-gap: var(--spacing);
 
             svg.topic-icon {
-              height: 4rem;
-              width: 4rem;
+              height: var(--icon-size);
+              width: var(--icon-size);
 
               circle {
                 fill: var(--curriculum-bg-color-list-item-icon);
@@ -196,8 +202,7 @@
 
             > span {
               color: var(--text-primary);
-              font-weight: var(--font-body-strong-weight);
-              margin: auto;
+              margin: 0 auto;
               text-align: center;
             }
           }
@@ -209,7 +214,7 @@
             font-size: var(--type-smaller-font-size);
             height: 11rem;
             justify-content: space-between;
-            padding: 1rem 1.5rem;
+            padding: var(--spacing);
 
             p {
               color: var(--text-secondary);