feat(website): new contents and styles

.astro/content-modules.mjs

@@ -1,14 +1,14 @@
 
 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/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/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/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/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/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/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/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")]]);
 		

.astro/settings.json

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

package.json

@@ -10,19 +10,18 @@
 		"astro": "astro"
 	},
 	"dependencies": {
-		"@astrojs/mdx": "4.0.3",
+		"@astrojs/mdx": "4.0.7",
-		"@astrojs/rss": "4.0.10",
+		"@astrojs/rss": "4.0.11",
 		"@astrojs/sitemap": "3.2.1",
 		"@astrojs/ts-plugin": "^1.10.4",
-		"@expressive-code/plugin-line-numbers": "^0.38.3",
+		"@expressive-code/plugin-line-numbers": "^0.40.1",
-		"astro": "5.1.1",
+		"astro": "5.1.8",
-		"astro-expressive-code": "^0.38.3",
+		"astro-expressive-code": "^0.40.1",
 		"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"

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:
+				transition-property: opacity, transform;
-					opacity ease 0.2s,
+				transition-duration: 0.3s;
-					transform ease 0.2s;
+				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 '../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/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);
+	color: var(--primary-color);
-	background-color: var(--color-light-white);
+	background-color: var(--primary-background);
-	accent-color: var(--color-brique);
+	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);
+	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;
 	}
 }

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
+	);
 }