209df5d9f2
- Refactored all components in src/components to: - Use arrow function components and prop destructuring - Add JSDoc for all exported components - Improve accessibility (aria-labels, roles, etc.) - Use correct key usage in lists - Add comments for non-obvious logic - Use modern event handler patterns and memoization where appropriate - Refactored src/pages/index.astro: - Removed <html>, <head>, and <body> (should be in layout) - Used semantic <main> for main content - Kept only necessary imports and markup - Refactored src/styles/index.css: - Removed duplicate rules - Ensured only global resets/utilities are present - Added comments for clarity - Ensured no component-specific styles are present - Used consistent formatting Brings the codebase in line with modern Astro and Preact best practices, improves maintainability, accessibility, and code clarity.
74 lines
1.5 KiB
CSS
74 lines
1.5 KiB
CSS
/* Global resets and utility styles */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background-color: #1a1a1a;
|
|
color: white;
|
|
min-height: 100vh;
|
|
overscroll-behavior: none;
|
|
}
|
|
input, select {
|
|
min-height: 44px;
|
|
padding: 12px;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
/* Responsive adjustments for fullscreen toggle button */
|
|
@media screen and (max-width: 480px) {
|
|
.fullscreen-toggle {
|
|
bottom: 15px;
|
|
right: 15px;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
|
|
/* Utility button for new game (global, not component-specific) */
|
|
.new-game-button {
|
|
width: 100%;
|
|
background: #222;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 0;
|
|
font-size: 1.4rem;
|
|
font-weight: 600;
|
|
padding: 20px 0;
|
|
margin-bottom: 16px;
|
|
cursor: pointer;
|
|
transition: background 0.2s, color 0.2s;
|
|
text-align: center;
|
|
display: block;
|
|
}
|
|
|
|
.new-game-button:hover {
|
|
background: #333;
|
|
}
|
|
|
|
/* Modal overlay (global, not component-specific) */
|
|
.modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
z-index: 9999;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal.show {
|
|
display: flex;
|
|
} |