open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update ui

Browse Source
This commit is contained in:
marsteralex 2022-09-13 15:36:27 +02:00
parent 68bdadde37
commit 5bfb624907
1 changed files with 34 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
web/public/mtg/guess.html
View File

@ -34,6 +34,13 @@
h1 { h1 {
font-family: Verdana, Geneva, Tahoma, sans-serif; font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center; text-align: center;
display: flex;
flex-direction: row;
}
.new-game-button {
font-size: 14px;
margin: 0;
} }
form { form {
@ -52,8 +59,8 @@
} }
.card { .card {
width: 230px; width: 300px;
height: 208px; height: 259px;
border: 5px solid lightgrey; border: 5px solid lightgrey;
margin: 5px; margin: 5px;
align-items: flex-end; align-items: flex-end;
@ -63,7 +70,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
/*background-size: contain;*/ /*background-size: contain;*/
background-size: 220px; background-size: 292px;
background-repeat: no-repeat; background-repeat: no-repeat;
transition: height 1s, background-image 1s, border 0.4s 0.6s; transition: height 1s, background-image 1s, border 0.4s 0.6s;
background-position-y: calc(50% - 18px); background-position-y: calc(50% - 18px);
@ -77,7 +84,7 @@
} }
.answer-page .card { .answer-page .card {
height: 353px; height: 453px;
/*padding-top: 310px;*/ /*padding-top: 310px;*/
/*background-size: cover;*/ /*background-size: cover;*/
overflow: hidden; overflow: hidden;
@ -144,6 +151,7 @@
.card .name { .card .name {
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
width: 300px;
} }
#submit { #submit {
@ -165,7 +173,7 @@
padding: 8px 20px; padding: 8px 20px;
background-color: lightpink; background-color: lightpink;
border: none; border: none;
position: absolute; /* position: absolute; */
top: 5px; top: 5px;
left: 20px; left: 20px;
border-radius: 3px; border-radius: 3px;
@ -201,6 +209,16 @@
h1 { h1 {
margin-right: 240px; margin-right: 240px;
} }
.answer-page .card {
height: 353px;
}
.card {
width: 230px;
height: 208px;
background-size: 220px;
}
} }
@media screen and (orientation: portrait) and (max-width: 1100px) { @media screen and (orientation: portrait) and (max-width: 1100px) {
@ -268,7 +286,14 @@
</noscript> </noscript>
<!-- End Google Tag Manager (noscript) --> <!-- End Google Tag Manager (noscript) -->
<h1><span id="guess-type"></span>: <span id="round-number"></span></h1> <h1>
<form method="get" class="new-game-button" action="index.html">
<input type="submit" id="newGame" value="New Game" />
</form>
<div style="flex-grow: 1">
<span id="guess-type"></span>: <span id="round-number"></span>
</div>
</h1>
<div class="play-page"> <div class="play-page">
<div <div
@ -512,11 +537,9 @@
</form> </form>
</div> </div>
<div style="position: absolute; top: 0; left: 0; right: 0; color: grey"> <div
<form method="get" action="index.html"> style="position: absolute; top: 0; left: 0; right: 0; color: grey"
<input type="submit" id="newGame" value="New Game" /> ></div>
</form>
</div>
<div style="margin: -40px 0 0; height: 60px"> <div style="margin: -40px 0 0; height: 60px">
<a href="https://paypal.me/idamayer">Donate, buy us a boba 🧋</a> <a href="https://paypal.me/idamayer">Donate, buy us a boba 🧋</a>
</div> </div>