diff options
| author | Pinapelz <yukais@pinapelz.com> | 2025-02-14 00:44:34 -0800 |
|---|---|---|
| committer | Pinapelz <yukais@pinapelz.com> | 2025-02-14 00:44:34 -0800 |
| commit | c5286c493686ae4b2af0b4dae4119480626db50e (patch) | |
| tree | 7bd1d55c2e43a51611d2be038a11970f8c1184ed | |
| parent | 00c4865089d66c3f9726e3a114639c3d784bdee8 (diff) | |
update rhythm-game-tierlist
- fix mobile css
| -rw-r--r-- | rhythm-games-tierlist.html | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/rhythm-games-tierlist.html b/rhythm-games-tierlist.html index ef6d9ac..02699e1 100644 --- a/rhythm-games-tierlist.html +++ b/rhythm-games-tierlist.html @@ -5,6 +5,7 @@ <title>Exported Tier List</title> <link rel="stylesheet" href="/tiers.css"> <script src="/tiers.js" defer></script> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-color: #333; @@ -210,6 +211,90 @@ img:hover { display: none !important; } +/* ...existing code... */ + +/* Add these media queries at the end of the file */ +@media screen and (max-width: 768px) { + .tierlist span { + min-width: 60px; + min-height: 60px; + font-size: 20px; + } + + .tierlist div.row { + height: auto; + min-height: 60px; + flex-direction: column; + } + + span.header { + width: 100%; + height: 40px; + } + + span.items { + padding: 5px; + min-height: 60px; + } + + img { + max-height: 60px; + } + + .button { + height: 60px; + width: 60px; + } + + .button img { + width: 40px; + } + + .buttons-container { + gap: 10px; + flex-wrap: wrap; + } + + .modal-content { + padding: 15px; + width: 95%; + } + + #modal-title, #modal-description { + width: 90%; + } + + #modal-description { + height: 20vh; + } + + .title { + font-size: 20px; + margin-bottom: 10px; + } +} + +/* For very small screens */ +@media screen and (max-width: 480px) { + .tierlist span { + min-width: 50px; + min-height: 50px; + font-size: 16px; + } + + .button { + height: 50px; + width: 50px; + } + + .button img { + width: 30px; + } + + img { + max-height: 50px; + } +} </style> </head> <body> |