Skip to content

Commit 0940f86

Browse files
owise1owise1
committed
final styles
1 parent 81d63b5 commit 0940f86

27 files changed

+703
-79
lines changed

‎package-lock.json‎

Lines changed: 90 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,16 @@
4141
"axios": "^0.18.0",
4242
"babel-polyfill": "^6.26.0",
4343
"classnames": "^2.2.6",
44+
"intersection-observer": "^0.11.0",
4445
"normalize.css": "^8.0.0",
4546
"postcss-loader": "^3.0.0",
4647
"prop-types": "^15.6.1",
47-
"react": "^16.4.1",
48+
"ramda": "^0.27.1",
49+
"react": "^16.8.6",
4850
"react-bootstrap": "^0.32.1",
4951
"react-dom": "^16.4.1",
5052
"react-hot-loader": "^4.3.3",
53+
"react-is-visible": "^1.1.1",
5154
"react-markdown": "^3.3.4",
5255
"react-responsive-carousel": "^3.2.9"
5356
}

‎src/App.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React, { Component } from "react"
22
import { hot } from "react-hot-loader"
33
import './styles/global.scss'
44
import Content2 from "./Components/Content/Content2.js"
5+
import "intersection-observer"
6+
import "react-responsive-carousel/lib/styles/carousel.min.css"
57

68
class App extends Component {
79
render() {

‎src/Components/Content/About.js‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,14 @@ export default class About extends Component {
1818
console.log(page);
1919
return <div className="about">
2020
<div className="banner">
21-
<h2>
22-
Progress happens when we work together
23-
</h2>
2421
</div>
25-
<div className="logos">
22+
{/* <div className="logos">
2623
{page.acf.logo_images.map((img, i) => <img src={img.image.sizes.medium} key={`image-${i}`} /> )}
27-
</div>
24+
</div> */}
2825
<div className="container">
2926
<div dangerouslySetInnerHTML={{ __html: page.content.rendered }} className="body"></div>
3027
</div>
31-
<div className="bg">
28+
{/* <div className="bg">
3229
<div className="container">
3330
<h2>Advisory Board</h2>
3431
<div className="advisors">
@@ -39,14 +36,28 @@ export default class About extends Component {
3936
</div>)}
4037
</div>
4138
</div>
42-
</div>
43-
<div className="container staff">
44-
<h2>Progressive Talent Pipeline Staff</h2>
45-
<div className="staffs">
46-
{page.acf.staff.map((s, i) => <div className="staff-member" key={`staff-${i}`}>
47-
<span>{s.name}</span>
48-
<a href={`mailto:${s.email}`}>{s.email}</a>
49-
</div>)}
39+
</div> */}
40+
<div className="green-split">
41+
<div className="staff container">
42+
<div className="green">
43+
<h2>Questions?<br/>Comments?<br/>Recommendations?</h2>
44+
<a className="btn" href="mailto:info@progressivetalentpipeline.org">Email Us</a>
45+
</div>
46+
<div className="staffs">
47+
{page.acf.staff.map((s, i) => <div className="staff-member" key={`staff-${i}`}>
48+
<img src={s.image.sizes.medium} />
49+
<div className="info">
50+
<b>{s.name}</b>
51+
<div className="line">
52+
<div>{s.position}</div>
53+
<div>
54+
<a className="email" href={`mailto:${s.email}`}/>
55+
<a className="twitter" href={s.twitter} />
56+
</div>
57+
</div>
58+
</div>
59+
</div>)}
60+
</div>
5061
</div>
5162
</div>
5263
</div>

‎src/Components/Content/About.scss‎

Lines changed: 104 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22

33
.about{
44
.banner{
5-
padding: 80px 0 300px;
5+
background: url(../../images/personnelispolicy.svg) top center no-repeat;
6+
height: 120px;
7+
margin-top: 120px;
68
}
79
.logos{
810
display: flex;
@@ -49,20 +51,112 @@
4951
}
5052
}
5153
}
54+
.green-split{
55+
background: url(../../images/colorline.svg) center center repeat-y;
56+
position: relative;
57+
}
5258
.staff{
53-
padding: 50px 0;
54-
h2{
55-
color: $blue;
56-
margin-bottom: 30px;
59+
display: flex;
60+
> div{
61+
width: 50%;
62+
box-sizing: border-box;
63+
padding: 50px 0;
64+
}
65+
.green{
66+
padding-right: 50px;
67+
h2{
68+
text-align: left;
69+
color: $blue;
70+
margin: 0;
71+
margin-bottom: 40px;
72+
font-size: 2.5rem;
73+
}
74+
a.btn{
75+
display: inline-block;
76+
background-color: $blue;
77+
color: $white;
78+
padding: 10px 0px;
79+
font-weight: bold;
80+
text-transform: uppercase;
81+
font-size: 1rem;
82+
border-radius: 0;
83+
width: 100%;
84+
85+
}
5786
}
5887
.staffs{
59-
display: flex;
60-
flex-wrap: wrap;
88+
padding-left: 50px;
6189
.staff-member{
6290
font-size: 20px;
63-
width: 50%;
64-
display: flex;
65-
flex-direction: column;
91+
img{
92+
width: 100%;
93+
display: block;
94+
}
95+
.info{
96+
b{
97+
display: block;
98+
color: $white;
99+
font-weight: 900;
100+
font-size: 1.6rem;;
101+
margin: 20px 0 10px;
102+
}
103+
.line{
104+
display: flex;
105+
justify-content: space-between;
106+
color: $text-light;
107+
font-weight: 200;
108+
a{
109+
display: inline-block;
110+
height: 30px;
111+
width: 30px;
112+
background: url(../../images/twitter.svg) center center no-repeat;
113+
margin-left: 15px;
114+
background-size: 90%;
115+
&.email{
116+
background-image: url(../../images/mail.svg);
117+
}
118+
}
119+
}
120+
}
121+
}
122+
}
123+
}
124+
}
125+
.about-page{
126+
.apply-banner{
127+
display: none;
128+
}
129+
}
130+
@media(max-width: $tablet-max){
131+
.about{
132+
.banner{
133+
background-size: 90%;
134+
height: 50px;
135+
margin-top: 80px;
136+
}
137+
.green-split{
138+
background: none;
139+
}
140+
.staff{
141+
.green{
142+
background-color: $green;
143+
padding: 50px;
144+
h2{
145+
font-size: 1.8rem;
146+
}
147+
}
148+
.staffs{
149+
background-color: $blue;
150+
padding-right: 50px;
151+
152+
}
153+
flex-direction: column;
154+
padding-left: 0;
155+
padding-right: 0;
156+
> div{
157+
box-sizing: border-box;
158+
overflow: hidden;
159+
width: 100%;
66160
}
67161
}
68162
}

‎src/Components/Content/ApplyBanner.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import "./ApplyBanner.scss"
44
export default class ApplyBanner extends Component {
55
render(){
66
return <div className="apply-banner footer">
7-
Are you ready to contribute your ideas<br/>to our nation? <a href="" target="_blank">Apply Now ></a>
7+
{this.props.children}<br/><a href="https://progressivetalentpipeline.applytojob.com/apply" target="_blank">Apply Now&nbsp;></a>
88
</div>
99
}
1010
}

‎src/Components/Content/ApplyBanner.scss‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,21 @@
33
.apply-banner.footer{
44
background-color: $popColor;
55
color: $black;
6-
padding: 50px 100px;
6+
padding: 70px 100px;
77
font-size: 2rem;
88
font-weight: 900;
99
position: relative;
1010
margin-top: 25px;
1111
a{
12-
color: $white;
12+
color: $blue;
13+
&:hover{
14+
color: $white;
15+
}
16+
}
17+
}
18+
@media(max-width: $tablet-max){
19+
.apply-banner.footer{
20+
font-size: 1.8rem;
21+
padding: 30px;
1322
}
14-
1523
}

0 commit comments

Comments
 (0)