fix: style issues in mobile (#823)

Author: lwasser

_sass/minimal-mistakes/_page.scss

@@ -680,6 +680,8 @@ span.date {
     }
     #main {
       padding: 0 .6rem;
+      max-width: 100%;
+      overflow-x: hidden;
     }
     .page__title {
       max-width: 100%;

_sass/minimal-mistakes/_pyos-cards.scss

@@ -478,12 +478,41 @@
   }
 }
 
-// Responsive adjustments for people cards
+// Responsive adjustments (align with home page card scale: padding 0.75em, title 1rem, body 0.875rem)
 @media screen and (max-width: $mobile) {
+  .people-card .people-card__content {
+    padding: 0.75em;
+  }
+
   .people-card {
-    .people-card__content {
-      .ppl_social {
-        font-size: 0.9em !important;
+    h4.person_name {
+      font-size: 1rem;
+    }
+
+    p.page__meta,
+    p.contrib_org,
+    .ppl_social {
+      font-size: 0.875rem;
+    }
+  }
+
+  .upcoming-events-list .event-card {
+    .event-card__date {
+      padding: 0.75em;
+    }
+    .event-card__date-text {
+      font-size: 1rem;
+      span:last-of-type {
+        font-size: 0.75rem;
+      }
+    }
+    .event-card__details {
+      padding: 0.75em;
+      h3 {
+        font-size: 1rem;
+      }
+      p {
+        font-size: 0.875rem;
       }
     }
   }

_sass/minimal-mistakes/_pyos-grid.scss

@@ -177,14 +177,25 @@ $colors: (
 
     // Home page new contributors: single row of 5, smaller cards, more gap
     &.entries-grid--contributors {
-      grid-template-columns: repeat(5, 1fr);
+      grid-template-columns: 1fr; // Mobile: 1 column
       grid-gap: 1rem;
       justify-items: center;
       > * {
         max-width: 200px;
         min-width: 0;
         width: 100%;
       }
+      @media (min-width: $small) {
+        grid-template-columns: repeat(2, 1fr); // Small: 2 columns
+      }
+
+      @media (min-width: $medium) {
+        grid-template-columns: repeat(3, 1fr); // Medium: 3 columns
+      }
+
+      @media (min-width: $large) {
+        grid-template-columns: repeat(5, 1fr); // Large: 5 columns
+      }
       .people-card {
         h4.person_name {
           font-size: 0.95rem;
@@ -226,14 +237,14 @@ $colors: (
 .packages-grid {
   display: grid;
   grid-gap: 10px;
-  grid-template-columns: 1fr; // Mobile: 1 column
+  grid-template-columns: minmax(0, 1fr); // Mobile: 1 column, allow shrink
 
   @media (min-width: $small) {
-    grid-template-columns: repeat(2, 1fr); // Small: 2 columns
+    grid-template-columns: repeat(2, minmax(0, 1fr)); // Small: 2 columns
   }
 
   @media (min-width: $medium) {
-    grid-template-columns: repeat(3, 1fr); // Medium and above: 3 columns (max)
+    grid-template-columns: repeat(3, minmax(0, 1fr)); // Medium and above: 3 columns (max)
   }
 
   // Feature package cards - compact display
@@ -564,16 +575,26 @@ $colors: (
 
 
 
-  /* max 480 px */
+  /* max 480 px - unified home page card scale */
   @media screen and (max-width: $mobile) {
-    // large buttons are disproportionately large
-    // Elements outside of notice blocks such as the blog page
+    // Shared scale: card padding 0.75em, title 1rem, body 0.875rem
+    .cards.highlight .card-body {
+      padding: 0.75em;
+      p {
+        font-size: 0.875rem;
+      }
+      h2.card-title {
+        font-size: 1rem;
+      }
+    }
+
     .blog__grid {
       h3.card__title-container {
         padding: 0;
       }
       .card-excerpt p {
-        line-height: 1.8rem;
+        line-height: 1.5;
+        font-size: 0.875rem;
       }
       .card__bkg .card__title-container {
         padding: 0;
@@ -590,30 +611,35 @@ $colors: (
 
     // the home page has this grid in a notice block
     .notice {
-      .card-body p, .card-body h2 {
-        line-height: 1.1;
-        padding: 0rem 1rem;
-        font-size: .9rem;
-      }
 
       .blog__grid {
-        font-size: 1.3em;
-        grid-template-columns: repeat(auto-fill, minmax(95%, 1fr))!important;
+        font-size: 1rem;
+        grid-template-columns: repeat(auto-fill, minmax(95%, 1fr)) !important;
         grid-auto-rows: 0fr!important;
         grid-column-gap: 7px;
         grid-row-gap: 1rem!important;
         margin-bottom: 5rem;
         padding: 0;
 
         .card-body {
-          font-size: .95rem;
+          padding: 0.75em;
+          font-size: 0.875rem;
+        }
+        .card-body p,
+        .card-body h2 {
+          line-height: 1.4;
+          padding: 0;
+          font-size: 0.875rem;
+        }
+        h3.card-title {
+          font-size: 1rem;
         }
         .cards {
-          margin: 0 0! important;
+          margin: 0 0 !important;
         }
 
-        & a {
-          font-size: 1.3em;
+        a {
+          font-size: 1em;
         }
       }
 

_sass/minimal-mistakes/_pyos-isotope.scss

@@ -303,4 +303,19 @@ input[type="text"] {
     margin-left: 0;
     margin-right: 0;
   }
+
+  // Align with blog cards: padding 0.75em, title 0.9rem, body 0.875rem
+  .package-card .package-card__content {
+    padding: 0.75em !important;
+  }
+
+  .package-card .package-card__title {
+    font-size: 0.9rem;
+    word-break: break-word;
+  }
+
+  .package-card .package-card__meta,
+  .package-card .package-card__description {
+    font-size: 0.875rem;
+  }
 }

_sass/minimal-mistakes/_pyos-main.scss

@@ -25,7 +25,7 @@ img {
 }
 
 
-div > div {
+div > div:not(.package-card__content) {
   padding: 10px;
 }
 
@@ -54,9 +54,10 @@ h2.clearall {
   font-size: .9em;
 }
 
-
-.wide .archive {
-  width: calc(100% - 100px);
+@include breakpoint($large) {
+  .wide .archive {
+    width: calc(100% - 100px);
+  }
 }
 
 .wide__p_text {
@@ -135,7 +136,10 @@ h2.clearall {
     width: 100%!important;
   }
 
-  h1, h2, h3, .archive__item-title {
+  h1,
+  h2,
+  h3:not(.package-card__title),
+  .archive__item-title {
     font-size: 1.6em!important;
   }
   .btn--large {

_sass/minimal-mistakes/_utilities.scss

@@ -103,6 +103,18 @@ body:hover .visually-hidden button {
   white-space: nowrap;
 }
 
+/*
+   Narrow text utility
+   ========================================================================== */
+
+.narrow {
+  font-size: 0.9em !important;
+}
+
+.narrow p {
+  font-size: 0.9em !important;
+}
+
 /*
    Task lists
    ========================================================================== */