mirror of
https://github.com/remvze/moodist.git
synced 2025-12-17 00:44:14 +00:00
style: add effect to about
This commit is contained in:
parent
4515aa8e7a
commit
1a499be244
3 changed files with 9 additions and 33 deletions
|
|
@ -1,13 +1,12 @@
|
|||
.about {
|
||||
margin-top: 80px;
|
||||
|
||||
& .title {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--font-lg);
|
||||
font-weight: 600;
|
||||
& .effect {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 80px;
|
||||
background: linear-gradient(var(--color-neutral-50), transparent);
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
& .paragraph {
|
||||
padding: 30px 0;
|
||||
background: linear-gradient(
|
||||
transparent,
|
||||
|
|
@ -35,20 +34,6 @@
|
|||
& .desc {
|
||||
line-height: 1.6;
|
||||
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
|
||||
);
|
||||
} */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
import { Balancer } from 'react-wrap-balancer';
|
||||
|
||||
import { Container } from '@/components/container';
|
||||
import { count as soundCount } from '@/lib/sounds';
|
||||
|
||||
|
|
@ -17,22 +15,16 @@ export function About() {
|
|||
|
||||
return (
|
||||
<section className={styles.about}>
|
||||
<Container tight>
|
||||
<h1 className={styles.title}>Free Ambient Sounds</h1>
|
||||
<div className={styles.effect} />
|
||||
|
||||
<Container tight>
|
||||
{paragraphs.map((paragraph, index) => (
|
||||
<div className={styles.paragraph} key={index}>
|
||||
<div className={styles.counter}>
|
||||
<span>0{index + 1}</span> / 0{paragraphs.length}
|
||||
</div>
|
||||
|
||||
<p className={styles.desc}>
|
||||
<Balancer>{paragraph}</Balancer>
|
||||
</p>
|
||||
|
||||
{index < paragraphs.length - 1 && (
|
||||
<div className={styles.divider} />
|
||||
)}
|
||||
<p className={styles.desc}>{paragraph}</p>
|
||||
</div>
|
||||
))}
|
||||
</Container>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
.source {
|
||||
/* margin-top: 80px; */
|
||||
|
||||
/* margin-top: 40px; */
|
||||
margin-top: 20px;
|
||||
|
||||
& .wrapper {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue