mirror of
https://github.com/remvze/moodist.git
synced 2025-09-29 15:30:49 -04:00
style: decorate paragraphs
This commit is contained in:
parent
d725d59703
commit
1a6ecd82ab
@ -35,19 +35,66 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
& .desc {
|
& .desc {
|
||||||
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 450px;
|
max-width: 500px;
|
||||||
|
padding: 24px 0;
|
||||||
|
padding-left: 24px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
line-height: 1.6;
|
line-height: 1.65;
|
||||||
color: var(--color-foreground-subtle);
|
color: var(--color-foreground-subtle);
|
||||||
text-align: center;
|
text-align: left;
|
||||||
|
background: linear-gradient(90deg, rgb(24 24 27 / 70%), transparent);
|
||||||
|
border-radius: 20px;
|
||||||
|
|
||||||
&:not(:last-of-type) {
|
&:first-of-type {
|
||||||
margin-bottom: 24px;
|
border-top: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:nth-of-type(odd)::after {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
width: 1px;
|
||||||
|
height: 70%;
|
||||||
|
content: '';
|
||||||
|
background: linear-gradient(
|
||||||
|
transparent,
|
||||||
|
var(--color-neutral-300),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-of-type(even) {
|
||||||
|
padding-right: 24px;
|
||||||
|
padding-left: 0;
|
||||||
|
text-align: right;
|
||||||
|
background: linear-gradient(90deg, transparent, rgb(24 24 27 / 70%));
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-of-type(even)::after {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
width: 1px;
|
||||||
|
height: 70%;
|
||||||
|
content: '';
|
||||||
|
background: linear-gradient(
|
||||||
|
transparent,
|
||||||
|
var(--color-neutral-300),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* &:not(:last-of-type) {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
} */
|
||||||
}
|
}
|
||||||
|
|
||||||
& .divider {
|
/* & .divider {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
margin: 0 auto 24px;
|
margin: 0 auto 24px;
|
||||||
@ -57,5 +104,5 @@
|
|||||||
var(--color-neutral-300),
|
var(--color-neutral-300),
|
||||||
transparent
|
transparent
|
||||||
);
|
);
|
||||||
}
|
} */
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user