.

public/resources/styles/themes/default.css

@@ -778,24 +778,28 @@ body {
 		grid-template-columns: repeat(5, 1fr);
 	}
 }
+
 @media (max-width: 1500px) {
 	.mod-list,
 	.article-list {
 		grid-template-columns: repeat(4, 1fr);
 	}
 }
+
 @media (max-width: 1250px) {
 	.mod-list,
 	.article-list {
 		grid-template-columns: repeat(3, 1fr);
 	}
 }
+
 @media (max-width: 1000px) {
 	.mod-list,
 	.article-list {
 		grid-template-columns: repeat(2, 1fr);
 	}
 }
+
 @media (max-width: 775px) {
 	.mod-list,
 	.article-list {
@@ -803,7 +807,22 @@ body {
 	}
 }
 
-@keyframes article {
+/* bruh pls find a fix for this */
+@keyframes article-1 {
+	0% {
+		opacity: 0;
+		scale: 0;
+	}
+	80% {
+		scale: 1.1;
+	}
+	100% {
+		opacity: 1;
+		scale: 1;
+	}
+}
+
+@keyframes article-2 {
 	0% {
 		opacity: 0;
 		scale: 0;

src/resources/scripts/main.ts

@@ -157,15 +157,14 @@ const article = {
 	open: function (articleId: string) {
 		const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null;
 		const modalContent = document.querySelector(`#article-${articleId} .article-content`) as HTMLElement | null;
-		if (modal && modalContent) {
+		if (!articleAnimationLock && modal && modalContent) {
 			articleAnimationLock = true;
-			modal.style.animation = 'article 0.5s ease-in-out normal';
+			modal.style.animation = 'article-1 0.5s ease-in-out alternate 1';
 			modal.style.display = 'flex';
 			modalContent.scroll({ top: 0, left: 0, behavior: 'instant' });
 			modal.addEventListener(
 				'animationend',
 				() => {
-					articleAnimationLock = false;
 					const closeArticleHandler = (event: Event) => {
 						if (event.target === modal) {
 							modal.removeEventListener('click', closeArticleHandler);
@@ -173,26 +172,25 @@ const article = {
 						}
 					};
 					modal.addEventListener('click', closeArticleHandler);
+					articleAnimationLock = false;
 				},
 				{ once: true }
 			);
 		}
 	},
 	close: function (articleId: string) {
-		if (!articleAnimationLock) {
+		const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null;
+		if (!articleAnimationLock && modal) {
 			articleAnimationLock = true;
-			const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null;
-			if (modal) {
-				modal.style.animation = 'article 0.5s ease-in-out reverse';
-				modal.addEventListener(
-					'animationend',
-					() => {
-						modal.style.display = 'none';
-						articleAnimationLock = false;
-					},
-					{ once: true }
-				);
-			}
+			modal.style.animation = 'article-2 0.5s ease-in-out alternate 1';
+			modal.addEventListener(
+				'animationend',
+				() => {
+					modal.style.display = 'none';
+					articleAnimationLock = false;
+				},
+				{ once: true }
+			);
 		}
 	},
 };