Wrap logo+golfer in .logo-row and translateX left on landscape

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken 2026-02-23 22:36:00 -05:00
parent ce6b276c11
commit 0f3ae992f9
2 changed files with 7 additions and 3 deletions

View File

@ -16,7 +16,7 @@
<!-- Lobby Screen -->
<div id="lobby-screen" class="screen active">
<h1><img src="golfball-logo.svg" alt="" class="golfball-logo"><span class="golfer-swing">🏌️</span><span class="kicked-ball"></span> <span class="golf-title">GolfCards<span class="golf-title-tld">.club</span></span></h1>
<h1><span class="logo-row"><img src="golfball-logo.svg" alt="" class="golfball-logo"><span class="golfer-swing">🏌️</span><span class="kicked-ball"></span></span> <span class="golf-title">GolfCards<span class="golf-title-tld">.club</span></span></h1>
<p class="subtitle">6-Card Golf Card Game <button id="rules-btn" class="btn btn-small btn-rules">Rules</button> <button id="leaderboard-btn" class="btn btn-small leaderboard-btn">Leaderboard</button></p>
<div class="alpha-banner">Beta Testing - Bear with us while, stuff.</div>

View File

@ -101,9 +101,13 @@ body {
filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.25));
}
.logo-row {
display: inline-block;
}
@media (orientation: landscape) {
.golfball-logo {
margin-left: -3.5rem;
.logo-row {
transform: translateX(-4.5rem);
}
}