Add some other style legally stolen on https://codepen.io/

2024-10-12 00:11:23 +02:00
parent 7f4070fda8
commit 9e07f00899
6 changed files with 142 additions and 18 deletions
--- a/src/app.css
+++ b/src/app.css
@@ -22,17 +22,18 @@ h1

 html
 {
-    /*background: linear-gradient(45deg, #102eff, #d2379b);*/
    background: linear-gradient(45deg, #b9b9c9, #d2379b);
    height: 100vh;
+
 }

 body
 {
    display: flex;
+    flex-direction: row;
+
    height: 100vh;
    align-items: center;
-    flex-direction: column;
 }

 .container
@@ -57,13 +58,14 @@ hr {
 nav
 {
    display: flex;
+    flex-direction: column;
    align-self: start;
-    justify-content: space-around;
+    justify-content: center;
    align-items: center;
+    gap: 3vh;
+    height: fit-content;

-    height: 5vh;
-
-    margin-top: 2vh;
+    margin-top: 10vh;
    margin-bottom: 2vh;
 }

@@ -122,4 +124,4 @@ footer

 footer a {
    margin-right: 2vh;
-}
+}
--- a/src/app.html
+++ b/src/app.html
@@ -2,9 +2,13 @@
 <html lang="en">
 	<head>
 		<title>Unluckiest</title>
+
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+		<link rel="stylesheet" href="%sveltekit.assets%/style/menu.css" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
--- a/src/lib/components/NavLink.svelte
+++ b/src/lib/components/NavLink.svelte
@@ -12,7 +12,7 @@

    a
    {
-        color: #303633;
+        color: #f1ecec;
        display: flex;
        justify-content: center;
        align-items: center;
@@ -30,7 +30,7 @@
    a:hover
    {
        transform: scale(1.1);
-        color: #f1ecec;
+        color: #303633;
    }


--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,20 +1,41 @@
 <script>
 	import '../app.css';
+
    import github_mark from '$lib/assets/github-mark-white.svg';
    import twitter_mark from '$lib/assets/twitter-mark-white.svg';
+
    import NavLink from "$lib/components/NavLink.svelte";
+    import {onMount} from "svelte";
+
+    onMount(async () => {
+        const jQuery = await import('jquery');
+        const $ = jQuery.default;
+
+        window.$ = $;
+        window.jQuery = $;
+
+        window.$(".menu-collapsed").click(function () {
+            window.$(this).toggleClass("menu-expanded");
+        });
+    });
+
 </script>

-<nav>
-    <NavLink --background-color="#f1ecec" link="/">Leaderboard</NavLink>
-    <NavLink --background-color="#f1ecec" link="/play">Play</NavLink>
-    <NavLink --background-color="#f1ecec" link="/about">About</NavLink>
-</nav>
+<div class="menu-collapsed">
+    <div class="burger"></div>
+    <nav>

-<hr/>
+        <NavLink --background-color="#f1ecec" link="/">Leaderboard</NavLink>
+        <NavLink --background-color="#f1ecec" link="/play">Play</NavLink>
+        <NavLink --background-color="#f1ecec" link="/about">About</NavLink>
+
+    </nav>
+</div>

 <div class="container">
-    <slot></slot>
+    <div class="row">
+        <slot></slot>
+    </div>
 </div>

 <footer>