ari melody
6927d54cbd
port "ari is learning!" assets to live go backend. some prep work for further developments for ari melody LIVE
125 lines
1.9 KiB
CSS
125 lines
1.9 KiB
CSS
:root {
|
|
--bg-0: #e0e0e0;
|
|
--on-bg-0: #303030;
|
|
--on-bg-1: #606060;
|
|
--on-bg-2: #808080;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg-0: #202020;
|
|
--on-bg-0: #e0e0e0;
|
|
--on-bg-1: #c0c0c0;
|
|
--on-bg-2: #808080;
|
|
}
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
width: 100%;
|
|
height: 100vh;
|
|
|
|
font-family: "Inter", "Arial", sans-serif;
|
|
font-size: 32px;
|
|
|
|
color: var(--on-bg-0);
|
|
background-color: var(--bg-0);
|
|
|
|
transition: color 1s, background-color 1s;
|
|
}
|
|
|
|
#app {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.vignette {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-image: radial-gradient(transparent, black);
|
|
opacity: .1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: end;
|
|
}
|
|
|
|
.title h1, .title h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
.title h1 {
|
|
font-size: 2em;
|
|
margin-bottom: -.2em;
|
|
}
|
|
|
|
.title h2 {
|
|
font-size: 1.25em;
|
|
color: var(--on-bg-2);
|
|
animation: pulse .5s alternate ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
from { opacity: 1; }
|
|
to { opacity: .5; }
|
|
}
|
|
|
|
header {
|
|
position: fixed;
|
|
top: 0;
|
|
}
|
|
|
|
footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
}
|
|
|
|
header,
|
|
footer {
|
|
width: calc(100vw - 2.8em);
|
|
padding: 1em 1.4em;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
color: var(--on-bg-2);
|
|
}
|
|
|
|
header h3,
|
|
footer h3 {
|
|
margin: 0;
|
|
font-family: "Monaspace Argon", monospace;
|
|
}
|
|
|
|
#time {
|
|
font-family: "Monaspace Argon", monospace;
|
|
}
|
|
|
|
#cover {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: var(--bg-0);
|
|
transition: opacity 1s ease-out;
|
|
}
|
|
|
|
#cover.hidden {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|