Trying to iron out all the sizing differences.

uiowa · Jul 2, 2024 · 613299b · 613299b
1 parent 5111ae1
commit 613299b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 28 deletions.
diff --git a/src/components/card/Card.stories.js b/src/components/card/Card.stories.js
@@ -418,9 +418,9 @@ DateHighlight.args = {
   media_size: 'small',
   media_shape: 'circle',
   media:
-    '<div class="date-highlight">\n' +
-    '  <span class="month">June</span>\n' +
-    '  <span class="day">9</span>\n' +
+    '<div class="media-date">\n' +
+    '  <span class="media-date--month">June</span>\n' +
+    '  <span class="media-date--day">9</span>\n' +
     '</div>',
   grid_type: 'onecol',
   record_count: 1,

diff --git a/src/scss/components/_media.scss b/src/scss/components/_media.scss
@@ -13,7 +13,7 @@
   margin-top: 0;
   height: auto;
 
-  img, .date-highlight {
+  img, .media-date {
     aspect-ratio: 1 / 1;
     border-radius: 50%;
     margin-top: 0;

diff --git a/src/scss/components/card.scss b/src/scss/components/card.scss
@@ -116,7 +116,7 @@
       object-fit: cover;
     }
 
-    .date-highlight {
+    .media-date {
       position: relative;
       color: #000;
       background-color: #ffcd00;
@@ -125,15 +125,15 @@
       width: 6rem;
       height: 6rem;
 
-      .month {
+      .media-date--month {
         font-size: 1rem;
         display: block;
         line-height: 100%;
         text-transform: uppercase;
         font-weight: 300;
       }
 
-      .day {
+      .media-date--day {
         font-size: 2.5rem;
         display: block;
         line-height: 100%;
@@ -186,14 +186,15 @@
       margin-top: 0;
       margin-right: 0;
     }
-    &.media--small {
+    &.media--x-small {
       max-width: 9.375rem;
     }
-    &.media--medium {
+    &.media--small {
       max-width: 15.625rem;
-      @include breakpoint(sm) {
-        max-width: 60%;
-      }
+
+      //@include breakpoint(sm) {
+      //  max-width: 60%;
+      //}
     }
   }
 
@@ -344,47 +345,56 @@
     }
   }
 
+  .media--widescreen .media-date {
+    width: unset;
+  }
+
   .media--xx-small {
-    &.media--circle,
-    &.media--square {
-      max-width: 5.375rem;
-    }
+    max-width: 5.375rem;
 
     &.media--widescreen {
       @include container-query() {
         max-width: 11.375rem;
       }
 
-      .date-highlight {
+      .media-date {
         width: unset;
       }
     }
   }
 
   .media--x-small {
     max-width: 11.375rem;
-  }
 
-  .media--x-small {
     @include container-query() {
       max-width: 11.375rem;
     }
   }
 
-  .media--x-small {
+  .media-small {
+    @supports not (contain: inline-size) {
+      @include breakpoint(sm) {
+        max-width: none;
+      }
+    }
+
+    &.media--widescreen {
+      @include container-query() {
+        max-width: 15.625rem;
+      }
+    }
+  }
+
+  ///////////////////////////////////////////////
+
+
+  .media--small {
     @include container-query() {
-      max-width: 15.625rem;
+      flex: 0 0 27.5%;
     }
   }
 
   .media--medium {
-    &.media--circle {
-      @supports not (contain: inline-size) {
-        @include breakpoint(sm) {
-          max-width: none;
-        }
-      }
-    }
     @include container-query() {
       flex: 0 0 35%;
     }