Website Configuration

Customize every aspect of your audiobook website

Note: Changes will be saved to a configuration file. After saving, sync the website to apply changes.

Quick Settings - Auto Theme Generator

▼

About Quick Settings: Select 1-10 brand colors and automatically generate a complete light and dark theme. The algorithm uses color theory to create harmonious palettes with proper contrast for text readability.

Typography & Fonts

▼

About Typography: Control the fonts, sizes, and text styling across your website. Font families should be web-safe or loaded via Google Fonts. Sizes can use px, rem, or em units.

Font Families

Main font for all body text. Use web-safe fonts or Google Fonts
Font for headings - can match body or be different
Monospace font for code blocks and technical text

Font Sizes

Base text size (14px-18px recommended). Default: 16px
Largest heading (2rem-3rem). Responsive: clamp(2rem, 5vw, 3rem)
Second heading level (1.5rem-2.5rem)
Third heading level (1.25rem-2rem)
Small text size (0.75rem-0.9rem or 12px-14px)

Font Weights

Regular text (300-400). Standard is 400
Medium emphasis (500-600)
Bold text (600-700). Standard bold is 700

Text Properties

Line spacing (1.4-1.8). Default 1.6 is good for readability
Letter spacing (-0.05em to 0.1em). 'normal' or '0' for default

Colors

▼

About Colors: Define your website's color palette for both light and dark modes. Use hex codes (#E00800), rgb (rgb(224, 8, 0)), or rgba for transparency. Ensure good contrast for readability.

Light Mode Colors

Main brand color
Darker shade of primary
Secondary accent color
Page background
Cards and panels
Main text color
Muted text
Border color (can use rgba)

Dark Mode Colors

Dark mode background
Dark mode cards
Dark mode text
Dark mode muted text
Dark mode borders

Navbar Colors

Navbar in light mode
Navbar in dark mode

Navbar

▼

About Navbar: The navigation bar at the top of all pages. Control its height, colors, fonts, button styles, logo size, and spacing. Changes affect all pages.

Navbar height (e.g., 72px)
Internal padding
Text size in navbar
Text weight (100-900)
Text capitalization style
Space between letters
Height of logo image
Padding for navbar buttons
Roundness of buttons
Border style for buttons
Box shadow for navbar
Stacking order (default: 100)

Navbar Buttons

▼

About Navbar Buttons: Add custom navigation buttons/links to your navbar. These appear between the logo and theme toggle. You can add links to external sites, other pages, or downloads.

Pills & Buttons

▼

About Pills: Pills are the clickable lesson buttons that appear on book pages. Customize their colors, effects, and behavior for both light and dark modes.

Pill Colors - Light Mode

Default pill background in light mode
Pill text color in light mode
Background when mouse hovers over pill
Text color on hover

Pill Colors - Dark Mode

Pill background when dark mode is active
Pill text in dark mode
Hover background in dark mode
Hover text in dark mode

Pill Effects

Glow/shadow effect. Format: 0 0 15px rgba(r, g, b, 0.3)
Stronger glow for dark mode to make pills stand out
Border around pills (often transparent)

Pill Dimensions

Internal padding
Roundness of corners
Thickness of border
Minimum pill width
Minimum pill height

Pill Typography

Text size in pills
Text weight (100-900)
Text alignment

Pill Effects

Shadow effect
Transform on hover (e.g., translateY(-2px))

Book Cover Cards

▼

About Book Cards: These are the book cover cards on the landing page. Control their size, colors, shadows, and hover effects to create an engaging book browsing experience.

Card Colors

Card background
Card text color
Card border color

Card Dimensions

Internal padding
Corner roundness
Border thickness
Maximum card width

Card Image

Roundness of cover image
Cover image ratio (e.g., 3/4)
How image fills container

Card Typography

Size of card title
Weight of card title
Text alignment

Card Effects

Card shadow
Shadow on hover
Transform on hover
Animation speed

Dark Mode Colors

Card background in dark mode
Card border in dark mode
Card title text color in dark mode

Audio Players

▼

About Audio Players: Customize the audio player containers on lesson pages. These house the native HTML5 audio controls along with labels like "Full Lesson" and "Block 1".

Player container background
Player border color
Label text color
Size of audio labels
Weight of labels
Internal padding
Corner roundness
Shadow effect
Space between label and player
Maximum player width

Dark Mode Colors

Audio player background in dark mode
Audio player border in dark mode
Audio label text color in dark mode

Layout

▼

About Layout: Control grid columns, page widths, and element sizing. Grid columns determine how many items appear per row. Max-widths prevent content from stretching too wide on large screens.

Grid Layout

Columns in landing page grid
Max width of cover grid
Columns for lesson pills

Page Widths

Max width of landing page
Max width of book pages
Max width of lesson pages
Max width of audio players

Book Page Layout

Width of cover on book page
Gap between cover and pills

Spacing

▼

About Spacing: Control gaps between elements. Use px (12px), rem (1rem), or responsive values with clamp (clamp(12px, 2.5vw, 20px)) for fluid spacing that adapts to screen size.

Gap between book covers
Gap between lesson pills
Gap between audio players
Padding for page sections
Padding for containers

Shadows

▼

About Shadows: Shadows add depth and elevation. Format: 0 4px 8px rgba(0, 0, 0, 0.1). First two values are horizontal/vertical offset, third is blur, then color with opacity.

Small shadow for subtle elevation
Medium shadow for cards
Large shadow for modals
Shadow for hover states

Border Radius

▼

About Border Radius: Control corner roundness throughout the site. Use px (6px, 12px) for fixed roundness, or 999px for pill shapes. Larger values = rounder corners.

Small corner roundness
Medium corner roundness
Large corner roundness
Extra large roundness
Fully rounded (999px)

Animations

▼

About Animations: Control transition speeds and hover effects. Durations use seconds (0.3s) or milliseconds (300ms). Timing functions control acceleration: ease, ease-in, ease-out, linear.

Default transition speed
Animation curve
Scale on hover (e.g., 1.05)
Vertical movement on hover
Duration for fade in

Visual Effects

▼

About Visual Effects: Add glows, shadows, and filters to make elements stand out. These effects help improve visibility and create visual hierarchy, especially in dark mode.

Logo Effects

Glow effect for logo. Format: drop-shadow(0 0 10px rgba(r, g, b, 0.4))
Stronger glow for dark mode - helps logo stand out against dark background

Image Effects

Reduce image brightness in dark mode (0.0-1.0). Try 0.7-0.85 for subtle darkening
Adjust contrast in dark mode (0.0-2.0). Normal is 1.0

Card Effects

Add glow to book cards on hover. Format: 0 0 25px rgba(r, g, b, 0.4)
Card hover glow for dark mode

Other Effects

Backdrop blur strength (e.g., 10px)
Outline color for accessibility focus indicators

Branding

▼

About Branding: Customize your site name and logo. Site name appears in the navbar and browser titles. Logo path is relative to the website folder (e.g., assets/logo.png).

Displayed in navbar and titles

Logo Settings

Upload different logos for light and dark themes. Logos will automatically switch when users toggle dark mode.

Path relative to website folder (e.g., assets/logo-light.png)
Optional: Different logo for dark mode. Leave empty to use same logo.
💡 Tip: For best results, use PNG files with transparent backgrounds. Recommended logo height: 40-60px. Place logo files in website/assets/ directory.

Element Visibility

▼

About Visibility: Control which elements are shown or hidden across your website. You can hide elements you don't need or customize how certain elements appear. Note: Some elements like navbar branding are already hidden on mobile devices for better UX.

Lesson Page Elements

Display the lesson title at the top of lesson audio pages
Size of lesson title (e.g., 2rem, 24px)
Weight: 300-900 (400=normal, 700=bold)
Leave empty to use default text color
Text alignment for lesson title

Navbar Elements

Display the logo image in the navigation bar
Display site name in navbar (automatically hidden on mobile/tablet)

Book & Cover Elements

Display the large book cover image on individual book lesson pages (automatically hidden on mobile)
Display book names below cover images on the landing page

Custom CSS

▼
Add custom CSS for advanced styling (will be injected into the website)