mirror of
https://github.com/MetaFam/TheGame.git
synced 2026-04-24 03:00:09 -04:00
added shit to the landing page (#151)
* Update index.js * Update index.js * Fixed the invalid html and went through and fixed the styling on a few bits. Also, I changed the 'Explore' button to point to 'Signpost' rather than 'Introduction' as intro repeats the homepage now. * Switched out the logo as @peth-yursick had in his update and added a couple of responsive tweaks. * I forgot to add this Co-authored-by: luxumbra <me@luxumbra.dev>
This commit is contained in:
peth-yursick
@@ -606,7 +606,7 @@ a:hover,
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
blockquote {
|
||||
border-color: var(--mf-color-wiki-cta);
|
||||
color: var(--mf-color-wiki-cta);
|
||||
p {
|
||||
|
||||
@@ -42,8 +42,8 @@ const features = [
|
||||
];
|
||||
|
||||
const wrapperStyle = {
|
||||
width: '740px',
|
||||
maxWidth: '740px',
|
||||
width: '680px',
|
||||
maxWidth: '680px',
|
||||
margin: '5rem auto',
|
||||
// overflow: 'hidden',
|
||||
};
|
||||
@@ -51,7 +51,7 @@ const panelStyle = {
|
||||
backgroundColor: 'rgba(255,255,255,0.08)',
|
||||
// borderRadius: '6px',
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
alignItems: 'center',
|
||||
flexFlow: 'row nowrap',
|
||||
flex: '0 0 100%',
|
||||
marginBottom: '30px',
|
||||
@@ -70,10 +70,12 @@ const lamerPanelStyle = {
|
||||
const imgWrap = {
|
||||
flex: '0 0 33%',
|
||||
width: '33%',
|
||||
marginRight: '15px',
|
||||
};
|
||||
const mainWrap = {
|
||||
flexGrow: 1,
|
||||
paddingLeft: '0px',
|
||||
paddingLeft: '10px',
|
||||
paddingRight: '20px',
|
||||
};
|
||||
const aspectBox = {
|
||||
position: 'relative',
|
||||
@@ -96,15 +98,17 @@ const sectionHeading = {
|
||||
fontFamily: '"IBM Plex Mono"',
|
||||
fontSize: '24px',
|
||||
color: '#a5b9f6',
|
||||
marginBottom: '13px',
|
||||
};
|
||||
const panelTitleStyle = {
|
||||
...sectionHeading,
|
||||
color: 'white',
|
||||
marginBottom: '3px',
|
||||
flex: '0 0 100%',
|
||||
width: '100%',
|
||||
textAlign: 'left',
|
||||
};
|
||||
const textStyle = {
|
||||
fontSize: '17px',
|
||||
fontSize: '14px',
|
||||
};
|
||||
|
||||
function Panel({
|
||||
@@ -141,7 +145,10 @@ function Panel({
|
||||
<div style={mainWrap}>
|
||||
{title && <h3 style={panelTitleStyle}>{title}</h3>}
|
||||
{description && (
|
||||
<div dangerouslySetInnerHTML={{ __html: description }} />
|
||||
<div
|
||||
style={textStyle}
|
||||
dangerouslySetInnerHTML={{ __html: description }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -159,48 +166,144 @@ function Home() {
|
||||
return (
|
||||
<Layout title={siteConfig.title} description={siteConfig.tagline}>
|
||||
<div className={classnames('wrapper', wikipath)}>
|
||||
<div className={classnames('inner-wrapper')} style={wrapperStyle}>
|
||||
<header className={classnames('hero', styles.heroBanner)}>
|
||||
<div
|
||||
className={classnames('inner-wrapper', styles.innerWrapper)}
|
||||
style={wrapperStyle}
|
||||
>
|
||||
<header className={classnames(styles.heroBanner)}>
|
||||
<div className='container'>
|
||||
<img
|
||||
alt='MetaGame Wiki Logo'
|
||||
className={styles.wikiLogo}
|
||||
width='555'
|
||||
src={useBaseUrl('img/wiki-logo.png')}
|
||||
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'
|
||||
}
|
||||
/>
|
||||
<p className={styles.heroSubtitle}>{siteConfig.tagline}</p>
|
||||
<p className={styles.heroSubtitle}>
|
||||
<em>A Massive Online Coordination Game</em>
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<main className={styles.mainContent}>
|
||||
<div
|
||||
className='row'
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div className={'col'}>
|
||||
<h2 id='abstract'>Abstract</h2>
|
||||
<blockquote>
|
||||
<p>
|
||||
<em>
|
||||
“Metagame is any approach to a game that transcends or
|
||||
operates outside of the prescribed rules of the game, uses
|
||||
external factors to affect the game, or goes beyond the
|
||||
supposed limits or environment set by the game.”
|
||||
</em>{' '}
|
||||
- From Wiki
|
||||
</p>
|
||||
</blockquote>
|
||||
<p>
|
||||
Players of MetaGame are on a quest to change the way people
|
||||
coordinate around solving problems & creating value.
|
||||
</p>
|
||||
<p>
|
||||
The quest stretches from fixing the onboarding to the Ethereum
|
||||
space
|
||||
<br />
|
||||
by symmetrifying information & composing the basic
|
||||
socio-economic infrastructure, to grappling with actual
|
||||
problems.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
You know, the opposite of the first crypto-world problems.
|
||||
</li>
|
||||
</ul>
|
||||
<p>But, it all starts with Seeds…</p>
|
||||
<h2 id='seed-phase'>Seed Phase</h2>
|
||||
<p>
|
||||
<img
|
||||
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%2Ffa305be3-279a-440a-9ba2-cfa2d49281c4_952x186.png'
|
||||
alt=''
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
The main goal of Seed phase is to build a hub for anyone
|
||||
interested in decentralized
|
||||
<br />
|
||||
organizations & applications.
|
||||
<br />
|
||||
Guides & portals to anything one might need to build them
|
||||
& a community of people to support them.
|
||||
</p>
|
||||
<p>
|
||||
We’re building a <em>Decentralized Factory</em> for baking the
|
||||
building blocks we are going to use to compose the bigger
|
||||
picture.
|
||||
</p>
|
||||
<h2 id='the-bigger-picture'>The Bigger Picture</h2>
|
||||
<p>
|
||||
<img
|
||||
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%2Fbe6c92b4-6ead-4a60-acf0-db9cc0251b9c_1310x265.png'
|
||||
alt=''
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
The long term goal of MetaGame is to build an alternative
|
||||
society; a global society focused around solving problem - not
|
||||
squeezing the world for profit.
|
||||
</p>
|
||||
<p>We are building the future we want to live in:</p>
|
||||
<ul>
|
||||
<li>
|
||||
A more collaborative, transparent & decentralized
|
||||
future.
|
||||
</li>
|
||||
<li>
|
||||
A future in which human progress isn’t accelerating its
|
||||
destruction.
|
||||
</li>
|
||||
</ul>
|
||||
<p>Read more about the Phases of MetaGame?</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{features && features.length && (
|
||||
<section className={styles.features}>
|
||||
<div className='container'>
|
||||
<div
|
||||
className='row'
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<h2 style={sectionHeading}>So, who is it for?</h2>
|
||||
{features &&
|
||||
features.map((props, i, idx) => (
|
||||
<>
|
||||
{features.length === i + 1 && (
|
||||
<h2 style={sectionHeading}>Who is it NOT for?</h2>
|
||||
)}
|
||||
<Panel
|
||||
key={idx}
|
||||
lastPlayerPanel={
|
||||
i === features.length - 2 ? 'last-item' : ''
|
||||
}
|
||||
lamerPanel={
|
||||
i === features.length - 1 ? 'lamer-panel' : ''
|
||||
}
|
||||
{...props}
|
||||
/>
|
||||
</>
|
||||
))}
|
||||
<div className='row'>
|
||||
<div
|
||||
className={'col'}
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexFlow: 'row wrap',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<h2 style={sectionHeading}>So, who is it for?</h2>
|
||||
{features &&
|
||||
features.map((props, i, idx) => (
|
||||
<>
|
||||
{features.length === i + 1 && (
|
||||
<h2 style={sectionHeading}>Who is it NOT for?</h2>
|
||||
)}
|
||||
<Panel
|
||||
key={idx}
|
||||
lastPlayerPanel={
|
||||
i === features.length - 2 ? 'last-item' : ''
|
||||
}
|
||||
lamerPanel={
|
||||
i === features.length - 1 ? 'lamer-panel' : ''
|
||||
}
|
||||
{...props}
|
||||
/>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -212,7 +315,7 @@ function Home() {
|
||||
'button button--primary button--lg button--explore',
|
||||
styles.button,
|
||||
)}
|
||||
to={useBaseUrl('docs/introduction')}
|
||||
to={useBaseUrl('docs/enter-metagame/signpost')}
|
||||
>
|
||||
EXPLORE
|
||||
</Link>
|
||||
|
||||
@@ -4,7 +4,13 @@
|
||||
* and scoped locally.
|
||||
*/
|
||||
|
||||
.innerWrapper {
|
||||
@media screen and (max-width: 500px) {
|
||||
padding: 0 25px;
|
||||
}
|
||||
}
|
||||
.heroBanner {
|
||||
background: transparent;
|
||||
@media screen and (max-width: 500px) {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -14,21 +20,25 @@
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
& > div {
|
||||
padding: 0;
|
||||
}
|
||||
.wikiLogo {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
@media screen and (min-width: 768px) {
|
||||
width: 70%;
|
||||
}
|
||||
@media screen and (min-width: 1366px) {
|
||||
width: 50%;
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
width: 80%;
|
||||
}
|
||||
// @media screen and (min-width: 768px) {
|
||||
// width: 90%;
|
||||
// }
|
||||
// @media screen and (min-width: 1366px) {
|
||||
// width: 100%;
|
||||
// }
|
||||
// @media screen and (min-width: 1920px) {
|
||||
// width: 100%;
|
||||
// }
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
font-family: var(--mf-font-mono);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
@@ -59,6 +69,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
.mainContent {
|
||||
font-size: 17px;
|
||||
text-align: left;
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
font-family: var(--mf-font-mono);
|
||||
text-align: left;
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
margin: 30px 0;
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -154,6 +181,10 @@
|
||||
text-align: center;
|
||||
padding: 2rem 0 0;
|
||||
width: 100%;
|
||||
|
||||
> div {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.panel {
|
||||
@media screen and (max-width: 500px) {
|
||||
@@ -161,6 +192,7 @@
|
||||
flex-flow: row wrap !important;
|
||||
max-width: 90% !important;
|
||||
padding: 20px !important;
|
||||
margin: 0 auto !important;
|
||||
|
||||
h3 {
|
||||
margin-top: 10px;
|
||||
@@ -228,9 +260,18 @@
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
list-style-position: inside;
|
||||
li {
|
||||
padding-left: 0;
|
||||
display: inline-flex;
|
||||
align-items: flex-start;
|
||||
|
||||
&::before {
|
||||
content: '•';
|
||||
display: block;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
p + p {
|
||||
|
||||
Reference in New Issue
Block a user