Merge pull request #10 from cxumol/ui

Improve UI
cxumol · Nov 20, 2023 · 8f99590 · 8f99590
2 parents 2bd4e41 + a64bf96
commit 8f99590
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 15 deletions.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -11,4 +11,32 @@
 	/>
 </svelte:head>
 
+<main class="app">
 <App {data} />
+</main>
+
+<style>
+/* Medium devices (tablets, 768px and up) */
+@media (min-width: 768px) {
+    main.app {
+        padding: 0 16px;
+    }
+}
+
+/* Large devices (desktops, 992px and up) */
+@media (min-width: 992px) {
+    main.app {
+        max-width: 960px; /* Adjust this value based on your design preference */
+        margin: auto; /* This centers the content */
+        /* padding: 24px; */
+    }
+}
+
+/* Extra large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {
+    main.app {
+        max-width: 1140px; /* Adjust this value based on your design preference */
+        /* padding: 32px; */
+    }
+}
+</style>
diff --git a/src/routes/App.svelte b/src/routes/App.svelte
@@ -166,7 +166,7 @@
 	<!-- USER	VIEW MODE -->
 
 	{#if !unlocked}
-		<h1 class="bg-{data.title.color} center">{data.title.name}</h1>
+		<h1 class="bg-{data.title.color} center depth-2 ">{data.title.name}</h1>
 
 		{#if isInstanceDemo}
 			<!-- <p>
@@ -178,20 +178,24 @@
 		<div class="card depth-1">{@html pageReadme}</div>
 
 		{#each data.categories as cat, cat_i}
-			<div>
-				<h2 class="bg-{cat.color} center">{cat.name}</h2>
-				{#each cat.sites as site}
-					<button class="col-md-2 s-margin">
-						<a href={site.url}>
-							<span class="material-icons-outlined">
-								{site.icon}
-							</span>
-							<p>
-								{site.name}
-							</p>
-						</a>
-					</button>
-				{/each}
+			<div class="bg-subtle panel">
+				<div class="bg-{cat.color} cat-header">
+					<h2 class="center">{cat.name}</h2>
+				</div>
+				<div class="bg-subtle m-padding">
+					{#each cat.sites as site}
+						<button class="col-md-3 bg-white">
+							<a href={site.url}>
+								<span class="material-icons-outlined">
+									{site.icon}
+								</span>
+								<p>
+									{site.name}
+								</p>
+							</a>
+						</button>
+					{/each}
+				</div>
 			</div>
 			<hr />
 		{/each}
@@ -321,6 +325,13 @@
 		color: red;
 	}
 
+	.cat-header{
+		border-bottom: 1px solid #999;
+	}
+	.panel{
+		margin: 0 .5em;
+	}
+
 	button a p {
 		font-weight: bold;
 		word-break: break-word;