From 24d01959c131c5e66014dd8f7d21dfd619483772 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Sun, 5 Jan 2025 01:16:38 +0100 Subject: [PATCH] css code formater --- secret/asteroidDestroyer/style.css | 60 ++++++++++++++--------------- secret/asteroidDestroyer/styles.css | 52 ++++++++++++------------- secret/game.js | 2 +- secret/guessMyNumber/styles.css | 35 +++++++++-------- secret/styles.css | 49 +++++------------------ webGames/styles.css | 8 ++-- 6 files changed, 90 insertions(+), 116 deletions(-) diff --git a/secret/asteroidDestroyer/style.css b/secret/asteroidDestroyer/style.css index d904269..be1817f 100644 --- a/secret/asteroidDestroyer/style.css +++ b/secret/asteroidDestroyer/style.css @@ -1,43 +1,43 @@ body { - margin: 0; - overflow: hidden; + margin: 0; + overflow: hidden; } canvas { - display: block; - background: black; - width: 100%; - height: 100%; + display: block; + background: black; + width: 100%; + height: 100%; } .controls { - display: none; - position: absolute; - bottom: 20px; - left: 50%; - transform: translateX(-50%); - display: flex; - justify-content: space-between; - width: 80%; + display: none; + position: absolute; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + display: flex; + justify-content: space-between; + width: 80%; } .control-btn { - display: none; - padding: 10px; - font-size: 18px; - background-color: rgba(0, 0, 0, 0.6); - color: white; - border: 1px solid #fff; - border-radius: 5px; - cursor: pointer; - flex-grow: 1; - margin: 0 5px; + display: none; + padding: 10px; + font-size: 18px; + background-color: rgba(0, 0, 0, 0.6); + color: white; + border: 1px solid #fff; + border-radius: 5px; + cursor: pointer; + flex-grow: 1; + margin: 0 5px; } -@media (max-width: 600px) { - .control-btn { - display: block; - font-size: 16px; - padding: 12px; - } +@media(max-width: 600px) { + .control-btn { + display: block; + font-size: 16px; + padding: 12px; + } } diff --git a/secret/asteroidDestroyer/styles.css b/secret/asteroidDestroyer/styles.css index 062d406..b72528c 100644 --- a/secret/asteroidDestroyer/styles.css +++ b/secret/asteroidDestroyer/styles.css @@ -2,9 +2,10 @@ margin: 0; padding: 0; box-sizing: border-box; - } - - body, html { +} + +body, +html { height: 100%; font-family: Arial, sans-serif; display: flex; @@ -13,18 +14,18 @@ background-color: #000; color: white; overflow: hidden; - } - - .landing-page { +} + +.landing-page { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; - } - - .game-background { +} + +.game-background { position: absolute; top: 0; left: 0; @@ -34,9 +35,9 @@ backdrop-filter: blur(8px); /* Apply blur effect to the background */ z-index: -1; /* Ensures it's in the background */ pointer-events: none; /* Prevent interaction with the blurred background */ - } - - .content { +} + +.content { text-align: center; z-index: 1; /* Ensure content appears above the game background */ padding: 20px; @@ -44,19 +45,19 @@ position: relative; color: white; backdrop-filter: blur(8px); /* Ensure content has some blur as well for contrast */ - } - - h1 { +} + +h1 { font-size: 2rem; margin-bottom: 20px; - } - - p { +} + +p { font-size: 1.2rem; margin-bottom: 30px; - } - - button { +} + +button { padding: 12px 24px; background-color: #ffcc00; color: black; @@ -66,9 +67,8 @@ border-radius: 5px; text-transform: uppercase; transition: background-color 0.3s ease; - } - - button:hover { +} + +button:hover { background-color: #ff9900; - } - \ No newline at end of file +} diff --git a/secret/game.js b/secret/game.js index cf84dc9..8231594 100644 --- a/secret/game.js +++ b/secret/game.js @@ -341,7 +341,7 @@ function drawGameOver() { // Restart game function restartGame() { - window.location.reload(); + window.location.reload(); } // Main game loop diff --git a/secret/guessMyNumber/styles.css b/secret/guessMyNumber/styles.css index 9aa8a3a..ef9039a 100644 --- a/secret/guessMyNumber/styles.css +++ b/secret/guessMyNumber/styles.css @@ -1,5 +1,6 @@ /* Base Reset */ -body, html { +body, +html { margin: 0; padding: 0; font-family: monospace; @@ -16,7 +17,7 @@ body, html { width: 441px; height: 735px; border-radius: 20px; - box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.6); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; align-items: center; @@ -24,7 +25,7 @@ body, html { position: relative; } -@media (max-width: 768px) { +@media(max-width: 768px) { .gameboy { width: 100vw; height: 100vh; @@ -43,7 +44,7 @@ body, html { display: flex; justify-content: center; align-items: center; - box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.5); + box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5); overflow: hidden; } @@ -54,7 +55,7 @@ body, html { /* Titles */ h1 { - font-size: 2rem; /* Increased font size */ + font-size: 2rem; /* Increased font size */ margin-bottom: 10px; text-transform: uppercase; } @@ -64,22 +65,24 @@ h1 { background-color: #9bbc0f; color: #0f380f; border: 2px solid #0f380f; - font-size: 2rem; /* Increased font size */ - width: 80px; /* Increased width */ + font-size: 2rem; /* Increased font size */ + width: 80px; /* Increased width */ text-align: center; margin: 10px auto; - padding: 10px; /* Increased padding */ + padding: 10px; /* Increased padding */ border-radius: 4px; } /* Messages */ -.message, .score, .highScore { - font-size: 1.4rem; /* Increased font size */ +.message, +.score, +.highScore { + font-size: 1.4rem; /* Increased font size */ margin: 5px 0; } .description, -.description p{ +.description p { font-size: 1.2rem; margin: 0 auto; padding: 0 auto; @@ -97,8 +100,8 @@ h1 { /* D-Pad */ .dpad { position: relative; - width: 120px; /* Increased size */ - height: 120px; /* Increased size */ + width: 120px; /* Increased size */ + height: 120px; /* Increased size */ } /* Base Styling for D-Pad Buttons */ @@ -110,7 +113,7 @@ h1 { position: absolute; width: 42px; height: 42px; - font-size: 1.5rem; /* Increased size */ + font-size: 1.5rem; /* Increased size */ display: flex; justify-content: center; align-items: center; @@ -161,7 +164,7 @@ h1 { display: flex; flex-direction: column; justify-content: space-between; - height: 140px; /* Increased height */ + height: 140px; /* Increased height */ } .btn { @@ -171,7 +174,7 @@ h1 { border-radius: 50%; width: 60px; height: 60px; - font-size: 1.8rem; /* Increased font size */ + font-size: 1.8rem; /* Increased font size */ cursor: pointer; transition: transform 0.1s, background-color 0.2s; } diff --git a/secret/styles.css b/secret/styles.css index 69f112b..7c3550c 100644 --- a/secret/styles.css +++ b/secret/styles.css @@ -11,7 +11,7 @@ body { margin: 0; line-height: 1.6; background-image: url('images/background.jpg'); - background-size: cover /* Adjust size for tape appearance */ + background-size: cover; /* Adjust size for tape appearance */ } header { @@ -27,51 +27,22 @@ header { /* Create the flickering neon light effect */ @keyframes neonFlicker { 0% { - text-shadow: - 0 0 5px #ffcc00, - 0 0 10px #ffcc00, - 0 0 15px #ffcc00, - 0 0 20px #ffcc00, - 0 0 30px #ffcc00, - 0 0 40px #ffcc00, - 0 0 50px #ffcc00; + text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00, 0 0 40px #ffcc00, 0 0 50px #ffcc00; } 20% { - text-shadow: - 0 0 3px #ffcc00, - 0 0 7px #ffcc00, - 0 0 10px #ffcc00, - 0 0 15px #ffcc00, - 0 0 20px #ffcc00; + text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00; } 40% { - text-shadow: - 0 0 5px #ffcc00, - 0 0 15px #ffcc00, - 0 0 25px #ffcc00; + text-shadow: 0 0 5px #ffcc00, 0 0 15px #ffcc00, 0 0 25px #ffcc00; } 60% { - text-shadow: - 0 0 5px #ffcc00, - 0 0 10px #ffcc00, - 0 0 15px #ffcc00, - 0 0 20px #ffcc00, - 0 0 30px #ffcc00; + text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00; } 80% { - text-shadow: - 0 0 3px #ffcc00, - 0 0 7px #ffcc00, - 0 0 10px #ffcc00; + text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00; } 100% { - text-shadow: - 0 0 5px #ffcc00, - 0 0 10px #ffcc00, - 0 0 15px #ffcc00, - 0 0 20px #ffcc00, - 0 0 30px #ffcc00, - 0 0 40px #ffcc00; + text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00, 0 0 40px #ffcc00; } } @@ -110,7 +81,7 @@ footer { filter: brightness(0.6); } -.item .description { +.item .description { padding: 30px; font-size: 1rem; color: #ccc; @@ -119,7 +90,7 @@ footer { flex-grow: 1; } -p { +p { text-decoration: none; } @@ -154,7 +125,7 @@ p { transform: translateX(-50%) translateY(-10px); } -@media (max-width: 800px) { +@media(max-width: 800px) { header { font-size: 1.5rem; } diff --git a/webGames/styles.css b/webGames/styles.css index 12800c5..3f4f099 100644 --- a/webGames/styles.css +++ b/webGames/styles.css @@ -58,7 +58,7 @@ footer { object-fit: cover; } -.item .description { +.item .description { padding: 30px; font-size: 1rem; color: #ddd; @@ -67,7 +67,7 @@ footer { flex-grow: 1; /* Allow description to take remaining space */ } -p { +p { text-decoration: none; } @@ -104,7 +104,7 @@ p { } /* Mobile Optimization */ -@media (max-width: 600px) { +@media(max-width: 600px) { header { font-size: 1.2rem; } @@ -114,7 +114,7 @@ p { width: auto; } - .grid-container{ + .grid-container { grid-template-columns: repeat(1, 1fr); } }