edb/neuf-www
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make some fun components for rich text and events 🎷

Browse Source
This commit is contained in:
elisejakob
2024-05-10 00:56:40 +02:00
parent e8e9842413
commit ee339e9cac
11 changed files with 297 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
web/src/components/general/Body.tsx Normal file
View File

@ -0,0 +1,81 @@
import styles from "./body.module.scss";
export const Body = () => {
return (
<div className={styles.body}>
<h1>Heading 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
tortor a interdum blandit. Sed ac purus sit amet libero posuere
molestie. Sed sodales nunc quis sapien malesuada, a faucibus turpis
blandit. Suspendisse potenti. Sed auctor enim et{" "}
<a href="#">augue dapibus</a>, vitae laoreet lacus vulputate. Nulla sed
finibus diam.
</p>
<h2>Heading 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
tortor a <strong>interdum blandit</strong>. Sed ac purus sit amet{" "}
<em>libero posuere</em>
molestie. Sed sodales nunc quis sapien malesuada, a faucibus turpis
blandit.{" "}
<em>
<strong>Suspendisse potenti</strong>
</em>
. Sed auctor enim et augue dapibus, vitae laoreet lacus vulputate. Nulla
sed finibus diam.
</p>
<p>
Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
Suspendisse potenti. Sed auctor enim et augue dapibus, vitae laoreet
lacus vulputate. Nulla sed finibus diam.
</p>
<h3>Heading 3</h3>
<ul>
<li>
Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
Suspendisse potenti.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
tortor.
</li>
</ul>
<h4>Heading 4</h4>
<ol>
<li>
Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
Suspendisse potenti.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
tortor.
</li>
</ol>
<h5>Heading 5</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
tortor a interdum blandit.
</p>
<h6>Heading 6</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
tortor a interdum blandit.
</p>
<figure>
<img src="https://studentersamfundet.no/static/b5503a1525a722cc1060b8652bf587e4/a41d1/53121578648_8b39551a09_o-1.jpg" />
<figcaption>
Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
Suspendisse potenti.
</figcaption>
</figure>
<figure>
<img src="https://byantikvaren.files.wordpress.com/2017/05/chateau-neuf.jpg?w=584" />
<figcaption>
Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
Suspendisse potenti.
</figcaption>
</figure>
</div>
);
};

110
web/src/components/general/body.module.scss Normal file
View File

@ -0,0 +1,110 @@
.body {
padding-bottom: var(--spacing-section-bottom);
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 2rem 0 1rem;
max-width: 36em;
}
h5,
h6 {
text-transform: uppercase;
letter-spacing: .04em;
}
p {
margin-bottom: 1.4em;
font-size: var(--font-size-body);
max-width: 36em;
}
ul,
ol {
margin: 1em 0 2em;
font-size: var(--font-size-body);
max-width: 36em;
list-style: none;
li {
position: relative;
margin-bottom: .75em;
padding-left: 2em;
&:before {
position: absolute;
left: 0;
}
}
}
ul {
li {
&:before {
content: "";
left: .35em;
top: .4em;
display: block;
width: .75em;
height: .75em;
border-radius: 1em;
background: var(--color-goldenOrange);
}
}
}
ol {
counter-reset: counter;
li {
&:before {
counter-increment: counter;
content: counter(counter);
font-weight: 500;
color: var(--color-chateauBlue);
border-radius: 1em;
background: var(--color-neufPink);
width: 1.5em;
height: 1.5em;
text-align: center;
}
}
}
strong {
font-weight: 700;
}
em {
font-style: italic;
}
a {
text-decoration-thickness: .1rem;
text-decoration-color: var(--color-goldenOrange);
font-weight: 500;
transition: text-decoration-color var(--transition-easing);
&:hover {
text-decoration-color: currentColor;
}
}
img {
max-width: 100%;
}
figure {
margin: 2rem 0 2.4rem;
}
figcaption {
font-size: var(--font-size-caption);
padding: .6rem 0;
max-width: 36rem;
}
}