From 4cfac04d858426fd67b32c7dc16ef7dbb9eca86d Mon Sep 17 00:00:00 2001
From: KaiiB <85962472+KaiiB@users.noreply.github.com>
Date: Wed, 2 Oct 2024 21:36:09 -0700
Subject: [PATCH] container/alignment changes

---
 src/lib/client/infoCard.svelte       | 58 +++++++++++++++++++++-------
 src/routes/+layout.svelte            |  8 ++--
 src/routes/get-involved/+page.svelte | 42 +++++++++++++++-----
 3 files changed, 80 insertions(+), 28 deletions(-)

diff --git a/src/lib/client/infoCard.svelte b/src/lib/client/infoCard.svelte
index d84e724..e603c40 100644
--- a/src/lib/client/infoCard.svelte
+++ b/src/lib/client/infoCard.svelte
@@ -14,14 +14,14 @@
     <a href = "{link}"><button class="card-button">{button_name}</button></a>
     {:else}
     <div class = 'outside'>
-    <div class="socials">
-        <a href="https://www.facebook.com/DS3UCSD/" rel="noreferrer" target="_blank"><img src="/svgs/icons/facebook_icon.svg" alt="facebook icon"></a>
-        <a href="https://discord.gg/NqHx8h3" rel="noreferrer" target="_blank"><img src="/svgs/icons/discord_icon.svg" alt="discord icon"></a>
-        <a href="https://www.instagram.com/ds3.ucsd/?hl=en" rel="noreferrer" target="_blank"><img src="/svgs/icons/instagram_icon.svg" alt="instagram icon"></a>
-        <a href="https://medium.com/ds3ucsd" rel="noreferrer" target="_blank"><img src="/svgs/icons/medium_icon.svg" alt="medium icon"></a>
-        <a href="mailto:ds3@ucsd.edu" rel="noreferrer" target="_blank"><img src="/svgs/icons/email_icon.svg" alt="email icon"></a>
-        <a href="https://open.spotify.com/show/7yHiQn4eqjy2EAzRNEmQdf" rel="noreferrer" target="_blank"><img src="/svgs/icons/spotify_icon.svg" alt="spotify icon"></a>
-    </div>
+        <div class="socials">
+            <a href="https://www.facebook.com/DS3UCSD/" rel="noreferrer" target="_blank"><img src="/svgs/icons/facebook_icon.svg" alt="facebook icon"></a>
+            <a href="https://discord.gg/NqHx8h3" rel="noreferrer" target="_blank"><img src="/svgs/icons/discord_icon.svg" alt="discord icon"></a>
+            <a href="https://www.instagram.com/ds3.ucsd/?hl=en" rel="noreferrer" target="_blank"><img src="/svgs/icons/instagram_icon.svg" alt="instagram icon"></a>
+            <a href="https://medium.com/ds3ucsd" rel="noreferrer" target="_blank"><img src="/svgs/icons/medium_icon.svg" alt="medium icon"></a>
+            <a href="mailto:ds3@ucsd.edu" rel="noreferrer" target="_blank"><img src="/svgs/icons/email_icon.svg" alt="email icon"></a>
+            <a href="https://open.spotify.com/show/7yHiQn4eqjy2EAzRNEmQdf" rel="noreferrer" target="_blank"><img src="/svgs/icons/spotify_icon.svg" alt="spotify icon"></a>
+        </div>
     </div>
     {/if}
 </div>
@@ -32,15 +32,21 @@
         margin-top: 7.5vh;
         margin-bottom: 7.5vh;
         height: 35vh;
-        padding-inline: 4vh;
-        width: 15vw;
-        word-wrap: break-word;
+        padding-inline: 2vh;
+        word-break: break-word;
         position: relative;
         background-color: #fff;
         box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
         display: flex;
         flex-direction: column;
+        text-align: left;
     }
+
+    @media (min-width: 912px) {
+        .card {
+            width: 30vw;
+        }
+    }       
     .card-header {
         font-size: 2.5vmin;
         font-family: "Montserrat Bold";
@@ -51,7 +57,9 @@
         font-size: 2vmin;
         margin-top: 1vh;
         margin-bottom: auto;
+        
     }
+
     .card-button {
         margin-bottom: 4vh;
         background-color: var(--ds3-orange);
@@ -62,20 +70,40 @@
         font-weight: bold;
         transition: 0.3s;
     }
+    
     .card-button:hover {
         background-color: var(--ds3-orange-lighten);
         cursor: pointer;
     }
-
     .socials {
         display: flex;
         justify-content: space-around;
         position: relative;
-        margin-top: auto;
         margin-bottom: 4vh;
-    }
+    } 
     .socials img {
-        height: 3vh;
+        height: 5vh;
         vertical-align: middle;
+        width: 2.5vw;
+    }
+    @media (max-width: 911px) {
+        .card-description {
+            font-size: 1.5vh;
+        }
+        .card-button {
+            width: 20vw;
+            height: 5vh;
+        }
+        .socials img {
+            width: 6vw;
+            height: 6vh
+        }
+        .card {
+            width: 50vw;
+        }
+        .card-header {
+            font-size: 2vh;
+        }
     }
+
 </style>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 81c6e34..5c56c7c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -181,11 +181,11 @@
         }
         #socials-section {
             display: flex;
-            width: 20%;
             justify-content: space-evenly;
         }
         #socials-section img {
             height: 50px;
+            width: 80%;
             vertical-align: middle;
             margin: 0.5rem;
         }
@@ -208,13 +208,13 @@
             text-align: center;
             margin: 0;
         }
-        #socials-section {
+        #socials-section {  
             display: flex;
-            width: 25%;
             justify-content: space-evenly;
         }
         #socials-section img {
-            height: 30px;
+            height: 40px;
+            width: 80%;
             vertical-align: middle;
             align-items: center;
         }
diff --git a/src/routes/get-involved/+page.svelte b/src/routes/get-involved/+page.svelte
index aba6a3f..456de98 100644
--- a/src/routes/get-involved/+page.svelte
+++ b/src/routes/get-involved/+page.svelte
@@ -18,13 +18,13 @@
     <meta property="og:type" content="website">
 </svelte:head>
 
-<section>
-    <div class="title-sec">
-        <h1>GET INVOLVED</h1>
+<section class = "container-page">
+    <div class="title-sec" >
+        <h1 class = "content">GET INVOLVED</h1>
     </div>
     <div class= "info-sec">
-        <h2>Get Involved</h2>
-        <p>
+        <h2 class = "content">Get Involved</h2>
+        <p class = "content">
             As a not-for-profit student organization, the Data Science Student Society (DS3) is funded largely through donations. 
             You can support our cause by donating, which allows us to increase the extent to which we can achieve our mission. 
             Each donation goes a long way and makes a huge difference.
@@ -50,7 +50,9 @@
         font-family: 'Montserrat';
         background-color: var(--base-bg);
     }
-    
+    .content {
+        white-space: normal;
+    }
     .title-sec {
         height: 40vh;
         background-image: url("/images/backgrounds/city_skyline.jpg");
@@ -60,6 +62,8 @@
         align-items: center;
         text-align: center;
         justify-content: space-around;
+        text-wrap: wrap;
+
     }
     .title-sec h1 {
         color: white;
@@ -72,6 +76,8 @@
         padding-bottom: 5vh;
         margin-left: 15vw;
         margin-right: 15vw;
+       
+        
     }
     .info-sec h2 {
         text-align: center;
@@ -83,9 +89,27 @@
         font-family: 'Montserrat';
         font-size: 25px;
     }
-
+    
     .card-container {
-        display: flex;
-        justify-content: space-around;
+            display: flex;
+            justify-content: space-around;
+            flex-direction: row;
+    }
+    @media (min-width: 912px) {
+        .card-container {
+            display: flex;
+            justify-content: space-around;
+            flex-direction: row;
+        }
+    }
+
+    @media (max-width: 911px) {
+        .card-container {
+            display: block;
+            justify-content: space-around;
+            flex-direction: column;
+        }
     }
+    
+
 </style>