CSS Stuff
This commit is contained in:
parent
5f69bf5f71
commit
f5a2d32adf
3 changed files with 11 additions and 196 deletions
|
@ -50,8 +50,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.corner {
|
.corner {
|
||||||
width: 3em;
|
width: var(--height-m);
|
||||||
height: 3em;
|
height: var(--height-m);
|
||||||
}
|
}
|
||||||
|
|
||||||
.corner a {
|
.corner a {
|
||||||
|
@ -76,7 +76,7 @@
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
width: 2em;
|
width: 2em;
|
||||||
height: 3em;
|
height: var(--height-m);
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -88,7 +88,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
height: 3em;
|
height: var(--height-m);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -111,7 +111,7 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
left: calc(50% - var(--size));
|
left: calc(50% - var(--size));
|
||||||
border: var(--size) solid transparent;
|
border: var(--size) solid transparent;
|
||||||
border-top: var(--size) solid var(--color-theme-1);
|
border-top: var(--size) solid var(--color-active-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a {
|
nav a {
|
||||||
|
@ -129,6 +129,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: var(--color-theme-1);
|
color: var(--color-active-1);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -95,193 +95,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
form {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 1rem;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.how-to-play {
|
|
||||||
color: var(--color-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.how-to-play::before {
|
|
||||||
content: 'i';
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 0.8em;
|
|
||||||
font-weight: 900;
|
|
||||||
width: 1em;
|
|
||||||
height: 1em;
|
|
||||||
padding: 0.2em;
|
|
||||||
line-height: 1;
|
|
||||||
border: 1.5px solid var(--color-text);
|
|
||||||
border-radius: 50%;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 0.5em 0 0;
|
|
||||||
position: relative;
|
|
||||||
top: -0.05em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid {
|
|
||||||
--width: min(100vw, 40vh, 380px);
|
|
||||||
max-width: var(--width);
|
|
||||||
align-self: center;
|
|
||||||
justify-self: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid .row {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(5, 1fr);
|
|
||||||
grid-gap: 0.2rem;
|
|
||||||
margin: 0 0 0.2rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
.grid.bad-guess .row.current {
|
|
||||||
animation: wiggle 0.5s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid.playing .row.current {
|
|
||||||
filter: drop-shadow(3px 3px 10px var(--color-bg-0));
|
|
||||||
}
|
|
||||||
|
|
||||||
.letter {
|
|
||||||
aspect-ratio: 1;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
text-transform: lowercase;
|
|
||||||
border: none;
|
|
||||||
font-size: calc(0.08 * var(--width));
|
|
||||||
border-radius: 2px;
|
|
||||||
background: white;
|
|
||||||
margin: 0;
|
|
||||||
color: rgba(0, 0, 0, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.letter.missing {
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
color: rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.letter.exact {
|
|
||||||
background: var(--color-theme-2);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.letter.close {
|
|
||||||
border: 2px solid var(--color-theme-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected {
|
|
||||||
outline: 2px solid var(--color-theme-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls {
|
|
||||||
text-align: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: min(18vh, 10rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.keyboard {
|
|
||||||
--gap: 0.2rem;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--gap);
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.keyboard .row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.2rem;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.keyboard button,
|
|
||||||
.keyboard button:disabled {
|
|
||||||
--size: min(8vw, 4vh, 40px);
|
|
||||||
background-color: white;
|
|
||||||
color: black;
|
|
||||||
width: var(--size);
|
|
||||||
border: none;
|
|
||||||
border-radius: 2px;
|
|
||||||
font-size: calc(var(--size) * 0.5);
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.keyboard button.exact {
|
|
||||||
background: var(--color-theme-2);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.keyboard button.missing {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.keyboard button.close {
|
|
||||||
border: 2px solid var(--color-theme-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.keyboard button:focus {
|
|
||||||
background: var(--color-theme-1);
|
|
||||||
color: white;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.keyboard button[data-key='enter'],
|
|
||||||
.keyboard button[data-key='backspace'] {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
width: calc(1.5 * var(--size));
|
|
||||||
height: calc(1 / 3 * (100% - 2 * var(--gap)));
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: calc(0.3 * var(--size));
|
|
||||||
padding-top: calc(0.15 * var(--size));
|
|
||||||
}
|
|
||||||
|
|
||||||
.keyboard button[data-key='enter'] {
|
|
||||||
right: calc(50% + 3.5 * var(--size) + 0.8rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.keyboard button[data-key='backspace'] {
|
|
||||||
left: calc(50% + 3.5 * var(--size) + 0.8rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.keyboard button[data-key='enter']:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.restart {
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
border-radius: 2px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.restart:focus,
|
|
||||||
.restart:hover {
|
|
||||||
background: var(--color-theme-1);
|
|
||||||
color: white;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes wiggle {
|
@keyframes wiggle {
|
||||||
0% {
|
0% {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
|
|
|
@ -5,13 +5,15 @@
|
||||||
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
--font-mono: 'Fira Mono', monospace;
|
--font-mono: 'Fira Mono', monospace;
|
||||||
--color-bg: #1a1a1a;
|
--color-bg: #1a1a1a;
|
||||||
--color-theme-1: #00c4a3;
|
--color-active-1: #00c4a3;
|
||||||
--color-theme-2: #4075a6;
|
--color-active-2: #4075a6;
|
||||||
--color-text: rgba(255, 255, 255, 0.7);
|
--color-text: rgba(255, 255, 255, 0.7);
|
||||||
--column-width: 42rem;
|
--column-width: 42rem;
|
||||||
--column-margin-top: 4rem;
|
--column-margin-top: 4rem;
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
|
|
||||||
|
--height-m: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
@ -33,7 +35,7 @@ p {
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--color-theme-1);
|
color: var(--color-active-1);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Reference in a new issue