status.health logo status.health logo status.health

status.health® Style Implementation Guide

status.health® Style Implementation Guide

This guide provides the complete CSS styling from status.health to replicate their exact design for your blog.

Capitalization Guidelines

status.health® follows specific capitalization rules:

  1. Brand name: Always “status.health®” (lowercase with registered trademark)
  2. Team references: “status.health® team” (not “Team”)
  3. Button text: Use lowercase for casual buttons like “okay, okay” (not “Okay, okay”)
  4. General rule: Prefer lowercase for a friendly, approachable tone unless starting a sentence

Key Components

1. CSS Variables

The styling uses CSS custom properties for easy theming:

:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --heading-color: #222222;
    --highlight-color: #4a90e2;
    --highlight-bg: rgba(74, 144, 226, 0.1);
    --muted-color: #777777;
    --border-color: #eeeeee;
    --card-bg: #ffffff;
    --footer-bg: #f8f8f8;
    --toc-hover: #f0f4f8;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --transition-speed: 0.3s;
}

2. Typography

3. Navigation Bar Features

4. Rainbow Aura Animation

The signature logo animation:

.aura-flow {
    background: conic-gradient(
        rgba(255, 200, 200, 0.8), 
        rgba(255, 230, 200, 0.8), 
        rgba(255, 255, 200, 0.8), 
        rgba(200, 255, 200, 0.8), 
        rgba(200, 230, 255, 0.8), 
        rgba(220, 200, 255, 0.8), 
        rgba(255, 200, 230, 0.8),
        rgba(255, 200, 200, 0.8)
    );
    animation: pulse-animation 5s ease-in-out infinite alternate, 
               rainbow-rotate 6s linear infinite;
}

5. Beta Button Style

The distinctive rainbow gradient button:

.beta-button {
    background: linear-gradient(45deg, 
        rgba(255, 182, 193, 0.7), 
        rgba(255, 222, 173, 0.7), 
        rgba(255, 255, 173, 0.7), 
        rgba(173, 255, 182, 0.7), 
        rgba(173, 216, 255, 0.7), 
        rgba(216, 173, 255, 0.7)
    );
    color: #333;
    border-radius: 30px;
}

6. Hero Section

7. Card System

Implementation Steps

1. Include Required Fonts

Add to your Jekyll _includes/head.html:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=League+Script&display=swap" rel="stylesheet">

2. Add the CSS File

Copy assets/css/status-health-exact.css to your project and include it:

<link rel="stylesheet" href="/assets/css/status-health-exact.css">

3. Update Your Header Structure

Use this HTML structure in _includes/header.html:

<nav>
    <div class="nav-container">
        <div class="nav-left">
            <a href="/" class="nav-logo-container">
                <div class="nav-logo-icon">
                    <div class="nav-aura">
                        <div class="aura-flow"></div>
                    </div>
                    <img src="/assets/logo.svg" alt="status.health logo">
                </div>
                <span class="nav-logo">status.health® Blog</span>
            </a>
            <div class="nav-links">
                <a href="/" >Home</a>
                <a href="/categories" >Categories</a>
                <a href="/about" >About</a>
                <a href="/newsletter" >Newsletter</a>
            </div>
        </div>
        <div class="nav-right">
            <button class="nav-theme-toggle" aria-label="Toggle theme">
                <!-- SVG icon here -->
            </button>
            <button class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </div>
</nav>

4. Hero Section for Homepage

Add to your index.html:

<section class="hero">
    <div class="container">
        <div class="hero-content">
            <h1 class="cursive-text">Welcome to Our Blog</h1>
            <p class="hero-description">
                Thoughts on sexual health, privacy, and building a safer digital future.
            </p>
            <a href="#posts" class="beta-button">Explore Posts</a>
        </div>
    </div>
</section>

5. Card Layout for Posts

Use this structure for blog post cards:

<div class="featured-card">
    <h3><a href=""></a></h3>
    <p class="post-meta"> •  min read</p>
    <p></p>
    <a href="" class="read-more">Read more →</a>
</div>

6. Dark Mode Support

Add this JavaScript to handle theme switching:

const themeToggle = document.querySelector('.nav-theme-toggle');
const html = document.documentElement;

// Check for saved theme preference
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
    html.classList.add('dark-theme');
}

themeToggle.addEventListener('click', () => {
    html.classList.toggle('dark-theme');
    const isDark = html.classList.contains('dark-theme');
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

Color Reference

Light Mode

Dark Mode

Rainbow Gradient Colors

Used throughout for accents:

Responsive Breakpoints

Animation Timings

Testing

  1. View the test file at /test-status-health-style.html
  2. Check responsiveness at different screen sizes
  3. Test dark mode toggle functionality
  4. Verify all animations are smooth
  5. Ensure accessibility with keyboard navigation

Notes