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

Compare commits

base: nbillard:02728cb9277a1f4550af1fe0847368ba8bd4f258
Branches Tags
nbillard:master
..
compare: nbillard:4fa3dd24f52fc06d863288a5c99c093f8c91e546
Branches Tags
nbillard:master

No commits in common. "02728cb9277a1f4550af1fe0847368ba8bd4f258" and "4fa3dd24f52fc06d863288a5c99c093f8c91e546" have entirely different histories.
02728cb927 ... 4fa3dd24f5

2 changed files with 13 additions and 13 deletions
Show stats Expand all files Collapse all files

9
index.html
View file

@ -38,12 +38,11 @@
<canvas id="canvas" width="800" height="400"></canvas> <canvas id="canvas" width="800" height="400"></canvas>
<div id="tutorial-speech-bubble" class="text-bubble"> <div id="tutorial-speech-bubble" class="text-bubble">
<div class="dialog"> <div class="dialog">
<div class="left-point">
</div>
<div class="left-point shifted">
</div>
<p id="tutorial-box" class="speech"></p> <p id="tutorial-box" class="speech"></p>
<div class="right-point">
</div>
<div class="right-point shifted">
</div>
</div> </div>
</div> </div>
</div> </div>

17
style.css
View file

@ -63,14 +63,14 @@ footer p:last-child {
/* transform: rotate(90deg); */ /* transform: rotate(90deg); */
position: relative; position: relative;
margin: auto; margin: auto;
margin-left: 185px; margin-left: 658px;
margin-top: -395px; margin-top: -385px;
z-index: 2; z-index: 2;
} }
.dialog { .dialog {
height: 150px; height: 200px;
width: 350px; width: 400px;
background-color: var(--main-background-color); background-color: var(--main-background-color);
position: relative; position: relative;
border-radius: 10%; border-radius: 10%;
@ -79,7 +79,7 @@ footer p:last-child {
border: 1px solid black; border: 1px solid black;
} }
.right-point { .left-point {
width: 0; width: 0;
height: 0; height: 0;
border-left: 1rem solid transparent; border-left: 1rem solid transparent;
@ -87,18 +87,19 @@ footer p:last-child {
border-top: 5rem solid black; border-top: 5rem solid black;
position: absolute; position: absolute;
margin-top: 30%; margin-top: 30%;
margin-left: 100%; margin-left: -10%;
transform: rotate(-60deg) ; transform: rotate(60deg) ;
z-index: -1; z-index: -1;
} }
.shifted { .shifted {
transform:rotate(-60deg) translate(0px,-2px); transform:rotate(60deg) translate(0px,-2px);
border-top: 5rem solid white; border-top: 5rem solid white;
z-index: 4; z-index: 4;
} }
.speech { .speech {
z-index: 3; z-index: 3;
margin: auto; margin: auto;