diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss index 46cb2719338a77caa009fad200e752f0767454c1..7aa0079ce7bf648480fe507525fff489cc5b3d46 100644 --- a/src/assets/stylesheets/index.scss +++ b/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; diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js index 6e780474b5ecf98164f6e34cc47e6dcc9a0551ac..d2c022cc449c7293434676d029d7d626066e26c3 100644 --- a/src/react-components/home-root.js +++ b/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>