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/assets/stylesheets/ui-root.scss b/src/assets/stylesheets/ui-root.scss index 1cadcc2333efa20a81867a16c2f97bea6d729d4f..d196337dac04efc1ec3ebc423ad3608519278e8f 100644 --- a/src/assets/stylesheets/ui-root.scss +++ b/src/assets/stylesheets/ui-root.scss @@ -8,6 +8,26 @@ position: absolute; pointer-events: none; color: white; + + &__help-icon { + @extend %fa-icon-button; + pointer-events: auto; + position: absolute; + top: 0px; + left: 14px; + + &__icon { + background: rgba(33, 33, 33, 0.5); + border-radius: 36px; + display: inline-block; + font-size: 22px; + vertical-align: sub; + line-height: 38px; + border: 0; + width: 36px; + height: 36px; + } + } } .blurred { diff --git a/src/components/stats-plus.css b/src/components/stats-plus.css index 9fc5a1908dbc72abadc6a67c0479e3cfe8d01db3..46f29b12db2702be54f4ebce6154018d008155f8 100644 --- a/src/components/stats-plus.css +++ b/src/components/stats-plus.css @@ -14,7 +14,7 @@ font-family: monospace; cursor: pointer; position: absolute; - top: 0; + top: 10px; right: 0; padding: 8px 12px; color: #aaa; diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js index 401270832f397dc03039f67e84487173a461dd80..32e3c3d6887ec44b840a51c8218d48da4091842d 100644 --- a/src/react-components/home-root.js +++ b/src/react-components/home-root.js @@ -110,6 +110,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" /> @@ -167,16 +177,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> diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js index ab1d0229b0b529a6e3d9131df82e683f6097e11a..5ccfcd711a431c64f065743f0555f8daf09ef951 100644 --- a/src/react-components/ui-root.js +++ b/src/react-components/ui-root.js @@ -17,6 +17,9 @@ import InfoDialog from "./info-dialog.js"; import TwoDHUD from "./2d-hud"; import Footer from "./footer"; +import FontAwesomeIcon from "@fortawesome/react-fontawesome"; +import faQuestion from "@fortawesome/fontawesome-free-solid/faQuestion"; + const mobiledetect = new MobileDetect(navigator.userAgent); const lang = ((navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLanguage) @@ -808,6 +811,17 @@ class UIRoot extends Component { onCloseDialog={() => this.setState({ infoDialogType: null })} /> + {this.state.entryStep === ENTRY_STEPS.finished && ( + <button + onClick={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.help })} + className="ui__help-icon" + > + <i className="ui__help-icon__icon"> + <FontAwesomeIcon icon={faQuestion} /> + </i> + </button> + )} + <div className={dialogClassNames}> {(this.state.entryStep !== ENTRY_STEPS.finished || this.isWaitingForAutoExit()) && ( <div className={dialogBoxClassNames}>