markdown

README.md

@@ -1,50 +1,74 @@
-# Gitea Bootstrap 5 Landing Page Theme
+# Gitea Ocean Theme
 
-A drop-in theme that replaces the public front page of a Gitea instance with a modern Bootstrap 5 + Font Awesome experience. Signed-in users see a refreshed quick-action dashboard row, while guests get a marketing-style hero layout with prominent calls to action.
+A beautiful, clean pastel ocean-themed template for Gitea featuring soft blues, rounded corners, and glassmorphism effects. This theme transforms your Gitea instance into a cohesive, modern experience with whale animations and ocean motifs throughout.
 
-![Screenshot of the customized Gitea home landing page showing the Bootstrap hero layout, quick actions, and footer enhancements](asset/snap1.png)
+![Gitea Ocean Theme Screenshot](asset/snap1.png)
 
-## What's Included
+## ✨ Features
+
+- **🌊 Ocean-themed aesthetic** – Soft pastel blues (#8CA9FF, #AAC4F5) with cream backgrounds (#FFF8DE)
+- **🐋 Animated whale hero** – Welcoming landing page with swimming whale animation
+- **💎 Glassmorphism design** – Rounded corners, semi-transparent cards, subtle shadows
+- **📱 Fully responsive** – Clean layout adapting to all screen sizes
+- **🎨 Cohesive styling** – Dashboard, repositories, footer all matching the ocean theme
+- **⚡ Modern tech stack** – Bootstrap 5.3.3, Font Awesome 6.5.2, Google Fonts (Inter)
+
+## 📦 What's Included
 
 - `custom/templates/home.tmpl` – overrides the default landing page with a Bootstrap 5 design
-- `custom/templates/custom/header.tmpl` – injects Bootstrap, Font Awesome, typography, and inlined theme styles
+- `custom/templates/custom/header.tmpl` – injects Bootstrap, Font Awesome, typography, and all ocean theme styles
-- `custom/templates/custom/body_inner_pre.tmpl` – adds a compact promotional banner above the navigation bar
+- `custom/templates/custom/body_inner_post.tmpl` – adds JavaScript for repository card styling
-- `custom/templates/custom/footer.tmpl` – delivers a multi-column footer with curated resource links
+- `custom/templates/custom/footer.tmpl` – delivers a multi-column footer with ocean theme styling
+- `custom/public/css/home.css` – additional home page styling
 
-## Prerequisites
+## 📋 Prerequisites
 
 - Gitea 1.18+ (tested against the current `main` template structure)
-- Access to the `custom/` directory on your Alpine Linux host (default `/var/lib/gitea/custom` when using the official packages)
+- Access to the `custom/` directory on your Gitea host (default `/var/lib/gitea/custom` when using official packages)
 
-## Installation
+## 🚀 Installation
 
 1. **Stop Gitea (optional but safest):**
    ```sh
    sudo rc-service gitea stop
    ```
+
 2. **Copy the theme files:**
    ```sh
    sudo rsync -av custom/ /var/lib/gitea/custom/
    ```
    Adjust the destination path if your `APP_DATA_PATH` differs.
+
 3. **Fix permissions:**
    ```sh
    sudo chown -R git:git /var/lib/gitea/custom
    ```
    Replace `git:git` with the user/group running your Gitea service.
+
 4. **Start or restart Gitea:**
    ```sh
    sudo rc-service gitea start
    ```
+
 5. **Bust caches (optional but recommended):** add or increment `ui.asset_version` in `app.ini`, or clear `$GITEA_CUSTOM/public` cache if you use a CDN.
 
-## Configuration Tips
+## 🎨 Design Details
 
-- No configuration changes are required, but you can force the refreshed styles to load by setting `ui.use_service_worker = false` if you rely on aggressive caching.
+### Color Palette
-- To adjust colors or typography, edit the `<style>` block in `custom/templates/custom/header.tmpl`; Bootstrap utility classes let you rapidly tweak the layout.
+- **Ocean Blue**: `#8CA9FF`, `#AAC4F5` (primary accents)
-- The template references Bootstrap and Font Awesome via CDNs. If your installation is air-gapped, replace the CDN URLs with self-hosted copies and drop them in `custom/public`.
+- **Cream Background**: `#FFF8DE` (warm, welcoming base)
+- **Dark Text**: `#1e293b`, `#64748b` (readable on light backgrounds)
+- **Code Blocks**: `rgba(170, 196, 245, 0.15)` (soft ocean background)
+- **Cards**: `rgba(255, 255, 255, 0.75)` (semi-transparent white)
 
-## Verification Checklist
+### Styling Highlights
+- **Rounded corners**: `0.75rem` - `1rem` throughout
+- **Subtle borders**: `rgba(140, 169, 255, 0.15)`
+- **Minimal shadows**: `0 1px 3px rgba(140, 169, 255, 0.08)`
+- **Smooth transitions**: `0.2s ease` for hover effects
+- **Ocean blue accents**: Active tabs, hover states, links
+
+## ✅ Verification Checklist
 
 After copying the files, visit your instance root URL:
 
@@ -53,21 +77,45 @@ After copying the files, visit your instance root URL:
 - The top navigation bar should render with the glassmorphism background and rounded menu pills, with the announcement banner above it.
 - The footer should show the new three-column resource section followed by the standard Gitea footer.
 
-## Troubleshooting
+## 🎯 What Gets Themed
+
+✅ **Landing Page** – Whale animation hero section  
+✅ **Navbar** – Ocean blue with glassmorphism  
+✅ **Dashboard** – User switcher, repository cards, sidebar  
+✅ **Repository Pages** – Code blocks, tabs, content boxes  
+✅ **Markdown** – Clean ocean-themed code styling  
+✅ **Footer** – Multi-column layout with ocean gradients  
+
+## 🔧 Troubleshooting
 
 - **Styles didn't update** – Make sure `custom/templates/custom/header.tmpl` copied correctly and bump `ui.asset_version` in `app.ini` to invalidate the service worker cache.
 - **CDN blocked or SRI mismatch** – If the environment strips query params or modifies assets, host Bootstrap and Font Awesome locally inside `custom/public/vendor/` and update the links in `custom/templates/custom/header.tmpl` (remove the `integrity` attribute when serving self-hosted copies).
-- **Navbar dropdown hidden behind content** – Ensure you're using the latest `custom/templates/custom/header.tmpl`; it sets a higher `z-index` for Gitea's dropdown menus so they stack above repository cards.
+- **Repository cards not showing** – Clear browser cache with hard refresh (Ctrl+Shift+R / Cmd+Shift+R)
+- **Markdown underlines appearing** – Ensure JavaScript in `body_inner_post.tmpl` is running correctly
 
-## Updating
+## 🔄 Updating
 
 To revert to the stock appearance, delete the overrides:
 ```sh
 sudo rm -rf /var/lib/gitea/custom/templates/home.tmpl \
             /var/lib/gitea/custom/templates/custom/header.tmpl \
-            /var/lib/gitea/custom/templates/custom/body_inner_pre.tmpl \
+            /var/lib/gitea/custom/templates/custom/body_inner_post.tmpl \
-            /var/lib/gitea/custom/templates/custom/footer.tmpl
+            /var/lib/gitea/custom/templates/custom/footer.tmpl \
+            /var/lib/gitea/custom/public/css/home.css
 ```
 Then restart Gitea.
 
-Happy theming! 🎨
+## 💡 Customization Tips
+
+- **Change ocean colors**: Edit the CSS variables in `custom/templates/custom/header.tmpl`
+- **Adjust card transparency**: Modify `rgba(255, 255, 255, 0.75)` values for different opacity levels
+- **Modify whale animation**: Edit the animations in `home.tmpl` or `custom/public/css/home.css`
+- **Update footer content**: Customize `custom/templates/custom/footer.tmpl` with your links and information
+
+## 🙏 Credits
+
+Inspired by modern ocean-themed UIs and Gitea's default templates. Modified extensively with custom pastel color palettes, glassmorphism effects, and cohesive styling throughout.
+
+---
+
+**Happy theming!** <20>🐋