Skip to content

Commit f8d481d

Browse files
TuvalSimhaTuvalSimha
committed
footer and header
Signed-off-by: Tuval <tuval.simha@gmail.com>
1 parent a7575bc commit f8d481d

File tree

6 files changed

+463
-16
lines changed

6 files changed

+463
-16
lines changed

‎src/assets/css/_css/conf.less

Lines changed: 291 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,291 @@
1+
.conf-main {
2+
.conf-hero {
3+
position: relative;
4+
min-height: 250px;
5+
padding: 0;
6+
margin-top: -5vh;
7+
padding-top: 5px;
8+
@media screen and (max-width: 600px) {
9+
height: 40vh;
10+
}
11+
@media screen and (min-width: 992px) {
12+
height: 55vh;
13+
}
14+
@media screen and (min-width: 1020px) {
15+
max-height: 750px;
16+
height: 60vh;
17+
min-height: 400px;
18+
padding-top: 50px;
19+
}
20+
width: 100%;
21+
h1 {
22+
color: white;
23+
font-weight: 800;
24+
font-size: 100px;
25+
@media screen and (min-width: 1020px) {
26+
font-size: 140px;
27+
}
28+
line-height: 0.5;
29+
margin-top: 100px;
30+
}
31+
p {
32+
font-size: 32px;
33+
@media screen and (min-width: 1020px) {
34+
font-size: 48px;
35+
}
36+
color: white;
37+
}
38+
.conf-hero-inner {
39+
position: absolute;
40+
text-align: center;
41+
width: 100%;
42+
}
43+
}
44+
.conf-hero::before {
45+
background: url(/img/conf/conf-hero.png) repeat center center;
46+
content: "";
47+
display: block;
48+
height: 100%;
49+
position: absolute;
50+
width: 100%;
51+
top: 0;
52+
left: 0;
53+
}
54+
.intro-note {
55+
margin-top: 43px;
56+
display: flex;
57+
p {
58+
width: 50%;
59+
margin-top: 0;
60+
margin-right: 5%;
61+
font-size: 18px;
62+
font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif;
63+
line-height: 32px;
64+
}
65+
.goto-section {
66+
display: flex;
67+
flex-direction: row;
68+
width: 40%;
69+
p {
70+
min-width: 72px;
71+
width: 20%;
72+
margin: 0;
73+
color: #8c8c8c;
74+
font-weight: bold;
75+
font-size: 24px;
76+
font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif;
77+
}
78+
.sections {
79+
display: flex;
80+
width: 80%;
81+
flex-direction: column;
82+
a {
83+
h3 {
84+
margin: 0 0 22px 0;
85+
border-left: 1px solid #b7b7b7;
86+
font-weight: bold;
87+
padding-left: 15px;
88+
line-height: 28px;
89+
font-size: 24px;
90+
font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif;
91+
}
92+
}
93+
}
94+
}
95+
}
96+
.tools-title {
97+
margin: 0;
98+
}
99+
.inner-content {
100+
max-width: 100%;
101+
}
102+
.language-content {
103+
padding-top: 72px;
104+
}
105+
.languages-title {
106+
font-size: 24px;
107+
font-weight: bold;
108+
font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif;
109+
}
110+
.language-boxes {
111+
display: grid;
112+
grid-row-gap: 20px;
113+
grid-column-gap: 30px;
114+
grid-template-columns: auto auto auto;
115+
@media screen and (min-width: 1020px) {
116+
grid-template-columns: auto auto auto auto auto auto;
117+
}
118+
.language-box {
119+
border: 1px solid #979797;
120+
min-width: 142px;
121+
height: 120px;
122+
display: flex;
123+
flex-direction: row;
124+
align-items: flex-end;
125+
color: #000;
126+
.article_title {
127+
text-align: left;
128+
font-size: 22px;
129+
color: #000;
130+
font-weight: bold;
131+
font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif;
132+
margin: 0;
133+
}
134+
}
135+
}
136+
.language-header {
137+
display: flex;
138+
flex-direction: row;
139+
@media screen and (max-width: 600px) {
140+
flex-direction: column;
141+
}
142+
justify-content: space-between;
143+
.language-title {
144+
margin: 0 0 10px 0;
145+
font-size: 48px;
146+
font-weight: bold;
147+
}
148+
.language-categories-permalinks {
149+
margin: 0;
150+
font-size: 24px;
151+
font-weight: bold;
152+
color: #a6a6a6;
153+
.language-category-permalink {
154+
color: #a6a6a6;
155+
}
156+
}
157+
}
158+
.library-category-title {
159+
margin: 0;
160+
padding-top: 45px;
161+
font-size: 24px;
162+
color: #a6a6a6;
163+
font-weight: bold;
164+
}
165+
.library-info {
166+
display: flex;
167+
flex-direction: row;
168+
@media screen and (max-width: 600px) {
169+
flex-direction: column;
170+
}
171+
justify-content: space-between;
172+
margin-top: 36px;
173+
margin-bottom: 40px;
174+
.library-details {
175+
width: 30%;
176+
@media screen and (max-width: 600px) {
177+
width: 100%;
178+
}
179+
.library-name {
180+
font-size: 24px;
181+
font-weight: bold;
182+
p {
183+
margin: 0 0 20px 0;
184+
}
185+
}
186+
.library-detail {
187+
margin-top: 7px;
188+
display: flex;
189+
flex-direction: row;
190+
b {
191+
font-size: 14px;
192+
min-width: 90px;
193+
}
194+
a,
195+
span {
196+
font-size: 16px;
197+
color: #e10098;
198+
font-weight: bold;
199+
margin-left: 10px;
200+
}
201+
}
202+
.library-description {
203+
margin-top: 30px;
204+
}
205+
}
206+
.library-howto {
207+
@media screen and (max-width: 600px) {
208+
width: 100%;
209+
}
210+
width: 60%;
211+
position: relative;
212+
.library-howto-content {
213+
overflow: hidden;
214+
pre.prism {
215+
margin: 1em 0;
216+
}
217+
218+
&.not-expanded {
219+
max-height: 450px;
220+
}
221+
&.expanded img {
222+
display: none;
223+
}
224+
p {
225+
margin: 0;
226+
}
227+
}
228+
}
229+
.library-howto-expand {
230+
cursor: pointer;
231+
232+
&.not-expanded {
233+
background: -webkit-linear-gradient(
234+
top,
235+
rgba(237, 239, 240, 0),
236+
rgba(237, 239, 240, 0) 380px,
237+
#ffffff 400px
238+
);
239+
background: linear-gradient(
240+
to bottom,
241+
rgba(237, 239, 240, 0),
242+
rgba(237, 239, 240, 0) 380px,
243+
#ffffff 400px
244+
);
245+
box-sizing: border-box;
246+
display: block;
247+
height: 450px;
248+
padding-top: 400px;
249+
position: absolute;
250+
top: 0;
251+
right: 0;
252+
left: 0;
253+
text-align: center;
254+
.library-howto-expand-anchor {
255+
background: #ffffff;
256+
-moz-box-sizing: border-box;
257+
box-sizing: border-box;
258+
border-radius: 9pt 9pt 0 0;
259+
color: #8c8c8c;
260+
display: inline-block;
261+
max-width: 100%;
262+
overflow: hidden;
263+
padding: 10px;
264+
text-decoration: underline;
265+
text-overflow: ellipsis;
266+
white-space: nowrap;
267+
}
268+
}
269+
&.expanded {
270+
display: none;
271+
}
272+
}
273+
}
274+
}
275+
276+
.conf-header {
277+
float: left;
278+
font-size: 18px;
279+
color: @rhodamine-color;
280+
line-height: 50px;
281+
display: inline-block;
282+
padding-right: 1em;
283+
text-decoration: none;
284+
285+
img {
286+
vertical-align: -9px;
287+
margin-right: 6px;
288+
width: 30px;
289+
height: 30px;
290+
}
291+
}

‎src/assets/css/style.less

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
@import "_css/codemirror.less";
77
@import "_css/algolia.less";
88
@import "_css/code.less";
9+
@import "_css/conf.less";
910
@import "_css/faq.less";
1011
@import "_css/foundation.less";
1112
@import "_css/brand.less";
13+

‎src/components/Conf/Footer/index.tsx

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React from "react"
2+
import Link from "../../Link"
3+
4+
interface LinkItem {
5+
text: string
6+
href: string
7+
icon?: string
8+
}
9+
10+
interface FooterLinks {
11+
text?: string
12+
href?: string
13+
subsections: LinkItem[]
14+
}
15+
16+
const getLinks = (): FooterLinks[] => [
17+
{
18+
subsections: [
19+
{ text: "GraphQLConf", href: "/" },
20+
{ text: "Speakers", href: "/#speakers" },
21+
{ text: "Venue", href: "/#venue" },
22+
],
23+
},
24+
{
25+
subsections: [
26+
// TODO: Edit the href link to the correct page
27+
{ text: "Register", href: "/#register" },
28+
{ text: "Speak", href: "/cfp" },
29+
{ text: "Sponsor", href: "/PDF" },
30+
],
31+
},
32+
{
33+
subsections: [
34+
// TODO: Edit the href link to the correct page
35+
{ text: "FAQ", href: "/faq" },
36+
{ text: "Code of Conduct", href: "/faq#codeofconduct" },
37+
{ text: "Contact Us", href: "/faq#contact" },
38+
],
39+
},
40+
]
41+
42+
const FooterConf = () => {
43+
return (
44+
<div>
45+
<footer>
46+
<section className="sitemap">
47+
{getLinks().map((section, i) => (
48+
<div key={i}>
49+
<h5>
50+
{section.href ? (
51+
<Link href={section.href}>{section.text}</Link>
52+
) : (
53+
<span>{section.text}</span>
54+
)}
55+
</h5>
56+
{section.subsections.map((subsection: any, i) => (
57+
<Link key={i} href={subsection.href}>
58+
{subsection.icon && <img src={subsection.icon} />}
59+
{subsection.text}
60+
</Link>
61+
))}
62+
</div>
63+
))}
64+
65+
<img src="/img/conf/footer.png" height={150} />
66+
</section>
67+
<section className="copyright">
68+
Copyright © {`${new Date().getFullYear()}`} The GraphQL Foundation.
69+
All rights reserved.
70+
<br />
71+
For web site terms of use, trademark policy and general project
72+
policies please see&nbsp;
73+
<a href="https://lfprojects.org" target="_blank">
74+
https://lfprojects.org
75+
</a>
76+
.
77+
</section>
78+
</footer>
79+
</div>
80+
)
81+
}
82+
83+
export default FooterConf

0 commit comments

Comments
 (0)