misc mobile adjustments

web/src/components/blocks/pageSection.module.scss

@@ -47,8 +47,8 @@
 
 .icon {
   flex: none;
-  width: 3.4rem;
-  height: 3.4rem;
+  width: var(--size-icon-large);
+  height: var(--size-icon-large);
   background: var(--color-goldenBeige);
   border-radius: 100%;
   display: flex;

web/src/components/events/featuredEvents.module.scss

@@ -3,7 +3,7 @@
   grid-template-columns: repeat(3, 1fr);
   column-gap: var(--spacing-gap-column);
   row-gap: var(--spacing-gap-row);
-  padding-bottom: calc(var(--spacing-section-bottom)*2);
+  padding-bottom: var(--spacing-section-bottom);
 }
 
 @media (max-width: 900px) {

web/src/components/general/logo.module.scss

@@ -28,3 +28,13 @@
     transform: scaleX(-1);
   }
 }
+
+@media (max-width: 800px) {
+  .logo {
+    width: 10rem;
+
+    &.index {
+      width: 12rem;
+    }
+  }
+}

web/src/components/general/pig.module.scss

@@ -5,6 +5,10 @@
   svg {
     width: 100%;
   }
+
+  @media (max-width: 800px) {
+    width: 8rem;
+  }
 }
 
 .bgPigWrapper {

web/src/components/general/sectionHeader.module.scss

@@ -2,6 +2,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-wrap: wrap;
 
   a {
     display: block;
@@ -17,4 +18,3 @@
     }
   }
 }
-

web/src/components/layout/footer.module.scss

@@ -58,8 +58,10 @@
 .social {
   ul {
     display: flex;
+    flex-wrap: wrap;
     grid-column: span 9;
-    gap: var(--spacing-s);
+    column-gap: var(--spacing-s);
+    row-gap: var(--spacing-xs);
   }
 }
 
@@ -112,3 +114,26 @@
     font-size: var(--font-size-caption);
   }
 }
+
+@media (max-width: 900px) {
+  .social,
+  .contact,
+  .visit {
+    grid-template-columns: 1fr;
+
+    h2 {
+      grid-column: 1 / -1;
+    }
+  }
+
+  .social ul,
+  .emails,
+  .visit >div, .visit >ul {
+    grid-column: 1 / -1;
+  }
+
+  .emails {
+    grid-template-columns: 1fr;
+  }
+
+}

web/src/components/layout/header.module.scss

@@ -236,3 +236,9 @@
   position: absolute;
   top: 8rem;
 }
+
+@media (max-width: 800px) {
+  .logo {
+    font-size: 1rem;
+  }
+}

web/src/components/news/newsItem.module.scss

@@ -41,14 +41,15 @@
     display: grid;
     grid-template-columns: auto 1fr;
     column-gap: 1rem;
+    --item-height: 19rem;
   }
   .image {
-    width: 10rem;
-    height: 10rem;
+    width: var(--item-height);
+    height: var(--item-height);
   }
   .text {
     padding-top: 0;
-    max-height: 10rem;
+    max-height: var(--item-height);
     overflow: hidden;
     position: relative;
     &:after {
@@ -63,3 +64,9 @@
     }
   }
 }
+
+@media (max-width: 500px) {
+  .newsItem {
+    --item-height: 8rem;
+  }
+}

web/src/components/venues/venueList.module.scss

@@ -5,3 +5,15 @@
   row-gap: var(--spacing-gap-row);
   padding-bottom: var(--spacing-section-bottom);
 }
+
+@media (max-width: 900px) {
+  .venueList {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 600px) {
+  .venueList {
+    grid-template-columns: 1fr;
+  }
+}

web/src/css/variables.scss

@@ -10,6 +10,7 @@
   --font-main-bold-italic: 'AvenirNextBoldItalic', 'Avenir Next', 'Avenir', sans-serif;
   --font-serif: 'p22-mackinac-pro', serif;
 
+  // font sizes
   --font-size-xs: .66rem;
   --font-size-caption: .8rem;
   --font-size-body: 1rem;
@@ -66,6 +67,7 @@
   // animations
   --transition-easing: .3s ease;
 
+  // borders
   --border: 1px solid var(--color-neufPink);
   --border-s: 1px solid var(--color-chateauBlue-05);
 }
@@ -83,3 +85,34 @@
     --spacing-sitepadding-inline: 10rem;
   }
 }
+
+@media (max-width: 600px) {
+  :root {
+    // font sizes
+    --font-size-xs: .66rem;
+    --font-size-caption: .8rem;
+    --font-size-body: 1rem;
+    --font-size-lead: 1.2rem;
+    --font-size-h3: 1.3rem;
+    --font-size-h2: 1.6rem;
+    --font-size-h1: 2rem;
+
+    // spacing
+    --spacing-sitepadding-block: 1.6rem;
+    --spacing-sitepadding-inline: 1rem;
+    --spacing-gap-column: var(--spacing-sitepadding-block);
+    --spacing-gap-row: var(--spacing-sitepadding-block);
+    --spacing-xs: .5rem;
+    --spacing-s: 1rem;
+    --spacing-m: 1.4rem;
+    --spacing-l: 1.8rem;
+    --spacing-xl: 6rem;
+    --spacing-section-bottom: var(--spacing-l);
+
+    // sizes
+    --size-width-p: 36rem;
+    --size-icon: 1em;
+    --size-icon-circle: 2rem;
+    --size-icon-large: 3rem;
+  }
+}