Compare commits

...

2 Commits

Author SHA1 Message Date
b286e2e889 Overflow click animation 2021-01-03 01:06:46 +01:00
1dab0fcf97 Firefox support 2021-01-03 01:04:37 +01:00

View File

@ -21,6 +21,8 @@ body {
grid-template-rows: 1fr; grid-template-rows: 1fr;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
overflow: hidden;
} }
main { main {
@ -34,9 +36,6 @@ main {
place-items: center; place-items: center;
} }
.btn {
}
.btn:focus { .btn:focus {
outline: none; outline: none;
} }
@ -48,7 +47,6 @@ main {
position: relative; position: relative;
padding: 2.2rem; padding: 2.2rem;
margin: -.4rem;
width: 0; width: 0;
height: 0; height: 0;
@ -60,21 +58,44 @@ main {
border-radius: 100vw; border-radius: 100vw;
} }
.btn.cbtn {
--padding: 5vmin;
padding: var(--padding);
font-size: 3vmin;
}
.btn.cbtn.medium {
--padding: 5vmin;
padding: var(--padding);
font-size: 3vmin;
}
.btn.cbtn.big {
--padding: 30vmin;
padding: var(--padding);
font-size: 20vmin;
}
.btn.cbtn.overlap {
margin: -1vmin;
}
.btn.cbtn > i { .btn.cbtn > i {
display: grid; display: grid;
place-items: center;
padding: inherit;
} }
.btn.cbtn > i::after { .btn.cbtn > i::after {
display: grid; display: grid;
place-content: center; place-content: center;
position: absolute; position: absolute;
z-index: 1000;
overflow: hidden; overflow: hidden;
padding: 0rem; padding: 0rem;
background: #fff; background: var(--btn-light);
color: var(--btn-dark);
filter: invert(1); filter: invert(1);
width: 0; width: 0;
@ -86,7 +107,7 @@ main {
/* When deployed on a platform, choose one or the other, not both */ /* When deployed on a platform, choose one or the other, not both */
.btn.cbtn:focus > i::after, /* TV */ .btn.cbtn:focus > i::after, /* TV */
.btn.cbtn:hover > i::after /* PC */ { .btn.cbtn:hover > i::after /* PC */ {
padding: inherit; padding: var(--padding);
} }
@keyframes cbtn-click { @keyframes cbtn-click {
@ -95,7 +116,7 @@ main {
opacity: 1; opacity: 1;
} }
to { to {
padding: inherit; padding: calc(var(--padding) * 1.3);
opacity: 0; opacity: 0;
} }
} }
@ -122,6 +143,7 @@ main {
text-decoration: none; text-decoration: none;
font-family: Lato; font-family: Lato;
} }
.btn.sbtn::after { .btn.sbtn::after {
} }