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

Rework menu and integrate splash screen

Browse Source
This commit is contained in:
Laurent
2024-10-28 13:54:22 +01:00
parent d6abdb252d
commit d4af25ee5d
17 changed files with 230 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
front/.env.development
View File

@@ -1,2 +1,2 @@
VITE_CLIENT_API_URL=http://127.0.0.1:5000/api VITE_CLIENT_API_URL=http://127.0.0.1:5000
VITE_SERVER_API_URL=http://127.0.0.1:5000/api VITE_SERVER_API_URL=http://127.0.0.1:5000

2
front/.gitignore vendored
View File

@@ -132,3 +132,5 @@ dist
/.svelte-kit/ /.svelte-kit/
/.svelte-kit/ /.svelte-kit/
/.svelte-kit/ /.svelte-kit/
/.idea/
/.idea/

9
front/.idea/unluckiest.iml generated
View File

@@ -1,9 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

4
front/.svelte-kit/generated/server/internal.js
View File

@@ -18,10 +18,10 @@ export const options = {
root, root,
service_worker: false, service_worker: false,
templates: { templates: {
app: ({ head, body, assets, nonce, env }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Unluckiest</title>\n\n\t\t<link rel=\"stylesheet\"\n\t\t\t href=\"https://fonts.googleapis.com/css?family=Afacad+Flux\">\n\t\t<style>\n\t\t\tbody {\n\t\t\t\tfont-family: 'Afacad Flux', serif;\n\t\t\t\tfont-size: 48px;\n\t\t\t}\n\t\t</style>\n\n\t\t<meta charset=\"utf-8\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n\n\t\t<link rel=\"stylesheet\" href=\"" + assets + "/style/app.css\" />\n\t\t<link rel=\"stylesheet\" href=\"" + assets + "/style/menu.css\" />\n\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n\n\t\t" + head + "\n\t</head>\n\t<body data-sveltekit-preload-data=\"hover\">\n\t\t<div style=\"display: contents\">" + body + "</div>\n\t</body>\n</html>\n", app: ({ head, body, assets, nonce, env }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Unluckiest</title>\n\n\t\t<link rel=\"stylesheet\"\n\t\t\t href=\"https://fonts.googleapis.com/css?family=Afacad+Flux\">\n\t\t<style>\n\t\t\tbody {\n\t\t\t\tfont-family: 'Afacad Flux', serif;\n\t\t\t\tfont-size: 48px;\n\t\t\t}\n\t\t</style>\n\n\t\t<meta charset=\"utf-8\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n\n\t\t<link rel=\"stylesheet\" href=\"" + assets + "/style/app.css\" />\n\t\t<link rel=\"stylesheet\" href=\"" + assets + "/style/menu2.css\" />\n\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n\n\t\t<script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n\t\t<script src=\"https://code.jquery.com/ui/1.12.1/jquery-ui.min.js\"></script>\n\n\t\t" + head + "\n\t</head>\n\n\t<body data-sveltekit-preload-data=\"hover\">\n\n\t\t<div style=\"display: contents\">" + body + "</div>\n\n\t</body>\n</html>\n",
error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n" error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
}, },
version_hash: "3iwm3b" version_hash: "1y8hue"
}; };
export async function get_hooks() { export async function get_hooks() {

1
front/src/app.d.ts vendored
View File

@@ -1,5 +1,6 @@
// See https://kit.svelte.dev/docs/types#app // See https://kit.svelte.dev/docs/types#app
// for information about these interfaces // for information about these interfaces
declare global { declare global {
namespace App { namespace App {
// interface Error {} // interface Error {}

8
front/src/app.html
View File

@@ -16,13 +16,19 @@
<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/app.css" /> <link rel="stylesheet" href="%sveltekit.assets%/style/app.css" />
<link rel="stylesheet" href="%sveltekit.assets%/style/menu.css" /> <link rel="stylesheet" href="%sveltekit.assets%/style/menu2.css" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

1
front/src/lib/assets/about.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM0 224c0-17.7 14.3-32 32-32l64 0c17.7 0 32 14.3 32 32l0 224 32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 512c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0 0-192-32 0c-17.7 0-32-14.3-32-32z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 455 B

1
front/src/lib/assets/dice.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48.7 125.8l53.2 31.9c7.8 4.7 17.8 2 22.2-5.9L201.6 12.1c3-5.4-.9-12.1-7.1-12.1c-1.6 0-3.2 .5-4.6 1.4L47.9 98.8c-9.6 6.6-9.2 20.9 .8 26.9zM16 171.7l0 123.5c0 8 10.4 11 14.7 4.4l60-92c5-7.6 2.6-17.8-5.2-22.5L40.2 158C29.6 151.6 16 159.3 16 171.7zM310.4 12.1l77.6 139.6c4.4 7.9 14.5 10.6 22.2 5.9l53.2-31.9c10-6 10.4-20.3 .8-26.9L322.1 1.4c-1.4-.9-3-1.4-4.6-1.4c-6.2 0-10.1 6.7-7.1 12.1zM496 171.7c0-12.4-13.6-20.1-24.2-13.7l-45.3 27.2c-7.8 4.7-10.1 14.9-5.2 22.5l60 92c4.3 6.7 14.7 3.6 14.7-4.4l0-123.5zm-49.3 246L286.1 436.6c-8.1 .9-14.1 7.8-14.1 15.9l0 52.8c0 3.7 3 6.8 6.8 6.8c.8 0 1.6-.1 2.4-.4l172.7-64c6.1-2.2 10.1-8 10.1-14.5c0-9.3-8.1-16.5-17.3-15.4zM233.2 512c3.7 0 6.8-3 6.8-6.8l0-52.6c0-8.1-6.1-14.9-14.1-15.9l-160.6-19c-9.2-1.1-17.3 6.1-17.3 15.4c0 6.5 4 12.3 10.1 14.5l172.7 64c.8 .3 1.6 .4 2.4 .4zM41.7 382.9l170.9 20.2c7.8 .9 13.4-7.5 9.5-14.3l-85.7-150c-5.9-10.4-20.7-10.8-27.3-.8L30.2 358.2c-6.5 9.9-.3 23.3 11.5 24.7zm439.6-24.8L402.9 238.1c-6.5-10-21.4-9.6-27.3 .8L290.2 388.5c-3.9 6.8 1.6 15.2 9.5 14.3l170.1-20c11.8-1.4 18-14.7 11.5-24.6zm-216.9 11l78.4-137.2c6.1-10.7-1.6-23.9-13.9-23.9l-145.7 0c-12.3 0-20 13.3-13.9 23.9l78.4 137.2c3.7 6.4 13 6.4 16.7 0zM174.4 176l163.2 0c12.2 0 19.9-13.1 14-23.8l-80-144c-2.8-5.1-8.2-8.2-14-8.2l-3.2 0c-5.8 0-11.2 3.2-14 8.2l-80 144c-5.9 10.7 1.8 23.8 14 23.8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
front/src/lib/assets/leaderboard.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M40 48C26.7 48 16 58.7 16 72l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24L40 48zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM16 232l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 849 B

23
front/src/lib/components/LeaderBoard.svelte
View File

@@ -12,7 +12,7 @@
{#each scores as score, i} {#each scores as score, i}
<li class="item"> <li class="item">
<div class="name"><img src="" alt=""/> {score.owner} </div><div class="score"> {score.value} pts.</div> <div class="name"> {score.owner} </div><div class="score"> {score.value} pts.</div>
</li> </li>
{/each} {/each}
@@ -37,27 +37,34 @@
display: none; display: none;
} }
li .item
{ {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
padding: 1.25vh; padding: 1.25vh;
margin: 1.5vh; margin: 1.5vh;
border: 2px solid #A1674A; background-color: #fcdcab;
border: 3px solid #4b0611;
border-radius: 10px; border-radius: 10px;
background-color: #f1ecec; box-shadow: 5px 5px #4b0611;
box-shadow: 0 0 10px #343232; text-align: left;
outline: none;
} }
li:hover div.item
{ {
width: 55vw;
}
.item:hover
{
background-color: #dd3328;
transform: scale(1.075); transform: scale(1.075);
background-color: #F5F5F5;
} }
.name, .score .name, .score
{ {
color: black; color: #4b0611;
margin-left: 3vh; margin-left: 3vh;
} }

47
front/src/lib/components/SplashScreen.svelte Normal file
View File

@@ -0,0 +1,47 @@
<script>
import logo from '$lib/assets/logo.png'
</script>
<div class="splash" >
<img class="logo" src={logo} alt="De Charybde en Scylla">
</div>
<style>
.splash
{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
z-index: 2;
width: 100vw;
height: 100vh;
background-color: #4b0611;
animation: fadeout 2.5s forwards;
}
.logo
{
width: auto;
height: 25%;
}
@keyframes fadeout {
0%, 45% { opacity: 1; }
100% {
opacity: 0;
display: none;
}
}
@keyframes slide {
0% { translate: 0; }
100% {
translate: 100%;
display: none;
}
}
</style>

60
front/src/routes/+layout.svelte
View File

@@ -1,33 +1,57 @@
<script> <script>
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 leaderboard from '$lib/assets/leaderboard.svg';
import dice from '$lib/assets/dice.svg';
import about from '$lib/assets/about.svg';
import logo from '$lib/assets/logo2.png'
import {onMount} from "svelte"; import {onMount} from "svelte";
import SplashScreen from "$lib/components/SplashScreen.svelte";
onMount(async () => { onMount(async () => {
const jQuery = await import('jquery'); /*window.$(".menu-collapsed").click(function () {
const $ = jQuery.default;
window.$ = $;
window.jQuery = $;
window.$(".menu-collapsed").click(function () {
window.$(this).toggleClass("menu-expanded"); window.$(this).toggleClass("menu-expanded");
}); });*/
}); });
</script> </script>
<div class="menu-collapsed"> <!--<SplashScreen/>-->
<div class="menu">
<div class="burger"></div> <div class="burger"></div>
<nav> <nav>
<a href="/">
<img src={leaderboard}
height="30"
width="30"
alt="leaderboard"
>
<div>Leaderboard</div>
</a>
<a href="/">Leaderboard</a> <a href="/play">
<a href="/play">Play</a> <img src={dice}
<a href="/about">About</a> height="30"
width="30"
alt="dice"
>
<div>Play</div>
</a>
<a href="/about">
<img src={about}
height="30"
width="30"
alt="about"
>
<div>About</div>
</a>
</nav> </nav>
</div> </div>
<div class="container"> <div class="container">
@@ -35,7 +59,13 @@
</div> </div>
<footer> <footer>
<a href="https://github.com/naaturel">
<img src="{logo}"
height="175px"
width="auto"
alt="Logo">
<!--<a href="https://github.com/naaturel">
<img <img
src={github_mark} src={github_mark}
height="30" height="30"
@@ -49,5 +79,5 @@
height="30" height="30"
width="30" width="30"
alt="Twitter mark"/> alt="Twitter mark"/>
</a> </a>-->
</footer> </footer>

1
front/src/routes/+page.server.ts
View File

@@ -5,6 +5,5 @@ export const load = async ( {fetch} ) => {
const res = await fetch(`${api_url}/leaderboard`) const res = await fetch(`${api_url}/leaderboard`)
const leaderboard = await res.json() const leaderboard = await res.json()
return { leaderboard }; return { leaderboard };
} }

14
front/src/routes/+page.svelte
View File

@@ -7,9 +7,21 @@
onMount(async () => { onMount(async () => {
scoreStore.load(data.leaderboard) scoreStore.load(data.leaderboard)
} ) })
</script> </script>
<h1>Phrase d'accroche</h1>
<LeaderBoard bind:scores={$scoreStore}></LeaderBoard> <LeaderBoard bind:scores={$scoreStore}></LeaderBoard>
<style>
h1
{
color: #4b0611;
text-decoration: underline;
}
</style>

43
front/src/routes/play/+page.svelte
View File

@@ -1,7 +1,7 @@
<script> <script>
import {onMount} from "svelte";
import {scoreStore} from "$lib/stores/scoreStore.ts"; import {scoreStore} from "$lib/stores/scoreStore.ts";
import bomb from '$lib/assets/bomb.svg';
let scores; let scores;
@@ -9,14 +9,6 @@
let range = 100; let range = 100;
let result = 0; let result = 0;
onMount(async () => {
const jQuery = await import('jquery');
const $ = jQuery.default;
window.$ = $;
window.jQuery = $;
});
async function roll() { async function roll() {
toggleLoading(); toggleLoading();
@@ -47,8 +39,10 @@
</div> </div>
<div class="player"> <div class="player">
<input class="name" placeholder="Your name" bind:value={playerName}/> <input class="name" placeholder="Nom de la victime..." bind:value={playerName}/>
<button on:click={roll}>Let's roll !</button>
<img class="roll" src={bomb} on:click={roll} alt="Bomb"/>
<div class="result"></div> <div class="result"></div>
</div> </div>
</div> </div>
@@ -76,11 +70,16 @@
.name .name
{ {
width: 17vw; width: 22vmax;
height: 6vh; height: 5vh;
border: 2px solid #A1674A; background-color: #fcdcab;
border: 3px solid #4b0611;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 10px #343232; box-shadow: 5px 5px #4b0611;
text-align: left;
padding-left: 30px;
padding-right: 30px;
outline: none;
} }
.circular-loader .circular-loader
@@ -96,19 +95,7 @@
height: 25vh; height: 25vh;
} }
button .name:hover, .roll:hover{
{
background-color: #f1ecec;
color: black;
width: 18vw;
height: 15vh;
border-radius: 10px;
border: 2px solid #A1674A;
box-shadow: 0 0 10px #343232;
}
.name:hover, button:hover{
transform: scale(1.1); transform: scale(1.1);
} }

21
front/static/style/app.css
View File

@@ -1,6 +1,13 @@
:root @media screen and (min-width: 601px) {
{ :root {
--font-size : 1.25vmax; --font-size : 18px;
}
}
@media screen and (max-width: 600px) {
:root {
--font-size : 15px;
}
} }
* *
@@ -13,7 +20,7 @@
h1 h1
{ {
font-size: calc(var(--font-size, 1vw) * 2.5); font-size: calc(var(--font-size, 1vw) * 2.15);
} }
html html
@@ -58,7 +65,7 @@ hr {
} }
nav /*nav
{ {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -81,7 +88,7 @@ nav a
.nav_delimiter .nav_delimiter
{ {
margin-bottom: 5vh; margin-bottom: 5vh;
} }*/
form form
{ {
@@ -122,7 +129,7 @@ footer
margin-bottom: 0.25vh; margin-bottom: 0.25vh;
width: 100vw; width: 100vw;
height: 5vh; height: fit-content;
} }
footer a { footer a {

64
front/static/style/menu2.css Normal file
View File

@@ -0,0 +1,64 @@
.menu {
font-family: 'Roboto', sans-serif;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0;
height: 100vh;
width: 60px;
list-style-type: none;
background: rgb(252, 220, 171, 0.85);
overflow: hidden;
transition: width .3s;
}
.menu:hover {
width: 300px;
}
.menu nav {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
}
.menu nav a {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 15px 30px 0 5px;
border-radius: 5px;
height: fit-content;
width: 250px;
}
.menu nav a {
font-size: .9rem;
text-decoration: none;
margin: 15px 5px 5px 5px;
padding: 5px;
}
.menu nav a div {
color: #4b0611;
}
.menu nav a:hover,
.menu nav:first-child a {
background: #dd3328;
}
@media screen and (max-width: 600px) {
.menu
{
width: 45px
}
.menu a img {
width: 20px;
height: 20px;
}
}