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;
|
||||
}
|
||||
|
||||
/* Mobile Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.sound-controls {
|
||||
flex-direction: column;
|
||||
gap: clamp(6px, 1.2vw, 10px);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
width: clamp(36px, 6vw, 48px);
|
||||
height: clamp(36px, 6vw, 48px);
|
||||
@ -740,16 +734,6 @@ h1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pc-controls {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.mobile-controls {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Keys Display */
|
||||
.keys-container {
|
||||
display: flex;
|
||||
@ -1190,55 +1174,6 @@ h1 {
|
||||
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
|
||||
========================== */
|
||||
@ -1477,23 +1412,3 @@ h1 {
|
||||
rgba(255, 255, 255, 0.1) var(--value, 0%),
|
||||
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">
|
||||
<head>
|
||||
<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>
|
||||
<link rel="stylesheet" href="2048_Background_Effects.css"/>
|
||||
<link rel="stylesheet" href="2048_Floating_Particles.css"/>
|
||||
<link rel="stylesheet" href="2048.css"/>
|
||||
<link rel="stylesheet" href="2048_Responsive.css"/>
|
||||
<link rel="stylesheet" href="2048_Tiles_Colors.css"/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||||
<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