From 5c6f4b778bd03d638c8b0a3cc1101894479d9fbb Mon Sep 17 00:00:00 2001
From: elise <hei@elisejakob.no>
Date: Sun, 4 Aug 2024 18:03:46 +0200
Subject: [PATCH] misc mobile adjustments

---
 .../components/blocks/pageSection.module.scss |  4 +--
 .../events/featuredEvents.module.scss         |  2 +-
 web/src/components/general/logo.module.scss   | 10 ++++++
 web/src/components/general/pig.module.scss    |  4 +++
 .../general/sectionHeader.module.scss         |  2 +-
 web/src/components/layout/footer.module.scss  | 27 ++++++++++++++-
 web/src/components/layout/header.module.scss  |  6 ++++
 web/src/components/news/newsItem.module.scss  | 13 ++++++--
 .../components/venues/venueList.module.scss   | 12 +++++++
 web/src/css/variables.scss                    | 33 +++++++++++++++++++
 10 files changed, 105 insertions(+), 8 deletions(-)

diff --git a/web/src/components/blocks/pageSection.module.scss b/web/src/components/blocks/pageSection.module.scss
index 77f00d6..308ce88 100644
--- a/web/src/components/blocks/pageSection.module.scss
+++ b/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;
diff --git a/web/src/components/events/featuredEvents.module.scss b/web/src/components/events/featuredEvents.module.scss
index 2fc94bb..f779d08 100644
--- a/web/src/components/events/featuredEvents.module.scss
+++ b/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) {
diff --git a/web/src/components/general/logo.module.scss b/web/src/components/general/logo.module.scss
index d8bf1dd..9ed53be 100644
--- a/web/src/components/general/logo.module.scss
+++ b/web/src/components/general/logo.module.scss
@@ -27,4 +27,14 @@
   &.right {
     transform: scaleX(-1);
   }
+}
+
+@media (max-width: 800px) {
+  .logo {
+    width: 10rem;
+
+    &.index {
+      width: 12rem;
+    }
+  }
 }
\ No newline at end of file
diff --git a/web/src/components/general/pig.module.scss b/web/src/components/general/pig.module.scss
index fb5c45a..6346001 100644
--- a/web/src/components/general/pig.module.scss
+++ b/web/src/components/general/pig.module.scss
@@ -5,6 +5,10 @@
   svg {
     width: 100%;
   }
+
+  @media (max-width: 800px) {
+    width: 8rem;
+  }
 }
 
 .bgPigWrapper {
diff --git a/web/src/components/general/sectionHeader.module.scss b/web/src/components/general/sectionHeader.module.scss
index c59f675..c20193c 100644
--- a/web/src/components/general/sectionHeader.module.scss
+++ b/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 @@
     }
   }
 }
-
diff --git a/web/src/components/layout/footer.module.scss b/web/src/components/layout/footer.module.scss
index 9d18cf4..74d8196 100644
--- a/web/src/components/layout/footer.module.scss
+++ b/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);
   }
 }
 
@@ -111,4 +113,27 @@
   button {
     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;
+  }
+
 }
\ No newline at end of file
diff --git a/web/src/components/layout/header.module.scss b/web/src/components/layout/header.module.scss
index 326be38..8a7710e 100644
--- a/web/src/components/layout/header.module.scss
+++ b/web/src/components/layout/header.module.scss
@@ -235,4 +235,10 @@
 .observer {
   position: absolute;
   top: 8rem;
+}
+
+@media (max-width: 800px) {
+  .logo {
+    font-size: 1rem;
+  }
 }
\ No newline at end of file
diff --git a/web/src/components/news/newsItem.module.scss b/web/src/components/news/newsItem.module.scss
index 85e79af..5007de3 100644
--- a/web/src/components/news/newsItem.module.scss
+++ b/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 {
@@ -62,4 +63,10 @@
       pointer-events: none;
     }
   }
+}
+
+@media (max-width: 500px) {
+  .newsItem {
+    --item-height: 8rem;
+  }
 }
\ No newline at end of file
diff --git a/web/src/components/venues/venueList.module.scss b/web/src/components/venues/venueList.module.scss
index bf1b81f..6c7e66c 100644
--- a/web/src/components/venues/venueList.module.scss
+++ b/web/src/components/venues/venueList.module.scss
@@ -4,4 +4,16 @@
   column-gap: var(--spacing-gap-column);
   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;
+  }
 }
\ No newline at end of file
diff --git a/web/src/css/variables.scss b/web/src/css/variables.scss
index 8876628..9c669d8 100644
--- a/web/src/css/variables.scss
+++ b/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);
 }
@@ -82,4 +84,35 @@
     --spacing-sitepadding-block: 3rem;
     --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;
+  }
 }
\ No newline at end of file