nbillard/sokoban
1
1
Fork 0
Code Issues Pull requests Releases Wiki Activity

new css with beautiful colors

Browse source
This commit is contained in:
Ronan 2022-12-12 16:57:56 +01:00
parent 02728cb927
commit 45366d632b
2 changed files with 41 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
index.html
View file

@ -25,30 +25,38 @@
<ol id="level-list" class="not-in-win-animation"> <ol id="level-list" class="not-in-win-animation">
</ol> </ol>
</nav> </nav>
<main> <div class="container">
<div class="controls not-in-win-animation"> <aside class="left-sidebar">
<table>
SCORE
</table>
</aside>
<main>
<article class="not-in-win-animation">
<canvas id="canvas" width="800" height="400"></canvas>
<div id="tutorial-speech-bubble" class="text-bubble">
<div class="dialog">
<p id="tutorial-box" class="speech"></p>
<div class="right-point">
</div>
<div class="right-point shifted">
</div>
</div>
</div>
</article>
</main>
<aside class="controls not-in-win-animation right-sidebar">
<div id="timer">Time</div> <div id="timer">Time</div>
<button id="pause-1">Pause</button> <button id="pause-1">Pause</button>
<button id="pause-2">Pause</button><br/> <button id="pause-2">Pause</button><br/>
<label for="dificulty-slider">Difficulty</label><br/> <label for="dificulty-slider">Difficulty</label><br/>
<input type="range" min="0" max="100" value="50" id="difficulty-slider"> <input type="range" min="0" max="100" value="50" id="difficulty-slider">
<br/> <br/>
</div> </aside>
<div class="not-in-win-animation"> </div>
<canvas id="canvas" width="800" height="400"></canvas>
<div id="tutorial-speech-bubble" class="text-bubble">
<div class="dialog">
<p id="tutorial-box" class="speech"></p>
<div class="right-point">
</div>
<div class="right-point shifted">
</div>
</div>
</div>
</div>
</main>
<footer> <footer>
<p>Sokoban 2022</p> <p>Sokoban 2022</p>
<p>Pour une meilleure expérience, veuillez utiliser ce jeu sur un ordinateur avec un écran horizontal.</p> <p>Pour une meilleure expérience, veuillez utiliser ce jeu sur un ordinateur avec un écran horizontal.</p>

21
style.css
View file

@ -6,7 +6,7 @@
body { body {
background-color: var(--main-background-color); background-color: var(--main-background-color);
color: --main-invert-color; color: --main-text-color;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0; margin: 0;
@ -17,12 +17,25 @@ main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin: 1rem 0; float: left;
} }
.container {
padding: 2rem 0 0 0;
display: flex;
min-height: 40vh;
}
aside {
margin: 0 auto;
float: left;
width: 10rem;
justify-content: space-between;
flex-direction: column;
}
nav { nav {
display: flex; display: flex;
/*width: 100%; */
background-color: yellowgreen; background-color: yellowgreen;
padding: 0 20%; padding: 0 20%;
} }
@ -50,6 +63,7 @@ footer {
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
position:fixed; position:fixed;
margin-top: auto;
width: 100%; width: 100%;
bottom: 0; bottom: 0;
background-color: yellowgreen; background-color: yellowgreen;
@ -60,7 +74,6 @@ footer p:last-child {
} }
.text-bubble { .text-bubble {
/* transform: rotate(90deg); */
position: relative; position: relative;
margin: auto; margin: auto;
margin-left: 185px; margin-left: 185px;