nybble
/
paco_sako
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix player icons clipped outside text area; tweak tile layout

This commit is contained in:
Jesse D. McDonald 2020-04-30 04:29:01 -05:00
parent 838699994a
commit 5741c6eaed
1 changed files with 42 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
css/chess.css
View File

@ -438,7 +438,6 @@ button:disabled .silhouette {
linear-gradient(-45deg, transparent 75%, #FAF0DD 75%); linear-gradient(-45deg, transparent 75%, #FAF0DD 75%);
background-size: 80px 80px; background-size: 80px 80px;
background-position: -20px -20px, -20px 20px, 20px -60px, -60px -20px; background-position: -20px -20px, -20px 20px, 20px -60px, -60px -20px;
font-size: 110%;
} }
.game-tile:hover { .game-tile:hover {
@ -458,6 +457,8 @@ button:disabled .silhouette {
.new-game-text { .new-game-text {
font-size: 3em; font-size: 3em;
text-shadow: 2px 2px 4px #000000c0;
font-weight: bold;
} }
.new-game-text::before { .new-game-text::before {
@ -500,10 +501,34 @@ button:disabled .silhouette {
background-repeat: no-repeat; background-repeat: no-repeat;
width: 1.2em; width: 1.2em;
height: 1.2em; height: 1.2em;
margin-left: -1.05em; margin-left: 0;
margin-top: -0.2em; margin-top: 0;
margin-bottom: -0.2em; margin-bottom: -0.1em;
margin-right: -0.15em margin-right: -0.15em;
}
/* extra space to keep the line centered */
.game-tile-lt-name::after {
content: '';
display: inline-block;
width: 1.2em;
height: 1.2em;
margin-left: -0.15em;
margin-top: 0;
margin-bottom: -0.1em;
margin-right: 0;
}
/* extra space to keep the line centered */
.game-tile-dk-name::before {
content: '';
display: inline-block;
width: 1.2em;
height: 1.2em;
margin-left: 0;
margin-top: 0;
margin-bottom: -0.1em;
margin-right: -0.05em;
} }
.game-tile-dk-name::after { .game-tile-dk-name::after {
@ -514,10 +539,10 @@ button:disabled .silhouette {
background-repeat: no-repeat; background-repeat: no-repeat;
width: 1.2em; width: 1.2em;
height: 1.2em; height: 1.2em;
margin-left: -0.15em; margin-left: -0.05em;
margin-top: -0.2em; margin-top: 0;
margin-bottom: -0.2em; margin-bottom: -0.1em;
margin-right: -1.05em margin-right: 0;
} }
.game-tile-lt-name { .game-tile-lt-name {
@ -556,23 +581,19 @@ button:disabled .silhouette {
margin-top: 0.5em; margin-top: 0.5em;
} }
@media only screen and (min-width: 50em) and (max-width: 70em) {
.game-tile { .game-tile {
width: 12em; font-size: calc(12in * 0.015);
height: 12em; }
font-size: 100%;
@media only screen and (min-width: 6in) and (max-width: 12in) {
.game-tile {
font-size: 1.5vw;
} }
} }
@media only screen and (max-width: 50em) { @media only screen and (max-width: 6in) {
.game-tile { .game-tile {
width: 10em; font-size: calc(6in * 0.015);
height: 10em;
font-size: 70%;
}
.new-game-text {
font-size: 3em;
} }
} }