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

Create and apply header component #2002

Merged
merged 9 commits into from
Aug 6, 2021
Merged

Create and apply header component #2002

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0378442
consolidate header component css into container file
arghmatey Jul 22, 2021
cf592d9
remove redundant header css
arghmatey Jul 22, 2021
320d7cf
update page files with new header component class names
arghmatey Jul 22, 2021
3b89e4e
remove left over comment
arghmatey Jul 22, 2021
171abc0
add about page link styling
arghmatey Jul 23, 2021
129683e
add about page link styling
arghmatey Jul 23, 2021
93c2730
final header class names
arghmatey Jul 23, 2021
623ea5b
resolve header spacing issues
arghmatey Aug 4, 2021
1a03d8e
Merge branch 'gh-pages' into header-container-component
arghmatey Aug 5, 2021
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
66 changes: 13 additions & 53 deletions _sass/components/_about.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,25 @@
/* This page is built using a mobile first method. Plain tags apply to mobile. Breakpoints below for larger sizes. */

.header-container--about-us {
display: flex;
justify-content: center;
flex-flow: column;
padding: 25px 15px 20px 15px;
}
.header-link--about {
text-decoration: none;
font-weight: 700;

.header-container--about-us h1 {
font-weight: 900;
margin-bottom: 30px;
&:link,
&:visited {
color: $color-black;
}

&:hover,
&:active,
&:focus {
color: $color-red;
}
}

.donation-gif-box-shadow {
box-shadow: 0px 8px 16px rgba(0,0,0,0.12);
}

.header-text--about-us {
font-size: 18px;
max-width: 500px;
text-align: left;
margin-left: auto;
margin-right: auto;

a {
text-decoration: none;
font-weight: 700;

&:link,
&:visited {
color: $color-black;
}

&:hover,
&:active,
&:focus {
color: $color-red;
}
}
}

// CSS Grid
.page-content-container-grid {
display: grid;
Expand Down Expand Up @@ -599,16 +579,6 @@ a.anchor {

// Below tablet - 768px
@media #{$bp-below-tablet} {
.about-header-text-margin{
margin-bottom: 36px;

h1 {
margin-bottom: 28px;
}
}
.header-text--about-us {
font-size: 16px;
}
.page-content-container-grid {
margin-top: 0;
}
Expand All @@ -626,16 +596,6 @@ a.anchor {

//Bigger than desktop - 960px
@media #{$bp-desktop-up} {

.header-container--about-us {
flex-flow: row;
padding: 3rem 1rem 0 1rem;
}

.about-header-text-margin {
margin-right: 100px;
}

// The next two tags turn on and off the sticky nav sidebar
.page-content-container-grid {
grid-template-columns: 996px auto;
Expand Down
88 changes: 19 additions & 69 deletions _sass/components/_communities-of-practice.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,82 +1,32 @@
.header--communities {
display: flex;
flex-flow: row;
justify-content: center;
background: #fff;
height: fit-content;
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: normal;
align-items: center;
/*This page has a lot more text than the others, so it starts looking weird earlier*/
@media #{$bp-below-desktop} {
flex-direction: column;
}

.header-text--communities {
display: flex;
flex-direction: column;
align-items: center;

p{
font-size: 18px;
max-width: 508px;
margin-top: 8px;
text-align: left;
@media #{$bp-below-tablet} {
max-width: 300px;
font-size: 16px;
}
}
h1 {
font-size: 48px;
@media #{$bp-below-tablet} {
font-size: 40px;
margin-bottom: 28px;
}
@media #{$bp-below-mobile} {
font-size: 32px;
}
}
}

.header-img--communities {
max-height: 240px;
margin-left: 80px;
@media #{$bp-below-desktop} {
margin: auto;

}
@media #{$bp-below-tablet} {
width:100%;
}
}

.header-self-invite--communities {
display:flex;
align-items: flex-start;
max-width: 508px;
margin-top: 31px;
@media #{$bp-below-tablet} {
max-width: 300px;
margin-bottom: 30px;
}
.header-self-invite--communities {
display:flex;
align-items: flex-start;
max-width: 508px;
margin-top: 31px;

.alert--communities {
font-size: 16px;
font-weight: bold;
max-width: 450px;
}
}
.self-invite-img {
/*Note "margin-top: 15px" is needed to keep this img aligned with neighboring text*/
margin-top: 15px;
margin-right: 27px;
width: 24px;
height: 24px;
}

.alert--communities {
font-size: 16px;
font-weight: bold;
max-width: 450px;
margin-top: 8px;
text-align: left;
}

@media #{$bp-below-tablet} {
max-width: 300px;
margin-bottom: 30px;
}
}


.content--communities {
background: $color-pink;
display: flex;
Expand Down
81 changes: 0 additions & 81 deletions _sass/components/_credit-items.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,87 +11,6 @@
font-weight: normal;
}

.header-container--credits {
display: flex;
flex-direction: row;
justify-content: center;

img {
max-height: 240px;
}

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

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

.credits-text-margin {
display: flex;
flex-direction: column;
margin-right: 80px;
p {
font-size: 18px;
max-width: 508px;
margin-top: 8px;
text-align: left;
}
h1 {
font-size: 48px;
}
@media #{$bp-below-tablet}{
h1 {
font-size: 2.5rem;
}
}
@media #{$bp-below-mobile} {
margin: auto;
margin-bottom: 36px;
h1 {
font-size: 2rem;
margin-bottom: 28px;
}
p {
padding: 0px;
}
}
}

.header-text {
font-size: 26px;
display: flex;
max-width: 895px;
text-align: center;
padding: 30px;
margin: 12px auto;
font-family: "Roboto" sans-serif;
}

.mobile-image {
@media #{$bp-below-mobile} {
padding: 0;
}
}

.credit-hero {
padding: 33px;
margin: 0px auto;
display: flex;
justify-content: space-evenly;

@media #{$bp-below-mobile} {
flex-direction: column;
text-align: -webkit-center;
}
}

.credits-item {
margin: 15px;
padding-bottom: 15px;
Expand Down
74 changes: 1 addition & 73 deletions _sass/components/_join-us.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,48 +6,6 @@
min-height: 100vh;
}

.header-container--join {
display: flex;
flex-direction: column;
align-items: center;
padding: 4rem 1rem;
height: fit-content;

.join-us-banner-text {
display: flex;
flex-direction: column;
align-items: center;

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

p {
font-size: 18px;
max-width: 300px;
text-align: left;
@media #{$bp-tablet-up} {
max-width: 500px;
}
@media #{$bp-mobile-up} {
font-size: 16px;
text-align: left;
}
}
}

img {
width: 80%;
max-width: 500px;
margin: auto;
padding-top: 20px;
}
}

.join-us-card-container {
background: #f7f5f5;
display: flex;
Expand Down Expand Up @@ -141,34 +99,4 @@

/*---------
| Desktop
-----------*/

@media #{$bp-desktop-up} {
.header-container--join {
flex-direction: row;
max-width: 1200px;
margin: 37px auto 0;

.join-us-banner-text {
width: 500px;
min-width: 300px;
margin: auto 5rem auto 8rem;

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

p {
font-size: 18px;
max-width: 508px;
}
}

img {
max-width: 385px;
margin: auto 1rem auto 0;
padding: 0 15px;
}
}
}
-----------*/
Loading