remove unused body component, adjust spacing when footer follows blocks with background color, etc
This commit is contained in:
elisejakob
@ -4,7 +4,8 @@ import { getClient } from "@/app/client";
|
|||||||
import { FeaturedEvents } from "@/components/events/FeaturedEvents";
|
import { FeaturedEvents } from "@/components/events/FeaturedEvents";
|
||||||
import { NewsList } from "@/components/news/NewsList";
|
import { NewsList } from "@/components/news/NewsList";
|
||||||
import { UpcomingEvents } from "@/components/events/UpcomingEvents";
|
import { UpcomingEvents } from "@/components/events/UpcomingEvents";
|
||||||
import { Body } from "@/components/general/Body";
|
import { IconListBlock } from "@/components/blocks/IconListBlock";
|
||||||
|
import { FeaturedBlock } from "@/components/blocks/FeaturedBlock";
|
||||||
|
|
||||||
const HomeFragmentDefinition = graphql(`
|
const HomeFragmentDefinition = graphql(`
|
||||||
fragment Home on HomePage {
|
fragment Home on HomePage {
|
||||||
@ -47,13 +48,13 @@ export default async function Home() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="site-main index" id="main">
|
<main className="site-main index" id="main">
|
||||||
<div>
|
|
||||||
<FeaturedEvents events={featuredEvents} />
|
<FeaturedEvents events={featuredEvents} />
|
||||||
<UpcomingEvents events={events} />
|
<UpcomingEvents events={events} />
|
||||||
<NewsList heading="Siste nytt" limit={3} featured />
|
<NewsList heading="Siste nytt" limit={3} featured />
|
||||||
<blockquote>«Hvor Glæden hersker, er alltid Fest»</blockquote>
|
<blockquote>«Hvor Glæden hersker, er alltid Fest»</blockquote>
|
||||||
<Body />
|
<IconListBlock />
|
||||||
</div>
|
<FeaturedBlock />
|
||||||
|
<FeaturedBlock />
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -24,6 +24,10 @@
|
|||||||
+.featuredBlock {
|
+.featuredBlock {
|
||||||
margin-top: calc(var(--spacing-sitepadding)*-2);
|
margin-top: calc(var(--spacing-sitepadding)*-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
|
|||||||
@ -34,4 +34,8 @@
|
|||||||
background: rgba(0, 0, 0, .6);
|
background: rgba(0, 0, 0, .6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -32,7 +32,6 @@
|
|||||||
.image {
|
.image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-top: 60%;
|
padding-top: 60%;
|
||||||
background: var(--color-placeholder);
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
img {
|
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) {
|
&:nth-of-type(even) {
|
||||||
background: var(--color-background);
|
background: var(--color-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.heading {
|
.heading {
|
||||||
|
|||||||
@ -35,7 +35,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.site-main {
|
.site-main {
|
||||||
padding: var(--spacing-sitepadding);
|
padding: var(--spacing-sitepadding) var(--spacing-sitepadding) 0;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
position: relative;
|
position: relative;
|
||||||
animation: fadeUp .8s ease-out forwards;
|
animation: fadeUp .8s ease-out forwards;
|
||||||
|
|||||||
Reference in New Issue
Block a user