diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 21939a1..9f66acc 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -183,6 +183,14 @@ nav{
align-items: center;
gap: 0.5rem;
}
+.right-buttons :global(button){
+ margin-bottom: 0 !important;
+}
+.right-buttons :global(#options){
+ top: calc(100% + 10px) !important;
+ bottom: unset !important;
+ right: 0 !important;
+}
.header-right{
display: flex;
align-items: center;
@@ -335,8 +343,12 @@ footer{
diff --git a/src/lib/components/LanguageSelector.svelte b/src/lib/components/LanguageSelector.svelte
index a8cbe81..ba50246 100644
--- a/src/lib/components/LanguageSelector.svelte
+++ b/src/lib/components/LanguageSelector.svelte
@@ -194,6 +194,15 @@
z-index: 1000;
display: none;
}
+ .language-options::after {
+ content: "";
+ border: 10px solid transparent;
+ border-bottom-color: var(--bg_color);
+ border-top: 0;
+ position: absolute;
+ top: -10px;
+ right: 1rem;
+ }
/* Show via JS toggle */
.language-options.open {
display: block;
@@ -222,7 +231,9 @@
background-color: var(--nord2);
}
.language-options a.active{
- background-color: var(--nord14);
+ background-color: var(--nord8);
+ color: var(--nord0);
+ font-weight: 700;
}
diff --git a/src/lib/components/UserHeader.svelte b/src/lib/components/UserHeader.svelte
index cfade3e..58e2e2c 100644
--- a/src/lib/components/UserHeader.svelte
+++ b/src/lib/components/UserHeader.svelte
@@ -81,6 +81,7 @@
background-color: var(--bg_color);
width: 30ch;
padding: 1rem;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
#options ul{
color: white;
@@ -116,22 +117,31 @@ h2 + p{
#options{
top: unset;
bottom: calc(100% + 15px);
- right: -200%;
- z-index: 99999999999999999999;
+ left: 50%;
+ right: unset;
+ transform: translateX(-50%);
+ z-index: 10;
}
.top.speech::after {
- /* (B2-1) DOWN TRIANGLE */
- border-top-color: #a53d38;
- border-bottom: 0;
- z-index: 99999999999999999999;
-
- /* (B2-2) POSITION AT BOTTOM */
- bottom: -20px; left: 50%;
+ border: 20px solid transparent;
+ border-top-color: var(--bg_color);
+ border-bottom-width: 0;
+ top: unset;
+ bottom: -20px;
+ left: 50%;
margin-left: -20px;
}
button{
margin-bottom: 2rem;
}
+ button::before{
+ content: "";
+ position: absolute;
+ inset: 0;
+ border-radius: 50%;
+ background: inherit;
+ z-index: 20;
+ }
}
diff --git a/src/routes/(main)/+layout.svelte b/src/routes/(main)/+layout.svelte
index 47fd776..d799941 100644
--- a/src/routes/(main)/+layout.svelte
+++ b/src/routes/(main)/+layout.svelte
@@ -8,11 +8,6 @@ let user = $derived(data.session?.user);
- {#snippet links()}
-
- {/snippet}
-
{#snippet language_selector_mobile()}
{/snippet}