Glitch (glitch-hello-node)
951dff8682
./README.md:1954897/2857 ./server.js:1954897/4286 ./package.json:1954897/1034 ./index.html:1954897/1440 ./public/index.js:1954897/4254 ./public/style.css:1954897/5185
67 lines
1.1 KiB
CSS
67 lines
1.1 KiB
CSS
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: "IBM Plex Sans", sans-serif;
|
|
font-weight: 200;
|
|
}
|
|
|
|
#map {
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#card {
|
|
position: fixed;
|
|
bottom: 0; left: 0; right: 0;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
max-width: 920px;
|
|
background: #1e1e1e;
|
|
border: 2px solid white;
|
|
border-radius: 0 4em 0 0;
|
|
border-bottom: 0;
|
|
padding: 1em 1em 0;
|
|
color: white;
|
|
}
|
|
|
|
#card::before {
|
|
content: var(--region);
|
|
pointer-events: none;
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 1rem;
|
|
left: 1rem;
|
|
opacity: .12;
|
|
font-size: 6em;
|
|
}
|
|
|
|
.card--active #card {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
@media only screen and (min-width: 720px) {
|
|
#card {
|
|
right: auto;
|
|
/* min-height: 300px; */
|
|
left: 2em;
|
|
/* max-width: 50%; */
|
|
width: 480px;
|
|
}
|
|
}
|
|
|
|
|
|
h1, p, canvas { margin: 0 0 1rem; font-weight: 300; }
|