style.css

/*
Theme Name: Slateframe
Theme URI: https://github.com/hsxk/Slateframe
Author: Hao Kexin
Author URI: https://github.com/hsxk
Description: A lightweight, accessible WordPress theme for publishing, photography, and portfolios.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: slateframe
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Copyright: 2026 Hao Kexin
Tags: blog,photography,portfolio,one-column,custom-logo,custom-menu,featured-images,translation-ready,rtl-language-support,block-styles,wide-blocks*/:root{--slateframe-bg:light-dark(#f7f7f4,#111412);--slateframe-surface:light-dark(#fff,#181c1a);--slateframe-surface-soft:light-dark(#f0f1ee,#202622);--slateframe-text:light-dark(#171918,#eef1ee);--slateframe-muted:light-dark(#656b67,#a7b0aa);--slateframe-border:light-dark(#dfe2de,#343b37);--slateframe-accent:light-dark(#1d5f50,#7fc8b4);--slateframe-accent-strong:light-dark(#12483d,#a5decf);--slateframe-focus:light-dark(#0b6bcb,#78b7ff);--slateframe-shadow:light-dark(rgb(23 25 24/10%),rgb(0 0 0/32%));--slateframe-selection:light-dark(#dbe8e3,#214c40);--slateframe-danger:light-dark(#a02a2a,#ff9b98);--slateframe-media-chrome:#101513;--slateframe-media-chrome-text:#e7ece9;--slateframe-content:46rem;--slateframe-wide:74rem;--slateframe-chrome:108rem;--slateframe-control:44px;--slateframe-space-scale:1;--slateframe-gutter-min:16px;--slateframe-section-scale:1;--slateframe-space-2:.5rem;--slateframe-space-3:.75rem;--slateframe-space-4:1rem;--slateframe-inline-gap:.25rem;--slateframe-component-gap:var(--slateframe-space-3);--slateframe-stack-gap:var(--slateframe-space-4);--slateframe-media-gap:var(--slateframe-space-3);--slateframe-caption-gap:.65rem;--slateframe-prose-gap:1.25rem;--slateframe-heading-gap:2.25rem;--slateframe-heading-after:.625rem;--slateframe-list-item-gap:.5rem;--slateframe-control-padding-block:var(--slateframe-space-2);--slateframe-control-padding-inline:var(--slateframe-space-3);--slateframe-header-height:4.5rem;--slateframe-icon-size:1.25rem;--slateframe-border-width:1px;--slateframe-rule:var(--slateframe-border-width) solid var(--slateframe-border);--slateframe-focus-width:3px;--slateframe-focus-offset:3px;--slateframe-gutter:clamp(var(--slateframe-gutter-min),3vw,calc(var(--slateframe-gutter-min)*2));--slateframe-section-min:2.75rem;--slateframe-section-max:4.5rem;--slateframe-section:clamp(var(--slateframe-section-min),5vw,var(--slateframe-section-max));--slateframe-radius:12px;--slateframe-sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Arial,sans-serif;--slateframe-mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;color-scheme:light}:root[data-slateframe-color-mode="dark"]{color-scheme:dark}:root[data-slateframe-color-mode="light"]{color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth}::selection{background:var(--slateframe-selection);color:var(--slateframe-text)}body{margin:0;background:var(--slateframe-bg);color:var(--slateframe-text);font-family:var(--slateframe-sans);line-height:1.72;overflow-wrap:anywhere;text-rendering:optimizeLegibility}img,svg,video{display:block;max-width:100%;height:auto}a{color:var(--slateframe-accent);text-decoration-thickness:.08em;text-underline-offset:.18em}a:hover{color:var(--slateframe-accent-strong)}button,input,select,textarea{font:inherit;color-scheme:inherit}:where(kbd,samp){font-family:var(--slateframe-mono)}kbd{display:inline-block;padding:.1em .4em;border:var(--slateframe-rule);border-block-end-width:2px;border-radius:.35em;background:var(--slateframe-surface);font-size:.88em;line-height:1.4}mark{padding-inline:.15em;background:var(--slateframe-selection);color:var(--slateframe-text)}abbr[title]{text-decoration:underline dotted;cursor:help}:where(sub,sup){line-height:0}:focus-visible{outline:var(--slateframe-focus-width) solid var(--slateframe-focus);outline-offset:var(--slateframe-focus-offset)}.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.screen-reader-text:focus,.skip-link:focus{clip:auto!important;width:auto;height:auto;margin:.75rem;padding:.7rem 1rem;background:var(--slateframe-surface);color:var(--slateframe-text);z-index:10000}.slateframe-shell{inline-size:min(calc(100% - 2*var(--slateframe-gutter)),var(--slateframe-wide));margin-inline:auto}.slateframe-main{min-height:56vh}.slateframe-site-header{position:sticky;inset-block-start:0;z-index:100;border-block-end:var(--slateframe-rule);background:var(--slateframe-bg)}.slateframe-header-inner{width:min(calc(100% - 2*var(--slateframe-gutter)),var(--slateframe-chrome));min-height:var(--slateframe-header-height);display:flex;align-items:center;gap:var(--slateframe-stack-gap)}.slateframe-brand{display:flex;align-items:center;gap:var(--slateframe-component-gap);min-inline-size:0;color:var(--slateframe-text);text-decoration:none}.slateframe-brand-logo{max-width:2.75rem;max-height:2.75rem;object-fit:contain}.slateframe-brand-copy{display:grid;min-inline-size:0;line-height:1.1}.slateframe-brand-title{display:block;font-weight:760;letter-spacing:-.025em;line-height:1.15;text-wrap:balance}.slateframe-brand-tagline{margin-block-start:.18rem;color:var(--slateframe-muted);font-size:.75rem;line-height:1.35}.slateframe-header-spacer{flex:1}.slateframe-menu-toggle,.slateframe-color-toggle{line-height:1;min-inline-size:var(--slateframe-control);min-block-size:var(--slateframe-control);border:0;border-radius:var(--slateframe-radius);background:transparent;color:inherit;cursor:pointer}.slateframe-color-toggle{display:none;place-items:center;flex:0 0 auto;padding:0;.has-js &{display:grid}}.slateframe-color-icon{inline-size:var(--slateframe-icon-size);block-size:var(--slateframe-icon-size)}.slateframe-color-icon-moon,:root[data-slateframe-color-mode="dark"] .slateframe-color-icon-sun{display:none}:root[data-slateframe-color-mode="dark"] .slateframe-color-icon-moon{display:block}@media(prefers-color-scheme:dark){:root:not([data-slateframe-color-mode]){color-scheme:dark}:root:not([data-slateframe-color-mode]) .slateframe-color-icon-sun{display:none}:root:not([data-slateframe-color-mode]) .slateframe-color-icon-moon{display:block}}@media(hover:hover){.slateframe-card-media:hover img{transform:scale(1.015)}.slateframe-menu-toggle:hover,.slateframe-color-toggle:hover{background:var(--slateframe-surface-soft)}}.slateframe-page-header{padding-block-start:var(--slateframe-section);padding-block-end:calc(var(--slateframe-stack-gap) + var(--slateframe-component-gap))}.slateframe-page-title,.slateframe-entry-title{margin:0;max-width:14em;font-size:clamp(2.1rem,5vw,4.6rem);font-weight:790;line-height:1.06;letter-spacing:-0.05em;hyphens:auto;text-wrap:balance}.slateframe-entry-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--slateframe-inline-gap);margin-block-end:var(--slateframe-space-3);color:var(--slateframe-muted);font-size:.82rem;& a{display:inline-flex;align-items:center;min-block-size:var(--slateframe-control);color:inherit}}.slateframe-meta-byline{display:flex;align-items:center;gap:var(--slateframe-inline-gap);min-inline-size:0}.slateframe-byline{min-inline-size:0}.slateframe-archive-description{max-width:var(--slateframe-content);margin-block-start:var(--slateframe-stack-gap);color:var(--slateframe-muted);font-size:1.02rem}.slateframe-entry-hero{margin-block-end:clamp(calc(var(--slateframe-stack-gap)*2),5vw,var(--slateframe-section-max))}.slateframe-entry-hero-image{width:100%;max-height:78vh;object-fit:cover}.slateframe-grid{display:grid;min-inline-size:0;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2vw,1.4rem)}.slateframe-card{grid-column:span 6;display:grid;min-inline-size:0;align-content:start;border-block-start:var(--slateframe-rule);padding-block:1.25rem 1.8rem}.slateframe-card-media{display:block;margin-block-end:1rem;color:inherit;overflow:hidden;& img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 220ms ease}}.slateframe-card-title{margin:0;font-size:clamp(1.35rem,2.3vw,1.9rem);line-height:1.16;letter-spacing:-.035em;text-wrap:balance;& a{color:var(--slateframe-text);text-decoration:none}}.slateframe-card-excerpt{margin-block-start:.75rem;color:var(--slateframe-muted);&>:last-child{margin-block-end:0}}.slateframe-entry-context,.slateframe-post-navigation{margin-block-end:var(--slateframe-section)}.slateframe-comments{padding-block-start:0}.wp-block-button .wp-block-button__link.wp-element-button{min-inline-size:var(--slateframe-control);min-block-size:var(--slateframe-control);max-inline-size:100%;padding:var(--slateframe-control-padding-block) var(--slateframe-control-padding-inline);text-align:center;border:var(--slateframe-border-width) solid var(--slateframe-text);border-radius:var(--slateframe-radius);background:var(--slateframe-text);color:var(--slateframe-bg);cursor:pointer}.wp-element-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}button:disabled,input:disabled,select:disabled,textarea:disabled,.wp-block-button .wp-element-button[aria-disabled=true]{cursor:not-allowed;opacity:.58}.slateframe-pagination{margin-block:calc(var(--slateframe-stack-gap)*2) var(--slateframe-section);& .nav-links{display:flex;flex-wrap:wrap;gap:var(--slateframe-inline-gap)}}.slateframe-pagination .page-numbers,.wp-block-query-pagination :is(a,.page-numbers){display:grid;place-items:center;min-inline-size:var(--slateframe-control);min-block-size:var(--slateframe-control);max-inline-size:100%;padding:var(--slateframe-control-padding-block) var(--slateframe-control-padding-inline);border:var(--slateframe-rule);border-radius:var(--slateframe-radius);color:var(--slateframe-text);text-align:center;text-decoration:none}.slateframe-pagination .current{background:var(--slateframe-text);color:var(--slateframe-bg)}@media(max-width:900px){.slateframe-grid{grid-template-columns:minmax(0,1fr)}.slateframe-card{grid-column:auto}}@media(max-width:640px){.slateframe-brand-tagline{display:none}}@media(forced-colors:active){kbd{border-color:CanvasText}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto !important;transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}.slateframe-card-media:hover img{transform:none}}.wp-block-quote.is-style-slateframe-note{padding:1.1rem 1.25rem;border:0;border-inline-start:3px solid var(--slateframe-accent);background:var(--slateframe-surface-soft);color:var(--slateframe-text)}.wp-block-image.is-style-slateframe-frame{padding:clamp(.4rem,1vw,.75rem);background:var(--slateframe-surface);border:var(--slateframe-rule);& figcaption{margin-block:.65rem .15rem;color:var(--slateframe-muted);font-size:.82rem;text-align:start}}.slateframe-pattern{--slateframe-pattern-gap:clamp(1.25rem,3vw,2.5rem);& .wp-block-columns{gap:var(--slateframe-pattern-gap)}}.slateframe-pattern-kicker{margin-block:0 .6rem;color:var(--slateframe-muted);font-size:.76rem;font-weight:720;letter-spacing:.08em;line-height:1.3;text-transform:uppercase}.slateframe-pattern-intro{max-width:42rem;color:var(--slateframe-muted);font-size:clamp(1rem,1.4vw,1.12rem)}.slateframe-pattern-caption{max-width:52rem;color:var(--slateframe-muted);font-size:.84rem}@media(max-width:781px){.slateframe-pattern-kicker{letter-spacing:.06em}}@media(max-width:480px){.slateframe-site-header{position:relative}.slateframe-header-inner{padding-block:var(--slateframe-space-2);flex-wrap:wrap}.slateframe-brand{flex:auto}.slateframe-header-spacer{display:none}.slateframe-menu-toggle{flex:0 0 var(--slateframe-control)}.slateframe-page-title,.slateframe-entry-title{max-width:none;font-size:clamp(1.8rem,7.2vw,2.4rem);line-height:1.08;letter-spacing:-.04em;text-wrap:pretty}}.alignleft{float:left;margin-block-end:1rem;margin-inline-end:1.5rem}.alignright{float:right;margin-block-end:1rem;margin-inline-start:1.5rem}.aligncenter{display:block;margin-inline:auto}.wp-caption{max-width:100%}.wp-caption-text,.gallery-caption{color:var(--slateframe-muted);font-size:.84rem;line-height:1.5}.sticky.slateframe-card{border-block-start-width:2px}.bypostauthor>.comment-body{padding-inline-start:.9rem;border-inline-start:2px solid var(--slateframe-accent)}@media (max-width:640px){.alignleft,.alignright{float:none;margin-inline:auto}.wp-block-search__button-outside .wp-block-search__inside-wrapper{display:grid;grid-template-columns:minmax(0,1fr)}.wp-block-search__button-outside .wp-block-search__button{margin:0;inline-size:100%;white-space:normal}}.wp-block-search__button-outside{& .wp-block-search__inside-wrapper{flex-wrap:wrap;gap:var(--slateframe-component-gap)}& .wp-block-search__input{flex:1 1 16rem}}:is(.slateframe-prose,.editor-styles-wrapper) .wp-block-file>a:first-of-type{display:inline-flex;align-items:center;min-block-size:var(--slateframe-control);max-inline-size:100%;overflow-wrap:anywhere}:is(h1,h2,h3,.wp-block-post-title):is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:normal}form :is(label:has(>input[type=checkbox]),label:has(>input[type=radio]),input[type=checkbox]+label,input[type=radio]+label){display:inline-flex;align-items:center;min-block-size:var(--slateframe-control)}form input:is([type=range],[type=color],[type=file]){min-block-size:var(--slateframe-control);min-inline-size:0;max-inline-size:100%}
form input[type=file]::file-selector-button{max-inline-size:100%;min-block-size:var(--slateframe-control);white-space:normal;overflow-wrap:anywhere}
form input[type=file]{white-space:normal;overflow-wrap:anywhere}


@media screen{.wp-block-footnotes a[href^="#fnref"]{display:inline-grid;place-items:center;min-inline-size:var(--slateframe-control);min-block-size:var(--slateframe-control);max-inline-size:100%;border-radius:var(--slateframe-radius)}:is([id^=fnref],.wp-block-footnotes li[id^=fn]){scroll-margin-block-start:var(--slateframe-header-height);&:target{outline:2px solid var(--slateframe-accent);@media(forced-colors:active){outline-color:Highlight}}}}