redesign: plain orange theme + minimal homepage

README.md

@@ -1,66 +1,30 @@
 # Humanoid-Control-Website
 
-Documentation site for [`Humanoid Control`](https://github.com/Berkeley-Humanoids/humanoid_control) — the
-Berkeley Humanoids (Humanoid Control) humanoid low-level control stack.
-
-Built with [Docusaurus 3](https://docusaurus.io/) + `@docusaurus/theme-mermaid`
-for source-controlled diagrams of the control flow, FSM, and package
-architecture.
+Documentation site for [Humanoid Control](https://github.com/Berkeley-Humanoids/humanoid_control),
+the Berkeley Humanoids low-level control stack. Built with [Docusaurus 3](https://docusaurus.io/).
 
 ## Develop
 
 ```sh
 npm install
-npm start            # http://localhost:3000, hot reload
+npm start          # http://localhost:3000, hot reload
 ```
 
 ## Build
 
 ```sh
-npm run build        # output: build/
-npm run serve        # serve the built dist locally
+npm run build      # static site -> build/
+npm run serve      # preview the build locally
 ```
 
 ## Deploy
 
-The `build/` directory is a fully static site — drop it on Netlify,
-Cloudflare Pages, or GitHub Pages. For GitHub Pages, configure the workflow
-to publish `build/`; the bundled `docusaurus.config.ts` already sets
-`organizationName` and `projectName` for a `Berkeley-Humanoids/Humanoid-Control-Website` repo.
-
-## Layout
-
-```
-.
-├── docusaurus.config.ts          (nav, footer, mermaid, deploy config)
-├── sidebars.ts                   (single sidebar, three categories)
-├── tsconfig.json                 (extends @docusaurus/tsconfig)
-├── src/
-│   ├── pages/index.tsx           (React homepage)
-│   ├── components/HomepageFeatures/   (feature cards on the homepage)
-│   └── css/custom.css            (Berkeley blue + gold palette)
-├── static/img/                   (logo, favicon, social card)
-└── docs/
-    ├── overview/
-    │   ├── intro.md
-    │   ├── hardware_specifications.md
-    │   └── software_framework.md
-    ├── quick_start/
-    │   ├── installation.md
-    │   └── lite_101.md
-    └── reference/
-        ├── packages.md
-        ├── messages.md
-        ├── controllers.md
-        └── launch_args.md
-```
+Pushing to `main` builds and publishes to GitHub Pages via
+[`.github/workflows/deploy.yml`](.github/workflows/deploy.yml) — no manual step.
 
-## Authoring conventions
+## Authoring
 
-- **Diagrams**: prefer Mermaid in fenced code blocks (\`\`\`mermaid). Avoid binary
-  images for anything expressible as a graph, sequence, or state diagram —
-  they version-control cleanly.
-- **Admonitions (Docusaurus 3 syntax)**: `:::tip[Optional title]` (title in
-  brackets attached to the fence — not space-separated).
-- **Cross-links**: use relative paths. Docusaurus strips the `.md`
-  extension at build time.
+- Docs live in `docs/`; the sidebar order is set in `sidebars.ts`.
+- Cross-link with relative paths — Docusaurus drops the `.md` at build.
+- Admonitions use Docusaurus 3 syntax: `:::tip[Title]`.
+- Diagrams are static SVGs in `static/img/diagrams/`, referenced as `/img/diagrams/…`.

docusaurus.config.ts

@@ -34,6 +34,8 @@ const config: Config = {
           editUrl:
             'https://github.com/Berkeley-Humanoids/Humanoid-Control-Website/tree/main/',
           routeBasePath: '/',
+          showLastUpdateTime: true,
+          showLastUpdateAuthor: true,
         },
         blog: false,
         theme: {
@@ -69,7 +71,7 @@ const config: Config = {
       ],
     },
     footer: {
-      style: 'dark',
+      style: 'light',
       links: [
         {
           title: 'Getting started',

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);
 }