Implement Archive builder. Change events layout

site/styles/events.css

@@ -1,30 +1,63 @@
-table {
-  table-layout: fixed;
-  border-spacing: 0;
-}
-
-th,
-td {
-  padding: 0 1rem 0 1rem;
-  text-align: left;
-  border-left: 2px solid var(--border);
-}
-
-th {
-  padding: 1rem 1rem 0 1rem;
-  border-bottom: 2px solid var(--border);
-}
-
-td:nth-child(odd) {
-  white-space: nowrap;
-}
-
-td {
-  padding: 0 1rem 1rem 1rem;
-  vertical-align: top;
-}
-
 h1 {
   margin-bottom: 2rem;
   font-weight: normal;
-}
+}
+
+.event {
+  display: flex;
+  flex-direction: row;
+}
+
+.event:hover {
+  border-bottom: 5px var(--hightlight) solid;
+}
+
+.event:hover>div {
+  padding-bottom: calc(0.5rem - 5px);
+}
+
+.event>div {
+  padding: 0.5rem;
+  white-space: nowrap;
+}
+
+.date {
+  width: 250px;
+  font-size: 0.9em;
+  overflow-x: hidden;
+  white-space: nowrap;
+}
+
+.title {
+  border-left: 2px solid var(--border);
+  font-weight: bold;
+}
+
+.place {
+  font-size: 0.9em;
+}
+
+@media screen and (max-width: 1160px) {
+  .event {
+    flex-direction: column;
+    margin-bottom: 1rem;
+    border-left: 2px solid var(--border);
+  }
+
+  .event > div {
+    padding: 0 0.5rem;
+    white-space: normal;
+  }
+
+  .event:hover {
+    border-bottom: none;
+  }
+  
+  .event:hover> div {
+    padding-bottom: 0;
+  }
+
+  .title {
+    border-left: none;
+  }
+}