feat(robots.txt): add new bots

Reviewed-on: #1

.astro/content-modules.mjs

@@ -1,14 +1,15 @@
 
 export default new Map([
-["src/content/articles/en/after-effects-expressions.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Fen%2Fafter-effects-expressions.mdx&astroContentModuleFlag=true")],
 ["src/content/fragments/en/image-full.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Fen%2Fimage-full.mdx&astroContentModuleFlag=true")],
-["src/content/articles/en/video-compression.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Fen%2Fvideo-compression.mdx&astroContentModuleFlag=true")],
 ["src/content/fragments/en/super-cookies.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Fen%2Fsuper-cookies.mdx&astroContentModuleFlag=true")],
-["src/content/articles/en/the-day-I-jamd.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Fen%2Fthe-day-I-jamd.mdx&astroContentModuleFlag=true")],
+["src/content/articles/en/video-compression.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Fen%2Fvideo-compression.mdx&astroContentModuleFlag=true")],
 ["src/content/articles/en/sci-hub-blocage.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Fen%2Fsci-hub-blocage.mdx&astroContentModuleFlag=true")],
-["src/content/articles/fr/sci-hub-blocage.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Ffr%2Fsci-hub-blocage.mdx&astroContentModuleFlag=true")],
+["src/content/articles/en/after-effects-expressions.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Fen%2Fafter-effects-expressions.mdx&astroContentModuleFlag=true")],
+["src/content/articles/en/the-day-I-jamd.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Fen%2Fthe-day-I-jamd.mdx&astroContentModuleFlag=true")],
+["src/content/fragments/fr/buttons.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Ffr%2Fbuttons.mdx&astroContentModuleFlag=true")],
+["src/content/articles/fr/configuration-serveur.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Ffr%2Fconfiguration-serveur.mdx&astroContentModuleFlag=true")],
 ["src/content/fragments/fr/image-full.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Ffr%2Fimage-full.mdx&astroContentModuleFlag=true")],
 ["src/content/fragments/fr/super-cookies.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Ffr%2Fsuper-cookies.mdx&astroContentModuleFlag=true")],
-["src/content/fragments/fr/buttons.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Ffr%2Fbuttons.mdx&astroContentModuleFlag=true")],
-["src/content/articles/fr/the-day-I-jamd.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Ffr%2Fthe-day-I-jamd.mdx&astroContentModuleFlag=true")]]);
+["src/content/articles/fr/the-day-I-jamd.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Ffr%2Fthe-day-I-jamd.mdx&astroContentModuleFlag=true")],
+["src/content/articles/fr/sci-hub-blocage.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Ffr%2Fsci-hub-blocage.mdx&astroContentModuleFlag=true")]]);
 		

.astro/settings.json

@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1735403503212
+		"lastUpdateCheck": 1737382034437
 	}
 }

.vscode/settings.json

@@ -4,5 +4,8 @@
 	"editor.insertSpaces": false,
 	"editor.detectIndentation": false,
 	"editor.tabSize": 2,
-	"astro.content-intellisense": true
+	"astro.content-intellisense": true,
+	"[vue]": {
+		"editor.defaultFormatter": "vscode.typescript-language-features"
+	}
 }

astro.config.mjs

@@ -2,6 +2,7 @@ import { defineConfig } from 'astro/config'
 
 import mdx from '@astrojs/mdx'
 import sitemap from '@astrojs/sitemap'
+import rehypeExternalLinks from 'rehype-external-links'
 
 import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers'
 import expressiveCode from 'astro-expressive-code'
@@ -15,6 +16,9 @@ export default defineConfig({
 		domains: ['assets.nardu.in'],
 		remotePatterns: [{ protocol: 'https' }]
 	},
+	markdown: {
+		rehypePlugins: [[rehypeExternalLinks, { rel: ['noopener noreferer'] }]]
+	},
 	integrations: [
 		expressiveCode({
 			theme: 'one-dark-pro',

package.json

@@ -10,19 +10,19 @@
 		"astro": "astro"
 	},
 	"dependencies": {
-		"@astrojs/mdx": "4.0.3",
-		"@astrojs/rss": "4.0.10",
-		"@astrojs/sitemap": "3.2.1",
+		"@astrojs/mdx": "4.0.7",
+		"@astrojs/rss": "4.0.11",
+		"@astrojs/sitemap": "^3.2.1",
 		"@astrojs/ts-plugin": "^1.10.4",
-		"@expressive-code/plugin-line-numbers": "^0.38.3",
-		"astro": "5.1.1",
-		"astro-expressive-code": "^0.38.3",
+		"@expressive-code/plugin-line-numbers": "^0.40.1",
+		"astro": "5.1.8",
+		"astro-expressive-code": "^0.40.1",
+		"rehype-external-links": "^3.0.0",
 		"sharp": "^0.33.5"
 	},
 	"devDependencies": {
-		"@shikijs/transformers": "^1.24.4",
 		"autoprefixer": "^10.4.20",
-		"postcss": "^8.4.49",
+		"postcss": "^8.5.1",
 		"prettier": "^3.4.2",
 		"prettier-plugin-astro": "^0.14.1",
 		"prettier-plugin-organize-imports": "^4.1.0"

public/robots.txt

@@ -1,2 +1,49 @@
+User-agent: AI2Bot
+User-agent: Ai2Bot-Dolma
+User-agent: Amazonbot
+User-agent: anthropic-ai
+User-agent: Applebot
+User-agent: Applebot-Extended
+User-agent: Bytespider
+User-agent: CCBot
+User-agent: ChatGPT-User
+User-agent: Claude-Web
+User-agent: ClaudeBot
+User-agent: cohere-ai
+User-agent: cohere-training-data-crawler
+User-agent: Crawlspace
+User-agent: Diffbot
+User-agent: DuckAssistBot
+User-agent: FacebookBot
+User-agent: FriendlyCrawler
+User-agent: Google-Extended
+User-agent: GoogleOther
+User-agent: GoogleOther-Image
+User-agent: GoogleOther-Video
+User-agent: GPTBot
+User-agent: iaskspider/2.0
+User-agent: ICC-Crawler
+User-agent: ImagesiftBot
+User-agent: img2dataset
+User-agent: ISSCyberRiskCrawler
+User-agent: Kangaroo Bot
+User-agent: Meta-ExternalAgent
+User-agent: Meta-ExternalFetcher
+User-agent: OAI-SearchBot
+User-agent: omgili
+User-agent: omgilibot
+User-agent: PanguBot
+User-agent: PerplexityBot
+User-agent: PetalBot
+User-agent: Scrapy
+User-agent: SemrushBot-OCOB
+User-agent: SemrushBot-SWA
+User-agent: Sidetrade indexer bot
+User-agent: Timpibot
+User-agent: VelenPublicWebCrawler
+User-agent: Webzio-Extended
+User-agent: YouBot
+Disallow: /
 User-agent: *
-Allow: /
+Disallow:
+Sitemap: https://www.nardu.in/sitemap-index.xml

src/components/CardEditorial.astro

@@ -87,6 +87,8 @@ const isReference = routeName === 'references'
 			&::after {
 				transform: translateX(0);
 				opacity: 1;
+				transition-duration: 0.6s;
+				transition-timing-function: var(--timing-bounce);
 			}
 
 			h3 a {
@@ -100,12 +102,12 @@ const isReference = routeName === 'references'
 				transition: box-shadow 0.2s ease;
 			}
 			&::before {
-				transition: transform 0.2s ease-in-out;
+				transition: transform 0.4s var(--timing-out-expo);
 			}
 			&::after {
-				transition:
-					opacity ease 0.2s,
-					transform ease 0.2s;
+				transition-property: opacity, transform;
+				transition-duration: 0.3s;
+				transition-timing-function: ease-in-out;
 			}
 			h3 a {
 				transition: color ease 0.2s;

src/components/Footer.astro

@@ -1,8 +1,10 @@
 ---
+import { Picture } from 'astro:assets'
 import SocialRel from '../components/SocialRel.astro'
+import fight from '../assets/images/fight-fascism.webp'
 ---
 
-<footer class='footer wrapper' role='contentinfo'>
+<footer class='footer wrapper flow' role='contentinfo'>
 	<section class='info'>
 		<div>
 			<p class='h4'>Nicolas Arduin</p>
@@ -15,6 +17,15 @@ import SocialRel from '../components/SocialRel.astro'
 		</ul>
 		<SocialRel />
 	</section>
+	<section class='supports'>
+		<a
+			rel='noopener noreferer'
+			href='https://fightfascism.glitch.me/'
+			class='img-link'
+		>
+			<Picture src={fight} formats={['avif', 'webp']} alt='Fight fascism' />
+		</a>
+	</section>
 </footer>
 
 <style>
@@ -33,7 +44,8 @@ import SocialRel from '../components/SocialRel.astro'
 		color: var(--color-blue);
 	}
 
-	.info {
+	.info,
+	.supports {
 		display: flex;
 		flex-flow: row wrap;
 		justify-content: space-between;

src/components/QuickAccessCard.astro

@@ -58,11 +58,11 @@ const { item } = Astro.props
 	}
 	@media (prefers-reduced-motion: no-preference) {
 		.card {
-			transition: all ease 0.2s;
+			transition: all var(--timing-bounce) 0.4s;
 		}
 		.card:hover {
 			transform: translateY(-10px);
-			box-shadow: var(--shadow-elevation-high);
+			box-shadow: 0 4px 0 0 var(--accent-color);
 		}
 		.card:focus-within {
 			transform: translateY(-10px);

src/content/articles/fr/configuration-serveur.mdx

@@ -0,0 +1,277 @@
+---
+title: 'Paramétrer un serveur pour héberger des trucs'
+subtitle: 'Guide personnel.'
+lang: fr
+slug: 'configuration-serveur'
+excerpt: Envie de mettre un site en ligne ? D'héberger vos propres outils plutôt que de payer des abonnements ? Bah lezgongue
+tags: ['Dev', 'Backend']
+type: articles
+createdAt: '2025-01-28T22:20:00.000Z'
+---
+
+import { Picture } from 'astro:assets'
+import coolifySettings from '@assets/images/articles/configuration-serveur/coolify-admin-settings.jpg'
+import coolifyNewRessource from '@assets/images/articles/configuration-serveur/coolify-new-ressource.jpg'
+import coolifyConfRessource from '@assets/images/articles/configuration-serveur/coolify-conf-ressource.jpg'
+
+## Mon mémo perso.
+
+Cet article est l'extension d'un fichier «&nbsp;pense-bête&nbsp;» que j'utilise depuis toujours quand je crée un nouveau serveur. Généralement un <abbr lang="en" title="Virtual Private Server">VPS</abbr>, généralement sous debian ou fedora.
+
+Si vous voulez tester des trucs, voici [un lien de parrainage](https://hetzner.cloud/?ref=Jl7yPFuoBGDM) chez l'hébergeur allemand [Hetzner](https://hetzner.cloud) pour récupérer 20€ de crédit (et 10€ pour moi si vous y restez). [Conditions de l'offre.](https://www.hetzner.com/legal/referrals)
+
+> Notez bien que je ne suis ni administrateur système ni expert en sécurité.
+
+## Conf serveur
+
+### Actions immédiates
+
+Se connecter en root via ssh puis…
+
+#### Paramétrer les locales
+
+Parfois il manque la configuration des [locales](https://www.tecmint.com/set-system-locales-in-linux/) et ça cause des erreurs.
+
+```bash {"Debian":4} {"Fedora":6}
+# affiche la conf actuelle
+locale
+
++
+nano /etc/default/locale
++
+nano /etc/locale.conf
+
+# compléter ces lignes si besoin
+LANG=en_US.UTF-8
+LANGUAGE=en_US.UTF-8
+LC_ALL=en_US.UTF-8
+```
+
+#### Mettre à jour le système
+
+```bash {"Debian":1} {"Fedora":4}
++
+apt update
+apt dist-upgrade
++
+dnf check-update
+dnf upgrade
+```
+
+#### Nouvel utilisateur
+
+- Ajouter et renseigner un nouvel utilisateur.
+- Ajouter l'utilisateur aux "sudoers".
+- Ajouter sa clé ssh locale à l'utilisateur distant.
+
+```bash {"Debian":3} {"Fedora":5} {"En local":8} {"Sur le serveur":13}
+adduser USERNAME
+
++
+usermod -aG sudo USERNAME
++
+usermod -aG wheel USERNAME
+
++
+ssh-keygen -t ed25519 -f ~/.ssh/id_ed25519 -C "mail@domain.tld"
+# afficher puis copier la clé publique
+cat ~/.ssh/id_ed25519.pub
+
++
+su USERNAME
+mkdir ~/.ssh
+# coller la clé publique dans ce fichier
+nano authorized_keys
+```
+
+#### bash alias
+
+Ajoute un alias `ll` pour un `ls` plus explicite.
+
+```bash title="~/.bashrc"
+alias ll='ls -lah'
+```
+
+### SSH
+
+configure [sshd_config](https://infosec.mozilla.org/guidelines/openssh)
+
+```ssh-config title="/etc/ssh/sshd_config"
+# Changer le port est recommandé mais pas obligatoire
+Port 10485
+
+# Désactive la connexion par mot de passe
+AuthenticationMethods publickey
+
+# Désactive la connexion via root
+PermitRootLogin No
+
+# modifier/adapter ces options si besoin
+LoginGraceTime 120
+StrictModes yes
+PubkeyAuthentication yes
+AuthorizedKeysFile /home/%u/.ssh/authorized_keys
+PermitEmptyPasswords no
+ChallengeResponseAuthentication no
+X11Forwarding no
+UseDNS no
+MaxStartups 10:30:60
+PermitTunnel no
+```
+
+Tester maintenant dans un autre terminal si la connexion ssh avec le nouvel utilisateur fonctionne.
+
+Si oui&nbsp;: **redémarrer&nbsp;!**
+
+### Pare-feu
+
+- Installer
+- Paramétrer
+- Activer
+
+#### Debian
+
+[ufw](https://www.codeflow.site/fr/article/how-to-set-up-a-firewall-with-ufw-on-debian-10)
+
+```bash
+ufw default deny incoming
+ufw default allow outgoing
+ufw allow ssh # ou ufw allow PORT
+ufw allow http # ufw allow 80
+ufw allow https # ufw allow 443
+ufw enable
+```
+
+#### Fedora
+
+[Firewalld](https://docs.fedoraproject.org/en-US/quick-docs/firewalld/#_viewing_the_current_status_of_firewalld)
+
+```bash
+dnf install firewalld
+systemctl unmask firewalld
+systemctl start firewalld
+systemctl enable firewalld
+firewall-cmd --zone=public --add-service=ssh
+firewall-cmd --zone=public --add-service=http
+firewall-cmd --zone=public --add-service=https
+firewall-cmd --runtime-to-permanent
+firewall-cmd --reload
+```
+
+### Crowdsec
+
+[Crowdsec](https://doc.crowdsec.net/docs/getting_started/install_crowdsec/) est un système de sécurité qui détecte et bloque les connexions malveillantes.
+
+- Installer crowdsec.
+- Installer un "<span lang="en">bouncer</span>".
+- Activer des [scenarios](https://doc.crowdsec.net/docs/next/cscli/cscli_scenarios_install) (facultatif).
+
+```bash {"Debian":3} {"Fedora":6}
+curl -s https://install.crowdsec.net | sudo sh
+
++
+apt install crowdsec
+apt install crowdsec-firewall-bouncer-iptables
++
+dnf install crowdsec
+dnf install crowdsec-firewall-bouncer-nftables
+```
+
+## Conf web
+
+### Serveur web
+
+J'utilisais généralement [OpenLiteSpeed](https://openlitespeed.org/) pour avoir une interface graphique, mais j'ai changé pour [Coolify](https://coolify.io) depuis quelques années.
+
+#### Coolify
+
+[Documentation.](https://coolify.io/docs/installation)
+
+```bash
+curl -fsSL https://cdn.coollabs.io/coolify/install.sh | sudo bash
+```
+
+> Crowdsec et Coolify utilisent tous les deux le port 8080 par défaut. Il faut le changer pour un des deux (plus facile à [faire pour Crowdsec.](https://support.crowdsec.net/hc/en-gb/articles/10831013001234--Security-Engine-How-to-change-the-default-port))
+
+<details class="flow">
+	<summary>Procédure détaillée</summary>
+
+Il faut éditer deux fichiers:
+
+```yaml title="/etc/crowdsec/config.yaml" "8080"
+api:
+	server:
+		listen_uri: 127.0.0.1:8080
+```
+
+```yaml title="/etc/crowdsec/local_api_credentials.yaml" "8080"
+url: http://127.0.0.1:8080
+```
+
+Puis charger la nouvelle configuration&nbsp;:
+
+```bash
+service crowdsec reload
+```
+
+</details>
+
+##### Configuration
+
+Une fois installé (suivre les instructions du script), on peut paramétrer Coolify avec un nom de domaine, généralement un sous-domaine du style `coolify.domaine.tld`
+
+<Picture
+	src={coolifySettings}
+	formats={['avif', 'webp']}
+	alt="Instance's domain field inside settings"
+/>
+
+##### Ajouter une ressource
+
+Dans coolify, les «&nbsp;ressources&nbsp;» correspondent à un site ou service web&nbsp;:
+
+- site statique
+- webapp
+- base de données
+- image docker
+- etc.
+
+Afin d'héberger un site ou une webapp «&nbsp;maison&nbsp;», il faudra avant tout que le code soit disponible sur une forge git. Soit en public soit en ayant paramétré une clé de déploiement au préalable.
+
+<Picture src={coolifyNewRessource} formats={['avif', 'webp']} alt='' />
+
+##### Configurer la ressource
+
+Coolify va essayer de déterminer des [options par défaut](https://github.com/coollabsio/coolify-examples/) selon le dépôt git. Il ne restera plus qu'à ajuster les paramètres de la ressource&nbsp;:
+
+- url du projet
+- commande d'installation des paquets
+- commande de construction du projet
+- commande de démarrage
+- variables d'environnement
+- <span lang='en'>webhooks</span>
+- etc.
+
+<Picture src={coolifyConfRessource} formats={['avif', 'webp']} alt='' />
+
+#### OpenLiteSpeed
+
+Plus vraiment utilisé pour de nouveaux projets et moins évident à prendre en main. Mais puissant malgré tout&nbsp;!
+
+[Documentation.](https://docs.openlitespeed.org/installation/repo/)
+
+```bash
+wget -O - https://repo.litespeed.sh | sudo bash
+apt-get install openlitespeed
+```
+
+Récupérer le mot de passe admin `cat /usr/local/lsws/adminpasswd`
+
+### Outils
+
+Selon les besoins du projet&nbsp;:
+
+- git
+- [nvm](https://github.com/nvm-sh/nvm#install--update-script)
+- [yarn](https://classic.yarnpkg.com/en/docs/getting-started)/[pnpm](https://pnpm.io/installation)/[bun](https://bun.sh/)
+- [acme.sh](https://github.com/acmesh-official/acme.sh) ([tuto complet](/fragments/acme-sh-tls-cert/))

src/pages/index.astro

@@ -175,7 +175,7 @@ const allReferences = await getCollection('references')
 
 	.section :global(h2) {
 		font-size: var(--size-3);
-		color: var(--color-blue);
+		color: var(--accent-color);
 	}
 	.section :global(h3) {
 		font-size: var(--size-1);

src/styles/global/global-styles.css

@@ -11,13 +11,17 @@
 	color: var(--color-brique);
 }
 
+@view-transition {
+	navigation: auto;
+}
+
 body {
 	font-family: var(--font-primary);
 	font-size: var(--size-0);
 	line-height: 1.4;
-	color: var(--color-dark);
-	background-color: var(--color-light-white);
-	accent-color: var(--color-brique);
+	color: var(--primary-color);
+	background-color: var(--primary-background);
+	accent-color: var(--accent-color);
 }
 
 main {
@@ -29,7 +33,7 @@ main {
 :where(h1) {
 	max-inline-size: 20ch;
 	font-size: var(--size-6);
-	color: var(--color-dark-blue);
+	color: var(--title-color);
 }
 
 h2,
@@ -47,18 +51,18 @@ h3,
 h4,
 .h4 {
 	font-size: var(--size-1);
-	color: var(--color-dark);
+	color: var(--primary-color);
 }
 
 h5,
 .h5 {
-	font-size: var(--size-1);
-	color: var(--color-darkBlue);
+	font-size: var(--size-0);
+	color: var(--primary-color);
 }
 
 a {
 	font-weight: 500;
-	color: var(--color-blue);
+	color: var(--accent-color);
 	text-decoration: underline;
 }
 /* a:visited {
@@ -72,7 +76,7 @@ a:focus {
 hr {
 	margin-block: var(--space-m-l);
 	block-size: 4px;
-	background-color: var(--color-dark);
+	background-color: var(--primary-color);
 }
 hr.small {
 	margin-block: var(--space-xs);
@@ -113,17 +117,17 @@ ol:not([role='list']) > li + li {
 	font-size: var(--size-0);
 	font-weight: bold;
 	text-decoration: none;
-	border: 2px solid var(--color-blue);
+	border: 2px solid var(--accent-color);
 	border-radius: var(--radius-small);
 	color: var(--color-white);
-	background-color: var(--color-blue);
+	background-color: var(--accent-color);
 	transition-property: color, background-color;
 	transition-duration: 0.3s;
 	transition-timing-function: ease;
 }
 .btn:hover,
 .btn:focus {
-	color: var(--color-blue);
+	color: var(--accent-color);
 	background-color: var(--color-white);
 }
 
@@ -135,7 +139,7 @@ button[disabled] {
 }
 
 .highlight {
-	color: var(--color-blue);
+	color: var(--accent-color);
 }
 
 /* clean style link */
@@ -181,13 +185,24 @@ button[disabled] {
 	}
 }
 
+.img-link {
+	box-shadow: 2px 2px 0 0 var(--accent-color);
+	transition-property: box-shadow;
+	transition-duration: 0.4s;
+	transition-timing-function: var(--timing-bounce);
+
+	&:hover {
+		box-shadow: 12px 12px 0 0;
+	}
+}
+
 /* blockquote */
 blockquote {
 	margin: var(--space-s) 0;
 	padding: var(--space-s);
 	font-weight: normal;
 	line-height: 1.4;
-	border-left: 3px solid var(--color-blue);
+	border-left: 3px solid var(--accent-color);
 	border-radius: 3px;
 	background-color: var(--color-soft-blue);
 }

src/styles/global/reset.css

@@ -47,7 +47,7 @@ html {
 
 /* Smooth scrolling for users that don't prefer reduced motion */
 @media (prefers-reduced-motion: no-preference) {
-	html:focus-within {
+	html {
 		scroll-behavior: smooth;
 	}
 }
@@ -70,7 +70,9 @@ body {
 	max-inline-size: 100%;
 }
 
-:where(details) {
+:where(summary) {
+	padding: var(--space-3xs);
+	background-color: var(--color-light-grey);
 	cursor: pointer;
 }
 

src/styles/global/variables.css

@@ -57,6 +57,11 @@
 	--font-tnum: 'tnum' on;
 
 	/* colors */
+
+	/* Enable when ready
+	color-scheme: light dark;
+	*/
+
 	--color-dark: hsl(239, 57%, 15%);
 	--color-grey: hsl(211, 12%, 35%);
 	--color-light-grey: hsl(0, 0%, 94%);
@@ -71,6 +76,11 @@
 	--color-light-white: hsl(240, 50%, 98%);
 	--color-black: hsl(0, 0%, 0%);
 
+	--primary-color: light-dark(var(--color-dark), var(--color-light-grey));
+	--primary-background: light-dark(var(--color-light-white), var(--color-dark));
+	--accent-color: light-dark(var(--color-blue), var(--color-brique));
+	--title-color: light-dark(var(--color-dark-blue), var(--color-light-blue));
+
 	/* shadows */
 	--shadow-color: 0deg 0% 80%;
 	--shadow-elevation-medium: 0px 0.7px 0.7px hsl(var(--shadow-color) / 0.28),
@@ -92,4 +102,35 @@
 	/* radius */
 	--radius: 20px;
 	--radius-small: 10px;
+
+	/* easing */
+
+	--timing-in-out-expo: cubic-bezier(0.9, 0, 0.1, 1);
+	--timing-out-expo: cubic-bezier(0, 0.55, 0.246, 1);
+
+	--timing-bounce: linear(
+		0,
+		0.01 1%,
+		0.039 2%,
+		0.088 3.1%,
+		0.154 4.2%,
+		0.309 6.3%,
+		0.791 12.1%,
+		1.011 15.4%,
+		1.091 17%,
+		1.152 18.6%,
+		1.198 20.3%,
+		1.223 22%,
+		1.232 24.2%,
+		1.214 26.7%,
+		1.175 29.3%,
+		1.058 35.4%,
+		1.007 38.5%,
+		0.969 41.9%,
+		0.949 45.4%,
+		0.95 50.5%,
+		0.998 62.1%,
+		1.011 68.6%,
+		1
+	);
 }

src/styles/utilities/wrapper.css

@@ -22,6 +22,10 @@
 	grid-column: wrapper;
 }
 
+.wrapper:has(article.editorial) {
+	--content-width: 70rem;
+}
+
 /* set full width content to full grid */
 .wrapper.full-width {
 	/* calculate inline padding based on available space minus content space to align full-width content with wrapper content */

tsconfig.json

@@ -6,7 +6,8 @@
 		"baseUrl": ".",
 		"paths": {
 			"@components/*": ["src/components/*"],
-      "@layouts/*": ["src/layouts/*"]
+			"@layouts/*": ["src/layouts/*"],
+			"@assets/*": ["src/assets/*"]
 		},
 		"strictNullChecks": true,
 		"plugins": [