openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix README screenshots: add dark mode support, fix broken image paths, normalize sizing

Browse Source 
- Wrap all screenshots in <picture> elements with dark/light source variants
- Replace non-existent mobile-light-shopping.png with mobile-light-household.png
- Replace non-existent tablet-light-calendar.png with mobile dashboard screenshot
- Set consistent width="240" and width="33%" on all mobile screenshot cells

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ulas
2026-03-29 01:50:28 +01:00
parent 396050e2cf
commit 5838fb9243
1 changed files with 53 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+52 -6
View File
@@ -38,19 +38,65 @@ Oikos is **not** a SaaS product, not a team collaboration tool, and not designed
## Screenshots
<p align="center">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/tablet-dark/tablet-dark-dashboard.png">
<source media="(prefers-color-scheme: light)" srcset="docs/screenshots/tablet-light/tablet-light-dashboard.png">
<img src="docs/screenshots/tablet-light/tablet-light-dashboard.png" alt="Dashboard" width="720">
</picture>
</p>
<table>
<tr>
<td align="center"><img src="docs/screenshots/mobile-light/mobile-light-tasks.png" alt="Tasks" width="220"><br><strong>Tasks</strong></td>
<td align="center"><img src="docs/screenshots/mobile-light/mobile-light-shopping.png" alt="Shopping" width="220"><br><strong>Shopping</strong></td>
<td align="center"><img src="docs/screenshots/mobile-light/mobile-light-budget.png" alt="Budget" width="220"><br><strong>Budget</strong></td>
<td align="center" width="33%">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/mobile-dark/mobile-dark-tasks.png">
<source media="(prefers-color-scheme: light)" srcset="docs/screenshots/mobile-light/mobile-light-tasks.png">
<img src="docs/screenshots/mobile-light/mobile-light-tasks.png" alt="Tasks" width="240">
</picture>
<br><strong>Tasks</strong>
</td>
<td align="center" width="33%">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/mobile-dark/mobile-dark-household.png">
<source media="(prefers-color-scheme: light)" srcset="docs/screenshots/mobile-light/mobile-light-household.png">
<img src="docs/screenshots/mobile-light/mobile-light-household.png" alt="Shopping" width="240">
</picture>
<br><strong>Shopping</strong>
</td>
<td align="center" width="33%">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/mobile-dark/mobile-dark-budget.png">
<source media="(prefers-color-scheme: light)" srcset="docs/screenshots/mobile-light/mobile-light-budget.png">
<img src="docs/screenshots/mobile-light/mobile-light-budget.png" alt="Budget" width="240">
</picture>
<br><strong>Budget</strong>
</td>
</tr>
<tr>
<td align="center"><img src="docs/screenshots/mobile-light/mobile-light-notes.png" alt="Notes" width="220"><br><strong>Notes</strong></td>
<td align="center"><img src="docs/screenshots/mobile-light/mobile-light-contacts.png" alt="Contacts" width="220"><br><strong>Contacts</strong></td>
<td align="center"><img src="docs/screenshots/tablet-light/tablet-light-calendar.png" alt="Calendar – Tablet" width="220"><br><strong>Calendar — Tablet</strong></td>
<td align="center" width="33%">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/mobile-dark/mobile-dark-notes.png">
<source media="(prefers-color-scheme: light)" srcset="docs/screenshots/mobile-light/mobile-light-notes.png">
<img src="docs/screenshots/mobile-light/mobile-light-notes.png" alt="Notes" width="240">
</picture>
<br><strong>Notes</strong>
</td>
<td align="center" width="33%">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/mobile-dark/mobile-dark-contacts.png">
<source media="(prefers-color-scheme: light)" srcset="docs/screenshots/mobile-light/mobile-light-contacts.png">
<img src="docs/screenshots/mobile-light/mobile-light-contacts.png" alt="Contacts" width="240">
</picture>
<br><strong>Contacts</strong>
</td>
<td align="center" width="33%">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/mobile-dark/mobile-dark-dashboard.png">
<source media="(prefers-color-scheme: light)" srcset="docs/screenshots/mobile-light/mobile-light-dashboard.png">
<img src="docs/screenshots/mobile-light/mobile-light-dashboard.png" alt="Dashboard Mobile" width="240">
</picture>
<br><strong>Dashboard — Mobile</strong>
</td>
</tr>
</table>