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

remove unused body component, adjust spacing when footer follows blocks with background color, etc

Browse Source
This commit is contained in:
elisejakob
2024-05-20 23:29:26 +02:00
parent 574a3a02a4
commit 9e0466f78b
8 changed files with 22 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
web/src/components/general/Body.tsx
View File

@ -1,88 +0,0 @@
import { FeaturedBlock } from "../blocks/FeaturedBlock";
import { IconListBlock } from "../blocks/IconListBlock";
import styles from "./body.module.scss";
export const Body = () => {
return (
<>
<IconListBlock />
<FeaturedBlock />
<FeaturedBlock />
<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>
</>
);
};

123
web/src/components/general/body.module.scss
View File

@ -1,123 +0,0 @@
.body {
padding-bottom: var(--spacing-section-bottom);
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
blockquote {
margin: 0 auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 2rem 0 1rem;
max-width: var(--size-width-p);
}
h5,
h6 {
text-transform: uppercase;
letter-spacing: .04em;
}
p {
margin-bottom: 1.4em;
font-size: var(--font-size-body);
max-width: var(--size-width-p);
}
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-placeholder);
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: var(--size-width-p);
}
}