mirror of
https://github.com/MetaFam/TheGame.git
synced 2026-04-24 03:00:09 -04:00
Luxumbra signpost redesign (#155)
* WIP on the Signpost page redesign * Sidebar now gets highlighted when Library item clicked. * Better mobile behaviour * tweaks to tidy the grid * Sidebar state reset after 5 seconds * sorry, another tweak for better spacing. * tweaks * removed unwanted text * couple of little tweaks on the homepage buttons & spacing around logo on the signpost page
This commit is contained in:
Dave Sayer
@@ -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.
|
||||
8
docs/enter-metagame/signpost.mdx
Normal file
8
docs/enter-metagame/signpost.mdx
Normal file
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: ⚠️ Signpost
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
import { Signpost, directions } from '../../src/components/signpost';
|
||||
|
||||
<Signpost {...directions} />
|
||||
135
src/components/signpost.js
Normal file
135
src/components/signpost.js
Normal file
@@ -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 (
|
||||
<li className={styles.signpostItem} data-key={key}>
|
||||
<Link
|
||||
className={url && url === '#here' ? 'trigger' : null}
|
||||
key={key}
|
||||
to={useBaseUrl(url)}
|
||||
title={description}
|
||||
onClick={url && url === '#here' ? toggleMenu : null}
|
||||
>
|
||||
<span>{emoji}</span>
|
||||
<span>{label}</span>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export function Signpost() {
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
<img
|
||||
alt='MetaGame Wiki Logo'
|
||||
width='300'
|
||||
src='https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fe93a37b7-2a48-421c-80b7-3079eca8beb7_2048x881.png'
|
||||
/>
|
||||
<ul className={styles.signpost}>
|
||||
{directions &&
|
||||
directions.length > 0 &&
|
||||
directions.map((direction, idx) => (
|
||||
<SignpostItem {...direction} key={`sp-${idx}`} />
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
109
src/components/signpost.module.scss
Normal file
109
src/components/signpost.module.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user