Skip to content

Commit e26f32c

Browse files
congwang-mkclaude
congwang-mk
and
claude
committed
Redesign site with precision-engineering aesthetic
Replace generic enterprise-blue theme with a distinctive dark-header, amber-accent design system. Switch typography to DM Sans + IBM Plex Mono. Introduce left-border accent cards, amber hover states, dark navigation and dropdowns, and monospace labels throughout. All content and URLs unchanged. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 55a55f7 commit e26f32c

11 files changed

Lines changed: 678 additions & 553 deletions

File tree

‎_layouts/default.html‎

Lines changed: 64 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
<!-- Using a specific versioned CDN for Lucide icons -->
3333
<script src="https://cdn.jsdelivr.net/npm/lucide-static@0.269.0/dist/umd/lucide.min.js"></script>
3434
<!-- Add Google Fonts for Inter and JetBrains Mono -->
35-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
35+
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;1,9..40,400&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
3636
<!-- Favicon and meta tags -->
3737
<link rel="icon" type="image/png" href="/assets/images/multikernel-logo.png">
3838
<meta name="description" content="{% if page.description %}{{ page.description }}{% else %}Enterprise Linux Kernel Solutions - Multikernel Technologies delivers highly-customized and well-tuned Linux kernels for different business services.{% endif %}">
@@ -49,21 +49,21 @@
4949
position: fixed;
5050
top: 0; left: 0; right: 0;
5151
width: 100%;
52-
height: 72px;
53-
background: rgba(255,255,255,0.97);
54-
backdrop-filter: blur(12px);
55-
-webkit-backdrop-filter: blur(12px);
56-
border-bottom: 1px solid rgba(0,0,0,0.06);
52+
height: 64px;
53+
background: rgba(15, 23, 42, 0.97);
54+
backdrop-filter: blur(16px);
55+
-webkit-backdrop-filter: blur(16px);
56+
border-bottom: 1px solid rgba(255,255,255,0.06);
5757
z-index: 999999;
5858
}
5959
.site-header-inner {
60-
max-width: 1440px;
60+
max-width: 1280px;
6161
margin: 0 auto;
62-
padding: 0 60px;
63-
height: 72px;
62+
padding: 0 40px;
63+
height: 64px;
6464
display: flex;
6565
align-items: center;
66-
gap: 40px;
66+
gap: 32px;
6767
}
6868
.site-logo {
6969
display: flex;
@@ -72,44 +72,44 @@
7272
flex-shrink: 0;
7373
}
7474
.site-logo img {
75-
height: 40px;
75+
height: 34px;
7676
width: auto;
7777
}
7878
.site-nav {
7979
display: flex;
8080
align-items: center;
81-
gap: 2px;
81+
gap: 1px;
8282
flex: 1;
8383
}
8484
.site-nav-link {
85-
padding: 8px 16px;
86-
font-size: 14px;
85+
padding: 6px 14px;
86+
font-size: 13px;
8787
font-weight: 500;
88-
color: #374151;
88+
color: rgba(255,255,255,0.55);
8989
text-decoration: none;
90-
border-radius: 6px;
90+
border-radius: 4px;
9191
transition: color 0.15s, background 0.15s;
9292
white-space: nowrap;
9393
}
9494
.site-nav-link:hover {
95-
color: #111827;
96-
background: #f3f4f6;
95+
color: rgba(255,255,255,0.9);
96+
background: rgba(255,255,255,0.06);
9797
}
9898
.site-nav-link.active {
99-
color: #111827;
99+
color: white;
100100
font-weight: 600;
101101
}
102102
/* Dropdown */
103103
.site-nav-dropdown {
104104
position: relative;
105105
}
106106
.site-nav-dropdown-trigger {
107-
padding: 8px 16px;
108-
font-size: 14px;
107+
padding: 6px 14px;
108+
font-size: 13px;
109109
font-weight: 500;
110-
color: #374151;
110+
color: rgba(255,255,255,0.55);
111111
text-decoration: none;
112-
border-radius: 6px;
112+
border-radius: 4px;
113113
cursor: pointer;
114114
display: flex;
115115
align-items: center;
@@ -122,17 +122,17 @@
122122
}
123123
.site-nav-dropdown-trigger:hover,
124124
.site-nav-dropdown:hover .site-nav-dropdown-trigger {
125-
color: #111827;
126-
background: #f3f4f6;
125+
color: rgba(255,255,255,0.9);
126+
background: rgba(255,255,255,0.06);
127127
}
128128
.site-nav-dropdown-trigger.active {
129-
color: #111827;
129+
color: white;
130130
font-weight: 600;
131131
}
132132
.site-nav-dropdown-trigger svg {
133133
width: 10px;
134134
height: 10px;
135-
opacity: 0.5;
135+
opacity: 0.4;
136136
transition: transform 0.15s;
137137
}
138138
.site-nav-dropdown:hover .site-nav-dropdown-trigger svg {
@@ -143,12 +143,12 @@
143143
position: absolute;
144144
top: calc(100% + 8px);
145145
left: 0;
146-
min-width: 240px;
147-
background: white;
148-
border: 1px solid rgba(0,0,0,0.08);
149-
border-radius: 10px;
150-
box-shadow: 0 12px 40px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.04);
151-
padding: 6px;
146+
min-width: 260px;
147+
background: #1e293b;
148+
border: 1px solid rgba(255,255,255,0.08);
149+
border-radius: 6px;
150+
box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
151+
padding: 4px;
152152
z-index: 1000;
153153
}
154154
.site-nav-dropdown:hover .site-nav-dropdown-menu {
@@ -159,72 +159,74 @@
159159
padding: 10px 14px;
160160
font-size: 13px;
161161
font-weight: 500;
162-
color: #374151;
162+
color: rgba(255,255,255,0.6);
163163
text-decoration: none;
164-
border-radius: 7px;
164+
border-radius: 4px;
165165
transition: color 0.15s, background 0.15s;
166166
line-height: 1.3;
167167
}
168168
.site-nav-dropdown-item:hover {
169-
color: #111827;
170-
background: #f3f4f6;
169+
color: white;
170+
background: rgba(255,255,255,0.06);
171171
}
172172
.site-nav-dropdown-item.active {
173-
color: #111827;
174-
background: #f3f4f6;
173+
color: white;
174+
background: rgba(255,255,255,0.08);
175175
font-weight: 600;
176176
}
177177
.site-nav-dropdown-item small {
178178
display: block;
179-
font-size: 12px;
179+
font-size: 11px;
180180
font-weight: 400;
181-
color: #9ca3af;
181+
color: rgba(255,255,255,0.3);
182182
margin-top: 3px;
183+
font-family: 'IBM Plex Mono', monospace;
183184
}
184185
/* GitHub icon */
185186
.site-nav-icon {
186187
display: flex;
187188
align-items: center;
188189
justify-content: center;
189-
width: 36px;
190-
height: 36px;
191-
color: #6b7280;
190+
width: 34px;
191+
height: 34px;
192+
color: rgba(255,255,255,0.4);
192193
text-decoration: none;
193-
border-radius: 8px;
194+
border-radius: 4px;
194195
transition: color 0.15s, background 0.15s;
195196
}
196197
.site-nav-icon:hover {
197-
color: #111827;
198-
background: #f3f4f6;
198+
color: white;
199+
background: rgba(255,255,255,0.06);
199200
}
200201
.site-nav-icon svg {
201-
width: 20px;
202-
height: 20px;
202+
width: 18px;
203+
height: 18px;
203204
}
204205
/* CTA */
205206
.site-nav-cta {
206207
display: inline-flex;
207208
align-items: center;
208-
padding: 9px 20px;
209+
padding: 7px 18px;
209210
font-size: 13px;
210211
font-weight: 600;
211-
color: white;
212-
background: #111827;
212+
color: #0f172a;
213+
background: #e2a23b;
213214
text-decoration: none;
214-
border-radius: 8px;
215+
border-radius: 4px;
215216
margin-left: 4px;
216-
transition: background 0.15s;
217+
transition: background 0.15s, box-shadow 0.15s;
217218
white-space: nowrap;
218219
}
219220
.site-nav-cta:hover {
220-
background: #374151;
221+
background: #f5b829;
222+
box-shadow: 0 0 16px rgba(226, 162, 59, 0.25);
221223
}
222224
/* Divider */
223225
.site-nav-divider {
224226
width: 1px;
225-
height: 24px;
226-
background: #e5e7eb;
227-
margin: 0 12px;
227+
height: 20px;
228+
background: rgba(255,255,255,0.1);
229+
margin: 0 10px;
228230
margin-left: auto;
229231
flex-shrink: 0;
230232
}
@@ -237,16 +239,16 @@
237239
border: none;
238240
background: none;
239241
cursor: pointer;
240-
border-radius: 8px;
242+
border-radius: 4px;
241243
margin-left: auto;
242244
}
243245
.site-mobile-toggle:hover {
244-
background: #f3f4f6;
246+
background: rgba(255,255,255,0.06);
245247
}
246248
.site-mobile-toggle span {
247-
width: 20px;
249+
width: 18px;
248250
height: 2px;
249-
background: #374151;
251+
background: rgba(255,255,255,0.6);
250252
display: block;
251253
border-radius: 1px;
252254
}

0 commit comments

Comments
 (0)