Skip to content

Commit 2a9ce85

Browse files
author
Ives van Hoorne
committed
Update Homepage
- Update examples - Add Import from GitHub - Add Fork from GitHub - Update logo
1 parent ae3b9d8 commit 2a9ce85

File tree

2 files changed

+65
-45
lines changed

2 files changed

+65
-45
lines changed

‎src/homepage/index.html‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -51,19 +51,18 @@
5151
<!-- End Google Tag Manager (noscript) -->
5252
<div class="hero">
5353
<div class="logocontent">
54-
<svg class="logo shadow--svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
55-
x="0px" y="0px" height="210px" viewBox="0 0 1024 1024" enable-background="new 0 0 1024 1024" xml:space="preserve">
54+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="210px"
55+
width="240px" viewBox="0 0 1024 1024" enable-background="new 0 0 1024 1024" xml:space="preserve">
5656
<g id="Layer_1">
57-
<polyline fill="#FFFFFF" points="719.001,851 719.001,639.848 902,533.802 902,745.267 719.001,851 " />
58-
<polyline fill="#FFFFFF" points="302.082,643.438 122.167,539.135 122.167,747.741 302.082,852.573 302.082,643.438 " />
59-
<polyline fill="#FFFFFF" points="511.982,275.795 694.939,169.633 512.06,63 328.436,169.987 511.982,275.795 " />
57+
<polyline fill="#FFFFFF" points="719.001,851 719.001,639.848 902,533.802 902,745.267 719.001,851" />
58+
<polyline fill="#FFFFFF" points="302.082,643.438 122.167,539.135 122.167,747.741 302.082,852.573 302.082,643.438" />
59+
<polyline fill="#FFFFFF" points="511.982,275.795 694.939,169.633 512.06,63 328.436,169.987 511.982,275.795" />
6060
</g>
6161
<g id="Layer_2">
62-
<polyline fill="none" stroke="#FFFFFF" stroke-width="50" stroke-miterlimit="10" points="899,287.833 509,513 509,963 " />
63-
<line fill="none" stroke="#FFFFFF" stroke-width="50" stroke-miterlimit="10" x1="122.167" y1="289" x2="511.5" y2="513" />
64-
<path fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M122.167,739" />
65-
<polygon fill="none" stroke="#FFFFFF" stroke-width="50" stroke-miterlimit="10" points="121,739.083 510.917,963.042 901,738.333
66-
901,288 511,62 121,289 " />
62+
<polyline fill="none" stroke="#FFFFFF" stroke-width="80" stroke-miterlimit="10" points="899,287.833 509,513 509,963" />
63+
<line fill="none" stroke="#FFFFFF" stroke-width="80" stroke-miterlimit="10" x1="122.167" y1="289" x2="511.5" y2="513" />
64+
<polygon fill="none" stroke="#FFFFFF" stroke-width="80" stroke-miterlimit="10" points="121,739.083 510.917,963.042 901,738.333 901,288 511,62 121,289"
65+
/>
6766
</g>
6867
</svg>
6968

@@ -75,8 +74,11 @@ <h2 class="subtitle shadow--text">Online React Playground</h2>
7574
</div>
7675
</div>
7776

77+
<a target="_blank" rel="noopener noreferrer" href="https://github.com/CompuIves/codesandbox-client"><img style="position: fixed; z-index: 300; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
78+
7879
<div class="getstarted">
7980
<a href="/s/new" class="button">Open the editor</a>
81+
<a href="/s/github" class="button button-alternative">Import from GitHub</a>
8082
</div>
8183

8284
<div class="lines">
@@ -144,9 +146,15 @@ <h3>Example Projects</h3>
144146
<a href="/s/zKQZADrjZ" class="project">
145147
Redux-Saga
146148
</a>
149+
<a href="/s/mZRjw05yp" class="project">
150+
Redux Form
151+
</a>
147152
<a href="/s/2vmzpM0wK" class="project">
148153
MobX
149154
</a>
155+
<a href="/s/2vmzpM0wK" class="project">
156+
MobX-state-tree
157+
</a>
150158
</div>
151159
</section>
152160

@@ -155,14 +163,14 @@ <h3>Picked Projects</h3>
155163
<h4>Made something cool? Send it to <a href="mailto:[email protected]">[email protected]</a> so we can feature it here!</h4>
156164

157165
<div class="picked-project">
158-
<h4>Redux Form - Simple Example by @erikras</h4>
159-
<iframe src=https://codesandbox.io/embed/mZRjw05yp style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
166+
<h4>MobX-state-tree - TodoList by @mwestrate</h4>
167+
<iframe src="https://codesandbox.io/embed/nZ26kGMD" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
160168
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
161169
</div>
162170

163171
<div class="picked-project">
164-
<h4>Glamorous themeing by @kentcdodds</h4>
165-
<iframe src=https://codesandbox.io/embed/o2yq9MkQk style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
172+
<h4>Apollo React + GraphQL Lodash demo by @RomanHotsiy</h4>
173+
<iframe src=https://codesandbox.io/embed/vgGpzEwX0 style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
166174
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
167175
</div>
168176
</section>

‎src/homepage/static/css/main.css‎

Lines changed: 43 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
html, body {
1+
html,
2+
body {
23
font-family: 'Roboto', sans-serif;
34
-webkit-font-smoothing: antialiased;
45
-moz-font-smoothing: antialiased;
@@ -11,12 +12,12 @@ html, body {
1112
-webkit-text-size-adjust: 100%;
1213
height: 100%;
1314
color: white;
14-
background: #1C2022;
15+
background: #1c2022;
1516
margin: 0;
1617
}
1718

1819
a {
19-
color: #6CAEDD;
20+
color: #6caedd;
2021
}
2122

2223
h2 {
@@ -31,18 +32,21 @@ h1 {
3132
}
3233

3334
.primary {
34-
color: #6CAEDD;
35+
color: #6caedd;
3536
}
3637

3738
.secondary {
38-
color: #FFD399;
39+
color: #ffd399;
3940
}
4041

4142
.button {
43+
display: block;
44+
text-align: center;
45+
margin-bottom: 20px;
4246
transition: 0.3s ease all;
43-
background: #1C2022;
44-
background: rgba(255,211,153,0.20);
45-
border: 1px solid #FED594;
47+
background: #1c2022;
48+
background: rgba(255, 211, 153, 0.20);
49+
border: 1px solid #fed594;
4650
border-radius: 4px;
4751
padding: 0.75rem 2.5rem;
4852
color: white;
@@ -51,24 +55,28 @@ h1 {
5155
font-weight: 300;
5256
text-decoration: none;
5357

54-
box-shadow: 1px 2px 2px rgba(0,0,0,0.5);
58+
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.5);
59+
}
60+
61+
.button.button-alternative {
62+
font-size: 1.125rem;
5563
}
5664

5765
.button:hover {
58-
border-color: #6CAEDD;
59-
background: rgba(108,174,221,0.2);
66+
border-color: #6caedd;
67+
background: rgba(108, 174, 221, 0.2);
6068
}
6169

6270
.shadow {
63-
box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
71+
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
6472
}
6573

6674
.shadow--text {
67-
text-shadow: 0px 2px 2px rgba(0,0,0,0.5);
75+
text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
6876
}
6977

7078
.shadow--svg {
71-
filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.5));
79+
filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5));
7280
}
7381

7482
.hero {
@@ -80,8 +88,12 @@ h1 {
8088
margin: 0;
8189
height: 74vh;
8290
min-height: 600px;
83-
background: #1C2022;
84-
background-image: radial-gradient(circle, rgba(47, 170, 255, 0.04) 50%, rgba(255, 211, 153, 0.00) 100%);
91+
background: #1c2022;
92+
background-image: radial-gradient(
93+
circle,
94+
rgba(47, 170, 255, 0.04) 50%,
95+
rgba(255, 211, 153, 0.00) 100%
96+
);
8597
overflow: hidden;
8698
}
8799

@@ -137,12 +149,12 @@ h1 {
137149
}
138150

139151
.hexagon:hover #fill {
140-
fill: #6CAEDD;
141-
stroke: #6CAEDD;
152+
fill: #6caedd;
153+
stroke: #6caedd;
142154
}
143155

144156
.hexagon:hover #line {
145-
stroke: #6CAEDD;
157+
stroke: #6caedd;
146158
}
147159

148160
.arrowicon {
@@ -159,10 +171,10 @@ h1 {
159171
flex-direction: column-reverse;
160172
text-align: center;
161173
margin: 0;
162-
background-color: #FFD399;
174+
background-color: #ffd399;
163175
color: rgba(0, 0, 0, 0.5);
164176

165-
border-top: 40px solid #6CAEDD;
177+
border-top: 40px solid #6caedd;
166178
}
167179

168180
.lines {
@@ -176,8 +188,8 @@ h1 {
176188

177189
.line {
178190
position: absolute;
179-
background-color: #6CAEDD;
180-
min-height: 200px;;
191+
background-color: #6caedd;
192+
min-height: 200px;
181193
top: 0;
182194
right: -15px;
183195
left: -15px;
@@ -226,7 +238,7 @@ h1 {
226238
text-align: center;
227239
justify-content: center;
228240
padding-bottom: 2rem;
229-
background-color: #272C2E;
241+
background-color: #272c2e;
230242
}
231243

232244
.picked-project {
@@ -260,9 +272,9 @@ h1 {
260272
.project {
261273
transition: 0.3s ease all;
262274
padding: 1.5rem 3rem;
263-
background: rgba(108,174,221,0.2);
275+
background: rgba(108, 174, 221, 0.2);
264276
border-radius: 4px;
265-
border: 1px solid #6CAEDD;
277+
border: 1px solid #6caedd;
266278
font-size: 1.5rem;
267279
font-weight: 300;
268280
cursor: pointer;
@@ -273,13 +285,13 @@ h1 {
273285
}
274286

275287
.project:hover {
276-
background: rgba(255,211,153,0.20);
277-
border: 1px solid #FED594;
288+
background: rgba(255, 211, 153, 0.20);
289+
border: 1px solid #fed594;
278290
}
279291

280292
.about {
281-
background: #272C2E;
282-
color: rgba(255,255,255, 0.7);
293+
background: #272c2e;
294+
color: rgba(255, 255, 255, 0.7);
283295
padding: 1rem;
284296
text-align: center;
285297
line-height: 2;
@@ -294,7 +306,7 @@ h1 {
294306
font-size: 2rem;
295307
}
296308

297-
.description h3{
309+
.description h3 {
298310
font-size: 2rem;
299311
}
300312

0 commit comments

Comments
 (0)