From 43dec06bbc29bf7ababee52cd79c4d5e3baf6922 Mon Sep 17 00:00:00 2001 From: LucaP Date: Sun, 11 Oct 2026 02:11:49 +0300 Subject: [PATCH] style: soften the focus ring on programmatically focused headings --- .../round6/heading-focus-after-1440.webp | Bin 0 -> 3700 bytes src/styles/base.css | 13 +++++++++++++ 2 files changed, 13 insertions(+) create mode 100644 docs/redesign/round6/heading-focus-after-1440.webp diff --git a/docs/redesign/round6/heading-focus-after-1440.webp b/docs/redesign/round6/heading-focus-after-1440.webp new file mode 100644 index 0000000000000000000000000000000000000000..a7845a7576f69722442c0ec1ac12a3400740bbfb GIT binary patch literal 3700 zcmV-)4vXA$mn=6U6RE$C0y&+^{jADCXX zcfwEu`RDcj_r9K=_j!Q)@BH`eFTjuT|Lh<1I|Y8=`y+nEolV~BW*fU7K22bcn*)l6 zvyg9;7Y7JE*UdsB(vR^Nn9o_acjrF=6#ZU?8{!$joJq+aLRpS zRT>HHyU6Nx(^uy_5Bl&AZ{k2ou;$HRGLw2p1+6N8%#~H!m@!8H1M-RFQvRtCwpG+y z1+|+fJ=M;D^=Kf-dnczM1J5fY8CSPb0HN7Aj3A%xfo|E2@I3x=k^%6i>qy4ylZ*-u zuWe6jFWxZ-rq8)p;L3v8jJx0Ds@Az}lv_R+RS3^S z!Pj+Fqe+Wum-3sFqk`rMn=R;66TNUjGWKPdMue8!Ty5nItMv!D^-H-l?xWJORa+uF z?1(!60RH-|yDbXRnb+d>@eF`j@DN0A6$M792mcPc?HU;7pVRL97RDBPU|y<^%fC7S zV1!HFOs)DAUmOBL!sL{?ph=a0m4LjdbN|#HK!-1NFb|+hEc*z$LG9bdmyO*>&y&1> z>&}sVVUa|po)<33>naZQ3_cd}sO-PmyD{loG&kxOLT5Zlt*31oi#j$i#Az-!^&*3K z)ducT`d z|7~ot7s$sBo$B$fS^rU~={Nr5aOZ z3q!6uM6vfA-5z7k{vRL9$c29RizP<5=e-e-$@t@2_gzx?V|kn^Q|qrtB9}i{-h0oo zvT+-&jp=sjheb*QKDnWpB8bF#0i=IuGW?X}3>DZ6#c)55o{4s^m8>|wTk;L!s6WrI z5BrN7{j|iDF01{?>@8wGGmJz$I{qO4<+TGTb1Q4%5VxroP=vTSXi9-inpzpI;Ar-E zXf_d%)@k1s(B{R6NcM;lj#KV_etD`3nnA0a#&mB-g7o+`4A#9YPgA6L<~qJKJ6J$> zE_5|qpRc}D>@vTJM^x$^8>VFLmF;CA`WBAc#ofC8O3_bjo4>zRG5zlcfQ?GUP*bb> zlY#o`hY;fz(&Jkse|v)t(|8li>#~(f;F_9Kn;kRQ8LO^nHki%}2BAs_aX{Z755`hJ-i8HxNHH(D1+3p+Ee)%tHMxNV(9`x9~46;;{D8IR6M_#;Gn>p4af=k>-Id;W2Zo@ZPcdjE49`E_pvzHUxv1^k(fKLUh)P-{ zN?BF6=#B@7Q~r;VDo*j=Z7$D=3IBH&hYTx_(R9w`KkNPYL|$*R0&P5B`)& z$PH-~CqP4)E@+`6_bEHeqY+>{>-7MtDatS_P8Ieo@g z9ZicId@^71F41M4Es@D94Ebgkz5H0#RAl~(#J|3h3zOfzF|$UKuCeYX6`;GAlh$bk z;lOaL&>i7V$4FP>;S6p{yyr(Qb48%mo-i#`2m-K~SWQ8+2!6l1xi8v8L)G!YTxZL; z=xksaWk_df%lyx(tiwXnI*EgLKAg$Jp1kT@0sCt>|1wH*CYv@PvE?fm89+Ac4RJfA zvUO{Wc0{zB@_0p<=2|uMM>1}YzZx8!pSP3xFJA)^EgLe+BzTxce7(E@_uC-5B3X#; zVGq?+XV!MBnUKzO`q7Du0;aD)$UpCO+l9<6cM#bOk3^F~6t{-gM@B3=MQ!w>B~vV- z@$5mj>I>Z%yVzIThwTiIova93-9`LML3fTwgxV{if~+-9IwA@xj?aDl^b4Jz(A!ma z@-t0~a%mG4xvlStxrBL+i#b-zFz`i5hJ?3Zf2#(IAa58+ApuH*INPgb5COGP-ps+g zW9OyTRjD)PNcQ0t3>X>MIV0ul&a4L%J6anvy{_QS(pV6LOlD5 zX|wHWo2imvRSWlH#DEg=uGwDx`L+?ZoZ!sdHcu21izz+N}U(UP+!N}8%6=xj!ldIFms z2nbO|E5;)4{H_#uAjs4@FI)h ze=V9M_{N@m0enc}+#wnadw6V!!M$!l<@JV^*k87tcG_lfX-diNl7_auC6z-jYTw9`IIuOOuS z$s4AO=d#I{^3<7qhX|Nnu6?!_mi*uSp)iy$@6MUaQ9t0#hqOW+oH&Pd9)4jbB9-T2QaXQ_8!mlrZFcQ$U75)5{#ZG7PVW{FuzKpDJJ zv{w6RI!T6~Bt7Xz#0j5xaOeYpWdbyRHJ?_?=;y!;=DjB@r#EN2`@|fjvkusQz9XU!!=aKb`-RXQqv0K?{y6g9p(1)&Ukd}mdsga^dE;P3ohhwj z&$LjEg)}MY(+%yWgb~sBjVBx3%RQed#^NdML}&2Lf?vax73??Va(1?tRFX5*IzV6E zji%tG@jYVN<^kmf){l&!NoUyH@TT;4+k;M_hH=h`bc!-B@ibaYraZ2ic#B;WR!%>H z<3f=&B`k0g!4Jr7J4IhaEZ@c&)4qCTD7_m@?K%378Z124!}M^(TqOIYKPmx4! zlr&zF|C(1to7=$S7sY*vr?BbTR6I7DP5Bx{^#r`z^Oc#VgbQ7fQ35l8MdK{KCo~kk ze-YFms@vW5NXR48gHEbHUyH@07!6b3ktCt0Po`^%S?}3Pj>F>ZfuRLXDyQGeH$p?L zgd-gaDh)pE$Lr8sp{?v}#PyIQ4#(Q1`KD8Po7hUwDLJR0OXOe^#Sm5!mu;w>EEUjg zT4ydU3@u8fgu+6lYUX?JNu`-sJu;e)n}@CCRa{~Ak4y;*7sGc`B6NU(wKwOOx);r0 z8AE>Q=cX~C)Kx)Ph}sm@D6^|6SdlCj_K_g+ix#%8$MLYu9c&Ztn&tIC6w%o4f(W^j zC_WY?=DS)7RbCW?``-udmcx%~?@@6=dGJjMQD9~wsk{r(z4c%>Pi7s2%{_urPjJUb zDafOV#0$dJW}&S??+EXi0cdx9 zJuzECy8#*<hE|KmB>vE6gllD<-JkSkq%EA~Y5y@!rn71Go{q?gMGDJHdtYpjoV0 zak`crdvSytFmsik*ySvOHa+6uD)=0zhdoF;xi>3W!%p1X7|p?P%7NqHM+k9*5^Kl_ SkDz0gd`DA#eBhSA0002xIy$QW literal 0 HcmV?d00001 diff --git a/src/styles/base.css b/src/styles/base.css index 808048b..176bbf6 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -51,6 +51,19 @@ summary:focus-visible, outline-offset: 3px; } +/* Destination headings take programmatic focus after a keyboard or scripted + jump. A thinner, softer ring still marks the landing point (about 5:1 + against the night background) without shouting like a control's focus. */ +:is(h1, h2)[tabindex]:focus-visible { + outline: 2px solid color-mix(in srgb, var(--focus) 60%, transparent); + outline-offset: 6px; + border-radius: 2px; +} + +@media (forced-colors: active) { + :is(h1, h2)[tabindex]:focus-visible { outline-color: Highlight; } +} + .portfolio-main:focus-visible { /* The localized cue lives outside the reading mask. Keep the main landmark focusable for native skip links without outlining the entire document. */