1
Fork 0
advent-of-code/source/templates/solutions.html

157 lines
3.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<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>Advent of Code Solutions</title>
<link rel="stylesheet"
href="https://unpkg.com/modern-normalize@1.1.0/modern-normalize.css">
<style>
h1,
h2,
h3,
p,
pre {
margin: 0;
}
body {
--accent-1: #3395ff;
--accent-2: #495057;
--accent-3: #2bb34b;
--background-1: #212529;
--background-2: #131618;
--foreground-1: #f8f9fa;
--spacing-1: 4px;
--spacing-2: 8px;
background-color: var(--background-1);
color: var(--foreground-1);
}
a {
color: var(--accent-1);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.page-header,
.page-main {
margin: 0 auto;
width: 1200px;
}
.page-header {
margin-bottom: var(--spacing-2);
padding: var(--spacing-2);
text-align: center;
}
.year {
display: grid;
gap: var(--spacing-2);
grid-template-columns: repeat(5, 1fr);
padding: var(--spacing-2);
}
.year>.title {
border-bottom: 1px solid var(--accent-2);
grid-column: 1 / 6;
}
.day {
background-color: var(--background-2);
padding: var(--spacing-2);
}
.day>.title {
margin-bottom: var(--spacing-2);
}
.parts {
display: grid;
gap: var(--spacing-1);
grid-template-columns: repeat(1, 1fr);
}
.part {
border-left: 2px solid;
overflow: auto;
padding: var(--spacing-1);
}
.part.correct {
color: var(--accent-3);
}
</style>
</head>
<body>
<header class="page-header">
<h1>Advent of Code</h1>
</header>
<main class="page-main">
{% for year in years %}
<div class="year">
{% for solution in year %}
{% if loop.first %}
<h2 class="title">
<a href="{{ solution.day.year_link() }}">{{ solution.day.year }}</a>
</h2>
{% endif %}
<div class="day">
<h3 class="title">
<a href="{{ solution.day.day_link() }}">
Day {{ format!("{:02}", solution.day.day)|random_emoji }}
</a>
</h3>
<div class="parts">
{% let part_1_correct %}
{% if solution.part_1 == solution.part_1_expected %}
{% let part_1_correct = true %}
{% else %}
{% let part_1_correct = false %}
{% endif %}
{% if solution.part_1.contains("\n") %}
<details class="{% if part_1_correct %}correct{% endif %} part">
<summary>Click to expand.</summary>
<pre><code>{{ solution.part_1 }}</code></pre>
</details>
{% else %}
<pre class="{% if part_1_correct %}correct{% endif %} part"><code>{{ solution.part_1 }}</code></pre>
{% endif %}
{% let part_2_correct %}
{% if solution.part_2 == solution.part_2_expected %}
{% let part_2_correct = true %}
{% else %}
{% let part_2_correct = false %}
{% endif %}
{% if solution.part_2.contains("\n") %}
<details class="{% if part_2_correct %}correct{% endif %} part">
<summary>Click to expand.</summary>
<pre><code>{{ solution.part_2 }}</code></pre>
</details>
{% else %}
<pre class="{% if part_2_correct %}correct{% endif %} part"><code>{{ solution.part_2 }}</code></pre>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</main>
</body>
</html>