From 1feb488b2111617d97ecfaba07741bf024c2ef8f Mon Sep 17 00:00:00 2001
From: zumbiepig <121742281+zumbiepig@users.noreply.github.com>
Date: Sat, 7 Sep 2024 10:41:14 -0700
Subject: [PATCH] .

---
 src/articles/index.html                 |  4 +-
 src/resources/scripts/main.ts           | 18 ++++-----
 src/resources/styles/themes/default.css | 54 ++++++++++++-------------
 3 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/articles/index.html b/src/articles/index.html
index 70d0ed9..6a3fc60 100644
--- a/src/articles/index.html
+++ b/src/articles/index.html
@@ -65,14 +65,14 @@
 						<div class="article-list">
 							<div onclick="article.open('mc-server')">
 								<img loading="lazy" src="/resources/images/icons/articles/mc-server.webp" />
-								<div class="article-details">
+								<div class="details">
 									<strong>How To Make An Eaglercraft Server</strong>
 									<p>Have you ever wondered how to make an Eaglercraft Server? Read this article to find out how!</p>
 								</div>
 							</div>
 							<div onclick="article.open('cloudflare-tunnel')">
 								<img loading="lazy" src="/resources/images/icons/articles/cloudflare-tunnel.webp" />
-								<div class="article-details">
+								<div class="details">
 									<strong>Setting Up a Cloudflare Tunnel for an Eaglercraft Server</strong>
 									<p>This brief guide walks you through configuring a Cloudflare Tunnel for your Eaglercraft server.</p>
 								</div>
diff --git a/src/resources/scripts/main.ts b/src/resources/scripts/main.ts
index 25e39aa..6f8d58f 100644
--- a/src/resources/scripts/main.ts
+++ b/src/resources/scripts/main.ts
@@ -161,7 +161,7 @@ const navigate = {
 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;
+		const modalContent = document.querySelector(`#article-${articleId} div`) as HTMLElement | null;
 		if (!articleAnimationLock && modal && modalContent) {
 			articleAnimationLock = true;
 			modal.style.animation = '0.5s ease-in-out 1 normal article';
@@ -329,7 +329,7 @@ const mods = {
 			mods.push(mod);
 			mods.sort();
 			storage.local.set('mods', mods);
-			const modInstallElem = document.querySelector(`#mod-install-${modId}`);
+			const modInstallElem = document.querySelector(`#mod-${modId}`);
 			if (modInstallElem) {
 				modInstallElem.textContent = 'Uninstall';
 				modInstallElem.classList.add('installed');
@@ -337,7 +337,7 @@ const mods = {
 		} else {
 			mods.splice(modIndex, 1);
 			storage.local.set('mods', mods);
-			const modInstallElem = document.querySelector(`#mod-install-${modId}`);
+			const modInstallElem = document.querySelector(`#mod-${modId}`);
 			if (modInstallElem) {
 				modInstallElem.textContent = 'Install';
 				modInstallElem.classList.remove('installed');
@@ -614,21 +614,21 @@ if (window.location.pathname === '/settings/') {
 		// @ts-expect-error
 		addonData[addonType].forEach((addon) => {
 			const modItem = document.createElement('div');
-			modItem.innerHTML = `<img loading="lazy" src="/resources/mods/icons/${addon.id}.webp" /><div class="mod-details"><strong>${
+			modItem.innerHTML = `<img loading="lazy" src="/resources/mods/icons/${addon.id}.webp" /><div class="details"><strong>${
 				addon.name
-			}</strong><p class="mod-author">By <a href="${addon.authorLink}" target="_blank">${addon.author}</a></p><p class="mod-description">${addon.description}</p></div><div class="mod-links">${
+			}</strong><p class="author">By <a href="${addon.authorLink}" target="_blank">${addon.author}</a></p><p class="description">${addon.description}</p></div><div class="links">${
 				addonType === 'mods'
-					? `<a href="/resources/mods/downloads/${addon.id}.js" class="mod-download" download>Download</a><a class="mod-install" id="mod-install-${addon.id}" onclick="mods.toggle('${addon.id}')">Install</a>`
-					: `<a href="/resources/mods/downloads/${addon.id}.zip" class="mod-download" download>Download</a>`
+					? `<a href="/resources/mods/downloads/${addon.id}.js" class="download" download>Download</a><a class="install" id="mod-${addon.id}" onclick="mods.toggle('${addon.id}')">Install</a>`
+					: `<a href="/resources/mods/downloads/${addon.id}.zip" class="download" download>Download</a>`
 			}</div>`;
 			modList?.appendChild(modItem);
 		});
 
 		if (addonType === 'mods') {
 			const installedMods = storage.local.get('mods') ?? [];
-			const modElements = document.querySelectorAll('.mod-install');
+			const modElements = document.querySelectorAll('.mod-list > div .links .install');
 			modElements.forEach((modElement) => {
-				const modId = /^mod-install-(.*)$/.exec(modElement.id)?.[1];
+				const modId = /^mod-(.*)$/.exec(modElement.id)?.[1];
 				if (installedMods.includes(`/resources/mods/downloads/${modId}.js`)) {
 					modElement.textContent = 'Uninstall';
 					modElement.classList.add('installed');
diff --git a/src/resources/styles/themes/default.css b/src/resources/styles/themes/default.css
index 5f2c290..df4b80e 100644
--- a/src/resources/styles/themes/default.css
+++ b/src/resources/styles/themes/default.css
@@ -407,7 +407,7 @@ body {
 	scrollbar-color: #555 #333;
 }
 
-.mod-list div {
+.mod-list > div {
 	background-color: #333;
 	border-radius: 8px;
 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
@@ -417,7 +417,7 @@ body {
 	padding-bottom: 35px;
 }
 
-.mod-list div img {
+.mod-list > div img {
 	width: 80px;
 	height: 80px;
 	margin: 0 auto 10px;
@@ -425,34 +425,34 @@ body {
 	object-fit: cover;
 }
 
-.mod-list div .mod-details {
+.mod-list > div .details {
 	padding: 10px 0;
 }
 
-.mod-list div .mod-details strong {
+.mod-list > div .details strong {
 	font-size: 16px;
 	font-weight: bold;
 	margin-bottom: 5px;
 	color: #fff;
 }
 
-.mod-list div .mod-details .mod-author {
+.mod-list > div .details .author {
 	font-size: 12px;
 	color: #ccc;
 	margin-bottom: 5px;
 }
 
-.mod-list div .mod-details .mod-author a {
+.mod-list > div .details .author a {
 	color: #0000ee;
 }
 
-.mod-list div .mod-details .mod-description {
+.mod-list > div .details .description {
 	font-size: 14px;
 	color: #bbb;
 	margin-bottom: 10px;
 }
 
-.mod-list div .mod-links {
+.mod-list > div .links {
 	display: flex;
 	justify-content: space-around;
 	width: calc(100% - 10px);
@@ -462,8 +462,8 @@ body {
 	justify-content: center;
 }
 
-.mod-list div .mod-links .mod-download,
-.mod-list div .mod-links .mod-install {
+.mod-list > div .links .download,
+.mod-list > div .links .install {
 	flex: 1;
 	margin: 0 5px;
 	padding: 5px;
@@ -473,29 +473,29 @@ body {
 	transition: background-color 0.3s;
 }
 
-.mod-list div .mod-links .mod-download {
+.mod-list > div .links .download {
 	background-color: #555;
 }
 
-.mod-list div .mod-links .mod-download:hover {
+.mod-list > div .links .download:hover {
 	cursor: pointer;
 	background-color: #777;
 }
 
-.mod-list div .mod-links .mod-install {
+.mod-list > div .links .install {
 	background-color: #4c4;
 }
 
-.mod-list div .mod-links .mod-install:hover {
+.mod-list > div .links .install:hover {
 	cursor: pointer;
 	background-color: #00b300;
 }
 
-.mod-list div .mod-links .mod-install.installed {
+.mod-list > div .links .install.installed {
 	background-color: #ff0000;
 }
 
-.mod-list div .mod-links .mod-install.installed:hover {
+.mod-list > div .links .install.installed:hover {
 	background-color: #cc0000;
 }
 
@@ -509,7 +509,7 @@ body {
 	scrollbar-color: #555 #333;
 }
 
-.article-list div {
+.article-list > div {
 	background-color: #333;
 	border-radius: 8px;
 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
@@ -519,13 +519,13 @@ body {
 	padding-bottom: 0;
 }
 
-.article-list div:hover {
+.article-list > div:hover {
 	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
 	cursor: pointer;
 	background-color: #3d3d3d;
 }
 
-.article-list div img {
+.article-list > div img {
 	width: 80px;
 	height: 80px;
 	margin: 0 auto 10px;
@@ -533,18 +533,18 @@ body {
 	object-fit: cover;
 }
 
-.article-list div .article-details {
+.article-list > div .details {
 	padding: 10px 0;
 }
 
-.article-list div .article-details strong {
+.article-list > div .details strong {
 	font-size: 16px;
 	font-weight: bold;
 	margin-bottom: 5px;
 	color: #fff;
 }
 
-.article-list div .article-details p {
+.article-list > div .details p {
 	font-size: 14px;
 	color: #bbb;
 	margin-bottom: 10px;
@@ -561,7 +561,7 @@ body {
 	align-items: center;
 }
 
-.article div {
+.article > div {
 	background-color: #333;
 	padding: 20px;
 	border: 1px solid #888;
@@ -576,7 +576,7 @@ body {
 	position: relative;
 }
 
-.article div span {
+.article > div span {
 	color: #aaa;
 	float: right;
 	font-size: 28px;
@@ -586,14 +586,14 @@ body {
 	right: 15px;
 }
 
-.article div span:hover,
-.article div span:focus {
+.article > div span:hover,
+.article > div span:focus {
 	color: #fff;
 	text-decoration: none;
 	cursor: pointer;
 }
 
-.article div div a {
+.article > div div a {
 	color: #0000ee;
 }