css: update styles for components

middlebury · Sep 29, 2023 · 79bc1ae · 79bc1ae
1 parent e1e9e9e
commit 79bc1ae
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 106 deletions.
diff --git a/src/scss/_paragraphs.scss b/src/scss/_paragraphs.scss
@@ -3,13 +3,8 @@
 ////
 
 %paragraph-space {
-  margin-top: $spacing-7;
-  margin-bottom: $spacing-7;
-
-  @include breakpoint(md) {
-    margin-top: $spacing-8;
-    margin-bottom: $spacing-8;
-  }
+  margin-top: $spacing-8;
+  margin-bottom: $spacing-8;
 
   @include breakpoint(lg) {
     margin-top: $spacing-9;
@@ -66,6 +61,8 @@
     @include make-col-offset(2);
   }
 
+  @extend %paragraph-space;
+
   .paragraph--expand,
   .paragraph--video,
   .paragraph--image:not(.image--left):not(.image--right) {
@@ -89,30 +86,20 @@
   }
 }
 
-.paragraph--video-group,
+.paragraph,
 .paragraph--lead,
-.paragraph--text {
-  margin-bottom: $spacing-8;
-
-  @include breakpoint(lg) {
-    margin-bottom: $spacing-9;
-  }
-}
-
-.paragraph--image-text {
-  margin-top: $spacing-8;
-  margin-bottom: $spacing-8;
-
-  @include breakpoint(md) {
-    margin-top: $spacing-9;
-    margin-bottom: $spacing-9;
-  }
+.paragraph--text,
+.paragraph--image-text,
+.paragraph--chart,
+.paragraph--featured-story {
+  @extend %paragraph-space;
 }
 
 .paragraph--article-spotlight,
 .paragraph--video-group {
   @extend %paragraph-full-width;
-  // @include make-gutters;
+
+  margin-top: $spacing-7;
 
   @include breakpoint(lg) {
     margin-top: $spacing-8;
@@ -148,22 +135,3 @@
     margin-top: $spacing-7;
   }
 }
-
-.paragraph--featured-story {
-  margin-top: $spacing-8;
-  margin-bottom: $spacing-8;
-
-  // @include breakpoint(md) {
-  //   margin-top: $spacing-3;
-  //   margin-bottom: $spacing-8;
-  // }
-
-  @include breakpoint(md) {
-    margin-top: $spacing-9;
-    margin-bottom: $spacing-9;
-  }
-}
-
-.paragraph--chart {
-  @extend %paragraph-space;
-}
diff --git a/src/scss/components/_campaign-section-stats.scss b/src/scss/components/_campaign-section-stats.scss
@@ -120,15 +120,15 @@
 .campaign-stats__cta {
     margin: 0;
 
-    button, button > * {
+    a, a > * {
         width: 100%;
 
         @include breakpoint(md) {
             width: initial;
         }
     }
 
-    button {
+    a {
         padding-bottom: 4px;
         border-bottom: 1px solid $white;
         border-right-style: none;

diff --git a/src/scss/components/_media-object.scss b/src/scss/components/_media-object.scss
@@ -6,6 +6,16 @@
     display: flex;
     position: relative;
     flex-direction: column;
+
+    .media-object__body {
+      h3 {
+        line-height: $line-height-basic;
+
+        @include breakpoint(md) {
+          font-weight: $font-weight-medium;
+        }
+      }
+    }
 
     @include breakpoint(sm) {
       flex-direction: row;
@@ -15,13 +25,15 @@
 .media-object.featured-story {
   .media-object__body {
     h3 {
-      font-size: rem(34);
-      font-weight: $font-weight-semibold;
+      font-size: $spacing-5;
+      font-weight: $font-weight-normal;
       margin-top: 0;
       margin-bottom: $spacing-1;
       text-transform: none;
 
       @include breakpoint(md) {
+        font-size: rem(34);
+        font-weight: $font-weight-semibold; 
         margin-bottom: $spacing-2;
       }
 
@@ -31,15 +43,11 @@
     }
 
     p {
-      margin-bottom: $spacing-3;
+      // margin-bottom: $spacing-3;
 
-      @include breakpoint(lg) {
-        margin-bottom: $spacing-4;
-      }
-    }
-
-    .story-tags {
-      flex-direction: column;
+      // @include breakpoint(lg) {
+      //   margin-bottom: $spacing-4;
+      // }
     }
   }
 
@@ -72,10 +80,13 @@
   width: 100%;
 
   @include breakpoint(md) {
-    border-top-width: $spacing-3;
     max-width: calc(11 / 12 * 100% - 64px);
   }
 
+  @include breakpoint(lg) {
+    border-top-width: $spacing-3;
+  }
+
   &.access {
     border-top-color: $color-access;
   }
@@ -99,7 +110,7 @@
 
 .media-object__image {
   width: 100%;
-  margin-bottom: $spacing-2;
+  // margin-bottom: $spacing-2;
 
   @include breakpoint(md) {
     width: initial;
@@ -159,11 +170,11 @@
 
   p {
     font-size: $typescale-3;
-    margin-bottom: $spacing-3;
+    // margin-bottom: $spacing-3;
 
     @include breakpoint(lg) {
       font-size: $typescale-4;
-      margin-bottom: $spacing-4;
+      // margin-bottom: $spacing-4;
     }
   }
 

diff --git a/src/scss/components/_page-header.scss b/src/scss/components/_page-header.scss
@@ -1,8 +1,15 @@
 .page-header {
-  margin-bottom: $spacing-8;
+}
+
+.page-header__title {
+  font-size: rem(32);
+  font-weight: $font-weight-medium;
+  text-transform: uppercase;
+  letter-spacing: $letter-spacing-secondary;
 
   @include breakpoint(md) {
-    margin-bottom: $spacing-9;
+    font-weight: $font-weight-light;
+    font-size: $typescale-10;
   }
 }
 
@@ -12,12 +19,10 @@
   position: relative;
   overflow: hidden;
   min-height: 300px;
-  margin-bottom: $spacing-7;
 
   img {
     @include absolute-fill;
     object-fit: cover;
-    // font-family: "object-fit: cover;";
   }
 
   .page-header__title {
@@ -61,15 +66,18 @@
 .page-header--has-menu {
   margin-bottom: 0;
 
-  // .page-header__content {
-  //   margin-bottom: 0;
-  // }
+  .page-header__content {
+    margin-bottom: $spacing-4;
+
+    @include breakpoint(lg) {
+    margin-bottom: $spacing-5;
+    }
+  }
 }
 
 .page-header__content {
   @include make-col-ready;
   padding-top: $spacing-5;
-  margin-bottom: $spacing-4;
 
   @include breakpoint(md) {
     padding-top: $spacing-6;
@@ -80,7 +88,6 @@
 
   @include breakpoint(lg) {
     padding-top: $spacing-9;
-    margin-bottom: $spacing-5;
   }
 
   .page-header--has-image & {
@@ -114,14 +121,3 @@
     }
   }
 }
-
-.page-header__title {
-  font-size: rem(32);
-  font-weight: $font-weight-light;
-  text-transform: uppercase;
-  letter-spacing: $letter-spacing-secondary;
-
-  @include breakpoint(md) {
-    font-size: $typescale-10;
-  }
-}
diff --git a/src/scss/components/_section.scss b/src/scss/components/_section.scss
@@ -1,19 +1,18 @@
-h2.section__title {
-  font-size: $typescale-7;
-  font-weight: $font-weight-normal;
-  text-transform: uppercase;
-  margin-top: $spacing-8;
-  margin-bottom: $spacing-4;
-  // border-top: 1px solid currentColor;
-  // margin: 0 !important;
+.section__header {
+  h2 {
+    font-size: $typescale-7;
+    font-weight: $font-weight-normal;
+    text-transform: uppercase;
+    margin-bottom: $spacing-4;
+
+    @include breakpoint(md) {
+      font-size: rem(32);
+      margin-bottom: $spacing-5;
+    }
 
-  @include breakpoint(md) {
-    font-size: rem(32);
-    margin-bottom: $spacing-5;
-  }
-
-  @include breakpoint(lg) {
-    margin-top: $spacing-9;
-    margin-bottom: $spacing-7;
+    @include breakpoint(lg) {
+      margin-bottom: $spacing-7;
+    }
   }
 }
+
diff --git a/src/scss/components/_story.scss b/src/scss/components/_story.scss
@@ -6,4 +6,21 @@
     @include breakpoint(md) {
         flex-direction: row;
     }
+}
+
+.story-list-tags {
+    font-size: $typescale-1;
+    font-weight: $font-weight-semibold;
+    text-transform: uppercase;
+    letter-spacing: $letter-spacing-secondary;
+    flex-direction: column;
+    border-top: 1px solid $gray-light;
+
+    ul {
+        flex-direction: column;
+
+        @include breakpoint(lg) {
+            flex-direction: row;
+        }
+    }
 }
diff --git a/src/scss/components/_two-col-linked-list.scss b/src/scss/components/_two-col-linked-list.scss
@@ -1,5 +1,9 @@
 .two-col-linked-list {
-    margin-bottom: $spacing-9;
+    margin-bottom: $spacing-8;
+
+    @include breakpoint(md) {
+        margin-bottom: $spacing-9;
+    }
 
     li {
         font-size: $typescale-3;
@@ -9,7 +13,7 @@
         text-transform: uppercase;
 
         @include breakpoint(md) {
-            font-weight: $font-weight-normal;
+            font-weight: $font-weight-medium;
             font-size: $typescale-5;
         }
 
@@ -20,8 +24,10 @@
         a {
             display: block; 
             width: 100%;
-            border-top: 8px solid $color-access;
+            border-top: 4px solid $color-access;
             padding-top: $spacing-2;
+            line-height: $line-height-basic;
+
 
             @include breakpoint(lg) {
                 padding-top: $spacing-4;

diff --git a/src/scss/scope/_typography.scss b/src/scss/scope/_typography.scss
@@ -4,7 +4,7 @@
             > li {
                 position: relative;
                 margin-left: 22px;
-                margin-bottom: $spacing-5;
+                margin-bottom: rem(18);
                 font-size: $typescale-4;
 
                 &:before {
@@ -36,13 +36,15 @@
     }
 
     h2 {
-        font-size: $typescale-7;
-        margin-top: $spacing-5;
-        margin-bottom: $spacing-4;
+        &:not(h2[class*="section"]){
+            font-size: $typescale-7;
+            margin-top: $spacing-5;
+            margin-bottom: $spacing-4;
 
-        @include breakpoint(md) {
-            font-size: rem(32);
-            margin-top: $spacing-7;
+            @include breakpoint(md) {
+                font-size: rem(32);
+                margin-top: $spacing-7;
+            }
         }
     }