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 @@ {:else}
-
- facebook icon - discord icon - instagram icon - medium icon - email icon - spotify icon -
+
+ facebook icon + discord icon + instagram icon + medium icon + email icon + spotify icon +
{/if} @@ -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; + } } + \ 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 @@ -
-
-

GET INVOLVED

+
+
+

GET INVOLVED

-

Get Involved

-

+

Get Involved

+

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; + } } + +