GitHub logo links to repository

src/App.jsx

@@ -14,6 +14,7 @@ import Image from './components/Image';
 import Loading from './components/Loading';
 import Controls from './components/Controls';
 import Info from './components/Info';
+import GitHub from './components/GitHub';
 
 const App = () => {
   // Get date from URL
@@ -128,6 +129,7 @@ const App = () => {
         error={error}
       />
       {hasImage(image) && !hideUI && <Info image={image} />}
+      {!hideUI && <GitHub />}
     </main>
   );
 };

src/components/GitHub.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import css from './GitHub.module.scss';
+
+const GitHub = () => {
+  return (
+    <a
+      href="https://github.com/dnhn/hubble30"
+      className={css.GitHub}
+      target="_blank"
+    >
+      <img src="./github-mark-white.svg" alt="GitHub" />
+    </a>
+  );
+};
+
+export default GitHub;

src/components/GitHub.module.scss

@@ -0,0 +1,22 @@
+.GitHub {
+  position: fixed;
+  top: 0;
+  left: 0;
+  margin: 10px;
+  border-radius: 50%;
+  padding: 5px;
+  background-color: black;
+  line-height: 0;
+
+  @media (min-width: 768px) {
+    right: 0;
+    left: auto;
+  }
+}
+
+.GitHub img {
+  object-fit: contain;
+  object-position: center;
+  width: 36px;
+  height: 36px;
+}

src/components/Info.module.scss

@@ -21,6 +21,10 @@
   margin-top: 0;
   font-size: 1.25em;
 
+  @media (max-width: 767px) {
+    padding-left: 45px;
+  }
+
   @media (min-width: 768px) {
     font-size: 1.5em;
   }