Skip to content

Commit 9460222

Browse files
lancebeckerlancebecker
committed
Start layout work in the index file, change the headroom configurations
1 parent e8f1ece commit 9460222

14 files changed

+490
-69
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,5 @@ node_modules
3131

3232
# Environment file
3333
.envrc
34+
35+
.DS_Store

‎css/main.scss‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
html,body {
2+
margin: 0;
3+
padding: 0;
4+
background: #f9f9f9;
5+
}
6+
7+
img {
8+
display: block;
9+
margin: 0;
10+
}
11+
12+
.primary-navigation {
13+
display: flex;
14+
background: #fff;
15+
padding: 10px 0;
16+
17+
.logo {
18+
width: 25px;
19+
}
20+
21+
a {
22+
text-transform: uppercase;
23+
text-decoration: none;
24+
color: #000;
25+
font-weight: bold;
26+
margin-right: 25px;
27+
padding: 0px 5px;
28+
font-size: 0.9rem;
29+
letter-spacing: 0.03rem;
30+
31+
&:last-child {
32+
margin-right: 0;
33+
}
34+
35+
}
36+
37+
.highlight {
38+
border: 1px solid #ccc;
39+
}
40+
41+
}
42+
43+
.primary-header {
44+
font-size: 3.45rem;
45+
font-weight: bold;
46+
text-transform: uppercase;
47+
padding-top: 15px;
48+
margin-bottom: 65px;
49+
}
50+
51+
.hero-container {
52+
display: flex;
53+
flex-direction: column;
54+
align-items: center;
55+
width: 100%;
56+
min-height: 100vh;
57+
background: url('/images/jsmn-hero-banner.jpg') center center no-repeat;
58+
background-size: cover;
59+
padding: 20% 0;
60+
box-sizing: border-box;
61+
}
62+
63+
.event-name {
64+
font-family: 'Didot';
65+
font-size: 1.4rem;
66+
padding: 15px;
67+
background: #fff;
68+
border-radius: 2px;
69+
margin: 5px 0;
70+
}
71+
72+
.hero-container-content {
73+
max-width: 1000px;
74+
padding: 30px;
75+
}
76+
77+
.sponsered-by-label {
78+
text-align: center;
79+
}
80+
81+
.next-event {
82+
display: flex;
83+
flex-direction: column;
84+
font-size: 1.1rem;
85+
justify-content: center;
86+
}
87+
88+
.next-event-tagline {
89+
font-size: 1.4rem;
90+
}
91+
92+
.next-event-timestamp {
93+
margin-top: 5px;
94+
font-size: 1rem;
95+
96+
}
97+
98+
.button-row {
99+
display: flex;
100+
align-items: center;
101+
margin: 50px 0 0;
102+
}
103+
104+
.outline-button {
105+
display: flex;
106+
align-items: center;
107+
justify-content: center;
108+
border: 2px solid #000;
109+
padding: 8px 10px;
110+
font-weight: bold;
111+
margin-right: 10px;
112+
background: none;
113+
cursor: pointer;
114+
min-height: 55px;
115+
box-sizing: border-box;
116+
transition: all 0.2s ease-out;
117+
118+
&:hover {
119+
background: #000;
120+
color: #fff;
121+
}
122+
123+
.icon {
124+
display: block;
125+
margin-right: 3px;
126+
width: 35px;
127+
height: 35px;
128+
}
129+
130+
.slack {
131+
background: url('/images/Slack_Mark_Monochrome_Black.svg') center center no-repeat;
132+
background-size: 150%;
133+
}
134+
135+
.rsvp {
136+
background: url('/images/picture-calendar-icon.svg') center center no-repeat;
137+
background-size: 100%;
138+
}
139+
140+
&:last-child {
141+
margin-right: 0;
142+
}
143+
144+
}
145+
146+
.sponser-container {
147+
display: flex;
148+
align-items: center;
149+
justify-content: center;
150+
flex-direction: column;
151+
margin: 15% 0;
152+
}
153+
154+
.sponser-container-row {
155+
display: flex;
156+
align-items: center;
157+
justify-content: center;
158+
}
159+
160+
.sponsored-by-title {
161+
font-style: oblique;
162+
margin-bottom: 15px;
163+
font-family: 'Didot';
164+
font-size: 1.4rem;
165+
}
166+
167+
.sponser {
168+
display: flex;
169+
align-items: center;
170+
justify-content: center;
171+
background: #ffffff;
172+
width: 275px;
173+
height: 125px;
174+
margin-right: 20px;
175+
border-radius: 2px;
176+
box-shadow: 0 0 5px rgba( #000, 0.1 );
177+
border: 1px solid #f9f9f9;
178+
cursor: pointer;
179+
transition: all 0.2 ease-out;
180+
181+
&:hover {
182+
box-shadow: 0 0 15px rgba( #000, 0.3 );
183+
transform: scale( 1.05 );
184+
}
185+
186+
img {
187+
diplay: block;
188+
margin: 0;
189+
width: 85%;
190+
}
191+
192+
}
193+
194+
.secondary-content {
195+
display: flex;
196+
}

‎pages/_template.jsx‎

Lines changed: 15 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Link } from 'react-router'
44
import { prefixLink } from 'gatsby-helpers'
55
import Headroom from 'react-headroom'
66
import '../css/markdown-styles'
7+
import '../css/main.scss'
78
import { config } from 'config'
89

910
import { rhythm } from '../utils/typography'
@@ -17,80 +18,29 @@ module.exports = React.createClass({
1718
render () {
1819
return (
1920
<div>
20-
<Headroom
21-
wrapperStyle={{
22-
marginBottom: rhythm(1),
23-
}}
24-
style={{
25-
background: 'lightgray',
26-
}}
27-
>
28-
<Container
29-
style={{
30-
maxWidth: 960,
31-
paddingTop: 0,
32-
padding: `${rhythm(1)} ${rhythm(3/4)}`,
33-
}}
34-
>
35-
<Link
36-
to={prefixLink('/')}
37-
style={{
38-
color: 'black',
39-
textDecoration: 'none',
40-
}}
41-
>
42-
<img src="/javascriptmn.png" />
43-
{config.siteTitle}
21+
<Headroom style={{background: '#fff'}}>
22+
<Container className="primary-navigation" >
23+
<Link to={prefixLink('/')} >
24+
<img className="logo" src="images/javascriptmn.png" />
4425
</Link>
45-
</Container>
46-
<Container>
47-
<Link
48-
to={prefixLink('/about/')}
49-
style={{
50-
color: 'black',
51-
textDecoration: 'none',
52-
}}
53-
>
54-
ABOUT
26+
<Link to={prefixLink('/about/')} >
27+
About
5528
</Link>
56-
<Link> | </Link>
57-
<Link
58-
to={prefixLink('/code-of-conduct/')}
59-
style={{
60-
color: 'black',
61-
textDecoration: 'none',
62-
}}
63-
>
64-
CODE OF CONDUCT
29+
<Link to={prefixLink('/code-of-conduct/')} >
30+
Code of conduct
6531
</Link>
66-
<Link> | </Link>
67-
<Link
68-
to={prefixLink('/our_sponsors/')}
69-
style={{
70-
color: 'black',
71-
textDecoration: 'none',
72-
}}
73-
>
74-
Current SPONSORs
32+
<Link to={prefixLink('/our_sponsors/')} >
33+
Current Sponsors
7534
</Link>
76-
<Link> | </Link>
77-
<Link
78-
to={prefixLink('/speak/')}
79-
style={{
80-
color: 'black',
81-
textDecoration: 'none',
82-
}}
83-
>
84-
SPEAK
35+
<Link className="highlight" to={prefixLink('/speak/')} >
36+
Speak
8537
</Link>
86-
<Link> | </Link>
8738
</Container>
8839
</Headroom>
40+
8941
<Container
9042
style={{
91-
maxWidth: 960,
92-
padding: `${rhythm(1)} ${rhythm(3/4)}`,
93-
paddingTop: 0,
43+
maxWidth: '100vw'
9444
}}
9545
>
9646
{this.props.children}

‎pages/images/Slack_Mark_Monochrome_Black.svg‎

Lines changed: 31 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)