mirror of
https://github.com/l0ng-ai/openidea.git
synced 2026-11-06 16:08:05 +00:00
fix(splash): Keep the wordmark still until the splash fades
The splash named Inter, but the font faces and antialiasing came with the app CSS, which the dev server injects only once the bundle runs: the wordmark switched from the system font to Inter, moving up and changing weight, just before the fade. The font faces are now linked from index.html and the splash sets its own smoothing. The splash also stays on one compositing layer, so the fade-out doesn't re-snap the centred text.
This commit is contained in:
@@ -5,6 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>OpenIDEA</title>
|
||||
<script src="/boot.js"></script>
|
||||
<link rel="stylesheet" href="/src/styles/fonts.css" />
|
||||
<link rel="stylesheet" href="/splash.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -19,11 +19,16 @@ body, .splash { background: #e9eaee; }
|
||||
box-sizing: border-box;
|
||||
font: 500 15px/1.2 "Inter Variable", Inter, system-ui, -apple-system, sans-serif;
|
||||
color: #6c707e;
|
||||
/* As on body: picking it up when the app CSS arrives would change the wordmark's weight. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
animation: splash-in 240ms ease-out 120ms both;
|
||||
transition: opacity 160ms ease-out;
|
||||
/* One compositing layer for its whole life: WebKit layers it only while the opacity animates,
|
||||
and the fade-out's fresh layer re-snaps the centred text, which then jumps up half a pixel. */
|
||||
will-change: opacity;
|
||||
}
|
||||
.splash.splash-out { opacity: 0; pointer-events: none; }
|
||||
:root[data-theme^="dark"] .splash { color: #8c8f95; }
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
/* Linked from index.html rather than imported by global.css, so the faces are known before the
|
||||
splash first paints: the dev server injects the app CSS only once the bundle runs. */
|
||||
@import "@fontsource-variable/inter";
|
||||
@import "@fontsource-variable/jetbrains-mono";
|
||||
Reference in New Issue
Block a user