L'électron rare
4436877e45
Add a Vite plugin that renders bio, links and greetings from the Task 2 content modules into the raw served index.html at build time, so non-JS clients (Mastodon's rel=me verifier included) see real content and the mastodon.saillant.cc/@clement rel=me anchor. Hide the fallback for sighted users once the 3D demo boots, but keep it in the accessibility tree. Add @types/node so tsc can type-check the node:fs import in the new test.
33 lines
921 B
CSS
33 lines
921 B
CSS
:root { color-scheme: dark; }
|
|
body { margin: 0; background: #05010d; color: #ffd23f; font-family: "Courier New", monospace; }
|
|
|
|
#fallback {
|
|
max-width: 42rem;
|
|
margin: 0 auto;
|
|
padding: 2rem 1rem 4rem;
|
|
line-height: 1.5;
|
|
}
|
|
#fallback h1 { color: #ff5c00; font-size: 2.2rem; margin-bottom: 0; }
|
|
#fallback .tagline { margin-top: 0.2rem; color: #9be564; }
|
|
#fallback nav a {
|
|
display: block;
|
|
padding: 0.6rem 0.8rem;
|
|
margin: 0.4rem 0;
|
|
border: 3px solid #ffd23f;
|
|
color: #ffd23f;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
#fallback nav a:hover, #fallback nav a:focus { background: #ffd23f; color: #05010d; }
|
|
#fallback a { color: #9be564; }
|
|
#fallback .hint { color: #666; font-size: 0.85rem; }
|
|
/* When the 3D demo is on, keep the fallback for screen readers only */
|
|
body.demo-on #fallback {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
clip-path: inset(50%);
|
|
white-space: nowrap;
|
|
}
|