UX and color pass

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

View file

@ -8,16 +8,24 @@
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 {
color: #352B38;
background-color: #EDF1EA;
color: var(--color-text-primary);
background-color: var(--color-background-primary);
font-family: "Fira Code", "Courier New", Courier, monospace;
font-style: normal;
font-weight: 300;
margin: auto;
margin-top: 50px;
margin-bottom: 10vmin;
max-width: min(99%, 70em);
max-width: min(98%, 45em);
overflow-wrap: break-word;
overflow-y: scroll;
}
@ -27,16 +35,64 @@ h1, h2 {
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 {
margin: auto;
width: 80%;
width: min(100%, 45em);
}
.categoryLink {
padding-top: 1em;
display: block;
}
.categoryBoard {
font-weight: normal;
background-color: var(--color-background-secondary);
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%
}

View file

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

View file

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

View file

@ -5,12 +5,12 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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="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:description" content="tk_run_description" />
<meta property="og:url" content="tk_url/tk_run_id/index.html" />
@ -23,13 +23,14 @@
</head>
<body>
<h1><a href="../../">tk_game_name</a> - tk_run_runner's run</h1>
<h2><a href="../../categories/tk_category_dashname">tk_category_name<a></h2>
<h1><a href="../../">tk_game_name</a> - <a href="../../categories/tk_category_dashname">tk_category_name</a></h1>
<h2 class="reduceTopMargin">tk_run_runner's run</h2>
<div class="runContainer">
<p>lk_run_duration (rank #lk_run_place)</p>
<p>Verified by <strong>tk_run_verifier</strong></p>
<p>Took place on <strong>tk_run_date</strong></p>
lk_run_link
<p class="reduceTopMargin">lk_run_link</p>
</div>
<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>
</html>