Naaturel/unluckiest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Laurent
2024-10-12 00:11:23 +02:00
parent 7f4070fda8
commit 9e07f00899
6 changed files with 142 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@@ -33,5 +33,8 @@
"vite": "^5.0.3", "vite": "^5.0.3",
"vitest": "^2.0.0" "vitest": "^2.0.0"
}, },
"type": "module" "type": "module",
"dependencies": {
"jquery": "^3.7.1"
}
} }

16
src/app.css
View File

@@ -22,17 +22,18 @@ h1
html html
{ {
/*background: linear-gradient(45deg, #102eff, #d2379b);*/
background: linear-gradient(45deg, #b9b9c9, #d2379b); background: linear-gradient(45deg, #b9b9c9, #d2379b);
height: 100vh; height: 100vh;
} }
body body
{ {
display: flex; display: flex;
flex-direction: row;
height: 100vh; height: 100vh;
align-items: center; align-items: center;
flex-direction: column;
} }
.container .container
@@ -57,13 +58,14 @@ hr {
nav nav
{ {
display: flex; display: flex;
flex-direction: column;
align-self: start; align-self: start;
justify-content: space-around; justify-content: center;
align-items: center; align-items: center;
gap: 3vh;
height: fit-content;
height: 5vh; margin-top: 10vh;
margin-top: 2vh;
margin-bottom: 2vh; margin-bottom: 2vh;
} }
@@ -122,4 +124,4 @@ footer
footer a { footer a {
margin-right: 2vh; margin-right: 2vh;
} }

6
src/app.html
View File

@@ -2,9 +2,13 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>Unluckiest</title> <title>Unluckiest</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <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% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">

4
src/lib/components/NavLink.svelte
View File

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

35
src/routes/+layout.svelte
View File

@@ -1,20 +1,41 @@
<script> <script>
import '../app.css'; import '../app.css';
import github_mark from '$lib/assets/github-mark-white.svg'; import github_mark from '$lib/assets/github-mark-white.svg';
import twitter_mark from '$lib/assets/twitter-mark-white.svg'; import twitter_mark from '$lib/assets/twitter-mark-white.svg';
import NavLink from "$lib/components/NavLink.svelte"; 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> </script>
<nav> <div class="menu-collapsed">
<NavLink --background-color="#f1ecec" link="/">Leaderboard</NavLink> <div class="burger"></div>
<NavLink --background-color="#f1ecec" link="/play">Play</NavLink> <nav>
<NavLink --background-color="#f1ecec" link="/about">About</NavLink>
</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"> <div class="container">
<slot></slot> <div class="row">
<slot></slot>
</div>
</div> </div>
<footer> <footer>

94
static/style/menu.css Normal file
View File

@@ -0,0 +1,94 @@
.b-a, .burger:after, .burger:before, .burger {
transition: all 0.25s;
content: "";
position: absolute;
left: 0;
height: 6px;
width: 30px;
border-radius: 15px;
background-color: rgba(255, 255, 255, 0.95);
}
.menu-collapsed {
transition: all 0.25s;
position: fixed;
top: 10px;
left: 9px;
height: 36px;
width: 36px;
z-index: 1;
cursor: pointer;
}
.menu-collapsed a {
transition: all 0s;
position: fixed;
left: -9000px;
}
.burger {
position: fixed;
left: 12px;
top: 24px;
}
.burger:before {
top: -8px;
}
.burger:after {
top: 8px;
}
.b-a-expanded, .menu-expanded .burger:after, .menu-expanded .burger:before {
transition: all 0.25s;
top: 0px;
}
.menu-expanded {
transition: all 0.25s;
text-align: center;
line-height: 200px;
height: 100%;
width: 100%;
border-radius: 0px;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.85);
}
.menu-expanded a {
transition: all 0s;
position: relative;
left: 0;
z-index: 2;
}
.menu-expanded a {
transition: all 0.15s;
text-decoration: none;
font-size: 2em;
padding: 5px;
color: #fff;
display: block;
}
.menu-expanded a:hover {
background-color: rgba(255, 255, 255, 0.8);
transition: all 0.15s;
letter-spacing: 2px;
color: #333;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.menu-expanded .burger {
background-color: transparent;
transition: all 0.25s;
}
.menu-expanded .burger:before {
transform: rotate(45deg);
}
.menu-expanded .burger:after {
transform: rotate(-45deg);
}