cha0s/humus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

flow: design

Browse Source
This commit is contained in:
cha0s 2021-01-08 00:34:29 -06:00
parent e7278dfb50
commit fac95f4103
5 changed files with 54 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/src/assets/rooted.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 216 KiB

3
app/src/react/components/title/index.scss
View File

@ -1,5 +1,6 @@
.title {
background: url('/humus.jpg') bottom;
background-image: url('/rooted.jpg');
background-size: cover;
height: 100%;
position: absolute;
width: 100%;

2
app/src/react/components/title/main/index.scss
View File

@ -33,6 +33,6 @@
font-size: 3em;
padding: 0.5em 1.5em;
width: 100%;
text-align: left;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
}

28
app/src/react/components/universe/index.jsx
View File

@ -37,7 +37,33 @@ const Universe = ({match: {params: {uuid}}}) => {
</Link>
)}
<h2 className="universe__title">{universe.title}</h2>
<button className="universe__play" type="button">Play</button>
<span className="universe__online">5 / 10</span>
<div className="universe__motd">
<p>
This is placeholder text and will be replaced when the website goes live. This is
placeholder text. This text is here to test that text can be displayed correctly on the
page and doesn&apos;t hold any meaning. This is placeholder text. This is dummy text.
Placeholder text is temporary. In publishing and design placeholder text is used to
show the form of a document, but is not meaningful content. The eye is often drawn to
the meaning of text used as a placeholder, but it has no meaning and is simply there to
take up space.
</p>
<p>
In publishing and design placeholder text is used to show the form of a document, but
is not meaningful content. This placeholder text will be swapped out before the website
is complete. Using placeholder text is common in the industry and means that the site
is being built to realistic standards. Placeholder text will be swapped out before
development of the site is complete. Placeholder text is important so that elements
that display text have something relatively realistic to display. Placeholder text is
important so that elements that display text have something relatively realistic to
display. This is placeholder text and will be replaced when the website goes live.
Placeholder text fills the space before the real content has been input.
</p>
<p>
Have fun! &lt;3
</p>
</div>
<Link className="button universe__play" to={({pathname}) => `${pathname}/play`}>Play</Link>
</div>
</div>
);

27
app/src/react/components/universe/index.scss
View File

@ -15,15 +15,36 @@
.universe__title {
font-family: var(--thick-title-font-family);
font-size: 4em;
margin: 2em 1em;
margin: 2em 1em 0.5em;
}
.universe__motd {
font-size: 1.5em;
margin: auto;
width: 90%;
p {
margin-bottom: 2em;
}
}
.universe__online {
bottom: 5rem;
left: 5rem;
font-size: 2em;
position: absolute;
&:after {
font-size: 0.8em;
content: ' playing';
}
}
.universe__play {
background-color: rgba(0, 0, 0, 0.5);
bottom: 1em;
bottom: 4rem;
font-family: var(--thick-title-font-family);
font-size: 2em;
margin-left: 1em;
padding: 0.5em 1em;
position: absolute;
right: 1em;
right: 5rem;
}