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

9
web/src/app/page.tsx
View File

@ -4,7 +4,8 @@ import { getClient } from "@/app/client";
import { FeaturedEvents } from "@/components/events/FeaturedEvents";
import { NewsList } from "@/components/news/NewsList";
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(`
fragment Home on HomePage {
@ -47,13 +48,13 @@ export default async function Home() {
return (
<main className="site-main index" id="main">
<div>
<FeaturedEvents events={featuredEvents} />
<UpcomingEvents events={events} />
<NewsList heading="Siste nytt" limit={3} featured />
<blockquote>«Hvor Glæden hersker, er alltid Fest»</blockquote>
<Body />
</div>
<IconListBlock />
<FeaturedBlock />
<FeaturedBlock />
</main>
);
}

4
web/src/components/blocks/featuredBlock.module.scss
View File

@ -24,6 +24,10 @@
+.featuredBlock {
margin-top: calc(var(--spacing-sitepadding)*-2);
}
&:last-child {
margin-bottom: 0;
}
}
.text {

4
web/src/components/blocks/imageSliderBlock.module.scss
View File

@ -34,4 +34,8 @@
background: rgba(0, 0, 0, .6);
}
}
&:last-child {
margin-bottom: 0;
}
}

1
web/src/components/events/eventItem.module.scss
View File

@ -32,7 +32,6 @@
.image {
width: 100%;
padding-top: 60%;
background: var(--color-placeholder);
position: relative;
img {

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);
}
}

4
web/src/components/people/personSection.module.scss
View File

@ -10,6 +10,10 @@
&:nth-of-type(even) {
background: var(--color-background);
}
&:last-child {
margin-bottom: 0;
}
}
.heading {

2
web/src/css/base.scss
View File

@ -35,7 +35,7 @@ body {
}
.site-main {
padding: var(--spacing-sitepadding);
padding: var(--spacing-sitepadding) var(--spacing-sitepadding) 0;
min-height: 100vh;
position: relative;
animation: fadeUp .8s ease-out forwards;