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 @@
-
+
How To Make An Eaglercraft Server

Have you ever wondered how to make an Eaglercraft Server? Read this article to find out how!

-
+
Setting Up a Cloudflare Tunnel for an Eaglercraft Server

This brief guide walks you through configuring a Cloudflare Tunnel for your Eaglercraft server.

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 = `
${ + modItem.innerHTML = `
${ addon.name - }

By ${addon.author}

${addon.description}

`; 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; }