diff --git a/components/GitHubShareButton.tsx b/components/GitHubShareButton.tsx new file mode 100644 index 0000000..527b1d6 --- /dev/null +++ b/components/GitHubShareButton.tsx @@ -0,0 +1,48 @@ +import React from 'react' + +import styles from './styles.module.css' + +export const GitHubShareButton: React.FC = () => { + return ( + + + + ) +} diff --git a/components/NotionPage.tsx b/components/NotionPage.tsx index 48c2604..afafff3 100644 --- a/components/NotionPage.tsx +++ b/components/NotionPage.tsx @@ -29,6 +29,7 @@ import { Page404 } from './Page404' import { PageHead } from './PageHead' import { PageActions } from './PageActions' import { Footer } from './Footer' +import { GitHubShareButton } from './GitHubShareButton' import { ReactUtterances } from './ReactUtterances' import styles from './styles.module.css' @@ -250,6 +251,8 @@ export const NotionPage: React.FC = ({ } /> + + ) diff --git a/components/styles.module.css b/components/styles.module.css index 09fdaee..be9051b 100644 --- a/components/styles.module.css +++ b/components/styles.module.css @@ -175,3 +175,38 @@ color: #19bf64; background: #e5f2e8; } + +@media (max-width: 1360px) { + .githubCorner { + display: none; + } +} + +.githubCorner:hover .octoArm { + 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) { + .githubCorner:hover .octoArm { + animation: none; + } + + .githubCorner .octoArm { + animation: octocat-wave 560ms ease-in-out; + } +}