Fix for Resources sections being styled incorrectly

carpentries · Jul 5, 2024 · 4d7721a · 4d7721a
1 parent ae263e4
commit 4d7721a
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 38 deletions.
diff --git a/inst/pkgdown/assets/assets/styles.css b/inst/pkgdown/assets/assets/styles.css
diff --git a/inst/pkgdown/assets/assets/styles.css.map b/inst/pkgdown/assets/assets/styles.css.map
diff --git a/inst/pkgdown/templates/navbar.html b/inst/pkgdown/templates/navbar.html
@@ -124,10 +124,10 @@ <h2 class="accordion-header chapters" id="flush-headingEleven">
             <hr class="half-width"/>
 
             {{#resources}}
-            <div class="accordion accordion-flush resources" id="accordionFlush12">
+            <div class="accordion accordion-flush lesson-resources" id="accordionFlush12">
               <div class="accordion-item">
                 <h2 class="accordion-header" id="flush-headingTwelve">
-                  <button class="accordion-button {{^overview}}collapsed{{/overview}}{{#overview}}show{{/overview}}" id="resources" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwelve" aria-expanded="false" aria-controls="flush-collapseTwelve">
+                  <button class="accordion-button {{^overview}}collapsed{{/overview}}{{#overview}}show{{/overview}}" id="lesson-resources" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwelve" aria-expanded="false" aria-controls="flush-collapseTwelve">
                     {{ translate.RESOURCES }}
                   </button>
                 </h2>
@@ -175,7 +175,7 @@ <h2 class="accordion-header" id="flush-headingTwelve">
                 </div>
               </div>
             </div>
-            <hr class="half-width resources"/>
+            <hr class="half-width lesson-resources"/>
             {{/resources}}
 
             {{^overview}}{{#aio}}

diff --git a/source/stylesheets/dark.scss b/source/stylesheets/dark.scss
@@ -97,38 +97,38 @@ $color-mode-type: data;
   .sidebar .collapsed::after {
     background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dee2e6'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
   }
-  
+
   .sidebar .accordion-button:not(.collapsed)::after {
     background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dee2e6'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
   }
 
   .sidebar .accordion-button.collapsed::after {
     background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dee2e6'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
   }
-  
+
   .sidebar .accordion-button:not(.collapsed)::after {
     background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dee2e6'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
   }
 
   .accordion-button.collapsed::after {
     background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dee2e6'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
   }
-  
+
   .accordion-button:not(.collapsed)::after {
     background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dee2e6'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
   }
 
   // Sidebar + and - for smaller screens
   @include media-breakpoint-down(xl) {
 
-    .sidebar .accordion-button.collapsed:not(#instructor):not(#language):not(#chapters):not(#resources)::after {
+    .sidebar .accordion-button.collapsed:not(#instructor):not(#language):not(#chapters):not(#lesson-resources)::after {
       background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23dee2e6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus'><line x1='12' y1='5' x2='12' y2='19'></line><line x1='5' y1='12' x2='19' y2='12'></line></svg>");
     }
-  
-    .sidebar .accordion-button:not(.collapsed):not(#instructor):not(#language):not(#flush-collapseNine):not(#chapters):not(#resources)::after {
+
+    .sidebar .accordion-button:not(.collapsed):not(#instructor):not(#language):not(#flush-collapseNine):not(#chapters):not(#lesson-resources)::after {
       background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23dee2e6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-minus'><line x1='5' y1='12' x2='19' y2='12'></line></svg>");
     }
-  
+
   }
 
 // From styles.css.scss
@@ -347,15 +347,15 @@ $color-mode-type: data;
       border-top: 10px solid var(--bs-tertiary-color);
     }
   }
-  
+
   .callout pre {
     background: var(--bs-tertiary-bg);
   }
-  
+
   .accordion pre {
     background: var(--bs-tertiary-bg);
   }
-  
+
   .code-label {
     border-bottom: 1px solid var(--bs-border-color);
   }
@@ -371,19 +371,19 @@ $color-mode-type: data;
   .bottom-nav {
     background-color: var(--bs-body-bg);
   }
-  
+
   .searchbox {
     border: 1px solid var(--bs-light-border-subtle);
   }
-  
+
   .mobile-title {
     box-shadow: 0px 2px 2px var(--bs-border-color-translucent);
   }
-  
+
   .percentage {
     color: var(--bs-body-color);
   }
-  
+
   .progress {
     background: tint-color($dark-blue, 10%);
   }
@@ -411,30 +411,30 @@ $color-mode-type: data;
   .lesson-progress {
     background: var(--bs-tertiary-bg);
   }
-  
+
   .nav-container {
     border-bottom: none;
   }
-  
+
   .navbar-toggler {
     color: var(--bs-body-color);
   }
-  
+
   .top-nav .dropdown button {
     background: var(--bs-body-bg);
     color: var(--bs-body-color);
   }
-  
+
   .top-nav .dropdown .bordered-button {
     background: var(--bs-body-bg);
     color: var(--bs-body-color);
     border-left: 1px solid var(--bs-body-color);
   }
-  
+
   #expand-code {
     color: var(--bs-link-color);
   }
-  
+
   @include media-breakpoint-up(md) {
     #to-top {
       filter: drop-shadow(0px 0px 5px var(--bs-body-bg)) drop-shadow(0px 0px 5px var(--bs-body-bg)) drop-shadow(0px 0px 5px var(--bs-body-bg)) drop-shadow(0px 0px 5px var(--bs-body-bg)) drop-shadow(0px 0px 5px var(--bs-body-bg));
@@ -450,7 +450,7 @@ $color-mode-type: data;
     }
     .top-nav hr{
       color: var(--bs-body-color);
-    }  
+    }
     .top-nav {
       border-top: 22px solid shade-color($blue, 20%);
       .peer-reviewed {
@@ -492,7 +492,7 @@ $color-mode-type: data;
       border-top: 22px solid shade-color($light-red, 20%);
     }
   }
-  
+
   @include media-breakpoint-up(xl) {
     .top-nav hr {
       color: var(--bs-body-color);
@@ -529,11 +529,11 @@ $color-mode-type: data;
     color: var(--bs-body-color);
     background: tint-color($dark-purple, 20%);
   }
-  
+
   .overview {
     background: var(--bs-tertiary-bg);
   }
-  
+
   @include media-breakpoint-up(md) {
     .overview .bordered {
       border-left: 1px solid var(--bs-body-color);
@@ -585,7 +585,7 @@ $color-mode-type: data;
       }
     }
   }
-  
+
   .sidebar-collapsed {
     background: var(--bs-tertiary-bg);
   }
@@ -595,12 +595,12 @@ $color-mode-type: data;
   pre .img img, pre .r-plt img {
     background-color: var(--bs-tertiary-bg);
   }
-  
+
   code {
     font-family: 'Source Code Pro', monospace;
     color: var(--bs-body-color);
   }
-  
+
   p > code {
     background-color: var(--bs-tertiary-bg);
   }

diff --git a/source/stylesheets/header.scss b/source/stylesheets/header.scss
@@ -442,7 +442,7 @@
     float: right;
   }
 
-  .resources-side {
+  .lesson-resources-side {
     display: none;
   }
 

diff --git a/source/stylesheets/sidenav.scss b/source/stylesheets/sidenav.scss
@@ -93,7 +93,7 @@
   }
 }
 
-#chapters, #resources, .accordion-header.chapters {
+#chapters, #lesson-resources, .accordion-header.chapters {
   font-size: 24px;
   font-weight: 400;
   letter-spacing: 0.2px;
@@ -178,9 +178,10 @@
     padding-bottom: 100px;
   }
 
-  .resources {
+  .lesson-resources {
     display: none;
   }
+
   .collapse-toggle {
     margin-bottom:25px;
   }

diff --git a/source/stylesheets/styles.css.scss b/source/stylesheets/styles.css.scss
@@ -271,12 +271,12 @@ dt > * {
 
 @include media-breakpoint-down(xl) {
 
-  .sidebar .accordion-button.collapsed:not(#instructor):not(#language):not(#chapters):not(#resources)::after {
+  .sidebar .accordion-button.collapsed:not(#instructor):not(#language):not(#chapters):not(#lesson-resources)::after {
     background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus'><line x1='12' y1='5' x2='12' y2='19'></line><line x1='5' y1='12' x2='19' y2='12'></line></svg>");
     transform:none !important;
   }
 
-  .sidebar .accordion-button:not(.collapsed):not(#instructor):not(#language):not(#flush-collapseNine):not(#chapters):not(#resources)::after {
+  .sidebar .accordion-button:not(.collapsed):not(#instructor):not(#language):not(#flush-collapseNine):not(#chapters):not(#lesson-resources)::after {
     background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-minus'><line x1='5' y1='12' x2='19' y2='12'></line></svg>");
     transform:none !important;
   }
@@ -324,7 +324,7 @@ dt > * {
     display: none !important;
   }
   // source: <https://css-tricks.com/almanac/properties/p/page-break/#aa-example>
-  h2 { 
+  h2 {
     page-break-before: auto;
   }
   h3, h4 {