Compare commits
2 Commits
3737631412
...
b286e2e889
Author | SHA1 | Date | |
---|---|---|---|
b286e2e889 | |||
1dab0fcf97 |
40
css/main.css
40
css/main.css
|
@ -21,6 +21,8 @@ body {
|
|||
grid-template-rows: 1fr;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
main {
|
||||
|
@ -34,9 +36,6 @@ main {
|
|||
place-items: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
||||
}
|
||||
.btn:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
@ -48,7 +47,6 @@ main {
|
|||
position: relative;
|
||||
|
||||
padding: 2.2rem;
|
||||
margin: -.4rem;
|
||||
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
@ -60,21 +58,44 @@ main {
|
|||
|
||||
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 {
|
||||
display: grid;
|
||||
|
||||
padding: inherit;
|
||||
place-items: center;
|
||||
}
|
||||
.btn.cbtn > i::after {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
position: absolute;
|
||||
|
||||
z-index: 1000;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
padding: 0rem;
|
||||
|
||||
background: #fff;
|
||||
background: var(--btn-light);
|
||||
color: var(--btn-dark);
|
||||
filter: invert(1);
|
||||
|
||||
width: 0;
|
||||
|
@ -86,7 +107,7 @@ main {
|
|||
/* When deployed on a platform, choose one or the other, not both */
|
||||
.btn.cbtn:focus > i::after, /* TV */
|
||||
.btn.cbtn:hover > i::after /* PC */ {
|
||||
padding: inherit;
|
||||
padding: var(--padding);
|
||||
}
|
||||
|
||||
@keyframes cbtn-click {
|
||||
|
@ -95,7 +116,7 @@ main {
|
|||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
padding: inherit;
|
||||
padding: calc(var(--padding) * 1.3);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
@ -122,6 +143,7 @@ main {
|
|||
text-decoration: none;
|
||||
font-family: Lato;
|
||||
}
|
||||
|
||||
.btn.sbtn::after {
|
||||
|
||||
}
|
Loading…
Reference in New Issue
Block a user