Align auth lang switch next to title
This commit is contained in:
@@ -15,3 +15,10 @@
|
||||
height: auto;
|
||||
filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
|
||||
.auth-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@@ -36,10 +36,12 @@
|
||||
background: #fffaf3;
|
||||
border-radius: 10px;
|
||||
padding: 6px 10px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
min-width: 44px;
|
||||
font-family: "Twemoji Country Flags", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", emoji, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
.lang-menu {
|
||||
position: absolute;
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<!-- Optional: set data-app-base if served from a subfolder (e.g., /vote) -->
|
||||
@@ -17,15 +18,13 @@
|
||||
<div class="auth-logo">
|
||||
<img src="logo.png" alt="Pick'n'Play logo" />
|
||||
</div>
|
||||
<div class="stack">
|
||||
<div class="auth-title-row">
|
||||
<h2 id="auth-title" data-i18n="auth.loginHeading">Log in</h2>
|
||||
</div>
|
||||
<div class="stack lang-field">
|
||||
<div class="lang-switch" id="lang-switch-auth">
|
||||
<button class="lang-button" type="button" aria-label="Language" title="Language">🌐</button>
|
||||
<div class="lang-menu hidden">
|
||||
<button type="button" data-lang="en" title="English" data-i18n-attr="title">🇺🇸 <span class="sr-only" data-i18n="lang.en">English</span></button>
|
||||
<button type="button" data-lang="de" title="Deutsch" data-i18n-attr="title">🇩🇪 <span class="sr-only" data-i18n="lang.de">Deutsch</span></button>
|
||||
<button type="button" data-lang="en" title="English" data-i18n-attr="title" class="flag-button">🇺🇸</button>
|
||||
<button type="button" data-lang="de" title="Deutsch" data-i18n-attr="title" class="flag-button">🇩🇪</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -79,8 +78,8 @@
|
||||
<div class="lang-switch" id="lang-switch-status">
|
||||
<button class="lang-button" type="button" aria-label="Language" title="Language">🌐</button>
|
||||
<div class="lang-menu hidden">
|
||||
<button type="button" data-lang="en" title="English" data-i18n-attr="title">🇺🇸 <span class="sr-only" data-i18n="lang.en">English</span></button>
|
||||
<button type="button" data-lang="de" title="Deutsch" data-i18n-attr="title">🇩🇪 <span class="sr-only" data-i18n="lang.de">Deutsch</span></button>
|
||||
<button type="button" data-lang="en" title="English" data-i18n-attr="title" class="flag-button">🇺🇸</button>
|
||||
<button type="button" data-lang="de" title="Deutsch" data-i18n-attr="title" class="flag-button">🇩🇪</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user