remove unused body component, adjust spacing when footer follows blocks with background color, etc
This commit is contained in:
@ -24,6 +24,10 @@
|
||||
+.featuredBlock {
|
||||
margin-top: calc(var(--spacing-sitepadding)*-2);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
|
@ -34,4 +34,8 @@
|
||||
background: rgba(0, 0, 0, .6);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
@ -32,7 +32,6 @@
|
||||
.image {
|
||||
width: 100%;
|
||||
padding-top: 60%;
|
||||
background: var(--color-placeholder);
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
@ -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);
|
||||
}
|
||||
}
|
@ -10,6 +10,10 @@
|
||||
&:nth-of-type(even) {
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
Reference in New Issue
Block a user