173 lines
2.9 KiB
CSS
173 lines
2.9 KiB
CSS
/* Bühne für Trailer und Galerie: links Untertitel, rechts das Spiel im Handyformat (420 × 840, skaliert). */
|
||
@import '@fontsource/pixelify-sans/latin-700.css';
|
||
|
||
:root {
|
||
--ink: #2b1d14;
|
||
--wood: #5b3a22;
|
||
--wood-dark: #3f2716;
|
||
--parchment: #f4e4c1;
|
||
--gold: #f2c14e;
|
||
--gold-dark: #b8841c;
|
||
--grass-dark: #2c4220;
|
||
--s: 1.15;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
height: 100%;
|
||
}
|
||
|
||
body {
|
||
background-color: var(--grass-dark);
|
||
background-image: conic-gradient(
|
||
rgba(0, 0, 0, 0.1) 25%,
|
||
transparent 0 50%,
|
||
rgba(0, 0, 0, 0.1) 0 75%,
|
||
transparent 0
|
||
);
|
||
background-size: 8px 8px;
|
||
color: var(--parchment);
|
||
font-family: 'Pixelify Sans', monospace;
|
||
/* sonst wird „fi“ in Pixelify zu einem Zeichen, das wie „A“ aussieht */
|
||
font-variant-ligatures: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6vw;
|
||
overflow: hidden;
|
||
}
|
||
|
||
#text {
|
||
width: 40vw;
|
||
transition: opacity 0.25s;
|
||
}
|
||
|
||
#text.fade {
|
||
opacity: 0;
|
||
}
|
||
|
||
#title {
|
||
margin: 0 0 0.3em;
|
||
font-size: 5.2vh;
|
||
line-height: 1.1;
|
||
color: var(--gold);
|
||
text-shadow: 0.35vh 0.35vh 0 var(--ink);
|
||
}
|
||
|
||
#title.logo {
|
||
font-size: 10vh;
|
||
letter-spacing: 0.03em;
|
||
}
|
||
|
||
#sub {
|
||
margin: 0;
|
||
font-size: 3.2vh;
|
||
line-height: 1.3;
|
||
text-shadow: 0.25vh 0.25vh 0 var(--ink);
|
||
}
|
||
|
||
#foot {
|
||
margin: 1.4em 0 0;
|
||
font-size: 2.2vh;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
#phone {
|
||
flex: none;
|
||
width: calc(420px * var(--s));
|
||
height: calc(840px * var(--s));
|
||
border: 10px solid var(--ink);
|
||
box-shadow:
|
||
0 0 0 4px var(--wood),
|
||
12px 12px 0 rgba(0, 0, 0, 0.4);
|
||
background: var(--grass-dark);
|
||
overflow: hidden;
|
||
transition: height 0.3s ease-out;
|
||
}
|
||
|
||
/* Post im Feed: nur die Karte (Kopfzeile + 512 px Inline-Post), kein leeres Handy */
|
||
body.post-mode #phone {
|
||
height: calc(552px * var(--s));
|
||
}
|
||
|
||
#screen {
|
||
position: relative;
|
||
width: 420px;
|
||
height: 840px;
|
||
transform: scale(var(--s));
|
||
transform-origin: 0 0;
|
||
}
|
||
|
||
#screen > * {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 0;
|
||
display: none;
|
||
}
|
||
|
||
#screen > .on {
|
||
display: block;
|
||
}
|
||
|
||
#post.on {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: var(--ink);
|
||
}
|
||
|
||
.post-head {
|
||
margin: 0;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
padding: 0 12px;
|
||
font-size: 16px;
|
||
color: var(--gold);
|
||
}
|
||
|
||
#splash {
|
||
flex: none;
|
||
width: 420px;
|
||
height: 512px;
|
||
border: 0;
|
||
}
|
||
|
||
#clip {
|
||
object-fit: cover;
|
||
background: #000;
|
||
}
|
||
|
||
#finger {
|
||
position: fixed;
|
||
width: 44px;
|
||
height: 44px;
|
||
margin: -22px 0 0 -22px;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.35);
|
||
border: 3px solid rgba(255, 255, 255, 0.85);
|
||
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
transition:
|
||
left 0.22s ease-out,
|
||
top 0.22s ease-out,
|
||
opacity 0.2s;
|
||
z-index: 10;
|
||
}
|
||
|
||
#finger.on {
|
||
opacity: 1;
|
||
}
|
||
|
||
#finger.press {
|
||
animation: press 0.25s ease-out;
|
||
}
|
||
|
||
@keyframes press {
|
||
50% {
|
||
transform: scale(0.7);
|
||
background: rgba(242, 193, 78, 0.7);
|
||
}
|
||
}
|