mirrors/paceboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UX and color pass

Browse source
This commit is contained in:
Zachary Talis 2021-06-28 20:30:28 -04:00
parent 1ee2c841a6
commit 2932ac0538
4 changed files with 74 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
css/style.css
View file

@ -8,16 +8,24 @@
src: url("../assets/fonts/Lexend.ttf"); src: url("../assets/fonts/Lexend.ttf");
} }
:root {
--color-text-primary: #352B38;
--color-text-link: #306662;
--color-background-primary: #EDF1EA;
--color-background-secondary: #D9DED4;
--color-background-tertiary: #EBE1E9;
}
body { body {
color: #352B38; color: var(--color-text-primary);
background-color: #EDF1EA; background-color: var(--color-background-primary);
font-family: "Fira Code", "Courier New", Courier, monospace; font-family: "Fira Code", "Courier New", Courier, monospace;
font-style: normal; font-style: normal;
font-weight: 300; font-weight: 300;
margin: auto; margin: auto;
margin-top: 50px; margin-top: 50px;
margin-bottom: 10vmin; margin-bottom: 10vmin;
max-width: min(99%, 70em); max-width: min(98%, 45em);
overflow-wrap: break-word; overflow-wrap: break-word;
overflow-y: scroll; overflow-y: scroll;
} }
@ -27,16 +35,64 @@ h1, h2 {
text-align: center; text-align: center;
} }
h2 {
margin-bottom: 16px;
}
p {
padding-left: 0.6em;
padding-right: 0.6em;
}
a {
color: var(--color-text-link)
}
table, tr, th, td {
border-collapse: collapse;
}
td:first-child {
padding-left: 0.6em;
}
td:last-child {
padding-right: 0.6em;
}
.reduceTopMargin {
margin-top: -0.75em;
}
.centerHoriz { .centerHoriz {
margin: auto; margin: auto;
width: 80%; width: min(100%, 45em);
} }
.categoryLink { .categoryLink {
padding-top: 1em;
display: block; display: block;
} }
.categoryBoard { .categoryBoard {
font-weight: normal; background-color: var(--color-background-secondary);
text-align: left; text-align: left;
} }
.categoryBoard tr td:nth-child(3) {
text-align: center;
}
.categoryBoard tr td:nth-child(4) {
text-align: right;
}
.categoryBoard tr:nth-child(even) {
background-color: var(--color-background-tertiary);
}
.runContainer {
text-align: center;
padding-bottom: 3%;
padding-top: 3%
}

3
templates/category.html
View file

@ -24,9 +24,8 @@
<body> <body>
<h1><a href="../../">tk_game_name</a> - tk_category_name</h1> <h1><a href="../../">tk_game_name</a> - tk_category_name</h1>
<h2 class="reduceTopMargin">Leaderboard</h2>
<p>tk_category_rules</p> <p>tk_category_rules</p>
<h2>Leaderboard</h2>
lk_leaderboard lk_leaderboard
</body> </body>

5
templates/index.html
View file

@ -23,11 +23,12 @@
</head> </head>
<body> <body>
<h1>tk_game_name - Speedruns Leaderboard</h1> <h1>tk_game_name</h1>
<h2 class="reduceTopMargin">Speedruns</h2>
<p>tk_game_description</p> <p>tk_game_description</p>
<h2>Categories</h2> <h2>Categories</h2>
lk_categories <div class="reduceTopMargin" style="text-align: center;">lk_categories</div>
</body> </body>
</html> </html>

17
templates/run.html
View file

@ -5,12 +5,12 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tk_game_name - tk_run_runner's run</title> <title>tk_game_name - tk_category_name - tk_run_runner</title>
<link rel="stylesheet" href="../../css/style.css"> <link rel="stylesheet" href="../../css/style.css">
<link rel="icon" href="../../assets/img/logo.png"> <link rel="icon" href="../../assets/img/logo.png">
<meta property="og:title" content="tk_game_name - tk_run_runner's run" /> <meta property="og:title" content="tk_game_name - tk_category_name - tk_run_runner" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:description" content="tk_run_description" /> <meta property="og:description" content="tk_run_description" />
<meta property="og:url" content="tk_url/tk_run_id/index.html" /> <meta property="og:url" content="tk_url/tk_run_id/index.html" />
@ -23,13 +23,14 @@
</head> </head>
<body> <body>
<h1><a href="../../">tk_game_name</a> - tk_run_runner's run</h1> <h1><a href="../../">tk_game_name</a> - <a href="../../categories/tk_category_dashname">tk_category_name</a></h1>
<h2><a href="../../categories/tk_category_dashname">tk_category_name<a></h2> <h2 class="reduceTopMargin">tk_run_runner's run</h2>
<p>lk_run_duration (rank #lk_run_place)</p> <div class="runContainer">
<p>Verified by <strong>tk_run_verifier</strong></p> <p>lk_run_duration (rank #lk_run_place)</p>
<p>Took place on <strong>tk_run_date</strong></p> <p class="reduceTopMargin">lk_run_link</p>
lk_run_link </div>
<p class="runDescription"><em>tk_run_description</em></p> <p class="runDescription"><em>tk_run_description</em></p>
<p>Verified by <strong>tk_run_verifier</strong> - Took place on <strong>tk_run_date</strong></p>
</body> </body>
</html> </html>