messing around with spacing and page headers
This commit is contained in:
@ -12,7 +12,7 @@ export default async function Page() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="site-main" id="main">
|
<main className="site-main" id="main">
|
||||||
<PageHeader heading={index.title} lead={index.lead} />
|
<PageHeader heading={index.title} lead={index.lead} align="left" />
|
||||||
<NewsList news={news} />
|
<NewsList news={news} />
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
|
@ -19,7 +19,7 @@ export default async function Page() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="site-main" id="main">
|
<main className="site-main" id="main">
|
||||||
<PageHeader heading="Dette skjer på Chateau Neuf" />
|
<PageHeader heading="Dette skjer på Chateau Neuf" align="left" />
|
||||||
<Suspense>
|
<Suspense>
|
||||||
<EventContainer
|
<EventContainer
|
||||||
events={events}
|
events={events}
|
||||||
|
@ -3,12 +3,14 @@ import styles from "./pageHeader.module.scss";
|
|||||||
export const PageHeader = ({
|
export const PageHeader = ({
|
||||||
heading,
|
heading,
|
||||||
lead,
|
lead,
|
||||||
|
align
|
||||||
}: {
|
}: {
|
||||||
heading: string;
|
heading: string;
|
||||||
lead?: string;
|
lead?: string;
|
||||||
|
align?: "center" | "left"
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<div className={styles.pageHeader}>
|
<div className={`${styles.pageHeader} ${align && styles[align]}`}>
|
||||||
<h1 className={styles.title}>{heading}</h1>
|
<h1 className={styles.title}>{heading}</h1>
|
||||||
{lead && (
|
{lead && (
|
||||||
<div className="lead" dangerouslySetInnerHTML={{ __html: lead }} />
|
<div className="lead" dangerouslySetInnerHTML={{ __html: lead }} />
|
||||||
|
@ -1,6 +1,12 @@
|
|||||||
.pageHeader {
|
.pageHeader {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: var(--spacing-s) 0 var(--spacing-sitepadding-block);
|
width: var(--size-width-lead);
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0 auto var(--spacing-l);
|
||||||
|
|
||||||
|
&.left {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
gap: var(--spacing-gap-column);
|
gap: var(--spacing-gap-column);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: var(--spacing-xl) auto;
|
margin: var(--spacing-xxl) auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.floorHeading {
|
.floorHeading {
|
||||||
|
@ -59,7 +59,6 @@ p {
|
|||||||
&.lead {
|
&.lead {
|
||||||
font-size: var(--font-size-lead);
|
font-size: var(--font-size-lead);
|
||||||
max-width: 34em;
|
max-width: 34em;
|
||||||
margin-bottom: var(--spacing-m);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -67,7 +66,6 @@ p {
|
|||||||
.lead p {
|
.lead p {
|
||||||
font-size: var(--font-size-lead);
|
font-size: var(--font-size-lead);
|
||||||
max-width: 34em;
|
max-width: 34em;
|
||||||
margin-bottom: var(--spacing-m);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
@ -211,9 +209,7 @@ select {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.anchorLinks {
|
.anchorLinks {
|
||||||
/*position: sticky;
|
margin-top: var(--spacing-xl);
|
||||||
top: 0;*/
|
|
||||||
|
|
||||||
>span {
|
>span {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: var(--spacing-xs);
|
margin-bottom: var(--spacing-xs);
|
||||||
|
@ -55,7 +55,8 @@
|
|||||||
--spacing-s: 1rem;
|
--spacing-s: 1rem;
|
||||||
--spacing-m: 2rem;
|
--spacing-m: 2rem;
|
||||||
--spacing-l: 3rem;
|
--spacing-l: 3rem;
|
||||||
--spacing-xl: 6rem;
|
--spacing-xl: 4rem;
|
||||||
|
--spacing-xxl: 6rem;
|
||||||
--spacing-section-bottom: var(--spacing-l);
|
--spacing-section-bottom: var(--spacing-l);
|
||||||
|
|
||||||
// sizes
|
// sizes
|
||||||
@ -75,7 +76,7 @@
|
|||||||
|
|
||||||
@media (min-width: 1400px) {
|
@media (min-width: 1400px) {
|
||||||
:root {
|
:root {
|
||||||
--spacing-sitepadding-block: 2.5rem;
|
--spacing-sitepadding-block: 2.4rem;
|
||||||
--spacing-sitepadding-inline: 6rem;
|
--spacing-sitepadding-inline: 6rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -107,7 +108,7 @@
|
|||||||
--spacing-s: 1rem;
|
--spacing-s: 1rem;
|
||||||
--spacing-m: 1.4rem;
|
--spacing-m: 1.4rem;
|
||||||
--spacing-l: 1.8rem;
|
--spacing-l: 1.8rem;
|
||||||
--spacing-xl: 6rem;
|
--spacing-xl: 3rem;
|
||||||
--spacing-section-bottom: var(--spacing-l);
|
--spacing-section-bottom: var(--spacing-l);
|
||||||
|
|
||||||
// sizes
|
// sizes
|
||||||
|
Reference in New Issue
Block a user