Merge pull request #2 from TheDokT0r/Improved-navbar

Improved NavBar Icons

.prettierrc

@@ -2,6 +2,13 @@
 	"useTabs": true,
 	"tabWidth": 4,
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
 }

package.json

@@ -15,13 +15,21 @@
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"autoprefixer": "^10.4.16",
+		"flowbite": "^2.3.0",
+		"flowbite-svelte": "^0.44.24",
+		"flowbite-svelte-icons": "1",
 		"nintendo-switch-eshop": "^7.1.3",
+		"postcss": "^8.4.32",
+		"postcss-load-config": "^5.0.2",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
+		"prettier-plugin-tailwindcss": "^0.5.9",
 		"sharp": "^0.33.2",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
 		"svgo": "^3.2.0",
+		"tailwindcss": "^3.3.6",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.3",

postcss.config.cjs

@@ -0,0 +1,13 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+
+const config = {
+	plugins: [
+		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+		tailwindcss(),
+		//But others, like autoprefixer, need to run after,
+		autoprefixer,
+	],
+};
+
+module.exports = config;

src/app.pcss

@@ -0,0 +1,4 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/routes/+layout.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
+	import "../app.pcss";
 	import { goto } from "$app/navigation";
 	import BackgroundProvider from "$components/BackgroundProvider.svelte";
 	import LogoWithTextHorizontal from "$components/LogoWithTextHorizontal.svelte";
 	import { page } from "$app/stores";
 	import "$lib/css/index.css";
-	import { onMount } from "svelte";
+	import { Button } from "flowbite-svelte";
+	import {DiscordSolid, DownloadOutline} from "flowbite-svelte-icons";
 
 	const excludedRoutesNav = ["/mockup/boot", "/mockup/w11"];
 	const excludedRoutesBg = ["/mockup", "/mockup/w11"];
@@ -18,21 +20,29 @@
 			<LogoWithTextHorizontal on:click={() => goto("/")} size={50} />
 		</div>
 		<div class="right">
-			<a href="https://gitlab.com/suyu-emu/suyu/-/releases" target="_blank">Download</a>
-			<a href="https://discord.gg/suyu" target="_blank">Discord</a>
+			<a href="https://gitlab.com/suyu-emu/suyu/-/releases" target="_blank">
+				<Button class='!p-2' pill={true}>
+					<DownloadOutline />
+				</Button>
+			</a>
+			<a href="https://discord.gg/suyu" target="_blank">
+				<Button class='!p-2' pill={true}>
+					<DiscordSolid />
+				</Button>
+			</a>
 		</div>
 	</div>
 {/if}
 
 {#if !isBgExcluded}
-	<BackgroundProvider size={80} gap={12} speed={1} />
+	<BackgroundProvider size={80} gap={12} speed={1}></BackgroundProvider>
 	<div class="below">
 		<div class="page-contents">
 			<slot />
 		</div>
 		<div class="bullshit-flex-container">
-			<div class="bullshit-flex-placeholder" />
-			<div class="bg-below-gradient" />
+			<div class="bullshit-flex-placeholder"></div>
+			<div class="bg-below-gradient"></div>
 		</div>
 	</div>
 {:else}
@@ -97,6 +107,6 @@
 	.right {
 		display: flex;
 		align-items: center;
-		gap: 32px;
+		gap: 1rem;
 	}
 </style>

src/routes/+page.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import Logo from "$components/Logo.svelte";
-	import { onMount, tick } from "svelte";
+	import { onMount } from "svelte";
 	import strings from "$lib/data/strings.json";
-	import Card from "$components/Card.svelte";
 	import odyssey from "$assets/cards/Super-Mario-Odyssey.jpg";
 	import ScrollIcon from "$components/ScrollIcon.svelte";
 	import totk from "$assets/cards/totk.webp";
@@ -145,9 +144,8 @@
 	}
 
 	.hero-header {
-		font-size: 110px;
-		margin-top: -48px;
-		margin-bottom: -24px;
+		margin-top: -2rem;
+		margin-bottom: 2rempx;
 	}
 
 	.hero-text {
@@ -181,7 +179,7 @@
 
 	.below {
 		width: 100%;
-		min-height: calc(100vh - 80px);
+		min-height: calc(106vh - 80px);
 		height: fit-content;
 		padding-bottom: 80px;
 		position: relative;

svelte.config.js

@@ -5,7 +5,7 @@ import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: [vitePreprocess({})],
 
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.

tailwind.config.cjs

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config}*/
+const config = {
+	content: [
+	"./src/**/*.{html,js,svelte,ts}",
+	 "./node_modules/flowbite-svelte-icons/**/*.{html,js,svelte,ts}",],
+
+	theme: {
+		extend: {},
+	},
+
+	plugins: [],
+};
+
+module.exports = config;