Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-08-03 08:30:44 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

progress page styling

Browse Source
This commit is contained in:
mrjvs 2018-11-18 15:34:26 +01:00
parent 513d508440
commit 36e728de4f
2 changed files with 88 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
assets/css/pretendo-progress.css Normal file
View File

@ -0,0 +1,44 @@
section.bigCardWrapper.double {
display: flex;
flex-direction: row;
max-width: 80vw;
margin: auto;
}
section.bigCardWrapper.double > .bigCard {
flex: 1;
padding: 1em 6em;
margin: 0;
}
section.bigCardWrapper.double > .bigCard:first-child {
margin-right: 3em;
}
.listItem {
position: relative;
}
.listItem h2 {
font-size: 1rem;
color: #353535;
margin: 1em 0 0 0;
}
.listItem p {
margin: .2em 0 0 0;
}
.listItem.state1::before, .listItem.state2::before, .listItem.state3::before {
content: "";
position: absolute;
top: .2em;
left: -1.5em;
width: 1em;
height: 1em;
border-radius: 50%;
background-color: #f57c7c; /* state 1: no support */
}
.listItem.state2::before {
background-color: #e6ae65; /* state 2: partial support/bugged */
}
.listItem.state3::before {
background-color: #58ef81; /* state 3: full support/working */
}

59
views/progress.hbs
View File

@ -1,15 +1,44 @@
<h1>progress summary</h1>
<p>{{ summary }}</p>
<br>
<h2>game support</h2>
{{#each games }}
<strong>{{ this.title }}</strong>
<p>{{ this.description }}</p>
<p>state: {{ this.state }}</p>
{{/each}}
<br><br>
<h2>backend support</h2>
{{#each backends }}
<strong>{{ this.title }}</strong>
<p>{{ this.description }}</p>
{{/each}}
<!DOCTYPE html>
<html lang="en">
<head>
{{> head-common }}
<!-- page specific -->
<link rel="stylesheet" href="/assets/css/pretendo-progress.css">
</head>
<body class="flex">
{{> nav-default }}
<div class="contentWrapper bgLinesSmall">
<div class="bgExtrude"></div>
<section class="bigCardWrapper">
<div class="bigCard">
<p class="txt-highlight">Just to get it all together</p>
<h1 class="txt-title">progress summary</h1>
<p>{{ summary }}</p>
</div>
</section>
<section class="bigCardWrapper double">
<div class="bigCard">
<p class="txt-highlight">The list you were looking for</p>
<h1 class="txt-title">Game compatability</h1>
{{#each games }}
<div class="listItem state{{ this.state }}">
<h2>{{ this.title }}</h2>
<p>{{ this.description }}</p>
</div>
{{/each}}
</div>
<div class="bigCard">
<p class="txt-highlight">The boring stuff for boring people</p>
<h1 class="txt-title">Backend services</h1>
{{#each backends }}
<div class="listItem">
<h2>{{ this.title }}</h2>
<p>{{ this.description }}</p>
</div>
{{/each}}
</div>
</section>
{{> footer-default }}
</body>
</html>