Skip to content

Commit 927bec7

Browse files
xuafengxuafeng
committed
Refine w/ codx
1 parent 204f3b5 commit 927bec7

3 files changed

Lines changed: 603 additions & 313 deletions

File tree

‎blogs.html‎

Lines changed: 196 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,15 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Blogs - System Intelligence</title>
77
<style>
8+
:root {
9+
--page-bg: #f8fafc;
10+
--surface: #ffffff;
11+
--text-primary: #0f172a;
12+
--text-secondary: #4b5563;
13+
--accent: #4f46e5;
14+
--accent-strong: #4338ca;
15+
}
16+
817
* {
918
margin: 0;
1019
padding: 0;
@@ -14,13 +23,15 @@
1423
body {
1524
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
1625
line-height: 1.8;
17-
color: #1a1a1a;
18-
background-color: #ffffff;
26+
color: var(--text-primary);
27+
background: var(--page-bg);
28+
min-height: 100vh;
1929
}
2030

2131
header {
22-
background: #ffffff;
23-
border-bottom: 1px solid #e5e7eb;
32+
background: rgba(255, 255, 255, 0.95);
33+
border-bottom: 1px solid rgba(229, 231, 235, 0.6);
34+
backdrop-filter: blur(12px);
2435
padding: 1rem 0;
2536
position: sticky;
2637
top: 0;
@@ -39,101 +50,182 @@
3950
.logo {
4051
font-size: 1.5rem;
4152
font-weight: 600;
42-
color: #1a1a1a;
53+
color: var(--text-primary);
54+
letter-spacing: -0.02em;
4355
}
4456

4557
nav ul {
4658
list-style: none;
4759
display: flex;
48-
gap: 2rem;
60+
gap: 1.6rem;
4961
}
5062

5163
nav a {
52-
color: #4b5563;
64+
color: var(--text-secondary);
5365
text-decoration: none;
54-
transition: color 0.3s;
5566
font-size: 0.95rem;
67+
font-weight: 500;
68+
transition: color 0.2s ease, transform 0.2s ease;
5669
}
5770

5871
nav a:hover {
59-
color: #1a1a1a;
72+
color: var(--accent);
73+
transform: translateY(-1px);
74+
}
75+
76+
main {
77+
padding: 0 1.5rem 5rem;
6078
}
6179

6280
.container {
63-
max-width: 800px;
81+
max-width: 960px;
6482
margin: 0 auto;
65-
padding: 3rem 2rem 6rem;
6683
}
6784

68-
h1 {
69-
font-size: 2.5rem;
70-
margin-bottom: 2rem;
85+
.hero {
86+
background: linear-gradient(135deg, rgba(79, 70, 229, 0.15), rgba(14, 165, 233, 0.12));
87+
border-radius: 28px;
88+
padding: clamp(2.75rem, 6vw, 4rem);
89+
margin-top: 3rem;
90+
margin-bottom: clamp(2.75rem, 6vw, 4.25rem);
91+
position: relative;
92+
overflow: hidden;
93+
box-shadow: 0 22px 48px -28px rgba(15, 23, 42, 0.4);
94+
}
95+
96+
.hero::after {
97+
content: "";
98+
position: absolute;
99+
inset: 0;
100+
background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.55), transparent 58%);
101+
opacity: 0.8;
102+
pointer-events: none;
103+
}
104+
105+
.hero-content {
106+
position: relative;
107+
z-index: 1;
108+
max-width: 620px;
109+
}
110+
111+
.hero-label {
112+
display: inline-flex;
113+
align-items: center;
114+
gap: 0.35rem;
115+
font-size: 0.85rem;
116+
letter-spacing: 0.08em;
117+
text-transform: uppercase;
118+
font-weight: 600;
119+
color: var(--accent-strong);
120+
background: rgba(255, 255, 255, 0.7);
121+
padding: 0.4rem 0.75rem;
122+
border-radius: 999px;
123+
margin-bottom: 1.5rem;
124+
}
125+
126+
.hero h1 {
127+
font-size: clamp(2.4rem, 4vw, 3.4rem);
128+
line-height: 1.12;
71129
font-weight: 700;
72-
color: #1a1a1a;
130+
letter-spacing: -0.03em;
131+
margin-bottom: 1.25rem;
132+
color: #0b1120;
133+
}
134+
135+
.hero-subtitle {
136+
font-size: 1.08rem;
137+
color: rgba(15, 23, 42, 0.88);
138+
max-width: 580px;
139+
}
140+
141+
.section {
142+
margin-bottom: clamp(2.75rem, 6vw, 4.25rem);
143+
}
144+
145+
.section-title {
146+
font-size: 1.65rem;
147+
margin-bottom: 1.6rem;
148+
font-weight: 600;
149+
letter-spacing: -0.01em;
73150
}
74151

75-
.blog-post {
76-
margin-bottom: 3rem;
77-
padding-bottom: 3rem;
78-
border-bottom: 1px solid #e5e7eb;
152+
.post-grid {
153+
display: grid;
154+
gap: 1.6rem;
79155
}
80156

81-
.blog-post:last-child {
82-
border-bottom: none;
157+
.post-card {
158+
background: var(--surface);
159+
border-radius: 22px;
160+
padding: clamp(1.85rem, 4vw, 2.75rem);
161+
box-shadow: 0 18px 36px -24px rgba(15, 23, 42, 0.32);
162+
border: 1px solid rgba(15, 23, 42, 0.05);
163+
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
83164
}
84165

85-
.blog-post h2 {
86-
font-size: 1.75rem;
87-
margin-bottom: 0.5rem;
166+
.post-card:hover {
167+
transform: translateY(-4px);
168+
box-shadow: 0 24px 48px -26px rgba(79, 70, 229, 0.32);
169+
border-color: rgba(79, 70, 229, 0.2);
170+
}
171+
172+
.post-card h2 {
173+
font-size: 1.6rem;
174+
margin-bottom: 0.25rem;
88175
font-weight: 600;
176+
letter-spacing: -0.01em;
89177
}
90178

91-
.blog-post h2 a {
92-
color: #1a1a1a;
179+
.post-card h2 a {
180+
color: var(--text-primary);
93181
text-decoration: none;
94-
transition: color 0.3s;
182+
transition: color 0.2s ease;
95183
}
96184

97-
.blog-post h2 a:hover {
98-
color: #2563eb;
185+
.post-card h2 a:hover {
186+
color: var(--accent);
99187
}
100188

101-
.blog-meta {
102-
color: #6b7280;
189+
.post-meta {
190+
color: rgba(79, 70, 229, 0.8);
103191
font-size: 0.95rem;
104-
margin-bottom: 1rem;
192+
font-weight: 500;
193+
margin-bottom: 1.2rem;
105194
}
106195

107-
.blog-excerpt {
108-
color: #374151;
196+
.post-excerpt {
197+
color: var(--text-secondary);
109198
font-size: 1.05rem;
110-
line-height: 1.8;
111-
margin-bottom: 1rem;
199+
margin-bottom: 1.4rem;
112200
}
113201

114-
.read-more {
115-
color: #2563eb;
202+
.post-link {
203+
display: inline-flex;
204+
align-items: center;
205+
gap: 0.4rem;
206+
color: var(--accent);
116207
text-decoration: none;
117-
font-weight: 500;
208+
font-weight: 600;
209+
letter-spacing: 0.01em;
118210
font-size: 0.95rem;
119211
}
120212

121-
.read-more:hover {
122-
text-decoration: underline;
213+
.post-link:hover {
214+
color: var(--accent-strong);
123215
}
124216

125217
.coming-soon {
126218
text-align: center;
127219
padding: 4rem 2rem;
128-
color: #6b7280;
129-
font-size: 1.1rem;
220+
color: rgba(15, 23, 42, 0.7);
221+
font-size: 1.05rem;
130222
}
131223

132224
footer {
133-
background: #f9fafb;
134-
border-top: 1px solid #e5e7eb;
135-
padding: 2rem 0;
136-
margin-top: 4rem;
225+
background: #0b1120;
226+
color: rgba(226, 232, 240, 0.9);
227+
border-top: 1px solid rgba(255, 255, 255, 0.05);
228+
padding: 2.6rem 0;
137229
}
138230

139231
.footer-content {
@@ -143,36 +235,55 @@
143235
display: flex;
144236
justify-content: space-between;
145237
align-items: center;
238+
gap: 2rem;
239+
flex-wrap: wrap;
146240
}
147241

148242
.social-links {
149243
display: flex;
150244
gap: 1.5rem;
245+
flex-wrap: wrap;
151246
}
152247

153248
.social-links a {
154-
color: #6b7280;
249+
color: rgba(226, 232, 240, 0.7);
155250
text-decoration: none;
156-
transition: color 0.3s;
251+
transition: color 0.2s ease;
252+
font-weight: 500;
253+
letter-spacing: 0.01em;
157254
}
158255

159256
.social-links a:hover {
160-
color: #1a1a1a;
257+
color: #ffffff;
161258
}
162259

163-
@media (max-width: 768px) {
164-
nav ul {
260+
@media (max-width: 640px) {
261+
nav {
165262
flex-direction: column;
263+
align-items: flex-start;
166264
gap: 1rem;
167265
}
168266

169-
h1 {
170-
font-size: 2rem;
267+
nav ul {
268+
gap: 1rem;
269+
}
270+
271+
nav a {
272+
font-size: 0.9rem;
273+
}
274+
275+
.hero {
276+
padding: 2.35rem;
277+
}
278+
279+
.hero h1 {
280+
font-size: 2.2rem;
171281
}
172282

173283
.footer-content {
174284
flex-direction: column;
175-
gap: 1rem;
285+
align-items: flex-start;
286+
gap: 1.25rem;
176287
}
177288
}
178289
</style>
@@ -189,39 +300,42 @@
189300
</nav>
190301
</header>
191302

192-
<div class="container">
193-
<h1>Blogs</h1>
194-
195-
<article class="blog-post">
196-
<h2><a href="https://www.sigops.org/2025/the-next-horizon-of-system-intelligence/" target="_blank">The Next Horizon of System Intelligence</a></h2>
197-
<div class="blog-meta">September 25, 2025 • Chieh-Jan Mike Liang, Haoran Qiu, Francis Y. Yan, Tianyin Xu, Lidong Zhou</div>
198-
<p class="blog-excerpt">
199-
This blog post introduces a series examining AI's role in systems research. We propose a paradigm shift toward "endogenous system intelligence"—where systems can self-evolve autonomously rather than relying on external human direction. Generative AI represents another inflection point in computing, challenging traditional approaches to system design, optimization, and troubleshooting.
200-
</p>
201-
<a href="https://www.sigops.org/2025/the-next-horizon-of-system-intelligence/" target="_blank" class="read-more">Read more →</a>
202-
</article>
203-
204-
<!-- Example blog post structure - uncomment and duplicate when adding more posts
205-
<article class="blog-post">
206-
<h2><a href="#">Blog Post Title Goes Here</a></h2>
207-
<div class="blog-meta">January 15, 2025 • Author Name</div>
208-
<p class="blog-excerpt">
209-
This is a brief excerpt or summary of the blog post. It should give readers
210-
a good sense of what the post is about and entice them to read more.
211-
</p>
212-
<a href="#" class="read-more">Read more →</a>
213-
</article>
214-
-->
215-
</div>
303+
<main>
304+
<div class="container">
305+
<section class="hero">
306+
<div class="hero-content">
307+
<span class="hero-label">Blogs</span>
308+
<h1>Insights and research notes.</h1>
309+
<p class="hero-subtitle">Explore perspectives on autonomous systems design, AI tooling for systems research, and the experiments shaping this emerging discipline.</p>
310+
</div>
311+
</section>
312+
313+
<section class="section">
314+
<h2 class="section-title">Latest Posts</h2>
315+
<div class="post-grid">
316+
<article class="post-card">
317+
<h2><a href="https://www.sigops.org/2025/the-next-horizon-of-system-intelligence/" target="_blank" rel="noopener">The Next Horizon of System Intelligence</a></h2>
318+
<div class="post-meta">September 25, 2025 · Chieh-Jan Mike Liang, Haoran Qiu, Francis Y. Yan, Tianyin Xu, Lidong Zhou</div>
319+
<p class="post-excerpt">
320+
This piece introduces a series examining AI's role in systems research. We propose a shift toward endogenous system intelligence—systems that self-evolve autonomously instead of relying solely on human intervention.
321+
</p>
322+
<a class="post-link" href="https://www.sigops.org/2025/the-next-horizon-of-system-intelligence/" target="_blank" rel="noopener">Read the article →</a>
323+
</article>
324+
</div>
325+
</section>
326+
327+
<div class="coming-soon">More research notes and updates are on the way. Stay tuned.</div>
328+
</div>
329+
</main>
216330

217331
<footer>
218332
<div class="footer-content">
219333
<div>&copy; 2025 System Intelligence Community</div>
220334
<div class="social-links">
221335
<a href="mailto:systemintelligence0@gmail.com">Email</a>
222-
<a href="https://github.com/systemintelligence" target="_blank">GitHub</a>
223-
<a href="https://huggingface.co/systemintelligence" target="_blank">HuggingFace</a>
224-
<a href="https://x.com/SysIntelligence" target="_blank">X</a>
336+
<a href="https://github.com/systemintelligence" target="_blank" rel="noopener">GitHub</a>
337+
<a href="https://huggingface.co/systemintelligence" target="_blank" rel="noopener">HuggingFace</a>
338+
<a href="https://x.com/SysIntelligence" target="_blank" rel="noopener">X</a>
225339
</div>
226340
</div>
227341
</footer>

0 commit comments

Comments
 (0)