From 95f521c4a025214be67f81d13dd2a2a1e51b3303 Mon Sep 17 00:00:00 2001 From: Anton Afanasyeu Date: Sat, 30 May 2026 17:04:13 +0200 Subject: [PATCH] snap --- examples/app_hub/assets/fonts/Clockopia.ttf | Bin 0 -> 6880 bytes ...logo-fragment-globe-snapshot-20260530b.svg | 4 + examples/app_hub/hub.css | 177 +++++++++++++++--- examples/app_hub/index.html | 148 +++++++++++---- 4 files changed, 275 insertions(+), 54 deletions(-) create mode 100644 examples/app_hub/assets/fonts/Clockopia.ttf create mode 100644 examples/app_hub/assets/hub-logo-fragment-globe-snapshot-20260530b.svg diff --git a/examples/app_hub/assets/fonts/Clockopia.ttf b/examples/app_hub/assets/fonts/Clockopia.ttf new file mode 100644 index 0000000000000000000000000000000000000000..123ea4ff882db439327e854387ed7fea4e5d9eaf GIT binary patch literal 6880 zcmb_g3v3+Mb-iz9|J)^axgUO3G-o;dh~-yYiWDV&mY=0bQ6GMlU0G6h$z76bi6To< zwrR(0Mi6vZHD3YP0%9LC9*TzQDx~`iDY2Y}Dku<0Q8z_p}C>m+m z^Ja%Mr3wWK`0dWjz4yI$-+kxa`{vCfMnrbpbVU1xhkEktIuDUh3#sSeP)*&!j|S$6 z*jezAv8m_`n-ne)i7Sv<#_pS!T;I(O6Ipqi{~Vv0n40^ktUwtqqkbYfH$z7JDF0{Z zZ=E=?F#g@4izP&vmx)Y|Ova`jXvjG84#w+2|09#}XzV}YO$R_*(Y|340^0|A1NbiR z#gkL>4|G3dYzO~u;CoI?k41^vXQ6Kr{JyE^12fD^KR`X_rIXRA_{eKNnI_7qht0z? z({uAPM`w?~p0m9D%xrw-!~go=I#I?N_`fEO1+LZpfB*CkvzkArJQD;&@5E1?S&82u8EfnwIG{WTMGzv{`_y&ZIMGMKoEASynS-X1!S}qB+BCw_1qw z7QIC)I*Zlpu-zuhuvwg08Gt{-kf9ZwH7mnyw?Sqz+O(p#*{!+GOoV2pDN`%@EN7pU%Wal`fJSV*Fv^ce5bme9H@?At0m&K(OqdVVOQh*f7 z@K`-sG36Av|G<}r49K(PX~mrH%dIZnMr7NTwM{FQg5vzTvb%_~?y}#dm5jo&0^rJ{ zhF{w>-yZ?TR9*+)Lo=Dw*pO&9;%PtiudhQYQSAn|{+somt^ect->$!hFX_8V-topQN!xeFYE7s^bQ`c5n2Xw!P zv>d;!Wgy)$u-TH?rDkfbs+5AVq`cQ9OKa@#KnV2XU2<4bK2z!aDy=J385Az1|wZnm25S`(kXYwEmf7YYRLeZ0ZQ2}&#bcTtxP3^?ZMrv0-0=l zSVb%eMq^6D49 z9r?3QF^?^hs3tL#*gq#;*$q!6lijk^os1--YwM>+WyvllSFP6MOb`fDe@J1FzqaI6 zy1x@v?2$>fTbpe6V4va~xF@6tCEe0w6w}AQP4?~b`W%>m3P?Bl-?^Fq1mFOsJ|Ca> z(prEH(LTO&2QSU1hsHq4mLWI}6xl!XD;Wei>YBsw^WO%c0D3nxmCA~2@2#lAa z%IQ(W)4kjkvR%pi!t0Zh*$%0x1~#It1fzRn2}#kHDhA$bYX?Lj?~=p~PRRTs{rJp_ z0ZJX&Qj-idTu)FAMzsHZlerjCs;X3aD$=eW4k>{ypb>~_VG&%dtwE1y1TIQ&PY#5X z8hJ)>$sOsqfq$PTigV$OCAVaCI9-bSL-G3 z5B*e6;Vy_3PbcE4G?)y<#+AZ|H-=0bmqK2j5(vY=VL22J^FRYa<-f*oD43QabPk95 zhUC71!y$Op7glR{1y`pl3Erkg4tdjR5ORvC#3Y3TuNX!{I|NcU2)Uyfcg0v@!es~G zs+5OnN3#^d{$isw%uvduV7yCf$N5{7f)PtPdp5KgI14?UJzgJ@S}j$T0;(l#V01Te zPe4Gm$z|wTUu`5a--a#Fb}J$d@yMb%Ae;}5#}~{-T%?Z zul&Cpp^xkz2_G>U`6YP@?U$v?{g=h(pUW*Y(0ZY>Cwt_$L?e1s>(<$b2$`qHJ>pZJJQ9kbb5 zbo^}}CtCl4OVf8wr501a;LoqBr1$n;l{V<9`wDg4L6y)e?74#&BK^mAmJ7G;uI}9E z|0TVV-Yed*kI;BW@vTC9dC=DDCqyh4*PGa6ejQs#I7NI39{~q&{R3u(??eM=!}Hj* z2XOt4e>alAzh!h5e1(bFPnHKV^nzg4&4{N(L0nsZ^HqbnN7RY<5UHuF@w1wWqkf0K z#=oQ1>2vrRalIw>-gtFVSh%^Uzw+OECw0Gr#)b7Sbi;_r49cOBfYVG4yF+j|@~nh) z#jQ60%bL12Xgli9Zo+LxtzL3C>^`4*XD+|5Zl|MO_7%C=TIwy<#tyTN)a$8|Gi>n8 znbh~sSlAx1gf*q!z42k{N33OWQ7l|s#G-=lNo;?f!0y%^FjJeJ=`C3Xk!sRI?Wiqr z8RQ~pE|u}9Z}8W-nc}aA$Ooz_z8CrSW6cMb#Or<4<&B5_3^39HaM=rOrPLhoZL^z; z-WRWn0*Q7YBX0Ll5i4?*mgZUWq+FxbKyCguzXQ|RoYv9oCO@Xe>Kb-pM4vjMzs}>f z`{W|G+vUM5-7p9h+!jHZ9v}KfDp0jN{_$^LOO3BwYZ(ysSA8pbbNR6k-WK!b9+?^~ z*%f~6?^B_V+7Gsu?;d#elfV0CZs(&wy8?DrQ(K@2A5Rsf-f8I#>3!+Cq?4ptfxOIH zoVk5_fxZCi1vj)NZRn<@+)xMiscNGSHo9F#gWHwk;S@KqbZ0$x%1-W-P4Y5qWxFrF zaV#gVt?hkzG-T@LxQC|Kh%^Y^$p-(f;)EmGG{Tm2=M= zKC(RZw2CooZ-niIR2|68cfMbEy-+AD^x4S33|Tszr6AX1QK8)mtcog!6yc(J(ZM68 z0gmPHI#ef%3oZSrPf{!Us)EbR+20bW+OfYf$i98BorTzu;gj>J&`SFO_TtjP=HFi) znVJWVkHeNju%(1{2E68+94fLG2}MO^1$G{`+2`+EaF9(m07*keLTWU=bzr-RKc1ON0dZ>L66znTDY!nN^fVR?!D_)mv+m$x4n zI~aKPr>R{4j9DK!fvnN>zpL#n6|)&MIIgADnK&}$SsGI!n_t@=h( zxE8wW=HJw}ZLiPKJ?h;im+ku6{+ia`FOFB2R#svK+gN#Is-b3T5BNNiR7p+tCZVZG zY%TNqZ6q?$oL^g8UfxjbFf^oBA`Vk_QReWbec$5! z&%Jb8#^`?Y^wcua<>tyW=la4(9)5-}2b2$Jv9KeMx6Pm}vBf!7@-R=H%Oz!+B_W;c z8$pl`Ri5V?KHmsTj=JP%+?WLx-Z^%R6|!Tgzf4_1CV{`G>c zk%dw(-7HU?S0jP-2xB%HFx!M3NKFk>-xxgZ_ySz-+@wBk>I&|9 z=ppqkJ{;WD)bY^6Hy=tr`8=P(JpTyu%%d{IQ(l>gtahtlwdR#eZg-wTmPJdBvp^Kp z)i*s)_>C{a$V^NW%L7kHhf7=cd0wgv)1saGs$u6-S65i^i?5DFuxPw}uyr&ldY4n5 zF1H?Jt^F;!#+A#LS8nWGT4EK0Ev*BoYfDSw<&~8y1FeCBi1_pBDdrP6A!-dsIEBJ% zM_=TK6e&f5$7XXFtX5Z^*_?HkOBA!5n})(ltiQM&-LzJFJ@KF~W17kSx*X>5*EKT! zw$i^?R~=1VYTVP(kh&B(b`0;e`^)n3%h+5)TSR?*9k_Wa5fh%g@ygPY?wd=In|peD zg*V2RfF!Kc^#Dm1R*(9?HXC{EUcu|t6=xOK6bo*=>m0ecLZL|%VB^NZ@uhkE<*8zr z1~mOv;8<=1J4cosibVFdv3FM9xOyp->Tdyly6;`!)MMP9*8ML(`^L*Zz_NR7p!K=8 z{-hnd5fnET*Yv3uQ3d!k%@9Eq8ZBUFQm@e>Wz!yw)@^B{$8KZ4CO2%68?i?UX>t>0 ze@UawI6He?qqEiaI0e+<(3B3*JN!ftG{gDqHjNf2lT~Z9NX4vKqjg)_=#hI7O>WpC zH_{5bPm`NyyO6KZX0i(%U5SareB!})Oo~P4qte*)%))G9Vsc)3S*ok8ZIbSuo}M@n zmwHc*Rd?c){`mAvB03nKICUaAt5sD=n-z!RvvY~*lhTgr+D)01n8VrI{A@H9pNh^N zm!`)zbVg6cq^anFG#Zy?;}eOw`S>i%NSu_$;?A(iN5 zTy;2At)(VVccaBLG@L+RiF)ZI`czXV_-Rnb)&2?S8btjBoq{|HZMXKSLeKx*;}Ckx z(i}#fhE|DoKyU3G+DT|Jhk9=BJbFZ7f1IY&agIYajkWD|JEPFZXUbbG;5n*VKdaiv zwau$zr_o5LqmQW)j!K%p7jxmL%t22AGv)YkJLh0!JMO$aAA`?<&u$ve8THPwO}E{P z=M-wYRe22A{(qNjB$ + + + diff --git a/examples/app_hub/hub.css b/examples/app_hub/hub.css index 19cd534..0bac3a3 100644 --- a/examples/app_hub/hub.css +++ b/examples/app_hub/hub.css @@ -1,5 +1,13 @@ /* Project hub — matches crash console tokens (app.css) */ +@font-face { + font-family: "Clockopia"; + src: url("assets/fonts/Clockopia.ttf") format("truetype"); + font-weight: normal; + font-style: normal; + font-display: swap; +} + .hub-page { min-height: 100vh; display: flex; @@ -21,7 +29,7 @@ display: flex; flex-direction: column; align-items: center; - justify-content: center; + justify-content: flex-start; min-height: calc(100vh - 40px); padding: 32px 28px 48px; box-sizing: border-box; @@ -87,6 +95,84 @@ justify-content: center; } +.hub-nav-dock, +#hub-nav-dock { + position: fixed; + z-index: 2; + display: flex !important; + flex-direction: column !important; + flex-wrap: nowrap !important; + justify-content: flex-end; + align-items: stretch; + gap: 5px; + margin: 0; + padding: 0; + box-sizing: border-box; + pointer-events: none; + grid-template-columns: none !important; + grid-auto-flow: row !important; + max-width: none; + width: auto; +} + +/* app.css .cards { display:grid } must not flatten the dock if classes linger */ +#hub-nav-dock.cards, +#hub-nav-dock.hub-cards, +.hub-nav-dock.cards, +.hub-nav-dock.hub-cards { + display: flex !important; + flex-direction: column !important; + grid-template-columns: none !important; +} + +.hub-nav-dock .hub-card, +#hub-nav-dock .hub-card, +#hub-nav-dock > a { + display: flex !important; + flex-direction: row !important; + align-items: center; + gap: 14px; + padding: 14px 16px; + width: 100% !important; + max-width: 100%; + flex: 0 0 auto !important; + margin: 0 !important; + opacity: 0.85; + pointer-events: auto; + color: var(--text); + text-decoration: none; + cursor: pointer; + transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, filter 0.22s ease; +} + +#hub-nav-dock > .hub-card + .hub-card, +.hub-nav-dock > .hub-card + .hub-card { + margin-top: 0 !important; +} + +.hub-nav-dock .hub-card:hover, +.hub-nav-dock .hub-card:focus-visible { + opacity: 1; + color: var(--text); + text-decoration: none; + outline: none; + transform: translateY(-2px); + border-color: rgba(160, 220, 255, 0.95); + box-shadow: + 0 0 18px rgba(120, 200, 255, 0.55), + 0 0 36px rgba(90, 170, 255, 0.35), + 0 10px 28px rgba(0, 0, 0, 0.42); + filter: drop-shadow(0 0 10px rgba(140, 210, 255, 0.45)); +} + +[data-theme="light"] .hub-nav-dock .hub-card:hover, +[data-theme="light"] .hub-nav-dock .hub-card:focus-visible { + box-shadow: + 0 0 16px rgba(70, 130, 210, 0.45), + 0 0 30px rgba(60, 120, 200, 0.28), + 0 10px 24px rgba(26, 35, 50, 0.22); +} + .hub-cards { display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr)); @@ -182,6 +268,26 @@ box-sizing: border-box; } +.nav-icon--builder { + width: 18px; + height: 18px; + border: 2px solid currentColor; + border-radius: 3px; + box-sizing: border-box; + position: relative; +} + +.nav-icon--builder::before { + content: ""; + position: absolute; + left: 3px; + top: 7px; + width: 10px; + height: 2px; + background: currentColor; + box-shadow: 0 -4px 0 currentColor, 0 4px 0 currentColor; +} + .hub-page .bottom-bar { position: relative; z-index: 1; @@ -199,16 +305,17 @@ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.48); border-radius: 18px; overflow: visible; - background: rgba(226, 34, 34, 0.5); + background: rgba(18, 24, 34, 0.88); backdrop-filter: blur(1.5px); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; cursor: move; user-select: none; touch-action: none; - padding: 40px; + padding: 28px 32px; box-sizing: border-box; display: flex; flex-direction: column; + font-family: "Clockopia", "DS-Digital", "Consolas", monospace; } .cw-clock-inner { @@ -251,7 +358,7 @@ align-content: start; row-gap: 0; overflow: hidden; - background: rgba(0, 180, 80, 0.35); + background: transparent; } .cw-row { @@ -284,26 +391,43 @@ } .cw-time-main { - display: grid; - grid-template-columns: auto auto auto auto; - align-items: end; + display: inline-flex; + align-items: baseline; justify-content: center; - column-gap: 6px; + column-gap: 4px; line-height: 1; - font-weight: 700; + font-weight: 400; width: fit-content; max-width: 100%; margin: 0 auto; overflow: hidden; - border: 1px solid rgba(170, 255, 200, 0.95); - border-radius: 8px; - padding: 4px 6px; + border: 0; + border-radius: 0; + padding: 0; + font-family: "Clockopia", "DS-Digital", "Consolas", monospace; + font-variant-numeric: tabular-nums; + color: #d8f6b8; + text-shadow: 0 0 10px rgba(190, 240, 150, 0.42); +} + +#cw-hm-lcd { + font-size: clamp(2.4rem, 4.8vw, 3.6rem); + letter-spacing: 0.04em; +} + +#cw-colon-lcd, +#cw-ss-lcd { + font-size: clamp(1.6rem, 3.2vw, 2.4rem); +} + +#cw-tz-text { + font-size: clamp(0.95rem, 1.6vw, 1.15rem); + margin-left: 10px; + opacity: 0.92; } .ot-lcd-line { - display: inline-flex; - align-items: flex-end; - gap: 2px; + display: inline; } #cw-hm-lcd .ot-glyph { @@ -404,18 +528,20 @@ .cw-line-region { color: #b8c2d4; - font-size: 12px; + font-size: clamp(0.62rem, 1vw, 0.75rem); letter-spacing: 0.16em; - font-weight: 300; + font-weight: 400; text-transform: uppercase; + font-family: "Clockopia", "Consolas", monospace; } .cw-line-date { color: #c5d0e2; - font-size: 24px; + font-size: clamp(0.95rem, 1.6vw, 1.15rem); letter-spacing: 0.12em; font-weight: 400; text-transform: uppercase; + font-family: "Clockopia", "Consolas", monospace; } .cw-separator { @@ -438,7 +564,7 @@ max-width: 100%; border-top: 0; justify-items: center; - background: rgba(40, 110, 255, 0.35); + background: transparent; } .cw-world-cell { @@ -465,6 +591,7 @@ letter-spacing: 0.12em; margin-top: 0; margin-bottom: 8px; + font-family: "Clockopia", "Consolas", monospace; } .cw-dial { @@ -782,13 +909,19 @@ width: min(94vw, 567px); min-width: 0; } - .hub-cards { - grid-template-columns: 1fr; - max-width: 420px; + .hub-nav-dock .hub-card { + padding: 14px 16px; } } @media (prefers-reduced-motion: reduce) { + .hub-nav-dock .hub-card { + transition: border-color 0.15s ease, box-shadow 0.15s ease; + } + .hub-nav-dock .hub-card:hover, + .hub-nav-dock .hub-card:focus-visible { + transform: none; + } .hub-cards .hub-card { transition: border-color 0.15s ease, box-shadow 0.15s ease; } diff --git a/examples/app_hub/index.html b/examples/app_hub/index.html index 305ec26..d0cad9e 100644 --- a/examples/app_hub/index.html +++ b/examples/app_hub/index.html @@ -11,7 +11,7 @@ })(); - + @@ -72,29 +72,72 @@ - +
(c) Anton Afanaasyeu
+