style: neutral theme, simplified navigation, add mocks page

yepzdk · claude · yepzdk · commit a50e81cb8cfd · 2026-04-10T14:13:12.000+02:00
- Replace green/indigo theme with neutral black/grey palette
- Remove navigation tabs, use sidebar-only navigation
- Flatten sidebar so only current project expands
- Add project label at top of each document
- Rebrand site to ITKdev Research
- Make about page generic for all research projects
- Add Interactive Mocks page listing all prototypes
- Add custom CSS for subtle link and button colors

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/docs/about.md b/docs/about.md
@@ -1,19 +1,15 @@
 # About
 
-This site hosts research projects on responsible AI usage, produced by Aarhus Kommune.
+This site hosts research projects from ITKdev.
 
 ## Purpose
 
-As public organizations adopt generative AI tools, we need to understand and communicate the environmental impact of this usage. Our research aims to:
-
-- **Inform** — gather and present data on AI's energy and climate footprint
-- **Design** — develop practical UI concepts that raise awareness without hindering productivity
-- **Guide** — provide actionable recommendations for organizations, tool builders, and hosting providers
+We publish research, findings, and evaluations on topics relevant to our work. Projects cover a range of subjects — from responsible AI usage to developer tooling and beyond.
 
 ## Approach
 
 We work iteratively: research, ideate, prototype, evaluate. All findings are published openly so others can build on them.
 
 ## Contact
 
-This research is produced by the IT department of Aarhus Kommune. For questions or collaboration, reach out through the [GitHub repository](https://github.com/itk-dev).
+For questions or collaboration, reach out through [GitHub](https://github.com/itk-dev).
diff --git a/docs/index.md b/docs/index.md
@@ -1,6 +1,6 @@
-# AI Research
+# ITKdev Research
 
-Research projects on responsible AI usage from Aarhus Kommune.
+Research projects from ITKdev.
 
 ---
 
@@ -21,7 +21,3 @@ This project explores nudging strategies, UI concepts, CO2 estimates, and integr
 - [Interactive UI mocks](projects/climate-nudging/index.md#ui-concepts-and-mocks) (leaf indicator, session ticker, usage dashboard)
 - [Technical integration analysis](projects/climate-nudging/integration.md) for Open WebUI, Claude Code, and API layers
 - [Guidance to hosting providers](projects/climate-nudging/co2-research.md#5-guidance-to-hosting-providers) on data transparency
-
----
-
-*More projects coming soon.*
diff --git a/docs/projects/climate-nudging/co2-research.md b/docs/projects/climate-nudging/co2-research.md
@@ -1,3 +1,5 @@
+<small>**Project:** Climate Awareness Nudging</small>
+
 # CO2 and Energy Estimates for LLM Inference
 
 ## Summary
diff --git a/docs/projects/climate-nudging/ideas.md b/docs/projects/climate-nudging/ideas.md
@@ -1,4 +1,6 @@
-# Climate Awareness Nudging — Ideas
+<small>**Project:** Climate Awareness Nudging</small>
+
+# Nudge Ideas
 
 ## Core Design Principles
 
diff --git a/docs/projects/climate-nudging/index.md b/docs/projects/climate-nudging/index.md
@@ -1,11 +1,13 @@
+---
+title: Climate Awareness for AI Usage
+---
+
+<small>**Project:** Climate Awareness Nudging · **Status:** Draft · **Date:** April 2026</small>
+
 # Climate Awareness for AI Usage
 
 **Research, Findings, and Evaluation**
 
-**Prepared for:** AarhusAI / Aarhus Kommune
-**Date:** April 2026
-**Status:** Draft
-
 ---
 
 ## Introduction
diff --git a/docs/projects/climate-nudging/integration.md b/docs/projects/climate-nudging/integration.md
@@ -1,3 +1,5 @@
+<small>**Project:** Climate Awareness Nudging</small>
+
 # Integration Points — Where to Nudge
 
 ## Open WebUI
diff --git a/docs/projects/climate-nudging/mocks.md b/docs/projects/climate-nudging/mocks.md
@@ -0,0 +1,20 @@
+<small>**Project:** Climate Awareness Nudging</small>
+
+# Interactive Mocks
+
+These are interactive HTML prototypes demonstrating the proposed UI nudges. Open them to try the interactions directly in your browser.
+
+---
+
+**[Leaf Indicator](mocks/leaf-indicator.html)**
+A prompt complexity hint displayed next to the send button. The leaf icon changes color (green → yellow → orange) as you type, giving real-time feedback on estimated resource usage. Try typing in the input field to see it change.
+
+---
+
+**[Session Cost Ticker](mocks/session-cost-ticker.html)**
+A running CO2 estimate in the chat header that updates after each message. Hover over it to see a detailed breakdown of tokens, energy, and everyday equivalences. Use the simulation buttons to see how it scales over a conversation.
+
+---
+
+**[Usage Dashboard](mocks/usage-dashboard.html)**
+A personal usage dashboard showing weekly stats, daily bar charts with spike detection, model breakdowns with efficiency tips, and a preference picker for choosing your preferred equivalence unit (kettle boils, toast, shower minutes, etc.).
diff --git a/docs/stylesheets/custom.css b/docs/stylesheets/custom.css
@@ -0,0 +1,32 @@
+/* Subtle link colors */
+[data-md-color-scheme="slate"] {
+  --md-typeset-a-color: #8a9bae;
+  --md-accent-fg-color: #8a9bae;
+}
+
+[data-md-color-scheme="default"] {
+  --md-typeset-a-color: #546e7a;
+  --md-accent-fg-color: #546e7a;
+}
+
+/* Tone down admonition info boxes */
+.md-typeset .admonition.info,
+.md-typeset details.info {
+  border-color: #455a64;
+}
+
+.md-typeset .info > .admonition-title,
+.md-typeset .info > summary {
+  background-color: rgba(69, 90, 100, 0.1);
+}
+
+/* Subtle buttons */
+.md-typeset .md-button {
+  border-color: #666;
+  color: #aaa;
+}
+
+.md-typeset .md-button:hover {
+  border-color: #999;
+  color: #ddd;
+}
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -1,45 +1,39 @@
-site_name: AI Research — Aarhus Kommune
-site_description: Research projects on responsible AI usage
+site_name: ITKdev Research
+site_description: Research projects from ITKdev
 site_url: ""
 
 theme:
   name: material
   custom_dir: overrides
   palette:
     - scheme: slate
-      primary: green
-      accent: light green
+      primary: black
+      accent: grey
       toggle:
         icon: material/brightness-7
         name: Switch to light mode
     - scheme: default
-      primary: green
-      accent: light green
+      primary: white
+      accent: grey
       toggle:
         icon: material/brightness-4
         name: Switch to dark mode
   features:
-    - navigation.tabs
-    - navigation.sections
-    - navigation.expand
     - navigation.top
-    - toc.integrate
     - search.suggest
     - content.tabs.link
-  icon:
-    logo: material/leaf
   font:
     text: Inter
     code: JetBrains Mono
 
 nav:
   - Home: index.md
-  - Projects:
-      - Climate Awareness Nudging:
-          - Overview: projects/climate-nudging/index.md
-          - Nudge Ideas: projects/climate-nudging/ideas.md
-          - CO2 Research: projects/climate-nudging/co2-research.md
-          - Integration Points: projects/climate-nudging/integration.md
+  - Climate Awareness Nudging:
+      - Overview: projects/climate-nudging/index.md
+      - Nudge Ideas: projects/climate-nudging/ideas.md
+      - CO2 Research: projects/climate-nudging/co2-research.md
+      - Integration Points: projects/climate-nudging/integration.md
+      - Interactive Mocks: projects/climate-nudging/mocks.md
   - About: about.md
 
 markdown_extensions:
@@ -60,6 +54,9 @@ markdown_extensions:
 plugins:
   - search
 
+extra_css:
+  - stylesheets/custom.css
+
 extra:
   social:
     - icon: fontawesome/brands/github

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+<small>Project: Climate Awareness Nudging</small>`
	`2`	`+`
`1`	`3`	`# CO2 and Energy Estimates for LLM Inference`
`2`	`4`
`3`	`5`	`## Summary`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+<small>Project: Climate Awareness Nudging</small>`
	`2`	`+`
`1`	`3`	`# Integration Points — Where to Nudge`
`2`	`4`
`3`	`5`	`## Open WebUI`