Skip to content

Commit 91c1805

Browse files
JinChen0056JinChen0056
committed
Fix RSS 2026 overview theme strip
1 parent deaf34b commit 91c1805

2 files changed

Lines changed: 155 additions & 120 deletions

File tree

‎public/rss2026/index.html‎

Lines changed: 22 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<meta name="keywords" content="RSS 2026, OpenDriveLab, robotics, humanoid robots, whole-body intelligence, robot learning">
1212
<link rel="icon" href="../images/rss2026/odl-d.png">
1313
<link rel="preload" as="image" href="../images/rss2026/rss2026-venue-hero.jpg">
14-
<link rel="stylesheet" href="./styles.css">
14+
<link rel="stylesheet" href="./styles.css?v=20260625-2">
1515
</head>
1616
<body>
1717
<a class="skip-link" href="#conference">Skip to content</a>
@@ -53,54 +53,27 @@ <h1 id="hero-title">OpenDriveLab at RSS 2026</h1>
5353
<div class="section__inner overview-heading">
5454
<p class="kicker">Overview</p>
5555
<h2 class="sr-only" id="overview-title">OpenDriveLab at RSS 2026 focuses on robot world models, long-horizon control, open-source systems, and real-world autonomy.</h2>
56-
<div class="overview-motif-grid" aria-label="OpenDriveLab RSS 2026 themes">
57-
<article class="overview-motif overview-motif--blue">
58-
<span class="overview-motif__icon" aria-hidden="true">
59-
<svg viewBox="0 0 48 48" focusable="false">
60-
<path d="M12 18 24 11l12 7-12 7-12-7Z"></path>
61-
<path d="M12 24 24 31l12-7"></path>
62-
<path d="M12 30 24 37l12-7"></path>
63-
</svg>
64-
</span>
65-
<span class="overview-motif__copy"><strong>World Models</strong><em>imagine</em></span>
66-
</article>
67-
<article class="overview-motif overview-motif--green">
68-
<span class="overview-motif__icon" aria-hidden="true">
69-
<svg viewBox="0 0 48 48" focusable="false">
70-
<path d="M9 34c7-18 23-18 30-2"></path>
71-
<path d="M31 23h8v8"></path>
72-
<path d="M15 34v-6"></path>
73-
<path d="M24 34v-14"></path>
74-
</svg>
75-
</span>
76-
<span class="overview-motif__copy"><strong>Long-horizon Control</strong><em>execute</em></span>
77-
</article>
78-
<article class="overview-motif overview-motif--orange">
79-
<span class="overview-motif__icon" aria-hidden="true">
80-
<svg viewBox="0 0 48 48" focusable="false">
81-
<path d="M13 24h22"></path>
82-
<path d="M24 13v22"></path>
83-
<circle cx="13" cy="24" r="5"></circle>
84-
<circle cx="24" cy="13" r="5"></circle>
85-
<circle cx="35" cy="24" r="5"></circle>
86-
<circle cx="24" cy="35" r="5"></circle>
87-
</svg>
88-
</span>
89-
<span class="overview-motif__copy"><strong>Open Systems</strong><em>release</em></span>
90-
</article>
91-
<article class="overview-motif overview-motif--cyan">
92-
<span class="overview-motif__icon" aria-hidden="true">
93-
<svg viewBox="0 0 48 48" focusable="false">
94-
<circle cx="24" cy="24" r="15"></circle>
95-
<path d="M24 9v6"></path>
96-
<path d="M24 33v6"></path>
97-
<path d="M9 24h6"></path>
98-
<path d="M33 24h6"></path>
99-
<path d="m19 29 10-10"></path>
100-
</svg>
101-
</span>
102-
<span class="overview-motif__copy"><strong>Real-world Autonomy</strong><em>deploy</em></span>
103-
</article>
56+
<div class="overview-theme-line" aria-label="OpenDriveLab RSS 2026 themes">
57+
<span class="overview-theme overview-theme--blue">
58+
<span class="overview-theme__icon" aria-hidden="true"></span>
59+
<strong>World Models</strong>
60+
<em>Imagine</em>
61+
</span>
62+
<span class="overview-theme overview-theme--green">
63+
<span class="overview-theme__icon" aria-hidden="true"></span>
64+
<strong>Long-horizon Control</strong>
65+
<em>Execute</em>
66+
</span>
67+
<span class="overview-theme overview-theme--orange">
68+
<span class="overview-theme__icon" aria-hidden="true"></span>
69+
<strong>Open Systems</strong>
70+
<em>Release</em>
71+
</span>
72+
<span class="overview-theme overview-theme--cyan">
73+
<span class="overview-theme__icon" aria-hidden="true"></span>
74+
<strong>Real-world Autonomy</strong>
75+
<em>Deploy</em>
76+
</span>
10477
</div>
10578
</div>
10679

‎public/rss2026/styles.css‎

Lines changed: 133 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -401,89 +401,158 @@ main > .section:not(.hero)::after {
401401
color: var(--blue);
402402
}
403403

404-
.overview-motif-grid {
405-
display: grid;
406-
grid-template-columns: repeat(4, minmax(0, 1fr));
407-
gap: 18px;
408-
max-width: 1180px;
409-
}
410-
411-
.overview-motif {
412-
--motif: var(--blue);
413-
--motif-bg: rgba(22, 137, 178, 0.08);
404+
.overview-theme-line {
414405
display: flex;
406+
width: min(1080px, 100%);
415407
align-items: center;
416-
gap: 16px;
417-
min-height: 128px;
418-
padding: 24px 22px;
408+
gap: 0;
409+
padding: 16px 18px;
419410
border: 1px solid rgba(20, 31, 34, 0.08);
420411
border-radius: 8px;
421412
background:
422-
radial-gradient(circle at 12% 0%, var(--motif-bg), transparent 44%),
413+
linear-gradient(90deg, rgba(47, 137, 182, 0.06), rgba(118, 168, 79, 0.06), rgba(212, 136, 44, 0.055), rgba(75, 179, 195, 0.06)),
423414
rgba(255, 255, 255, 0.72);
424415
box-shadow: 0 18px 40px rgba(16, 28, 31, 0.05);
425416
}
426417

427-
.overview-motif--blue {
428-
--motif: #2f89b6;
429-
--motif-bg: rgba(47, 137, 182, 0.1);
418+
.overview-theme {
419+
--theme: var(--blue);
420+
--theme-bg: rgba(47, 137, 182, 0.1);
421+
display: inline-flex;
422+
flex: 1 1 0;
423+
min-width: 0;
424+
align-items: center;
425+
gap: 8px;
426+
padding: 0 16px;
427+
color: var(--theme);
428+
white-space: nowrap;
429+
}
430+
431+
.overview-theme:first-child {
432+
padding-left: 0;
430433
}
431434

432-
.overview-motif--green {
433-
--motif: #76a84f;
434-
--motif-bg: rgba(118, 168, 79, 0.11);
435+
.overview-theme + .overview-theme {
436+
border-left: 1px solid rgba(20, 31, 34, 0.08);
435437
}
436438

437-
.overview-motif--orange {
438-
--motif: #d4882c;
439-
--motif-bg: rgba(212, 136, 44, 0.12);
439+
.overview-theme--blue {
440+
--theme: #2f89b6;
441+
--theme-bg: rgba(47, 137, 182, 0.11);
440442
}
441443

442-
.overview-motif--cyan {
443-
--motif: #4bb3c3;
444-
--motif-bg: rgba(75, 179, 195, 0.11);
444+
.overview-theme--green {
445+
--theme: #76a84f;
446+
--theme-bg: rgba(118, 168, 79, 0.12);
445447
}
446448

447-
.overview-motif__icon {
448-
display: grid;
449+
.overview-theme--orange {
450+
--theme: #d4882c;
451+
--theme-bg: rgba(212, 136, 44, 0.12);
452+
}
453+
454+
.overview-theme--cyan {
455+
--theme: #4bb3c3;
456+
--theme-bg: rgba(75, 179, 195, 0.12);
457+
}
458+
459+
.overview-theme__icon {
460+
position: relative;
461+
display: inline-block;
449462
flex: 0 0 auto;
450-
width: 58px;
451-
height: 58px;
452-
place-items: center;
463+
width: 26px;
464+
height: 26px;
453465
border-radius: 8px;
454-
color: var(--motif);
455-
background: var(--motif-bg);
466+
background: var(--theme-bg);
456467
}
457468

458-
.overview-motif__icon svg {
459-
width: 34px;
460-
height: 34px;
461-
fill: none;
462-
stroke: currentColor;
463-
stroke-linecap: round;
464-
stroke-linejoin: round;
465-
stroke-width: 3;
469+
.overview-theme__icon::before,
470+
.overview-theme__icon::after {
471+
position: absolute;
472+
content: "";
466473
}
467474

468-
.overview-motif__copy {
469-
display: grid;
470-
gap: 7px;
471-
min-width: 0;
475+
.overview-theme--blue .overview-theme__icon::before {
476+
inset: 7px;
477+
border-radius: 2px;
478+
background: currentColor;
479+
opacity: 0.28;
480+
transform: rotate(45deg);
472481
}
473482

474-
.overview-motif__copy strong {
483+
.overview-theme--blue .overview-theme__icon::after {
484+
inset: 5px 8px 9px;
485+
border-bottom: 3px solid currentColor;
486+
border-radius: 2px;
487+
transform: rotate(45deg);
488+
}
489+
490+
.overview-theme--green .overview-theme__icon::before {
491+
left: 6px;
492+
right: 6px;
493+
bottom: 8px;
494+
height: 10px;
495+
border-top: 3px solid currentColor;
496+
border-right: 3px solid currentColor;
497+
border-radius: 0 8px 0 0;
498+
}
499+
500+
.overview-theme--green .overview-theme__icon::after {
501+
right: 5px;
502+
top: 7px;
503+
width: 7px;
504+
height: 7px;
505+
border-top: 3px solid currentColor;
506+
border-right: 3px solid currentColor;
507+
transform: rotate(45deg);
508+
}
509+
510+
.overview-theme--orange .overview-theme__icon::before {
511+
inset: 6px;
512+
border: 3px solid currentColor;
513+
border-radius: 50%;
514+
}
515+
516+
.overview-theme--orange .overview-theme__icon::after {
517+
top: 12px;
518+
left: 5px;
519+
width: 16px;
520+
height: 3px;
521+
border-radius: 999px;
522+
background: currentColor;
523+
}
524+
525+
.overview-theme--cyan .overview-theme__icon::before {
526+
inset: 6px;
527+
border: 3px solid currentColor;
528+
border-radius: 50%;
529+
}
530+
531+
.overview-theme--cyan .overview-theme__icon::after {
532+
top: 11px;
533+
left: 11px;
534+
width: 4px;
535+
height: 4px;
536+
border-radius: 999px;
537+
background: currentColor;
538+
box-shadow: 7px 0 0 currentColor, 0 7px 0 currentColor;
539+
}
540+
541+
.overview-theme strong {
542+
overflow: hidden;
475543
color: var(--ink);
476-
font-size: 1.08rem;
544+
font-size: 1rem;
477545
font-weight: 900;
478-
line-height: 1.12;
546+
line-height: 1.1;
547+
text-overflow: ellipsis;
479548
}
480549

481-
.overview-motif__copy em {
550+
.overview-theme em {
482551
color: var(--muted);
483-
font-size: 0.8rem;
552+
font-size: 0.78rem;
484553
font-style: normal;
485554
font-weight: 850;
486-
letter-spacing: 0.08em;
555+
letter-spacing: 0.07em;
487556
line-height: 1;
488557
text-transform: uppercase;
489558
}
@@ -2326,24 +2395,15 @@ h4 {
23262395
margin-bottom: 46px;
23272396
}
23282397

2329-
.overview-motif-grid {
2330-
grid-template-columns: repeat(2, minmax(0, 1fr));
2331-
gap: 14px;
2332-
}
2333-
2334-
.overview-motif {
2335-
min-height: 112px;
2336-
padding: 18px;
2337-
}
2338-
2339-
.overview-motif__icon {
2340-
width: 50px;
2341-
height: 50px;
2398+
.overview-theme-line {
2399+
flex-wrap: wrap;
2400+
gap: 10px 0;
2401+
padding: 14px;
23422402
}
23432403

2344-
.overview-motif__icon svg {
2345-
width: 30px;
2346-
height: 30px;
2404+
.overview-theme {
2405+
flex-basis: 50%;
2406+
padding: 0 10px;
23472407
}
23482408

23492409
.kicker {
@@ -2464,12 +2524,14 @@ h4 {
24642524
}
24652525

24662526
@media (max-width: 560px) {
2467-
.overview-motif-grid {
2468-
grid-template-columns: 1fr;
2527+
.overview-theme-line {
2528+
display: grid;
2529+
gap: 12px;
24692530
}
24702531

2471-
.overview-motif {
2472-
min-height: 0;
2532+
.overview-theme {
2533+
padding: 0;
2534+
border-left: 0 !important;
24732535
}
24742536
}
24752537

0 commit comments

Comments
 (0)