Jonas_Jones/jonasjones.dev
1
0
Fork 0
mirror of https://github.com/JonasunderscoreJones/jonasjones.dev.git synced 2025-10-23 00:49:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

fixed lastfm widget

Browse source
This commit is contained in:
Jonas_Jones 2025-06-08 00:54:45 +02:00
parent 4ff0832062
commit 2f85c4a86f
1 changed files with 22 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/components/NavBar.svelte
View file

@ -117,6 +117,11 @@
</ul> </ul>
</nav> </nav>
</div> </div>
<div class="logo" style="opacity: 0">
<a href="/">
<img src="/icon_80x80.webp" alt="Logo" class="logo" />
</a>
</div>
<div class="lastfm"> <div class="lastfm">
<a href="https://fm.jonasjones.dev" aria-label="Last.fm Profile"> <a href="https://fm.jonasjones.dev" aria-label="Last.fm Profile">
<span class="link"></span> <span class="link"></span>
@ -310,16 +315,20 @@
align-items: right; align-items: right;
float: right; float: right;
display: flex; display: flex;
position: relative; position: absolute;
top: 0;
right: 0;
right: 3px; right: 3px;
top: 3.5px; top: 3.5px;
border-radius: 5px; border-radius: 5px;
max-width: 300px; max-width: 300px;
height: 43px; height: 43px;
overflow: hidden; overflow: hidden;
transition: margin-right 0.3s ease-in-out;
} }
.lastfm:hover { .lastfm:hover {
background-color: var(--header-background-color-hover); background-color: var(--header-background-color-hover);
margin-right: 15px;
} }
.lastfm img { .lastfm img {
width: 30px; width: 30px;
@ -359,13 +368,16 @@
align-self: center; align-self: center;
} }
.lastfm-text { .lastfm-text {
display: none; display: block;
transition: width 0.3s ease-out; max-width: 0;
} transition: max-width 0.3s ease-in-out;
overflow: hidden;
white-space: nowrap;
}
.lastfm:hover .lastfm-text { .lastfm:hover .lastfm-text {
display:block max-width: 500px;
} }
.link { .link {
position: absolute; position: absolute;
@ -396,7 +408,7 @@
@media only screen and (max-width: 650px) and (min-width: 375px) { @media only screen and (max-width: 650px) and (min-width: 375px) {
.lastfm-text { .lastfm-text {
display: block; max-width: 500px;
} }
.nav-links { .nav-links {
display: none; display: none;
@ -416,6 +428,7 @@
@media only screen and (max-width: 375px) and (min-width: 300px) { @media only screen and (max-width: 375px) and (min-width: 300px) {
.lastfm { .lastfm {
width: 50px; width: 50px;
margin-right: 15px;
} }
.nav-links { .nav-links {
display: none; display: none;
@ -431,6 +444,7 @@
@media only screen and (max-width: 300px) and (min-width: 0px) { @media only screen and (max-width: 300px) and (min-width: 0px) {
.lastfm { .lastfm {
width: 50px; width: 50px;
margin-right: 15px;
} }
.nav-links { .nav-links {
display: none; display: none;