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",
"vitest": "^2.0.0"
},
"type": "module"
"type": "module",
"dependencies": {
"jquery": "^3.7.1"
}
}

14
src/app.css
View File

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

6
src/app.html
View File

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

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

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

27
src/routes/+layout.svelte
View File

@@ -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>
<div class="menu-collapsed">
<div class="burger"></div>
<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>
<hr/>
</nav>
</div>
<div class="container">
<div class="row">
<slot></slot>
</div>
</div>
<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);
}