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 9f1bf3b

Browse files
add link
1 parent 57b0e7f commit 9f1bf3b

File tree

2 files changed

+60
-4
lines changed

2 files changed

+60
-4
lines changed

‎src/App.css

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,25 @@
11
.App {
22
text-align: center;
33
}
4+
5+
.github-corner {
6+
7+
}
8+
.github-corner svg {
9+
height: 80px;
10+
width: 80px;
11+
fill: #151513;
12+
color: #fff;
13+
position: absolute;
14+
top: 0;
15+
border: 0;
16+
right: 0;
17+
z-index: 99;
18+
}
19+
.github-corner:hover .octo-arm {
20+
animation: octocat-wave 560ms ease-in-out;
21+
}
22+
423
.logo-wrapper {
524
display: flex;
625
align-items: center;
@@ -112,8 +131,21 @@
112131
}
113132
}
114133

134+
@keyframes octocat-wave {
135+
0%, 100%{
136+
transform: rotate(0)
137+
}
138+
20%, 60%{
139+
transform: rotate(-25deg)
140+
}
141+
40%, 80%{
142+
transform: rotate(10deg)
143+
}
144+
}
145+
115146

116147
@media (max-width: 768px) {
148+
117149
.App-header {
118150
height: auto;
119151
}
@@ -127,4 +159,17 @@
127159
.and {
128160
font-size: 30px;
129161
}
130-
}
162+
.github-corner svg {
163+
height: 60px;
164+
width: 60px;
165+
}
166+
}
167+
168+
@media (max-width:500px) {
169+
.github-corner:hover .octo-arm {
170+
animation:none
171+
}
172+
.github-corner .octo-arm {
173+
animation:octocat-wave 560ms ease-in-out
174+
}
175+
}

‎src/App.js

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,25 @@ import netlifyLogo from './netlify-logo-black.svg'
33
import expressLogo from './express.png'
44
import './App.css'
55

6+
const GitHubCorner = ({ url }) => {
7+
return (
8+
<a href={url} className='github-corner' aria-label='View source on GitHub'>
9+
<svg viewBox='0 0 250 250' aria-hidden='true'>
10+
<path d='M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z' />
11+
<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={{transformOrigin: '130px 106px'}} className='octo-arm' />
12+
<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' className='octo-body' />
13+
</svg>
14+
</a>
15+
)
16+
}
17+
618
class App extends Component {
719
render() {
820
return (
921
<div className="App">
22+
<GitHubCorner url={'https://github.com/netlify-labs/netlify-functions-express'} />
1023
<header className="App-header">
24+
1125
<div className="logo-wrapper">
1226
<img src={netlifyLogo} className="netlify-logo" alt="logo" />
1327
<span className='and'>+</span>
@@ -31,9 +45,6 @@ class App extends Component {
3145
<a className='link' href="/.netlify/functions/react-express-ssr">
3246
Example using React serverside rendering
3347
</a>
34-
<a className='link' href="/.netlify/functions/vue-ssr">
35-
Example using Vue serverside rendering
36-
</a>
3748
</div>
3849
</div>
3950
)

0 commit comments

Comments
(0)

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