mirrors/Hyperpipe
1
0
Fork 0
mirror of https://codeberg.org/Hyperpipe/Hyperpipe synced 2025-06-28 21:18:01 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add background-color to NowPlaying, change header CSS simpler

Browse source
This commit is contained in:
Denevola 2022-09-20 17:37:50 +02:00
parent b81de16510
commit 7aec15dc04
1 changed files with 15 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/App.vue
View file

@ -149,13 +149,12 @@ onMounted(() => {
</template> </template>
<header v-if="!artist.state.title"> <header v-if="!artist.state.title">
<img
v-if="data.state.art"
class="art"
loading="lazy"
:src="data.state.art" />
<div class="wrapper"> <div class="wrapper">
<img
v-if="data.state.art"
class="art"
loading="lazy"
:src="data.state.art" />
<NowPlaying @get-artist="artist.getArtist" /> <NowPlaying @get-artist="artist.getArtist" />
</div> </div>
</header> </header>
@ -215,9 +214,17 @@ header {
line-height: 1.5; line-height: 1.5;
padding-bottom: 2.5rem; padding-bottom: 2.5rem;
} }
header .wrapper {
display: flex;
flex-direction: column;
align-items: center;
grid-gap: 2rem;
padding: 1.5rem;
background-color: var(--color-background-soft);
border-radius: 0.5rem;
}
.art { .art {
display: block; display: block;
margin: 0 auto 2rem;
height: 175px; height: 175px;
width: 175px; width: 175px;
} }
@ -261,19 +268,8 @@ a,
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
header {
margin: auto;
display: flex;
place-items: center;
}
header .wrapper { header .wrapper {
display: flex; flex-direction: row;
place-items: flex-start;
flex-wrap: wrap;
}
.art {
margin: 0 2rem 0 0;
} }
} }
</style> </style>