CHEMH-259 | @jdwjdwjdw | Adjust breakpoints for News cards for node p…

…age, lists, and teasers (#79) * Adjust breakpoints for News cards for node page, lists, and teasers * Update dist * More News responsive fixups * Update version number
SU-SWS · Nov 14, 2023 · a7c9c57 · a7c9c57
1 parent dffb308
commit a7c9c57
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 52 deletions.
diff --git a/chem_h_subtheme.info.yml b/chem_h_subtheme.info.yml
@@ -2,7 +2,7 @@ name: ChEM-H Subtheme
 type: theme
 description: 'ChEM-H Subtheme.'
 package: Stanford
-version: 8.x-1.0-dev
+version: 2.2.2
 core_version_requirement: ^9 || ^10
 base theme: stanford_basic
 libraries:

diff --git a/dist/css/chem_h_subtheme.css b/dist/css/chem_h_subtheme.css
diff --git a/src/scss/components/news-vertical-teaser/_news-vertical-teaser.scss b/src/scss/components/news-vertical-teaser/_news-vertical-teaser.scss
@@ -198,40 +198,23 @@
 
 .vertical-cards.stanford-news--cards {
   .grid-container-3 {
-    grid-template-columns: repeat(3,fit-content(461px));
-
-    @media (max-width: 1550px) {
-      display: block;
 
+    @include grid-media-min('md') {
       &.su-list-unstyled>li {
-        @include centered-column;
-
         margin-bottom: 4.5rem;
-
-        .su-news-vertical-teaser {
-          margin-bottom: 0;
-        }
       }
     }
+
+    .su-news-vertical-teaser {
+      margin-bottom: 0;
+    }
 
     .ds-entity--stanford-news {
       height: 100%;
     }
   }
 }
 
-.ptype-stanford-entity[data-react-columns="12"] {
-  .su-entity-item {
-    @media (max-width: 1550px) {
-      display: block;
-
-      &.su-list-unstyled>li {
-        @include centered-column;
-      }
-    }
-  }
-}
-
 @media (max-width: 1550px) {
   .ds-entity--stanford-page .su-card {
     margin-bottom: 4.5rem;

diff --git a/src/scss/components/news/_news-node.scss b/src/scss/components/news/_news-node.scss
@@ -159,39 +159,50 @@
         }
       }
     }
-  }
-}
-
-// More News section
-.stanford-news-vertical-teaser-term {
-  >h2 {
-    @include chemh-heading--badge;
-
-    margin-bottom: 6.6rem;
-    text-align: left;
-  }
-
-  .more-link {
-    a {
-      @include chemh-button--gradient;
 
-      &:focus,
-      &:hover {
-        background-color: $chemh-color-hover-peach;
+    // More News section
+    .section-supporting-content {
+      @include grid-media-min('sm') {
+        width: 100%;
       }
-    }
-  }
 
-  // Related news cards in footer.
-  .stanford-news--cards {
-    &.stanford-news--cards-any {
-      margin-bottom: 125px;
+      .stanford-news-vertical-teaser-term {
+        >h2 {
+          @include chemh-heading--badge;
+
+          margin-bottom: 6.6rem;
+          text-align: left;
+        }
 
-      @media (max-width: 1550px) {
-        ul {
-          &.su-list-unstyled {
+        .stanford-news--cards {
+          ul {
             &.grid-container-3 {
-              display: block;
+              @include grid-media-max('md') {
+                gap: 3rem;
+              }
+
+              .ds-entity--stanford-news {
+                container-type: inline-size;
+
+                @container (max-width: 200px) {
+                  .su-card {
+                    .su-card__contents {
+                      padding: 2rem 2rem 0;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        .more-link {
+          a {
+            @include chemh-button--gradient;
+
+            &:focus,
+            &:hover {
+              background-color: $chemh-color-hover-peach;
             }
           }
         }