quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

width-match video carousel to rest of page

Browse source
This commit is contained in:
outfoxxed 2025-06-08 04:23:24 -07:00
parent 068e206226
commit b608c936b3
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
2 changed files with 33 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/marquee/Marquee.astro
View file

@ -26,13 +26,11 @@ const videos = [
--- ---
<div class="marquee"> <div class="marquee">
<div class="marquee-scroll"> <div class="marquee-scroll">
<div class="marquee-item-spacing"> <div id="marquee-scroll-left" class="marquee-scroll-arrow">
<div id="marquee-scroll-left" class="marquee-scroll-arrow"> <div><Icon name="caret-left"/></div>
<div><Icon name="caret-left"/></div> </div>
</div> <div id="marquee-scroll-right" class="marquee-scroll-arrow">
<div id="marquee-scroll-right" class="marquee-scroll-arrow"> <div><Icon name="caret-right"/></div>
<div><Icon name="caret-right"/></div>
</div>
</div> </div>
</div> </div>
<div id="marquee-content" class="marquee-content" data-scroll="0" data-media-index="0"> <div id="marquee-content" class="marquee-content" data-scroll="0" data-media-index="0">

47
src/styles/components/marquee.css
View file

@ -26,8 +26,10 @@
} }
.marquee { .marquee {
position: relative; position: relative;
display: flex;
width: 100%; width: 100%;
margin-block: 1.618rem; margin-block: 1.618rem;
justify-content: center;
} }
.marquee-content { .marquee-content {
@ -44,14 +46,12 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-inline: 0.5rem; padding-inline: 0.5rem;
& > div { max-width: 75rem }
} }
.marquee-item-spacing { .marquee-item-spacing {
width: calc(100svw - 12rem); width: 100%;
max-width: 75rem;
aspect-ratio: 16 / 9;
display: flex;
justify-content: space-between;
} }
.marquee-item-content { .marquee-item-content {
@ -61,8 +61,10 @@
.marquee-scroll { .marquee-scroll {
position: absolute; position: absolute;
width: 100%; width: 100%;
max-width: 85rem;
height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: space-between;
align-items: center; align-items: center;
transition: transition:
background-color 0.3s, background-color 0.3s,
@ -81,7 +83,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center;
& > div { & > div {
width: 2.5rem; width: 2.5rem;
@ -101,12 +102,10 @@
} }
} }
#marquee-scroll-left { .marquee-arrow-spacing {
left: -4rem; justify-content: space-between;
} align-items: center;
height: 100%;
#marquee-scroll-right {
right: -4rem;
} }
@media not (min-width: 40rem) { @media not (min-width: 40rem) {
@ -115,6 +114,19 @@
align-items: center; align-items: center;
} }
.marquee-scroll-arrow {
height: unset;
}
}
/* nasty mismatch w/ not but matches main-page.css */
@media (min-width: 63rem) {
.marquee-item {
padding-inline: 1.5rem;
}
}
@media not (min-width: 83rem) {
.marquee-scroll-arrow { .marquee-scroll-arrow {
height: unset; height: unset;
& > div { & > div {
@ -123,11 +135,8 @@
} }
} }
#marquee-scroll-left { .marquee-scroll {
left: 1rem; width: 92%;
} align-items: center;
#marquee-scroll-right {
right: 1rem;
} }
} }