Skip to content

Commit aa8b32c

Browse files
zoltantothcomzoltantothcom
committed
Add GitHub corner instead of menu link
1 parent bff9e2d commit aa8b32c

File tree

7 files changed

+84
-111
lines changed

7 files changed

+84
-111
lines changed

‎__tests__/Layout.test.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@ describe('Layout', () => {
6464
expect(tree.find('Header').text()).toMatch('JavaScript Design Patterns');
6565
});
6666

67-
it('renders 3 links', () => {
68-
expect(tree.find('a')).toHaveLength(3);
67+
it('renders 2 links', () => {
68+
expect(tree.find('a')).toHaveLength(2);
6969
});
7070

7171
it('renders 2 toggle buttons', () => {
@@ -102,8 +102,8 @@ describe('Layout', () => {
102102
expect(tree.find('Header').text()).toMatch('JavaScript Design Patterns');
103103
});
104104

105-
it('renders 3 links', () => {
106-
expect(tree.find('a')).toHaveLength(3);
105+
it('renders 2 links', () => {
106+
expect(tree.find('a')).toHaveLength(2);
107107
});
108108

109109
it('renders 2 toggle buttons', () => {

‎__tests__/components/__snapshots__/Header.test.js.snap‎

Lines changed: 58 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`<Header /> component renders with DARK theme 1`] = `
4-
.c5 {
4+
.c4 {
55
background-color: #222222;
66
border: 1px solid #484848;
77
border-radius: 50%;
@@ -13,41 +13,41 @@ exports[`<Header /> component renders with DARK theme 1`] = `
1313
width: 2.5rem;
1414
}
1515
16-
.c5:hover {
16+
.c4:hover {
1717
background-color: #484848;
1818
}
1919
20-
.c5:hover svg,
21-
.c5:hover g {
20+
.c4:hover svg,
21+
.c4:hover g {
2222
fill: #ffffff;
2323
}
2424
25-
.c5.active {
25+
.c4.active {
2626
background-color: #e22a23;
2727
border-color: #e22a23;
2828
}
2929
30-
.c5.active svg,
31-
.c5.active g {
30+
.c4.active svg,
31+
.c4.active g {
3232
fill: #ffffff;
3333
}
3434
35-
.c5.light {
35+
.c4.light {
3636
background-color: #ffffff;
3737
border-color: #c4c4c4;
3838
}
3939
40-
.c5.light svg,
41-
.c5.light g {
40+
.c4.light svg,
41+
.c4.light g {
4242
fill: #707070;
4343
}
4444
45-
.c5.light:hover svg,
46-
.c5.light:hover g {
45+
.c4.light:hover svg,
46+
.c4.light:hover g {
4747
fill: #707070;
4848
}
4949
50-
.c6 {
50+
.c5 {
5151
font-family: 'Karla',sans-serif;
5252
padding: 1.5rem;
5353
border-radius: 4px;
@@ -70,10 +70,10 @@ exports[`<Header /> component renders with DARK theme 1`] = `
7070
-webkit-flex-wrap: wrap;
7171
-ms-flex-wrap: wrap;
7272
flex-wrap: wrap;
73-
-webkit-box-pack: justify;
74-
-webkit-justify-content: space-between;
75-
-ms-flex-pack: justify;
76-
justify-content: space-between;
73+
-webkit-box-pack: start;
74+
-webkit-justify-content: start;
75+
-ms-flex-pack: start;
76+
justify-content: start;
7777
margin-top: 1rem;
7878
}
7979
@@ -84,7 +84,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
8484
display: inline-flex;
8585
}
8686
87-
.c4 {
87+
.c3 {
8888
display: -webkit-inline-box;
8989
display: -webkit-inline-flex;
9090
display: -ms-inline-flexbox;
@@ -110,23 +110,13 @@ exports[`<Header /> component renders with DARK theme 1`] = `
110110
color: #f5f5f5;
111111
}
112112
113-
.c3 {
114-
border-bottom: 1px solid transparent;
115-
color: #888888;
116-
display: -webkit-inline-box;
117-
display: -webkit-inline-flex;
118-
display: -ms-inline-flexbox;
119-
display: inline-flex;
120-
font-size: 0.875rem;
121-
margin: 0.5rem 2rem 0 0;
122-
padding-bottom: 1px;
123-
-webkit-text-decoration: none;
124-
text-decoration: none;
125-
}
126-
127-
.c3:hover {
128-
border-bottom: 1px solid #f5f5f5;
129-
color: #f5f5f5;
113+
@media (min-width:769px) {
114+
.c0 {
115+
-webkit-box-pack: justify;
116+
-webkit-justify-content: space-between;
117+
-ms-flex-pack: justify;
118+
justify-content: space-between;
119+
}
130120
}
131121
132122
<div>
@@ -150,19 +140,12 @@ exports[`<Header /> component renders with DARK theme 1`] = `
150140
>
151141
About
152142
</a>
153-
<a
154-
className="c3"
155-
href="//github.com/zoltantothcom/javascript-patterns"
156-
target="_blank"
157-
>
158-
GitHub
159-
</a>
160143
</div>
161144
<div
162-
className="c4"
145+
className="c3"
163146
>
164147
<button
165-
className="c5"
148+
className="c4"
166149
onClick={[Function]}
167150
>
168151
<svg
@@ -189,7 +172,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
189172
</svg>
190173
</button>
191174
<button
192-
className="c5"
175+
className="c4"
193176
onClick={[Function]}
194177
>
195178
<svg
@@ -211,7 +194,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
211194
</button>
212195
</div>
213196
<h1
214-
className="c6"
197+
className="c5"
215198
>
216199
JavaScript Design Patterns
217200
</h1>
@@ -220,7 +203,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
220203
`;
221204

222205
exports[`<Header /> component renders with LIGHT theme 1`] = `
223-
.c5 {
206+
.c4 {
224207
background-color: #f4f4f4;
225208
border: 1px solid #e8e8e8;
226209
border-radius: 50%;
@@ -232,41 +215,41 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
232215
width: 2.5rem;
233216
}
234217
235-
.c5:hover {
218+
.c4:hover {
236219
background-color: #e8e8e8;
237220
}
238221
239-
.c5:hover svg,
240-
.c5:hover g {
222+
.c4:hover svg,
223+
.c4:hover g {
241224
fill: #ffffff;
242225
}
243226
244-
.c5.active {
227+
.c4.active {
245228
background-color: #e22a23;
246229
border-color: #e22a23;
247230
}
248231
249-
.c5.active svg,
250-
.c5.active g {
232+
.c4.active svg,
233+
.c4.active g {
251234
fill: #ffffff;
252235
}
253236
254-
.c5.light {
237+
.c4.light {
255238
background-color: #ffffff;
256239
border-color: #aaaaaa;
257240
}
258241
259-
.c5.light svg,
260-
.c5.light g {
242+
.c4.light svg,
243+
.c4.light g {
261244
fill: #cccccc;
262245
}
263246
264-
.c5.light:hover svg,
265-
.c5.light:hover g {
247+
.c4.light:hover svg,
248+
.c4.light:hover g {
266249
fill: #cccccc;
267250
}
268251
269-
.c6 {
252+
.c5 {
270253
font-family: 'Karla',sans-serif;
271254
padding: 1.5rem;
272255
border-radius: 4px;
@@ -289,10 +272,10 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
289272
-webkit-flex-wrap: wrap;
290273
-ms-flex-wrap: wrap;
291274
flex-wrap: wrap;
292-
-webkit-box-pack: justify;
293-
-webkit-justify-content: space-between;
294-
-ms-flex-pack: justify;
295-
justify-content: space-between;
275+
-webkit-box-pack: start;
276+
-webkit-justify-content: start;
277+
-ms-flex-pack: start;
278+
justify-content: start;
296279
margin-top: 1rem;
297280
}
298281
@@ -303,7 +286,7 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
303286
display: inline-flex;
304287
}
305288
306-
.c4 {
289+
.c3 {
307290
display: -webkit-inline-box;
308291
display: -webkit-inline-flex;
309292
display: -ms-inline-flexbox;
@@ -329,23 +312,13 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
329312
color: #707070;
330313
}
331314
332-
.c3 {
333-
border-bottom: 1px solid transparent;
334-
color: #e22a23;
335-
display: -webkit-inline-box;
336-
display: -webkit-inline-flex;
337-
display: -ms-inline-flexbox;
338-
display: inline-flex;
339-
font-size: 0.875rem;
340-
margin: 0.5rem 2rem 0 0;
341-
padding-bottom: 1px;
342-
-webkit-text-decoration: none;
343-
text-decoration: none;
344-
}
345-
346-
.c3:hover {
347-
border-bottom: 1px solid #707070;
348-
color: #707070;
315+
@media (min-width:769px) {
316+
.c0 {
317+
-webkit-box-pack: justify;
318+
-webkit-justify-content: space-between;
319+
-ms-flex-pack: justify;
320+
justify-content: space-between;
321+
}
349322
}
350323
351324
<div>
@@ -369,19 +342,12 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
369342
>
370343
About
371344
</a>
372-
<a
373-
className="c3"
374-
href="//github.com/zoltantothcom/javascript-patterns"
375-
target="_blank"
376-
>
377-
GitHub
378-
</a>
379345
</div>
380346
<div
381-
className="c4"
347+
className="c3"
382348
>
383349
<button
384-
className="c5"
350+
className="c4"
385351
onClick={[Function]}
386352
>
387353
<svg
@@ -408,7 +374,7 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
408374
</svg>
409375
</button>
410376
<button
411-
className="c5"
377+
className="c4"
412378
onClick={[Function]}
413379
>
414380
<svg
@@ -430,7 +396,7 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
430396
</button>
431397
</div>
432398
<h1
433-
className="c6"
399+
className="c5"
434400
>
435401
JavaScript Design Patterns
436402
</h1>

‎__tests__/styles/__snapshots__/global.test.js.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ exports[`Global style renders with a DARK theme 1`] = `
88
>
99
1010
11-
/* sc-component-id: sc-global-2479929527 */
12-
body{background:#222222;font-family:'Karla',sans-serif;margin:0;padding:0;} #root{max-width:640px;margin:auto;}
11+
/* sc-component-id: sc-global-3505832014 */
12+
body{background:#222222;font-family:'Karla',sans-serif;margin:0;padding:0;} #root{-webkit-box-pack:start;-webkit-justify-content:start;-ms-flex-pack:start;justify-content:start;max-width:640px;margin:auto;padding:0 1rem;} @media (min-width:769px){#root{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:0;}}
1313
</style>
1414
</head>
1515
`;
@@ -22,8 +22,8 @@ exports[`Global style renders with a LIGHT theme 1`] = `
2222
>
2323
2424
25-
/* sc-component-id: sc-global-2479929527 */
26-
body{background:#f4f4f4;font-family:'Karla',sans-serif;margin:0;padding:0;} #root{max-width:640px;margin:auto;}
25+
/* sc-component-id: sc-global-3505832014 */
26+
body{background:#f4f4f4;font-family:'Karla',sans-serif;margin:0;padding:0;} #root{-webkit-box-pack:start;-webkit-justify-content:start;-ms-flex-pack:start;justify-content:start;max-width:640px;margin:auto;padding:0 1rem;} @media (min-width:769px){#root{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:0;}}
2727
</style>
2828
</head>
2929
`;

‎index.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,26 @@
22
<html>
33
<head>
44
<title>JavaScript Design Patterns</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
56
<link href="//fonts.googleapis.com/css?family=Karla" rel="stylesheet">
67
</head>
78
<body>
9+
<a href="https://github.com/zoltantothcom/JavaScript-Design-Patterns" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" fill="#e22a23"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
810
<div id="root" />
911
<script>window.twttr = (function(d, s, id) {
1012
var js, fjs = d.getElementsByTagName(s)[0],
11-
t = window.twttr || {};
13+
t = window.twttr || {};
1214
if (d.getElementById(id)) return t;
1315
js = d.createElement(s);
1416
js.id = id;
1517
js.src = "https://platform.twitter.com/widgets.js";
1618
fjs.parentNode.insertBefore(js, fjs);
17-
19+
1820
t._e = [];
1921
t.ready = function(f) {
2022
t._e.push(f);
2123
};
22-
24+
2325
return t;
2426
}(document, "script", "twitter-wjs"));</script>
2527
</body>

0 commit comments

Comments
 (0)