EXPHR: convert media queries in timeline, calendar, Waterloo Events and...

EXPHR: convert media queries in timeline, calendar, Waterloo Events and Waterloo News to container queries

src/patterns/03-layouts/layout/_layout-base.scss

@@ -16,6 +16,8 @@
   --layout-border-radius: 0;
 }
 .layout__region {
+  container-name: column;
+  container-type: inline-size;
 
   .pl & {
     outline: var(--size-xs) dashed var(--blue-6);

src/patterns/04-components/timeline/_timeline.scss

@@ -17,11 +17,11 @@
     font-weight: 500;
   }
 
-  @media(min-width: $screen-sm) {
+  @container column (min-width: #{$screen-sm}) {
     margin-left: var(--size-4);
   }
 
-  @media(min-width: $screen-md) {
+  @container column (min-width: #{$screen-md}) {
     margin: 0;
   }
   p{
@@ -54,7 +54,7 @@
     color: var(--uw-white);
     display: inline-block;
 
-    @media(min-width: $screen-md) {
+    @container column (min-width: #{$screen-md}) {
       margin-left: inherit;
     }
     padding: var(--size-05) var(--size-1);
@@ -70,7 +70,7 @@
     color: var(--uw-white);
     display: inline-block;
 
-    @media(min-width: $screen-md) {
+    @container column (min-width: #{$screen-md}) {
       margin-left: -0.23rem;
     }
     padding: var(--size-05) var(--size-1);
@@ -129,7 +129,7 @@
       height: var(--size-105);
       left: -0.5rem;
 
-      @media(min-width: $screen-md) {
+      @container column (min-width: #{$screen-md}) {
         left: -1.45rem;
       }
       position: absolute;
@@ -172,7 +172,7 @@
     padding-top: var(--size-4);
     width: 100%;
 
-    @media(min-width: $screen-md) {
+    @container column (min-width: #{$screen-md}) {
       width: calc(100% - 4rem);
     }
   }
@@ -184,7 +184,7 @@
     margin: 0;
     width: 100%;
 
-    @media(min-width: $screen-md) {
+    @container column (min-width: #{$screen-md}) {
       margin: -1rem 0 0 var(--size-4);
       padding: var(--size-2) var(--size-2) 0;
       width: calc(100% - 8rem);

src/patterns/04-components/view/view-calendar/_view-calendar.scss

@@ -244,7 +244,7 @@
   height: auto;
   min-height: var(--size-15);
   .uw-full-width .block-uw-cbl-multi-type-calendar & {
-    @media(min-width: $screen-xl) {
+    @container column (min-width: #{$screen-xl}) {
       min-height: var(--size-26);
     }
   }
@@ -421,7 +421,7 @@
 }
 
 /** Mobile (e.g. 48rem = 768px) **/
-@media(max-width: 48rem) {
+@container column (max-width: 48rem) {
   .calendar-view-table thead,
   .calendar-view-table .next-month,
   .calendar-view-table .previous-month {
@@ -459,7 +459,7 @@
  */
 
 /** Desktop (e.g. 48rem = 768px) **/
-@media(min-width: 48rem) {
+@container column (min-width: 48rem) {
   /** Multi-day events **/
   .calendar-view-day__row.is-multi {
     --calendar-view-day-multi-offset: calc(-1rem - 1px);
@@ -495,7 +495,7 @@
 // UW CODE
 .block-uw-cbl-multi-type-calendar .view-uw-view-calendar:has(ul.pager__items) {
   text-shadow: none;
-  @media(min-width: 48rem) {
+  @container column (min-width: 48rem) {
     .view-content {
       margin-top: calc(-1 * var(--size-9));
       position: relative;

src/patterns/04-components/waterloo-events/_waterloo-events.scss

@@ -18,10 +18,10 @@
     background-color: var(--gray-2);
     min-height: var(--size-20);
     width: 100%;
-    @media(min-width: $screen-sm) {
+    @container column (min-width: #{$screen-sm}) {
       width: 45%;
     }
-    @media(min-width: $screen-lg) {
+    @container column (min-width: #{$screen-lg}) {
       width: 30%;
     }
   }
@@ -110,7 +110,7 @@
 .uw-waterloo-events__button {
   display: flex;
   justify-content: center;
-  @media(min-width: $screen-lg) {
+  @container column (min-width: #{$screen-lg}) {
     grid-column: 1 / 3;
   }
   flex-flow: row;

src/patterns/04-components/waterloo-news/_waterloo-news.scss

@@ -10,7 +10,7 @@
   }
   .layout--uw-1-col &,
   .pl-js-pattern-example & {
-    @media(min-width: $screen-lg) {
+    @container column (min-width: #{$screen-lg}) {
       grid-template-columns: repeat(2, 1fr);
     }
   }
@@ -22,7 +22,7 @@
       position: relative;
       z-index: var(--layer-content);
     }
-    @media(min-width: $screen-lg) {
+    @container column (min-width: #{$screen-lg}) {
       .layout--uw-1-col &,
       .pl-js-pattern-example & {
         min-height: 50rem;
@@ -32,10 +32,10 @@
     }
     &--content {
       background-image: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.65) 20%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0) 100%);
-      @media(min-width: $screen-sm) {
+      @container column (min-width: #{$screen-sm}) {
         background-image: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.65) 25%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0) 100%);
       }
-      @media(min-width: $screen-lg) {
+      @container column (min-width: #{$screen-lg}) {
         background-image: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.65) 20%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0) 100%);
       }
       background-position: bottom;
@@ -69,7 +69,7 @@
       .uw-full-width & {
         .uw-waterloo-news__featured--headline,
         .uw-waterloo-news__featured--subhead {
-          @media(min-width: $screen-xl) {
+          @container column (min-width: #{$screen-xl}) {
             max-width: 35rem;
           }
         }
@@ -87,7 +87,7 @@
 
   &__items {
     grid-row: 2 / 3;
-    @media(min-width: $screen-lg) {
+    @container column (min-width: #{$screen-lg}) {
       .layout--uw-1-col &,
       .pl-js-pattern-example & {
         grid-column: 2 / 3;
@@ -105,7 +105,7 @@
     .layout--uw-1-col &,
     .pl-js-pattern-example & {
       margin-bottom: 0;
-      @media(min-width: $screen-lg) {
+      @container column (min-width: #{$screen-lg}) {
         padding: var(--size-2);
       }
     }
@@ -119,7 +119,7 @@
       .pl-js-pattern-example & {
         padding: var(--size-2);
         max-width: $screen-fb;
-        @media(min-width: $screen-lg) {
+        @container column (min-width: #{$screen-lg}) {
           padding: 0 var(--size-2) 0 var(--size-6);
         }
       }
@@ -143,12 +143,12 @@
   // and over image on mobile.
   &.uw-waterloo-news__featured-right {
     .uw-waterloo-news__featured {
-      @media(min-width: $screen-lg) {
+      @container column (min-width: #{$screen-lg}) {
         grid-column: 2 / 3;
       }
     }
     .uw-waterloo-news__items {
-      @media(min-width: $screen-lg) {
+      @container column (min-width: #{$screen-lg}) {
         grid-column: 1 / 2;
       }
     }
@@ -160,7 +160,7 @@
     }
     .uw-waterloo-news__items {
       display: none;
-      @media(min-width: $screen-lg) {
+      @container column (min-width: #{$screen-lg}) {
         height: 100%;
         min-height: inherit;
         max-height: inherit;
@@ -168,7 +168,7 @@
       }
     }
     .uw-waterloo-news__featured--content {
-      @media(min-width: $screen-lg) {
+      @container column (min-width: #{$screen-lg}) {
         display: none;
       }
     }
@@ -194,17 +194,17 @@
       padding: 0;
     }
     .uw-waterloo-news__featured {
-      @media(min-width: $screen-lg) {
+      @container column (min-width: #{$screen-lg}) {
         grid-column: 2 / 3;
       }
     }
     .uw-waterloo-news__items {
-      @media(min-width: $screen-lg) {
+      @container column (min-width: #{$screen-lg}) {
         grid-column: 1 / 2;
       }
     }
 
-    @media(min-width: $screen-xxl) {
+    @container column (min-width: #{$screen-xxl}) {
       .uw-full-width & {
         .uw-waterloo-news__item--content {
           max-width: unset;
@@ -216,7 +216,7 @@
   .uw-waterloo-news__button {
     display: flex;
     justify-content: center;
-    @media(min-width: $screen-lg) {
+    @container column (min-width: #{$screen-lg}) {
       grid-column: 1 / 3;
     }
     flex-flow: row;