diff --git a/Homepage_Responsive.css b/Homepage_Responsive.css index 0ffa0af..c736c4c 100644 --- a/Homepage_Responsive.css +++ b/Homepage_Responsive.css @@ -1,23 +1,32 @@ -/* RESPONSIVE */ - @media (max-width: 480px) { - /* Header */ header { - padding: 18px 20px; - flex-direction: column; - gap: 12px; + padding: 15px 20px; + flex-direction: row; + justify-content: space-between; + align-items: center; + gap: 0; /* Gap tidak wajib jika sudah space-between */ } .logo { - font-size: 24px; + /* Sesuaikan ukuran font agar muat dalam satu baris */ + font-size: 24px; letter-spacing: 2px; + margin: 0; } - .btn-login { - padding: 12px 28px; - font-size: 14px; - letter-spacing: 2px; + /* Masukkan ini di dalam @media (max-width: 480px) */ + + .btn-login, + .btn-logout { + padding: 6px 14px !important; /* Ukuran tombol jauh lebih kecil */ + font-size: 11px !important; /* Ukuran teks lebih kecil */ + letter-spacing: 1px; /* Jarak antar huruf dirapatkan */ + border-radius: 8px; /* Lengkungan sudut disesuaikan */ + min-width: auto; /* Mencegah tombol jadi terlalu lebar */ + height: auto; /* Tinggi mengikuti isi teks */ + line-height: normal; } + /* Hero Section - CENTERED & BALANCED */ .hero { diff --git a/Leaderboard_Components.css b/Leaderboard_Components.css index 46b191a..6ca4bd6 100644 --- a/Leaderboard_Components.css +++ b/Leaderboard_Components.css @@ -1,8 +1,5 @@ -/* Leaderboard_Components.css */ - -/* Back Button */ .btn-back { - position: fixed; + position: absolute; top: 20px; left: 20px; z-index: 100; @@ -33,7 +30,6 @@ filter: drop-shadow(0 0 5px rgba(0, 234, 255, 0.8)); } -/* Stat Box Component */ .stat-box { background: rgba(30, 0, 50, 0.5); border: 1px solid rgba(0, 255, 255, 0.2); @@ -63,7 +59,6 @@ text-shadow: 0 0 10px rgba(0, 234, 255, 0.6); } -/* Player Components Base Styles */ .player-info { flex: 1; display: flex; @@ -115,7 +110,6 @@ flex-shrink: 0; } -/* Animations */ @keyframes pulseBadge { 0%, 100% { transform: scale(1); diff --git a/Leaderboard_Responsive.css b/Leaderboard_Responsive.css index aca2ee2..41c5b9e 100644 --- a/Leaderboard_Responsive.css +++ b/Leaderboard_Responsive.css @@ -1,39 +1,7 @@ -/* Leaderboard_Responsive.css */ - -@media screen and (max-width: 1440px) { - .container { - width: 88%; - padding: 30px 50px; - max-height: 90vh; - } - - .btn-back { - top: 20px; - left: 20px; - width: 45px; - height: 45px; - } -} - -@media (max-width: 768px) { - .container { - padding: 35px 30px; - width: 95%; - } - - h1 { - font-size: 1.8rem; - } - - .stats-container { - grid-template-columns: repeat(3, 1fr); - gap: 10px; - } -} - @media (max-width: 480px) { .container { padding: 25px 20px; + margin-top: 50px; } h1 {