andre/fitme3070.pt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(site): apply tuned grain from the lab (freq 1.98, 1 octave, overlay on buttons, 155px tile)

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
andreandClaude Sonnet 5.5 committed 2026-10-13 19:01:18 +01:00
1 parent 9e3eee227b
commit a2219ebd63
2 files changed
+10 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

site/assets/css/style.css
+5 -3
View File
@@ -480,11 +480,12 @@ section[id] {
z-index: -1; z-index: -1;
border: var(--ring) solid transparent; border: var(--ring) solid transparent;
background: background:
var(--noise) 0 0 / 140px padding-box, var(--noise) 0 0 / 155px padding-box,
linear-gradient(var(--btn-face), var(--btn-face)) padding-box, linear-gradient(var(--btn-face), var(--btn-face)) padding-box,
conic-gradient(from var(--pc-a), rgba(var(--fitme-accent-rgb), 0) 0deg, rgba(var(--fitme-accent-rgb), 0) 150deg, conic-gradient(from var(--pc-a), rgba(var(--fitme-accent-rgb), 0) 0deg, rgba(var(--fitme-accent-rgb), 0) 150deg,
var(--fitme-accent) 250deg, #f4ff9c 300deg, var(--fitme-accent) 330deg, var(--fitme-accent) 250deg, #f4ff9c 300deg, var(--fitme-accent) 330deg,
rgba(var(--fitme-accent-rgb), 0) 360deg) border-box; rgba(var(--fitme-accent-rgb), 0) 360deg) border-box;
background-blend-mode: overlay, normal, normal;
} }
.site-btn::after, .gym-switch-btn::after { .site-btn::after, .gym-switch-btn::after {
inset: calc(-1 * (var(--ring) + var(--elb)) - 2px); inset: calc(-1 * (var(--ring) + var(--elb)) - 2px);
@@ -4623,12 +4624,13 @@ a:where(:not(.site-btn, .gym-switch-btn, .gal-link, .skip-link, .splide__arrow,
::before carries the same layer). Headings: the #pt-noise SVG filter (defined ::before carries the same layer). Headings: the #pt-noise SVG filter (defined
in site/includes/include.php) multiplies grain into the lettering only. */ in site/includes/include.php) multiplies grain into the lettering only. */
:root { :root {
--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='155' height='155'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.98' numOctaves='1' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.87' intercept='-0.435'/%3E%3CfeFuncG type='linear' slope='1.87' intercept='-0.435'/%3E%3CfeFuncB type='linear' slope='1.87' intercept='-0.435'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.160'/%3E%3C/svg%3E");
} }
.site-btn, .site-btn,
.gym-switch-btn, .gym-switch-btn,
.crossfit-nav-link { .crossfit-nav-link {
background-image: var(--noise) !important; background-image: var(--noise) !important;
background-size: 140px 140px !important; background-size: 155px 155px !important;
background-blend-mode: overlay !important;
} }
h1, h2 { filter: url(#pt-noise); } h1, h2 { filter: url(#pt-noise); }
site/includes/include.php
+5 -5
View File
@@ -91,14 +91,14 @@ $canonical = $GLOBALS['_canonical_override'] ?? match ($page) {
<body> <body>
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false"> <svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
<!-- Grain for the h1/h2 lettering (style.css, "Noise texture"): fractal noise -> grey -> <!-- Grain for the h1/h2 lettering (style.css, "Noise texture"): fractal noise -> grey ->
squeezed to 86-100% brightness, multiplied into the glyphs and clipped to their shape. --> squeezed to 88-100% brightness, multiplied into the glyphs and clipped to their shape. -->
<filter id="pt-noise" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB"> <filter id="pt-noise" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
<feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="2" seed="4" result="n"/> <feTurbulence type="fractalNoise" baseFrequency="1.98" numOctaves="1" seed="7" result="n"/>
<feColorMatrix in="n" type="saturate" values="0" result="g"/> <feColorMatrix in="n" type="saturate" values="0" result="g"/>
<feComponentTransfer in="g" result="grain"> <feComponentTransfer in="g" result="grain">
<feFuncR type="linear" slope=".15" intercept=".86"/> <feFuncR type="linear" slope=".123" intercept=".877"/>
<feFuncG type="linear" slope=".15" intercept=".86"/> <feFuncG type="linear" slope=".123" intercept=".877"/>
<feFuncB type="linear" slope=".15" intercept=".86"/> <feFuncB type="linear" slope=".123" intercept=".877"/>
<feFuncA type="linear" slope="0" intercept="1"/> <feFuncA type="linear" slope="0" intercept="1"/>
</feComponentTransfer> </feComponentTransfer>
<feBlend in="SourceGraphic" in2="grain" mode="multiply" result="mix"/> <feBlend in="SourceGraphic" in2="grain" mode="multiply" result="mix"/>