Change attribution position

src/assets/stylesheets/index.scss

@@ -122,6 +122,7 @@ body {
   min-height: 740px;
   display: flex;
   flex-direction: column;
+  position: relative;
 
   @media (max-width: 768px) {
     padding: 1em 1.5em 1em 1.5em;
@@ -129,6 +130,19 @@ body {
     min-height: 490px;
   }
 
+  &__attribution {
+    position: absolute;
+    right: 12px;
+    bottom: 12px;
+    color: $grey-text;
+    text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0);
+    opacity: 0.5;
+
+    a {
+      color: $grey-text;
+    }
+  }
+
   &__container {
     padding-top: 2vw;
     padding-left: 2.1em;
@@ -195,7 +209,7 @@ body {
 .footer-content {
   padding: 1em 2.25em 1em 2.25em;
   background-color: rgba(0, 0, 0, 0.85);
-  min-height: 100px;
+  min-height: 80px;
   display: flex;
   border-top: 2px solid #242424;
   align-items: center;

src/react-components/home-root.js

@@ -117,6 +117,16 @@ class HomeRoot extends Component {
               </div>
             </div>
             <div className="hero-content">
+              <div className="hero-content__attribution">
+                Medieval Fantasy Book by{" "}
+                <a
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  href="https://sketchfab.com/models/06d5a80a04fc4c5ab552759e9a97d91a?utm_campaign=06d5a80a04fc4c5ab552759e9a97d91a&utm_medium=embed&utm_source=oembed"
+                >
+                  Pixel
+                </a>
+              </div>
               <div className="hero-content__container">
                 <div className="hero-content__container__title">
                   <FormattedMessage id="home.hero_title" />
@@ -174,16 +184,6 @@ class HomeRoot extends Component {
                   </a>
                 </div>
                 <div className="footer-content__links__bottom">
-                  <div>
-                    Medieval Fantasy Book by{" "}
-                    <a
-                      target="_blank"
-                      rel="noreferrer noopener"
-                      href="https://sketchfab.com/models/06d5a80a04fc4c5ab552759e9a97d91a?utm_campaign=06d5a80a04fc4c5ab552759e9a97d91a&utm_medium=embed&utm_source=oembed"
-                    >
-                      Pixel
-                    </a>
-                  </div>
                   <div>
                     <FormattedMessage id="home.made_with_love" />
                     <span style={{ fontWeight: "bold", color: "white" }}>Mozilla</span>