Skip to content
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

Update project page header 2355 #3087

Merged
merged 11 commits into from
Jul 1, 2022
Merged

Update project page header 2355 #3087

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
77e3ba0
add new headers and tools section to credit page
Jaretzbalba Apr 7, 2022
44d4e05
incorporate changes from upstream
Jaretzbalba Apr 11, 2022
42148d2
Merge branch 'upstream-gh-pages' into gh-pages
Jaretzbalba Apr 13, 2022
6684bae
Merge branch 'upstream-gh-pages' into gh-pages
Jaretzbalba Apr 14, 2022
c69c0d6
Merge branch 'upstream-gh-pages' into gh-pages
Jaretzbalba Apr 20, 2022
4a46e3b
Merge branch 'upstream-gh-pages' into gh-pages
Jaretzbalba Apr 25, 2022
007aece
update html text and scss to match figma design
Jaretzbalba May 2, 2022
9b22302
Revert "add new headers and tools section to credit page"
Jaretzbalba May 9, 2022
c4d9608
Merge branch 'upstream-gh-pages' into update-project-page-header-2355
Jaretzbalba May 11, 2022
8a91c34
add query for tablet responsivness
Jaretzbalba May 23, 2022
423e73c
Merge branch 'feature-homepage-launch' into update-project-page-heade…
Jaretzbalba Jun 1, 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
35 changes: 28 additions & 7 deletions _sass/elements/_containers.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,22 +91,21 @@
}

@media #{$bp-below-tablet}{
img {
max-height: 170px;
}
}

@media #{$bp-below-mobile} {
flex-direction: column;
align-items: center;
padding: 32px;
img {
max-height: 170px;
}
}
}

.projscredits-text-margin {
display: flex;
flex-direction: column;
margin-right: 80px;
align-items: center;
max-width: 508px;
p {
font-size: 18px;
max-width: 508px;
Expand All @@ -116,12 +115,34 @@
h1 {
font-size: 48px;
}
@media #{$bp-below-mobile} {
@media #{$bp-below-tablet} {
margin: auto;
margin-bottom: 36px;
h1 {
font-size: 24px;
margin-bottom: 20px;
}
}
}

.projscredits-callouts {
display: grid;
grid-template-columns: 1fr 1% 1fr;
gap: 1rem;
position: relative;
@media #{$bp-below-tablet} {
grid-template-columns: 1fr;
}
.callout-link {
display: flex;
font-weight: 600;
}
hr {
transform: rotate(180deg);
width: 0;
height: 100px;
@media #{$bp-below-tablet} {
display: none;
}
}
}
21 changes: 15 additions & 6 deletions pages/projects-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,23 @@
<div class="header-container header-container--projscredits">
<div class="projscredits-text-margin">
<h1>Our Projects</h1>
<p>Our projects have real impact in local communities. There are
countless opportunities to build digital products, programs and
services across a number of skill levels and practice areas.
<p>Hack for LA’s projects have real impact in local communities.
Use the filters below to learn about our projects and the teams by Status, Technology, and Program area.
</p>
<p>Use the filters below to find a project that best suits your
interest, and find out how to get involved.
<p>Our projects also offer volunteers of all skill levels countless opportunities to build digital products, programs, and services across diverse fields of practice.
</p>
</div>
<div class="projscredits-callouts">
<div>
<p><strong>Learn how we build all these projects with volunteers</strong></p>
<a class="callout-link" href="/about/">About Us</a>
</div>
<hr>
<div>
<p><strong>Get involved with Hack for LA and become a contributor</strong></p>
<a class="callout-link" href="/join">Join Us</a>
</div>
</div>
</div>
<img src="/assets/images/projects-page/projects-hero.svg" alt="">
</div>

Expand Down