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

add lead to association header, tidy up

Browse Source
This commit is contained in:
elise
2024-08-12 13:24:36 +02:00
parent e0cb1a89eb
commit bfdcdfa636
3 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/associations/AssociationHeader.tsx
View File

@ -10,10 +10,16 @@ export const AssociationHeader = ({
association: AssociationFragment;
}) => {
return (
<section className={`${styles.associationHeader} ${association.logo && styles.hasLogo}`}>
<section className={`${styles.associationHeader} ${association.logo && styles.hasLogo} ${(association.logo || association.lead) && styles.wide}`}>
<div>
<Breadcrumb link="/foreninger" text={association.associationType ? association.associationType : "Foreninger"} />
<h1>{association.title}</h1>
{association.lead && (
<div
className="lead"
dangerouslySetInnerHTML={{ __html: association.lead }}
/>
)}
{association.websiteUrl && (
<a className="button" href={association.websiteUrl} target="_blank">
<span>Besøk nettside</span>

17
web/src/components/associations/associationHeader.module.scss
View File

@ -1,25 +1,38 @@
.associationHeader {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-columns: 1fr;
column-gap: var(--spacing-gap-column);
row-gap: var(--spacing-gap-row);
align-items: center;
max-width: var(--size-width-p);
margin: 0 auto var(--spacing-section-bottom);
&.hasLogo {
&.wide {
max-width: var(--size-width-lead);
}
&.hasLogo {
grid-template-columns: 2fr 1fr;
}
h1 {
font-size: var(--font-size-h1);
margin-bottom: var(--spacing-m);
}
p {
margin-bottom: var(--spacing-m);
}
}
@media (max-width: 600px) {
.associationHeader {
grid-template-columns: 1fr;
&.hasLogo {
grid-template-columns: 1fr;
}
img {
max-width: 16rem;
}