Frontend style refactoring

wwwroot/css/dashboard.css

@@ -0,0 +1,88 @@
+.dashboard {
+  padding: calc(var(--s4) * 2);
+  overflow-y: auto;
+}
+
+.dashboard section {
+  margin-bottom: calc(var(--s4) * 2);
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--s4);
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: var(--s4);
+}
+
+.card {
+  background: var(--f3-bg);
+  border: var(--border-width) solid var(--f3-border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.card.clickable {
+  cursor: pointer;
+}
+
+.card.clickable:hover {
+  border-color: var(--primary);
+}
+
+.card-image {
+  aspect-ratio: 1;
+  background: var(--f2-bg);
+  overflow: hidden;
+}
+
+.card-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.card-body {
+  padding: var(--s3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s1);
+}
+
+.card-title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--s2);
+}
+
+.card-title {
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-desc {
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+.badge {
+  padding: var(--s1) var(--s2);
+  background: var(--f1-bg);
+  border: var(--border-width) solid var(--f2-border);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.card.placeholder {
+  border-style: dashed;
+  align-items: center;
+  justify-content: center;
+}