Daring Fireball to Gizmodo Style by mollyrealized

/* ==UserStyle==
@name           Daring Fireball to Gizmodo
@namespace      github.com/openstyles/stylus
@version        1.0.2
@description    Transform Daring Fireball into Gizmodo style, with improved spacing and layout fixes.
@author         Claude
==/UserStyle== */

@-moz-document domain("daringfireball.net") {
    /* Reset base styles */
    body, p, div, span, h1, h2, h3, h4, h5, h6 {
        color: rgb(31, 31, 31) !important;
        background-color: #ffffff !important;
    }

    body {
        font-family: Georgia, serif !important;
        font-size: 21px !important;
        line-height: 29px !important;
        margin: 0 !important;
        min-width: auto !important;
        -webkit-text-size-adjust: none !important;
    }

    /* Title */
    h1 {
        font-family: Helvetica, Arial, sans-serif !important;
        font-size: 52px !important;
        line-height: 64px !important;
        font-weight: 900 !important;
        letter-spacing: -0.01em !important;
        margin: 0 0 6px 0 !important;
        max-width: 1180px !important;
    }

    /* Article Styling */
    .article {
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 21px !important;
        line-height: 29px !important;
        padding: 2rem 0 !important;
        margin-bottom: 0 !important; /* Prevent excess whitespace */
    }

    .article p {
        font-size: 1.2rem !important;
        line-height: 1.8 !important;
        margin-bottom: 1.5rem !important;
    }

    /* Metadata */
    .dateline {
        font-family: Helvetica, Arial, sans-serif !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        color: rgb(115, 115, 115) !important;
        margin: 6px 0 18px 0 !important;
    }

    /* Links */
    a:link, a:visited {
        color: rgb(31, 31, 31) !important;
        text-decoration: underline !important;
        border-bottom: none !important;
    }

    a:hover {
        color: #0073ff !important;
        background: none !important;
    }

    /* Blockquotes */
    blockquote {
        font-family: Georgia, serif !important;
        font-style: italic !important;
        color: rgb(102, 102, 102) !important;
        margin: 2rem 0 !important;
        padding: 1rem 2rem !important;
        border-left: 4px solid #0073ff !important;
        background: #f5f5f5 !important;
    }

    /* Tags */
    .tags {
        font-size: 12px !important;
        text-transform: uppercase !important;
        color: rgb(102, 102, 102) !important;
    }

    /* Layout Containers */
    #Box {
        width: 100% !important;
        max-width: 1280px !important;
        margin: 0 auto !important;
        padding: 0 1rem !important;
    }

    #Banner {
        margin: 0 !important;
        padding: 1rem 0 !important;
        width: 100% !important;
        border-bottom: 1px solid #eee !important;
    }

    #Main {
        margin: 0 !important;
        width: 100% !important;
        max-width: 800px !important;
    }

    /* Footer (Fixed Excess Whitespace) */
    #Footer {
        padding: 1.5rem 0 !important; /* Adjusted padding */
        margin: 0 !important; /* Eliminated huge top margin */
        border-top: 1px solid #eee !important;
    }

    /* Smallprint (Ensure No Extra Whitespace) */
    .smallprint {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hide Unwanted Elements */
    #Sidebar,
    #SiteSearch,
    #PreviousNext,
    input[type="text"], input[type="submit"] {
        display: none !important;
    }

    /* Dark Mode */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a1a !important;
            color: #ffffff !important;
        }

        a:link, a:visited {
            color: #ffffff !important;
        }

        blockquote {
            background: #2a2a2a !important;
            border-left-color: #0073ff !important;
        }

        #Banner, #Footer {
            border-color: #333 !important;
        }
    }

    /* Mobile Responsiveness */
    @media (max-width: 768px) {
        #Box {
            padding: 0 1rem !important;
        }

        h1 {
            font-size: 2rem !important;
        }

        .article p {
            font-size: 1.1rem !important;
        }
    }
}