add more practical info content, opening hours + some association sketching
This commit is contained in:
elisejakob
@ -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 →</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>Man—Tor</td>
|
||||
<td>15:00—00:30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fre</td>
|
||||
<td>15:00—02:30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lør—Søn</td>
|
||||
<td>Åpent ved arrangement</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div className="openingHoursItem">
|
||||
<h3>Bokcaféen (2. etasje)</h3>
|
||||
<table className="openingHours">
|
||||
<tr>
|
||||
<td>Tir—Tor</td>
|
||||
<td>19:00—23:30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fre</td>
|
||||
<td>19:00—01: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>Man—Fre</td>
|
||||
<td>15:00—00:00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lør</td>
|
||||
<td>14:00—00:00</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>Ekspedisjonen er også åpen under arrangementer på huset.</p>
|
||||
<Link href="/kontakt">Se kontaktinfo til ekspedisjonen →</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="pageSectionAlt" id="billetter">
|
||||
<h1>Billetter</h1>
|
||||
</section>
|
||||
<IconListBlock />
|
||||
</main>
|
||||
);
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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: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>
|
||||
</table>
|
||||
<Link href="/praktisk#apningstider">Se alle åpningstider</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -193,8 +193,8 @@ input[type="text"] {
|
||||
}
|
||||
|
||||
.anchorLinks {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
/*position: sticky;
|
||||
top: 0;*/
|
||||
|
||||
>span {
|
||||
display: block;
|
||||
@ -214,3 +214,69 @@ input[type="text"] {
|
||||
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);
|
||||
}
|
||||
Reference in New Issue
Block a user