-
- );
-}
diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
deleted file mode 100644
index dae9e09..0000000
--- a/src/components/HomepageFeatures/styles.module.css
+++ /dev/null
@@ -1,51 +0,0 @@
-.features {
- display: flex;
- align-items: stretch;
- padding: 3rem 0;
- width: 100%;
-}
-
-.featureCard {
- position: relative;
- height: 100%;
- padding: 1.75rem 1.5rem;
- border: 1px solid var(--ifm-color-emphasis-300);
- border-radius: 12px;
- background: var(--ifm-card-background-color, var(--ifm-background-color));
- transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
- margin-bottom: 1.5rem;
-}
-
-.featureCard:hover {
- transform: translateY(-2px);
- box-shadow: 0 8px 20px rgba(0, 50, 98, 0.08);
- border-color: var(--ifm-color-primary);
-}
-
-.featureBadge {
- position: absolute;
- top: 1rem;
- right: 1rem;
- font-family: ui-monospace, Menlo, Consolas, monospace;
- font-size: 0.85rem;
- font-weight: 700;
- letter-spacing: 0.05em;
- color: var(--hc-accent, #FDB515);
- padding: 0.15rem 0.5rem;
- border: 1px solid var(--hc-accent, #FDB515);
- border-radius: 4px;
- background: rgba(253, 181, 21, 0.08);
-}
-
-.featureTitle {
- font-size: 1.15rem;
- margin: 0 0 0.5rem 0;
- color: var(--ifm-color-primary);
-}
-
-.featureDescription {
- font-size: 0.95rem;
- line-height: 1.6;
- color: var(--ifm-color-content);
- margin: 0;
-}
diff --git a/src/css/custom.css b/src/css/custom.css
index e4dfd63..e91a3ef 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -1,66 +1,98 @@
/**
* Site-wide overrides for Docusaurus's default (Infima) theme.
*
- * Palette is Berkeley blue (#003262) + Berkeley gold (#FDB515).
- * The --ifm-color-primary-* ladder is generated by tuning lightness from
- * the base — values picked by hand so links remain readable in both modes.
+ * Plain, content-first treatment: a Helvetica system stack (no webfont, zero
+ * dependencies), a single orange theme (#FF6633) used only for links and
+ * buttons, hairline chrome and generous whitespace.
+ *
+ * Palette ladder is tuned around #FF6633 (HSL 15°, 100%, 60%) by stepping
+ * lightness, the way Docusaurus's color generator does.
*/
:root {
- --ifm-color-primary: #003262; /* Berkeley blue */
- --ifm-color-primary-dark: #002b54;
- --ifm-color-primary-darker: #00284f;
- --ifm-color-primary-darkest: #002041;
- --ifm-color-primary-light: #003a72;
- --ifm-color-primary-lighter: #003d76;
- --ifm-color-primary-lightest: #00457d;
+ --ifm-color-primary: #ff6633; /* theme orange */
+ --ifm-color-primary-dark: #ff5b24;
+ --ifm-color-primary-darker: #ff561d;
+ --ifm-color-primary-darkest: #ff4f14;
+ --ifm-color-primary-light: #ff7242;
+ --ifm-color-primary-lighter: #ff7649;
+ --ifm-color-primary-lightest: #ff7d52;
+
+ /* Helvetica-first stack — no webfont, so nothing to self-host or fall back. */
+ --ifm-font-family-base: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ --ifm-font-family-monospace: ui-monospace, 'SF Mono', SFMono-Regular,
+ Menlo, 'Cascadia Code', Consolas, monospace;
+ --ifm-heading-font-weight: 700;
+ --ifm-line-height-base: 1.65;
- --ifm-code-font-size: 92%;
- --docusaurus-highlighted-code-line-bg: rgba(0, 50, 98, 0.10);
+ --ifm-code-font-size: 90%;
+ --docusaurus-highlighted-code-line-bg: rgba(255, 102, 51, 0.12);
- /* Accent color used by tip admonitions, hover states. */
- --hc-accent: #FDB515;
+ /* Calmer chrome: a hairline navbar, not a shadow. */
+ --ifm-navbar-shadow: none;
+ --ifm-toc-border-color: var(--ifm-color-emphasis-200);
}
[data-theme='dark'] {
- --ifm-color-primary: #6aa3d6;
- --ifm-color-primary-dark: #4a8bc4;
- --ifm-color-primary-darker: #3a7eba;
- --ifm-color-primary-darkest: #2f6da0;
- --ifm-color-primary-light: #8ab8df;
- --ifm-color-primary-lighter: #99c1e3;
- --ifm-color-primary-lightest: #b5d2eb;
- --docusaurus-highlighted-code-line-bg: rgba(106, 163, 214, 0.15);
+ --ifm-color-primary: #ff7d52;
+ --ifm-color-primary-dark: #ff7242;
+ --ifm-color-primary-darker: #ff6e3d;
+ --ifm-color-primary-darkest: #ff6633;
+ --ifm-color-primary-light: #ff8861;
+ --ifm-color-primary-lighter: #ff8c66;
+ --ifm-color-primary-lightest: #ff9470;
+ --docusaurus-highlighted-code-line-bg: rgba(255, 122, 77, 0.18);
}
-/* Mermaid diagrams: cap their max width so the wide flowcharts don't
- bleed off the content column. Center them under the heading. */
-.docusaurus-mermaid-container {
- display: flex;
- justify-content: center;
- margin: 1.5rem 0;
+/* Navbar: a single hairline instead of a drop shadow. */
+.navbar {
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
}
-.docusaurus-mermaid-container svg {
- max-width: 100%;
- height: auto;
+
+/* Headings: tighter tracking and balanced wrapping for an editorial feel. */
+.markdown h1,
+.markdown h2,
+.markdown h3 {
+ letter-spacing: -0.018em;
+ text-wrap: balance;
}
-/* Slightly tighter line-height in tables — the joint-spec table is wide. */
-table {
- font-size: 0.95rem;
- line-height: 1.5;
+/* Sidebar active item: accent text, a soft fill and a left rule. */
+.menu__link--active:not(.menu__link--sublist) {
+ background: rgba(255, 102, 51, 0.08);
+ box-shadow: inset 2px 0 0 var(--ifm-color-primary);
+}
+[data-theme='dark'] .menu__link--active:not(.menu__link--sublist) {
+ background: rgba(255, 122, 77, 0.16);
+}
+
+/* Table of contents: smaller and calmer; bolder on the active anchor. */
+.table-of-contents {
+ font-size: 0.8rem;
+}
+.table-of-contents__link--active {
+ font-weight: 600;
}
-/* Code blocks: use the Inter-monospace pairing the navbar already pulls in. */
-code, pre, .token {
- font-family: ui-monospace, 'JetBrains Mono', 'Cascadia Code',
- 'SF Mono', Menlo, Consolas, monospace;
+/* Admonitions: flatter. Keep Infima's semantic left-border color; only drop
+ the shadow, thin the accent rule and round the corners a little more. */
+.theme-admonition {
+ border-left-width: 3px;
+ border-radius: 8px;
+ box-shadow: none;
}
-/* Custom container the homepage uses for the hero accent on inline code. */
-.hc-mermaid-caption {
- text-align: center;
+/* "Last updated" line: small and muted, the way tutorial sites show it. */
+.theme-last-updated {
font-size: 0.85rem;
color: var(--ifm-color-emphasis-600);
- margin-top: -1rem;
+}
+
+/* Tables: tighter line-height (the joint-spec table is wide) + a header tint. */
+table {
+ font-size: 0.95rem;
+ line-height: 1.5;
+}
+table thead tr {
+ background: var(--ifm-color-emphasis-100);
}
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 9af41e5..028bd46 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -1,61 +1,94 @@
/**
- * CSS scoped to the homepage. Following Docusaurus's CSS-modules convention:
- * imports as a JS object, classes are uniquified at build time.
+ * Homepage styles — deliberately plain. A modest, left-aligned intro followed
+ * by a simple "Documentation" contents list: no cards, no icons, no hover
+ * motion, the way a classical manual or reference site reads. Colors come from
+ * Infima variables so light and dark both work.
*/
-.heroBanner {
- padding: 4rem 0;
- text-align: center;
- position: relative;
- overflow: hidden;
- background: linear-gradient(135deg, #003262 0%, #1c4f7d 60%, #246da6 100%);
- color: #fff;
+.hero {
+ padding: 4rem 0 0.5rem;
}
-.heroBanner :global(.hero__title) {
- font-size: 3rem;
- font-weight: 700;
+.title {
+ font-size: clamp(2rem, 4vw, 2.6rem);
+ line-height: 1.15;
letter-spacing: -0.02em;
+ font-weight: 700;
+ margin: 0 0 0.75rem;
}
-.heroBanner :global(.hero__subtitle) {
- font-size: 1.4rem;
- opacity: 0.95;
+.tagline {
+ font-size: 1.25rem;
+ line-height: 1.45;
+ font-weight: 400;
+ color: var(--ifm-color-emphasis-800);
+ margin: 0 0 1.5rem;
+ max-width: 46ch;
}
-.tagDetail {
- max-width: 720px;
- margin: 1.5rem auto 0 auto;
+.intro {
font-size: 1rem;
- opacity: 0.85;
- line-height: 1.6;
+ line-height: 1.7;
+ max-width: 65ch;
+ margin: 0;
+ color: var(--ifm-color-content);
}
-.tagDetail code {
- background: rgba(255, 255, 255, 0.15);
- color: #FDB515; /* Berkeley gold */
- padding: 0.1em 0.4em;
- border-radius: 4px;
- font-size: 0.95em;
-}
-
-.buttons {
+.actions {
display: flex;
- align-items: center;
- justify-content: center;
- gap: 0.75rem;
- margin-top: 2rem;
flex-wrap: wrap;
+ align-items: center;
+ gap: 1.25rem;
+ margin-top: 1.75rem;
}
-@media screen and (max-width: 996px) {
- .heroBanner {
- padding: 2.5rem 1rem;
- }
- .heroBanner :global(.hero__title) {
- font-size: 2.2rem;
+.ghostLink {
+ font-weight: 600;
+}
+
+/* Contents list — a plain reference index, not a card grid. */
+.contents {
+ margin: 3rem 0 5rem;
+}
+
+.contentsHead {
+ font-size: 1.4rem;
+ font-weight: 700;
+ letter-spacing: -0.01em;
+ padding-bottom: 0.4rem;
+ border-bottom: 1px solid var(--ifm-color-emphasis-300);
+ margin: 0 0 1.5rem;
+}
+
+.list {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 1.75rem 3rem;
+}
+
+.entryTitle {
+ font-size: 1.05rem;
+ font-weight: 700;
+ margin: 0 0 0.3rem;
+}
+
+.entryTitle a {
+ color: var(--ifm-color-primary);
+}
+
+.entryDesc {
+ font-size: 0.92rem;
+ line-height: 1.55;
+ color: var(--ifm-color-emphasis-700);
+ margin: 0;
+ max-width: 48ch;
+}
+
+@media screen and (max-width: 768px) {
+ .hero {
+ padding: 2.5rem 0 0.5rem;
}
- .heroBanner :global(.hero__subtitle) {
- font-size: 1.1rem;
+ .list {
+ grid-template-columns: 1fr;
}
}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 8092610..bc3f617 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,47 +1,70 @@
import type {ReactNode} from 'react';
-import clsx from 'clsx';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import Heading from '@theme/Heading';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
import styles from './index.module.css';
-function HomepageHeader() {
- const {siteConfig} = useDocusaurusContext();
+const GITHUB_URL = 'https://github.com/Berkeley-Humanoids/humanoid_control';
+
+type Entry = {
+ title: string;
+ to: string;
+ desc: string;
+};
+
+const CONTENTS: Entry[] = [
+ {
+ title: 'Getting started',
+ to: '/getting_started/intro',
+ desc: 'Install with pixi, then bring up Lite in MuJoCo in about ten minutes — no system-wide ROS install required.',
+ },
+ {
+ title: 'Tutorials',
+ to: '/tutorials/',
+ desc: 'Learning-oriented walkthroughs: drive a single Robstride, walk an FSM in simulation, run a tracking policy.',
+ },
+ {
+ title: 'How-to guides',
+ to: '/how_to/',
+ desc: 'Task recipes for real work: first real bringup, calibrate the zero pose, recover from a fault, probe the CAN bus.',
+ },
+ {
+ title: 'Concepts',
+ to: '/concepts/',
+ desc: 'The reasoning layer: the architecture, the five-mode FSM, the MIT command surface, the safety pipeline.',
+ },
+ {
+ title: 'Reference',
+ to: '/reference/quick_reference',
+ desc: 'Dense and scannable: hardware specs, packages, controllers, launch args, message schemas, troubleshooting.',
+ },
+];
+
+function Hero() {
return (
-
+
-
- {siteConfig.title}
+
+ Humanoid Control
-
{siteConfig.tagline}
-
- A unified ros2_control stack for the Berkeley Architecture
- Research bimanual humanoids — same controllers, same MIT-mode interfaces,
- mock / MuJoCo / real CAN selectable from a single xacro arg.
+
+ One low-level control stack for two Berkeley bimanual humanoids — Lite and Prime.
-
-
- Quick start →
-
-
- What is this?
-
-
- Reference
+
+ Built on ROS 2 Jazzy and ros2_control under PREEMPT_RT. The same
+ controllers, MIT-mode command interfaces, and message schemas run across both
+ robots; mock, MuJoCo, and real CAN / EtherCAT hardware are selectable from a
+ single xacro argument. Robot differences live entirely in URDF and
+ hardware-plugin selection.
+