/* ================================================================ BIRDFOXGIRL — TWEE THEME LAYER Keep this file last in every page's . It adds the cute details without disturbing the site's layout or mobile fixes. ================================================================ */ :root { --twee-red: #a52a2a; --twee-deep-red: #742323; --twee-cream: #fff8e8; --twee-butter: #f4dda1; --twee-sage: #9eaa86; --twee-blue: #91a9b1; --twee-ink: #29211f; } /* A solid muted red: cleaner, while still keeping the vintage warmth. */ body { background-color: #2e0b0e; background-image: none; } .page-shell { border-color: var(--twee-ink); box-shadow: 0 0 0 4px var(--twee-cream), 8px 10px 0 rgba(41, 33, 31, .62); } /* Dark film-strip tabs bring back the site's moody archive feeling. */ .film-tabs { gap: 3px; padding: 10px 7px 5px; background-color: #050505; background-image: repeating-linear-gradient(90deg, transparent 0 13px, #eee6d4 13px 20px, transparent 20px 27px), repeating-linear-gradient(90deg, transparent 0 13px, #eee6d4 13px 20px, transparent 20px 27px); background-position: 0 2px, 0 calc(100% - 2px); background-size: auto 4px; background-repeat: repeat-x; } .film-tabs a { position: relative; margin-top: 1px; padding: 7px 13px 8px; color: var(--twee-cream); background: #0d0d0d; border: 1px solid #4a4643; border-bottom: 0; border-radius: 7px 7px 1px 1px; box-shadow: inset 0 1px rgba(255, 255, 255, .12); } .film-tabs a:hover, .film-tabs a.active { color: var(--twee-ink); background: var(--twee-cream); transform: translateY(-2px) rotate(-.5deg); } .film-tabs a::after { content: "✿"; margin-left: 7px; font-size: 8px; opacity: .55; } .ticker { color: var(--twee-ink); background: var(--twee-cream); border-bottom: 2px dashed var(--twee-red); } /* Black striped title bars keep each section feeling like a film label. */ .window-title, .side-box > h2, .week-archive-nav h2 { color: var(--twee-cream); background-color: #080808; background-image: repeating-linear-gradient(135deg, #080808 0 8px, #22201f 8px 10px); border-bottom: 2px dashed rgba(255, 248, 232, .72); } .window, .side-box, .week-archive-nav { border-color: #5f504a; box-shadow: 3px 3px 0 rgba(70, 55, 49, .35); } .window:nth-of-type(even), .side-box:nth-of-type(odd) { transform: rotate(.08deg); } /* Paper-and-sticker accents. */ .welcome-window, .archive-intro, .currently-card, .home-weekly-scroll { background-color: var(--twee-cream); background-image: repeating-linear-gradient(0deg, transparent 0 23px, rgba(165, 42, 42, .055) 24px); } .quick-links a, .home-weekly-archive-link, .open-link-drawer, .blogspot-button { border-radius: 2px; box-shadow: 2px 2px 0 #4d403b; } .straight-polaroid, .welcome-photo, .mini-box-art { transform: rotate(-.8deg); } .straight-polaroid::before, .welcome-grid::before { content: ""; position: absolute; z-index: 3; width: 54px; height: 15px; background: rgba(244, 221, 161, .72); box-shadow: 0 1px 2px rgba(0,0,0,.12); transform: rotate(-7deg); pointer-events: none; } .welcome-grid { position: relative; } .welcome-grid::before { top: 8px; left: 9px; } .straight-polaroid { position: relative; } .straight-polaroid::before { top: -7px; left: calc(50% - 27px); } footer { background-color: var(--twee-ink); background-image: radial-gradient(rgba(255,248,232,.14) 1px, transparent 1px); background-size: 9px 9px; } ::selection { color: var(--twee-cream); background: var(--twee-red); } @media (max-width: 750px) { .film-tabs { gap: 2px; padding-top: 9px; } .film-tabs a { padding: 7px 10px; } .film-tabs a::after { display: none; } .welcome-window::after { right: 12px; } } @media (prefers-reduced-motion: reduce) { .film-tabs a:hover, .film-tabs a.active, .window, .side-box { transform: none; } }