Merge pull request #2 from TheDokT0r/Improved-navbar

Improved NavBar Icons
This commit is contained in:
nullptr 2024-03-08 12:04:52 +00:00 committed by GitHub
commit 5813e6f09c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 2825 additions and 16 deletions

4
src/app.pcss Normal file
View file

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

View file

@ -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>

View file

@ -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;