2048 Responsive
This commit is contained in:
Jevinca Marvella
parent
9fee35e6e6
commit
2bc7606931
87
2048.css
87
2048.css
@ -343,13 +343,7 @@ h1 {
|
|||||||
z-index: 102 !important;
|
z-index: 102 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Mobile Responsive */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.sound-controls {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: clamp(6px, 1.2vw, 10px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.icon-btn {
|
.icon-btn {
|
||||||
width: clamp(36px, 6vw, 48px);
|
width: clamp(36px, 6vw, 48px);
|
||||||
height: clamp(36px, 6vw, 48px);
|
height: clamp(36px, 6vw, 48px);
|
||||||
@ -740,16 +734,6 @@ h1 {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.pc-controls {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-controls {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Keys Display */
|
/* Keys Display */
|
||||||
.keys-container {
|
.keys-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -1190,55 +1174,6 @@ h1 {
|
|||||||
color: #38bdf8;
|
color: #38bdf8;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive Design */
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.game-over-modal {
|
|
||||||
padding: 45px 35px 38px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.game-over-buttons {
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-game-icon {
|
|
||||||
width: clamp(65px, 15vw, 75px);
|
|
||||||
height: clamp(65px, 15vw, 75px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-game-icon svg {
|
|
||||||
width: clamp(28px, 6vw, 34px);
|
|
||||||
height: clamp(28px, 6vw, 34px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================
|
|
||||||
RESPONSIVE DESIGN
|
|
||||||
========================== */
|
|
||||||
|
|
||||||
/* Touch hint for mobile only */
|
|
||||||
.touch-hint {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.touch-hint {
|
|
||||||
display: block;
|
|
||||||
position: fixed;
|
|
||||||
right: clamp(10px, 2vw, 16px);
|
|
||||||
bottom: clamp(10px, 2vh, 16px);
|
|
||||||
background: rgba(0, 0, 0, 0.65);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
padding: clamp(7px, 1.5vw, 9px) clamp(11px, 2vw, 14px);
|
|
||||||
border-radius: 10px;
|
|
||||||
font-size: clamp(10px, 1.5vw, 11px);
|
|
||||||
z-index: 4;
|
|
||||||
color: #cfefff;
|
|
||||||
border: 1px solid rgba(0, 217, 255, 0.35);
|
|
||||||
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.35);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================
|
/* ==========================
|
||||||
ADVANCED SOUND CONTROL
|
ADVANCED SOUND CONTROL
|
||||||
========================== */
|
========================== */
|
||||||
@ -1477,23 +1412,3 @@ h1 {
|
|||||||
rgba(255, 255, 255, 0.1) var(--value, 0%),
|
rgba(255, 255, 255, 0.1) var(--value, 0%),
|
||||||
rgba(255, 255, 255, 0.1) 100%);
|
rgba(255, 255, 255, 0.1) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Mobile Responsive */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.volume-panel {
|
|
||||||
min-width: clamp(220px, 50vw, 260px);
|
|
||||||
padding: 16px 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.volume-item {
|
|
||||||
margin-bottom: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.volume-label {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.volume-value {
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -2,11 +2,12 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
<title>2048</title>
|
<title>2048</title>
|
||||||
<link rel="stylesheet" href="2048_Background_Effects.css"/>
|
<link rel="stylesheet" href="2048_Background_Effects.css"/>
|
||||||
<link rel="stylesheet" href="2048_Floating_Particles.css"/>
|
<link rel="stylesheet" href="2048_Floating_Particles.css"/>
|
||||||
<link rel="stylesheet" href="2048.css"/>
|
<link rel="stylesheet" href="2048.css"/>
|
||||||
|
<link rel="stylesheet" href="2048_Responsive.css"/>
|
||||||
<link rel="stylesheet" href="2048_Tiles_Colors.css"/>
|
<link rel="stylesheet" href="2048_Tiles_Colors.css"/>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
|
||||||
|
|||||||
287
2048_Responsive.css
Normal file
287
2048_Responsive.css
Normal file
@ -0,0 +1,287 @@
|
|||||||
|
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
/* Body & Container */
|
||||||
|
body {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-container {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.game-header {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: clamp(38px, 8vw, 50px);
|
||||||
|
margin-bottom: clamp(8px, 1.2vh, 12px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-container {
|
||||||
|
gap: clamp(8px, 1.8vw, 12px);
|
||||||
|
margin-bottom: clamp(10px, 1.8vh, 14px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-box {
|
||||||
|
padding: clamp(8px, 1.2vh, 10px) clamp(16px, 2.5vw, 22px);
|
||||||
|
min-width: clamp(75px, 10vw, 95px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-label {
|
||||||
|
font-size: clamp(9px, 1.2vw, 11px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-value {
|
||||||
|
font-size: clamp(20px, 2.8vw, 25px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Top Controls */
|
||||||
|
.top-controls {
|
||||||
|
top: clamp(8px, 1.5vh, 14px);
|
||||||
|
right: clamp(8px, 1.5vw, 14px);
|
||||||
|
gap: clamp(6px, 1.2vw, 10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sound-controls {
|
||||||
|
top: clamp(8px, 1.5vh, 14px);
|
||||||
|
left: clamp(8px, 1.5vw, 14px);
|
||||||
|
gap: clamp(6px, 1.2vw, 10px);
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn {
|
||||||
|
width: clamp(32px, 5.5vw, 42px);
|
||||||
|
height: clamp(32px, 5.5vw, 42px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn svg {
|
||||||
|
width: clamp(16px, 2.8vw, 22px);
|
||||||
|
height: clamp(16px, 2.8vw, 22px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-sound {
|
||||||
|
width: clamp(32px, 5.5vw, 42px);
|
||||||
|
height: clamp(32px, 5.5vw, 42px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-sound svg {
|
||||||
|
width: clamp(16px, 2.8vw, 22px);
|
||||||
|
height: clamp(16px, 2.8vw, 22px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Board */
|
||||||
|
#board {
|
||||||
|
max-width: min(90vmin, 100%);
|
||||||
|
padding: clamp(8px, 1.8vmin, 14px);
|
||||||
|
gap: clamp(5px, 1vmin, 10px);
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tiles */
|
||||||
|
.tile {
|
||||||
|
font-size: clamp(18px, 3.2vmin, 28px);
|
||||||
|
border-radius: clamp(6px, 1.5vmin, 12px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Touch Hint */
|
||||||
|
.touch-hint {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tutorial Modal */
|
||||||
|
.tutorial-modal {
|
||||||
|
padding: 35px 30px;
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tutorial-title {
|
||||||
|
font-size: 26px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tutorial-content {
|
||||||
|
gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tutorial-section h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* PC Controls - Hide on Mobile */
|
||||||
|
.pc-controls {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Controls - Show on Mobile */
|
||||||
|
.mobile-controls {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.keys-container {
|
||||||
|
gap: clamp(15px, 4vw, 30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.keys-separator {
|
||||||
|
font-size: clamp(12px, 2vw, 16px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.key-box {
|
||||||
|
width: clamp(36px, 6vw, 46px);
|
||||||
|
height: clamp(36px, 6vw, 46px);
|
||||||
|
font-size: clamp(15px, 2.5vw, 20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.key-empty {
|
||||||
|
width: clamp(36px, 6vw, 46px);
|
||||||
|
height: clamp(36px, 6vw, 46px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.keys-label {
|
||||||
|
font-size: clamp(11px, 1.6vw, 13px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.swipe-icon {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swipe-demo p {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.objective-text {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-close {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
top: 12px;
|
||||||
|
right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-close svg {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Game Over Modal */
|
||||||
|
.game-over-modal {
|
||||||
|
padding: 40px 28px 35px;
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-over-close {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
top: 14px;
|
||||||
|
right: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-over-close svg {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-over-title {
|
||||||
|
font-size: clamp(28px, 4.5vw, 36px);
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-over-subtitle {
|
||||||
|
font-size: 13px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-over-score {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-over-score-label {
|
||||||
|
font-size: 10px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-over-score-value {
|
||||||
|
font-size: clamp(46px, 7.5vw, 60px);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-high-score {
|
||||||
|
padding: 10px 22px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.high-score-display {
|
||||||
|
margin-top: 24px;
|
||||||
|
padding-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.high-score-label {
|
||||||
|
font-size: 10px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.high-score-value {
|
||||||
|
font-size: clamp(30px, 4.5vw, 38px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-over-buttons {
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-game-icon {
|
||||||
|
width: clamp(62px, 14vw, 72px);
|
||||||
|
height: clamp(62px, 14vw, 72px);
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-game-icon svg {
|
||||||
|
width: clamp(28px, 5.5vw, 34px);
|
||||||
|
height: clamp(28px, 5.5vw, 34px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sound Control */
|
||||||
|
.sound-control-container {
|
||||||
|
top: clamp(8px, 1.5vh, 14px);
|
||||||
|
left: clamp(8px, 1.5vw, 14px);
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-sound-main {
|
||||||
|
width: clamp(36px, 6vw, 46px);
|
||||||
|
height: clamp(36px, 6vw, 46px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-sound-main svg {
|
||||||
|
width: clamp(18px, 3.2vw, 24px);
|
||||||
|
height: clamp(18px, 3.2vw, 24px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-panel {
|
||||||
|
min-width: clamp(200px, 45vw, 240px);
|
||||||
|
padding: 16px 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-item {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-label {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-value {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user