[Client] Improve homepage code
This commit is contained in:
AudricV
parent
5966483e85
commit
c6687748a2
@ -1,13 +1,18 @@
|
|||||||
/* Common properties */
|
/* Common properties */
|
||||||
:root {
|
:root {
|
||||||
--game-begin-margin: 2em;
|
--game-begin-margin: 2em;
|
||||||
--header-actions-height: 3em;
|
--header-actions-side: 4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
input, .action_button, .game_mode_item_title {
|
input, .action_button, .game_mode_item_title {
|
||||||
font-family: "Titan One", sans-serif;
|
font-family: "Titan One", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.back_button, .theme_switcher_btn {
|
||||||
|
height: var(--header-actions-side);
|
||||||
|
width: var(--header-actions-side);
|
||||||
|
}
|
||||||
|
|
||||||
.game_begin, .game_mode_item, .game_mode_item_input_text_single_line, .game_mode_items, .game_mode_selection {
|
.game_begin, .game_mode_item, .game_mode_item_input_text_single_line, .game_mode_items, .game_mode_selection {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -61,7 +66,7 @@ input::placeholder {
|
|||||||
*/
|
*/
|
||||||
height: calc(100vh - var(--body-margin) * 2
|
height: calc(100vh - var(--body-margin) * 2
|
||||||
- var(--game-begin-margin) * 2
|
- var(--game-begin-margin) * 2
|
||||||
- var(--header-actions-height)
|
- var(--header-actions-side)
|
||||||
- var(--footer-links-height));
|
- var(--footer-links-height));
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: var(--game-begin-margin);
|
margin: var(--game-begin-margin);
|
||||||
@ -80,10 +85,16 @@ input::placeholder {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header_action {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
.header_actions {
|
.header_actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: var(--header-actions-height);
|
height: var(--header-actions-side);
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action_button {
|
.action_button {
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
<title>Truth Inquiry</title>
|
<title>Truth Inquiry</title>
|
||||||
<link rel="stylesheet" href="/static/css/game_ui.css">
|
<link rel="stylesheet" href="/static/css/game_ui.css">
|
||||||
<link rel="stylesheet" href="/static/css/game_ui_start.css">
|
<link rel="stylesheet" href="/static/css/game_ui_start.css">
|
||||||
@ -13,26 +14,27 @@
|
|||||||
<link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
|
<link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
|
||||||
<meta name="color-scheme" content="dark light">
|
<meta name="color-scheme" content="dark light">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta charset="UTF-8">
|
|
||||||
</head>
|
</head>
|
||||||
<body class="game_app">
|
<body class="game_app">
|
||||||
<div class="alert_dialog_background"></div>
|
<div class="alert_dialog_background"></div>
|
||||||
<div class="game_start">
|
<section class="game_start">
|
||||||
<div class="header_actions">
|
<menu class="header_actions">
|
||||||
<button class="theme_switcher" aria-label="Changer de thème">
|
<li class="header_action">
|
||||||
<svg class="theme_switcher_btn" xmlns="http://www.w3.org/2000/svg" height="48" width="48">
|
<button class="theme_switcher" aria-label="Changer de thème">
|
||||||
<path d="M24 34q-4.15 0-7.075-2.925T14 24q0-4.15 2.925-7.075T24 14q4.15 0 7.075 2.925T34 24q0 4.15-2.925 7.075T24 34ZM2 25.5v-3h8v3Zm36 0v-3h8v3ZM22.5 10V2h3v8Zm0 36v-8h3v8Zm-9.45-30.85L8.1 10.2l2.1-2.1 4.95 4.95ZM37.8 39.9l-4.95-4.95 2.1-2.1 4.95 4.95Zm-2.85-24.75-2.1-2.1L37.8 8.1l2.1 2.1ZM10.2 39.9l-2.1-2.1 4.95-4.95 2.1 2.1Z"/>
|
<svg class="theme_switcher_btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
|
||||||
</svg>
|
<path d="M24 34q-4.15 0-7.075-2.925T14 24q0-4.15 2.925-7.075T24 14q4.15 0 7.075 2.925T34 24q0 4.15-2.925 7.075T24 34ZM2 25.5v-3h8v3Zm36 0v-3h8v3ZM22.5 10V2h3v8Zm0 36v-8h3v8Zm-9.45-30.85L8.1 10.2l2.1-2.1 4.95 4.95ZM37.8 39.9l-4.95-4.95 2.1-2.1 4.95 4.95Zm-2.85-24.75-2.1-2.1L37.8 8.1l2.1 2.1ZM10.2 39.9l-2.1-2.1 4.95-4.95 2.1 2.1Z"/>
|
||||||
</button>
|
</svg>
|
||||||
</div>
|
</button>
|
||||||
|
</li>
|
||||||
|
</menu>
|
||||||
<div class="game_begin">
|
<div class="game_begin">
|
||||||
<h1 class="game_title">Truth Inquiry</h1>
|
<h1 class="game_title">Truth Inquiry</h1>
|
||||||
<button class="action_button" id="play_button">Jouer</button>
|
<button class="action_button" id="play_button">Jouer</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
<div class="game_mode_selection hidden">
|
<section class="game_mode_selection hidden">
|
||||||
<button id="back_button" aria-label="Retourner à la page précédente">
|
<button id="back_button" aria-label="Retourner à la page précédente">
|
||||||
<svg class="back_btn" xmlns="http://www.w3.org/2000/svg" height="48" width="48">
|
<svg class="back_btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
|
||||||
<path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z"/>
|
<path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z"/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
@ -56,7 +58,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
<div class="unsupported_browser">
|
<div class="unsupported_browser">
|
||||||
<div id="unsupported_browser_dialog" class="alert_dialog">
|
<div id="unsupported_browser_dialog" class="alert_dialog">
|
||||||
<h3 class="alert_dialog_title">Navigateur non supporté</h3>
|
<h3 class="alert_dialog_title">Navigateur non supporté</h3>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user