1 files changed, 50 insertions, 15 deletions
diff --git a/templates/index.html b/templates/index.html
index 7b43411..2305acf 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,22 +1,57 @@
-{% load dt_week %}
-<!DOCTYPE html>
+{% load dt_week %}<!DOCTYPE html>
 <html lang="fr">
   <head>
     <meta charset="utf-8" />
-    <title>celcatsanitizer</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{% block title %}{% endblock %}celcatsanitizer</title>
+    <style>
+body {
+    max-width: 60em;
+    margin: 1em auto;
+    padding: 0 .62em;
+    font: 1.2em/1.62em sans-serif;
+}
+
+h1, h2, h3 {
+    line-height: 1.2em;
+}
+
+.content {
+    max-width: 50em;
+    margin: 0 auto;
+}
+
+@media print {
+    body, .content {
+        max-width: none;
+    }
+}
+
+li {
+    line-height: 1.2em;
+    margin-bottom: 5px;
+}
+
+li.course {
+     margin-bottom: 20px;
+}
+    </style>
   </head>
   <body>
-    <h1>celcatsanitizer</h1>
-    {% for timetable in timetables %}
-    <h3>{{ timetable.name }}</h3>
-    <ul>
-      {% for group in groups %}
-      {% if group.timetable.id == timetable.id %}
-      <li>{{ group.name }} &ndash; {% for week in group.weeks %}<a href="{% url "timetable" timetable.slug week.year week|dt_week group.slug %}">{{ week|dt_prettyprint }}</a> {% endfor %}</li>
-      {#<li><a href="{% url "timetable" timetable.slug 2017 52 group.slug %}">{{ group.name }}</a></li>#}
-      {% endif %}
-      {% endfor %}
-    </ul>
-    {% endfor %}
+    <header>
+      <h1>celcatsanitizer</h1>
+    </header>
+    <div class="content">{% block body %}{% for timetable in timetables %}
+      <section id="{{ timetable.slug }}">
+        <h3>{{ timetable.name }}</h3>
+        <ul>{% for group in groups %}{% if group.timetable.id == timetable.id %}
+          <li>{{ group.name }} &ndash; {% for week in group.weeks %}<a href="{% url "timetable" timetable.slug week.year week|dt_week group.slug %}">{{ week|dt_prettyprint }}</a> {% endfor %}</li>{% endif %}{% endfor %}
+        </ul>
+      </section>{% endfor %}{% endblock %}
+    </div>
+    <footer>
+      <p>(c) 2017 &ndash; Alban Gruin<br />
+      Design inspiré par <a href="https://bestmotherfucking.website/">https://bestmotherfucking.website/</a></p>
+    </footer>
   </body>
 </html>