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

32
index.html
View file

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

66
style.css
View file

@ -1,36 +1,20 @@
:root {
--main-background-color: black;
--main-invert-color: white;
--main-background-color: white;
--main-text-color: black;
--main-highlight-color: cyan;
}
body {
background-color: var(--main-background-color);
display: flex;
color: --main-invert-color;
}
.dialog {
height: 200px;
width: 400px;
background-color: var(--main-invert-color);
position: relative;
border-radius: 10%;
display: flex;
text-align: center;
flex-direction: column;
}
.left-point {
width: 0;
height: 0;
border-left: 1rem solid transparent;
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;
main {
display: flex;
flex-direction: column;
align-items: center;
}
.text-bubble {
@ -42,13 +26,41 @@ body {
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 {
z-index: 3;
margin: auto;
position: relative;
text-align: justify;
}
.to-center {
margin: 0 auto;
}