Merge pull request #86 from teaxyz/styling-work

Have more styling items to check off, but merging this PR to consolidate with main

packages/gui/src/app.css

@@ -22,3 +22,20 @@ html {
 		font-family: sono, sans-serif;
 	}
 }
+
+.text-primary,
+header,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+button,
+.click-copy {
+	font-family: 'pp-neue-machina' !important;
+}
+
+.pk-version {
+	font-family: 'sono';
+}

packages/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte

@@ -18,7 +18,7 @@
 {#if courses.length}
 	<Posts posts={courses} />
 {:else}
-	<section class="h-64 border border-gray p-4">
+	<section class="h-64 border border-gray bg-black p-4">
 		<Preloader />
 	</section>
 {/if}

packages/gui/src/components/NavBar/NavBar.svelte

@@ -63,7 +63,7 @@
 
 <ul id="NavBar">
 	<nav data-tauri-drag-region class="flex justify-between">
-		<div class="flex gap-1 p-3">
+		<div class="flex gap-1 p-3 pt-3">
 			<button class="titlebar-button" id="titlebar-close" on:click={appWindow.close}>
 				<img src="/images/close.svg" alt="close" />
 			</button>
@@ -139,8 +139,8 @@
 		display: inline-flex;
 		justify-content: center;
 		align-items: center;
-		width: 16px;
+		width: 12px;
-		height: 16px;
+		height: 12px;
 		border-radius: 8px;
 		opacity: 0.9;
 	}

packages/gui/src/components/News/News.svelte

@@ -18,7 +18,7 @@
 {#if news.length}
 	<Posts posts={news} />
 {:else}
-	<section class="h-64 border border-gray p-4">
+	<section class="h-64 border border-gray bg-black p-4">
 		<Preloader />
 	</section>
 {/if}

packages/gui/src/components/PackageBanner/PackageBanner.svelte

@@ -34,7 +34,7 @@
 		</article>
 	</header>
 	<footer class="flex h-20 border-t border-gray text-white">
-		<input class="flex-grow bg-black pl-4" disabled value={copyValue} />
+		<input class="click-copy flex-grow bg-black pl-4" disabled value={copyValue} />
 		<Button class="w-16 border-0 border-l-2 text-sm" onClick={onCopy}>{copyButtonText}</Button>
 		<Button class="w-56 border-0 border-l-2 text-sm" onClick={() => console.log('cli')}
 			>OPEN IN TERMINAL</Button

packages/gui/src/routes/+layout.svelte

@@ -18,12 +18,13 @@
 	</nav>
 	<section class="pt-24">
 		{#if backLink}
-			<header class="px-16 py-2 text-3xl text-gray hover:text-primary">
+			<header class="border-b border-gray px-16 text-3xl text-gray hover:text-primary">
 				<a href={backLink}>&#8592</a>
 			</header>
 		{/if}
 		<figure />
-		<div class="px-16">
+
+		<div class="content">
 			<!-- all pages get inserted in this slot -->
 			<slot />
 		</div>
@@ -49,7 +50,8 @@
 		height: 100vh;
 		overflow-y: scroll;
 	}
-	@media screen and (min-width: 1215px) {
+
+	@media screen and (min-width: 1440px) {
 		figure {
 			position: fixed;
 			z-index: 0;
@@ -59,10 +61,13 @@
 			bottom: 0px;
 			background-image: url('/images/gui-background-grid.svg');
 			background-size: cover;
-			background-repeat: repeat;
+			background-repeat: repeat-y;
+		}
+		.content {
+			padding: 0vw 3.6vw !important;
 		}
 	}
-	@media screen and (max-width: 1215px) {
+	@media screen and (max-width: 1440px) {
 		figure {
 			position: fixed;
 			z-index: 0;
@@ -74,14 +79,16 @@
 			background-size: contain;
 			background-repeat: repeat;
 		}
+		.content {
+			padding: 0vw 3.33vw;
+		}
 	}
 	header {
 		position: absolute;
 		top: 0px;
 		left: 0px;
 		width: 100%;
-		height: 50px;
+		height: 40px;
-		border-bottom: #ccc 1px solid;
 	}
 
 	slot {

packages/ui/src/Gallery/Gallery.svelte

@@ -65,7 +65,7 @@
 						focus = i;
 						resetLoop();
 					}}
-					class={`bg-purple h-4 w-4 rounded-lg border-2 border-white transition-colors ${
+					class={`bg-purple h-3 w-3 rounded-lg border border-white transition-colors ${
 						i === focus ? 'bg-purple-900' : ''
 					}`}
 				/>

packages/ui/src/Gallery/GalleryItem.svelte

@@ -31,8 +31,7 @@
 <style>
 	.gallery-item :global(.featured-img) {
 		box-shadow: 0px 0px 12px #0c0c0c !important;
-		width: 100%;
+		object-fit: cover;
-		height: 100%;
 	}
 	.card-thumb-label i {
 		font-size: 1.5vw;

packages/ui/src/PackageCard/PackageCard.svelte

@@ -36,7 +36,7 @@
 	<footer class="mt-4 flex items-center justify-between">
 		<div>
 			<p>
-				<span class="text-xs">V&NonBreakingSpace;{pkg.version}</span>
+				<span class="pk-version text-xs">V&NonBreakingSpace;{pkg.version}</span>
 				<!--
         TODO: uncomment once install counts improve
         <br>

packages/ui/src/SearchInput/SearchInput.svelte

@@ -16,7 +16,7 @@
 	};
 </script>
 
-<section class={`flex items-center py-2 ${size} ${clazz}`}>
+<section class={`flex items-center border-b border-r-0 border-l-0 py-2 ${size} ${clazz}`}>
 	<div class="icon pl-4">
 		<i class="icon-search-icon" />
 	</div>