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

move arrows over frontpage video in mobile resolution

Browse source
This commit is contained in:
outfoxxed 2024-11-08 22:30:05 -08:00
parent 9e7563315a
commit 564d60f78f
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
2 changed files with 55 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -21,14 +21,15 @@ 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 class="marquee-item-spacing"/>
<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">
{videos.map(({ author, authorlink, path }, index) => <div class="marquee-item"> {videos.map(({ author, authorlink, path }, index) => <div class="marquee-item">
<div> <div>

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

@ -43,12 +43,15 @@
transform: translateX(var(--scroll)); transform: translateX(var(--scroll));
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-inline: 1rem;
} }
.marquee-item-spacing { .marquee-item-spacing {
width: 75svw; width: 75svw;
max-width: 75rem; max-width: 75rem;
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
display: flex;
justify-content: space-between;
} }
.marquee-item-content { .marquee-item-content {
@ -58,7 +61,6 @@
.marquee-scroll { .marquee-scroll {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -67,25 +69,61 @@
user-select: none; user-select: none;
align-items: stretch; align-items: stretch;
pointer-events: none; pointer-events: none;
padding-inline: 1rem;
} }
.marquee-scroll-arrow { .marquee-scroll-arrow {
flex-grow: 1;
max-width: 8rem; max-width: 8rem;
font-size: 2rem; font-size: 2rem;
pointer-events: all; pointer-events: all;
} display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.marquee-scroll-arrow > div { & > div {
height: 100%; width: 2.5rem;
aspect-ratio: 1 / 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: 0.5; opacity: 0.5;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
}
&:hover { &:hover {
opacity: 0.9;
cursor: pointer; cursor: pointer;
& > div { opacity: 0.9 }
}
}
#marquee-scroll-left {
left: -4rem;
}
#marquee-scroll-right {
right: -4rem;
}
@media not (min-width: 40rem) {
.marquee-item-spacing {
width: 100%;
align-items: center;
}
.marquee-scroll-arrow {
height: unset;
& > div {
background-color: #55555580;
border-radius: 0.2rem;
}
}
#marquee-scroll-left {
left: 2rem;
}
#marquee-scroll-right {
right: 2rem;
} }
} }