Fix up course outline

torchbox · Jan 3, 2024 · 14a4df8 · 14a4df8
1 parent 9504bff
commit 14a4df8
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 13 deletions.
diff --git a/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html b/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html
@@ -69,4 +69,8 @@
     <symbol id="flame" viewBox="0 0 130.37 156.35">
         <path d="M129.64 82.82c-.2-1.59-2.3-1.96-3.08-.57-4.72 8.4-11.32 15.63-15.95 17.77l.03-.94C109.85 40.98 67.87 9.53 53.1.26c-1.39-.87-3.08.63-2.36 2.11 9.67 20.07 6.11 39.15-10.19 57.56-3.05 3.45-6.46 7.82-9.36 12.24v-.01s-3.48 5.06-6.84 12.09l-.16-.19c-6.73-10.16-8.2-22.44-8.47-29.08-.06-1.59-2.07-2.25-3-.95C8.53 59.86 1.31 71.61.24 84.57c-2.58 31.23 15.9 63.11 47.72 71.64 1.46.39 2.56-1.25 1.75-2.52-2.81-4.41-4.49-10.59-4.49-18.62 0-18.53 19.97-46.64 19.97-46.64s19.97 28.11 19.97 46.64c0 8.09-1.71 14.29-4.55 18.71-.81 1.26.27 2.9 1.73 2.52 30.86-7.96 45.44-36.5 47.64-53.99.78-7.79.24-14.95-.34-19.49z"></path>
     </symbol>
+
+    <symbol id="star" viewBox="0 0 41 41">
+        <circle cx="20.5" cy="20.5" r="19.5" fill="currentColor" stroke="currentColor" stroke-width="2"/><circle fill="currentColor" cx="20.5" cy="20.5" r="17.5" stroke="#fff" stroke-width="2"/><path fill="currentColor" d="M18.023 32.262c.593-6.388 1.262-12.74 3.22-18.727.205-.626 1.89-5.792 1.99-3.576.316 6.942 1.366 13.623 3.512 20.078.613 1.843-.96-.474-1.476-.872-4.365-3.378-9.248-5.646-13.978-8.055-.312-.158-7.464-3.04-4.54-3.04 5.606 0 11.212-.027 16.818 0 3.615.016 13.97-.677 10.78 1.463-5.347 3.588-11.568 5.526-16.371 10.364-1.132 1.14-1.157 1.458.045 2.365Z" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
+    </symbol>
 </svg>
diff --git a/...ject_styleguide/templates/patterns/molecules/streamfield/blocks/course_outline_block.html b/...ject_styleguide/templates/patterns/molecules/streamfield/blocks/course_outline_block.html
@@ -8,8 +8,13 @@ <h2 class="course-outline__heading">{{ value.heading }}</h2>
     <ol class="course-outline__list">
         {% for block in value.course_outline %}
             <li class="course-outline__list-item">
-                <h3 class="course-outline__sub-heading">{{ block.title }}</h3>
-                {{ block.text|richtext }}
+                <svg class="course-outline__icon">
+                    <use xlink:href="#star" />
+                </svg>
+                <div>
+                    <h3 class="course-outline__sub-heading">{{ forloop.counter }}. {{ block.title }}</h3>
+                    {{ block.text|richtext }}
+                </div>
             </li>
         {% endfor %}
     </ol>

diff --git a/tbx/static_src/sass/components/_course-grid-item.scss b/tbx/static_src/sass/components/_course-grid-item.scss
@@ -1,8 +1,12 @@
 .course-grid-item {
-    padding: 50px;
+    padding: 25px;
     background-color: var(--color--grey-bg);
     border: 1px solid var(--color--grey-border-dark);
 
+    @include media-query(medium-large) {
+        padding: 50px;
+    }
+
     &__sessions {
         @include font-size(xs);
         text-transform: uppercase;
@@ -18,8 +22,12 @@
 
     &__title {
         @include font-size(l);
-        line-height: 44px;
+        line-height: 32px;
         margin: 15px 0 10px;
+
+        @include media-query(large) {
+            line-height: 44px;
+        }
     }
 
     &__intro {

diff --git a/tbx/static_src/sass/components/_course-grid.scss b/tbx/static_src/sass/components/_course-grid.scss
@@ -5,8 +5,13 @@
 
 .course-grid {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 50px;
-    max-width: 1280px;
-    margin: 50px 0 120px;
+    gap: 30px;
+    margin: 25px 0 100px;
+
+    @include media-query(medium-large) {
+        grid-template-columns: repeat(2, 1fr);
+        max-width: 1280px;
+        gap: 50px;
+        margin: 50px 0 120px;
+    }
 }
diff --git a/tbx/static_src/sass/components/_course-outline.scss b/tbx/static_src/sass/components/_course-outline.scss
@@ -11,15 +11,39 @@
     &__sub-heading {
         @include font-size(ml);
         line-height: 33px;
-        margin-top: 35px;
+        margin-top: 0;
+
+        @include media-query(large) {
+            margin-top: 5px;
+        }
     }
 
     &__list {
         max-width: 720px;
     }
 
+    &__icon {
+        flex-shrink: 0;
+        color: var(--color--coral);
+        width: 30px;
+        height: 30px;
+
+        @include media-query(large) {
+            width: 41px;
+            height: 41px;
+        }
+    }
+
     // Override existing specificity
     &__list-item {
+        display: flex;
+        margin-top: 35px;
+        gap: 15px;
+
+        @include media-query(large) {
+            gap: 25px;
+        }
+
         .streamfield & {
             ul {
                 list-style: disc;
@@ -36,5 +60,11 @@
                 display: none;
             }
         }
+
+        p {
+            &:last-of-type {
+                margin-bottom: 0;
+            }
+        }
     }
 }
diff --git a/tbx/static_src/sass/components/_title-block.scss b/tbx/static_src/sass/components/_title-block.scss
@@ -95,24 +95,37 @@
 
     &__sessions {
         @include font-size(l);
-        line-height: 49px;
+        line-height: 38px;
         font-weight: $weight--normal;
         color: var(--color--dark-indigo);
 
+        @include media-query(large) {
+            line-height: 49px;
+        }
+
         // Nicer divider
         span {
             display: inline-block;
             position: relative;
-            margin: 0 15px;
+            margin: 0 10px;
+
+            @include media-query(large) {
+                margin: 0 15px;
+            }
 
             &::before {
                 content: '';
                 position: absolute;
                 left: 0;
-                top: -29px;
+                top: -22px;
                 width: 1px;
-                height: 35px;
+                height: 27px;
                 background-color: currentColor;
+
+                @include media-query(large) {
+                    top: -29px;
+                    height: 35px;
+                }
             }
         }
     }