feat: entity card styles

kingsdigitallab · Nov 12, 2024 · 81cf2f2 · 81cf2f2
1 parent 2058759
commit 81cf2f2
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 23 deletions.
diff --git a/src/lib/components/EntityIndex.svelte b/src/lib/components/EntityIndex.svelte
@@ -151,24 +151,31 @@
 
 	.view-toggle button {
 		color: var(--text-1);
-		background-color: var(--surface-4);
+		background-color: var(--surface-1);
+		border-bottom: var(--size-2) solid transparent;
+		opacity: 0.5;
 		display: flex;
 		align-items: center;
 		gap: var(--size-2);
 		padding: var(--size-2) var(--size-4);
-		border: none;
 		cursor: pointer;
 		transition: background-color 0.3s ease;
 
 		&:hover {
-			background-color: var(--surface-2);
-			color: var(--yellow);
+			background-color: var(--surface-1);
+			border-bottom: var(--size-2) solid var(--surface-4);
+			opacity: 1;
+			&.active {
+				opacity: 0.7;
+			}
 		}
 	}
 
 	.view-toggle button.active {
-		background-color: var(--surface-2);
-		color: var(--text-2);
+		background-color: var(--surface-1);
+		border-bottom: var(--size-2) solid var(--surface-2);
+		color: var(--text-1);
+		opacity: 1;
 	}
 
 	.view-toggle button span {

diff --git a/src/lib/components/table/IndexCard.svelte b/src/lib/components/table/IndexCard.svelte
@@ -44,14 +44,10 @@
 	}
 
 	.card {
-		background-color: var(--surface-4);
-		border-radius: var(--radius-2);
+		background-color: var(--surface-1);
 		padding: var(--size-4);
 		transition: box-shadow 0.3s ease;
-	}
-
-	.card:hover {
-		box-shadow: var(--shadow-3);
+		border: 1px solid var(--surface-4);
 	}
 
 	.card h2 {
@@ -73,9 +69,9 @@
 	}
 
 	dt {
-		font-weight: bold;
-		font-size: var(--font-size-1);
-		color: var(--color-text-muted);
+		font-size: 12px;
+		opacity: 0.5;
+		text-transform: uppercase;
 	}
 
 	dd {

diff --git a/src/routes/database/people/+page.svelte b/src/routes/database/people/+page.svelte
@@ -199,21 +199,24 @@
 		background: var(--surface-1);
 		color: var(--text-1);
 		border: 1px solid var(--border-light);
-		border-radius: var(--radius-2);
-		box-shadow: var(--shadow-2);
-		padding: var(--size-3);
-
-		&:hover {
-			box-shadow: var(--shadow-3);
-		}
+		box-shadow: var(--shadow-1);
 	}
 
 	.card h3 {
 		margin-top: 0;
+		margin-bottom: var(--size-3);
+		border-bottom: 2px solid var(--pearl-grey);
+		padding: var(--size-3) var(--size-3) var(--size-2) var(--size-3);
+		color: var(--midnight-blue);
+		max-inline-size: none;
 	}
 
 	.card ul,
-	p {
+	.card p {
 		margin: 0;
+		padding: var(--size-3);
+	}
+	.card li {
+		padding-bottom: var(--size-2);
 	}
 </style>