UX and color pass
This commit is contained in:
Zachary Talis
parent
1ee2c841a6
commit
2932ac0538
4 changed files with 74 additions and 17 deletions
|
|
@ -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%
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
<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
|
||||
<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 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>
|
||||
Loading…
Reference in a new issue