diff --git a/.woodpecker/publish_instable.yaml b/.woodpecker/publish_instable.yaml index cac3657..6855692 100644 --- a/.woodpecker/publish_instable.yaml +++ b/.woodpecker/publish_instable.yaml @@ -8,7 +8,7 @@ steps: pull: true settings: auto_tag: true - cache: false + cache: true registry: git.gcch.fr repo: gcch/journal-media-vue username: diff --git a/.zed/settings.json b/.zed/settings.json index 51d1869..e93c832 100644 --- a/.zed/settings.json +++ b/.zed/settings.json @@ -7,6 +7,10 @@ "..." ], "languages": { + "CSS": { + "formatter": null, + "format_on_save": "off" + }, "Vue.js": { "code_actions_on_format": { "source.fixAll.eslint": true, diff --git a/bun.lock b/bun.lock index d7b6ecd..f2ed943 100644 --- a/bun.lock +++ b/bun.lock @@ -4,45 +4,45 @@ "": { "name": "journal-media", "dependencies": { - "@effect/platform": "^0.77.2", - "@effect/sql-drizzle": "^0.29.2", - "a11y-dialog": "^8.1.1", - "drizzle-orm": "^0.39.3", - "effect": "^3.13.2", - "pinia": "^3.0.1", - "sqlocal": "^0.14.0", - "vue": "^3.5.13", - "vue-router": "^4.5.0", + "@effect/platform": "latest", + "@effect/sql-drizzle": "latest", + "a11y-dialog": "latest", + "drizzle-orm": "latest", + "effect": "latest", + "pinia": "latest", + "sqlocal": "latest", + "vue": "latest", + "vue-router": "latest", }, "devDependencies": { - "@cspell/dict-fr-fr": "^2.2.5", - "@eslint/css": "^0.4.0", - "@types/bun": "^1.2.3", - "@vitejs/plugin-vue": "^5.2.1", - "@vue/eslint-config-typescript": "^14.4.0", - "@vue/typescript-plugin": "^2.2.4", - "browserslist": "^4.24.4", - "cspell": "^8.17.5", - "drizzle-kit": "^0.30.4", - "eslint": "^9.21.0", - "eslint-plugin-perfectionist": "^4.9.0", - "eslint-plugin-vue": "^9.32.0", - "globals": "^16.0.0", - "jiti": "^2.4.2", - "knip": "^5.45.0", - "lightningcss": "^1.29.1", - "prettier": "^3.5.2", - "prettier-plugin-pkg": "^0.18.1", - "prettier-plugin-sh": "^0.15.0", - "stylelint": "^16.14.1", - "stylelint-config-clean-order": "^7.0.0", - "stylelint-config-standard": "^37.0.0", - "stylelint-declaration-block-no-ignored-properties": "^2.8.0", - "stylelint-plugin-logical-css": "^1.2.1", - "tsr": "^1.3.4", - "typescript": "^5.7.3", - "vite": "^6.2.0", - "vue-tsc": "^2.2.4", + "@cspell/dict-fr-fr": "latest", + "@eslint/css": "latest", + "@types/bun": "latest", + "@vitejs/plugin-vue": "latest", + "@vue/eslint-config-typescript": "latest", + "@vue/typescript-plugin": "latest", + "browserslist": "latest", + "cspell": "latest", + "drizzle-kit": "latest", + "eslint": "latest", + "eslint-plugin-perfectionist": "latest", + "eslint-plugin-vue": "latest", + "globals": "latest", + "jiti": "latest", + "knip": "latest", + "lightningcss": "latest", + "prettier": "latest", + "prettier-plugin-pkg": "latest", + "prettier-plugin-sh": "latest", + "stylelint": "latest", + "stylelint-config-clean-order": "latest", + "stylelint-config-standard": "latest", + "stylelint-declaration-block-no-ignored-properties": "latest", + "stylelint-plugin-logical-css": "latest", + "tsr": "latest", + "typescript": "latest", + "vite": "latest", + "vue-tsc": "latest", }, }, }, @@ -319,6 +319,8 @@ "@opentelemetry/semantic-conventions": ["@opentelemetry/semantic-conventions@1.30.0", "", {}, "sha512-4VlGgo32k2EQ2wcCY3vEU28A0O13aOtHz3Xt2/2U5FAh9EfhD6t6DqL5Z6yAnRCntbTFDU4YfbpyzSlHNWycPw=="], + "@petamoriken/float16": ["@petamoriken/float16@3.9.1", "", {}, "sha512-j+ejhYwY6PeB+v1kn7lZFACUIG97u90WxMuGosILFsl9d4Ovi0sjk0GlPfoEcx+FzvXZDAfioD+NGnnPamXgMA=="], + "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.34.8", "", { "os": "android", "cpu": "arm" }, "sha512-q217OSE8DTp8AFHuNHXo0Y86e1wtlfVrXiAlwkIvGRQv9zbc6mE3sjIVfwI8sYUyNxwOg0j/Vm1RKM04JcWLJw=="], "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.34.8", "", { "os": "android", "cpu": "arm64" }, "sha512-Gigjz7mNWaOL9wCggvoK3jEIUUbGul656opstjaUSGC3eT0BM7PofdAJaBfPFWWkXNVAXbaQtC99OCg4sJv70Q=="], @@ -363,7 +365,7 @@ "@standard-schema/spec": ["@standard-schema/spec@1.0.0", "", {}, "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA=="], - "@types/bun": ["@types/bun@1.2.3", "", { "dependencies": { "bun-types": "1.2.3" } }, "sha512-054h79ipETRfjtsCW9qJK8Ipof67Pw9bodFWmkfkaUaRiIQ1dIV2VTlheshlBx3mpKr0KeK8VqnMMCtgN9rQtw=="], + "@types/bun": ["@types/bun@1.2.4", "", { "dependencies": { "bun-types": "1.2.4" } }, "sha512-QtuV5OMR8/rdKJs213iwXDpfVvnskPXY/S0ZiFbsTjQZycuqPbMW8Gf/XhLfwE5njW8sxI2WjISURXPlHypMFA=="], "@types/estree": ["@types/estree@1.0.6", "", {}, "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="], @@ -475,7 +477,7 @@ "buffer-from": ["buffer-from@1.1.2", "", {}, "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="], - "bun-types": ["bun-types@1.2.3", "", { "dependencies": { "@types/node": "*", "@types/ws": "~8.5.10" } }, "sha512-P7AeyTseLKAvgaZqQrvp3RqFM3yN9PlcLuSTe7SoJOfZkER73mLdT2vEQi8U64S1YvM/ldcNiQjn0Sn7H9lGgg=="], + "bun-types": ["bun-types@1.2.4", "", { "dependencies": { "@types/node": "*", "@types/ws": "~8.5.10" } }, "sha512-nDPymR207ZZEoWD4AavvEaa/KZe/qlrbMSchqpQwovPZCKc7pwMoENjEtHgMKaAjJhy+x6vfqSBA1QU3bJgs0Q=="], "cacheable": ["cacheable@1.8.8", "", { "dependencies": { "hookified": "^1.7.0", "keyv": "^5.2.3" } }, "sha512-OE1/jlarWxROUIpd0qGBSKFLkNsotY8pt4GeiVErUYh/NUeTNrT+SBksUgllQv4m6a0W/VZsLuiHb88maavqEw=="], @@ -553,9 +555,9 @@ "dir-glob": ["dir-glob@3.0.1", "", { "dependencies": { "path-type": "^4.0.0" } }, "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA=="], - "drizzle-kit": ["drizzle-kit@0.30.4", "", { "dependencies": { "@drizzle-team/brocli": "^0.10.2", "@esbuild-kit/esm-loader": "^2.5.5", "esbuild": "^0.19.7", "esbuild-register": "^3.5.0" }, "bin": { "drizzle-kit": "bin.cjs" } }, "sha512-B2oJN5UkvwwNHscPWXDG5KqAixu7AUzZ3qbe++KU9SsQ+cZWR4DXEPYcvWplyFAno0dhRJECNEhNxiDmFaPGyQ=="], + "drizzle-kit": ["drizzle-kit@0.30.5", "", { "dependencies": { "@drizzle-team/brocli": "^0.10.2", "@esbuild-kit/esm-loader": "^2.5.5", "esbuild": "^0.19.7", "esbuild-register": "^3.5.0", "gel": "^2.0.0" }, "bin": { "drizzle-kit": "bin.cjs" } }, "sha512-l6dMSE100u7sDaTbLczibrQZjA35jLsHNqIV+jmhNVO3O8jzM6kywMOmV9uOz9ZVSCMPQhAZEFjL/qDPVrqpUA=="], - "drizzle-orm": ["drizzle-orm@0.39.3", "", { "peerDependencies": { "@aws-sdk/client-rds-data": ">=3", "@cloudflare/workers-types": ">=4", "@electric-sql/pglite": ">=0.2.0", "@libsql/client": ">=0.10.0", "@libsql/client-wasm": ">=0.10.0", "@neondatabase/serverless": ">=0.10.0", "@op-engineering/op-sqlite": ">=2", "@opentelemetry/api": "^1.4.1", "@planetscale/database": ">=1", "@prisma/client": "*", "@tidbcloud/serverless": "*", "@types/better-sqlite3": "*", "@types/pg": "*", "@types/sql.js": "*", "@vercel/postgres": ">=0.8.0", "@xata.io/client": "*", "better-sqlite3": ">=7", "bun-types": "*", "expo-sqlite": ">=14.0.0", "knex": "*", "kysely": "*", "mysql2": ">=2", "pg": ">=8", "postgres": ">=3", "sql.js": ">=1", "sqlite3": ">=5" }, "optionalPeers": ["@aws-sdk/client-rds-data", "@cloudflare/workers-types", "@electric-sql/pglite", "@libsql/client", "@libsql/client-wasm", "@neondatabase/serverless", "@op-engineering/op-sqlite", "@opentelemetry/api", "@planetscale/database", "@prisma/client", "@tidbcloud/serverless", "@types/better-sqlite3", "@types/pg", "@types/sql.js", "@vercel/postgres", "@xata.io/client", "better-sqlite3", "bun-types", "expo-sqlite", "knex", "kysely", "mysql2", "pg", "postgres", "sql.js", "sqlite3"] }, "sha512-EZ8ZpYvDIvKU9C56JYLOmUskazhad+uXZCTCRN4OnRMsL+xAJ05dv1eCpAG5xzhsm1hqiuC5kAZUCS924u2DTw=="], + "drizzle-orm": ["drizzle-orm@0.40.0", "", { "peerDependencies": { "@aws-sdk/client-rds-data": ">=3", "@cloudflare/workers-types": ">=4", "@electric-sql/pglite": ">=0.2.0", "@libsql/client": ">=0.10.0", "@libsql/client-wasm": ">=0.10.0", "@neondatabase/serverless": ">=0.10.0", "@op-engineering/op-sqlite": ">=2", "@opentelemetry/api": "^1.4.1", "@planetscale/database": ">=1", "@prisma/client": "*", "@tidbcloud/serverless": "*", "@types/better-sqlite3": "*", "@types/pg": "*", "@types/sql.js": "*", "@vercel/postgres": ">=0.8.0", "@xata.io/client": "*", "better-sqlite3": ">=7", "bun-types": "*", "expo-sqlite": ">=14.0.0", "gel": ">=2", "knex": "*", "kysely": "*", "mysql2": ">=2", "pg": ">=8", "postgres": ">=3", "sql.js": ">=1", "sqlite3": ">=5" }, "optionalPeers": ["@aws-sdk/client-rds-data", "@cloudflare/workers-types", "@electric-sql/pglite", "@libsql/client", "@libsql/client-wasm", "@neondatabase/serverless", "@op-engineering/op-sqlite", "@opentelemetry/api", "@planetscale/database", "@prisma/client", "@tidbcloud/serverless", "@types/better-sqlite3", "@types/pg", "@types/sql.js", "@vercel/postgres", "@xata.io/client", "better-sqlite3", "bun-types", "expo-sqlite", "gel", "knex", "kysely", "mysql2", "pg", "postgres", "sql.js", "sqlite3"] }, "sha512-7ptk/HQiMSrEZHnAsSlBESXWj52VwgMmyTEfoNmpNN2ZXpcz13LwHfXTIghsAEud7Z5UJhDOp8U07ujcqme7wg=="], "easy-table": ["easy-table@1.2.0", "", { "dependencies": { "ansi-regex": "^5.0.1" }, "optionalDependencies": { "wcwidth": "^1.0.1" } }, "sha512-OFzVOv03YpvtcWGe5AayU5G2hgybsg3iqA6drU8UaoZyB9jLGMTrz9+asnLp/E+6qPh88yEI1gvyZFZ41dmgww=="], @@ -645,6 +647,8 @@ "gc-hook": ["gc-hook@0.3.1", "", {}, "sha512-E5M+O/h2o7eZzGhzRZGex6hbB3k4NWqO0eA+OzLRLXxhdbYPajZnynPwAtphnh+cRHPwsj5Z80dqZlfI4eK55A=="], + "gel": ["gel@2.0.0", "", { "dependencies": { "@petamoriken/float16": "^3.8.7", "debug": "^4.3.4", "env-paths": "^3.0.0", "semver": "^7.6.2", "shell-quote": "^1.8.1", "which": "^4.0.0" }, "bin": { "gel": "dist/cli.mjs" } }, "sha512-Oq3Fjay71s00xzDc0BF/mpcLmnA+uRqMEJK8p5K4PaZjUEsxaeo+kR9OHBVAf289/qPd+0OcLOLUN0UhqiUCog=="], + "gensequence": ["gensequence@7.0.0", "", {}, "sha512-47Frx13aZh01afHJTB3zTtKIlFI6vWY+MYCN9Qpew6i52rfKjnhCF/l1YlC8UmEMvvntZZ6z4PiCcmyuedR2aQ=="], "get-stdin": ["get-stdin@9.0.0", "", {}, "sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA=="], @@ -709,7 +713,7 @@ "is-what": ["is-what@4.1.16", "", {}, "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A=="], - "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="], + "isexe": ["isexe@3.1.1", "", {}, "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ=="], "jiti": ["jiti@2.4.2", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A=="], @@ -897,6 +901,8 @@ "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="], + "shell-quote": ["shell-quote@1.8.2", "", {}, "sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA=="], + "signal-exit": ["signal-exit@4.1.0", "", {}, "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="], "slash": ["slash@3.0.0", "", {}, "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="], @@ -993,7 +999,7 @@ "wcwidth": ["wcwidth@1.0.1", "", { "dependencies": { "defaults": "^1.0.3" } }, "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg=="], - "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="], + "which": ["which@4.0.0", "", { "dependencies": { "isexe": "^3.1.1" }, "bin": { "node-which": "bin/which.js" } }, "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg=="], "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="], @@ -1043,6 +1049,8 @@ "cosmiconfig/env-paths": ["env-paths@2.2.1", "", {}, "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A=="], + "cross-spawn/which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="], + "eslint/@eslint/core": ["@eslint/core@0.12.0", "", { "dependencies": { "@types/json-schema": "^7.0.15" } }, "sha512-cmrR6pytBuSMTaBweKoGMwu3EiHiEC+DoyupPmlZ0HxBJBtIxwe+j/E4XPIKNx+Q74c8lXKPwYawBf5glsTkHg=="], "eslint/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="], @@ -1133,10 +1141,14 @@ "@vue/language-core/minimatch/brace-expansion": ["brace-expansion@2.0.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA=="], + "cross-spawn/which/isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="], + "eslint/file-entry-cache/flat-cache": ["flat-cache@4.0.1", "", { "dependencies": { "flatted": "^3.2.9", "keyv": "^4.5.4" } }, "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw=="], "fast-glob/@nodelib/fs.walk/@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="], + "global-prefix/which/isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="], + "stylelint/file-entry-cache/flat-cache": ["flat-cache@6.1.6", "", { "dependencies": { "cacheable": "^1.8.8", "flatted": "^3.3.2", "hookified": "^1.7.0" } }, "sha512-F+CKgSwp0pzLx67u+Zy1aCueVWFAHWbXepvXlZ+bWVTaASbm5SyCnSJ80Fp1ePEmS57wU+Bf6cx6525qtMZ4lQ=="], "table/ajv/json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="], diff --git a/package.json b/package.json index 172a113..3f8b915 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "@effect/platform": "^0.77.2", "@effect/sql-drizzle": "^0.29.2", "a11y-dialog": "^8.1.1", - "drizzle-orm": "^0.39.3", + "drizzle-orm": "^0.40.0", "effect": "^3.13.2", "pinia": "^3.0.1", "sqlocal": "^0.14.0", @@ -17,13 +17,13 @@ "devDependencies": { "@cspell/dict-fr-fr": "^2.2.5", "@eslint/css": "^0.4.0", - "@types/bun": "^1.2.3", + "@types/bun": "^1.2.4", "@vitejs/plugin-vue": "^5.2.1", "@vue/eslint-config-typescript": "^14.4.0", "@vue/typescript-plugin": "^2.2.4", "browserslist": "^4.24.4", "cspell": "^8.17.5", - "drizzle-kit": "^0.30.4", + "drizzle-kit": "^0.30.5", "eslint": "^9.21.0", "eslint-plugin-perfectionist": "^4.9.0", "eslint-plugin-vue": "^9.32.0", diff --git a/src/components/NavigationMenu.vue b/src/components/NavigationMenu.vue index 971be3b..c14f9ed 100644 --- a/src/components/NavigationMenu.vue +++ b/src/components/NavigationMenu.vue @@ -12,6 +12,3 @@ - - diff --git a/src/styles/base/base.css b/src/styles/base/base.css index 9c1f783..e7a9f94 100755 --- a/src/styles/base/base.css +++ b/src/styles/base/base.css @@ -1,23 +1,12 @@ -/* - * 1. Utilise un meilleur modèle de boîte. - * 2. Fait que seul font-size puisse influencer la taille du texte. - * 3. Applique les schémas de couleurs. - * 4. Utilise une indentation plus étroite. - * 5. Permet l'usage de propriétés intrinsèques comme auto ou fit-content dans les animations. - */ html { - box-sizing: border-box; /* 1 */ - tab-size: 2; /* 4 */ - color-scheme: dark light; /* 3 */ - interpolate-size: allow-keywords; /* 6 */ - /* stylelint-disable */ - -moz-text-size-adjust: none; /* 2 */ - -webkit-text-size-adjust: none; /* 2 */ - text-size-adjust: none; /* 2 */ + box-sizing: border-box; + tab-size: 2; + color-scheme: dark light; + interpolate-size: allow-keywords; + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; block-size: 100%; - /* stylelint-enable */ - - /* scrollbar-gutter: stable; */ } body { @@ -32,46 +21,24 @@ body { line-height: var(--line-height-comfortable); text-decoration-skip-ink: auto; text-rendering: geometricprecision; + block-size: 100%; } -/* - * 1. Hérite le modèle de boîte de l'élément racine. - * 2. Désactive toute marge pour partir de bases saines. - * 3. Hérite toute propriété typographique et de couleur pour éviter des redéfinitions. - */ *, *::before, *::after { - box-sizing: inherit; /* 1 */ - margin: 0; /* 2 */ - padding: 0; /* 2 */ - font: inherit; /* 3 */ - font-feature-settings: inherit; /* 3 */ - font-variation-settings: inherit; /* 3 */ - color: inherit; /* 3 */ - letter-spacing: inherit; /* 3 */ - word-spacing: inherit; /* 3 */ -} - -/* Utilise une couleur particulière pour l'arrière-plan des éléments sélectionnés avec le curseur. */ -*::selection { - color: var(--color-secondary); - background: var(--color-primary); -} - -/* TODO: Prendre en compte a11y-dialog */ - -/* Empêche le défilement de la page quand une modale est ouverte. */ -:where(html:has(dialog:modal[open])) { - overflow: clip; -} - -/* Retire les bordures et applique un modèle d'arrière-plan plus sain. */ -*:where(:not(progress, meter)) { + box-sizing: inherit; border: 0 solid transparent; background-repeat: no-repeat; background-origin: border-box; + margin: 0; + padding: 0; + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + color: inherit; + letter-spacing: inherit; + word-spacing: inherit; } -/* Classe pour cacher visuellement tout en restant accessible par les lecteurs d'écran. */ :where(.visually-hidden:not(:focus, :active, :focus-within)) { position: absolute; overflow: hidden; @@ -81,17 +48,14 @@ body { clip-path: inset(50%); } -/* Cache les éléments cachés. */ :where([hidden]) { display: none; } -/* Affiche un curseur « Désactivé » pour les éléments désactivés. */ :where([disabled]) { cursor: not-allowed; } -/* Applique des contours de focus visibles. */ :where(:focus-visible) { outline: currentcolor solid 0.2rem; outline-offset: 0.2rem; @@ -101,12 +65,10 @@ body { scroll-margin-block: 8vh; } -/* Active une transition de page simple. */ @view-transition { navigation: auto; } -/* Désactive animations et transitions pour les Utilisateurs le demandant explicitement. */ @media (prefers-reduced-motion) { *, *::before, *::after { scroll-behavior: auto !important; diff --git a/src/styles/base/elements.css b/src/styles/base/elements.css index 4779884..6afa2aa 100644 --- a/src/styles/base/elements.css +++ b/src/styles/base/elements.css @@ -1,30 +1,11 @@ -/* Réinitialise l'apparence d'éléments interactifs. */ :where(button, fieldset, input, select, legend, textarea) { appearance: none; } -/* Désactive le comportement étrange des au sein de
. */ -:where(fieldset > legend) { - float: left; - inline-size: 100%; -} - -/* Hauteur de ligne plus étroite pour les éléments interactifs. */ :where(button, fieldset, input, label, select, textarea) { line-height: var(--line-height-compact); } -:where(textarea) { - resize: vertical; -} - -@supports (resize: block) { - :where(textarea) { - resize: block; - } -} - -/* Curseur de main pour les éléments interactifs cliquables. */ :where(button, input, label, select) { cursor: pointer; } @@ -42,18 +23,24 @@ } } -/* Évite le dépassement des textes. */ :where(p, h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; } :where(h1, h2, h3, h4, h5, h6) { - inline-size: fit-content; + display: inline-block; + inline-size: auto; + + @supports (inline-size: fit-content) { + & { + inline-size: fit-content; + } + } } -/* Les médias doivent occuper toute la longueur disponible au sein de leur propre bloc. */ -:where(img, picture, video, canvas, svg) { +:where(img, picture, video, svg) { display: block; + inline-size: auto; max-inline-size: 100%; block-size: auto; } @@ -62,50 +49,7 @@ list-style: none; } -:where(.fields) { - padding: var(--s-4); -} - -:where(input[type="text"], input[type="number"]) { - padding: var(--s-4); -} - -:where(input[type="radio"]) { - position: relative; - aspect-ratio: 1/1; - inline-size: var(--s-1); - block-size: var(--s-1); - border: 1px solid var(--color-primary); - border-radius: 50%; - background: var(--color-secondary); - - &::after { - content: ""; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - inline-size: var(--s-2); - block-size: var(--s-2); - border-radius: inherit; - opacity: 0; - background: var(--color-primary); - } - - + label { - padding-left: var(--s-2); - } -} - -:where(input[type="radio"]:checked) { - &::after { - opacity: 1; - } -} - -:where(fieldset > legend) { - margin-block-end: var(--s0); -} +/* Formulaires */ /* * Empêche les marqueurs de listes de modifier la hauteur de ligne sur Firefox. @@ -114,3 +58,22 @@ ::marker { line-height: 0; } + +:where(input[type="text"], input[type="number"]) { + min-inline-size: initial; +} + +:where(textarea) { + resize: vertical; + + @supports (resize: block) { + & { + resize: block; + } + } +} + +:where(fieldset > legend) { + float: left; + inline-size: 100%; +} diff --git a/src/styles/base/variables.css b/src/styles/base/variables.css index bf9ca5a..70c7789 100755 --- a/src/styles/base/variables.css +++ b/src/styles/base/variables.css @@ -11,12 +11,14 @@ --color-tertiary: dimgrey; --color-quartary: #be2727; - /* Typographie */ - /* Hauteurs de ligne */ --line-height-comfortable: 1.4; --line-height-compact: 1.1; + /* Espacements de lettres */ + --letter-spacing-small: 1px; + --letter-spacing-medium: 1.5px; + /* Échelles */ --ratio: 1.4; --s-5: calc(var(--s-4) / var(--ratio)); diff --git a/src/styles/components/imposter-box.css b/src/styles/components/imposter-box.css index 970958a..87654c7 100644 --- a/src/styles/components/imposter-box.css +++ b/src/styles/components/imposter-box.css @@ -1,43 +1,47 @@ .dialog { - position: fixed; /* 1 */ - z-index: 2; /* 1 */ - inset: 0; /* 1 */ - display: flex; /* 2 */ + position: fixed; + z-index: 2; + inset: 0; + display: flex; margin: 0; background: var(--bg25-secondary); &[aria-hidden="true"] { - display: none; /* 1 */ + display: none; } -} -.dialog-content { - position: relative; /* 2 */ - min-inline-size: 40ch; - max-inline-size: 80ch; - margin: auto; /* 1 */ - padding: initial; - border: 1px solid var(--color-primary); - background-color: var(--color-secondary); - box-shadow: 0.5rem 0.5rem 0 0 var(--color-primary); + .dialog-content { + position: relative; + margin: auto; + border: 1px solid var(--color-primary); + background-color: var(--color-secondary); + box-shadow: 0.5rem 0.5rem 0 0 var(--color-primary); - header { - overflow: hidden; - display: flex; - flex-flow: row nowrap; - align-items: center; - justify-content: space-between; - border-block-end: 1px solid var(--color-primary); + header { + overflow: hidden; + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: space-between; + border-block-end: 1px solid var(--color-primary); - h2 { - padding-inline: var(--s-1); - font-size: var(--s1); + h2 { + padding-inline: var(--s-1); + font-size: var(--s1); + } + + button { + padding: var(--s-1); + font-family: Banquise, monospace; + font-weight: 500; + } } - button { - padding: var(--s-1); - font-family: Banquise, monospace; - font-weight: 500; + main { + display: flex; + flex-flow: column nowrap; + align-items: start; + padding: var(--s0); } } } diff --git a/src/styles/components/navigation-menu.css b/src/styles/components/navigation-menu.css deleted file mode 100644 index 3705dfa..0000000 --- a/src/styles/components/navigation-menu.css +++ /dev/null @@ -1,3 +0,0 @@ -[aria-current] { - font-weight: 125; -} diff --git a/src/styles/layouts/box.css b/src/styles/layouts/box.css index 53ac50f..fe343df 100755 --- a/src/styles/layouts/box.css +++ b/src/styles/layouts/box.css @@ -1,17 +1,5 @@ -/* - * 1. Affiche une bordure pour les thèmes à haut contraste sans augmenter la taille de la boîte. - */ .box { padding: var(--s0, 1rem); - background-color: var(--color-secondary, #fff); outline: 0.125rem solid transparent; /* 1 */ outline-offset: -0.125rem; /* 1 */ - - /* border: 1px solid var(--color-primary); */ -} - -/* Inverse les couleurs de la boîte. */ -.box.invert { - color: var(--color-secondary, #fff); - background-color: var(--color-primary, #000); } diff --git a/src/styles/layouts/center.css b/src/styles/layouts/center.css index 2722f9a..badf2ba 100755 --- a/src/styles/layouts/center.css +++ b/src/styles/layouts/center.css @@ -1,14 +1,9 @@ -/* - * 1. Utilise un modèle de boîte excluant les marges internes du calcul de la longueur. - * 2. Centre l'Élément avec des marges externes automatiques en ligne et une longueur maximale. - * 3. Assure que des espaces latéraux sont présents. - */ .center { display: flex; flex-flow: column nowrap; align-items: center; - box-sizing: content-box; /* 1 */ - max-inline-size: var(--max-width, 80rem); /* 2 */ - margin-inline: auto; /* 2 */ - padding-inline: var(--s0, 1rem) var(--s0, 1rem); /* 3 */ + box-sizing: content-box; + max-inline-size: var(--layout-center-max-width); + margin-inline: auto; + padding-inline: var(--layout-center-inline-padding) var(--layout-center-inline-padding); } diff --git a/src/styles/layouts/cluster.css b/src/styles/layouts/cluster.css index 6ea3b7f..c5e7e81 100644 --- a/src/styles/layouts/cluster.css +++ b/src/styles/layouts/cluster.css @@ -1,8 +1,6 @@ .cluster { display: flex; flex-flow: row wrap; - gap: var(--s0, 1rem); + gap: var(--layout-cluster-gap); align-items: center; - - /* justify-content: center; */ } diff --git a/src/styles/layouts/sidebar.css b/src/styles/layouts/sidebar.css index 0dbc249..5979f9c 100644 --- a/src/styles/layouts/sidebar.css +++ b/src/styles/layouts/sidebar.css @@ -1,19 +1,17 @@ .with-sidebar { - --gutter: var(--s0); - display: flex; flex-flow: row wrap; - gap: var(--gutter, var(--s0)); + gap: var(--layout-sidebar-gap); align-content: start; } .with-sidebar > :first-child { flex-basis: 0; flex-grow: 999; - min-inline-size: 65%; + min-inline-size: var(--layout-sidebar-first-child-min-inline-size); } .with-sidebar > :last-child { - flex-basis: 15ch; + flex-basis: var(--layout-sidebar-last-child-basis); flex-grow: 1; } diff --git a/src/styles/layouts/stack.css b/src/styles/layouts/stack.css index 85e4c0c..95edea8 100755 --- a/src/styles/layouts/stack.css +++ b/src/styles/layouts/stack.css @@ -1,6 +1,4 @@ .stack { - --space: var(--s0, 1rem); - display: flex; flex-flow: column nowrap; justify-content: flex-start; @@ -11,7 +9,7 @@ } .stack > * + * { - margin-block-start: var(--space); + margin-block-start: var(--layout-stack-margin-between-children); } .stack:only-child { diff --git a/src/styles/themes/default.css b/src/styles/themes/default.css index 271aebc..f8a2fec 100644 --- a/src/styles/themes/default.css +++ b/src/styles/themes/default.css @@ -1,10 +1,37 @@ +@import url("./default/animations.css"); @import url("./default/buttons.css"); +@import url("./default/forms.css"); @import url("./default/headings.css"); +:root { + --brkly-font-weight-regular: 100; + --brkly-font-weight-semibold: 120; + --banquise-font-weight: 400; + + --root-background-color: var(--color-secondary); + --root-text-color: var(--color-primary); + --root-font-weight: var(--brkly-font-weight-regular); + + --layout-center-max-width: 80rem; + --layout-center-inline-padding: var(--s0); + --layout-cluster-gap: var(--s0); + --layout-sidebar-gap: var(--s0); + --layout-sidebar-first-child-min-inline-size: 65%; + --layout-sidebar-last-child-basis: 15rem; + --layout-stack-margin-between-children: var(--s0); +} + body { font-family: BRKLY, sans-serif; - font-weight: 100; - background: var(--color-secondary); + color: var(--root-text-color); + font-weight: var(--root-font-weight); + background-color: var(--root-background-color); +} + +/* Pseudo-éléments et pseudos-sélecteurs */ +*::selection { + color: var(--root-background-color); + background-color: var(--root-text-color); } *:focus-visible { @@ -12,20 +39,16 @@ body { } .invert { - font-weight: 120; - color: var(--color-secondary); - background-color: var(--color-primary); + font-weight: var(--brkly-font-weight-semibold); + color: var(--root-background-color); + background-color: var(--root-text-color); &::selection { - color: var(--color-primary); - background-color: var(--color-secondary); + color: var(--root-text-color); + background-color: var(--root-background-color); } } -h1 { - font-family: Banquise, monospace; -} - .container { --max-width: 100%; --space: var(--s1); @@ -52,23 +75,3 @@ main { #last-watched-media { --space: var(--s2); } - -:is(input[type="text"], input[type="number"]) { - border: 1px solid var(--color-primary); -} - -@keyframes fade-in { - 100% { - opacity: 1; - } -} - -@keyframes flicker { - 0%, 49% { - opacity: 0; - } - - 50%, 100% { - opacity: 1; - } -} diff --git a/src/styles/themes/default/animations.css b/src/styles/themes/default/animations.css new file mode 100644 index 0000000..be0e837 --- /dev/null +++ b/src/styles/themes/default/animations.css @@ -0,0 +1,15 @@ +@keyframes fade-in { + 100% { + opacity: 1; + } +} + +@keyframes flicker { + 0%, 49% { + opacity: 0; + } + + 50%, 100% { + opacity: 1; + } +} diff --git a/src/styles/themes/default/buttons.css b/src/styles/themes/default/buttons.css index 9e0225c..6205964 100755 --- a/src/styles/themes/default/buttons.css +++ b/src/styles/themes/default/buttons.css @@ -1,27 +1,27 @@ button { - --button-background-color: var(--color-secondary); - --button-border-color: var(--color-primary); + --button-background-color: var(--root-background-color); + --button-border-color: var(--root-text-color); --button-font-weight: 100; --button-padding: var(--s-2); - --button-text-color: var(--color-primary); + --button-text-color: var(--root-text-color); padding: var(--button-padding); border: 1px solid var(--button-border-color); font-weight: var(--button-font-weight); color: var(--button-text-color); background-color: var(--button-background-color); - box-shadow: 4px 4px 0 0 var(--color-primary); + box-shadow: 4px 4px 0 0 var(--root-text-color); &:hover { - --button-background-color: var(--color-primary); - --button-border-color: var(--color-secondary); - --button-font-weight: 120; - --button-text-color: var(--color-secondary); + --button-background-color: var(--root-text-color); + --button-border-color: var(--root-background-color); + --button-font-weight: var(--brkly-font-weight-semibold); + --button-text-color: var(--root-background-color); } &:active { transform: translateX(2px) translateY(2px); - box-shadow: 1px 1px 0 0 var(--color-primary); + box-shadow: 1px 1px 0 0 var(--root-text-color); } &:focus-visible { @@ -30,11 +30,11 @@ button { /* Inversion des couleurs. */ &.invert { - --button-background-color: var(--color-primary); - --button-border-color: var(--color-secondary); - --button-text-color: var(--color-secondary); + --button-background-color: var(--root-text-color); + --button-border-color: var(--root-background-color); + --button-text-color: var(--root-background-color); - outline-color: var(--color-secondary); + outline-color: var(--root-background-color); } /* TODO: Déplacer dans un Composant. */ @@ -44,7 +44,7 @@ button { border: initial; &:hover { - color: var(--color-primary); + color: var(--root-text-color); background: var(--bg75-secondary); } @@ -63,7 +63,7 @@ button { outline-offset: initial; &:hover { - --button-border-color: var(--color-primary); + --button-border-color: var(--root-text-color); } &:focus-visible { @@ -72,8 +72,8 @@ button { &:active { transform: initial; - border: 1px solid var(--color-primary); - outline: 1px solid var(--color-secondary); + border: 1px solid var(--root-text-color); + outline: 1px solid var(--root-background-color); outline-offset: -0.1rem; } } diff --git a/src/styles/themes/default/forms.css b/src/styles/themes/default/forms.css new file mode 100644 index 0000000..8f04762 --- /dev/null +++ b/src/styles/themes/default/forms.css @@ -0,0 +1,57 @@ +:root { + --fields-padding: var(--s-4); + --fieldset-legend-spacing: var(--s0); + --input-border: 1px solid var(--root-text-color); + --radio-marker-size: var(--s-2); + --radio-marker-background-color: var(--root-text-color); + --radio-background-color: var(--root-background-color); + --radio-label-spacing: var(--s-2); +} + +/* Groupe de champs. */ +.fields { + padding: var(--fields-padding); +} + +input[type="text"], input[type="number"] { + padding: var(--fields-padding); + border: var(--input-border); + + &::selection { + color: var(--root-text-color); + background-color: var(--root-background-color); + } +} + +input[type="radio"] { + position: relative; + aspect-ratio: 1/1; + inline-size: var(--s-1); + block-size: var(--s-1); + border: var(--input-border); + border-radius: 50%; + background: var(--radio-background-color); + + &::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + inline-size: var(--radio-marker-size); + block-size: var(--radio-marker-size); + border-radius: inherit; + opacity: 0; + background: var(--radio-marker-background-color); + } + + + label { + padding-left: var(--radio-label-spacing); + } + + &:checked { + &::after { + opacity: 1; + } + } +} diff --git a/src/styles/themes/default/headings.css b/src/styles/themes/default/headings.css index 531d790..4562bbd 100755 --- a/src/styles/themes/default/headings.css +++ b/src/styles/themes/default/headings.css @@ -1,18 +1,21 @@ +:root { + --headings-font-family: Banquise, monospace; +} + h1 { - font-family: Banquise, monospace; + font-family: var(--headings-font-family); font-size: var(--s3); - font-weight: 600; - letter-spacing: 1.5px; + letter-spacing: var(--letter-spacing-medium); } h2 { - font-family: Banquise, monospace; + font-family: var(--headings-font-family); font-size: var(--s2); - letter-spacing: 1px; + letter-spacing: var(--letter-spacing-small); } h3 { - font-family: Banquise, monospace; + font-family: var(--headings-font-family); font-size: var(--s1); - letter-spacing: 1px; + letter-spacing: var(--letter-spacing-small); } diff --git a/src/styles/themes/default/links.css b/src/styles/themes/default/links.css new file mode 100644 index 0000000..8dbbdc5 --- /dev/null +++ b/src/styles/themes/default/links.css @@ -0,0 +1,5 @@ +a { + &[aria-current] { + font-weight: var(--brkly-font-weight-semibold); + } +} diff --git a/src/views/BaseView.vue b/src/views/BaseView.vue deleted file mode 100644 index 05d0939..0000000 --- a/src/views/BaseView.vue +++ /dev/null @@ -1,4 +0,0 @@ - - - diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo deleted file mode 100644 index 74d5ecb..0000000 --- a/tsconfig.tsbuildinfo +++ /dev/null @@ -1 +0,0 @@ -{"root":["./src/router/typed-routes.d.ts","./eslint.config.mts","./vite.config.mts","./cfg/drizzle.config.ts","./cfg/eslint-css.config.mts","./cfg/eslint.config.mts","./cfg/knip.config.ts","./cfg/prettier.config.mjs","./cfg/stylelint.config.mjs","./src/main.ts","./src/vite-env.d.ts","./src/db/schemas.ts","./src/db/schemas/constants.ts","./src/db/schemas/entries.ts","./src/db/schemas/works.ts","./src/libs/apis/clients.ts","./src/libs/apis/requests.ts","./src/libs/apis/routes.ts","./src/libs/apis/tmdb/constants.ts","./src/libs/apis/tmdb/schemas.ts","./src/libs/search/schemas.ts","./src/libs/search/search.ts","./src/libs/types/events.ts","./src/libs/utils/dates.ts","./src/libs/utils/effects.ts","./src/libs/utils/types.d.ts","./src/router/index.ts","./src/services/db.ts","./src/services/logger.ts","./src/services/migrations.ts","./src/services/read-api.ts","./src/services/runtime-client.ts","./src/services/tmdb-api.ts"],"errors":true,"version":"5.7.3"} \ No newline at end of file