- Patch 3778
- Date: Dec 31 2023
+ Patch 3778
+ Date: Dec 31 2023
A hotfix addressing lingering issues of the year 2023.
With gratitude to all those who took the time to report issues.
diff --git a/scripts/backgroundRandom.js b/scripts/backgroundRandom.js
index fb0f041..69d234a 100644
--- a/scripts/backgroundRandom.js
+++ b/scripts/backgroundRandom.js
@@ -1,27 +1,49 @@
function setBackground(mediaQuery) {
const htmlElement = document.documentElement;
const imgs = [
- "../assets/images/backgrounds/1.jpg",
- "../assets/images/backgrounds/2.jpg",
- "../assets/images/backgrounds/3.jpg",
- "../assets/images/backgrounds/4.jpg",
- "../assets/images/backgrounds/5.jpg",
- "../assets/images/backgrounds/6.jpg",
+ '../assets/images/backgrounds/1.jpg',
+ '../assets/images/backgrounds/2.jpg',
+ '../assets/images/backgrounds/3.jpg',
+ '../assets/images/backgrounds/4.jpg',
+ '../assets/images/backgrounds/5.jpg',
+ '../assets/images/backgrounds/6.jpg',
];
+ // Preload images for better UX and avoid flickering
+ imgs.forEach((img) => {
+ const image = new Image();
+ image.src = img;
+ });
+
if (mediaQuery.matches) {
- htmlElement.style.backgroundColor = "var(--Background)";
- htmlElement.style.backgroundImage = "none";
+ htmlElement.style.backgroundColor = 'var(--Background)';
+ htmlElement.style.backgroundImage = 'none';
} else {
const randomImg = imgs[Math.floor(Math.random() * imgs.length)];
htmlElement.style.backgroundImage = `url(${randomImg})`;
- htmlElement.style.backgroundColor = "transparent";
+ htmlElement.style.backgroundColor = 'transparent';
}
}
-const mediaQuery = window.matchMedia("(max-width: 420px)");
+const mediaQuery = window.matchMedia('(max-width: 420px)');
+
+function handleMediaChange(event) {
+ setBackground(event);
+}
-const handleMediaChange = (event) => setBackground(event);
+// Debouncing media query changes to optimize performance
+let debounceTimeout;
+function debounce(func, delay) {
+ return function (...args) {
+ clearTimeout(debounceTimeout);
+ debounceTimeout = setTimeout(() => func.apply(this, args), delay);
+ };
+}
setBackground(mediaQuery);
-mediaQuery.addEventListener("change", handleMediaChange);
+mediaQuery.addEventListener('change', debounce(handleMediaChange, 100));
+
+// Cleanup: remove event listener if no longer needed
+function removeListener() {
+ mediaQuery.removeEventListener('change', debounce(handleMediaChange, 100));
+}
diff --git a/scripts/populateOldGamePatches.js b/scripts/populateOldGamePatches.js
index 835ca6b..315fd01 100644
--- a/scripts/populateOldGamePatches.js
+++ b/scripts/populateOldGamePatches.js
@@ -1,50 +1,77 @@
async function populate() {
- const requestURL = "../assets/data/oldgamepatches.json";
+ const requestURL = '../assets/data/oldgamepatches.json';
try {
- const response = await fetch(requestURL, { cache: "no-cache" });
+ // Fetching the patches data
+ const response = await fetch(requestURL, { cache: 'no-cache' });
if (!response.ok) {
throw new Error(`Network response was not ok: ${response.statusText}`);
}
- const patches = await response.json();
+ let patches;
- if (!patches || !patches.game) {
- throw new Error("Invalid data format: Missing game data");
+ try {
+ patches = await response.json(); // Safely parse JSON
+ } catch (jsonError) {
+ throw new Error('Failed to parse JSON data');
}
- renderPatchList(patches.game, ".gameList");
+ // Ensure game data exists
+ if (!patches || !Array.isArray(patches.game)) {
+ throw new Error('Invalid data format: Missing or malformed game data');
+ }
+
+ // Render the patches if available
+ renderPatchList(patches.game, '.gameList');
} catch (error) {
- console.error("There has been a problem with your fetch operation:", error);
+ console.error('There has been a problem with your fetch operation:', error);
+ renderError('.gameList', 'Failed to load game patches');
}
}
function renderPatchList(patchList, containerSelector) {
const container = document.querySelector(containerSelector);
+
if (!container) {
- console.error(`Container with selector ${containerSelector} not found`);
+ console.error(`Container with selector "${containerSelector}" not found.`);
return;
}
- const list = document.createElement("ul");
+ const fragment = document.createDocumentFragment(); // Use fragment for better performance
+
+ patchList.forEach(
+ ({ patch = 'Unknown Patch', link = '#', date = 'Unknown Date' }) => {
+ const listItem = document.createElement('li');
+
+ const linkElement = document.createElement('a');
+ linkElement.textContent = patch;
+ linkElement.href = link;
+ linkElement.target = '_blank';
- patchList.forEach(({ patch, link, date }) => {
- const listItem = document.createElement("li");
+ const dateElement = document.createElement('span');
+ dateElement.textContent = date;
- const linkElement = document.createElement("a");
- linkElement.textContent = patch;
- linkElement.href = link;
- linkElement.target = "_blank";
+ listItem.append(linkElement, dateElement);
+ fragment.appendChild(listItem);
+ }
+ );
- const dateElement = document.createElement("span");
- dateElement.textContent = date;
+ container.innerHTML = ''; // Clear existing content
+ container.appendChild(fragment); // Append all items at once for better performance
+}
- listItem.append(linkElement, dateElement);
- list.appendChild(listItem);
- });
+function renderError(containerSelector, message) {
+ const container = document.querySelector(containerSelector);
- container.innerHTML = "";
- container.appendChild(list);
+ if (container) {
+ container.innerHTML = `
${message}
`;
+ } else {
+ console.error(`Container with selector "${containerSelector}" not found.`);
+ }
}
-document.addEventListener("DOMContentLoaded", populate);
+
+// Load the patches on DOMContentLoaded
+document.addEventListener('DOMContentLoaded', async () => {
+ await populate(); // Use async function for potential future enhancements
+});
diff --git a/scripts/populatePatches.js b/scripts/populatePatches.js
index b932eeb..408fb54 100644
--- a/scripts/populatePatches.js
+++ b/scripts/populatePatches.js
@@ -1,24 +1,34 @@
async function populate() {
- const requestURL = "../assets/data/patches.json";
+ const requestURL = '../assets/data/patches.json';
try {
- const response = await fetch(requestURL, { cache: "no-cache" });
+ const response = await fetch(requestURL, { cache: 'no-cache' });
if (!response.ok) {
throw new Error(`Network response was not ok: ${response.statusText}`);
}
const patches = await response.json();
- const { balance, game } = patches;
+ const { balance = [], game = [] } = patches; // Provide empty arrays as fallback
- if (!balance || !game) {
- throw new Error("Invalid data format: Missing Balance or Game Data");
+ if (balance.length === 0 && game.length === 0) {
+ throw new Error('Invalid data format: Missing Balance or Game data.');
}
- renderPatchList(balance, ".BalanceJSONList");
- renderPatchList(game, ".GameJSONList");
+ // Render only if data exists
+ if (balance.length > 0) {
+ renderPatchList(balance, '.BalanceJSONList');
+ } else {
+ console.warn('No balance data available.');
+ }
+
+ if (game.length > 0) {
+ renderPatchList(game, '.GameJSONList');
+ } else {
+ console.warn('No game data available.');
+ }
} catch (error) {
- console.error("There has been a problem with your fetch operation:", error);
+ console.error('There has been a problem with your fetch operation:', error);
}
}
@@ -26,28 +36,31 @@ function renderPatchList(patchList, containerSelector) {
const container = document.querySelector(containerSelector);
if (!container) {
- console.error(`Container with selector ${containerSelector} not found`);
+ console.error(`Container with selector "${containerSelector}" not found.`);
return;
}
- const list = document.createElement("ul");
+ const fragment = document.createDocumentFragment(); // Use DocumentFragment for better performance
- patchList.forEach(({ patch, link, date }) => {
- const listItem = document.createElement("li");
+ patchList.forEach(
+ ({ patch = 'Unknown Patch', link = '#', date = 'Unknown Date' }) => {
+ const listItem = document.createElement('li');
- const linkElement = document.createElement("a");
- linkElement.textContent = patch;
- linkElement.href = link;
- linkElement.target = "_blank";
+ const linkElement = document.createElement('a');
+ linkElement.textContent = patch;
+ linkElement.href = link;
+ linkElement.target = '_blank';
- const dateElement = document.createElement("span");
- dateElement.textContent = date;
+ const dateElement = document.createElement('span');
+ dateElement.textContent = date;
+
+ listItem.append(linkElement, dateElement);
+ fragment.appendChild(listItem);
+ }
+ );
- listItem.append(linkElement, dateElement);
- list.appendChild(listItem);
- });
- container.innerHTML = "";
- container.appendChild(list);
+ container.innerHTML = ''; // Clear any existing content
+ container.appendChild(fragment); // Append all at once for better performance
}
-document.addEventListener("DOMContentLoaded", populate);
+document.addEventListener('DOMContentLoaded', populate);
diff --git a/scripts/themeSwitch.js b/scripts/themeSwitch.js
index 2462ac0..df4dd1b 100644
--- a/scripts/themeSwitch.js
+++ b/scripts/themeSwitch.js
@@ -1,23 +1,40 @@
+const THEME_KEY = 'theme';
+const LIGHT_MODE_CLASS = 'light-mode';
+
function toggleTheme() {
const htmlElement = document.documentElement;
- const currentTheme = htmlElement.classList.toggle("light-mode")
- ? "light"
- : "dark";
- localStorage.setItem("theme", currentTheme);
+ const isLightMode = htmlElement.classList.toggle(LIGHT_MODE_CLASS);
+ const newTheme = isLightMode ? 'light' : 'dark';
+ try {
+ localStorage.setItem(THEME_KEY, newTheme);
+ } catch (e) {
+ console.warn('Unable to access localStorage. Theme will reset on reload.');
+ }
}
-// Load theme on page load
-document.addEventListener("DOMContentLoaded", () => {
- const savedTheme = localStorage.getItem("theme");
- if (savedTheme) {
- document.documentElement.classList.toggle(
- "light-mode",
- savedTheme === "light"
- );
+function loadTheme() {
+ const htmlElement = document.documentElement;
+ let savedTheme;
+
+ try {
+ savedTheme = localStorage.getItem(THEME_KEY);
+ } catch (e) {
+ console.warn('Unable to access localStorage. Using default theme.');
}
- const themeToggleButton = document.querySelector("#themeToggleButton");
+ if (savedTheme === 'light') {
+ htmlElement.classList.add(LIGHT_MODE_CLASS);
+ } else {
+ htmlElement.classList.remove(LIGHT_MODE_CLASS);
+ }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ // Load the saved theme on page load
+ loadTheme();
+
+ const themeToggleButton = document.querySelector('#themeToggleButton');
if (themeToggleButton) {
- themeToggleButton.addEventListener("click", toggleTheme);
+ themeToggleButton.addEventListener('click', toggleTheme);
}
});
diff --git a/style/balance.css b/style/balance.css
index 10e32f6..1517ce9 100644
--- a/style/balance.css
+++ b/style/balance.css
@@ -1,8 +1,8 @@
-@import "../style/root.css";
-@import "../style/components/card.css";
-@import "../style/components/images.css";
-@import "../style/components/video.css";
-@import "../style/components/button.css";
+@import '../style/root.css';
+@import '../style/components/card.css';
+@import '../style/components/images.css';
+@import '../style/components/video.css';
+@import '../style/components/button.css';
h1,
h2,
@@ -10,7 +10,7 @@ h3,
h4,
h5,
h6 {
- font-family: "Ubuntu", sans-serif;
+ font-family: 'Ubuntu', sans-serif;
font-style: normal;
font-weight: normal;
margin: 10px 0;
diff --git a/style/components/button.css b/style/components/button.css
index 3e3977f..fc5a2ad 100644
--- a/style/components/button.css
+++ b/style/components/button.css
@@ -4,13 +4,16 @@ button {
background: var(--ButtonBackground);
color: var(--ButtonText);
border: none;
- text-decoration: none;
font-size: 16px;
cursor: pointer;
- transition: background 0.3s ease, color 0.3 ease;
display: inline-flex;
align-items: center;
justify-content: center;
+ transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
+ text-align: center;
+ min-width: 100px; /* Ensures a minimum button width */
+ min-height: 40px;
+ white-space: nowrap; /* Prevents text wrapping */
}
button a {
@@ -18,38 +21,52 @@ button a {
text-decoration: none;
}
-/* Hover and active states */
button:hover {
- background: var(
- --ButtonHoverBackground,
- darken(var(--ButtonBackground), 10%)
- );
+ filter: brightness(0.9); /* Darkens the background without needing darken() */
}
button:active {
- background: var(
- --ButtonActiveBackground,
- darken(var(--ButtonBackground), 20%)
- );
+ filter: brightness(0.8);
+ transform: scale(0.98); /* Subtle press effect */
}
/* Focus styles for accessibility */
button:focus {
- outline: 2px solid var(--ButtonFocusOutline, #000);
- outline-offset: 2px;
+ outline: 3px solid var(--ButtonFocusOutline, #0056b3); /* More visible focus color */
+ outline-offset: 3px;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); /* Add inner glow for better focus effect */
+}
+
+/* Disabled state */
+button:disabled {
+ background: var(--ButtonDisabledBackground, #ccc); /* Light gray background */
+ color: var(--ButtonDisabledText, #777); /* Muted text color */
+ cursor: not-allowed;
+ filter: none;
+}
+
+/* Small and large button classes for flexibility */
+button.small {
+ font-size: 12px;
+ padding: 8px 12px;
+}
+
+button.large {
+ font-size: 18px;
+ padding: 16px 24px;
}
/* Responsive design */
@media (max-width: 768px) {
button {
- font-size: 14px; /* Adjust font size for medium screens */
- padding: 10px 14px; /* Adjust padding for medium screens */
+ font-size: 14px;
+ padding: 10px 14px;
}
}
@media (max-width: 420px) {
button {
- font-size: 12px; /* Adjust font size for small screens */
- padding: 8px 12px; /* Adjust padding for small screens */
+ font-size: 12px;
+ padding: 8px 12px;
}
}
diff --git a/style/components/card.css b/style/components/card.css
index e184840..77ba4f8 100644
--- a/style/components/card.css
+++ b/style/components/card.css
@@ -1,40 +1,99 @@
-@import "../root.css";
+@import '../root.css';
+/* Main Card Styles */
.Card {
background: var(--Card);
border-radius: 1em;
- padding: 10px 20px;
+ padding: 16px 24px;
margin: 20px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); /* Softer layered shadow */
color: var(--Text);
display: flex;
flex-direction: column;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
}
+/* Card Hover for Interaction */
+.Card:hover {
+ transform: translateY(-5px); /* Slight lift effect */
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1); /* Stronger shadow on hover */
+}
+
+/* Image Styling */
.Card img {
margin-bottom: 15px;
max-width: 100%;
height: auto;
border-radius: 0.5em;
+ object-fit: cover; /* Ensure consistent image aspect ratio */
+ transition: transform 0.2s ease;
+}
+
+.Card img:hover {
+ transform: scale(1.05); /* Slight zoom effect on hover */
+}
+
+/* Optional Clickable Card */
+.Card.Clickable {
+ cursor: pointer;
+}
+
+/* Default Spacing for Card Elements */
+.Card h3,
+.Card h4,
+.Card p,
+.Card a {
+ margin: 10px 0;
+}
+
+.Card h3,
+.Card h4 {
+ font-size: 1.25rem;
}
-/* Responsive design */
+.Card p {
+ line-height: 1.6;
+ color: var(--Text);
+}
+
+/* Button inside the Card */
+.Card a {
+ display: inline-block;
+ padding: 10px 15px;
+ background: var(--ButtonBackground);
+ color: var(--ButtonText);
+ border-radius: 5px;
+ text-decoration: none;
+ margin-top: auto;
+ transition: background 0.3s ease;
+}
+
+.Card a:hover {
+ background: var(--ButtonHoverBackground);
+}
+
+/* Responsive Design */
@media (max-width: 768px) {
.Card {
- padding: 8px 16px; /* Adjust padding for medium screens */
- margin: 15px; /* Adjust margin for medium screens */
- box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); /* Slightly lighter shadow */
+ padding: 12px 20px;
+ margin: 15px;
+ box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.06);
}
}
@media (max-width: 420px) {
.Card {
- padding: 6px 12px; /* Adjust padding for small screens */
- margin: 10px; /* Adjust margin for small screens */
- box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); /* Lighter shadow for smaller screens */
+ padding: 8px 16px;
+ margin: 10px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.Card img {
- margin-bottom: 10px; /* Adjust spacing below the image */
+ margin-bottom: 10px;
+ }
+
+ .Card h3,
+ .Card h4 {
+ font-size: 1.1rem;
}
}
diff --git a/style/components/images.css b/style/components/images.css
index 5ed9a2c..3ef35b6 100644
--- a/style/components/images.css
+++ b/style/components/images.css
@@ -16,20 +16,28 @@
overflow: hidden;
resize: horizontal;
z-index: 1;
+ transition: width 0.3s ease; /* Smooth transition when resizing */
}
.ImageSlider > div:before {
- content: "";
+ content: '';
position: absolute;
right: 0;
bottom: 0;
- width: 16px;
- height: 16px;
+ width: 20px;
+ height: 20px;
padding: 5px;
background: linear-gradient(-45deg, white 50%, transparent 0);
background-clip: content-box;
cursor: ew-resize;
- filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.6));
+ filter: drop-shadow(
+ 0 0 6px rgba(0, 0, 0, 0.4)
+ ); /* Softer shadow for better aesthetics */
+ transition: transform 0.2s ease; /* Smooth interaction when clicked */
+}
+
+.ImageSlider > div:hover:before {
+ transform: scale(1.1); /* Slightly enlarge the handle on hover */
}
.ImageSlider img {
@@ -38,8 +46,12 @@
user-select: none;
width: 100%;
height: auto;
+ object-fit: cover;
+ transition: opacity 0.3s ease; /* Smooth fade effect when switching images */
+ loading: lazy; /* Lazy load for performance optimization */
}
+/* Image Showcase Styles */
.ImageShowcase {
width: 100%;
height: auto;
@@ -47,25 +59,35 @@
border-radius: 15px;
}
-/* Responsive design */
+/* Handle responsiveness for mobile devices */
@media (max-width: 768px) {
.ImageSlider > div {
- width: 25px; /* Smaller handle for medium screens */
+ width: 25px; /* Smaller handle */
}
.ImageSlider > div:before {
- width: 14px; /* Adjusted handle size */
- height: 14px; /* Adjusted handle size */
+ width: 16px; /* Adjust handle size for medium screens */
+ height: 16px;
}
}
@media (max-width: 420px) {
.ImageSlider > div {
- width: 20px; /* Smaller handle for small screens */
+ width: 20px; /* Even smaller handle for mobile */
}
.ImageSlider > div:before {
- width: 12px; /* Adjusted handle size */
- height: 12px; /* Adjusted handle size */
+ width: 12px; /* Adjust handle size for small screens */
+ height: 12px;
}
}
+
+/* ARIA and accessibility improvements */
+.ImageSlider[aria-valuenow] {
+ outline: none;
+}
+
+.ImageSlider[aria-valuenow]:focus-visible > div:before {
+ outline: 2px solid var(--ButtonFocusOutline, #000); /* Focus outline for keyboard users */
+ outline-offset: 2px;
+}
diff --git a/style/index.css b/style/index.css
index d04da2d..04f6fb7 100644
--- a/style/index.css
+++ b/style/index.css
@@ -2,173 +2,193 @@
/* Tags */
html {
- background-size: cover;
- background-repeat: no-repeat;
- min-height: 100%;
+ background-size: cover;
+ background-repeat: no-repeat;
+ min-height: 100%;
+ background-color: #222831; /* Fallback background color */
}
-body {
- background: none;
+body {
+ background: none;
}
-h1, h2, h3, h4 {
- font-family: 'Ubuntu', sans-serif;
- font-style: normal;
- font-weight: normal;
- text-align: center;
+h1,
+h2,
+h3,
+h4 {
+ font-family: 'Ubuntu', sans-serif;
+ font-style: normal;
+ font-weight: normal;
+ text-align: center;
+ margin: 0;
}
-li { list-style-type: none; }
+li {
+ list-style-type: none;
+}
-ul {
- columns: 3;
+ul {
+ columns: 3;
+ column-gap: 20px; /* Add spacing between columns */
}
a {
- color: var(--Link-Unvisited);
- text-decoration: none;
+ color: var(--Link-Unvisited);
+ text-decoration: none;
+}
+a:visited {
+ color: var(--Link-Visited);
+}
+a:hover {
+ color: var(--Link-Hover);
+}
+a:active {
+ color: var(--Link-Active);
}
-a:visited { color: var(--Link-Visited); }
-a:hover { color: var(--Link-Hover); }
-a:active { color: var(--Link-Active); }
-/* Classes */
+/* Grid and Layout */
.GridContainer {
- display: grid;
- padding: 10px;
- grid-template-columns: 0.25fr 2.5fr 2.5fr 0.25fr;
- grid-gap: 20px;
- margin: 10px;
+ display: grid;
+ padding: 10px;
+ grid-template-columns: 0.25fr 2.5fr 2.5fr 0.25fr;
+ grid-gap: 20px;
+ margin: 10px;
}
.GridItemBackground {
- position: relative;
- background: var(--IndexGridBackground);
- border-radius: 15px;
- overflow: hidden;
+ position: relative;
+ background: var(--IndexGridBackground);
+ border-radius: 15px;
+ overflow: hidden;
}
.GridItemBackground::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: inherit;
- filter: blur(25px);
- z-index: -1;
-}
-
-.Space, .Title, .BalanceContainer, .GameContainer, .BalanceDev, .Support, .BalanceJSONList, .GameJSONList {
- padding: 10px;
- text-align: center;
-}
-
-.Space {
- grid-row: 1;
- grid-column: 2 / span 2;
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: inherit;
+ filter: blur(25px);
+ z-index: -1;
+}
+
+.Space,
+.Title,
+.BalanceContainer,
+.GameContainer,
+.BalanceDev,
+.Support,
+.BalanceJSONList,
+.GameJSONList {
+ padding: 10px;
+ text-align: center;
}
.Title {
- grid-row: 2;
- grid-column: 2 / span 2;
+ grid-row: 2;
+ grid-column: 2 / span 2;
}
.Title h1 {
- font-size: 40px;
- padding: 10px 0 10px 0;
+ font-size: 40px;
+ padding: 10px 0;
}
.Title p {
- font-size: 16px;
- color: var(--Text);
+ font-size: 16px;
+ color: var(--Text);
}
.BalanceContainer {
- grid-column: 2;
- grid-row: 3;
+ grid-column: 2;
+ grid-row: 3;
}
.GameContainer {
- grid-column: 3;
- grid-row: 3;
+ grid-column: 3;
+ grid-row: 3;
}
.GameContainer p {
- text-align: center;
+ text-align: center;
}
.BalanceDev {
- grid-row: 4;
- grid-column: 2 / span 1;
+ grid-row: 4;
+ grid-column: 2 / span 1;
}
.Support {
- grid-row: 4;
- grid-column: 3 / span 1;
+ grid-row: 4;
+ grid-column: 3 / span 1;
}
-.BalanceDev p, .Support p {
- padding: 10px 0 10px 0;
+.BalanceDev p,
+.Support p {
+ padding: 10px 0;
}
-.BalanceJSONList, .GameJSONList {
- grid-row: 3;
- text-align: left;
+.BalanceJSONList,
+.GameJSONList {
+ grid-row: 3;
+ text-align: left;
}
/* Media Queries */
@media only screen and (min-width: 1400px) {
- /* Custom styles for desktops if any */
+ /* Custom styles for desktops if any */
}
@media only screen and (min-width: 992px) and (max-width: 1399px) {
- ul {
- columns: 2;
- }
+ ul {
+ columns: 2;
+ column-gap: 20px; /* Maintain column spacing */
+ }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
- ul {
- columns: 1;
- }
+ ul {
+ columns: 1;
+ column-gap: 20px; /* Maintain column spacing */
+ }
}
@media only screen and (max-width: 767px) {
- ul {
- columns: 1;
- }
- .Grid {
- grid-template-columns: 1fr;
- grid-template-rows: auto;
- }
- .Title {
- grid-row: 1;
- grid-column: 1 / span 3;
- }
- .BalanceContainer {
- grid-row: 2;
- grid-column: 1 / span 2;
- }
- .GameContainer {
- grid-row: 3;
- grid-column: 1 / span 2;
- }
- .BalanceDev {
- grid-row: 4;
- grid-column: 1 / span 2;
- }
- .Support {
- grid-row: 5;
- grid-column: 1 / span 2;
- }
+ ul {
+ columns: 1;
+ }
+ .GridContainer {
+ grid-template-columns: 1fr;
+ grid-template-rows: auto;
+ }
+ .Title {
+ grid-row: 1;
+ grid-column: 1 / span 1;
+ }
+ .BalanceContainer {
+ grid-row: 2;
+ grid-column: 1 / span 1;
+ }
+ .GameContainer {
+ grid-row: 3;
+ grid-column: 1 / span 1;
+ }
+ .BalanceDev {
+ grid-row: 4;
+ grid-column: 1 / span 1;
+ }
+ .Support {
+ grid-row: 5;
+ grid-column: 1 / span 1;
+ }
}
@media screen and (max-width: 500px) {
- ul {
- columns: 1;
- }
- .Title h1 {
- font-size: 40px;
- line-height: normal;
- }
-}
\ No newline at end of file
+ ul {
+ columns: 1;
+ }
+ .Title h1 {
+ font-size: 32px; /* Adjusted for smaller screens */
+ line-height: normal;
+ }
+}
diff --git a/style/root.css b/style/root.css
index 31615f9..0406caf 100644
--- a/style/root.css
+++ b/style/root.css
@@ -2,19 +2,26 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Ubuntu&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
-/* Declaring Default Color */
+/* Reset Box-sizing */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+/* Declaring Default Colors */
:root {
- /* Background Color */
+ /* Background Colors */
--Background: #222831;
--FooterBackground: #393e46;
--IndexGridBackground: rgba(57, 62, 70, 0.85);
--IconGridBackground: #393e46;
- /* Text Color */
+ /* Text Colors */
--Text: #eee;
--Top: #000;
- /* Card Color */
+ /* Card Colors */
--Card: #393e46;
/* Tags */
@@ -24,7 +31,7 @@
--removed: rgba(190, 92, 0, 0.6);
--added: rgba(31, 52, 172, 0.7);
- /* Link Color */
+ /* Link Colors */
--Link: #eee;
--Link-Card: #000;
--Link-Unvisited: #87cefa;
@@ -41,55 +48,49 @@
}
:root.light-mode {
- /* Background Color */
- --Background: #f2f2f2; /* Light gray for the background */
- --FooterBackground: #e0e0e0; /* Slightly darker gray for the footer */
- --IndexGridBackground: rgba(
- 240,
- 240,
- 240,
- 0.85
- ); /* Light with slight transparency */
- --IconGridBackground: #e0e0e0; /* Same as footer for consistency */
-
- /* Text Color */
- --Text: #222831; /* Dark gray for the text, matching the original dark mode background */
- --Top: #000; /* Kept black for high contrast */
-
- /* Card Color */
- --Card: #ffffff; /* White card for a clean, light look */
+ /* Background Colors */
+ --Background: #f2f2f2;
+ --FooterBackground: #e0e0e0;
+ --IndexGridBackground: rgba(240, 240, 240, 0.85);
+ --IconGridBackground: #e0e0e0;
+
+ /* Text Colors */
+ --Text: #222831;
+ --Top: #000;
+
+ /* Card Colors */
+ --Card: #ffffff;
/* Tags */
- --buff: rgba(76, 142, 34, 0.8); /* Muted green, still vibrant but softer */
- --nerf: rgba(150, 40, 40, 0.75); /* Less intense red for light backgrounds */
- --stats: rgba(0, 0, 0, 0.4); /* Lighter black to match the new scheme */
- --removed: rgba(185, 80, 20, 0.7); /* Softer orange-brown */
- --added: rgba(50, 90, 200, 0.75); /* Brighter blue for readability */
-
- /* Link Color */
- --Link: #0056b3; /* Deep blue for links */
- --Link-Card: #ffffff; /* White for link on card background */
- --Link-Unvisited: #0047ab; /* Stronger blue for unvisited links */
- --Link-Visited: #8b0000; /* Darker red for visited links */
- --Link-Hover: #d4a020; /* Warm gold hover effect */
+ --buff: rgba(76, 142, 34, 0.8);
+ --nerf: rgba(150, 40, 40, 0.75);
+ --stats: rgba(0, 0, 0, 0.4);
+ --removed: rgba(185, 80, 20, 0.7);
+ --added: rgba(50, 90, 200, 0.75);
+
+ /* Link Colors */
+ --Link: #0056b3;
+ --Link-Card: #ffffff;
+ --Link-Unvisited: #0047ab;
+ --Link-Visited: #8b0000;
+ --Link-Hover: #d4a020;
/* Other */
- --Strike: #666; /* Medium gray for strikethroughs */
- --Line: #bbb; /* Light gray for lines */
- --LM-HR: #aaa; /* Slightly darker line for HRs */
- --ButtonBackground: #4474c1; /* Kept the same button blue for consistency */
- --ButtonText: #fff; /* White text for buttons */
- --IconGlow: rgba(0, 0, 0, 0.2); /* Soft shadow for light mode */
+ --Strike: #666;
+ --Line: #bbb;
+ --LM-HR: #aaa;
+ --ButtonBackground: #4474c1;
+ --ButtonText: #fff;
+ --IconGlow: rgba(0, 0, 0, 0.2);
}
/* Base Elements */
body {
background: var(--Background);
- font-family: sans-serif;
- font-size: 16px;
- line-height: 22px;
+ font-family: 'Open Sans', 'Ubuntu', sans-serif;
+ font-size: 1rem;
+ line-height: 1.5;
color: var(--Text);
- box-sizing: border-box;
margin: 0;
padding: 0;
}
@@ -107,13 +108,13 @@ footer {
}
h1 {
- font-size: 30px;
+ font-size: 1.875rem; /* 30px */
}
h2 {
- font-size: 25px;
+ font-size: 1.5625rem; /* 25px */
}
h3 {
- font-size: 20px;
+ font-size: 1.25rem; /* 20px */
}
s {
@@ -127,13 +128,14 @@ img {
}
video {
- width: 900px;
- height: 100%;
+ width: 100%; /* Make it responsive */
+ max-width: 900px;
+ height: auto;
}
footer {
text-align: center;
- font-size: 16px;
+ font-size: 1rem;
background: var(--FooterBackground);
padding: 10px 0 5px;
}
@@ -172,10 +174,10 @@ footer {
display: flex;
}
-.FlexGrow1 {
+.FlexGrow-1 {
flex-grow: 1;
}
-.FlexGrow4 {
+.FlexGrow-4 {
flex-grow: 4;
}
+ 
+ FAForever Patchnotes
+ 
+ 
+ 
T4 Fatboy