feat(pixel): swap fonts to Press Start 2P and overhaul CSS variables

This commit is contained in:
M1ngdaXie
2026-03-26 15:16:51 -07:00
parent 8b6cb0e039
commit c374acc223
2 changed files with 17 additions and 10 deletions

View File

@@ -7,7 +7,7 @@
<title>MingdaOS</title> <title>MingdaOS</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

View File

@@ -1,7 +1,7 @@
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { :root {
--font-ui: 'Outfit', system-ui, sans-serif; --font-ui: 'Press Start 2P', monospace;
--font-mono: 'Fira Code', 'Courier New', monospace; --font-mono: 'Fira Code', 'Courier New', monospace;
--accent-red: #ff453a; --accent-red: #ff453a;
@@ -9,18 +9,23 @@
--accent-green: #30d158; --accent-green: #30d158;
--accent-blue: #0a84ff; --accent-blue: #0a84ff;
--accent-purple: #bf5af2; --accent-purple: #bf5af2;
--accent-teal: #64d2ff; --accent-teal: #00ffff;
--accent-cyan: #00ffff;
--glass-bg: rgba(30, 30, 40, 0.55); --glass-bg: #0d0d1a;
--glass-border: rgba(255, 255, 255, 0.08); --glass-border: #333333;
--glass-blur: blur(24px) saturate(1.4); --glass-blur: none;
--glass-shadow: 0 8px 40px rgba(0, 0, 0, 0.35); --glass-shadow: 4px 4px 0 #000000;
--radius-window: 12px; --radius-window: 0px;
--radius-icon: 14px; --radius-icon: 0px;
--menubar-height: 28px; --menubar-height: 28px;
--dock-height: 72px; --dock-height: 72px;
--titlebar-height: 36px; --titlebar-height: 36px;
--pixel-border: 2px solid #333333;
--pixel-shadow: 4px 4px 0 #000000;
--pixel-cyan: #00ffff;
} }
html, body, #root { html, body, #root {
@@ -28,5 +33,7 @@ html, body, #root {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
font-family: var(--font-ui); font-family: var(--font-ui);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: none;
font-smooth: never;
image-rendering: pixelated;
} }