make it so ppl who spam buttons dont make articles glitch out

public/articles/index.html

@@ -66,7 +66,7 @@
 							<div class="article-item" onclick="article.open('cloudflare-tunnel')">
 								<img class="article-icon" loading="lazy" src="/resources/images/icons/articles/cloudflare-tunnel.webp" />
 								<div class="article-details">
-									<strong class="article-name">How to Set Up a Cloudflare Tunnel for an Eaglercraft Server</strong>
+									<strong class="article-name">Setting Up a Cloudflare Tunnel for an Eaglercraft Server</strong>
 									<p class="article-description">This brief guide walks you through configuring a Cloudflare Tunnel for your Eaglercraft server.</p>
 								</div>
 							</div>
@@ -169,7 +169,7 @@
 		<div id="article-cloudflare-tunnel" class="article">
 			<div class="article-content">
 				<span class="close-button" onclick="article.close('cloudflare-tunnel')">&times;</span>
-				<h1>How to Set Up a Cloudflare Tunnel for an Eaglercraft Server</h1>
+				<h1>Setting Up a Cloudflare Tunnel for an Eaglercraft Server</h1>
 				<h5>Written by zumbiepig and SpeedSlicer</h5>
 				<p>In this guide, we'll walk you through the steps to set up a Cloudflare Tunnel for your Eaglercraft server, which is running on <code>ws://localhost:8081</code>.</p>
 				<h3>Prerequisites</h3>

public/resources/styles/themes/default.css

@@ -746,17 +746,15 @@ nav {
 .article {
 	display: none;
 	position: fixed;
-	top: 0;
+	width: 500vw;
-	left: 0;
+	height: 500vh;
-	width: 100%;
-	height: 100%;
 	overflow: auto;
 	background-color: rgba(0, 0, 0, 0.5);
 	justify-content: center;
 	align-items: center;
 }
 
-@keyframes openArticle {
+@keyframes article-open {
 	0% {
 		opacity: 0;
 		scale: 0;
@@ -770,7 +768,7 @@ nav {
 	}
 }
 
-@keyframes closeArticle {
+@keyframes article-close {
 	0% {
 		opacity: 1;
 		scale: 1;
@@ -788,9 +786,9 @@ nav {
 	background-color: #333;
 	padding: 20px;
 	border: 1px solid #888;
-	width: 65%;
+	width: 65vw;
-	max-width: 85%;
+	height: 85vh;
-	max-height: 85%;
+	max-width: 85vw;
 	border-radius: 15px;
 	color: #fff;
 	overflow-y: auto;

src/resources/scripts/main.ts

@@ -2,6 +2,7 @@ import { gt, coerce } from 'semver';
 import { inflate, deflate } from 'pako';
 
 let selectedVersion: string;
+let articleClosing = false;
 
 const theme = {
 	load: function (themeToLoad?: string) {
@@ -156,15 +157,32 @@ const article = {
 	open: function (articleId: string) {
 		const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null;
 		if (modal) {
-			modal.style.animation = 'openArticle 0.5s ease-in-out';
+			modal.style.animation = 'article-open 0.5s ease-in-out';
 			modal.style.display = 'flex';
+			const closeArticleHandler = (event: Event) => {
+				if (event.target === modal) {
+					modal.removeEventListener('click', closeArticleHandler);
+					article.close(articleId);
+				}
+			};
+			modal.addEventListener('click', closeArticleHandler);
 		}
 	},
 	close: function (articleId: string) {
-		const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null;
+		if (!articleClosing) {
-		if (modal) {
+			articleClosing = true;
-			modal.style.animation = 'closeArticle 0.5s ease-in-out';
+			const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null;
-			modal.addEventListener('animationend', () => (modal.style.display = 'none'), { once: true });
+			if (modal) {
+				modal.style.animation = 'article-close 0.5s ease-in-out';
+				modal.addEventListener(
+					'animationend',
+					() => {
+						modal.style.display = 'none';
+						articleClosing = false;
+					},
+					{ once: true }
+				);
+			}
 		}
 	},
 };