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

almost centered

Browse source
This commit is contained in:
Ronan 2022-12-05 18:16:29 +01:00
parent 4899e47daf
commit e44e8ab4b9
2 changed files with 58 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
index.html
View file

@ -13,7 +13,6 @@
</head> </head>
<body> <body>
<h1>Sokoban</h1>
<!--[if lt IE 8]> <!--[if lt IE 8]>
<p class="browserupgrade"> <p class="browserupgrade">
You are using an <strong>outdated</strong> browser. Please You are using an <strong>outdated</strong> browser. Please
@ -22,24 +21,31 @@
</p> </p>
<![endif]--> <![endif]-->
<nav> <nav>
<h1>Sokoban</h1>
<ol id="level-lists"> <ol id="level-lists">
</ol> </ol>
</nav> </nav>
<main>
<div class="controls">
<div id="timer">Time</div> <div id="timer">Time</div>
<button id="Pause" onclick="Pause()">Pause</button> <button id="Pause" onclick="Pause()">Pause</button>
<br> <br>
<div></div> </div>
<canvas id="canvas" width="800" height="400"></canvas> <div>
<div class="to-center">
<canvas id="canvas" width="800" height="400"></canvas> <canvas id="canvas" width="800" height="400"></canvas>
<div class="text-bubble"> <div class="text-bubble">
<div class="dialog"> <div class="dialog">
<div class="left-point"> <div class="left-point">
</div> </div>
<div class="left-point shifted">
</div>
<p class="speech">Coucou</p> <p class="speech">Coucou</p>
</div> </div>
</div> </div>
</div> </div>
</main>
</body> </body>
<!-- <script type="module" src="./modules/ressources.mjs"></script> --> <!-- <script type="module" src="./modules/ressources.mjs"></script> -->
<script type="module" src="./script.js"></script> <script type="module" src="./script.js"></script>

66
style.css
View file

@ -1,36 +1,20 @@
:root { :root {
--main-background-color: black; --main-background-color: white;
--main-invert-color: white; --main-text-color: black;
--main-highlight-color: cyan; --main-highlight-color: cyan;
} }
body { body {
background-color: var(--main-background-color); background-color: var(--main-background-color);
display: flex;
color: --main-invert-color; color: --main-invert-color;
}
.dialog {
height: 200px;
width: 400px;
background-color: var(--main-invert-color);
position: relative;
border-radius: 10%;
display: flex; display: flex;
text-align: center; flex-direction: column;
} }
.left-point { main {
width: 0; display: flex;
height: 0; flex-direction: column;
border-left: 1rem solid transparent; align-items: center;
border-right: 1rem solid transparent;
border-top: 5rem solid var(--main-invert-color);
position: absolute;
margin-top: 30%;
margin-left: -10%;
transform: rotate(60deg) ;
z-index: -1;
} }
.text-bubble { .text-bubble {
@ -42,13 +26,41 @@ body {
z-index: 2; z-index: 2;
} }
.dialog {
height: 200px;
width: 400px;
background-color: var(--main-background-color);
position: relative;
border-radius: 10%;
display: flex;
text-align: center;
border: 1px solid black;
}
.left-point {
width: 0;
height: 0;
border-left: 1rem solid transparent;
border-right: 1rem solid transparent;
border-top: 5rem solid black;
position: absolute;
margin-top: 30%;
margin-left: -10%;
transform: rotate(60deg) ;
z-index: -1;
}
.shifted {
transform:rotate(60deg) translate(0px,-2px);
border-top: 5rem solid white;
z-index: 4;
}
.speech { .speech {
z-index: 3; z-index: 3;
margin: auto; margin: auto;
position: relative; position: relative;
text-align: justify; text-align: justify;
} }
.to-center {
margin: 0 auto;
}