From 0efe99927692917cc958017962ba7c63f06986db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Mon, 15 Jan 2024 17:23:08 +0100
Subject: [PATCH] MDL-80219 core_courseformat: Add course section and activity
 new styling

- Add border to sections (not in single section page)
- Remove border to activity cards and add single line separators
- Refactor activity and sections styles to fit this new layout
- Remove styles that are not necessary with this new layout
---
 .../local/content/addsection.mustache         |   2 +-
 .../templates/local/content/cm.mustache       |   3 +
 .../local/content/section/header.mustache     |  10 +-
 .../templates/activitychooserbutton.mustache  |   2 +-
 theme/boost/scss/moodle/course.scss           | 137 ++++++++----------
 theme/boost/style/moodle.css                  | 109 ++++++--------
 theme/classic/style/moodle.css                | 109 ++++++--------
 7 files changed, 152 insertions(+), 220 deletions(-)

diff --git a/course/format/templates/local/content/addsection.mustache b/course/format/templates/local/content/addsection.mustache
index 5a762b9bc57..623911a88b9 100644
--- a/course/format/templates/local/content/addsection.mustache
+++ b/course/format/templates/local/content/addsection.mustache
@@ -39,7 +39,7 @@
     }
 }}
 {{#showaddsection}}
-<div class="mdl-left py-2 changenumsections bulk-hidden">
+<div class="mdl-left changenumsections bulk-hidden mt-3">
     {{#increase}}
     <a href="{{{url}}}" class="increase-sections">
         {{#pix}}t/switch_plus, moodle, {{#str}} increasesections, moodle {{/str}}{{/pix}}
diff --git a/course/format/templates/local/content/cm.mustache b/course/format/templates/local/content/cm.mustache
index df7f87d7214..22806c22df1 100644
--- a/course/format/templates/local/content/cm.mustache
+++ b/course/format/templates/local/content/cm.mustache
@@ -62,6 +62,9 @@
         {{> core_course/activitychooserbuttonactivity}}
     </div>
 {{/editing}}
+
+<hr class="my-2">
+
 <div class="activity-item focus-control {{#modstealth}}hiddenactivity{{/modstealth}}{{!
         }}{{#modhiddenfromstudents}}hiddenactivity{{/modhiddenfromstudents}}{{!
         }}{{#modinline}}activityinline{{/modinline}}" data-activityname="{{activityname}}">
diff --git a/course/format/templates/local/content/section/header.mustache b/course/format/templates/local/content/section/header.mustache
index d5afc551a38..495e0205469 100644
--- a/course/format/templates/local/content/section/header.mustache
+++ b/course/format/templates/local/content/section/header.mustache
@@ -36,19 +36,19 @@
 {{/ core_courseformat/local/content/section/bulkselect }}
 {{/sectionbulk}}
 {{#headerdisplaymultipage}}
-    <h3 id="sectionid-{{id}}-title" class="sectionname">
+    <h3 id="sectionid-{{id}}-title" class="h4 sectionname">
         {{{title}}}
     </h3>
 {{/headerdisplaymultipage}}
 {{^headerdisplaymultipage}}
     {{#sitehome}}
-        <h2 id="sectionid-{{id}}-title" class="sectionname">
+        <h2 id="sectionid-{{id}}-title" class="h3 sectionname">
             {{{title}}}
         </h2>
     {{/sitehome}}
     {{^sitehome}}
         {{#displayonesection}}
-            <h3 id="sectionid-{{id}}-title" class="sectionname">
+            <h3 id="sectionid-{{id}}-title" class="h4 sectionname mb-0">
                 {{{title}}}
             </h3>
         {{/displayonesection}}
@@ -61,7 +61,7 @@
                     id="collapssesection{{num}}"
                     aria-expanded="{{^contentcollapsed}}true{{/contentcollapsed}}{{#contentcollapsed}}false{{/contentcollapsed}}"
                     aria-controls="coursecontentcollapse{{num}}"
-                    class="btn btn-icon mr-1 icons-collapse-expand justify-content-center
+                    class="btn btn-icon mr-3 icons-collapse-expand justify-content-center
                         {{#contentcollapsed}} collapsed {{/contentcollapsed}}"
                     aria-label="{{name}}">
                 <span class="expanded-icon icon-no-margin p-2" title="{{#str}} collapse, core {{/str}}">
@@ -72,7 +72,7 @@
                     <span class="dir-ltr-hide">{{#pix}} t/collapsedchevron_rtl, core {{/pix}}</span>
                 </span>
                 </a>
-                <h3 class="sectionname course-content-item d-flex align-self-stretch align-items-center mb-0"
+                <h3 class="h4 sectionname course-content-item d-flex align-self-stretch align-items-center mb-0"
                     id="sectionid-{{id}}-title" data-for="section_title" data-id="{{id}}" data-number="{{num}}">
                     {{{title}}}
                 </h3>
diff --git a/course/templates/activitychooserbutton.mustache b/course/templates/activitychooserbutton.mustache
index 9ebe9b7d0c2..fc15a37c873 100644
--- a/course/templates/activitychooserbutton.mustache
+++ b/course/templates/activitychooserbutton.mustache
@@ -29,7 +29,7 @@
         "sectionreturn": 0
     }
 }}
-<button class="btn btn-link text-decoration-none section-modchooser section-modchooser-link activity-add bulk-hidden d-flex align-items-center p-3 mb-5"
+<button class="btn btn-link text-decoration-none section-modchooser section-modchooser-link activity-add bulk-hidden d-flex align-items-center p-3 mt-3"
      data-action="open-chooser"
      data-sectionid="{{sectionid}}"
      {{#sectionreturn}}data-sectionreturnid="{{.}}"{{/sectionreturn}}>
diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss
index 4dc2731cba8..aa5d41f5675 100644
--- a/theme/boost/scss/moodle/course.scss
+++ b/theme/boost/scss/moodle/course.scss
@@ -7,11 +7,6 @@
     clear: both;
 }
 
-.section-modchooser {
-    clear: both;
-    margin-top: map-get($spacers, 1);
-}
-
 .block_tree .tree_item.branch {
     margin-left: 8px;
 }
@@ -35,22 +30,6 @@
     margin-left: .2em;
 }
 
-.sitetopic ul.section {
-    margin: 0;
-}
-
-body:not(.editing)  .sitetopic ul.section {
-    padding-left: 0;
-    .label .mod-indent-outer {
-        padding-left: 0;
-    }
-}
-
-@include media-breakpoint-up(sm) {
-    .course-content ul.section {
-        margin: $spacer;
-    }
-}
 .section {
     .side {
         &.left {
@@ -70,9 +49,6 @@ body:not(.editing)  .sitetopic ul.section {
     }
 
     .activity {
-        list-style: none;
-        padding: map-get($spacers, 1) 0;
-
         .spinner {
             left: 100%;
             position: absolute;
@@ -180,12 +156,6 @@ body:not(.editing)  .sitetopic ul.section {
             .activityinstance {
                 padding-right: 200px;
             }
-            .editing_move {
-                position: absolute;
-                display: flex;
-                left: 5px;
-                top: 5px;
-            }
             .mod-indent-outer {
                 /**
                  * Add appropriate padding such that nothing overlaps the
@@ -195,12 +165,6 @@ body:not(.editing)  .sitetopic ul.section {
             }
         }
     }
-    .activity .editing_move_activity {
-        position: absolute;
-        display: flex;
-        left: 5px;
-        top: 5px;
-    }
     // Remove old spinners if the reactive state is ready.
     .course-content .stateready .section .spinner {
         display: none;
@@ -586,12 +550,6 @@ body:not(.editing)  .sitetopic ul.section {
     margin-right: 5px;
 }
 
-.path-site li.activity > div:not(.activity-item),
-.path-course-view li.activity > div:not(.activity-item) {
-    position: relative;
-    padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
-}
-
 .path-course-view li.activity span.autocompletion img {
     vertical-align: text-bottom;
     margin-left: 0;
@@ -612,11 +570,6 @@ li.section.hidden span.commands a.editing_show {
     cursor: default;
 }
 
-.single-section h3.sectionname {
-    text-align: center;
-    clear: both;
-}
-
 input.titleeditor {
     width: 330px;
     vertical-align: text-bottom;
@@ -1306,8 +1259,14 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
 
 .course-section {
     list-style: none;
-    padding-left: 0;
-    border-bottom: $border-width solid $border-color;
+    padding: map-get($spacers, 3);
+    margin-top: map-get($spacers, 3);
+    border: $border-width solid $border-color;
+    @include border-radius($activity-item-border-radius);
+
+    &.hidden {
+        background-color: $gray-100;
+    }
 
     .sectionname > a {
         color: $gray-900;
@@ -1316,10 +1275,6 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
         }
     }
 
-    &:last-child:not(.section-summary) {
-        border-bottom: 0;
-    }
-
     .sectionbadges .badge {
         margin-left: map-get($spacers, 2);
     }
@@ -1363,6 +1318,13 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
         }
     }
 
+    // Override '.btn.btn-icon' styles from buttons.scss to make action menu buttons smaller.
+    .action-menu .btn.btn-icon {
+        height: map-get($iconsizes, 5);
+        width: map-get($iconsizes, 5);
+        @include border-radius();
+    }
+
     &.section-summary {
         padding-left: map-get($spacers, 3);
         padding-right: map-get($spacers, 3);
@@ -1392,8 +1354,20 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
     }
 }
 
-/* Re-style ordered list in course content */
+/* Single section page specific styles */
 
+.single-section {
+    // Revert main section's styles.
+    > ul > .course-section {
+        padding: 0;
+        border: none;
+        &.hidden {
+            background-color: inherit;
+        }
+    }
+}
+
+/* Re-style ordered list in course content */
 .course-content .activity-altcontent {
     ul {
         list-style: disc;
@@ -1408,18 +1382,20 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
 
 /* Activity cards */
 
+.activity {
+    list-style: none;
+    position: relative;
+}
+
 .activity-item {
     position: relative;
     @include border-radius($activity-item-border-radius);
-
     &:not(.activityinline) {
-        border: $border-width solid $border-color;
-        padding: map-get($spacers, 3);
+        padding: .75rem;
     }
     &.activityinline {
-        padding: map-get($spacers, 3) 0;
+        padding: .75rem 0;
     }
-
     &.hiddenactivity {
         background-color: $gray-100;
         .activityiconcontainer,
@@ -1435,12 +1411,12 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
         grid-template-columns: min-content 1fr min-content min-content min-content;
         grid-template-rows: 1fr repeat(5, min-content);
         grid-template-areas:
-            "icon          name          groupmode      completion    actions"
-            "icon          visibility    groupmode      completion    actions"
-            "icon          dates         groupmode      completion    actions"
-            "altcontent    altcontent    altcontent     altcontent    altcontent"
-            "afterlink     afterlink     afterlink      afterlink     afterlink"
-            "availability  availability  availability   availability  availability";
+            "icon   name          groupmode      completion    actions"
+            "icon   visibility    groupmode      completion    actions"
+            "icon   dates         groupmode      completion    actions"
+            "icon   altcontent    altcontent     altcontent    altcontent"
+            "icon   afterlink     afterlink      afterlink     afterlink"
+            "icon   availability  availability   availability  availability";
         @include media-breakpoint-down(xs) {
             grid-template-columns: min-content 1fr min-content min-content min-content;
             grid-template-rows: 1fr repeat(4, min-content);
@@ -1480,12 +1456,6 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
         .actions {
             position: relative;
         }
-        // Override '.btn.btn-icon' styles from buttons.scss to make action menu buttons smaller.
-        .action-menu .btn.btn-icon {
-            height: map-get($iconsizes, 5);
-            width: map-get($iconsizes, 5);
-            @include border-radius();
-        }
     }
 
     .activity-icon {
@@ -1635,12 +1605,6 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
     .no-overflow {
         width: 100%;
     }
-
-    @include media-breakpoint-up(md) {
-        &:not(.activityinline) {
-            padding: map-get($spacers, 3);
-        }
-    }
 }
 
 /* Activity card in editing mode */
@@ -1677,9 +1641,11 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
 
 .activity {
     div.divider {
+        position: absolute;
+        width: 100%;
         height: 2rem;
-        margin-top: -1.25rem;
-        margin-bottom: -0.75rem;
+        margin-top: -1rem;
+        margin-bottom: -1rem;
         z-index: 5;
         button {
             border-radius: 100%;
@@ -1750,3 +1716,16 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
         height: 32px;
     }
 }
+
+/* Home page course specific styles */
+
+.sitetopic {
+    // Hide the first activity top border.
+    .activity:first-of-type hr {
+        display: none;
+    }
+    .section {
+        margin-bottom: map-get($spacers, 4);
+        @include border-radius();
+    }
+}
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index d43772d17b8..835027b550b 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -27908,11 +27908,6 @@ table.calendartable caption {
   clear: both;
 }
 
-.section-modchooser {
-  clear: both;
-  margin-top: 0.25rem;
-}
-
 .block_tree .tree_item.branch {
   margin-left: 8px;
 }
@@ -27938,22 +27933,6 @@ table.calendartable caption {
   margin-left: 0.2em;
 }
 
-.sitetopic ul.section {
-  margin: 0;
-}
-
-body:not(.editing) .sitetopic ul.section {
-  padding-left: 0;
-}
-body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
-  padding-left: 0;
-}
-
-@media (min-width: 576px) {
-  .course-content ul.section {
-    margin: 1rem;
-  }
-}
 .section .side {
   margin-top: 0.5rem;
 }
@@ -27969,8 +27948,6 @@ body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
   width: 16px;
 }
 .section .activity {
-  list-style: none;
-  padding: 0.25rem 0;
   /* The command block for each activity */
 }
 .section .activity .spinner {
@@ -28054,12 +28031,6 @@ body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
 .editing .section .activity .activityinstance {
   padding-right: 200px;
 }
-.editing .section .activity .editing_move {
-  position: absolute;
-  display: flex;
-  left: 5px;
-  top: 5px;
-}
 .editing .section .activity .mod-indent-outer {
   /**
    * Add appropriate padding such that nothing overlaps the
@@ -28067,12 +28038,6 @@ body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
    */
   padding-left: 2rem;
 }
-.editing .activity .editing_move_activity {
-  position: absolute;
-  display: flex;
-  left: 5px;
-  top: 5px;
-}
 .editing .course-content .stateready .section .spinner {
   display: none;
 }
@@ -28403,12 +28368,6 @@ body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
   margin-right: 5px;
 }
 
-.path-site li.activity > div:not(.activity-item),
-.path-course-view li.activity > div:not(.activity-item) {
-  position: relative;
-  padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
-}
-
 .path-course-view li.activity span.autocompletion img {
   vertical-align: text-bottom;
   margin-left: 0;
@@ -28425,11 +28384,6 @@ li.section.hidden span.commands a.editing_show {
   cursor: default;
 }
 
-.single-section h3.sectionname {
-  text-align: center;
-  clear: both;
-}
-
 input.titleeditor {
   width: 330px;
   vertical-align: text-bottom;
@@ -29039,8 +28993,13 @@ span.editinstructions .alert-link {
 /* Course section */
 .course-section {
   list-style: none;
-  padding-left: 0;
-  border-bottom: 1px solid #dee2e6;
+  padding: 1rem;
+  margin-top: 1rem;
+  border: 1px solid #dee2e6;
+  border-radius: 1rem;
+}
+.course-section.hidden {
+  background-color: #f8f9fa;
 }
 .course-section .sectionname > a {
   color: #1d2125;
@@ -29048,9 +29007,6 @@ span.editinstructions .alert-link {
 .course-section .sectionname > a:hover {
   text-decoration: none;
 }
-.course-section:last-child:not(.section-summary) {
-  border-bottom: 0;
-}
 .course-section .sectionbadges .badge {
   margin-left: 0.5rem;
 }
@@ -29081,6 +29037,11 @@ span.editinstructions .alert-link {
   font-size: inherit;
   margin-right: 0.25rem;
 }
+.course-section .action-menu .btn.btn-icon {
+  height: 32px;
+  width: 32px;
+  border-radius: 0.5rem;
+}
 .course-section.section-summary {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -29102,6 +29063,15 @@ span.editinstructions .alert-link {
   color: #0f6cbf;
 }
 
+/* Single section page specific styles */
+.single-section > ul > .course-section {
+  padding: 0;
+  border: none;
+}
+.single-section > ul > .course-section.hidden {
+  background-color: inherit;
+}
+
 /* Re-style ordered list in course content */
 .course-content .activity-altcontent ul {
   list-style: disc;
@@ -29114,16 +29084,20 @@ span.editinstructions .alert-link {
 }
 
 /* Activity cards */
+.activity {
+  list-style: none;
+  position: relative;
+}
+
 .activity-item {
   position: relative;
   border-radius: 1rem;
 }
 .activity-item:not(.activityinline) {
-  border: 1px solid #dee2e6;
-  padding: 1rem;
+  padding: 0.75rem;
 }
 .activity-item.activityinline {
-  padding: 1rem 0;
+  padding: 0.75rem 0;
 }
 .activity-item.hiddenactivity {
   background-color: #f8f9fa;
@@ -29137,7 +29111,7 @@ span.editinstructions .alert-link {
   align-items: center;
   grid-template-columns: min-content 1fr min-content min-content min-content;
   grid-template-rows: 1fr repeat(5, min-content);
-  grid-template-areas: "icon          name          groupmode      completion    actions" "icon          visibility    groupmode      completion    actions" "icon          dates         groupmode      completion    actions" "altcontent    altcontent    altcontent     altcontent    altcontent" "afterlink     afterlink     afterlink      afterlink     afterlink" "availability  availability  availability   availability  availability";
+  grid-template-areas: "icon   name          groupmode      completion    actions" "icon   visibility    groupmode      completion    actions" "icon   dates         groupmode      completion    actions" "icon   altcontent    altcontent     altcontent    altcontent" "icon   afterlink     afterlink      afterlink     afterlink" "icon   availability  availability   availability  availability";
 }
 @media (max-width: 575.98px) {
   .activity-item .activity-grid {
@@ -29162,11 +29136,6 @@ span.editinstructions .alert-link {
 .activity-item .activity-actions .actions {
   position: relative;
 }
-.activity-item .activity-actions .action-menu .btn.btn-icon {
-  height: 32px;
-  width: 32px;
-  border-radius: 0.5rem;
-}
 .activity-item .activity-icon {
   grid-area: icon;
 }
@@ -29716,11 +29685,6 @@ span.editinstructions .alert-link {
 .activity-item .no-overflow {
   width: 100%;
 }
-@media (min-width: 768px) {
-  .activity-item:not(.activityinline) {
-    padding: 1rem;
-  }
-}
 
 /* Activity card in editing mode */
 .editing .activity-item {
@@ -29758,9 +29722,11 @@ span.editinstructions .alert-link {
 }
 
 .activity div.divider {
+  position: absolute;
+  width: 100%;
   height: 2rem;
-  margin-top: -1.25rem;
-  margin-bottom: -0.75rem;
+  margin-top: -1rem;
+  margin-bottom: -1rem;
   z-index: 5;
 }
 .activity div.divider button {
@@ -29822,6 +29788,15 @@ span.editinstructions .alert-link {
   height: 32px;
 }
 
+/* Home page course specific styles */
+.sitetopic .activity:first-of-type hr {
+  display: none;
+}
+.sitetopic .section {
+  margin-bottom: 1.5rem;
+  border-radius: 0.5rem;
+}
+
 /* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */
 :target {
   scroll-margin-top: 70px;
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index cfc1a1fe678..1ea8911afbc 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -27908,11 +27908,6 @@ table.calendartable caption {
   clear: both;
 }
 
-.section-modchooser {
-  clear: both;
-  margin-top: 0.25rem;
-}
-
 .block_tree .tree_item.branch {
   margin-left: 8px;
 }
@@ -27938,22 +27933,6 @@ table.calendartable caption {
   margin-left: 0.2em;
 }
 
-.sitetopic ul.section {
-  margin: 0;
-}
-
-body:not(.editing) .sitetopic ul.section {
-  padding-left: 0;
-}
-body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
-  padding-left: 0;
-}
-
-@media (min-width: 576px) {
-  .course-content ul.section {
-    margin: 1rem;
-  }
-}
 .section .side {
   margin-top: 0.5rem;
 }
@@ -27969,8 +27948,6 @@ body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
   width: 16px;
 }
 .section .activity {
-  list-style: none;
-  padding: 0.25rem 0;
   /* The command block for each activity */
 }
 .section .activity .spinner {
@@ -28054,12 +28031,6 @@ body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
 .editing .section .activity .activityinstance {
   padding-right: 200px;
 }
-.editing .section .activity .editing_move {
-  position: absolute;
-  display: flex;
-  left: 5px;
-  top: 5px;
-}
 .editing .section .activity .mod-indent-outer {
   /**
    * Add appropriate padding such that nothing overlaps the
@@ -28067,12 +28038,6 @@ body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
    */
   padding-left: 2rem;
 }
-.editing .activity .editing_move_activity {
-  position: absolute;
-  display: flex;
-  left: 5px;
-  top: 5px;
-}
 .editing .course-content .stateready .section .spinner {
   display: none;
 }
@@ -28403,12 +28368,6 @@ body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
   margin-right: 5px;
 }
 
-.path-site li.activity > div:not(.activity-item),
-.path-course-view li.activity > div:not(.activity-item) {
-  position: relative;
-  padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
-}
-
 .path-course-view li.activity span.autocompletion img {
   vertical-align: text-bottom;
   margin-left: 0;
@@ -28425,11 +28384,6 @@ li.section.hidden span.commands a.editing_show {
   cursor: default;
 }
 
-.single-section h3.sectionname {
-  text-align: center;
-  clear: both;
-}
-
 input.titleeditor {
   width: 330px;
   vertical-align: text-bottom;
@@ -29039,8 +28993,13 @@ span.editinstructions .alert-link {
 /* Course section */
 .course-section {
   list-style: none;
-  padding-left: 0;
-  border-bottom: 1px solid #dee2e6;
+  padding: 1rem;
+  margin-top: 1rem;
+  border: 1px solid #dee2e6;
+  border-radius: 1rem;
+}
+.course-section.hidden {
+  background-color: #f8f9fa;
 }
 .course-section .sectionname > a {
   color: #1d2125;
@@ -29048,9 +29007,6 @@ span.editinstructions .alert-link {
 .course-section .sectionname > a:hover {
   text-decoration: none;
 }
-.course-section:last-child:not(.section-summary) {
-  border-bottom: 0;
-}
 .course-section .sectionbadges .badge {
   margin-left: 0.5rem;
 }
@@ -29081,6 +29037,11 @@ span.editinstructions .alert-link {
   font-size: inherit;
   margin-right: 0.25rem;
 }
+.course-section .action-menu .btn.btn-icon {
+  height: 32px;
+  width: 32px;
+  border-radius: 0.25rem;
+}
 .course-section.section-summary {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -29102,6 +29063,15 @@ span.editinstructions .alert-link {
   color: #0f6cbf;
 }
 
+/* Single section page specific styles */
+.single-section > ul > .course-section {
+  padding: 0;
+  border: none;
+}
+.single-section > ul > .course-section.hidden {
+  background-color: inherit;
+}
+
 /* Re-style ordered list in course content */
 .course-content .activity-altcontent ul {
   list-style: disc;
@@ -29114,16 +29084,20 @@ span.editinstructions .alert-link {
 }
 
 /* Activity cards */
+.activity {
+  list-style: none;
+  position: relative;
+}
+
 .activity-item {
   position: relative;
   border-radius: 1rem;
 }
 .activity-item:not(.activityinline) {
-  border: 1px solid #dee2e6;
-  padding: 1rem;
+  padding: 0.75rem;
 }
 .activity-item.activityinline {
-  padding: 1rem 0;
+  padding: 0.75rem 0;
 }
 .activity-item.hiddenactivity {
   background-color: #f8f9fa;
@@ -29137,7 +29111,7 @@ span.editinstructions .alert-link {
   align-items: center;
   grid-template-columns: min-content 1fr min-content min-content min-content;
   grid-template-rows: 1fr repeat(5, min-content);
-  grid-template-areas: "icon          name          groupmode      completion    actions" "icon          visibility    groupmode      completion    actions" "icon          dates         groupmode      completion    actions" "altcontent    altcontent    altcontent     altcontent    altcontent" "afterlink     afterlink     afterlink      afterlink     afterlink" "availability  availability  availability   availability  availability";
+  grid-template-areas: "icon   name          groupmode      completion    actions" "icon   visibility    groupmode      completion    actions" "icon   dates         groupmode      completion    actions" "icon   altcontent    altcontent     altcontent    altcontent" "icon   afterlink     afterlink      afterlink     afterlink" "icon   availability  availability   availability  availability";
 }
 @media (max-width: 575.98px) {
   .activity-item .activity-grid {
@@ -29162,11 +29136,6 @@ span.editinstructions .alert-link {
 .activity-item .activity-actions .actions {
   position: relative;
 }
-.activity-item .activity-actions .action-menu .btn.btn-icon {
-  height: 32px;
-  width: 32px;
-  border-radius: 0.25rem;
-}
 .activity-item .activity-icon {
   grid-area: icon;
 }
@@ -29716,11 +29685,6 @@ span.editinstructions .alert-link {
 .activity-item .no-overflow {
   width: 100%;
 }
-@media (min-width: 768px) {
-  .activity-item:not(.activityinline) {
-    padding: 1rem;
-  }
-}
 
 /* Activity card in editing mode */
 .editing .activity-item {
@@ -29758,9 +29722,11 @@ span.editinstructions .alert-link {
 }
 
 .activity div.divider {
+  position: absolute;
+  width: 100%;
   height: 2rem;
-  margin-top: -1.25rem;
-  margin-bottom: -0.75rem;
+  margin-top: -1rem;
+  margin-bottom: -1rem;
   z-index: 5;
 }
 .activity div.divider button {
@@ -29822,6 +29788,15 @@ span.editinstructions .alert-link {
   height: 32px;
 }
 
+/* Home page course specific styles */
+.sitetopic .activity:first-of-type hr {
+  display: none;
+}
+.sitetopic .section {
+  margin-bottom: 1.5rem;
+  border-radius: 0.25rem;
+}
+
 /* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */
 :target {
   scroll-margin-top: 60px;