UI/UX

OnlyF0uR · Sep 26, 2022 · 3c96c22 · 3c96c22
1 parent fa3f085
commit 3c96c22
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 18 deletions.
diff --git a/lib/contents/details.svelte b/lib/contents/details.svelte
@@ -14,6 +14,9 @@
 	<h4 class="content-title">Case details</h4>
 	<div class="row">
 		<div class="details">
+			<span class="box-content-title">
+				Information
+			</span>
 			<p><strong>Name:</strong> {caseData.name}</p>
 			<p><strong>Description:</strong> {caseData.desc ?? 'N/A'}</p>
 		</div>
@@ -47,6 +50,8 @@
 	.row {
 		display: flex;
 		gap: var(--content-spacing);
+		min-height: var(--row1-height);
+		max-height: var(--row1-height);
 	}
 
 	.row div {
@@ -57,14 +62,11 @@
 		background-color: var(--blue-colour);
 		width: var(--row1-spacing);
 
-		min-height: var(--row1-height);
-		max-height: var(--row1-height);
+		padding: var(--box-item-padding);
 	}
 
 	.row > .stats {
 		width: calc(100% - var(--content-spacing) - var(--row1-spacing));
-		min-height: var(--row1-height);
-		max-height: var(--row1-height);
 
 		display: flex;
 		flex-wrap: wrap;

diff --git a/lib/contents/target.svelte b/lib/contents/target.svelte
@@ -77,7 +77,7 @@
 				{#each data.primary as entity}
 					<div class="target">
 						<div class="target-content">
-							<span class="title">{entity.title}</span>
+							<span class="box-content-title">{entity.title}</span>
 							<div class="relations">
 								<p>Relations:</p>
 								<ul>
@@ -102,7 +102,7 @@
 				{#each data.secondary as entity}
 					<div class="target">
 						<div class="target-content">
-							<span class="title">{entity.title}</span>
+							<span class="box-content-title">{entity.title}</span>
 							<div class="relations">
 								<p>Relations:</p>
 								<ul>
@@ -127,7 +127,7 @@
 				{#each data.tertiary as entity}
 					<div class="target">
 						<div class="target-content">
-							<span class="title">{entity.title}</span>
+							<span class="box-content-title">{entity.title}</span>
 							<div class="relations">
 								<p>Relations:</p>
 								<ul>
@@ -188,14 +188,7 @@
 	}
 
 	.target-content {
-		padding: 12px;
-	}
-
-	.target-content > .title {
-		color: var(--light-grey-text-colour);
-		letter-spacing: 0.05em;
-		font-size: 16px;
-		cursor: pointer;
+		padding: var(--box-item-padding);
 	}
 
 	.target-content > .relations {

diff --git a/lib/exception.svelte b/lib/exception.svelte
@@ -8,9 +8,10 @@
 <style>
     p {
         margin: 50px 50px;
+        color: var(--grey-text-colour);
     }
     .error-msg {
         font-style: italic;
-        color: var(--dark-grey-colour);
+        color: var(--light-grey-text-colour);
     }
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -18,17 +18,24 @@
 		--green-colour: #0cb403;
 		--dark-grey-colour: darkslategray;
 
-		/* Highlights */
-		--light-highlight-colour: #fff9cc;
+		/* Highlight */
 		--dark-highlight-colour: rgb(240, 184, 45);
 
 		--content-spacing: 24px;
+		--box-item-padding: 12px;
 	}
 
 	:global(div.content-container) {
 		padding: var(--content-spacing);
 	}
 
+	:global(span.box-content-title) {
+		color: var(--light-grey-text-colour);
+		letter-spacing: 0.05em;
+		font-size: 16px;
+		cursor: pointer;
+	}
+
 	:global(h4.content-title) {
 		text-transform: uppercase;
 		margin-bottom: 18px;