add more practical info content, opening hours + some association sketching

This commit is contained in:
elisejakob
2024-05-23 11:55:36 +02:00
parent 5041cd0bde
commit 4a7f76e5f9
6 changed files with 197 additions and 26 deletions

View File

@ -19,17 +19,17 @@ export default async function Page() {
<span className="circlehead">Hopp til:</span>
<ul>
<li>
<a href="#" className="button">
Adkomst
<a href="#adresse-og-adkomst" className="button">
Adresse og adkomst
</a>
</li>
<li>
<a href="#" className="button">
<a href="#apningstider" className="button">
Åpningstider
</a>
</li>
<li>
<a href="#" className="button">
<a href="#billetter" className="button">
Billetter
</a>
</li>
@ -60,6 +60,93 @@ export default async function Page() {
</li>
</ul>
</div>
<section className="pageSection" id="adresse-og-adkomst">
<h1>Adresse og adkomst</h1>
<div className="pageSectionGroup">
<h2>Adresse</h2>
<p>
Chateau Neuf
<br />
Slemdalsveien
<br />
15 0369 Oslo
</p>
<a href="#">Åpne i Google Maps &rarr;</a>
<div className="iframe-wrap">
<iframe
loading="lazy"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3997.986159638909!2d10.708115532212085!3d59.932257000000334!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46416ddb5278789f%3A0xadda2b97f9d1cad6!2sChateau+Neuf+-+The+Norwegian+Students'+Society!5e0!3m2!1sen!2sno!4v1554374857442!5m2!1sen!2sno"
allowfullscreen="allowfullscreen"
width="600"
height="450"
frameborder="0"
></iframe>
</div>
</div>
<div className="pageSectionGroup">
<h2>Adkomst</h2>
<p>Skal vi si noe kort om hvordan du enklest kommer deg til Neuf?</p>
<h3>Kollektivt</h3>
<h3>Parkering</h3>
</div>
</section>
<section className="pageSection" id="apningstider">
<h1>Åpningstider</h1>
<div className="openingHoursGroup">
<h2>Serveringssteder</h2>
<div className="openingHoursItem">
<h3>Glassbaren (1. etasje)</h3>
<table className="openingHours">
<tr>
<td>ManTor</td>
<td>15:0000:30</td>
</tr>
<tr>
<td>Fre</td>
<td>15:0002:30</td>
</tr>
<tr>
<td>LørSøn</td>
<td>Åpent ved arrangement</td>
</tr>
</table>
</div>
<div className="openingHoursItem">
<h3>Bokcaféen (2. etasje)</h3>
<table className="openingHours">
<tr>
<td>TirTor</td>
<td>19:0023:30</td>
</tr>
<tr>
<td>Fre</td>
<td>19:0001:30</td>
</tr>
</table>
</div>
</div>
<div className="openingHoursGroup">
<h2>Ekspedisjonen</h2>
<div className="openingHoursItem">
<h3>Slottsmester og telefon</h3>
<table className="openingHours">
<tr>
<td>ManFre</td>
<td>15:0000:00</td>
</tr>
<tr>
<td>Lør</td>
<td>14:0000:00</td>
</tr>
</table>
<p>Ekspedisjonen er også åpen under arrangementer huset.</p>
<Link href="/kontakt">Se kontaktinfo til ekspedisjonen &rarr;</Link>
</div>
</div>
</section>
<section className="pageSectionAlt" id="billetter">
<h1>Billetter</h1>
</section>
<IconListBlock />
</main>
);

View File

@ -1,12 +1,18 @@
.venueItem {
.associationItem {
position: relative;
list-style: none;
display: grid;
grid-template-columns: 1fr 2fr;
align-items: flex-start;
gap: 1rem;
background: var(--color-white);
color: var(--color-black);
padding: 1rem;
}
.image {
width: 100%;
padding-top: 60%;
background: var(--color-placeholder);
padding-top: 100%;
position: relative;
img {
@ -14,19 +20,21 @@
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-fit: contain;
}
}
.text {
padding: .8rem 0;
padding: 0;
}
.excerpt {}
.title {
font-size: 1.2rem;
margin-bottom: 1rem;
}
.title,
.details {
font-size: 1.6rem;
.excerpt {
font-size: var(--font-size-caption);
}
.details {

View File

@ -1,6 +1,6 @@
.associationList {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
column-gap: var(--spacing-gap-column);
row-gap: var(--spacing-gap-row);
padding-bottom: var(--spacing-section-bottom);

View File

@ -62,14 +62,22 @@ export const Footer = () => {
</p>
</li>
<li className={styles.contactItem}>
<h2 className="suphead">Åpningstider</h2>
<p>
Glassbaren
<br />
Andre lokaler?
<br />
Generelle åpningstider?
</p>
<h2 className="suphead">Åpningstider i dag</h2>
<table className="openingHours">
<tr>
<td>Glassbaren</td>
<td>15:0000:30</td>
</tr>
<tr>
<td>Bokcaféen</td>
<td>19:0023:30</td>
</tr>
<tr>
<td>Ekspedisjonen</td>
<td>15:0000:00</td>
</tr>
</table>
<Link href="/praktisk#apningstider">Se alle åpningstider</Link>
</li>
</ul>
</div>

View File

@ -25,7 +25,7 @@
.contactItem {
list-style: none;
grid-column: span 3;
grid-column: span 4;
h2 {
margin-bottom: 1em;
@ -36,7 +36,9 @@
}
ul,
p {
p,
table,
a {
font-size: var(--font-size-caption);
}
}

View File

@ -193,8 +193,8 @@ input[type="text"] {
}
.anchorLinks {
position: sticky;
top: 0;
/*position: sticky;
top: 0;*/
>span {
display: block;
@ -213,4 +213,70 @@ input[type="text"] {
background: var(--color-goldenBeige);
color: var(--color-deepBrick);
}
}
.pageSection {
background: var(--color-neufPink);
margin: calc(var(--spacing-sitepadding)*2) calc(var(--spacing-sitepadding)*-1);
padding: var(--spacing-sitepadding) var(--spacing-sitepadding) var(--spacing-section-bottom);
+.pageSection {
margin-top: calc(var(--spacing-sitepadding)*-2);
}
&:nth-of-type(even) {
background: var(--color-goldenBeige);
color: var(--color-)
}
h1 {
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 4rem;
&:before {
content: "";
display: inline-block;
background: currentColor;
border-radius: 1em;
height: 1em;
width: 1em;
vertical-align: middle;
margin-bottom: .2em;
margin-right: 1em;
}
}
h2 {
margin-bottom: 1rem;
}
h3 {
margin: 1rem 0;
}
}
.openingHours {
width: 100%;
max-width: 20em;
font-size: inherit;
td {
width: 50%;
vertical-align: top;
line-height: 1.2;
padding: .25em 0;
&:first-child {
padding-right: 1rem;
}
}
}
.openingHoursItem {
display: inline-block;
width: 50%;
vertical-align: top;
margin-bottom: var(--spacing-section-bottom);
}