gcch/haiku-atelier-2024
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: gcch:2fbff76c0fc734ffaecc1ac8c947738e0e569f61
Branches Tags
gcch:principale
gcch:wip-effect
gcch:production
gcch:gleam
..
compare: gcch:4d9fe7469082d84651fae8adeaec3da8681be90b
Branches Tags
gcch:wip-effect
gcch:production
gcch:principale
gcch:gleam

2 commits
2fbff76c0f ... 4d9fe74690

Author SHA1 Message Date
gcch
4d9fe74690 2026-04-23 2026-04-23 15:32:38 +02:00
gcch
23a2f6feff 2026-04-22 2026-04-22 18:04:12 +02:00
60 changed files with 1130 additions and 18337 deletions
Download patch file Download diff file Expand all files Collapse all files

56
bun.lock
View file

@ -8,7 +8,7 @@
"@mobily/ts-belt": "v4.0.0-rc.5",
"@sentry/browser": "^10.50.0",
"a11y-dialog": "^8.1.5",
"effect": "^4.0.0-beta.57",
"effect": "^4.0.0-beta.56",
"lit-html": "^3.3.2",
"purify-ts": "2.1.2",
"ts-pattern": "^5.9.0",
@ -37,7 +37,7 @@
"fdir": "^6.5.0",
"globals": "^17.5.0",
"jiti": "^2.6.1",
"knip": "^6.6.2",
"knip": "^6.6.1",
"lightningcss": "^1.32.0",
"lightningcss-cli": "^1.32.0",
"oxlint": "^1.61.0",
@ -365,47 +365,47 @@
"@nodelib/fs.walk": ["@nodelib/fs.walk@1.2.8", "", { "dependencies": { "@nodelib/fs.scandir": "2.1.5", "fastq": "^1.6.0" } }, "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg=="],
"@oxc-parser/binding-android-arm-eabi": ["@oxc-parser/binding-android-arm-eabi@0.127.0", "", { "os": "android", "cpu": "arm" }, "sha512-0LC7ye4hvqbIKxAzThzvswgHLFu2AURKzYLeSVvLdu2TBOYWQDmHnTqPLeA597BcUCxiLqLsS4CJ5uoI5WYWCQ=="],
"@oxc-parser/binding-android-arm-eabi": ["@oxc-parser/binding-android-arm-eabi@0.126.0", "", { "os": "android", "cpu": "arm" }, "sha512-svyoHt25J4741QJ5aa4R+h0iiBeSRt63Lr3aAZcxy2c/NeSE1IfDeMnSij6rIg7EjxkdlXzz613wUjeCeilBNA=="],
"@oxc-parser/binding-android-arm64": ["@oxc-parser/binding-android-arm64@0.127.0", "", { "os": "android", "cpu": "arm64" }, "sha512-b5jtVTH6AU5CJXHNdj7Jj9IEiR9yVjjnwHzPJhGyHGPdcsZSzBCkS9GBbV33niRMvKthDwQRFRJfI4a+k4PvYg=="],
"@oxc-parser/binding-android-arm64": ["@oxc-parser/binding-android-arm64@0.126.0", "", { "os": "android", "cpu": "arm64" }, "sha512-hPEBRKgplp1mG9GkINFsr4JVMDNrGJLOqfDaadTWpAoTnzYR5Rmv8RMvB3hJZpiNvbk1aacopdHUP1pggMQ/cw=="],
"@oxc-parser/binding-darwin-arm64": ["@oxc-parser/binding-darwin-arm64@0.127.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-obCE8B7ISKkJidjlhv9xRGJPOSDG2Yu6PRga9Ruaz35uintHxbp1Ki/Yc71wx4rj3Edrm0a1kzG1TAwit0wFpg=="],
"@oxc-parser/binding-darwin-arm64": ["@oxc-parser/binding-darwin-arm64@0.126.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ccRpu9sdYmznePJQG5halhs0FW5tw5a8zRSoZXOzM1OjoeZ4jiRRruFiPclsD59edoVAK1l83dvfjWz1nQi6lg=="],
"@oxc-parser/binding-darwin-x64": ["@oxc-parser/binding-darwin-x64@0.127.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-JL6Xb5IwPQT8rUzlpsX7E+AgfcdNklXNPFp8pjCQQ5MQOQo5rtEB2ui+3Hgg9Sn7Y9Egj6YOLLiHhLpdAe12Aw=="],
"@oxc-parser/binding-darwin-x64": ["@oxc-parser/binding-darwin-x64@0.126.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-CHB4zVjNSKqx8Fw9pHowzQQnjjuq04i4Ng0Avj+DixlwhwAoMYqlFbocYIlbg+q3zOLGlm7vEHm83jqEMitnyg=="],
"@oxc-parser/binding-freebsd-x64": ["@oxc-parser/binding-freebsd-x64@0.127.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-SDQ/3MQFw58fqQz3Z1PhSKFF3JoCF4gmlNjziDm8X02tTahCw0qJbd7FGPDKw1i4VTBZene9JPyC3mHtSvi+wA=="],
"@oxc-parser/binding-freebsd-x64": ["@oxc-parser/binding-freebsd-x64@0.126.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-RQ3nEJdcDKBfBjmLJ3Vl1d0KQERPV1P8eUrnBm7+VTYyoaJSPLVFuPg1mlD1hk3n0/879VLFMfusFkBal4ssWQ=="],
"@oxc-parser/binding-linux-arm-gnueabihf": ["@oxc-parser/binding-linux-arm-gnueabihf@0.127.0", "", { "os": "linux", "cpu": "arm" }, "sha512-Av+D1MIqzV0YMGPT9we2SIZaMKD7Cxs4CvXSx/yxaWHewZjYEjScpOf5igc8IILASViw4WTnjlwUdI1KzVtDHQ=="],
"@oxc-parser/binding-linux-arm-gnueabihf": ["@oxc-parser/binding-linux-arm-gnueabihf@0.126.0", "", { "os": "linux", "cpu": "arm" }, "sha512-onipc2wCDA7Bauzb4KK1mab0GsEDf4ujiIfWECdnmY/2LlzAoX3xdQRLAUyEDB1kn3yilHBrkmXDdHluyHXxiw=="],
"@oxc-parser/binding-linux-arm-musleabihf": ["@oxc-parser/binding-linux-arm-musleabihf@0.127.0", "", { "os": "linux", "cpu": "arm" }, "sha512-Cs2fdJ8cPpFdeebj6p4dag8A4+56hPvZ0AhQQzlaLswGz1tz7bXt1nETLeorrM9+AMcWFFkqxcXwDGfTVidY8g=="],
"@oxc-parser/binding-linux-arm-musleabihf": ["@oxc-parser/binding-linux-arm-musleabihf@0.126.0", "", { "os": "linux", "cpu": "arm" }, "sha512-5BuJJPohrV5NJ8lmcYOMbfRCUGoYH5J9HZHeuqOLwkHXWAuPMN3X1h8bC/2mWjmosdbfTtmyIdX3spS/TkqKNg=="],
"@oxc-parser/binding-linux-arm64-gnu": ["@oxc-parser/binding-linux-arm64-gnu@0.127.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-qdOfTcT6SY8gsJrrV92uyEUyjqMGPpIB5JZUG6QN5dukYd+7/j0kX6MwK1DgQj39jtUYixxPiaRUiEN1+0CXgQ=="],
"@oxc-parser/binding-linux-arm64-gnu": ["@oxc-parser/binding-linux-arm64-gnu@0.126.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-r2KApRgm2pOJaduRm6GOT8x0whcr67AyejNkSdzPt34GJ+Y3axcXN2mwlTs+8lfO/SSmpO5ZJGYiHYnxEE0jkw=="],
"@oxc-parser/binding-linux-arm64-musl": ["@oxc-parser/binding-linux-arm64-musl@0.127.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-EoTCZneNFU/P2qrpEM+RHmQwt+CvDkyGESG6qhr7KaegXLZwePfbrkCDfAk8/rhxbDUVGsZILX+2tqPzFtoFWA=="],
"@oxc-parser/binding-linux-arm64-musl": ["@oxc-parser/binding-linux-arm64-musl@0.126.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-FQ+MMh7MT0Dr/u8+RWmWKlfoeWPQyHDbhhxJShJlYtROXXPHsRs9EvmQOZZ3sx4Nn7JU8NX+oyw2YzQ7anBJcA=="],
"@oxc-parser/binding-linux-ppc64-gnu": ["@oxc-parser/binding-linux-ppc64-gnu@0.127.0", "", { "os": "linux", "cpu": "ppc64" }, "sha512-zALjmZYgxFLHjXeudcDF0xFGNydTAtkAeXAr2EuC17ywCyFxcmQra4w0BMde0Yi/re4Bi4iwEoEXtYN7l6eBLQ=="],
"@oxc-parser/binding-linux-ppc64-gnu": ["@oxc-parser/binding-linux-ppc64-gnu@0.126.0", "", { "os": "linux", "cpu": "ppc64" }, "sha512-Wv/T8C98hRQhGTlx2XFyLn5raRMp9U1lOQD+YnXNgAr7wHbJJpZ8mDBU7Rw+M3WytGcGTFcr6kqgfyQeHVtLbQ=="],
"@oxc-parser/binding-linux-riscv64-gnu": ["@oxc-parser/binding-linux-riscv64-gnu@0.127.0", "", { "os": "linux", "cpu": "none" }, "sha512-fPP8M6zQLS7Jz7o9d5ArUSuAuSK3e+WCYVrCpdzeCOejidtZExJ9tjhDrAd3HEPqARBCPmdpqxESPFqy44vkBQ=="],
"@oxc-parser/binding-linux-riscv64-gnu": ["@oxc-parser/binding-linux-riscv64-gnu@0.126.0", "", { "os": "linux", "cpu": "none" }, "sha512-DHx1rT1zauW0ZbLHOiQh5AC9Xs3UkWx2XmfZHs+7nnWYr3sagrufoUQC+/XPwwjMIlCFXiFGM0sFh3TyOCZwqA=="],
"@oxc-parser/binding-linux-riscv64-musl": ["@oxc-parser/binding-linux-riscv64-musl@0.127.0", "", { "os": "linux", "cpu": "none" }, "sha512-7IcC4Ao02oGpfnjt+X/oF4U2mllo2qoSkw5xxiXNKL9MCTsTiAC6616beOuehdxGcnz1bRoPC1RQ2f1GQDdN+g=="],
"@oxc-parser/binding-linux-riscv64-musl": ["@oxc-parser/binding-linux-riscv64-musl@0.126.0", "", { "os": "linux", "cpu": "none" }, "sha512-umDc2mTShH0U2zcEYf8mIJ163seLJNn54ZUZYeI5jD4qlg9izPwoLrC2aNPKlMJTu6u/ysmQWiEvIiaAG+INkw=="],
"@oxc-parser/binding-linux-s390x-gnu": ["@oxc-parser/binding-linux-s390x-gnu@0.127.0", "", { "os": "linux", "cpu": "s390x" }, "sha512-pbXIhiNFHoqWeqDNLiJ9JkpHz1IM9k4DXa66x+1GTWMG7iLxtkXgE53iiuKSXwmk3zIYmaPVfBvgcAhS583K4Q=="],
"@oxc-parser/binding-linux-s390x-gnu": ["@oxc-parser/binding-linux-s390x-gnu@0.126.0", "", { "os": "linux", "cpu": "s390x" }, "sha512-PXXeWayclRtO1pxQEeCpiqIglQdhK2mAI2VX5xnsWdImzSB5GpoQ8TNw7vTCKk2k+GZuxl+q1knncidjCyUP9w=="],
"@oxc-parser/binding-linux-x64-gnu": ["@oxc-parser/binding-linux-x64-gnu@0.127.0", "", { "os": "linux", "cpu": "x64" }, "sha512-MYCguB9RvBvlSd6gbuNI7QwiLoCCAlGnlRJFPrzLI6U1/9wkC/WK6LtBAUln55H1Ctqw45PWmqrobKoMhsYQzQ=="],
"@oxc-parser/binding-linux-x64-gnu": ["@oxc-parser/binding-linux-x64-gnu@0.126.0", "", { "os": "linux", "cpu": "x64" }, "sha512-wzocjxm34TbB3bFlqG65JiLtvf6ZDg2ZxRkLLbgXwDQUNU+0MPjQN8zy/0jBKNA5fnPLk3XeVdZ7Uin+7+CVkg=="],
"@oxc-parser/binding-linux-x64-musl": ["@oxc-parser/binding-linux-x64-musl@0.127.0", "", { "os": "linux", "cpu": "x64" }, "sha512-5eY0B/bxf1xIUxb4NOTvOI3KWtBQfPWYyKAzgcrCt0mDibSZygVpO1Pz8bkeiSZ5Jj9+M09dkggG3H8I5d0Uyg=="],
"@oxc-parser/binding-linux-x64-musl": ["@oxc-parser/binding-linux-x64-musl@0.126.0", "", { "os": "linux", "cpu": "x64" }, "sha512-e83uftP60jmkPs2+CW6T6A1GYzN2H6IumDAiTntv9WyHR73PI3ImHNBkYqnA3ukeKI3xjcCbhSh9QeJWmufxGQ=="],
"@oxc-parser/binding-openharmony-arm64": ["@oxc-parser/binding-openharmony-arm64@0.127.0", "", { "os": "none", "cpu": "arm64" }, "sha512-Gld0ajrFTUXNtdw20fVBuTQx66FA75nIVg+//pPfR3sXkuABB4mTBhl3r9JNzrJpgW//qiwxf0nWXUWGJSL3UQ=="],
"@oxc-parser/binding-openharmony-arm64": ["@oxc-parser/binding-openharmony-arm64@0.126.0", "", { "os": "none", "cpu": "arm64" }, "sha512-4WiOILHnPrTDY2/L4mE6PZCYwLN1d3ghma6BuTJ452CCgzRMt3uFplCtR+o3r9zdUWJYb370UizpI9CUcWXr1A=="],
"@oxc-parser/binding-wasm32-wasi": ["@oxc-parser/binding-wasm32-wasi@0.127.0", "", { "dependencies": { "@emnapi/core": "1.9.2", "@emnapi/runtime": "1.9.2", "@napi-rs/wasm-runtime": "^1.1.4" }, "cpu": "none" }, "sha512-T6KVD7rhLzFlwGRXMnxUFfkCZD8FHnb968wVXW1mXzgRFc5RNXOBY2mPPDZ77x5Ln76ltLMgtPg0cOkU1NSrEQ=="],
"@oxc-parser/binding-wasm32-wasi": ["@oxc-parser/binding-wasm32-wasi@0.126.0", "", { "dependencies": { "@emnapi/core": "1.9.2", "@emnapi/runtime": "1.9.2", "@napi-rs/wasm-runtime": "^1.1.4" }, "cpu": "none" }, "sha512-Y17hhnrQTrxgAxAyAq401vnN9URsAL4s5AjqpG1NDsXSlhe1yBNnns+rC2P6xcMoitgX5nKH2ryYt9oiFRlzLw=="],
"@oxc-parser/binding-win32-arm64-msvc": ["@oxc-parser/binding-win32-arm64-msvc@0.127.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-Ujvw4X+LD1CCGULcsQcvb4YNVoBGqt+JHgNNzGGaCImELiZLk477ifUH53gIbE7EKd933NdTi25JWEr9K2HwXw=="],
"@oxc-parser/binding-win32-arm64-msvc": ["@oxc-parser/binding-win32-arm64-msvc@0.126.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-Znug1u1iRvT4VC3jANz6nhGBHsFwEFMxuimYpJFwMtsB6H5FcEoZRMmH26tHkSTD03JvDmG+gB65W3ajLjPcSw=="],
"@oxc-parser/binding-win32-ia32-msvc": ["@oxc-parser/binding-win32-ia32-msvc@0.127.0", "", { "os": "win32", "cpu": "ia32" }, "sha512-0cwxKO7KHQQQfo4Uf4B2SQrhgm+cJaP9OvFFhx52Tkg4bezsacu83GB2/In5bC415Ueeym+kXdnge/57rbSfTw=="],
"@oxc-parser/binding-win32-ia32-msvc": ["@oxc-parser/binding-win32-ia32-msvc@0.126.0", "", { "os": "win32", "cpu": "ia32" }, "sha512-qrw7mx5hFFTxVSXToOA40hpnjgNB/DJprZchtB4rDKNLKqkD3F26HbzaQeH1nxAKej0efSZfJd5Sw3qdtOLGhw=="],
"@oxc-parser/binding-win32-x64-msvc": ["@oxc-parser/binding-win32-x64-msvc@0.127.0", "", { "os": "win32", "cpu": "x64" }, "sha512-rOrnSQSCbhI2kowr9XxE7m9a8oQXnBHjnS6j95LxxAnEZ0+Fz20WlRXG4ondQb+ejjt2KOsa65sE6++L6kUd+w=="],
"@oxc-parser/binding-win32-x64-msvc": ["@oxc-parser/binding-win32-x64-msvc@0.126.0", "", { "os": "win32", "cpu": "x64" }, "sha512-ibB1s+mPUFXvS7MFJO2jpw/aCNs/P6ifnWlRyTYB+WYBpniOiCcHQQskZneJtwcjQMDRol3RGG3ihoYnzXSY4w=="],
"@oxc-project/types": ["@oxc-project/types@0.127.0", "", {}, "sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ=="],
"@oxc-project/types": ["@oxc-project/types@0.126.0", "", {}, "sha512-oGfVtjAgwQVVpfBrbtk4e1XDyWHRFta6BS3GWVzrF8xYBT2VGQAk39yJS/wFSMrZqoiCU4oghT3Ch0HaHGIHcQ=="],
"@oxc-resolver/binding-android-arm-eabi": ["@oxc-resolver/binding-android-arm-eabi@11.19.1", "", { "os": "android", "cpu": "arm" }, "sha512-aUs47y+xyXHUKlbhqHUjBABjvycq6YSD7bpxSW7vplUmdzAlJ93yXY6ZR0c1o1x5A/QKbENCvs3+NlY8IpIVzg=="],
@ -831,7 +831,7 @@
"dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
"effect": ["effect@4.0.0-beta.57", "", { "dependencies": { "@standard-schema/spec": "^1.1.0", "fast-check": "^4.6.0", "find-my-way-ts": "^0.1.6", "ini": "^6.0.0", "kubernetes-types": "^1.30.0", "msgpackr": "^1.11.9", "multipasta": "^0.2.7", "toml": "^4.1.1", "uuid": "^13.0.0", "yaml": "^2.8.3" } }, "sha512-rg32VgXnLKaPRs9tbRDaZ5jxmzNY7ojXt85gSHGUTwdlbWH5Ik+OCUY2q14TXliygPGoHwCAvNWS4bQJOqf00g=="],
"effect": ["effect@4.0.0-beta.56", "", { "dependencies": { "@standard-schema/spec": "^1.1.0", "fast-check": "^4.6.0", "find-my-way-ts": "^0.1.6", "ini": "^6.0.0", "kubernetes-types": "^1.30.0", "msgpackr": "^1.11.9", "multipasta": "^0.2.7", "toml": "^4.1.1", "uuid": "^13.0.0", "yaml": "^2.8.3" } }, "sha512-VToZmpoEkH4hHFHeHDMPRwsPQY7BOCEY7uy8yI1LaFEtjZ5w3T3S4yDbKFA7L63OhPo+kZdSvL3tBLOLLcmrQA=="],
"electron-to-chromium": ["electron-to-chromium@1.5.343", "", {}, "sha512-YHnQ3MXI08icvL9ZKnEBy05F2EQ8ob01UaMOuMbM8l+4UcAq6MPPbBTJBbsBUg3H8JeZNt+O4fjsoWth3p6IFg=="],
@ -1111,7 +1111,7 @@
"kind-of": ["kind-of@6.0.3", "", {}, "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="],
"knip": ["knip@6.6.2", "", { "dependencies": { "fdir": "^6.5.0", "formatly": "^0.3.0", "get-tsconfig": "4.14.0", "jiti": "^2.6.0", "minimist": "^1.2.8", "oxc-parser": "^0.127.0", "oxc-resolver": "^11.19.1", "picomatch": "^4.0.4", "smol-toml": "^1.6.1", "strip-json-comments": "5.0.3", "tinyglobby": "^0.2.16", "unbash": "^3.0.0", "yaml": "^2.8.2", "zod": "^4.1.11" }, "bin": { "knip": "bin/knip.js", "knip-bun": "bin/knip-bun.js" } }, "sha512-ma2p+SvgIs1GZZLUV9QJrLkb9gGNBQHk7fcrtt3aVhiW2XEXH/yfMOU88F7ZdriYuBYkB53djPNYMWb2pKVl/g=="],
"knip": ["knip@6.6.1", "", { "dependencies": { "fdir": "^6.5.0", "formatly": "^0.3.0", "get-tsconfig": "4.14.0", "jiti": "^2.6.0", "minimist": "^1.2.8", "oxc-parser": "^0.126.0", "oxc-resolver": "^11.19.1", "picomatch": "^4.0.4", "smol-toml": "^1.6.1", "strip-json-comments": "5.0.3", "tinyglobby": "^0.2.16", "unbash": "^2.2.0", "yaml": "^2.8.2", "zod": "^4.1.11" }, "bin": { "knip": "bin/knip.js", "knip-bun": "bin/knip-bun.js" } }, "sha512-SOmqh25vuAfdynGoDr/kMCxIuD5+PkMIfMSGQeMqfrxwuPTANvJKcVttLgGZjjkATALqukSe/hhDVqcwNkf92g=="],
"known-css-properties": ["known-css-properties@0.37.0", "", {}, "sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ=="],
@ -1287,7 +1287,7 @@
"own-keys": ["own-keys@1.0.1", "", { "dependencies": { "get-intrinsic": "^1.2.6", "object-keys": "^1.1.1", "safe-push-apply": "^1.0.0" } }, "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg=="],
"oxc-parser": ["oxc-parser@0.127.0", "", { "dependencies": { "@oxc-project/types": "^0.127.0" }, "optionalDependencies": { "@oxc-parser/binding-android-arm-eabi": "0.127.0", "@oxc-parser/binding-android-arm64": "0.127.0", "@oxc-parser/binding-darwin-arm64": "0.127.0", "@oxc-parser/binding-darwin-x64": "0.127.0", "@oxc-parser/binding-freebsd-x64": "0.127.0", "@oxc-parser/binding-linux-arm-gnueabihf": "0.127.0", "@oxc-parser/binding-linux-arm-musleabihf": "0.127.0", "@oxc-parser/binding-linux-arm64-gnu": "0.127.0", "@oxc-parser/binding-linux-arm64-musl": "0.127.0", "@oxc-parser/binding-linux-ppc64-gnu": "0.127.0", "@oxc-parser/binding-linux-riscv64-gnu": "0.127.0", "@oxc-parser/binding-linux-riscv64-musl": "0.127.0", "@oxc-parser/binding-linux-s390x-gnu": "0.127.0", "@oxc-parser/binding-linux-x64-gnu": "0.127.0", "@oxc-parser/binding-linux-x64-musl": "0.127.0", "@oxc-parser/binding-openharmony-arm64": "0.127.0", "@oxc-parser/binding-wasm32-wasi": "0.127.0", "@oxc-parser/binding-win32-arm64-msvc": "0.127.0", "@oxc-parser/binding-win32-ia32-msvc": "0.127.0", "@oxc-parser/binding-win32-x64-msvc": "0.127.0" } }, "sha512-bkgD4qHlN7WxLdX8bLXdaU54TtQtAIg/ZBAfm0aje/mo3MRDo3P0hZSgr4U7O3xfX+fQmR5AP04JS/TGcZLcFA=="],
"oxc-parser": ["oxc-parser@0.126.0", "", { "dependencies": { "@oxc-project/types": "^0.126.0" }, "optionalDependencies": { "@oxc-parser/binding-android-arm-eabi": "0.126.0", "@oxc-parser/binding-android-arm64": "0.126.0", "@oxc-parser/binding-darwin-arm64": "0.126.0", "@oxc-parser/binding-darwin-x64": "0.126.0", "@oxc-parser/binding-freebsd-x64": "0.126.0", "@oxc-parser/binding-linux-arm-gnueabihf": "0.126.0", "@oxc-parser/binding-linux-arm-musleabihf": "0.126.0", "@oxc-parser/binding-linux-arm64-gnu": "0.126.0", "@oxc-parser/binding-linux-arm64-musl": "0.126.0", "@oxc-parser/binding-linux-ppc64-gnu": "0.126.0", "@oxc-parser/binding-linux-riscv64-gnu": "0.126.0", "@oxc-parser/binding-linux-riscv64-musl": "0.126.0", "@oxc-parser/binding-linux-s390x-gnu": "0.126.0", "@oxc-parser/binding-linux-x64-gnu": "0.126.0", "@oxc-parser/binding-linux-x64-musl": "0.126.0", "@oxc-parser/binding-openharmony-arm64": "0.126.0", "@oxc-parser/binding-wasm32-wasi": "0.126.0", "@oxc-parser/binding-win32-arm64-msvc": "0.126.0", "@oxc-parser/binding-win32-ia32-msvc": "0.126.0", "@oxc-parser/binding-win32-x64-msvc": "0.126.0" } }, "sha512-FktCvLby/mOHyuijZt22+nOt10dS24gGUZE3XwIbUg7Kf4+rer3/5T7RgwzazlNuVsCjPloZ3p8E+4ONT3A8Kw=="],
"oxc-resolver": ["oxc-resolver@11.19.1", "", { "optionalDependencies": { "@oxc-resolver/binding-android-arm-eabi": "11.19.1", "@oxc-resolver/binding-android-arm64": "11.19.1", "@oxc-resolver/binding-darwin-arm64": "11.19.1", "@oxc-resolver/binding-darwin-x64": "11.19.1", "@oxc-resolver/binding-freebsd-x64": "11.19.1", "@oxc-resolver/binding-linux-arm-gnueabihf": "11.19.1", "@oxc-resolver/binding-linux-arm-musleabihf": "11.19.1", "@oxc-resolver/binding-linux-arm64-gnu": "11.19.1", "@oxc-resolver/binding-linux-arm64-musl": "11.19.1", "@oxc-resolver/binding-linux-ppc64-gnu": "11.19.1", "@oxc-resolver/binding-linux-riscv64-gnu": "11.19.1", "@oxc-resolver/binding-linux-riscv64-musl": "11.19.1", "@oxc-resolver/binding-linux-s390x-gnu": "11.19.1", "@oxc-resolver/binding-linux-x64-gnu": "11.19.1", "@oxc-resolver/binding-linux-x64-musl": "11.19.1", "@oxc-resolver/binding-openharmony-arm64": "11.19.1", "@oxc-resolver/binding-wasm32-wasi": "11.19.1", "@oxc-resolver/binding-win32-arm64-msvc": "11.19.1", "@oxc-resolver/binding-win32-ia32-msvc": "11.19.1", "@oxc-resolver/binding-win32-x64-msvc": "11.19.1" } }, "sha512-qE/CIg/spwrTBFt5aKmwe3ifeDdLfA2NESN30E42X/lII5ClF8V7Wt6WIJhcGZjp0/Q+nQ+9vgxGk//xZNX2hg=="],
@ -1593,7 +1593,7 @@
"typescript-eslint": ["typescript-eslint@8.59.0", "", { "dependencies": { "@typescript-eslint/eslint-plugin": "8.59.0", "@typescript-eslint/parser": "8.59.0", "@typescript-eslint/typescript-estree": "8.59.0", "@typescript-eslint/utils": "8.59.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-BU3ONW9X+v90EcCH9ZS6LMackcVtxRLlI3XrYyqZIwVSHIk7Qf7bFw1z0M9Q0IUxhTMZCf8piY9hTYaNEIASrw=="],
"unbash": ["unbash@3.0.0", "", {}, "sha512-FeFPZ/WFT0mbRCuydiZzpPFlrYN8ZUpphQKoq4EeElVIYjYyGzPMxQR/simUwCOJIyVhpFk4RbtyO7RuMpMnHA=="],
"unbash": ["unbash@2.2.0", "", {}, "sha512-X2wH19RAPZE3+ldGicOkoj/SIA83OIxcJ6Cuaw23hf8Xc6fQpvZXY0SftE2JgS0QhYLUG4uwodSI3R53keyh7w=="],
"unbox-primitive": ["unbox-primitive@1.1.0", "", { "dependencies": { "call-bound": "^1.0.3", "has-bigints": "^1.0.2", "has-symbols": "^1.1.0", "which-boxed-primitive": "^1.1.1" } }, "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw=="],
@ -1713,6 +1713,8 @@
"qified/hookified": ["hookified@2.1.1", "", {}, "sha512-AHb76R16GB5EsPBE2J7Ko5kiEyXwviB9P5SMrAKcuAu4vJPZttViAbj9+tZeaQE5zjDme+1vcHP78Yj/WoAveA=="],
"rolldown/@oxc-project/types": ["@oxc-project/types@0.127.0", "", {}, "sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ=="],
"stylelint/file-entry-cache": ["file-entry-cache@11.1.2", "", { "dependencies": { "flat-cache": "^6.1.20" } }, "sha512-N2WFfK12gmrK1c1GXOqiAJ1tc5YE+R53zvQ+t5P8S5XhnmKYVB5eZEiLNZKDSmoG8wqqbF9EXYBBW/nef19log=="],
"stylelint/ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],

12
composer.lock generated
View file

@ -5215,12 +5215,12 @@
"source": {
"type": "git",
"url": "https://github.com/Roave/SecurityAdvisories.git",
"reference": "3901f65a6ee5585978c60ee579f23c7f848ec6a2"
"reference": "9a1d6c95c513ebdc27e74ab3cd0fed99b7035c2e"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/Roave/SecurityAdvisories/zipball/3901f65a6ee5585978c60ee579f23c7f848ec6a2",
"reference": "3901f65a6ee5585978c60ee579f23c7f848ec6a2",
"url": "https://api.github.com/repos/Roave/SecurityAdvisories/zipball/9a1d6c95c513ebdc27e74ab3cd0fed99b7035c2e",
"reference": "9a1d6c95c513ebdc27e74ab3cd0fed99b7035c2e",
"shasum": ""
},
"conflict": {
@ -5339,7 +5339,7 @@
"ckeditor/ckeditor": "<4.25",
"clickstorm/cs-seo": ">=6,<6.8|>=7,<7.5|>=8,<8.4|>=9,<9.3",
"co-stack/fal_sftp": "<0.2.6",
"cockpit-hq/cockpit": "<2.14",
"cockpit-hq/cockpit": "<2.13.5",
"code16/sharp": "<9.20",
"codeception/codeception": "<3.1.3|>=4,<4.1.22",
"codeigniter/framework": "<3.1.10",
@ -5539,7 +5539,7 @@
"geshi/geshi": "<=1.0.9.1",
"getformwork/formwork": "<=2.3.3",
"getgrav/grav": "<1.11.0.0-beta1",
"getkirby/cms": "<5.4",
"getkirby/cms": "<=5.2.1",
"getkirby/kirby": "<3.9.8.3-dev|>=3.10,<3.10.1.2-dev|>=4,<4.7.1",
"getkirby/panel": "<2.5.14",
"getkirby/starterkit": "<=3.7.0.2",
@ -6263,7 +6263,7 @@
"type": "tidelift"
}
],
"time": "2026-04-23T22:17:39+00:00"
"time": "2026-04-22T21:20:32+00:00"
},
{
"name": "sebastian/diff",

17697
db/haiku_atelier-2026-04-24-4cb9b24.sql
View file

File diff suppressed because one or more lines are too long

4
package.json
View file

@ -15,7 +15,7 @@
"@mobily/ts-belt": "v4.0.0-rc.5",
"@sentry/browser": "^10.50.0",
"a11y-dialog": "^8.1.5",
"effect": "^4.0.0-beta.57",
"effect": "^4.0.0-beta.56",
"lit-html": "^3.3.2",
"purify-ts": "2.1.2",
"ts-pattern": "^5.9.0",
@ -44,7 +44,7 @@
"fdir": "^6.5.0",
"globals": "^17.5.0",
"jiti": "^2.6.1",
"knip": "^6.6.2",
"knip": "^6.6.1",
"lightningcss": "^1.32.0",
"lightningcss-cli": "^1.32.0",
"oxlint": "^1.61.0",

25
web/app/themes/haiku-atelier-2024/assets/css/main.css
View file

@ -253,7 +253,7 @@ em {
}
code {
font-family: monospace;
font-family: "monospace";
font-size: 0.9rem;
}
@ -345,12 +345,13 @@ button.bouton-retour-haut[data-actif] {
}
dialog {
z-index: 999;
flex-flow: column nowrap;
place-self: center center;
padding: var(--espace-l);
opacity: 0;
background: white;
z-index: 999;
justify-self: center;
align-self: center;
padding: var(--espace-l);
flex-flow: column nowrap;
opacity: 0;
transition: display 0.3s, opacity 0.3s, overlay 0.3s;
transition-behavior: allow-discrete;
}
@ -373,8 +374,8 @@ dialog p {
max-inline-size: 50ch;
}
dialog button {
align-self: end;
inline-size: fit-content;
align-self: end;
padding: var(--espace-s);
}
@ -636,15 +637,6 @@ ul.avec-puce-cercle a {
) url("/app/themes/haiku-atelier-2024/assets/img/icons/dot.svg"); /* 2 */
}
video {
display: block;
inline-size: 100%;
min-inline-size: 100%;
block-size: 100%;
min-block-size: inherit;
object-fit: cover;
}
/* * Styles pour un bandeau défilant. */
.bandeau {
overflow: hidden;
@ -1595,6 +1587,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
padding: var(--espace-s) var(--espace-m);
border-top: 1px solid var(--couleur-noir);
font-size: 0.8rem;
background: var(--couleur-jaune);
}
#pied-de-page .zone-menu-navigation-secondaire {
justify-self: start;

2
web/app/themes/haiku-atelier-2024/assets/css/main.css.map
View file

File diff suppressed because one or more lines are too long

2
web/app/themes/haiku-atelier-2024/assets/css/main.min.css vendored
View file

File diff suppressed because one or more lines are too long

226
web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.css
View file

@ -1,120 +1,158 @@
@charset "UTF-8";
#page-a-propos {
--hauteur-conteneur: var(--contenu-page-hauteur-minimale-sans-categories);
--images-longueur-maximale: 1300px;
--page-marges-bloc-debut: var(--en-tete-hauteur);
--conteneur-marges-internes-ligne: var(--espace-xl);
overflow: hidden;
--images-marges-ligne: var(--espace-xl) * 2;
display: flex;
flex-flow: column nowrap;
min-block-size: var(--hauteur-conteneur);
max-block-size: var(--hauteur-conteneur);
margin-top: var(--page-marges-bloc-debut);
}
#page-a-propos .storytelling {
overflow-y: scroll;
overscroll-behavior: none;
min-block-size: inherit;
max-block-size: inherit;
padding: var(--espace-xl) 0;
color: var(--couleur-gris-fonce);
}
#page-a-propos .storytelling__conteneur {
overscroll-behavior: inherit;
display: flex;
flex-flow: column nowrap;
place-items: center;
min-block-size: calc(var(--hauteur-conteneur) * 13);
padding: 0 var(--conteneur-marges-internes-ligne);
position: relative;
width: min(var(--images-longueur-maximale), 100% - var(--images-marges-ligne));
margin: auto;
}
#page-a-propos .storytelling__animation {
--hauteur-animation: 90px;
--taille-police: calc(var(--espace-xl) * 2.5);
pointer-events: none;
#page-a-propos .storytelling picture {
position: relative;
}
#page-a-propos .storytelling picture::before {
content: "";
position: absolute;
z-index: 3;
top: 0;
right: 0;
left: 0;
overflow: hidden;
display: grid;
place-content: center;
place-items: center;
block-size: 100%;
margin: auto;
visibility: visible;
opacity: 1;
mask-image: linear-gradient(
var(--mask-direction, to right),
hsla(0, 0%, 0%, 0),
hsl(0, 0%, 0%) 20%,
hsl(0, 0%, 0%) 80%,
hsla(0, 0%, 0%, 0)
);
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
width: 100%;
height: 100%;
background-image: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg");
background-repeat: space;
background-position: center;
background-size: contain;
filter: opacity(0%);
animation: 1s clignotement infinite alternate both linear;
}
#page-a-propos .storytelling__animation[hidden] {
display: grid !important;
visibility: hidden;
opacity: 0;
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
}
#page-a-propos .storytelling__animation.no-js {
visibility: hidden;
opacity: 0;
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
}
#page-a-propos .storytelling__animation .animation-conteneur {
overflow: visible;
width: 120vw;
block-size: var(--hauteur-animation);
}
#page-a-propos .storytelling__animation .animation-texte {
overflow: visible;
font-size: var(--taille-police);
font-weight: 600;
text-shadow: 4px 4px 0 var(--couleur-blanc);
text-transform: uppercase;
letter-spacing: var(--espacement-inter-lettres-rapproche-s);
}
#page-a-propos .storytelling__image {
position: sticky;
top: 0;
align-content: center;
inline-size: max-content;
max-inline-size: 100%;
min-block-size: var(--hauteur-conteneur);
max-block-size: var(--hauteur-conteneur);
}
#page-a-propos .storytelling__image[data-caché] {
display: none !important;
}
#page-a-propos .storytelling__image picture {
max-block-size: inherit;
}
#page-a-propos .storytelling__image img {
scale: 0.95;
max-block-size: inherit;
margin: auto;
#page-a-propos .storytelling img {
position: relative;
width: max-content;
height: auto;
object-fit: contain;
background: transparent;
}
@media (scripting: none) {
#page-a-propos .storytelling__animation {
visibility: hidden;
}
#page-a-propos .storytelling .epingle {
position: absolute;
right: 46.5%;
}
#page-a-propos .storytelling .epingle img {
pointer-events: none;
display: block;
width: 1.75rem;
/* filter: drop-shadow(1px 1px 3px var(--couleur-gris-fonce)); */
/* transition: 0.2s filter; */
}
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="1"] {
top: 1%;
right: 60%;
}
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="2"] {
top: 25%;
right: 70%;
}
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="3"] {
top: 37%;
right: 20%;
}
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="4"] {
top: 58%;
right: 70%;
}
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="5"] {
top: 76%;
right: 14%;
}
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="6"] {
top: 95.5%;
right: 75%;
}
#page-a-propos .storytelling .epingle[data-ensemble-epingle-boite-actif] img {
/* filter: drop-shadow(1px 1px 5px var(--couleur-gris-fonce)); */
}
#page-a-propos .storytelling .boite-texte {
position: absolute;
top: 0;
right: calc(46.5% - (15rem + var(--espace-l)) / 2);
display: flex;
flex-flow: column nowrap;
padding: var(--espace-l);
border: 1px solid var(--couleur-noir);
font-size: 0.8rem;
font-style: italic;
color: var(--couleur-noir);
visibility: hidden;
opacity: 0;
background: var(--couleur-fond);
transition: 0.2s opacity, 0.2s visibility;
}
#page-a-propos .storytelling .boite-texte button {
position: absolute;
top: 0;
right: calc(-1.5rem - var(--espace-m) - var(--espace-xs));
align-self: end;
padding: var(--espace-xs);
}
#page-a-propos .storytelling .boite-texte button img {
pointer-events: none;
aspect-ratio: 1;
width: 1.5rem;
}
#page-a-propos .storytelling .boite-texte button:active {
background: var(--couleur-jaune);
}
#page-a-propos .storytelling .boite-texte p {
max-width: 15rem;
}
#page-a-propos .storytelling .boite-texte p + p {
margin-top: var(--espace-m);
}
#page-a-propos .storytelling .boite-texte[data-ensemble-epingle-boite-actif] {
visibility: visible;
opacity: 1;
}
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="2"] {
--hauteur-boite: calc(7lh + 1rem + var(--espace-l) * 2);
top: calc(23% - var(--hauteur-boite) / 2);
}
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="3"] {
--hauteur-boite: calc(7lh + 1rem + var(--espace-l) * 2);
top: calc(35% - var(--hauteur-boite) / 2);
}
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="3"] button {
left: calc(-1.5rem - var(--espace-m) - var(--espace-xs));
}
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="4"] {
--hauteur-boite: calc(8lh + 2rem + var(--espace-l) * 2);
top: calc(58% - var(--hauteur-boite) / 2);
}
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="5"] {
--hauteur-boite: calc(12lh + 2rem + var(--espace-l) * 2);
top: calc(76% - var(--hauteur-boite) / 2);
}
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="6"] {
--hauteur-boite: calc(7lh + 1rem + var(--espace-l) * 2);
top: calc(95.5% - var(--hauteur-boite) / 2);
}
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="6"] button {
left: calc(-1.5rem - var(--espace-m) - var(--espace-xs));
}
@media (width <= 700px) {
#page-a-propos {
--conteneur-marges-internes-ligne: var(--espace-l);
}
}
@media (width <= 500px) {
#page-a-propos {
--conteneur-marges-internes-ligne: var(--espace-m);
--images-marges-ligne: var(--espace-m);
}
}
@supports (-moz-appearance: none) {
#page-a-propos .storytelling__animation {
--taille-police: calc(var(--espace-xl) * 2.2);
@keyframes clignotement {
to {
filter: opacity(30%);
}
}

2
web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-a-propos.scss"],"names":[],"mappings":";AAEA;EAEE;EAGA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAOA;;AAEA;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAGF;EACE;EAIA;EACA;;AAGF;EACE;EAGA;EACA;EAGA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAMN;EACE;IACE;;;AAIJ;EAjIF;IAkII;;;AAGF;EArIF;IAsII;;;;AAKJ;EACE;IACE","file":"page-a-propos.css"}
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-a-propos.scss"],"names":[],"mappings":"AAEA;EAEE;EAGA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;AAEA;AAEA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIA;AACE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE;EAEA;;AAGF;EACE;EAEA;;AAEA;EACE;;AAIJ;EACE;EAEA;;AAGF;EACE;EAEA;;AAGF;EACE;EAEA;;AAEA;EACE;;AAMR;EA7LF;IA8LI;;;;AAIJ;EACE;IACE","file":"page-a-propos.css"}

2
web/app/themes/haiku-atelier-2024/assets/css/pages/page-a-propos.min.css vendored
View file

@ -1 +1 @@
#page-a-propos{--hauteur-conteneur:var(--contenu-page-hauteur-minimale-sans-categories);--page-marges-bloc-debut:var(--en-tete-hauteur);--conteneur-marges-internes-ligne:var(--espace-xl);min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);margin-top:var(--page-marges-bloc-debut);flex-flow:column;display:flex;overflow:hidden}#page-a-propos .storytelling{overscroll-behavior:none;min-block-size:inherit;max-block-size:inherit;overflow-y:scroll}#page-a-propos .storytelling__conteneur{overscroll-behavior:inherit;min-block-size:calc(var(--hauteur-conteneur) * 13);padding:0 var(--conteneur-marges-internes-ligne);flex-flow:column;place-items:center;display:flex}#page-a-propos .storytelling__animation{--hauteur-animation:90px;--taille-police:calc(var(--espace-xl) * 2.5);pointer-events:none;z-index:3;visibility:visible;opacity:1;block-size:100%;mask-image:linear-gradient(var(--mask-direction,to right), #0000, #000 20%, #000 80%, #0000);place-content:center;place-items:center;margin:auto;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid;position:absolute;top:0;left:0;right:0;overflow:hidden}#page-a-propos .storytelling__animation[hidden]{visibility:hidden;opacity:0;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid!important}#page-a-propos .storytelling__animation.no-js{visibility:hidden;opacity:0;transition:opacity 1s ease-in-out,visibility 1s ease-in-out}#page-a-propos .storytelling__animation .animation-conteneur{width:120vw;block-size:var(--hauteur-animation);overflow:visible}#page-a-propos .storytelling__animation .animation-texte{font-size:var(--taille-police);text-shadow:4px 4px 0 var(--couleur-blanc);text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-rapproche-s);font-weight:600;overflow:visible}#page-a-propos .storytelling__image{inline-size:max-content;max-inline-size:100%;min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);align-content:center;position:sticky;top:0}#page-a-propos .storytelling__image[data-caché]{display:none!important}#page-a-propos .storytelling__image picture{max-block-size:inherit}#page-a-propos .storytelling__image img{max-block-size:inherit;object-fit:contain;background:0 0;margin:auto;scale:.95}@media (scripting:none){#page-a-propos .storytelling__animation{visibility:hidden}}@media (width<=700px){#page-a-propos{--conteneur-marges-internes-ligne:var(--espace-l)}}@media (width<=500px){#page-a-propos{--conteneur-marges-internes-ligne:var(--espace-m)}}@supports ((-moz-appearance:none)){#page-a-propos .storytelling__animation{--taille-police:calc(var(--espace-xl) * 2.2)}}
#page-a-propos{--images-longueur-maximale:1300px;--page-marges-bloc-debut:var(--en-tete-hauteur);--images-marges-ligne:var(--espace-xl) * 2;margin-top:var(--page-marges-bloc-debut);flex-flow:column;display:flex}#page-a-propos .storytelling{padding:var(--espace-xl) 0;color:var(--couleur-gris-fonce)}#page-a-propos .storytelling__conteneur{width:min(var(--images-longueur-maximale), 100% - var(--images-marges-ligne));margin:auto;position:relative}#page-a-propos .storytelling picture{position:relative}#page-a-propos .storytelling picture:before{content:"";filter:opacity(0%);background-image:url(/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg);background-position:50%;background-repeat:space;background-size:contain;width:100%;height:100%;animation:1s linear infinite alternate both clignotement;position:absolute;top:0;left:0}#page-a-propos .storytelling img{object-fit:contain;background:0 0;width:max-content;height:auto;position:relative}#page-a-propos .storytelling .epingle{position:absolute;right:46.5%}#page-a-propos .storytelling .epingle img{pointer-events:none;width:1.75rem;display:block}#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="1"]{top:1%;right:60%}#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="2"]{top:25%;right:70%}#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="3"]{top:37%;right:20%}#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="4"]{top:58%;right:70%}#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="5"]{top:76%;right:14%}#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="6"]{top:95.5%;right:75%}#page-a-propos .storytelling .boite-texte{top:0;right:calc(46.5% - (15rem + var(--espace-l)) / 2);padding:var(--espace-l);border:1px solid var(--couleur-noir);color:var(--couleur-noir);visibility:hidden;opacity:0;background:var(--couleur-fond);flex-flow:column;font-size:.8rem;font-style:italic;transition:opacity .2s,visibility .2s;display:flex;position:absolute}#page-a-propos .storytelling .boite-texte button{top:0;right:calc(-1.5rem - var(--espace-m) - var(--espace-xs));padding:var(--espace-xs);align-self:end;position:absolute}#page-a-propos .storytelling .boite-texte button img{pointer-events:none;aspect-ratio:1;width:1.5rem}#page-a-propos .storytelling .boite-texte button:active{background:var(--couleur-jaune)}#page-a-propos .storytelling .boite-texte p{max-width:15rem}#page-a-propos .storytelling .boite-texte p+p{margin-top:var(--espace-m)}#page-a-propos .storytelling .boite-texte[data-ensemble-epingle-boite-actif]{visibility:visible;opacity:1}#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="2"]{--hauteur-boite:calc(7lh + 1rem + var(--espace-l) * 2);top:calc(23% - var(--hauteur-boite) / 2)}#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="3"]{--hauteur-boite:calc(7lh + 1rem + var(--espace-l) * 2);top:calc(35% - var(--hauteur-boite) / 2)}#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="3"] button{left:calc(-1.5rem - var(--espace-m) - var(--espace-xs))}#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="4"]{--hauteur-boite:calc(8lh + 2rem + var(--espace-l) * 2);top:calc(58% - var(--hauteur-boite) / 2)}#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="5"]{--hauteur-boite:calc(12lh + 2rem + var(--espace-l) * 2);top:calc(76% - var(--hauteur-boite) / 2)}#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="6"]{--hauteur-boite:calc(7lh + 1rem + var(--espace-l) * 2);top:calc(95.5% - var(--hauteur-boite) / 2)}#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="6"] button{left:calc(-1.5rem - var(--espace-m) - var(--espace-xs))}@media (width<=700px){#page-a-propos{--images-marges-ligne:var(--espace-m)}}@keyframes clignotement{to{filter:opacity(30%)}}

113
web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css
View file

@ -1,10 +1,121 @@
@charset "UTF-8";
#page-accueil {
--hauteur-conteneur: calc(100svh - var(--pied-de-page-hauteur));
--hauteur-conteneur: var(--contenu-page-hauteur-minimale-sans-categories);
--page-marges-bloc-debut: var(--en-tete-hauteur);
--conteneur-marges-internes-ligne: var(--espace-xl);
overflow: hidden;
display: flex;
flex-flow: column nowrap;
min-block-size: var(--hauteur-conteneur);
max-block-size: var(--hauteur-conteneur);
margin-top: var(--page-marges-bloc-debut);
}
#page-accueil .storytelling {
overflow-y: scroll;
overscroll-behavior: none;
min-block-size: inherit;
max-block-size: inherit;
}
#page-accueil .storytelling__conteneur {
overscroll-behavior: inherit;
display: flex;
flex-flow: column nowrap;
place-items: center;
min-block-size: calc(var(--hauteur-conteneur) * 13);
padding: 0 var(--conteneur-marges-internes-ligne);
}
#page-accueil .storytelling__animation {
--hauteur-animation: 90px;
--taille-police: calc(var(--espace-xl) * 2.5);
pointer-events: none;
position: absolute;
z-index: 3;
top: 0;
right: 0;
left: 0;
overflow: hidden;
display: grid;
place-content: center;
place-items: center;
block-size: 100%;
margin: auto;
visibility: visible;
opacity: 1;
mask-image: linear-gradient(
var(--mask-direction, to right),
hsla(0, 0%, 0%, 0),
hsl(0, 0%, 0%) 20%,
hsl(0, 0%, 0%) 80%,
hsla(0, 0%, 0%, 0)
);
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
}
#page-accueil .storytelling__animation[hidden] {
display: grid !important;
visibility: hidden;
opacity: 0;
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
}
#page-accueil .storytelling__animation.no-js {
visibility: hidden;
opacity: 0;
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
}
#page-accueil .storytelling__animation .animation-conteneur {
overflow: visible;
width: 120vw;
block-size: var(--hauteur-animation);
}
#page-accueil .storytelling__animation .animation-texte {
overflow: visible;
font-size: var(--taille-police);
font-weight: 600;
text-shadow: 4px 4px 0 var(--couleur-blanc);
text-transform: uppercase;
letter-spacing: var(--espacement-inter-lettres-rapproche-s);
}
#page-accueil .storytelling__image {
position: sticky;
top: 0;
align-content: center;
inline-size: max-content;
max-inline-size: 100%;
min-block-size: var(--hauteur-conteneur);
max-block-size: var(--hauteur-conteneur);
}
#page-accueil .storytelling__image[data-caché] {
display: none !important;
}
#page-accueil .storytelling__image picture {
max-block-size: inherit;
}
#page-accueil .storytelling__image img {
scale: 0.95;
max-block-size: inherit;
margin: auto;
object-fit: contain;
background: transparent;
}
@media (scripting: none) {
#page-accueil .storytelling__animation {
visibility: hidden;
}
}
@media (width <= 700px) {
#page-accueil {
--conteneur-marges-internes-ligne: var(--espace-l);
}
}
@media (width <= 500px) {
#page-accueil {
--conteneur-marges-internes-ligne: var(--espace-m);
}
}
@supports (-moz-appearance: none) {
#page-accueil .storytelling__animation {
--taille-police: calc(var(--espace-xl) * 2.2);
}
}
/* # sourceMappingURL=page-accueil.css.map */

2
web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-accueil.scss"],"names":[],"mappings":"AAEA;EAEE;EAEA;EACA;EACA;EACA;EACA","file":"page-accueil.css"}
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-accueil.scss"],"names":[],"mappings":";AAEA;EAEE;EAGA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAOA;;AAEA;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAGF;EACE;EAIA;EACA;;AAGF;EACE;EAGA;EACA;EAGA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAMN;EACE;IACE;;;AAIJ;EAjIF;IAkII;;;AAGF;EArIF;IAsII;;;;AAKJ;EACE;IACE","file":"page-accueil.css"}

2
web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.min.css vendored
View file

@ -1 +1 @@
#page-accueil{--hauteur-conteneur:calc(100svh - var(--pied-de-page-hauteur));min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);flex-flow:column;display:flex;overflow:hidden}
#page-accueil{--hauteur-conteneur:var(--contenu-page-hauteur-minimale-sans-categories);--page-marges-bloc-debut:var(--en-tete-hauteur);--conteneur-marges-internes-ligne:var(--espace-xl);min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);margin-top:var(--page-marges-bloc-debut);flex-flow:column;display:flex;overflow:hidden}#page-accueil .storytelling{overscroll-behavior:none;min-block-size:inherit;max-block-size:inherit;overflow-y:scroll}#page-accueil .storytelling__conteneur{overscroll-behavior:inherit;min-block-size:calc(var(--hauteur-conteneur) * 13);padding:0 var(--conteneur-marges-internes-ligne);flex-flow:column;place-items:center;display:flex}#page-accueil .storytelling__animation{--hauteur-animation:90px;--taille-police:calc(var(--espace-xl) * 2.5);pointer-events:none;z-index:3;visibility:visible;opacity:1;block-size:100%;mask-image:linear-gradient(var(--mask-direction,to right), #0000, #000 20%, #000 80%, #0000);place-content:center;place-items:center;margin:auto;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid;position:absolute;top:0;left:0;right:0;overflow:hidden}#page-accueil .storytelling__animation[hidden]{visibility:hidden;opacity:0;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;display:grid!important}#page-accueil .storytelling__animation.no-js{visibility:hidden;opacity:0;transition:opacity 1s ease-in-out,visibility 1s ease-in-out}#page-accueil .storytelling__animation .animation-conteneur{width:120vw;block-size:var(--hauteur-animation);overflow:visible}#page-accueil .storytelling__animation .animation-texte{font-size:var(--taille-police);text-shadow:4px 4px 0 var(--couleur-blanc);text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-rapproche-s);font-weight:600;overflow:visible}#page-accueil .storytelling__image{inline-size:max-content;max-inline-size:100%;min-block-size:var(--hauteur-conteneur);max-block-size:var(--hauteur-conteneur);align-content:center;position:sticky;top:0}#page-accueil .storytelling__image[data-caché]{display:none!important}#page-accueil .storytelling__image picture{max-block-size:inherit}#page-accueil .storytelling__image img{max-block-size:inherit;object-fit:contain;background:0 0;margin:auto;scale:.95}@media (scripting:none){#page-accueil .storytelling__animation{visibility:hidden}}@media (width<=700px){#page-accueil{--conteneur-marges-internes-ligne:var(--espace-l)}}@media (width<=500px){#page-accueil{--conteneur-marges-internes-ligne:var(--espace-m)}}@supports ((-moz-appearance:none)){#page-accueil .storytelling__animation{--taille-police:calc(var(--espace-xl) * 2.2)}}

BIN
web/app/themes/haiku-atelier-2024/assets/video/intro-desktop.m4v
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/video/intro-desktop.webm
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/video/intro-phone.m4v
View file

Binary file not shown.

BIN
web/app/themes/haiku-atelier-2024/assets/video/intro-phone.webm
View file

Binary file not shown.

4
web/app/themes/haiku-atelier-2024/front-page.php
View file

@ -21,6 +21,10 @@ add_action('wp_enqueue_scripts', function (): void {
handle: 'haiku-atelier-2024-styles-page-accueil',
path: '/assets/css/pages/page-accueil.css',
);
Resource::enqueue_script_module_file(
id: 'haiku-atelier-2024-scripts-page-accueil',
path: '/assets/js/scripts-page-accueil.js',
);
});
Timber::render(data: $context, filenames: $templates);

2
web/app/themes/haiku-atelier-2024/src/sass/base/_typographie.scss
View file

@ -27,7 +27,7 @@ em {
}
code {
font-family: monospace;
font-family: "monospace";
font-size: 0.9rem;
}

13
web/app/themes/haiku-atelier-2024/src/sass/base/elements/_dialogs.scss
View file

@ -1,10 +1,11 @@
dialog {
z-index: 999;
flex-flow: column nowrap;
place-self: center center;
padding: var(--espace-l);
opacity: 0;
background: white;
z-index: 999;
justify-self: center;
align-self: center;
padding: var(--espace-l);
flex-flow: column nowrap;
opacity: 0;
transition: display 0.3s, opacity 0.3s, overlay 0.3s;
transition-behavior: allow-discrete;
@ -32,8 +33,8 @@ dialog {
}
button {
align-self: end;
inline-size: fit-content;
align-self: end;
padding: var(--espace-s);
}
}

8
web/app/themes/haiku-atelier-2024/src/sass/base/elements/_media.scss
View file

@ -1,8 +0,0 @@
video {
display: block;
inline-size: 100%;
min-inline-size: 100%;
block-size: 100%;
min-block-size: inherit;
object-fit: cover;
}

1
web/app/themes/haiku-atelier-2024/src/sass/layouts/_pied-de-page.scss
View file

@ -10,6 +10,7 @@
padding: var(--espace-s) var(--espace-m);
border-top: 1px solid var(--couleur-noir);
font-size: 0.8rem;
background: var(--couleur-jaune);
// Liens vers les pages du site
.zone-menu-navigation-secondaire {

1
web/app/themes/haiku-atelier-2024/src/sass/main.scss
View file

@ -13,7 +13,6 @@
@use "base/elements/images" as images;
@use "base/elements/liens" as liens;
@use "base/elements/listes" as listes;
@use "base/elements/media" as media;
// 3. Régions
@use "layouts/bandeau" as bandeau;

275
web/app/themes/haiku-atelier-2024/src/sass/pages/page-a-propos.scss
View file

@ -1,146 +1,201 @@
// Styles pour la Page « A propos »
// Styles pour la Page À Propos (« About »).
#page-a-propos {
// Dimensions
--hauteur-conteneur: var(--contenu-page-hauteur-minimale-sans-categories);
--images-longueur-maximale: 1300px;
// Marges
--page-marges-bloc-debut: var(--en-tete-hauteur);
--conteneur-marges-internes-ligne: var(--espace-xl);
--images-marges-ligne: var(--espace-xl) * 2;
overflow: hidden;
display: flex;
flex-flow: column nowrap;
min-block-size: var(--hauteur-conteneur);
max-block-size: var(--hauteur-conteneur);
margin-top: var(--page-marges-bloc-debut);
.storytelling {
overflow-y: scroll;
overscroll-behavior: none;
min-block-size: inherit;
max-block-size: inherit;
padding: var(--espace-xl) 0;
color: var(--couleur-gris-fonce);
&__conteneur {
overscroll-behavior: inherit;
display: flex;
flex-flow: column nowrap;
place-items: center;
min-block-size: calc(var(--hauteur-conteneur) * 13);
padding: 0 var(--conteneur-marges-internes-ligne);
}
// Texte animé indiquant à l'Utilisateur de défiler vers le bas.
&__animation {
--hauteur-animation: 90px;
--taille-police: calc(var(--espace-xl) * 2.5);
pointer-events: none;
position: absolute;
z-index: 3;
top: 0;
right: 0;
left: 0;
overflow: hidden;
display: grid;
place-content: center;
place-items: center;
block-size: 100%;
position: relative;
width: min(var(--images-longueur-maximale), calc(100% - var(--images-marges-ligne)));
margin: auto;
visibility: visible;
opacity: 1;
mask-image: linear-gradient(
var(--mask-direction, to right),
hsl(0deg 0% 0% / 0%),
hsl(0deg 0% 0% / 100%) 20%,
hsl(0deg 0% 0% / 100%) 80%,
hsl(0deg 0% 0% / 0%)
);
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
}
&[hidden] {
display: grid !important;
visibility: hidden;
opacity: 0;
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
}
picture {
position: relative;
// N'affiche rien si JavaScript n'est pas activé.
&.no-js {
visibility: hidden;
opacity: 0;
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
}
.animation-conteneur {
overflow: visible;
// Nécessaire pour que les lettres apparaissent « en douceur » dans la vue.
// Safari requiert des `vw` plutôt que des `%`.
width: 120vw;
block-size: var(--hauteur-animation);
}
.animation-texte {
overflow: visible;
// TODO: Pourquoi y-a-t'il une telle difference de rendu entre Chromium, FF et Safari ?
font-size: var(--taille-police);
font-weight: 600;
// TODO: Pourquoi y-a-t'il une telle difference de rendu entre Chromium, FF et Safari ?
text-shadow: 4px 4px 0 var(--couleur-blanc);
text-transform: uppercase;
letter-spacing: var(--espacement-inter-lettres-rapproche-s);
// Image de préchargement
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg");
background-repeat: space;
background-position: center;
background-size: contain;
filter: opacity(0%);
animation: 1s clignotement infinite alternate both linear;
}
}
&__image {
position: sticky;
top: 0;
align-content: center;
inline-size: max-content;
max-inline-size: 100%;
min-block-size: var(--hauteur-conteneur);
max-block-size: var(--hauteur-conteneur);
// Image du storytelling
img {
position: relative;
width: max-content;
height: auto;
object-fit: contain;
background: transparent;
}
&[data-caché] {
display: none !important;
}
picture {
max-block-size: inherit;
}
.epingle {
position: absolute;
right: 46.5%;
img {
scale: 0.95;
max-block-size: inherit;
margin: auto;
object-fit: contain;
background: transparent;
pointer-events: none;
display: block;
width: 1.75rem;
/* filter: drop-shadow(1px 1px 3px var(--couleur-gris-fonce)); */
/* transition: 0.2s filter; */
}
&[data-id-ensemble-epingle-boite="1"] {
top: 1%;
right: 60%;
}
&[data-id-ensemble-epingle-boite="2"] {
top: 25%;
right: 70%;
}
&[data-id-ensemble-epingle-boite="3"] {
top: 37%;
right: 20%;
}
&[data-id-ensemble-epingle-boite="4"] {
top: 58%;
right: 70%;
}
&[data-id-ensemble-epingle-boite="5"] {
top: 76%;
right: 14%;
}
&[data-id-ensemble-epingle-boite="6"] {
top: 95.5%;
right: 75%;
}
&[data-ensemble-epingle-boite-actif] {
img {
/* filter: drop-shadow(1px 1px 5px var(--couleur-gris-fonce)); */
}
}
}
}
// Désactive l'animation si JavaScript n'est pas disponible.
@media (scripting: none) {
.storytelling__animation {
.boite-texte {
position: absolute;
top: 0;
right: calc(46.5% - (15rem + var(--espace-l)) / 2);
display: flex;
flex-flow: column nowrap;
padding: var(--espace-l);
border: 1px solid var(--couleur-noir);
font-size: 0.8rem;
font-style: italic;
color: var(--couleur-noir);
visibility: hidden;
opacity: 0;
background: var(--couleur-fond);
transition: 0.2s opacity, 0.2s visibility;
button {
position: absolute;
top: 0;
right: calc(1.5rem * -1 - var(--espace-m) - var(--espace-xs));
align-self: end;
padding: var(--espace-xs);
img {
pointer-events: none;
aspect-ratio: 1;
width: 1.5rem;
}
&:active {
background: var(--couleur-jaune);
}
}
p {
max-width: 15rem;
+ p {
margin-top: var(--espace-m);
}
}
&[data-ensemble-epingle-boite-actif] {
visibility: visible;
opacity: 1;
}
&[data-id-ensemble-epingle-boite="2"] {
--hauteur-boite: calc(7lh + 1rem + var(--espace-l) * 2);
top: calc(23% - var(--hauteur-boite) / 2);
}
&[data-id-ensemble-epingle-boite="3"] {
--hauteur-boite: calc(7lh + 1rem + var(--espace-l) * 2);
top: calc(35% - var(--hauteur-boite) / 2);
button {
left: calc(1.5rem * -1 - var(--espace-m) - var(--espace-xs));
}
}
&[data-id-ensemble-epingle-boite="4"] {
--hauteur-boite: calc(8lh + 2rem + var(--espace-l) * 2);
top: calc(58% - var(--hauteur-boite) / 2);
}
&[data-id-ensemble-epingle-boite="5"] {
--hauteur-boite: calc(12lh + 2rem + var(--espace-l) * 2);
top: calc(76% - var(--hauteur-boite) / 2);
}
&[data-id-ensemble-epingle-boite="6"] {
--hauteur-boite: calc(7lh + 1rem + var(--espace-l) * 2);
top: calc(95.5% - var(--hauteur-boite) / 2);
button {
left: calc(1.5rem * -1 - var(--espace-m) - var(--espace-xs));
}
}
}
}
@media (width <= 700px) {
--conteneur-marges-internes-ligne: var(--espace-l);
}
@media (width <= 500px) {
--conteneur-marges-internes-ligne: var(--espace-m);
--images-marges-ligne: var(--espace-m);
}
}
// TODO: Réduit la taille de la police de l'animation sur FF car elle apparaît plus grande...
@supports (-moz-appearance: none) {
#page-a-propos .storytelling__animation {
--taille-police: calc(var(--espace-xl) * 2.2);
@keyframes clignotement {
to {
filter: opacity(30%);
}
}

138
web/app/themes/haiku-atelier-2024/src/sass/pages/page-accueil.scss
View file

@ -1,12 +1,146 @@
// Styles pour la Page d'Accueil
// Styles pour la Page d'accueil
#page-accueil {
// Dimensions
--hauteur-conteneur: calc(100svh - var(--pied-de-page-hauteur));
--hauteur-conteneur: var(--contenu-page-hauteur-minimale-sans-categories);
// Marges
--page-marges-bloc-debut: var(--en-tete-hauteur);
--conteneur-marges-internes-ligne: var(--espace-xl);
overflow: hidden;
display: flex;
flex-flow: column nowrap;
min-block-size: var(--hauteur-conteneur);
max-block-size: var(--hauteur-conteneur);
margin-top: var(--page-marges-bloc-debut);
.storytelling {
overflow-y: scroll;
overscroll-behavior: none;
min-block-size: inherit;
max-block-size: inherit;
&__conteneur {
overscroll-behavior: inherit;
display: flex;
flex-flow: column nowrap;
place-items: center;
min-block-size: calc(var(--hauteur-conteneur) * 13);
padding: 0 var(--conteneur-marges-internes-ligne);
}
// Texte animé indiquant à l'Utilisateur de défiler vers le bas.
&__animation {
--hauteur-animation: 90px;
--taille-police: calc(var(--espace-xl) * 2.5);
pointer-events: none;
position: absolute;
z-index: 3;
top: 0;
right: 0;
left: 0;
overflow: hidden;
display: grid;
place-content: center;
place-items: center;
block-size: 100%;
margin: auto;
visibility: visible;
opacity: 1;
mask-image: linear-gradient(
var(--mask-direction, to right),
hsl(0deg 0% 0% / 0%),
hsl(0deg 0% 0% / 100%) 20%,
hsl(0deg 0% 0% / 100%) 80%,
hsl(0deg 0% 0% / 0%)
);
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
&[hidden] {
display: grid !important;
visibility: hidden;
opacity: 0;
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
}
// N'affiche rien si JavaScript n'est pas activé.
&.no-js {
visibility: hidden;
opacity: 0;
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
}
.animation-conteneur {
overflow: visible;
// Nécessaire pour que les lettres apparaissent « en douceur » dans la vue.
// Safari requiert des `vw` plutôt que des `%`.
width: 120vw;
block-size: var(--hauteur-animation);
}
.animation-texte {
overflow: visible;
// TODO: Pourquoi y-a-t'il une telle difference de rendu entre Chromium, FF et Safari ?
font-size: var(--taille-police);
font-weight: 600;
// TODO: Pourquoi y-a-t'il une telle difference de rendu entre Chromium, FF et Safari ?
text-shadow: 4px 4px 0 var(--couleur-blanc);
text-transform: uppercase;
letter-spacing: var(--espacement-inter-lettres-rapproche-s);
}
}
&__image {
position: sticky;
top: 0;
align-content: center;
inline-size: max-content;
max-inline-size: 100%;
min-block-size: var(--hauteur-conteneur);
max-block-size: var(--hauteur-conteneur);
&[data-caché] {
display: none !important;
}
picture {
max-block-size: inherit;
}
img {
scale: 0.95;
max-block-size: inherit;
margin: auto;
object-fit: contain;
background: transparent;
}
}
}
// Désactive l'animation si JavaScript n'est pas disponible.
@media (scripting: none) {
.storytelling__animation {
visibility: hidden;
}
}
@media (width <= 700px) {
--conteneur-marges-internes-ligne: var(--espace-l);
}
@media (width <= 500px) {
--conteneur-marges-internes-ligne: var(--espace-m);
}
}
// TODO: Réduit la taille de la police de l'animation sur FF car elle apparaît plus grande...
@supports (-moz-appearance: none) {
#page-accueil .storytelling__animation {
--taille-police: calc(var(--espace-xl) * 2.2);
}
}

96
web/app/themes/haiku-atelier-2024/src/scripts/_scripts-page-a-propos.ts
View file

@ -1,96 +0,0 @@
/**
* Scripts pour les fonctionnalités de la Page À Propos (« About »).
*/
import { A, O, pipe as beltPipe } from "@mobily/ts-belt";
import {
ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF,
ATTRIBUT_ID_ENSEMBLE_EPINGLE_BOITE,
CLASS_BOUTON_FERMETURE_BOITE_TEXTE,
CLASS_EPINGLE,
DOM_BOITE_TEXTE,
DOM_CONTENEUR_STORYTELLING_A_PROPOS,
DOM_EPINGLE,
} from "./constantes/dom.ts";
import { mustGetEleInDocument, mustGetElesInDocument } from "./lib/dom.ts";
/** Le Conteneur des images du storytelling. */
const CONTENEUR_STORYTELLING = mustGetEleInDocument<HTMLElement>(DOM_CONTENEUR_STORYTELLING_A_PROPOS);
/** */
const EPINGLES = mustGetElesInDocument<HTMLButtonElement>(DOM_EPINGLE);
/** */
const BOITES_TEXTE = mustGetElesInDocument<HTMLDivElement>(DOM_BOITE_TEXTE);
/** */
const ENSEMBLES_EPINGLES_BOITES_TEXTE = new Map<string, [HTMLButtonElement, HTMLDivElement]>();
A.forEachWithIndex(EPINGLES, (index, epingle) => {
beltPipe(
epingle,
O.flatMap((bouton: HTMLButtonElement) => bouton.getAttribute(ATTRIBUT_ID_ENSEMBLE_EPINGLE_BOITE)),
O.tap((id: string) => {
ENSEMBLES_EPINGLES_BOITES_TEXTE.set(id, [epingle, BOITES_TEXTE[index]!]);
}),
);
});
document.addEventListener("DOMContentLoaded", (): void => {
CONTENEUR_STORYTELLING.addEventListener("click", (evenement): void => {
// Délégation d'Évènements au clic sur un <button>
const cible: HTMLElement = evenement.target as HTMLElement;
// Clic sur un Bouton de fermeture de Boîte
beltPipe(
cible,
// TODO: Créer une fonction « liftPredicate » agissant comme prédicat de type
O.fromPredicate((element: HTMLElement) => element.className === CLASS_BOUTON_FERMETURE_BOITE_TEXTE),
O.mapNullable((bouton: HTMLButtonElement) => bouton.parentElement),
O.flatMap((boite: HTMLDivElement) => boite.getAttribute(ATTRIBUT_ID_ENSEMBLE_EPINGLE_BOITE)),
O.tap((id: string) => {
beltPipe(
O.fromNullable(ENSEMBLES_EPINGLES_BOITES_TEXTE.get(id)),
O.tap(
A.forEach(element => {
element.removeAttribute(ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF);
}),
),
);
}),
);
// Clic sur une Épingle
beltPipe(
cible,
// Vérifier la classe plutôt que le bouton
O.fromPredicate((element: HTMLElement) => element.className === CLASS_EPINGLE),
O.flatMap((bouton: HTMLButtonElement) => bouton.getAttribute(ATTRIBUT_ID_ENSEMBLE_EPINGLE_BOITE)),
O.tap((id: string) => {
// Désactive l'Attribut actif si la cible est déjà active et retourne précocement
if (cible.hasAttribute(ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF)) {
beltPipe(
O.fromNullable(ENSEMBLES_EPINGLES_BOITES_TEXTE.get(id)),
O.tap(
A.forEach(element => {
element.removeAttribute(ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF);
}),
),
);
return;
}
// Désactive tous les Ensembles
beltPipe(
Array.from(ENSEMBLES_EPINGLES_BOITES_TEXTE.values()),
A.flat,
A.forEach(element => {
element.removeAttribute(ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF);
}),
);
// Active l'Attribut sur l'Ensemble
beltPipe(
O.fromNullable(ENSEMBLES_EPINGLES_BOITES_TEXTE.get(id)),
O.tap(A.forEach(element => element.toggleAttribute(ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF))),
);
}),
);
});
});

202
web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-a-propos.ts
View file

@ -1,128 +1,96 @@
// Scripts pour la Page d'accueil
/**
* Scripts pour les fonctionnalités de la Page À Propos (« About »).
*/
import { A, O, pipe } from "@mobily/ts-belt";
import { A, O, pipe as beltPipe } from "@mobily/ts-belt";
import {
ATTRIBUT_CACHÉ,
ATTRIBUT_HIDDEN,
DOM_CONTENEUR_ANIMATION,
DOM_CONTENEUR_STORYTELLING,
DOM_GARDE_FOU_JS,
DOM_IMAGES_STORYTELLING,
ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF,
ATTRIBUT_ID_ENSEMBLE_EPINGLE_BOITE,
CLASS_BOUTON_FERMETURE_BOITE_TEXTE,
CLASS_EPINGLE,
DOM_BOITE_TEXTE,
DOM_CONTENEUR_STORYTELLING_A_PROPOS,
DOM_EPINGLE,
} from "./constantes/dom.ts";
import { mustGetEleInDocument, mustGetElesInDocument } from "./lib/dom.ts";
import { estEntreDeuxNombres } from "./lib/nombres.ts";
const E = {
/** Le bloc contenant l'animation. */
CONTENEUR_ANIMATION: mustGetEleInDocument<HTMLDivElement>(DOM_CONTENEUR_ANIMATION),
/** Le conteneur des images du storytelling. */
CONTENEUR_STORYTELLING: mustGetEleInDocument<HTMLElement>(".storytelling__conteneur"),
/** Les images du storytelling. */
IMAGES_STORYTELLING: mustGetElesInDocument<HTMLDivElement>(DOM_IMAGES_STORYTELLING),
/** Le bloc contenant le storytelling. */
STORYTELLING: mustGetEleInDocument<HTMLElement>(DOM_CONTENEUR_STORYTELLING),
};
/**
* Retire la classe garde-fou `.js` cachant les éléments nécessitant JavaScript pour s'afficher/fonctionner correctement.
*/
const retireClasseGardeFouJs = (): void => {
E.CONTENEUR_ANIMATION.classList.remove(DOM_GARDE_FOU_JS);
};
const initDefilementStorytelling = (): void => {
/** La hauteur d'une image du storytelling. */
let dimensionsImage = {
height: E.IMAGES_STORYTELLING.at(0)?.getBoundingClientRect().height ?? 0,
width: E.IMAGES_STORYTELLING.at(0)?.getBoundingClientRect().width ?? 0,
};
/** La position du défilement (en pixels) du Conteneur des images du storytelling. */
let positionDefilementConteneur = 0;
/**
* Bascule la visibilité d'une image en
* @param image
* @param estVisible
*/
const basculeVisibilitéImage = (image: HTMLDivElement, estVisible: boolean) => {
image.toggleAttribute(ATTRIBUT_CACHÉ, estVisible);
};
/**
* TODO
*/
const majDimensionsStorytelling = (): void => {
dimensionsImage = pipe(
A.getBy(E.IMAGES_STORYTELLING, (i: HTMLDivElement) => !i.hasAttribute(ATTRIBUT_CACHÉ)),
O.map((i: HTMLDivElement) => ({
height: i.getBoundingClientRect().height,
width: i.getBoundingClientRect().width,
})),
O.getWithDefault({ height: 0, width: 0 }),
);
// Adapte la longueur du conteneur d'animation à la nouvelle longueur d'une image.
E.CONTENEUR_ANIMATION.style.width = `${String(dimensionsImage.width)}px`;
// Adapte la hauteur du conteneur des images pour un défilement « seamless ».
const nouvelleHauteurMax = `${String(dimensionsImage.height * E.IMAGES_STORYTELLING.length + 61)}px`;
E.CONTENEUR_STORYTELLING.style.minHeight = nouvelleHauteurMax;
E.CONTENEUR_STORYTELLING.style.maxHeight = nouvelleHauteurMax;
};
/**
* TODO
*/
const majVisibilitéImagesStorytelling = (): void => {
// Met à jour la position du défilement dans le Conteneur.
positionDefilementConteneur = E.STORYTELLING.scrollTop;
// Met à jour l'attribut de visibilité des images en fonction du défilement.
E.IMAGES_STORYTELLING.forEach((image: HTMLDivElement, index: number): void => {
const debutYImage = dimensionsImage.height * index;
const finYImage = dimensionsImage.height * (index + 1);
basculeVisibilitéImage(image, !estEntreDeuxNombres(positionDefilementConteneur, debutYImage, finYImage));
});
};
// Initialise l'Observateur de Redimensionnement (ResizeObserver).
new ResizeObserver((): void => {
majDimensionsStorytelling();
majVisibilitéImagesStorytelling();
}).observe(E.STORYTELLING);
// Initialise la mise à jour des images au défilement sur le Conteneur.
E.STORYTELLING.addEventListener("scroll", (): void => {
majVisibilitéImagesStorytelling();
});
};
const initGestionAnimation = (): void => {
pipe(
A.at(E.IMAGES_STORYTELLING, 0),
O.tap(img => {
const options: IntersectionObserverInit = {
root: undefined,
rootMargin: "0px",
threshold: 0,
};
const callback = (entries: Array<IntersectionObserverEntry>) => {
A.forEach(entries, e => {
e.intersectionRatio >= 0.9 ?
E.CONTENEUR_ANIMATION.removeAttribute(ATTRIBUT_HIDDEN) :
E.CONTENEUR_ANIMATION.setAttribute(ATTRIBUT_HIDDEN, "");
});
};
new IntersectionObserver(callback, options).observe(img);
/** Le Conteneur des images du storytelling. */
const CONTENEUR_STORYTELLING = mustGetEleInDocument<HTMLElement>(DOM_CONTENEUR_STORYTELLING_A_PROPOS);
/** */
const EPINGLES = mustGetElesInDocument<HTMLButtonElement>(DOM_EPINGLE);
/** */
const BOITES_TEXTE = mustGetElesInDocument<HTMLDivElement>(DOM_BOITE_TEXTE);
/** */
const ENSEMBLES_EPINGLES_BOITES_TEXTE = new Map<string, [HTMLButtonElement, HTMLDivElement]>();
A.forEachWithIndex(EPINGLES, (index, epingle) => {
beltPipe(
epingle,
O.flatMap((bouton: HTMLButtonElement) => bouton.getAttribute(ATTRIBUT_ID_ENSEMBLE_EPINGLE_BOITE)),
O.tap((id: string) => {
ENSEMBLES_EPINGLES_BOITES_TEXTE.set(id, [epingle, BOITES_TEXTE[index]!]);
}),
);
};
});
document.addEventListener("DOMContentLoaded", (): void => {
retireClasseGardeFouJs();
initDefilementStorytelling();
initGestionAnimation();
CONTENEUR_STORYTELLING.addEventListener("click", (evenement): void => {
// Délégation d'Évènements au clic sur un <button>
const cible: HTMLElement = evenement.target as HTMLElement;
// Clic sur un Bouton de fermeture de Boîte
beltPipe(
cible,
// TODO: Créer une fonction « liftPredicate » agissant comme prédicat de type
O.fromPredicate((element: HTMLElement) => element.className === CLASS_BOUTON_FERMETURE_BOITE_TEXTE),
O.mapNullable((bouton: HTMLButtonElement) => bouton.parentElement),
O.flatMap((boite: HTMLDivElement) => boite.getAttribute(ATTRIBUT_ID_ENSEMBLE_EPINGLE_BOITE)),
O.tap((id: string) => {
beltPipe(
O.fromNullable(ENSEMBLES_EPINGLES_BOITES_TEXTE.get(id)),
O.tap(
A.forEach(element => {
element.removeAttribute(ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF);
}),
),
);
}),
);
// Clic sur une Épingle
beltPipe(
cible,
// Vérifier la classe plutôt que le bouton
O.fromPredicate((element: HTMLElement) => element.className === CLASS_EPINGLE),
O.flatMap((bouton: HTMLButtonElement) => bouton.getAttribute(ATTRIBUT_ID_ENSEMBLE_EPINGLE_BOITE)),
O.tap((id: string) => {
// Désactive l'Attribut actif si la cible est déjà active et retourne précocement
if (cible.hasAttribute(ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF)) {
beltPipe(
O.fromNullable(ENSEMBLES_EPINGLES_BOITES_TEXTE.get(id)),
O.tap(
A.forEach(element => {
element.removeAttribute(ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF);
}),
),
);
return;
}
// Désactive tous les Ensembles
beltPipe(
Array.from(ENSEMBLES_EPINGLES_BOITES_TEXTE.values()),
A.flat,
A.forEach(element => {
element.removeAttribute(ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF);
}),
);
// Active l'Attribut sur l'Ensemble
beltPipe(
O.fromNullable(ENSEMBLES_EPINGLES_BOITES_TEXTE.get(id)),
O.tap(A.forEach(element => element.toggleAttribute(ATTRIBUT_ENSEMBLE_EPINGLE_BOITE_ACTIF))),
);
}),
);
});
});

128
web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-accueil.ts Executable file
View file

@ -0,0 +1,128 @@
// Scripts pour la Page d'accueil
import { A, O, pipe } from "@mobily/ts-belt";
import {
ATTRIBUT_CACHÉ,
ATTRIBUT_HIDDEN,
DOM_CONTENEUR_ANIMATION,
DOM_CONTENEUR_STORYTELLING,
DOM_GARDE_FOU_JS,
DOM_IMAGES_STORYTELLING,
} from "./constantes/dom.ts";
import { mustGetEleInDocument, mustGetElesInDocument } from "./lib/dom.ts";
import { estEntreDeuxNombres } from "./lib/nombres.ts";
const E = {
/** Le bloc contenant l'animation. */
CONTENEUR_ANIMATION: mustGetEleInDocument<HTMLDivElement>(DOM_CONTENEUR_ANIMATION),
/** Le conteneur des images du storytelling. */
CONTENEUR_STORYTELLING: mustGetEleInDocument<HTMLElement>(".storytelling__conteneur"),
/** Les images du storytelling. */
IMAGES_STORYTELLING: mustGetElesInDocument<HTMLDivElement>(DOM_IMAGES_STORYTELLING),
/** Le bloc contenant le storytelling. */
STORYTELLING: mustGetEleInDocument<HTMLElement>(DOM_CONTENEUR_STORYTELLING),
};
/**
* Retire la classe garde-fou `.js` cachant les éléments nécessitant JavaScript pour s'afficher/fonctionner correctement.
*/
const retireClasseGardeFouJs = (): void => {
E.CONTENEUR_ANIMATION.classList.remove(DOM_GARDE_FOU_JS);
};
const initDefilementStorytelling = (): void => {
/** La hauteur d'une image du storytelling. */
let dimensionsImage = {
height: E.IMAGES_STORYTELLING.at(0)?.getBoundingClientRect().height ?? 0,
width: E.IMAGES_STORYTELLING.at(0)?.getBoundingClientRect().width ?? 0,
};
/** La position du défilement (en pixels) du Conteneur des images du storytelling. */
let positionDefilementConteneur = 0;
/**
* Bascule la visibilité d'une image en
* @param image
* @param estVisible
*/
const basculeVisibilitéImage = (image: HTMLDivElement, estVisible: boolean) => {
image.toggleAttribute(ATTRIBUT_CACHÉ, estVisible);
};
/**
* TODO
*/
const majDimensionsStorytelling = (): void => {
dimensionsImage = pipe(
A.getBy(E.IMAGES_STORYTELLING, (i: HTMLDivElement) => !i.hasAttribute(ATTRIBUT_CACHÉ)),
O.map((i: HTMLDivElement) => ({
height: i.getBoundingClientRect().height,
width: i.getBoundingClientRect().width,
})),
O.getWithDefault({ height: 0, width: 0 }),
);
// Adapte la longueur du conteneur d'animation à la nouvelle longueur d'une image.
E.CONTENEUR_ANIMATION.style.width = `${String(dimensionsImage.width)}px`;
// Adapte la hauteur du conteneur des images pour un défilement « seamless ».
const nouvelleHauteurMax = `${String(dimensionsImage.height * E.IMAGES_STORYTELLING.length + 61)}px`;
E.CONTENEUR_STORYTELLING.style.minHeight = nouvelleHauteurMax;
E.CONTENEUR_STORYTELLING.style.maxHeight = nouvelleHauteurMax;
};
/**
* TODO
*/
const majVisibilitéImagesStorytelling = (): void => {
// Met à jour la position du défilement dans le Conteneur.
positionDefilementConteneur = E.STORYTELLING.scrollTop;
// Met à jour l'attribut de visibilité des images en fonction du défilement.
E.IMAGES_STORYTELLING.forEach((image: HTMLDivElement, index: number): void => {
const debutYImage = dimensionsImage.height * index;
const finYImage = dimensionsImage.height * (index + 1);
basculeVisibilitéImage(image, !estEntreDeuxNombres(positionDefilementConteneur, debutYImage, finYImage));
});
};
// Initialise l'Observateur de Redimensionnement (ResizeObserver).
new ResizeObserver((): void => {
majDimensionsStorytelling();
majVisibilitéImagesStorytelling();
}).observe(E.STORYTELLING);
// Initialise la mise à jour des images au défilement sur le Conteneur.
E.STORYTELLING.addEventListener("scroll", (): void => {
majVisibilitéImagesStorytelling();
});
};
const initGestionAnimation = (): void => {
pipe(
A.at(E.IMAGES_STORYTELLING, 0),
O.tap(img => {
const options: IntersectionObserverInit = {
root: undefined,
rootMargin: "0px",
threshold: 0,
};
const callback = (entries: Array<IntersectionObserverEntry>) => {
A.forEach(entries, e => {
e.intersectionRatio >= 0.9 ?
E.CONTENEUR_ANIMATION.removeAttribute(ATTRIBUT_HIDDEN) :
E.CONTENEUR_ANIMATION.setAttribute(ATTRIBUT_HIDDEN, "");
});
};
new IntersectionObserver(callback, options).observe(img);
}),
);
};
document.addEventListener("DOMContentLoaded", (): void => {
retireClasseGardeFouJs();
initDefilementStorytelling();
initGestionAnimation();
});

310
web/app/themes/haiku-atelier-2024/views/a-propos.twig
View file

@ -3,172 +3,182 @@
{% import 'macros/images.twig' as images %}
{% block contenu %}
<main id="page-a-propos" aria-label="Scroll down to navigate through the pictures">
<main id="page-a-propos">
<div class="storytelling">
<div
aria-hidden="true" class="storytelling__conteneur"
inert
>
{# Animation #}
<div class="storytelling__animation no-js">
<svg
alt="" class="animation-conteneur"
height="90px" preserveAspectRatio="xMidYMin"
viewBox="0 0 1200 90" width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<svg
alt="Scroll down" class="animation-texte"
height="100%" width="100%"
y="50%"
>
<path
d="m0 0c600-90 600 90 1200 0" fill="transparent"
id="curve-1" transform="translate3d(0,0,0)"
/>
<div class="storytelling__conteneur">
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/about/haikuabout", 'A montage of many different pictures/drawings of jewelry and of someone working.', image_dimensions[0], image_dimensions[1], 'storytelling-montage') }}
{# TODO: Créer une fonction pour générer les images #}
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
<textPath id="text-path-1" xlink:href="#curve-1">
Scroll down
</textPath>
<animate
attributeName="startOffset" dur="5s"
fill="remove" from="-50%"
to="0%" repeatCount="indefinite"
xlink:href="#text-path-1"
/>
</text>
{# Épingles #}
<button
aria-label="First pin" class="epingle"
data-id-ensemble-epingle-boite="1" type="button"
>
<img
alt="" height="56"
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
width="82"
/>
</button>
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
<textPath id="text-path-2" xlink:href="#curve-1">
Scroll down
</textPath>
<animate
attributeName="startOffset" dur="5s"
fill="remove" from="0%"
to="50%" repeatCount="indefinite"
xlink:href="#text-path-2"
/>
</text>
<button
aria-label="Second pin" class="epingle"
data-id-ensemble-epingle-boite="2" type="button"
>
<img
alt="" height="56"
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
width="82"
/>
</button>
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
<textPath id="text-path-3" xlink:href="#curve-1">
Scroll down
</textPath>
<animate
attributeName="startOffset" dur="5s"
fill="remove" from="50%"
to="100%" repeatCount="indefinite"
xlink:href="#text-path-3"
/>
</text>
<button
aria-label="Third pin" class="epingle"
data-id-ensemble-epingle-boite="3" type="button"
>
<img
alt="" height="56"
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
width="82"
/>
</button>
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
<textPath id="text-path-4" xlink:href="#curve-1">
Scroll down
</textPath>
<animate
attributeName="startOffset" dur="5s"
fill="remove" from="100%"
to="150%" repeatCount="indefinite"
xlink:href="#text-path-4"
/>
</text>
</svg>
</svg>
<button
aria-label="Fourth pin" class="epingle"
data-id-ensemble-epingle-boite="4" type="button"
>
<img
alt="" height="56"
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
width="82"
/>
</button>
<button
aria-label="Fifth pin" class="epingle"
data-id-ensemble-epingle-boite="5" type="button"
>
<img
alt="" height="56"
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
width="82"
/>
</button>
<button
aria-label="Sixth pin" class="epingle"
data-id-ensemble-epingle-boite="6" type="button"
>
<img
alt="" height="56"
role="presentation" src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
width="82"
/>
</button>
{# Boîtes de texte #}
<div class="boite-texte" data-id-ensemble-epingle-boite="1">
<button class="boite-texte__bouton-fermeture" type="button">
<img
alt="An icon in form of a cross" height="20"
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
width="20"
/>
</button>
<p>
Haïkus are short japanese poems written in three lines to capture the beauty of small details in the everyday life.
</p>
<p>More than poetry, it’s a philosophy.</p>
</div>
{# Images #}
<div
class="storytelling__image" data-index="1"
tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll1", '', 903, 1080, 'image-scroll1') }}
<div class="boite-texte" data-id-ensemble-epingle-boite="2">
<button class="boite-texte__bouton-fermeture" type="button">
<img
alt="An icon in form of a cross" height="20"
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
width="20"
/>
</button>
<p>
Haiku Atelier creates minimalist and subtil jewelry with an edgy twist, trying to distillate some poetry through those small objects.
</p>
<p>
Handcrafted with care in sustainable materials, each pieces has its uniqueness and is made to last.
</p>
</div>
<div
class="storytelling__image" data-caché
data-index="2" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll2", '', 903, 1080, 'image-scroll2') }}
<div class="boite-texte" data-id-ensemble-epingle-boite="3">
<button class="boite-texte__bouton-fermeture" type="button">
<img
alt="An icon in form of a cross" height="20"
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
width="20"
/>
</button>
<p>
After learning the art of jewelry making for two years in Paris, Manon Designere launched the brand Haiku, gleaning into the Japanese minimalist aesthetic.
</p>
<p>
Now based in Brussels, she still makes everything by hand, pouring her soul into her work to share her vision of the world.
</p>
</div>
<div
class="storytelling__image" data-caché
data-index="3" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll3", '', 903, 1080, 'image-scroll3') }}
<div class="boite-texte" data-id-ensemble-epingle-boite="4">
<button class="boite-texte__bouton-fermeture" type="button">
<img
alt="An icon in form of a cross" height="20"
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
width="20"
/>
</button>
<p>Here you can see some of the tools used at the studio.</p>
<p>
From sketches to models, from soldering to polishing, the numerous steps behind each piece are what makes it so unique.
</p>
<p>
A touch of animism to value handcrafted objects, restrain mass production and lead toward slow life.
</p>
</div>
<div
class="storytelling__image" data-caché
data-index="4" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll4", '', 903, 1080, 'image-scroll4') }}
<div class="boite-texte" data-id-ensemble-epingle-boite="5">
<button class="boite-texte__bouton-fermeture" type="button">
<img
alt="An icon in form of a cross" height="20"
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
width="20"
/>
</button>
<p>
We pay a lot of attention choosing the materials we work on: all of the pieces are made in 80% recycled sterling silver.
</p>
<p>
We also choose to propose many designs in a mix of sterling silver and silver gilded parts to avoid relying too much on the gold plating process, which can be pollutant.
</p>
<p>
The packagings are also carefully selected, produced nearby, made in eco-friendly coton or paper. Our gift bags are even handmade in dead-stock fabrics.
</p>
</div>
<div
class="storytelling__image" data-caché
data-index="5" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll5", '', 903, 1080, 'image-scroll5') }}
</div>
<div class="boite-texte" data-id-ensemble-epingle-boite="6">
<button class="boite-texte__bouton-fermeture" type="button">
<img
alt="An icon in form of a cross" height="20"
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
width="20"
/>
</button>
<div
class="storytelling__image" data-caché
data-index="6" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll6", '', 903, 1080, 'image-scroll6') }}
</div>
<div
class="storytelling__image" data-caché
data-index="7" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll7", '', 903, 1080, 'image-scroll7') }}
</div>
<div
class="storytelling__image" data-caché
data-index="8" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll8", '', 903, 1080, 'image-scroll8') }}
</div>
<div
class="storytelling__image" data-caché
data-index="9" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll9", '', 903, 1080, 'image-scroll9') }}
</div>
<div
class="storytelling__image" data-caché
data-index="10" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll10", '', 903, 1080, 'image-scroll10') }}
</div>
<div
class="storytelling__image" data-caché
data-index="11" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll11", '', 903, 1080, 'image-scroll11') }}
</div>
<div
class="storytelling__image" data-caché
data-index="12" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll12", '', 903, 1080, 'image-scroll12') }}
</div>
<div
class="storytelling__image" data-caché
data-index="13" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll13", '', 903, 1080, 'image-scroll13') }}
<p>
We hope that those small objects will move you, as we are moved by the beauty hidden behind a ray of sunshine, a leaf falling from a branch, the smell of an old book, the song of birds before dawn...
</p>
<p>Haiku jewelry are like a bit of poetry to wear everywhere.</p>
</div>
</div>
</div>

188
web/app/themes/haiku-atelier-2024/views/accueil.twig
View file

@ -2,24 +2,174 @@
{% import 'macros/images.twig' as images %}
{% block contenu %}
<main id="page-accueil">
<video
autoplay disablepictureinpicture
id="intro-video" preload="auto"
loop muted
width="1280" height="720"
>
<source
media="(width >= 500px)" src="{{ site.theme.link }}/assets/video/intro-desktop.m4v"
type="video/mp4"
/>
<source src="{{ site.theme.link }}/assets/video/intro-phone.m4v" type="video/mp4" />
<source
media="(width >= 500px)" src="{{ site.theme.link }}/assets/video/intro-desktop.webm"
type="video/webm"
/>
<source src="{{ site.theme.link }}/assets/video/intro-phone.webm" type="video/webm" />
<p>Your device does not support videos.</p>
</video>
<main id="page-accueil" aria-label="Scroll down to navigate through the pictures">
<div class="storytelling">
<div
aria-hidden="true" class="storytelling__conteneur"
inert
>
{# Animation #}
<div class="storytelling__animation no-js">
<svg
alt="" class="animation-conteneur"
height="90px" preserveAspectRatio="xMidYMin"
viewBox="0 0 1200 90" width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<svg
alt="Scroll down" class="animation-texte"
height="100%" width="100%"
y="50%"
>
<path
d="m0 0c600-90 600 90 1200 0" fill="transparent"
id="curve-1" transform="translate3d(0,0,0)"
/>
{# TODO: Créer une fonction pour générer les images #}
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
<textPath id="text-path-1" xlink:href="#curve-1">
Scroll down
</textPath>
<animate
attributeName="startOffset" dur="5s"
fill="remove" from="-50%"
to="0%" repeatCount="indefinite"
xlink:href="#text-path-1"
/>
</text>
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
<textPath id="text-path-2" xlink:href="#curve-1">
Scroll down
</textPath>
<animate
attributeName="startOffset" dur="5s"
fill="remove" from="0%"
to="50%" repeatCount="indefinite"
xlink:href="#text-path-2"
/>
</text>
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
<textPath id="text-path-3" xlink:href="#curve-1">
Scroll down
</textPath>
<animate
attributeName="startOffset" dur="5s"
fill="remove" from="50%"
to="100%" repeatCount="indefinite"
xlink:href="#text-path-3"
/>
</text>
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
<textPath id="text-path-4" xlink:href="#curve-1">
Scroll down
</textPath>
<animate
attributeName="startOffset" dur="5s"
fill="remove" from="100%"
to="150%" repeatCount="indefinite"
xlink:href="#text-path-4"
/>
</text>
</svg>
</svg>
</div>
{# Images #}
<div
class="storytelling__image" data-index="1"
tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll1", '', 903, 1080, 'image-scroll1') }}
</div>
<div
class="storytelling__image" data-caché
data-index="2" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll2", '', 903, 1080, 'image-scroll2') }}
</div>
<div
class="storytelling__image" data-caché
data-index="3" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll3", '', 903, 1080, 'image-scroll3') }}
</div>
<div
class="storytelling__image" data-caché
data-index="4" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll4", '', 903, 1080, 'image-scroll4') }}
</div>
<div
class="storytelling__image" data-caché
data-index="5" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll5", '', 903, 1080, 'image-scroll5') }}
</div>
<div
class="storytelling__image" data-caché
data-index="6" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll6", '', 903, 1080, 'image-scroll6') }}
</div>
<div
class="storytelling__image" data-caché
data-index="7" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll7", '', 903, 1080, 'image-scroll7') }}
</div>
<div
class="storytelling__image" data-caché
data-index="8" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll8", '', 903, 1080, 'image-scroll8') }}
</div>
<div
class="storytelling__image" data-caché
data-index="9" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll9", '', 903, 1080, 'image-scroll9') }}
</div>
<div
class="storytelling__image" data-caché
data-index="10" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll10", '', 903, 1080, 'image-scroll10') }}
</div>
<div
class="storytelling__image" data-caché
data-index="11" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll11", '', 903, 1080, 'image-scroll11') }}
</div>
<div
class="storytelling__image" data-caché
data-index="12" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll12", '', 903, 1080, 'image-scroll12') }}
</div>
<div
class="storytelling__image" data-caché
data-index="13" tabindex="-1"
>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll13", '', 903, 1080, 'image-scroll13') }}
</div>
</div>
</div>
</main>
{% endblock contenu %}

BIN
web/app/uploads/2026/03/004A2361-300x300.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
web/app/uploads/2026/03/004A2361.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.9 MiB

BIN
web/app/uploads/2026/03/004A2408-300x300.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
web/app/uploads/2026/03/004A2408.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.8 MiB

BIN
web/app/uploads/2026/03/004A2430-300x300.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
web/app/uploads/2026/03/004A2430.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.9 MiB

BIN
web/app/uploads/2026/03/004A2444-300x300.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 27 KiB

BIN
web/app/uploads/2026/03/004A2444.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.6 MiB

BIN
web/app/uploads/2026/03/004A2458-300x300.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
web/app/uploads/2026/03/004A2458.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.6 MiB

BIN
web/app/uploads/2026/03/004A2460-300x300.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 20 KiB

BIN
web/app/uploads/2026/03/004A2460.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 827 KiB

BIN
web/app/uploads/2026/03/004A2464-300x300.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
web/app/uploads/2026/03/004A2464.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.6 MiB

BIN
web/app/uploads/2026/03/004A2472-300x300.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 21 KiB

BIN
web/app/uploads/2026/03/004A2472.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.5 MiB

BIN
web/app/uploads/2026/03/004A2576-300x300.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
web/app/uploads/2026/03/004A2576.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.5 MiB

BIN
web/app/uploads/2026/03/004A2592-300x300.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
web/app/uploads/2026/03/004A2592.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.9 MiB

BIN
web/app/uploads/2026/03/004A2598-300x300.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 20 KiB

BIN
web/app/uploads/2026/03/004A2598.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.7 MiB

BIN
web/app/uploads/2026/03/004A2605-300x300.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 21 KiB

BIN
web/app/uploads/2026/03/004A2605.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.6 MiB

BIN
web/app/uploads/2026/03/DSCF9656-300x300.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
web/app/uploads/2026/03/DSCF9656.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 988 KiB

BIN
web/app/uploads/2026/03/DSCF9660-300x300.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.4 KiB

BIN
web/app/uploads/2026/03/DSCF9660.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.3 MiB

BIN
web/app/uploads/2026/03/DSCF9673-300x300.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.6 KiB

BIN
web/app/uploads/2026/03/DSCF9673.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.4 MiB