Chellaris/chellaris-sign-up-site
Chellaris/chellaris-sign-up-site
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity

CSS Stuff

Browse source
This commit is contained in:
Neshura 2023-08-11 21:39:36 +02:00
parent 5f69bf5f71
commit f5a2d32adf
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
3 changed files with 11 additions and 196 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/routes/Header.svelte
View file

@ -50,8 +50,8 @@
}
.corner {
width: 3em;
height: 3em;
width: var(--height-m);
height: var(--height-m);
}
.corner a {
@ -76,7 +76,7 @@
svg {
width: 2em;
height: 3em;
height: var(--height-m);
display: block;
}
@ -88,7 +88,7 @@
position: relative;
padding: 0;
margin: 0;
height: 3em;
height: var(--height-m);
display: flex;
justify-content: center;
align-items: center;
@ -111,7 +111,7 @@
top: 0;
left: calc(50% - var(--size));
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 {
@ -129,6 +129,6 @@
}
a:hover {
color: var(--color-theme-1);
color: var(--color-active-1);
}
</style>

187
src/routes/admin/+page.svelte
View file

@ -95,193 +95,6 @@
</div>
<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 {
0% {
transform: translateX(0);

8
src/routes/styles.css
View file

@ -5,13 +5,15 @@
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--font-mono: 'Fira Mono', monospace;
--color-bg: #1a1a1a;
--color-theme-1: #00c4a3;
--color-theme-2: #4075a6;
--color-active-1: #00c4a3;
--color-active-2: #4075a6;
--color-text: rgba(255, 255, 255, 0.7);
--column-width: 42rem;
--column-margin-top: 4rem;
font-family: var(--font-body);
color: var(--color-text);
--height-m: 3em;
}
body {
@ -33,7 +35,7 @@ p {
}
a {
color: var(--color-theme-1);
color: var(--color-active-1);
text-decoration: none;
}