fix(whatislove-dev/careers-whatislove-dev): remove animation performa…

…nce properties wd-635

apps/careers-whatislove-dev/src/pages/root/libs/components/screen-initial/styles.css

@@ -14,7 +14,6 @@
 	cursor: pointer;
 	background-color: transparent;
 	border: 0;
-	will-change: transform;
 	animation: glitch var(--timing-function-glitch) 6ms infinite;
 
 	&:focus-visible {

apps/careers-whatislove-dev/src/pages/root/libs/components/screen-process/styles.css

@@ -89,6 +89,5 @@
 	color: var(--color-dark);
 	-webkit-text-stroke: 2px var(--color-light);
 	text-align: center;
-	will-change: transform;
 	animation: glitch var(--timing-function-glitch) 6ms infinite;
 }

apps/whatislove-dev/eleventy.config.js

@@ -42,8 +42,7 @@ let Path = /** @type {const} */ ({
 		`./src/files`,
 		`./src/sounds`,
 		`./src/manifest.webmanifest`,
-		`./src/images/favicons`,
-		`./src/images/covers`,
+		`./src/images`,
 		`./src/robots.txt`,
 		`src/articles/**/*.!(md)`,
 	],

apps/whatislove-dev/src/styles/blocks/content.css

@@ -96,8 +96,6 @@
 		padding-inline: 6px;
 		font-family: var(--font-family-code);
 		background-color: hsl(var(--color-page-background-code));
-		background-image: var(--background-image-page);
-		background-size: var(--background-size-page);
 		border-radius: 4px;
 	}
 
@@ -119,9 +117,7 @@
 		overflow-y: auto;
 		font-family: var(--font-family-code);
 		tab-size: 2;
-		background-color: hsl(var(--color-page-background-code)) !important;
-		background-image: var(--background-image-page);
-		background-size: var(--background-size-page);
+		background-color: hsl(var(--color-page-background-code));
 		border: 1px solid hsl(var(--color-gray-100));
 		border-radius: 5px;
 
@@ -141,6 +137,7 @@
 
 		code[class*="language"] {
 			padding: 0;
+			background-color: initial;
 			border-radius: inherit;
 		}
 	}

apps/whatislove-dev/src/styles/blocks/header.css

@@ -178,7 +178,6 @@
 .header__menu-item {
 	&[class*="--careers"] {
 		@media (prefers-reduced-motion: no-preference) {
-			will-change: transform;
 			animation: glitch cubic-bezier(0.5, -0.25, 0.75, 1) 6ms infinite;
 		}
 	}

apps/whatislove-dev/src/styles/blocks/not-easter-egg.css

@@ -14,7 +14,6 @@
 	margin: 0;
 	overflow: hidden;
 	border-radius: 50%;
-	will-change: inset-block-start, inset-inline-start;
 
 	&::before {
 		position: absolute;
@@ -29,7 +28,6 @@
 		background-color: hsl(var(--color-yellow-100) / 20%);
 		transform: skewX(-25deg);
 		translate: 0 -50%;
-		will-change: inset-inline-start;
 		animation: shine 5s infinite;
 	}
 

apps/whatislove-dev/src/styles/blocks/tag-list.css

@@ -15,7 +15,6 @@
 	font-weight: 600;
 	background-color: hsl(var(--background-color) / 30%);
 	background-image: var(--background-image-page);
-	background-size: var(--background-size-page);
 	border-radius: 3px;
 
 	/* do not forget to add new colors to OG tags */

apps/whatislove-dev/src/styles/globals/variables.css

@@ -35,8 +35,7 @@
 	--color-green-100: 92.97 84.73% 25.69%;
 	--color-gray-100: 0 0% 43.92%;
 	--color-black-100: 0 0% 0%;
-	--color-black-200: 0 0% 1%;
-	--color-black-300: 30 0% 3%;
+	--color-black-200: 0 0% 4%;
 
 	/* Focus */
 
@@ -51,9 +50,8 @@
 	/* Backgrounds */
 
 	--background-page: hsl(var(--color-page-background))
-		var(--background-image-page) repeat 0 / var(--background-size-page);
-	--background-image-page: url("/images/noise.svg");
-	--background-size-page: 1000px;
+		var(--background-image-page);
+	--background-image-page: url("/images/noise.png");
 
 	/* fonts */
 
@@ -74,24 +72,24 @@
 	/* theme */
 
 	--color-page-background: light-dark(
-		var(--color-white-100),
+		var(--color-white-200),
 		var(--color-black-200)
 	);
 	--color-page-background-highlight: light-dark(
 		var(--color-black-100) / 5%,
 		var(--color-white-100) / 10%
 	);
 	--color-page-background-code: light-dark(
-		var(--color-white-200),
-		var(--color-black-300)
+		var(--color-black-100) / 2%,
+		var(--color-white-100) / 10%
 	);
 	--color-scroll-shadow: light-dark(
 		var(--color-black-100),
 		var(--color-white-100)
 	);
 	--color-intro-background: light-dark(
 		var(--color-white-100) / 60%,
-		var(--color-black-100) / 15%
+		var(--color-black-100) / 40%
 	);
 	--color-intro-image-mask: light-dark(
 		var(--color-white-100),