diff --git a/docs/enter-metagame/signpost.md b/docs/enter-metagame/signpost.md deleted file mode 100644 index 95d3f3ca..00000000 --- a/docs/enter-metagame/signpost.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: ⚠️ Signpost ---- - -There are many ways to go about in MetaGame, here are the main ones. - -### [Newsletter](https://metagame.substack.com/) — MetaGame News. - -### [Twitter](https://twitter.com/metafam) — Follow MetaGame on Twitter. - -### [MetaView](https://anchor.fm/MetaGame/) — A MetaGame Podcast. - -### [Discord](https://discord.gg/VYZPBnx) — Fast-paced MetaGame. - -### [Forum](https://forum.metagame.wtf/) — Thoughtful MetaGame. - -### [Navigation Board](https://wiki.metagame.wtf/docs/enter-metagame/navigation-board) — Find raids that pick your interest. - -### [](https://forum.metagame.wtf/)[Github Repo](https://github.com/MetaFam/TheGame) — Where we build. - -### [Calendar](https://calendar.google.com/calendar/u/1?cid=bmloNTlrdGdhZm1tNjRlZDRxazZ1ZTh2djRAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ) — Townhall Gatherings & Meetups. - -### [Seed Market](https://app.uniswap.org/#/swap?inputCurrency=0x30cf203b48edaa42c3b4918e955fed26cd012a3f&outputCurrency=ETH) — Buy Seeds here. diff --git a/docs/enter-metagame/signpost.mdx b/docs/enter-metagame/signpost.mdx new file mode 100644 index 00000000..8bf521eb --- /dev/null +++ b/docs/enter-metagame/signpost.mdx @@ -0,0 +1,8 @@ +--- +title: ⚠️ Signpost +hide_title: true +--- + +import { Signpost, directions } from '../../src/components/signpost'; + + diff --git a/src/components/signpost.js b/src/components/signpost.js new file mode 100644 index 00000000..ad098105 --- /dev/null +++ b/src/components/signpost.js @@ -0,0 +1,135 @@ +import React, { useEffect, useState } from 'react'; +import classnames from 'classnames'; +import Link from '@docusaurus/Link'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import styles from './signpost.module.scss'; + +const directions = [ + { + emoji: '👈', + label: 'Library', + url: '#here', + description: 'Explore the Wiki', + }, + { + emoji: '🗞', + label: 'Newsletter', + url: 'https://metagame.substack.com/', + description: 'MetaGame News.', + }, + { + emoji: '🎤', + label: 'MetaView', + url: 'https://anchor.fm/MetaGame/', + description: 'A MetaGame Podcast.', + }, + { + emoji: '💬', + label: 'Discord', + url: 'https://discord.gg/VYZPBnx', + description: 'Fast-paced MetaGame.', + }, + { + emoji: '📝', + label: 'Forum', + url: 'https://forum.metagame.wtf/', + description: 'Thoughtful MetaGame.', + }, + { + emoji: '🐤', + label: 'Twitter', + url: 'https://twitter.com/metafam', + description: 'Follow MetaGame on Twitter.', + }, + { + emoji: '🗺️', + label: 'Raids', + url: '/docs/enter-metagame/navigation-board', + description: 'Find raids that peak your interest.', + }, + { + emoji: '🛠️', + label: 'Github', + url: 'https://github.com/MetaFam/TheGame', + description: 'Where we build.', + }, + { + emoji: '📅', + label: 'Calendar', + url: + 'https://calendar.google.com/calendar/u/1?cid=bmloNTlrdGdhZm1tNjRlZDRxazZ1ZTh2djRAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ', + description: 'Townhall Gatherings & Meetups.', + }, + { + emoji: '🌱', + label: 'Seed Market', + url: + 'https://app.uniswap.org/#/swap?inputCurrency=0x30cf203b48edaa42c3b4918e955fed26cd012a3f&outputCurrency=ETH', + description: 'Buy Seeds here', + }, +]; + +export function SignpostItem(props, key) { + const [menuActive, setMenuActive] = useState(false); + const { emoji, label, url, description } = props; + + const toggleMenu = () => { + setMenuActive(!menuActive); + }; + useEffect(() => { + const sidebar = document.querySelector('[class^="sidebar"]'); + + const menu = document.querySelector('[class^="sidebar"] .menu'); + + const display = window.innerWidth; + + menuActive + ? sidebar.classList.add('highlight') + : sidebar.classList.remove('highlight'); + + if (display <= 800) { + menuActive + ? menu.classList.add('menu--show') + : menu.classList.remove('menu--show'); + } + setTimeout(() => { + menuActive && toggleMenu(); + }, 5000); + return () => {}; + }, [menuActive]); + + return ( +
  • + + {emoji} + {label} + +
    • + ); +} + +export function Signpost() { + return ( +
    + MetaGame Wiki Logo + +
    + ); +} diff --git a/src/components/signpost.module.scss b/src/components/signpost.module.scss new file mode 100644 index 00000000..00d43854 --- /dev/null +++ b/src/components/signpost.module.scss @@ -0,0 +1,109 @@ +.wrapper { + text-align: center; + + img { + margin-bottom: 1.2rem; + } +} + +.signpost { + display: flex; + justify-content: center; + flex-flow: row wrap; + list-style: none; + padding-left: 0; + .signpostItem { + position: relative; + flex: 0 0 140px; + min-width: 140px; + max-width: 140px; + text-align: center; + margin: 0 10px 20px; + min-height: 140px; + max-height: 140px; + box-sizing: border-box; + + &:nth-of-type(3n) { + // padding-right: 0; + } + + a { + position: relative; + color: white; + display: inline-flex; + flex-flow: column wrap; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + // backdrop-filter: blur(7px); + background-color: rgba(255, 255, 255, 0.08); + box-shadow: 0 0 2rem rgba(0, 0, 0, 0); + transition: box-shadow 0.3s ease-in-out; + border-radius: 6px; + // padding: 0 0 15px; + overflow: hidden; + z-index: 2; + + &:hover { + box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1); + + &:before, + &:after { + transform: translate3d(120%, 0, 0); + } + } + &:before { + content: ''; + position: absolute; + display: none; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform: translate3d(-120%, 0, 0); + filter: blur(15px); + background: linear-gradient( + 45deg, + transparent, + rgba(255, 255, 255, 0), + rgba(255, 255, 255, 0.06), + rgba(255, 255, 255, 0), + transparent + ); + transition: all 0.4s 0.3s ease-in-out; + z-index: 1; + } + &:after { + content: ''; + position: absolute; + display: block; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform: translate3d(-120%, 0, 0); + filter: blur(10px); + background: linear-gradient( + 45deg, + transparent, + rgba(255, 255, 255, 0), + rgba(255, 255, 255, 0.04), + rgba(255, 255, 255, 0), + transparent + ); + transition: all 0.3s 0.1s ease-in-out; + z-index: 1; + } + } + span { + display: block; + + &:first-child { + font-size: 65px; + line-height: 85px; + } + } + } + +} diff --git a/src/css/custom.scss b/src/css/custom.scss index 1dabf154..e76ea7b3 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -115,7 +115,7 @@ body, backdrop-filter: blur(7px); background-color: rgba(255, 255, 255, 0.08); box-shadow: 0 0 2rem rgba(0, 0, 0, 0); - transition: box-shadow 0.3s ease-in-out; + transition: background-color 0.3s 0.1s ease-in, box-shadow 0.3s ease-in-out; margin-top: 10rem; width: 100%; max-width: 300px; @@ -123,6 +123,10 @@ body, padding: 5px; overflow: hidden; z-index: 2; + + &.highlight { + background-color: rgba(255, 255, 255, 0.15); + } } @media (min-width: 1280px) { position: relative; @@ -132,7 +136,8 @@ body, overflow: hidden; z-index: 2; - &:hover { + &:hover, + &.highlight { box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1); &:before, @@ -188,6 +193,7 @@ body, &:hover { } } + .menu--show { background-color: var(--mf-color-secondary); } diff --git a/src/pages/styles.module.scss b/src/pages/styles.module.scss index 119efc55..62426a0e 100644 --- a/src/pages/styles.module.scss +++ b/src/pages/styles.module.scss @@ -92,9 +92,7 @@ justify-content: space-between; width: 50%; margin-top: 50px; - .join { - background: #ff1f82; - } + .button { background: #5a32e6; border-radius: 4px; @@ -112,6 +110,9 @@ &.btnJoin { background: #ff1f82; + &:hover { + background-color: #ff539f; + } } @media screen and (min-width: 965px) { @@ -164,7 +165,7 @@ } &:hover { - background-color: #5a32e699; + background-color: #8061ec; box-shadow: 0 0 5px rgba(0, 0, 0, 0); color: #fff;