Skip to content

Commit

Permalink
Integrate Donation GIF component into Join Us donation include, refac…
Browse files Browse the repository at this point in the history
…tor associated SCSS on page and component (hackforla#4926)
  • Loading branch information
adrianang authored and ronaldpaek committed Jul 19, 2023
1 parent 7fb961a commit a6cc3b9
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 73 deletions.
22 changes: 2 additions & 20 deletions _includes/join-donate-card.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,25 +22,7 @@ <h3 class="title6 page-card--large-icon-header-secondary">How to help us continu
</ul>
</div>
<div class="join-us-donation">
<img
class="join-us-donation-img"
src="/assets/images/about/hfla-donate.gif"
alt=""
/>
<div class="join-us-donation-body">
<h3 class="title6 page-card--large-icon-header-secondary">Make a donation to Hack for LA</h3>
<ol>
<li>
Please follow this link to the Code for America
<a href="https://www.codeforamerica.org/donate" target="_blank" rel="noopener noreferrer">donation
form</a>
</li>
<li>
To make a donation please select <strong>Hack for LA</strong> under the brigades
listed.
</li>
</ol>
<p id='donation-footer'>*100% of proceeds go to Hack for LA when option is selected.</p>
</div>
<h3 class="title6 page-card--large-icon-header-secondary">Make a donation to Hack for LA</h3>
{% include /donation/donate-gif-text.html %}
</div>
</div>
19 changes: 5 additions & 14 deletions _sass/components/_donate-components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -78,48 +78,39 @@
}

.donation-gif {
box-shadow: 0px 2px 4px 0px #00000040;
box-shadow: 0px 2px 4px 0px #00000040;
}

.donation-grid {
display: flex;
flex-direction: column;
align-items: center;
p {
margin-top: 20px;
margin-left: 20px;
}
}

.donation-body {
p {
margin-left: -10px;
font-size: 18px;
}

ol {
padding-left: 5px;
}

li {
padding-bottom: 15px;
}
}

.donation-footer {
margin-left: -10px;
margin-top: 20px;
font-style: italic;
}

@media #{$bp-tablet-up} {
.donation-grid{
.donation-grid {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
padding: 20px;
text-align: left;
align-items: flex-start;
font-size:18px;
font-size: 18px;

.donation-body {
grid-column: 1 / span 1;
Expand All @@ -144,7 +135,7 @@

.donation-footer {
max-width: 3340px;
margin: 20px 0px 0px -10px;
margin: 48px 0px 0px -10px;
padding: 0px 48px 0px 60px;
font-size: 15px;
}
Expand Down
47 changes: 8 additions & 39 deletions _sass/components/_join-us.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,6 @@
display: flex;
flex-direction: column;

.join-us-donation-img {
width: 100%;
margin: 20px auto;
padding-top: 0px;
padding-bottom: 0px;
}

.join-us-remove-p-padding {
padding-bottom: 0;
}
Expand All @@ -33,18 +26,15 @@
padding: 20px;
border-radius: 20px;

h2 {
margin-bottom: 24px;
h3 {
margin: 24px auto;
text-align: center;
}

li {
font-size: 1.125rem;
padding: 8px 0;
}

#donation-footer {
padding-left: 20px;
font-size: 15px;
img {
width: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
}
}
Expand All @@ -61,37 +51,16 @@
align-self: flex-start;
}

.join-us-donation-img {
max-width: 419px;
padding-bottom: 20px;
}

.join-us-donation {
display: flex;
flex-direction: row-reverse;
flex-direction: column;
align-items: center;
grid-column: 1 / span 2;
grid-row: 3 / span 1;

img {
width: 318px;
}

.join-us-donation-body {
padding: 0 32px 0 16px;

h2 {
font-size: 18px;
}

ol {
line-height: 24px;
}

li {
padding: 5px 0;
}
}
}
}
}
Expand Down

0 comments on commit a6cc3b9

Please sign in to comment.