LinkTree Website v2

A modern, responsive LinkTree-style website with modular CSS architecture and dynamic theming support.

Major Changes in v2

🎨 Modular CSS Architecture

• Consolidated Styling: All responsive and component styles unified into main.css
• Import System: Created css/import.css as the main stylesheet that imports all components
• Theme System: Separated color definitions into css/colors.css with individual theme files:
  • css/colors/red.css - Passion theme (default)
  • css/colors/green.css - Nature theme
  • css/colors/blue.css - Ocean theme
• CSS Custom Properties: All colors, borders, and shadows now use CSS variables for easy theming

📱 Enhanced Responsive Design

• Fluid Scaling: Improved responsive formulas using calc() for smooth scaling from 200px to 2K resolution
• Breakpoint Optimization: Added 1600px breakpoint to cap content scaling on ultra-wide displays
• Unified Styles: All responsive styles integrated into main.css with better mobile experience

🚀 JavaScript Functionality

• External Scripts: Moved all JavaScript from inline HTML to js/script.js
• Dropdown Logic: Centralized dropdown behavior with auto-focus and click-outside-to-close
• Smart Favicon Switching: Theme detection that updates favicons automatically on theme changes
• Custom Cursors: Dynamic theme-aware cursor system for desktop browsers
• Clean Architecture: Focused on essential interactive features

🔧 Developer Experience

• Easy Extensibility: Simple button addition by copying existing HTML structure
• One-Line Theme Switching: Change themes by editing one line in css/colors.css
• Automatic Asset Switching: Profile pictures and favicons change automatically with themes
• Clean Separation: Complete separation of concerns (HTML structure, CSS styling, JS behavior)

File Structure

├── index.html                 # Main HTML structure
├── readme.md                  # Project documentation
├── css/
│   ├── import.css            # Main CSS import file
│   ├── main.css              # All layout and component styles
│   ├── pointer.css           # Custom cursor styles
│   ├── colors.css            # Theme import controller
│   └── colors/
│       ├── red.css           # Passion theme (burgundy #ba304c)
│       ├── green.css         # Nature theme (emerald #2e7d32)
│       └── blue.css          # Ocean theme (deep blue #1976d2)
├── js/
│   └── script.js             # Core JavaScript functionality (dropdowns, theme detection, cursors)
└── images/                   # Static assets (18 files)
    ├── Social Icons/
    │   ├── discord.png       # Discord icon
    │   ├── facebook.png      # Facebook icon
    │   ├── instagram.png     # Instagram icon
    │   ├── x.png            # X (Twitter) icon
    │   └── x2.png           # Alternative X icon
    ├── Theme Assets/
    │   ├── fav_red.png      # Red theme favicon
    │   ├── fav_green.png    # Green theme favicon
    │   ├── fav_blue.png     # Blue theme favicon    
    │   ├── pfp_red.png      # Red theme profile picture
    │   ├── pfp_green.png    # Green theme profile picture
    │   └── pfp_blue.png     # Blue theme profile picture
    ├── gitea_icon.png       # Gitea service icon
    ├── nextcloud.png        # Nextcloud service icon
    ├── game2.png            # Gaming service icon 2
    ├── game3.png            # Gaming service icon 3
    ├── game4.png            # Gaming service icon 4
    └── shopify.png          # Shopify service icon

Theme System

Available Themes

1. Red: Passion theme with warm burgundy reds (#ba304c)
2. Green: Nature-inspired with emerald greens (#2e7d32)
3. Blue: Ocean theme with deep blues (#1976d2)

Switching Themes

Edit css/colors.css and change the first line import:

@import url("colors/red.css");    /* Passion theme */
@import url("colors/green.css");  /* Nature theme */
@import url("colors/blue.css");   /* Ocean theme */

Important: The @import statement must be the very first line in the file for CSS to load properly.

Theme Features

Each theme automatically changes:

• ✅ Color scheme: All UI colors, backgrounds, and text
• ✅ Profile picture: Theme-specific profile images (pfp_red.png, pfp_green.png, pfp_blue.png)
• ✅ Favicon: Browser tab icon matches theme (fav_red.png, fav_green.png, fav_blue.png)
• ✅ Custom cursors: Desktop browsers get theme-colored arrow cursors

The favicon and cursors update automatically using JavaScript that detects theme changes through CSS custom properties.

Adding New Themes

1. Create Theme Files

1. CSS Theme File: Create css/colors/yourtheme.css with all required CSS custom properties
2. Profile Picture: Add images/pfp_yourtheme.png
3. Favicon: Add images/fav_yourtheme.png

2. Update JavaScript Detection

Edit js/script.js in the updateFaviconForTheme() function:

// Determine theme based on primary color values
if (primaryColor === '#2e7d32') {
    detectedTheme = 'green';
} else if (primaryColor === '#1976d2') {
    detectedTheme = 'blue';
} else if (primaryColor === '#ba304c') {
    detectedTheme = 'red';
} else if (primaryColor === '#your-color-hex') {
    detectedTheme = 'yourtheme';
}

Replace #your-color-hex with the --color-primary value from your theme CSS file.

3. Activate Your Theme

Update the import in css/colors.css:

@import url("colors/yourtheme.css");

Required CSS Variables for New Themes:

• --color-primary (used for JavaScript detection)
• --color-hover, --color-accent
• --gradient-background, --background-dark, --background-medium
• --text-primary, --text-secondary, --text-accent
• --footer-text-white, --footer-text-colored
• --border-dark, --shadow-primary
• --button-shadow, --dropdown-shadow

Plus the profile picture CSS rule:

.link-tree-profile-pic {
    content: url('/images/pfp_yourtheme.png');
}

Core Features

• Responsive Design: Fluid scaling from mobile (200px) to ultra-wide displays (2560px+)
• Theme System: Three color themes with automatic asset switching
• Interactive Dropdowns: Smooth animations with click-outside-to-close functionality
• Keyboard Navigation: Full keyboard support with Escape key handling
• Custom Cursors: Theme-aware arrow cursors for desktop browsers
• Drag Prevention: Images and links cannot be dragged for cleaner UX
• Auto-centering: Dropdowns auto-scroll into view when opened

Responsive Breakpoints

• Mobile: 200px - 768px (fluid scaling)
• Tablet: 768px - 1024px (adaptive scaling)
• Desktop: 1024px - 1600px (optimized scaling)
• Ultra-wide: 1600px+ (capped scaling)

Adding New Buttons/Links

Simply copy an existing button structure in index.html:

<a href="your-link" class="link-tree-button">Your Text</a>

For dropdown buttons:

<div class="dropdown">
    <button class="link-tree-button dropdown-toggle" onclick="toggleDropdown('yourDropdown')">
        Your Category
        <span class="dropdown-arrow">▼</span>
    </button>
    <div class="dropdown-content" id="yourDropdown">
        <a href="#" class="link-tree-button">Item 1</a>
        <a href="#" class="link-tree-button">Item 2</a>
    </div>
</div>

Browser Support

• Modern browsers with CSS Grid and Custom Properties support
• Mobile browsers (iOS Safari, Chrome Mobile, Android browsers)
• Desktop browsers (Chrome, Firefox, Safari, Edge)
• Custom cursors supported on desktop browsers only

Technical Details

• CSS Architecture: Modular imports with custom properties for theming
• JavaScript Features: Vanilla JS with MutationObserver for theme detection
• Performance: Optimized theme switching with minimal DOM manipulation
• Accessibility: Keyboard navigation and semantic HTML structure

---

Made with ❤️ by RubyReaper

profile pics and favicon licensing

please note the following images are property of RubyEyedReaper and are not included in the license

(fav_red.png, fav_green.png, fav_blue.png pfp_red.png, pfp_green.png, pfp_blue.png)