Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile logout option

Browse Source
This commit is contained in:
Alexander Bocken 2023-07-20 15:05:08 +02:00
parent 662890b044
commit fc46b45386
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
1 changed files with 24 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/lib/components/UserHeader.svelte
View File

@ -32,17 +32,6 @@
position: absolute; position: absolute;
} }
/* (B2) BOTTOM "CALLOUT TAIL" */
.bottom.speech::after {
/* (B2-1) DOWN TRIANGLE */
border-top-color: #a53d38;
border-bottom: 0;
/* (B2-2) POSITION AT BOTTOM */
bottom: -20px; left: 50%;
margin-left: -20px;
}
/* (C) DIFFERENT TAIL POSITIONS */ /* (C) DIFFERENT TAIL POSITIONS */
/* (C1) TOP */ /* (C1) TOP */
.top.speech::after { .top.speech::after {
@ -51,31 +40,10 @@
border-top: 0; border-top: 0;
/* (C1-2) POSITION AT TOP */ /* (C1-2) POSITION AT TOP */
top: -20px; left:87%; top: -10px; left:87%;
margin-left: -20px; margin-left: -20px;
} }
/* (C2) LEFT */
.left.speech::after {
/* (C2-1) LEFT TRIANGLE */
border-right-color: black;
border-left: 0;
/* (C2-2) POSITION AT LEFT */
left: -20px; top: 50%;
margin-top: -20px;
}
/* (C3) RIGHT */
.right.speech::after {
/* (C3-1) RIGHT TRIANGLE */
border-left-color: black;
border-right: 0;
/* (C3-2) POSITION AT RIGHT */
right: -20px; top: 50%;
margin-top: -20px;
}
button{ button{
--margin-right: 1rem; --margin-right: 1rem;
@ -99,7 +67,7 @@
border-radius: 5px; border-radius: 5px;
position: absolute; position: absolute;
right: calc( -1*var(--margin-right) + 0.25rem); right: calc( -1*var(--margin-right) + 0.25rem);
top: calc(100% + 20px); top: calc(100% + 10px);
background-color: var(--bg_color); background-color: var(--bg_color);
width: 30ch; width: 30ch;
padding: 1rem; padding: 1rem;
@ -124,6 +92,28 @@
#options li:hover a{ #options li:hover a{
color: var(--red); color: var(--red);
} }
/* (B2) BOTTOM "CALLOUT TAIL" */
@media screen and (max-width: 800px){
#options{
top: unset;
bottom: calc(100% + 15px);
right: -200%;
z-index: 99999999999999999999;
}
.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%;
margin-left: -20px;
}
button{
margin-bottom: 2rem;
}
}
</style> </style>
{#if username} {#if username}