Skip to content

Applied Title classes to heading elements on donate page #2723

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JessicaLucindaCheng merged 10 commits into from
May 28, 2022
Merged

Applied Title classes to heading elements on donate page #2723

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
fa7815f
applied Title classes to heading elements on donate page, repositione…
pattshreds Jan 28, 2022
18b3321
changed Titlex classes to titlex, removed title classes from sass file.
pattshreds Feb 6, 2022
46a0b34
Merge branch 'gh-pages' into apply-design-system-classes-donate-2084
pattshreds Feb 21, 2022
7a229b5
fixed requested errors
pattshreds Feb 21, 2022
c8f9a87
Fixed the styling issues, localhost and hfla site match.
pattshreds Mar 25, 2022
6b91cad
made requested changes
pattshreds Mar 30, 2022
fc49d18
commiting changes so I can sync with upstream.
pattshreds Apr 10, 2022
600b822
Merge branch 'gh-pages' into apply-design-system-classes-donate-2084
pattshreds Apr 22, 2022
ed6222e
made requested changes
pattshreds May 16, 2022
e03808f
Merge branch 'gh-pages' into apply-design-system-classes-donate-2084
pattshreds May 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 4 additions & 16 deletions _sass/components/_donate.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,8 @@
flex-direction: column;
align-items: center;

h1 {
font-size: 48px;
.title1 {
padding-bottom: 28px;
@media #{$bp-mobile-up} {
font-size: 32px;
}
}

p {
Expand Down Expand Up @@ -62,8 +58,7 @@
padding: 32px 20px;
}

h1 {
font-size: 1.25rem;
.title4 {
margin-bottom: 1rem;
// Fixes title wrap at smallest mobile size
@media (max-width: #{$screen-mobile - 160}) {
Expand All @@ -72,8 +67,7 @@
}
}

h2 {
font-size: 16px;
.title7 {
width: 100%;
}

Expand Down Expand Up @@ -135,7 +129,7 @@
h2 {
margin-bottom: 24px;
}

li {
font-size: 1.125rem;
padding: 8px 0;
Expand All @@ -161,7 +155,6 @@
h1 {
grid-column: 2 / span 1;
grid-row: 1 / span 1;
font-size: 1.5rem;
margin-bottom: 2rem;
}

Expand Down Expand Up @@ -209,10 +202,6 @@
.donate-donation-body {
padding: 0 32px 0 16px;

h2 {
font-size: 18px;
}

ol {
line-height: 24px;
}
Expand Down Expand Up @@ -242,7 +231,6 @@
margin: auto 5rem auto 8rem;

h1 {
font-size: 48px;
padding-bottom: 0;
}

Expand Down
10 changes: 5 additions & 5 deletions pages/donate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<div class="donate-wrapper">
<div class="header-container header-container--donate">
<div class="donate-banner-text">
<h1>Donate to Hack for LA</h1>
<h1 class="title1">Donate to Hack for LA</h1>
<p>
We bring together civic-minded volunteers to build digital products,
programs and services with community partners and local government to
Expand All @@ -20,10 +20,10 @@ <h1>Donate to Hack for LA</h1>

<div class="content-section donate-card-container">
<div class="page-card card-primary page-card-lg page-card--donate">
<h1>Help Us Keep The Lights On</h1>
<h2 class="title4">Help Us Keep The Lights On</h2>
<img id="donate-donation-icon" class='donate-card-img' src="/assets/images/donate/help-us-icon.svg" alt="" />
<div class="donate-card-body">
<h2>Running Hack for LA costs money</h2>
<h3 class="title7">Running Hack for LA costs money</h3>
<p>
In support of the development and launch of enterprise software
products with Government and nonprofit partners, we are standardizing
Expand All @@ -32,7 +32,7 @@ <h2>Running Hack for LA costs money</h2>
products to the community.
</p>
<img class="donate-donation-png" src="/assets/images/donate/donation-chart.svg" alt="Hosting, mailing list services, Zoom accounts, domain names, stickers, t-shirts" />
<h2>How to help us continue to do impactful work</h2>
<h3 class="title7">How to help us continue to do impactful work</h3>
<ul>
<li>
Provide
Expand All @@ -44,7 +44,7 @@ <h2>How to help us continue to do impactful work</h2>
<div class="donate-donation">
<img class="donate-donation-png" src="/assets/images/about/hfla-donate.gif" alt="Gif showing how to select Hack for LA from donation list" />
<div class="donate-donation-body">
<h2>Make a donation to Hack for LA</h2>
<h3 class="title6">Make a donation to Hack for LA</h3>
<ol>
<li>
Please follow this link to the Code for America
Expand Down