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;
border: var(--ring) solid transparent;
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,
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,
rgba(var(--fitme-accent-rgb), 0) 360deg) border-box;
background-blend-mode: overlay, normal, normal;
}
.site-btn::after, .gym-switch-btn::after {
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
in site/includes/include.php) multiplies grain into the lettering only. */
: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,
.gym-switch-btn,
.crossfit-nav-link {
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); }
site/includes/include.php
+5 -5
View File
@@ -91,14 +91,14 @@ $canonical = $GLOBALS['_canonical_override'] ?? match ($page) {
<body>
<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 ->
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">
<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"/>
<feComponentTransfer in="g" result="grain">
<feFuncR type="linear" slope=".15" intercept=".86"/>
<feFuncG type="linear" slope=".15" intercept=".86"/>
<feFuncB type="linear" slope=".15" intercept=".86"/>
<feFuncR type="linear" slope=".123" intercept=".877"/>
<feFuncG type="linear" slope=".123" intercept=".877"/>
<feFuncB type="linear" slope=".123" intercept=".877"/>
<feFuncA type="linear" slope="0" intercept="1"/>
</feComponentTransfer>
<feBlend in="SourceGraphic" in2="grain" mode="multiply" result="mix"/>