style - move program stuff to style sheet, rainbow progress for Hacker Jeopardy

2 files changed, 43 insertions, 1 deletions

diff --git a/src/static/main.css b/src/static/main.css
index eb0bf30..911e281 100644
--- a/src/static/main.css
+++ b/src/static/main.css
@@ -26,4 +26,46 @@ hr {
 	border: none;
 	height: 1px;
 	background-color: #333;
+  margin-bottom: 1em;
+}
+
+/* Program */
+.program-entry {
+  position: relative;
+}
+
+.program-progress {
+  display: inline-block;
+  background: #006688;
+  height: 1.2em;
+  position: absolute;
+  left: 0;
+}
+
+.program-text {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+
+.program-divider {
+  margin-bottom: 0.25em;
+}
+
+.rainbow {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 0, 0, 1) 0%,
+    rgba(255, 154, 0, 1) 10%,
+    rgba(208, 222, 33, 1) 20%,
+    rgba(79, 220, 74, 1) 30%,
+    rgba(63, 218, 216, 1) 40%,
+    rgba(47, 201, 226, 1) 50%,
+    rgba(28, 127, 238, 1) 60%,
+    rgba(95, 21, 242, 1) 70%,
+    rgba(186, 12, 248, 1) 80%,
+    rgba(251, 7, 217, 1) 90%,
+    rgba(255, 0, 0, 1) 100%
+  );
+  opacity: 0.8;
 }
diff --git a/src/templates/program.html b/src/templates/program.html
index 2b455dc..8434138 100644
--- a/src/templates/program.html
+++ b/src/templates/program.html
@@ -1 +1 @@
-<pre class="content" id="program">{% for event in parts.program %}{% if loop.previtem and loop.previtem.day != event.day %}<br>{{ event.day }}<hr style="margin-bottom: 1em">{% endif %}<div style="position: relative"><div style="display: inline-block; background: #006688; height: 1.2em; width: {{event.progress}}%; position: absolute; left: 0"></div><div style="position: absolute; top: 0px; left: 0px;">{{event.title}}  {{ event.time}}  {{ event.icon }}</div></div><br style="margin-bottom: 0.25em">{% endfor %}</pre>
+<pre class="content" id="program">{% for event in parts.program %}{% if loop.previtem and loop.previtem.day != event.day %}<br>{{ event.day }}<hr>{% endif %}<div class="program-entry"><div class="program-progress{% if 'Hacker Jeopardy' in event.title %} rainbow{% endif %}" style="width: {{event.progress}}%"></div><div class="program-text">{{ event.title }}  {{ event.time}}  {{ event.icon }}</div></div><br class="program-divider">{% endfor %}</pre>