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

adjust footer layout

Browse Source
This commit is contained in:
elisejakob
2024-06-18 12:12:43 +02:00
parent 6ba516bdc0
commit a4e81b3226
2 changed files with 129 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
web/src/components/layout/Footer.tsx
View File

@ -7,9 +7,7 @@ import { LogoNeuf } from "../general/Logo";
export const Footer = () => { export const Footer = () => {
return ( return (
<footer className={styles.footer}> <footer className={styles.footer}>
<div className={styles.contact}> <div className={styles.social}>
<ul className={styles.contactList}>
<li className={styles.contactItem}>
<h2 className="suphead">Følg oss</h2> <h2 className="suphead">Følg oss</h2>
<ul> <ul>
<li> <li>
@ -33,24 +31,30 @@ export const Footer = () => {
</a> </a>
</li> </li>
</ul> </ul>
</li> </div>
<li className={styles.contactItem}> <div className={styles.contact}>
<h2 className="suphead">Kontakt oss</h2> <h2 className="suphead">Kontakt oss</h2>
<p> <div className={styles.emails}>
Generell kontaktinfo <div>
Generelle henvendelser
<br /> <br />
<a href="/#">post@neuf.no</a>
</div>
<div>
Billetter Billetter
<br /> <br />
Hittegods <a href="/#">billetter@neuf.no</a>
<br /> </div>
Telefon/mail? <div>
<br /> <Link href="/kontakt">Øvrig kontaktinfo</Link>
Lenke til kontakt/ansatte? </div>
</p> </div>
</li> </div>
<li className={styles.contactItem}> <div className={styles.visit}>
<h2 className="suphead">Besøk oss</h2> <h2 className="suphead">Besøk oss</h2>
<p> <div className={styles.address}>
<h2 className="suphead">Adresse</h2>
<div>
Det Norske Studentersamfund Det Norske Studentersamfund
<br /> <br />
Slemdalsveien 15 Slemdalsveien 15
@ -60,9 +64,10 @@ export const Footer = () => {
<a href="#" target="_blank"> <a href="#" target="_blank">
Vis i Google Maps Vis i Google Maps
</a> </a>
</p> </div>
</li> </div>
<li className={styles.contactItem}>
<div className={styles.openingHoursWrapper}>
<h2 className="suphead">Åpningstider i dag</h2> <h2 className="suphead">Åpningstider i dag</h2>
<table className="openingHours"> <table className="openingHours">
<tbody> <tbody>
@ -81,13 +86,14 @@ export const Footer = () => {
</tbody> </tbody>
</table> </table>
<Link href="/praktisk#apningstider">Se alle åpningstider</Link> <Link href="/praktisk#apningstider">Se alle åpningstider</Link>
</li> </div>
</ul>
</div> </div>
<div className={styles.pig}> <div className={styles.pig}>
<NeonChillPig /> <NeonChillPig />
</div> </div>
<div className={styles.toTop}>
<ToTop /> <ToTop />
</div>
</footer> </footer>
); );
}; };

54
web/src/components/layout/footer.module.scss
View File

@ -39,12 +39,54 @@
} }
} }
.logo { .social,
width: 12rem; .contact,
.visit {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--spacing-gap-column);
row-gap: var(--spacing-gap-row);
margin-bottom: var(--spacing-section-bottom); margin-bottom: var(--spacing-section-bottom);
ul {
list-style: none;
}
h2 {
margin-bottom: 1rem;
grid-column: span 3;
}
}
.social {
ul {
display: flex;
grid-column: span 9;
gap: 1rem;
}
}
.visit {
>div,
>ul {
grid-column: span 4;
}
}
.address {
line-height: 1.78;
}
.emails {
grid-column: span 9;
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: var(--spacing-gap-column);
>div { >div {
width: 100%; grid-column: span 4;
min-width: 0;
} }
} }
@ -55,3 +97,9 @@
transform: translate(1vw, 40%); transform: translate(1vw, 40%);
z-index: 800; z-index: 800;
} }
.toTop {
position: absolute;
right: 0;
bottom: 0;
}