frontend: styling

crates/frontend/public/assets/style.css

@@ -1,3 +1,7 @@
 body {
   font-family: sans-serif;
 }
+
+* {
+  box-sizing: border-box;
+}

crates/frontend/public/templates/layouts/default.html

@@ -6,11 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{% block title %}RustiCal{% endblock %}</title>
   <link rel="stylesheet" href="/frontend/assets/style.css" />
-  <style>
-    * {
-      box-sizing: border-box;
-    }
-  </style>
   {% block imports %}{% endblock %}
 </head>
 

crates/frontend/public/templates/pages/user.html

@@ -7,27 +7,42 @@
 <style>
 li.collection-list-item {
   list-style: none;
-  display: grid;
+  display: contents;
-  margin: 12px;
-  min-height: 80px;
-  background: #EEE;
-  padding: 8px;
-  border-radius: 12px;
-  grid-template-areas:
-    "title color-chip"
-    "description color-chip";
-  grid-template-rows: auto auto;
-  grid-template-columns: auto 50px;
-  padding: 0;
 
   a {
-    display: contents;
+    background: #EEE;
+    display: grid;
+    margin: 12px;
+    min-height: 80px;
+    border-radius: 12px;
+    grid-template-areas:
+      ". color-chip"
+      "title color-chip"
+      "description color-chip"
+      ". color-chip";
+    grid-template-rows: 12px auto auto 12px;
+    grid-template-columns: auto 50px;
+    color: inherit;
+    text-decoration: none;
+    padding-left: 12px;
+
+    .title {
+      grid-area: title;
+    }
+
+    .description {
+      grid-area: description;
+    }
 
     .color-chip {
       background: var(--color);
       grid-area: color-chip;
       border-radius: 0 12px 12px 0;
     }
+
+    &:hover {
+      background: #DDD;
+    }
   }
 }
 </style>