hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-17 08:54:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: add effect to about

Browse source
This commit is contained in:
MAZE 2024-02-09 20:56:33 +03:30
parent 4515aa8e7a
commit 1a499be244
3 changed files with 9 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/components/about/about.module.css
View file

@ -1,13 +1,12 @@
.about { .about {
margin-top: 80px; & .effect {
position: sticky;
& .title { top: 0;
font-family: var(--font-display); height: 80px;
font-size: var(--font-lg); background: linear-gradient(var(--color-neutral-50), transparent);
font-weight: 600;
} }
.paragraph { & .paragraph {
padding: 30px 0; padding: 30px 0;
background: linear-gradient( background: linear-gradient(
transparent, transparent,
@ -35,20 +34,6 @@
& .desc { & .desc {
line-height: 1.6; line-height: 1.6;
color: var(--color-foreground-subtle); color: var(--color-foreground-subtle);
/* text-align: center; */
} }
} }
/* & .divider {
width: 80px;
height: 1px;
margin: 0 auto 24px;
background: linear-gradient(
90deg,
transparent,
var(--color-neutral-300),
transparent
);
} */
} }

14
src/components/about/about.tsx
View file

@ -1,5 +1,3 @@
import { Balancer } from 'react-wrap-balancer';
import { Container } from '@/components/container'; import { Container } from '@/components/container';
import { count as soundCount } from '@/lib/sounds'; import { count as soundCount } from '@/lib/sounds';
@ -17,22 +15,16 @@ export function About() {
return ( return (
<section className={styles.about}> <section className={styles.about}>
<Container tight> <div className={styles.effect} />
<h1 className={styles.title}>Free Ambient Sounds</h1>
<Container tight>
{paragraphs.map((paragraph, index) => ( {paragraphs.map((paragraph, index) => (
<div className={styles.paragraph} key={index}> <div className={styles.paragraph} key={index}>
<div className={styles.counter}> <div className={styles.counter}>
<span>0{index + 1}</span> / 0{paragraphs.length} <span>0{index + 1}</span> / 0{paragraphs.length}
</div> </div>
<p className={styles.desc}> <p className={styles.desc}>{paragraph}</p>
<Balancer>{paragraph}</Balancer>
</p>
{index < paragraphs.length - 1 && (
<div className={styles.divider} />
)}
</div> </div>
))} ))}
</Container> </Container>

1
src/components/source/source.module.css
View file

@ -1,7 +1,6 @@
.source { .source {
/* margin-top: 80px; */ /* margin-top: 80px; */
/* margin-top: 40px; */
margin-top: 20px; margin-top: 20px;
& .wrapper { & .wrapper {