Skip to content

Commit 87d09da

Browse files
JinChen0056JinChen0056
committed
Refine RSS live demo layout
1 parent d3a3dbc commit 87d09da

2 files changed

Lines changed: 48 additions & 22 deletions

File tree

‎public/rss2026/index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
<link rel="preconnect" href="https://fonts.googleapis.com">
2525
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
2626
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,600;1,700&family=Playfair+Display:ital,wght@1,700;1,800&display=swap" rel="stylesheet">
27-
<link rel="stylesheet" href="./styles.css?v=20260629-09">
27+
<link rel="stylesheet" href="./styles.css?v=20260629-10">
2828
</head>
2929
<body>
3030
<a class="skip-link" href="#conference">Skip to content</a>
@@ -448,7 +448,7 @@ <h3 id="workshop-title">Towards Robust Execution of Long-Horizon Whole-Body Cont
448448

449449
<div class="demo-program-copy">
450450
<p class="kicker event-kicker demo-kicker">Live Demo</p>
451-
<p class="demo-program-lead">Kick, recover, and stress-test humanoid control with us. Hands-on demos for fast feedback, balance recovery, and whole-body execution.</p>
451+
<p class="demo-program-lead">A focused field demo of humanoid football: kick, recover, and stay balanced under contact.</p>
452452
</div>
453453
<div class="demo-mini-grid" aria-label="Workshop demo program">
454454
<article>
@@ -459,11 +459,11 @@ <h3 id="workshop-title">Towards Robust Execution of Long-Horizon Whole-Body Cont
459459
</div>
460460
<div class="demo-card-body">
461461
<h4>RoboNaldo Football</h4>
462-
<p>Power shots from a humanoid striker.</p>
462+
<p>Contact-rich humanoid football with live kicking, recovery, and field deployment.</p>
463463
<ul class="demo-highlights" aria-label="RoboNaldo demo highlights">
464-
<li>Precision kick</li>
465-
<li>Balance recovery</li>
466-
<li>Outdoor field</li>
464+
<li>Kicking</li>
465+
<li>Recovery</li>
466+
<li>Field deployment</li>
467467
</ul>
468468
</div>
469469
</article>

‎public/rss2026/styles.css‎

Lines changed: 42 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1947,7 +1947,7 @@ h4 {
19471947
.demo-program-copy {
19481948
display: grid;
19491949
grid-template-columns: 1fr;
1950-
gap: 32px;
1950+
gap: 24px;
19511951
align-items: start;
19521952
max-width: none;
19531953
margin-top: var(--event-block-gap);
@@ -1958,35 +1958,36 @@ h4 {
19581958
}
19591959

19601960
.demo-program-lead {
1961-
max-width: none;
1961+
max-width: 980px;
19621962
margin: 0;
19631963
color: rgba(16, 21, 21, 0.68);
19641964
font-family: Georgia, "Times New Roman", serif;
1965-
font-size: clamp(1.04rem, 1.36vw, 1.16rem);
1965+
font-size: clamp(1rem, 1.18vw, 1.12rem);
19661966
font-style: italic;
19671967
font-weight: 620;
19681968
line-height: 1.42;
1969-
width: 100%;
19701969
}
19711970

19721971
.demo-mini-grid {
19731972
display: grid;
1974-
grid-template-columns: minmax(0, 860px);
1973+
grid-template-columns: minmax(0, 1080px);
19751974
justify-content: center;
19761975
gap: 0;
19771976
margin-top: var(--event-title-gap);
19781977
max-width: none;
19791978
}
19801979

19811980
.demo-mini-grid article {
1982-
display: flex;
1981+
display: grid;
1982+
grid-template-columns: minmax(0, 1.62fr) minmax(330px, 0.88fr);
1983+
align-items: stretch;
19831984
min-height: 0;
1984-
flex-direction: column;
19851985
overflow: hidden;
19861986
border: 1px solid rgba(16, 21, 21, 0.08);
19871987
border-radius: var(--radius);
19881988
background:
1989-
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9)),
1989+
radial-gradient(circle at 98% 12%, rgba(130, 181, 89, 0.1), transparent 30%),
1990+
linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 251, 0.92)),
19901991
var(--surface-2);
19911992
box-shadow: 0 24px 60px rgba(16, 21, 21, 0.08);
19921993
}
@@ -1995,6 +1996,7 @@ h4 {
19951996
position: relative;
19961997
overflow: hidden;
19971998
aspect-ratio: 16 / 9;
1999+
min-height: 330px;
19982000
background: var(--surface-3);
19992001
}
20002002

@@ -2010,8 +2012,9 @@ h4 {
20102012
display: flex;
20112013
flex: 1;
20122014
flex-direction: column;
2013-
gap: 12px;
2014-
padding: 18px 20px 20px;
2015+
justify-content: center;
2016+
gap: 16px;
2017+
padding: clamp(28px, 3.2vw, 44px);
20152018
}
20162019

20172020
.demo-mini-grid h4,
@@ -2021,26 +2024,33 @@ h4 {
20212024

20222025
.demo-mini-grid p {
20232026
color: var(--muted);
2024-
font-size: 0.94rem;
2025-
line-height: 1.35;
2027+
max-width: 29ch;
2028+
font-size: clamp(1rem, 1.1vw, 1.08rem);
2029+
line-height: 1.42;
2030+
}
2031+
2032+
.demo-mini-grid h4 {
2033+
color: var(--ink);
2034+
font-size: clamp(2.05rem, 3.6vw, 3.05rem);
2035+
line-height: 0.98;
20262036
}
20272037

20282038
.demo-highlights {
20292039
display: flex;
20302040
flex-wrap: wrap;
2031-
gap: 8px;
2032-
margin: 2px 0 0;
2041+
gap: 10px;
2042+
margin: 6px 0 0;
20332043
padding: 0;
20342044
list-style: none;
20352045
}
20362046

20372047
.demo-highlights li {
20382048
display: inline-flex;
2039-
min-height: 28px;
2049+
min-height: 32px;
20402050
align-items: center;
20412051
border: 1px solid rgba(22, 137, 178, 0.14);
20422052
border-radius: 999px;
2043-
padding: 0 10px;
2053+
padding: 0 13px;
20442054
background: rgba(22, 137, 178, 0.06);
20452055
color: #315f66;
20462056
font-size: 0.74rem;
@@ -3442,6 +3452,22 @@ h4 {
34423452
grid-template-columns: 1fr;
34433453
}
34443454

3455+
.demo-mini-grid article {
3456+
grid-template-columns: 1fr;
3457+
}
3458+
3459+
.demo-media {
3460+
min-height: 0;
3461+
}
3462+
3463+
.demo-card-body {
3464+
padding: 22px;
3465+
}
3466+
3467+
.demo-mini-grid h4 {
3468+
font-size: clamp(2rem, 9vw, 2.55rem);
3469+
}
3470+
34453471
.workshop-main,
34463472
.workshop-note {
34473473
min-height: 0;

0 commit comments

Comments
 (0)