Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit aa8b32c

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /