Web App Layout & Theming
Relevant source files
The following files were used as context for generating this wiki page:
The thoth web application provides a public personal website for the site owner. It presents a single-page interface containing a biography and a collection of external links. The system uses a modern React stack featuring Next.js, Tailwind CSS, and Redux for state management.
Sources: apps/web/spec/web.md:1-10, apps/web/package.json:16-25
Core Architecture
The application follows the Next.js App Router architecture. It centralizes global configurations and providers within the root layout while delegating feature-specific rendering to page components.
Root Layout
RootLayout serves as the entry point for the entire application. It performs several critical initialization tasks:
- Font Configuration: Imports and applies the
Geistvariable font from Google Fonts. - State Management: Wraps the application in a
StoreProvider, injecting thePUBLIC_API_URLandSITE_HANDLEfrom environment variables into the Redux store. - Metadata Generation: Dynamically generates the page title and description by fetching the owner's bio information via
getBio. - Styling Entry: Imports
globals.cssto apply system-wide styles and Tailwind utilities.
Sources: apps/web/src/app/layout.tsx:9-36
Main Page Structure
The home page (Page) is a server component that fetches bio data and renders the primary content blocks. It implements a vertical layout centered on the screen with consistent spacing.
The diagram shows the component hierarchy and the flow of global configuration and data into the rendering tree.
Sources: apps/web/src/app/page.tsx:11-21, apps/web/src/app/layout.tsx:28-32
Styling and Theming System
The application uses Tailwind CSS 4 with a design system based on OKLCH color values. The theme supports both light and dark modes through CSS variables and Tailwind variants.
Color Palette and Variables
The system defines a comprehensive set of variables in packages/ui/src/styles/globals.css. These variables map to functional UI elements rather than specific color names.
| Variable | Usage | Primary Value (Light) | Dark Mode Value |
|---|---|---|---|
--background | Main page background | oklch(1 0 0) | oklch(0.145 0 0) |
--foreground | Main text color | oklch(0.145 0 0) | oklch(0.985 0 0) |
--primary | Primary buttons/actions | oklch(0.205 0 0) | oklch(0.922 0 0) |
--muted | De-emphasized elements | oklch(0.97 0 0) | oklch(0.269 0 0) |
--border | Dividers and borders | oklch(0.922 0 0) | oklch(1 0 0 / 10%) |
Sources: packages/ui/src/styles/globals.css:47-118
Theming Implementation
- Dark Mode: The
.darkclass triggers the dark mode variable set. The application also usescolor-scheme: darkfor system-level UI elements like scrollbars. - Typography: The
Geistfont is configured as the--font-sansvariable, which is applied to thehtmlandbodytags. - Base Styles: Global base styles apply the border color to all elements by default and set the initial background and text colors on the body.
Sources: packages/ui/src/styles/globals.css:120-131, apps/api/src/modules/auth/interface/auth.pages.ts:4
Layout Components
The main layout is defined in apps/web/src/app/page.tsx using a vertical flex container.
| Element | CSS Classes | Purpose |
|---|---|---|
| Container | mx-auto flex min-h-screen max-w-2xl flex-col | Centers content and restricts width. |
| Spacing | justify-center gap-8 px-6 py-16 | Manages vertical alignment and internal padding. |
| Hero | N/A (Component) | Displays owner name and headline. |
| Links | N/A (Component) | Displays social and contact links as buttons. |
Sources: apps/web/src/app/page.tsx:13-17, apps/web/spec/links.md:12-13
Technical Rules and Constraints
The layout must adhere to specific build-time and runtime rules defined in the project specification.
- Build Validation: The build fails if the bio data cannot be fetched, or if fields are missing or blank.
- Revalidation: The home page rebuilds in the background every 5 minutes (300 seconds) if the bio data changes.
- Content Requirements: The layout must display the owner's name, headline, and about section.
- Security: Auth-related pages use a restricted internal style block that enforces dark mode and uses a grid-based card layout for sign-in prompts.
Sources: apps/web/spec/web.md:13-22, apps/web/src/app/page.tsx:5, apps/api/src/modules/auth/interface/auth.pages.ts:3-16
Summary
Web App Layout & Theming in thoth uses a centralized Next.js RootLayout to manage global state and typography. The visual design is controlled via a sophisticated OKLCH-based theme in Tailwind CSS, providing a consistent experience across the main site and utility pages like authentication stubs. The layout is highly responsive, focusing on a single-column, centered presentation of the site owner's biography and links.