Rework menu and integrate splash screen
This commit is contained in:
Laurent
@@ -1,2 +1,2 @@
|
||||
VITE_CLIENT_API_URL=http://127.0.0.1:5000/api
|
||||
VITE_SERVER_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
|
||||
2
front/.gitignore
vendored
2
front/.gitignore
vendored
@@ -132,3 +132,5 @@ dist
|
||||
/.svelte-kit/
|
||||
/.svelte-kit/
|
||||
/.svelte-kit/
|
||||
/.idea/
|
||||
/.idea/
|
||||
|
||||
9
front/.idea/unluckiest.iml
generated
9
front/.idea/unluckiest.iml
generated
@@ -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>
|
||||
@@ -18,10 +18,10 @@ export const options = {
|
||||
root,
|
||||
service_worker: false,
|
||||
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"
|
||||
},
|
||||
version_hash: "3iwm3b"
|
||||
version_hash: "1y8hue"
|
||||
};
|
||||
|
||||
export async function get_hooks() {
|
||||
|
||||
1
front/src/app.d.ts
vendored
1
front/src/app.d.ts
vendored
@@ -1,5 +1,6 @@
|
||||
// See https://kit.svelte.dev/docs/types#app
|
||||
// for information about these interfaces
|
||||
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
|
||||
@@ -16,13 +16,19 @@
|
||||
<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/menu.css" />
|
||||
<link rel="stylesheet" href="%sveltekit.assets%/style/menu2.css" />
|
||||
|
||||
<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%
|
||||
</head>
|
||||
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1
front/src/lib/assets/about.svg
Normal file
1
front/src/lib/assets/about.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 455 B |
1
front/src/lib/assets/dice.svg
Normal file
1
front/src/lib/assets/dice.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
1
front/src/lib/assets/leaderboard.svg
Normal file
1
front/src/lib/assets/leaderboard.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 849 B |
@@ -12,7 +12,7 @@
|
||||
|
||||
{#each scores as score, i}
|
||||
<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>
|
||||
{/each}
|
||||
|
||||
@@ -37,27 +37,34 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
li
|
||||
.item
|
||||
{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 1.25vh;
|
||||
margin: 1.5vh;
|
||||
border: 2px solid #A1674A;
|
||||
background-color: #fcdcab;
|
||||
border: 3px solid #4b0611;
|
||||
border-radius: 10px;
|
||||
background-color: #f1ecec;
|
||||
box-shadow: 0 0 10px #343232;
|
||||
box-shadow: 5px 5px #4b0611;
|
||||
text-align: left;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
li:hover
|
||||
div.item
|
||||
{
|
||||
width: 55vw;
|
||||
}
|
||||
|
||||
.item:hover
|
||||
{
|
||||
background-color: #dd3328;
|
||||
transform: scale(1.075);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
.name, .score
|
||||
{
|
||||
color: black;
|
||||
color: #4b0611;
|
||||
margin-left: 3vh;
|
||||
}
|
||||
|
||||
|
||||
47
front/src/lib/components/SplashScreen.svelte
Normal file
47
front/src/lib/components/SplashScreen.svelte
Normal 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>
|
||||
@@ -1,33 +1,57 @@
|
||||
<script>
|
||||
|
||||
import github_mark from '$lib/assets/github-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 SplashScreen from "$lib/components/SplashScreen.svelte";
|
||||
|
||||
onMount(async () => {
|
||||
const jQuery = await import('jquery');
|
||||
const $ = jQuery.default;
|
||||
|
||||
window.$ = $;
|
||||
window.jQuery = $;
|
||||
|
||||
window.$(".menu-collapsed").click(function () {
|
||||
/*window.$(".menu-collapsed").click(function () {
|
||||
window.$(this).toggleClass("menu-expanded");
|
||||
});
|
||||
});*/
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<div class="menu-collapsed">
|
||||
<!--<SplashScreen/>-->
|
||||
|
||||
<div class="menu">
|
||||
|
||||
<div class="burger"></div>
|
||||
|
||||
<nav>
|
||||
<a href="/">
|
||||
<img src={leaderboard}
|
||||
height="30"
|
||||
width="30"
|
||||
alt="leaderboard"
|
||||
>
|
||||
<div>Leaderboard</div>
|
||||
</a>
|
||||
|
||||
<a href="/">Leaderboard</a>
|
||||
<a href="/play">Play</a>
|
||||
<a href="/about">About</a>
|
||||
<a href="/play">
|
||||
<img src={dice}
|
||||
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>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
@@ -35,7 +59,13 @@
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<a href="https://github.com/naaturel">
|
||||
|
||||
<img src="{logo}"
|
||||
height="175px"
|
||||
width="auto"
|
||||
alt="Logo">
|
||||
|
||||
<!--<a href="https://github.com/naaturel">
|
||||
<img
|
||||
src={github_mark}
|
||||
height="30"
|
||||
@@ -49,5 +79,5 @@
|
||||
height="30"
|
||||
width="30"
|
||||
alt="Twitter mark"/>
|
||||
</a>
|
||||
</a>-->
|
||||
</footer>
|
||||
@@ -5,6 +5,5 @@ export const load = async ( {fetch} ) => {
|
||||
|
||||
const res = await fetch(`${api_url}/leaderboard`)
|
||||
const leaderboard = await res.json()
|
||||
|
||||
return { leaderboard };
|
||||
}
|
||||
@@ -7,9 +7,21 @@
|
||||
|
||||
onMount(async () => {
|
||||
scoreStore.load(data.leaderboard)
|
||||
} )
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<h1>Phrase d'accroche</h1>
|
||||
<LeaderBoard bind:scores={$scoreStore}></LeaderBoard>
|
||||
|
||||
<style>
|
||||
|
||||
h1
|
||||
{
|
||||
color: #4b0611;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<script>
|
||||
|
||||
import {onMount} from "svelte";
|
||||
import {scoreStore} from "$lib/stores/scoreStore.ts";
|
||||
import bomb from '$lib/assets/bomb.svg';
|
||||
|
||||
let scores;
|
||||
|
||||
@@ -9,14 +9,6 @@
|
||||
let range = 100;
|
||||
let result = 0;
|
||||
|
||||
onMount(async () => {
|
||||
const jQuery = await import('jquery');
|
||||
const $ = jQuery.default;
|
||||
|
||||
window.$ = $;
|
||||
window.jQuery = $;
|
||||
});
|
||||
|
||||
async function roll() {
|
||||
|
||||
toggleLoading();
|
||||
@@ -47,8 +39,10 @@
|
||||
</div>
|
||||
|
||||
<div class="player">
|
||||
<input class="name" placeholder="Your name" bind:value={playerName}/>
|
||||
<button on:click={roll}>Let's roll !</button>
|
||||
<input class="name" placeholder="Nom de la victime..." bind:value={playerName}/>
|
||||
|
||||
<img class="roll" src={bomb} on:click={roll} alt="Bomb"/>
|
||||
|
||||
<div class="result"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -76,11 +70,16 @@
|
||||
|
||||
.name
|
||||
{
|
||||
width: 17vw;
|
||||
height: 6vh;
|
||||
border: 2px solid #A1674A;
|
||||
width: 22vmax;
|
||||
height: 5vh;
|
||||
background-color: #fcdcab;
|
||||
border: 3px solid #4b0611;
|
||||
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
|
||||
@@ -96,19 +95,7 @@
|
||||
height: 25vh;
|
||||
}
|
||||
|
||||
button
|
||||
{
|
||||
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{
|
||||
.name:hover, .roll:hover{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,13 @@
|
||||
:root
|
||||
{
|
||||
--font-size : 1.25vmax;
|
||||
@media screen and (min-width: 601px) {
|
||||
:root {
|
||||
--font-size : 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
:root {
|
||||
--font-size : 15px;
|
||||
}
|
||||
}
|
||||
|
||||
*
|
||||
@@ -13,7 +20,7 @@
|
||||
|
||||
h1
|
||||
{
|
||||
font-size: calc(var(--font-size, 1vw) * 2.5);
|
||||
font-size: calc(var(--font-size, 1vw) * 2.15);
|
||||
}
|
||||
|
||||
html
|
||||
@@ -58,7 +65,7 @@ hr {
|
||||
|
||||
}
|
||||
|
||||
nav
|
||||
/*nav
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -81,7 +88,7 @@ nav a
|
||||
.nav_delimiter
|
||||
{
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
}*/
|
||||
|
||||
form
|
||||
{
|
||||
@@ -122,7 +129,7 @@ footer
|
||||
margin-bottom: 0.25vh;
|
||||
|
||||
width: 100vw;
|
||||
height: 5vh;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
footer a {
|
||||
|
||||
64
front/static/style/menu2.css
Normal file
64
front/static/style/menu2.css
Normal 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user