Cutlery/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-09-29 15:30:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

style: add line to titles

Browse Source
This commit is contained in:
MAZE 2023-10-31 19:53:08 +03:30
parent ef825cae68
commit ec1def0419
4 changed files with 44 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/sections/about/about.module.css
View File

@ -1,11 +1,24 @@
.about {
padding: 80px 0;
& .title {
margin-bottom: 12px;
font-family: var(--font-display);
font-size: var(--font-lg);
font-weight: 600;
& .titleWrapper {
display: flex;
align-items: center;
column-gap: 15px;
& .title {
margin-bottom: 12px;
font-family: var(--font-display);
font-size: var(--font-lg);
font-weight: 600;
}
& .line {
height: 1px;
flex-grow: 1;
background: linear-gradient(90deg, var(--color-neutral-300), transparent);
transform: translateY(-0.188rem);
}
}
& .desc {

5
src/components/sections/about/about.tsx
View File

@ -19,7 +19,10 @@ export function About() {
return (
<div className={styles.about}>
<Container>
<h2 className={styles.title}>What is Moodist?</h2>
<div className={styles.titleWrapper}>
<h2 className={styles.title}>What is Moodist?</h2>
<div className={styles.line} />
</div>
<p className={styles.desc}>
Moodist is your gateway to a world of serenity and focus. It&apos;s a
free online ambient sound generator offering <span>{count}</span>{' '}

23
src/components/sections/why/why.module.css
View File

@ -1,11 +1,24 @@
.why {
padding-bottom: 80px;
& .title {
margin-bottom: 12px;
font-family: var(--font-display);
font-size: var(--font-lg);
font-weight: 600;
& .titleWrapper {
display: flex;
align-items: center;
column-gap: 15px;
& .title {
margin-bottom: 12px;
font-family: var(--font-display);
font-size: var(--font-lg);
font-weight: 600;
}
& .line {
height: 1px;
flex-grow: 1;
background: linear-gradient(90deg, var(--color-neutral-300), transparent);
transform: translateY(-0.188rem);
}
}
& .reasons {

5
src/components/sections/why/why.tsx
View File

@ -30,7 +30,10 @@ export function Why() {
return (
<div className={styles.why}>
<Container>
<h2 className={styles.title}>Why use Moodist?</h2>
<div className={styles.titleWrapper}>
<h2 className={styles.title}>Why use Moodist?</h2>
<div className={styles.line} />
</div>
<div className={styles.reasons}>
{reasons.map(reason => (