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 = () => {
return (
<footer className={styles.footer}>
<div className={styles.contact}>
<ul className={styles.contactList}>
<li className={styles.contactItem}>
<h2 className="suphead">Følg oss</h2>
<ul>
<li>
<a href="#" target="_blank">
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>
<div className={styles.social}>
<h2 className="suphead">Følg oss</h2>
<ul>
<li>
<a href="#" target="_blank">
Instagram
</a>
</li>
<li className={styles.contactItem}>
<h2 className="suphead">Kontakt oss</h2>
<p>
Generell kontaktinfo
<br />
Billetter
<br />
Hittegods
<br />
Telefon/mail?
<br />
Lenke til kontakt/ansatte?
</p>
<li>
<a href="#" target="_blank">
Facebook
</a>
</li>
<li className={styles.contactItem}>
<h2 className="suphead">Besøk oss</h2>
<p>
Det Norske Studentersamfund
<br />
Slemdalsveien 15
<br />
0369 Oslo
<br />
<a href="#" target="_blank">
Vis i Google Maps
</a>
</p>
<li>
<a href="#" target="_blank">
Twitter
</a>
</li>
<li className={styles.contactItem}>
<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>
<li>
<a href="#" target="_blank">
Flickr
</a>
</li>
</ul>
</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}>
<NeonChillPig />
</div>
<ToTop />
<div className={styles.toTop}>
<ToTop />
</div>
</footer>
);
};

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

@ -39,12 +39,54 @@
}
}
.logo {
width: 12rem;
.social,
.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);
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 {
width: 100%;
grid-column: span 4;
min-width: 0;
}
}
@ -54,4 +96,10 @@
right: 0;
transform: translate(1vw, 40%);
z-index: 800;
}
.toTop {
position: absolute;
right: 0;
bottom: 0;
}