/* Theme Name: Diana Costa Folio Template: twentytwentyfive Description: Personal portfolio for Diana Costa — designer at Automattic. Version: 1.0.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: diana-costa-folio */ /* ============================================ Noise Texture Tiling SVG grain overlay on the whole page. baseFrequency .65, 3 octaves — coarse film grain. background-size tiles the pattern at 182px. Light: mix-blend-overlay at 35% opacity Dark: mix-blend-soft-light at 20% opacity ============================================ */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"); background-size: 182px; mix-blend-mode: overlay; opacity: 0.35; pointer-events: none; z-index: 9999; } /* ============================================ Dark Mode Rich Tabor's Dark Mode Toggle Block adds/removes .theme-dark on . We override CSS custom properties here so every token flips automatically. ============================================ */ .theme-dark body { --wp--preset--color--base: #141414; --wp--preset--color--contrast: #ffffff; } .theme-dark body::before { mix-blend-mode: soft-light; opacity: 0.2; } /* ============================================ Folio Rule (custom separator style) Thin 2.5px horizontal rule, left-aligned, 256px wide. Color flips between light and dark mode. ============================================ */ .wp-block-separator.is-style-folio-rule { max-width: 256px; width: 256px; margin-left: 0; margin-right: auto; height: 0; border: none; border-top: 2.5px solid rgba(20, 20, 20, 0.4); background: transparent; } .theme-dark .wp-block-separator.is-style-folio-rule { border-top-color: rgba(255, 255, 255, 0.4); } /* ============================================ Muted Text Footnote text at 70% opacity — flips in dark mode. Applied via the custom class .has-folio-muted-color. ============================================ */ .has-folio-muted-color { color: rgba(20, 20, 20, 0.7) !important; } .theme-dark .has-folio-muted-color { color: rgba(255, 255, 255, 0.7) !important; } /* ============================================ Full-width flex items WordPress's flex containers use align-items: flex-start, so every item shrinks to content width by default. align-items: stretch on the outer wrapper forces all direct children to fill the full horizontal axis, regardless of which group classes are present. ============================================ */ .folio-wrapper { box-sizing: border-box; align-items: stretch; } .folio-toggle, .folio-bottom, .folio-footnote-row { width: 100%; max-width: 100%; } .folio-bottom { align-items: stretch; } .folio-footnote-row .wp-block-column:last-child, .folio-footnote-row .wp-block-column:last-child .wp-block-telex-block-telex-location-time { text-align: right; } .wp-block-telex-block-telex-location-time { padding-inline: 0; } /* ============================================ Footnote row stacking WordPress stacks columns at 600px by default. Override to keep them side-by-side down to 474px, then let them stack. Right-alignment resets when stacked. ============================================ */ @media (min-width: 474px) { .wp-block-columns.folio-footnote-row > .wp-block-column { flex-basis: 0 !important; flex-grow: 1 !important; } } @media (max-width: 473px) { .folio-footnote-row .wp-block-column:last-child, .folio-footnote-row .wp-block-column:last-child .wp-block-telex-block-telex-location-time { text-align: left; } } /* ============================================ Body margin reset Browsers apply an 8px default margin; zero it out so the 32px block padding is the only spacing. ============================================ */ body { margin: 0; } /* ============================================ Admin bar compensation WordPress adds margin-top: 32px to when the admin bar is visible. Subtract it so the full-viewport layout doesn't overflow. ============================================ */ body.admin-bar .folio-wrapper { min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px)); } /* ============================================ Headline width Scales from 343px (mobile) to 788px (desktop). Safe to set here because .folio-bottom is width: 100%, so max-width on the paragraph only constrains itself. ============================================ */ .folio-headline { max-width: clamp(343px, calc(186px + 41.8vw), 788px); margin-left: 0 !important; margin-right: auto !important; text-wrap: pretty; } /* ============================================ Automattic hover video Fixed overlay that follows the cursor on hover. pointer-events: none so it never blocks interaction. ============================================ */ .folio-hover-video { position: fixed; top: 0; left: 0; width: 600px; height: 450px; border-radius: 8px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; z-index: 10000; will-change: transform; } .folio-hover-video.is-visible { opacity: 1; } .folio-hover-video video { display: block; width: 100%; height: 100%; object-fit: cover; } /* ============================================ Headline link (Automattic) Same colour as surrounding text, 2px underline. Light: underline rgba(0,0,0,0.2), hover #183AD6 Dark: underline rgba(255,255,255,0.4), hover #72B3FF ============================================ */ .folio-headline a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(0, 0, 0, 0.2); transition: color 0.15s ease, text-decoration-color 0.15s ease; } .folio-headline a:hover { color: #183AD6; text-decoration-color: #183AD6; } .theme-dark .folio-headline a { text-decoration-color: rgba(255, 255, 255, 0.4); } .theme-dark .folio-headline a:hover { color: #72B3FF; text-decoration-color: #72B3FF; }