Add CSS.

1 files changed, 103 insertions, 0 deletions

diff --git a/static/style.css b/static/style.css
new file mode 100644
index 00000000..728423a3
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,103 @@
+/*
+ * TODO
+ * the positioning of the meta information for each day is
+ * quite badly done, and mostly a hack.
+ */
+
+body {
+	/* This is for the day meta information */
+	padding-top: 50px;
+}
+
+.calendar {
+	height: calc(90vh - 50px);
+
+	/* This is relative for the .clock */
+	position: relative;
+}
+
+.days {
+	display: flex;
+	width: 100%;
+	height: 100%;
+	padding: 0;
+}
+
+/*
+ * This makes the borders of the object be part of the size.
+ * Making placing it on the correct line much simpler.
+ */
+.clock, .event {
+	position: absolute;
+	box-sizing: border-box;
+	margin: 0;
+	display: block;
+}
+
+.clock {
+	color: gray;
+	border-top: 1px dotted gray;
+	width: 100000; /* calc(100% + 5ex); */
+}
+
+.days > :first-child {
+	margin-left: 6ex;
+}
+
+.day {
+	position: relative;
+
+	height: 100%;
+	width: 100%;
+	min-width: 300px;
+
+	margin-left: 0.5em;
+	border: 1px solid black;
+}
+
+.meta {
+	position: absolute;
+	height: 50px;
+	top: -50px;
+
+	width: 100%;
+
+}
+
+.meta .dayname {
+	font-size: 2em;
+}
+
+.event {
+	width: 100%;
+
+	border-style: solid;
+	border-width: 2px;
+
+	overflow: hidden;
+
+	z-index: 0;
+}
+
+.selected {
+	width: 100% !important;
+	left: 0 !important;
+	z-index: 1 !important;
+
+	margin-top: 3mm;
+	margin-left: 3mm;
+}
+
+#clock-0  { top: calc(100%/24 *  0); }
+#clock-2  { top: calc(100%/24 *  2); }
+#clock-4  { top: calc(100%/24 *  4); }
+#clock-6  { top: calc(100%/24 *  6); }
+#clock-8  { top: calc(100%/24 *  8); }
+#clock-10 { top: calc(100%/24 * 10); }
+#clock-12 { top: calc(100%/24 * 12); }
+#clock-14 { top: calc(100%/24 * 14); }
+#clock-16 { top: calc(100%/24 * 16); }
+#clock-18 { top: calc(100%/24 * 18); }
+#clock-20 { top: calc(100%/24 * 20); }
+#clock-22 { top: calc(100%/24 * 22); }
+#clock-24 { top: calc(100%/24 * 24); }