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

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

@ -7,87 +7,93 @@ 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}> <h2 className="suphead">Følg oss</h2>
<li className={styles.contactItem}> <ul>
<h2 className="suphead">Følg oss</h2> <li>
<ul> <a href="#" target="_blank">
<li> Instagram
<a href="#" target="_blank"> </a>
Instagram
</a>
</li>
<li>
<a href="#" target="_blank">
Facebook
</a>
</li>
<li>
<a href="#" target="_blank">
Twitter
</a>
</li>
<li>
<a href="#" target="_blank">
Flickr
</a>
</li>
</ul>
</li> </li>
<li className={styles.contactItem}> <li>
<h2 className="suphead">Kontakt oss</h2> <a href="#" target="_blank">
<p> Facebook
Generell kontaktinfo </a>
<br />
Billetter
<br />
Hittegods
<br />
Telefon/mail?
<br />
Lenke til kontakt/ansatte?
</p>
</li> </li>
<li className={styles.contactItem}> <li>
<h2 className="suphead">Besøk oss</h2> <a href="#" target="_blank">
<p> Twitter
Det Norske Studentersamfund </a>
<br />
Slemdalsveien 15
<br />
0369 Oslo
<br />
<a href="#" target="_blank">
Vis i Google Maps
</a>
</p>
</li> </li>
<li className={styles.contactItem}> <li>
<h2 className="suphead">Åpningstider i dag</h2> <a href="#" target="_blank">
<table className="openingHours"> Flickr
<tbody> </a>
<tr>
<td>Glassbaren</td>
<td>15:00—00:30</td>
</tr>
<tr>
<td>Bokcaféen</td>
<td>19:00—23:30</td>
</tr>
<tr>
<td>Ekspedisjonen</td>
<td>15:00—00:00</td>
</tr>
</tbody>
</table>
<Link href="/praktisk#apningstider">Se alle åpningstider</Link>
</li> </li>
</ul> </ul>
</div> </div>
<div className={styles.contact}>
<h2 className="suphead">Kontakt oss</h2>
<div className={styles.emails}>
<div>
Generelle henvendelser
<br />
<a href="/#">post@neuf.no</a>
</div>
<div>
Billetter
<br />
<a href="/#">billetter@neuf.no</a>
</div>
<div>
<Link href="/kontakt">Øvrig kontaktinfo</Link>
</div>
</div>
</div>
<div className={styles.visit}>
<h2 className="suphead">Besøk oss</h2>
<div className={styles.address}>
<h2 className="suphead">Adresse</h2>
<div>
Det Norske Studentersamfund
<br />
Slemdalsveien 15
<br />
0369 Oslo
<br />
<a href="#" target="_blank">
Vis i Google Maps
</a>
</div>
</div>
<div className={styles.openingHoursWrapper}>
<h2 className="suphead">Åpningstider i dag</h2>
<table className="openingHours">
<tbody>
<tr>
<td>Glassbaren</td>
<td>15:00—00:30</td>
</tr>
<tr>
<td>Bokcaféen</td>
<td>19:00—23:30</td>
</tr>
<tr>
<td>Ekspedisjonen</td>
<td>15:00—00:00</td>
</tr>
</tbody>
</table>
<Link href="/praktisk#apningstider">Se alle åpningstider</Link>
</div>
</div>
<div className={styles.pig}> <div className={styles.pig}>
<NeonChillPig /> <NeonChillPig />
</div> </div>
<ToTop /> <div className={styles.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;
} }
} }
@ -54,4 +96,10 @@
right: 0; right: 0;
transform: translate(1vw, 40%); transform: translate(1vw, 40%);
z-index: 800; z-index: 800;
}
.toTop {
position: absolute;
right: 0;
bottom: 0;
} }