App: Styling

app/templates/main.html

@@ -22,20 +22,28 @@
 		}
 		.meeting {
 			border: 1px solid blue;
-			font-size: smaller;
 			background-color: #ccccff;
+			overflow: hidden;
 		}
 		.meeting:hover {
 			background-color: #aaaaff;
 		}
 		.collision {
 			border: 1px solid red;
-			font-size: smaller;
 			background-color: #ffcccc;
 		}
 		.collision:hover {
 			background-color: #ffaaaa;
 		}
+		.mtime {
+			margin: 0;
+			font-size: smaller;
+		}
+		.mdesc {
+			margin: 0;
+			margin-top: 0.5ex;
+			font-size: 70%;
+		}
 
 	</style>
 </head>
@@ -68,8 +76,9 @@
 		<div class=hour style='position: absolute; left: {{ h.x }}px; top: {{ h.y }}px; width: {{ h.w }}px; height: {{ h.h }}px;'></div>
 {% endfor %}
 {% for m in g.meetings %}
-		<div class={{ "collision" if m.coll else "meeting" }} style='position: absolute; left: {{ m.x }}px; top: {{ m.y }}px; width: {{ m.w }}px; height: {{ m.h }}px;' title='{{ m.start + "–" + m.end + ": " + m.topic|e }}'>
-			{{ m.start }} – {{ m.end }}
+		<div class='meeting{{ " collision" if m.coll else "" }}' style='position: absolute; left: {{ m.x }}px; top: {{ m.y }}px; width: {{ m.w }}px; height: {{ m.h }}px;' title='{{ m.start + "–" + m.end + ": " + m.topic|e }}'>
+			<p class=mtime>{{ m.start }}–{{ m.end }}
+			<p class=mdesc>{{ m.topic }}
 		</div>
 {% endfor %}
 	</div>