Skip to content

Commit

Permalink
Merge pull request #312 from KaiiB/main
Browse files Browse the repository at this point in the history 
container/alignment changes
  • Loading branch information
@KaiiB
KaiiB authored Oct 3, 2024
2 parents 917cad9 + 4cfac04 commit 855ef48
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 28 deletions.
58 changes: 43 additions & 15 deletions src/lib/client/infoCard.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:[email protected]" 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:[email protected]" 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>
Expand All @@ -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";
Expand All @@ -51,7 +57,9 @@
font-size: 2vmin;
margin-top: 1vh;
margin-bottom: auto;
}
.card-button {
margin-bottom: 4vh;
background-color: var(--ds3-orange);
Expand All @@ -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>
8 changes: 4 additions & 4 deletions src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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;
}
Expand Down
42 changes: 33 additions & 9 deletions src/routes/get-involved/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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");
Expand All @@ -60,6 +62,8 @@
align-items: center;
text-align: center;
justify-content: space-around;
text-wrap: wrap;
}
.title-sec h1 {
color: white;
Expand All @@ -72,6 +76,8 @@
padding-bottom: 5vh;
margin-left: 15vw;
margin-right: 15vw;
}
.info-sec h2 {
text-align: center;
Expand All @@ -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>

0 comments on commit 855ef48

Please sign in to comment.