Merge pull request #7 from geerew/logo

Rework logo and home page splash

TODO.md

@@ -27,6 +27,7 @@
 ### Home
 
 - [BUG] New courses timestamp should be created_at
+- [BUG] Update px to match header when screen size is xs or sm
 - [ENHANCEMENT] Hide ongoing when there are no ongoing courses
 - [ENHANCEMENT] Get image for landing page
 - [ENHANCEMENT] Support adding categories from on the home page
@@ -54,6 +55,8 @@
 
 #### General
 
+-
+
 #### Courses
 
 - [ENHANCEMENT] The scan status should show for at least 1 second (scan then rescan to test)

ui/src/lib/components/header/header.svelte

@@ -12,8 +12,10 @@
 	>
 		<div class="mr-3">
 			<a href="/" class="mr-6 flex items-center gap-2">
-				<Icons.Hexagon weight="fill" class="size-8 rotate-90 fill-primary stroke-none" />
-				<span class="inline-block font-semibold">{site.name}</span>
+				<Icons.Logo
+					class="size-8 [&>:nth-child(1)]:stroke-primary [&>:nth-child(2)]:stroke-secondary"
+				/>
+				<span class="hidden font-semibold md:inline-block">{site.name}</span>
 			</a>
 		</div>
 

ui/src/lib/components/icons/index.ts

@@ -56,8 +56,10 @@ import FileVideo from './file-video.svelte';
 import FolderSearch from './folder-search.svelte';
 import Folder from './folder.svelte';
 import Github from './github.svelte';
+import Logo from './logo.svelte';
 import Maximize from './maximize.svelte';
 import Minimize from './minimize.svelte';
+import Rocket from './rocket.svelte';
 import Settings from './settings.svelte';
 import SquareCheck from './square-check.svelte';
 import SquareX from './square-x.svelte';
@@ -102,6 +104,7 @@ export const Icons = {
 	Info,
 	List,
 	Loader: CircleNotch,
+	Logo,
 	Maximize,
 	Minimize,
 	Minus,
@@ -112,6 +115,7 @@ export const Icons = {
 	Play,
 	PlayCircle,
 	Refresh: ArrowsClockwise,
+	Rocket,
 	Scan: FolderSearch,
 	Scroll,
 	Search: MagnifyingGlass,

ui/src/lib/components/icons/logo.svelte

@@ -0,0 +1,14 @@
+<svg
+	width="320"
+	height="270"
+	viewBox="0 0 320 270"
+	version="1.1"
+	id="svg1"
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+>
+	<path
+		class="fill-primary stroke-0"
+		d="m 6.123048,8.351568 v 16.386714 17.80664 1.9375 19.74219 12.51562 7.22657 19.742178 7.22657 12.51562 19.74219 1.9375 17.80664 16.38672 3.35351 l 17.09765,9.8711 17.097665,9.87109 17.09766,9.87109 v 0.002 l 2.12695,1.22656 14.9707,8.64453 17.09571,9.8711 17.097647,9.86914 10.0625,5.81054 7.03516,4.06055 17.09765,9.87305 v -13.9336 -5.81054 -19.74219 -8.64258 -11.09961 -19.74219 -3.35351 -16.38867 -17.80469 -1.9375 -19.74219 -12.51562 -7.22657 -19.742178 -7.22657 -12.51562 -19.74219 -1.9375 -17.80469 -16.388664 h -5.80859 -22.57617 -5.81055 -34.193357 -5.80859 -22.57617 -5.81055 z m 170.974612,0 v 16.388664 17.80469 1.9375 19.74219 12.51562 7.22657 19.742178 7.22657 12.51562 19.74219 1.9375 17.80469 16.38867 3.35351 19.74219 11.09961 8.64258 19.74219 5.81054 13.9336 l 17.09765,-9.87305 7.03516,-4.06055 10.0625,-5.81054 17.09765,-9.86914 17.09571,-9.8711 14.9707,-8.64453 2.12695,-1.22852 17.09766,-9.86914 v -0.002 l 17.09766,-9.87109 17.09765,-9.8711 v -3.35351 -16.38672 -17.80664 -1.9375 -8.37648 h -12.51757 -9.16211 -12.51563 v 8.37648 1.9375 17.80469 l -17.09766,9.87109 -11.28906,6.51758 -5.80859,3.35351 -17.09766,9.8711 -17.0957,9.87109 v -19.74023 -3.35547 -16.38867 -17.80469 -1.9375 -19.74219 -12.51562 -7.22657 -19.742178 -7.22657 -12.51562 -19.74219 -1.9375 h 3.35351 27.48438 3.35547 34.19531 v 1.9375 19.74219 12.51562 h 12.51563 9.16211 12.51757 v -12.51562 -19.74219 -1.9375 -17.80664 -16.386714 h -34.19531 -5.81055 -22.57617 -5.80859 -34.19336 -5.81055 -22.57617 z M 40.318363,42.544922 h 34.19531 3.35547 27.484377 3.35351 v 1.9375 19.74219 12.51562 7.22657 19.742178 7.22657 12.51562 19.74219 1.9375 17.80469 16.38867 3.35547 19.74023 l -17.095697,-9.87109 -17.09766,-9.8711 -5.80859,-3.35351 -11.28906,-6.51758 -17.09766,-9.87109 v -17.80469 -1.9375 -19.74219 -12.51562 -7.22657 -19.742178 -7.22657 -12.51562 -19.74219 z"
+	/>
+</svg>