Responsiveness updates:

- fixes some minor UI bugs - adds general responsiveness - further improvement to be made at a later date
osakunta · Jul 19, 2024 · fc5507a · fc5507a
1 parent 37d0cdd
commit fc5507a
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 95 deletions.
diff --git a/hooks/useCMS.test.ts b/hooks/useCMS.test.ts
diff --git a/hooks/useCMS.ts b/hooks/useCMS.ts
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -102,7 +102,11 @@ export default function Home() {
         </section>
         {/* Living Info */}
         <section className={styles.livingInfo}>
-          <Image src={aino} alt="A photo of SatO's mascot" />
+          <Image
+            src={aino}
+            alt="A photo of SatO's mascot"
+            className={styles.aino}
+          />
 
           <article className={styles.livingArticle}>
             <h2 className={styles.livingTitle}>
@@ -177,6 +181,50 @@ export default function Home() {
                 <Link href=""></Link>
               </CardActions>
             </Card>
+            <Card className={styles.newsCard}>
+              <CardActionArea>
+                <CardMedia
+                  height={250}
+                  component="img"
+                  image="https://lh5.googleusercontent.com/bDp4TqmugenBz4t8K9J4PfQkJbnEzwef49kbULsCaJ-7BY4VZ0Jg0I4V7SYcvb4lFISHnvjeYm1ARN4WVsoRUwdEcAwB9_ogpPV90CBlRMeAkFns7XDevbB3kKlTrwlvZQ=w1280"
+                  alt="Satakuntalainen Osakunta"
+                />
+                <CardContent className={styles.newsCardContent}>
+                  <Typography className={styles.cardTitle}>Title</Typography>
+                  <Typography className={styles.cardDescription}>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    Itaque, numquam magnam, eum nihil adipisci tenetur quasi vel
+                    minima nemo ratione molestiae in ab laborum perferendis
+                    beatae impedit dolorem iusto sunt.
+                  </Typography>
+                </CardContent>
+              </CardActionArea>
+              <CardActions className={styles.cardLink}>
+                <Link href=""></Link>
+              </CardActions>
+            </Card>
+            <Card className={styles.newsCard}>
+              <CardActionArea>
+                <CardMedia
+                  height={250}
+                  component="img"
+                  image="https://lh5.googleusercontent.com/bDp4TqmugenBz4t8K9J4PfQkJbnEzwef49kbULsCaJ-7BY4VZ0Jg0I4V7SYcvb4lFISHnvjeYm1ARN4WVsoRUwdEcAwB9_ogpPV90CBlRMeAkFns7XDevbB3kKlTrwlvZQ=w1280"
+                  alt="Satakuntalainen Osakunta"
+                />
+                <CardContent className={styles.newsCardContent}>
+                  <Typography className={styles.cardTitle}>Title</Typography>
+                  <Typography className={styles.cardDescription}>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    Itaque, numquam magnam, eum nihil adipisci tenetur quasi vel
+                    minima nemo ratione molestiae in ab laborum perferendis
+                    beatae impedit dolorem iusto sunt.
+                  </Typography>
+                </CardContent>
+              </CardActionArea>
+              <CardActions className={styles.cardLink}>
+                <Link href=""></Link>
+              </CardActions>
+            </Card>
           </span>
         </section>
         {/* Calendar */}
@@ -208,6 +256,8 @@ export default function Home() {
                 Siiry lomakkeelle
                 <Image src={arrowWhite} alt="arrow forward" />
               </Button>
+              <br />
+              <br />
               <h2>Häirintälomake</h2>
               <p>
                 Lorem ipsum dolor, sit amet consectetur adipisicing elit.
@@ -220,7 +270,11 @@ export default function Home() {
                 <Image src={arrowWhite} alt="arrow forward" />
               </Button>
             </div>
-            <Image src={cAside} alt="various messaging icons"></Image>
+            <Image
+              src={cAside}
+              alt="various messaging icons"
+              className={styles.contactAside}
+            ></Image>
           </div>
         </section>
 

diff --git a/styles/Home.module.css b/styles/Home.module.css
@@ -19,7 +19,7 @@
 .h2 {
   font-size: 3rem;
   font-weight: 600;
-  width: 20%;
+  width: 20rem;
   text-align: center;
 }
 
@@ -35,7 +35,11 @@
   justify-content: center;
   align-items: center;
   gap: 2rem;
-  margin: 5rem 0 5rem 0;
+  width: 70%;
+  max-width: 100%;
+  margin: 5rem 0;
+  flex-wrap: nowrap;
+  overflow-x: auto;
 }
 
 .colorCard1,
@@ -91,6 +95,11 @@
   font-size: 2rem;
 }
 
+.aino {
+  max-width: 40%;
+  height: auto;
+}
+
 .infoBtn {
   display: flex;
   flex-direction: row;
@@ -114,13 +123,18 @@
 .cardContainer {
   display: flex;
   flex-direction: row;
-  justify-content: flex-start;
+  justify-content: center;
   align-items: center;
-  gap: 1rem;
+  max-width: 100%;
+  gap: 1.5rem;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  padding: 0.5rem;
 }
 
 .newsCard {
-  width: 40%;
+  min-width: 48%;
+  width: 50%;
 }
 
 .newCardContent {
@@ -197,3 +211,77 @@
   height: 20rem;
   background-color: var(--blue300);
 }
+
+@media (max-width: 1050px) {
+  .contactAside {
+    width: 35%;
+    height: auto;
+  }
+}
+
+@media (max-width: 821px) {
+  .colorCard1,
+  .colorCard2,
+  .colorCard3 {
+    width: 15rem;
+    max-height: 20rem;
+    text-wrap: nowrap;
+  }
+
+  .livingArticle {
+    width: 70%;
+  }
+
+  .aino {
+    display: none;
+  }
+
+  .newsCard {
+    min-width: 55%;
+  }
+
+  .heroBtn {
+    font-size: 0.7rem;
+  }
+
+  .infoBtn {
+    font-size: 0.7rem;
+  }
+}
+
+@media (max-width: 431px) {
+  .h2 {
+    font-size: 2.5rem;
+  }
+  .cards {
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0.5rem;
+  }
+  .colorCard1,
+  .colorCard2,
+  .colorCard3 {
+    min-width: 15rem;
+    max-height: 20rem;
+    text-wrap: nowrap;
+  }
+
+  .cardContainer {
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0.5rem;
+  }
+
+  .newsCard {
+    min-width: 15rem;
+  }
+
+  .contactInfo {
+    width: 100%;
+    gap: 0.25rem;
+  }
+
+  .contactAside {
+    display: none;
+  }
+}
diff --git a/styles/globals.css b/styles/globals.css
@@ -102,3 +102,21 @@ body {
   color: var(--black);
   font-weight: 700;
 }
+
+@media (max-width: 1050px) {
+  .embla {
+    --slide-size: 40%;
+  }
+}
+
+@media (max-width: 821px) {
+  .embla {
+    --slide-size: 50%;
+  }
+}
+
+@media (max-width: 431px) {
+  .embla {
+    --slide-size: 65%;
+  }
+}