3 files changed, 75 insertions, 43 deletions
diff --git a/index.html.erb b/index.html.erb
index 6b3c993..ad3f561 100644
--- a/index.html.erb
+++ b/index.html.erb
@@ -1,51 +1,10 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title><%= title %></title>
-<style>
-.events {
-  display:flex;
-  justify-content: space-around;
-  width: 800px;
-}
-.event-column {
-  width: 350px;
-}
-.event-column-inner,
-.time-column-inner {
-  position: relative;
-}
-.timestamp {
-  position: absolute;
-  font-size: 10px;
-}
-.event-item {
-  display: flex;
-  position: absolute;
-  background-color: #b8afaf;
-  border: 1px solid #ccc;
-  padding: 0.3em;
-  color: #000;
-  box-sizing: border-box;
-  width: 100%;
-
-  font-family: Helvetica;
-  font-size: small;
-}
-.event-item.selected {
-  background-color: #709270;
-}
-.event-item-image {
-  float: left;
-  margin-right: 0.3em;
-}
-.event-item-image img {
-  width: 3em;
-  object-fit: cover;
-}
-</style>
+    <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
   <body>
     <h1><%= title %></h1>
diff --git a/ramaskrik-program.rb b/ramaskrik-program.rb
index 8bda384..cd22839 100755
--- a/ramaskrik-program.rb
+++ b/ramaskrik-program.rb
@@ -95,3 +95,5 @@ IO.write("build/index.html", t_html.result(binding))
 
 t_ics = ERB.new(IO.read("program.ics.erb"), trim_mode: '<>')
 IO.write("build/program-ramaskrik-#{year}.ics", t_ics.result(binding).gsub(/\n/, "\r\n"))
+
+system('cp', 'styles.css', 'build/styles.css')
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..77e05c8
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,71 @@
+/* Styles for Ramaskrik program generator
+ *
+ * SPDX-FileCopyrightText: 2024 Eilertsens Kodeknekkeri
+ * SPDX-FileContributor: Harald Eilertsen
+ *
+ * SPDX-License-Identifier: AGPLv3-or-later
+ */
+body {
+  background-color: #242021;
+  color: #8c99a4;
+}
+a {
+  color: #9bbfdf;
+}
+a:visited {
+  color: #7293af;
+}
+a:hover {
+  color: #9ccfcf;
+}
+#introduction {
+  max-width: 50rem;
+}
+#events-list > h2 {
+  background-color: #3c4b56;
+  padding: 0.3rem;
+}
+.events {
+  display:flex;
+  justify-content: space-around;
+  width: 800px;
+}
+.event-column {
+  width: 350px;
+}
+.time-column {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.event-column-inner,
+.time-column-inner {
+  position: relative;
+}
+.timestamp {
+  position: absolute;
+  font-size: 10px;
+}
+.event-item {
+  display: flex;
+  position: absolute;
+  background-color: #b8afaf;
+  border: 1px solid #ccc;
+  padding: 0.3em;
+  color: #000;
+  box-sizing: border-box;
+  width: 100%;
+
+  font-family: Helvetica;
+  font-size: small;
+}
+.event-item.selected {
+  background-color: #709270;
+}
+.event-item-image {
+  float: left;
+  margin-right: 0.3em;
+}
+.event-item-image img {
+  width: 3em;
+  object-fit: cover;
+}