progress on venues, associations, and mobile navigation

src/components/AssociationList.js

@@ -7,13 +7,13 @@ export default class AssociationList extends React.Component {
   static renderAssociation(association) {
     return (
       <Link className="association" to={association.path} key={association.id}>
-        {association.featured_media && association.featured_media.localFile && (
-          <div className="association-image">
+        <div className="association-image">
+          {association.featured_media && association.featured_media.localFile && (
             <Img
               fluid={association.featured_media.localFile.childImageSharp.fluid}
             />
-          </div>
-        )}
+          )}
+        </div>
         <div className="association-text">
           <h2 className="association-title">{association.title}</h2>
 

src/components/Navbar.js

@@ -55,7 +55,10 @@ export default class Navbar extends React.Component {
           <Link to="/booking/">Utleie</Link>
         </nav>
         <div className="site-nav_toggle" onClick={this.toggleNav.bind(this)}>
-          =
+          Meny &nbsp; <span class="open">&#9776;</span>
+        </div>
+        <div className="site-nav_program">
+          <Link to="/program/">Program</Link>
         </div>
       </header>
     )

src/components/PostList.js

@@ -9,7 +9,7 @@ export default class PostList extends React.Component {
 
     return (
       <section className="blog">
-        <h2 className="page-title">{title}</h2>
+        <h2 className="section-title">{title}</h2>
         <div className="post-list">
           {posts.map(({ node: post }) => (
             <Link to={post.path} className={`post ${post.featured_media && post.featured_media.localFile ? 'post--with-media' : 'post--no-media'}`} key={post.id}>

src/css/associations.scss

@@ -13,9 +13,6 @@
     width: 100%;
     margin: 0 0 1rem;
   }
-  @media (min-width: $media-xl) {
-    width: calc(33.333333333% - 1rem);
-  }
 
   display: flex;
   
@@ -32,11 +29,22 @@
 
   &-image {
     width: 100%;
-    max-width: 300px;
-    height: 300px;
+    max-width: 200px;
+    max-height: 200px;
     overflow: hidden;
     margin: 0 auto 1rem;
-    padding-right: 1rem;
+    padding-right: 1.6rem;
+
+    .gatsby-image-wrapper {
+      max-width: 100%;
+      max-height: 100%;
+
+      img {
+        max-height: 200px;
+        max-width: 200px;
+        object-fit: contain !important;
+      }
+    }
   }
 
   &-text {
@@ -47,12 +55,40 @@
       margin-left: 0;
     }
   }
+
+  @media (max-width: $media-s) {
+    display: block;
+
+    &-image {
+      padding-right: 0;
+    }
+  }
+
+  &-homepage {
+    color: $color-orange;
+    font-weight: bold;
+    width: 100%;
+    max-width: $width-m;
+    margin: 0 auto;
+  }
 }
 
 .association-page {
   .association-logo {
-    width: $width-s;
-    max-width: 100%;
-    margin: 1rem auto;
+    width: 100%;
+    max-width: $width-s;
+    max-height: 20rem;
+    margin: 1rem auto 2rem;
+
+    .gatsby-image-wrapper {
+      max-width: 100%;
+      max-height: 20rem;
+
+      img {
+        max-height: 100%;
+        max-width: 20rem;
+        object-fit: contain !important;
+      }
+    }
   }
 }

src/css/base.scss

@@ -94,9 +94,11 @@ button, .button {
   display: block;
   text-decoration: none;
   font-weight: 700;
+  line-height: 1.2;
   color: $color-black;
   border: 2px solid $color-orange;
   background: $color-orange;
+  text-align: center;
   padding: 0.2rem 2rem;
   margin: 0 auto 1rem;
   width: 100%;
@@ -131,17 +133,23 @@ button, .button {
 .table-wrap {
   max-width: 100%;
   overflow: auto;
-  line-height: 1.3;
 }
 table {
   background: $color-yellow;
   margin: 1rem auto 2rem;
+  line-height: 1.1;
 }
 td, th {
   padding: 0.6rem 0.8rem;
   background: $color-white;
 }
 
+@media (max-width: $media-m) {
+  td, th {
+    padding: 0.3rem 0.4rem;
+  }
+}
+
 .iframe-wrap {
   width: 100%;
   max-width: 36rem !important;
@@ -156,6 +164,11 @@ td, th {
     width: 100%;
     height: 100%;
   }
+
+  @media (max-width: $media-m) {
+    max-width: none;
+    padding-bottom: 56.25%;
+  }
 }
 
 input, textarea {

src/css/events.scss

@@ -11,18 +11,21 @@
   display: flex;
   flex-wrap: wrap;
   padding: 0 1rem 1rem;
-  @media (max-width: $media-s) {
-    padding: 0 0 1rem;
-  }
   .event-types {
     display: none;
   }
+  @media (max-width: $media-s) {
+    padding: 0 .6rem .6rem;
+  }
 }
 
 .event-grouped-by-month {
   width: 100%;
   margin: 0;
   padding: 0 1rem 1rem;
+  @media (max-width: $media-s) {
+    padding: 0 0 1rem;
+  }
 
   .event-group-header {
     text-align: left;
@@ -37,7 +40,7 @@
     letter-spacing: 0.05em;
 
     @media (max-width: $media-s) {
-      margin: 0 0 0.5rem;
+      margin: 0 .6rem 0.5rem;
     }
   }
 
@@ -98,7 +101,7 @@
 
   .event-date {
     background: $color-yellow;
-    padding: 0.2rem 0.6rem;
+    padding: 0.3rem 0.6rem;
   }
 
   .event-date, .event-meta {
@@ -107,7 +110,7 @@
     font-weight: 400;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    line-height: 1.2;
+    line-height: 1.1;
   }
 
   .event-start {
@@ -115,6 +118,12 @@
     padding: 0.666rem;
   }
 
+  transition: box-shadow .1s ease-in-out;
+  &:hover {
+    color: $color-black;
+    box-shadow: 0 0 0 4px $color-black, 0 0 0 6px $color-orange;
+  }
+
   @media (min-width: $media-xl) {
     width: calc(20% - 1rem);
     &:nth-child(9),
@@ -154,18 +163,19 @@
     &-header {
       width: 64%;
     }
-  }
 
-  transition: box-shadow .1s ease-in-out;
-
-  &:hover {
-    color: $color-black;
-    box-shadow: 0 0 0 4px $color-black, 0 0 0 6px $color-orange;
+    &:hover {
+      box-shadow: none;
+    }
   }
 
   &-content {
     margin: 0 auto;
 
+    @media (max-width: $media-s) {
+      margin: 0 1rem;
+    }
+
     img, div {
       max-width: 100%;
     }
@@ -233,6 +243,7 @@
   background: $color-black;
   color: $color-white;
   overflow: hidden;
+  padding: 0 1rem;
   .event-meta {
     color: $color-white;
   }
@@ -295,11 +306,13 @@
     h1 {
       font-size: 2rem;
       margin: 0 auto;
+      line-height: 1.2;
     }
   }
 
   @media (max-width: $media-m) {
     padding: 0 1rem;
+    text-align: center;
     &_text, &_image {
       width: 100%;
     }
@@ -311,9 +324,16 @@
     &_text {
       padding: 0;
     }
+    h1 {
+      margin: 0 auto;
+    }
     .venue {
       font-size: 1rem;
     }
+    .event-types ul {
+      text-align: center;
+      margin: 1rem auto;
+    }
   }
 
   .event-organizers {
@@ -501,4 +521,10 @@
     color: darken($color-orange, 30%);
     cursor: default;
   }
+}
+
+.event-list-tumbleweed {
+  margin: 0 auto;
+  padding: 1rem 1rem 3rem;
+  text-align: center;
 }

src/css/footer.scss

@@ -26,7 +26,7 @@
     .logo {
       width: 60%;
       padding: 0;
-      margin: 0 auto;
+      margin: 2rem auto;
       order: 2;
     }
     .social-nav {

src/css/front-page.scss

@@ -21,10 +21,6 @@
 
 .address, .volunteer {
   padding: 2rem;
-
-  @media (max-width: $media-s) {
-    padding: 1rem 1rem 3rem;
-  }
 }
 
 .address {
@@ -48,6 +44,18 @@
   }
 }
 
+@media (max-width: $media-s) {
+  .front-page-info {
+    display: block;
+    > div {
+      width: 100%;
+    }
+  }
+  .address, .volunteer {
+    padding: 1rem 1rem 3rem;
+  }
+}
+
 .show-more {
   display: block;
   width: 100%;

src/css/header.scss

@@ -72,40 +72,59 @@
       transition: transform 0.3s, opacity 0.3s;
     }
   }
-  &_toggle {
+  &_toggle, &_program {
     position: absolute;
-    top: 0;
-    left: 1rem;
-    font-size: 2rem;
+    top: 1rem;
+    right: 1rem;
+    left: auto;
+    font-size: $font-s;
     line-height: 1;
+    color: $color-white;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    font-weight: 700;
 
     display: none;
 
     &:hover {
       cursor: pointer;
-      color: $color-orange;
+    }
+  }
+  &_program {
+    left: 1rem;
+    right: auto;
+    a {
+      color: $color-white;
+      text-decoration: none;
     }
   }
 }
 
 @media (max-width: $media-s) {
   .site-header {
-    display: flex;
-    flex-direction: column;
+    display: block;
+    background: $color-black;
+    height: 2.5rem;
+    padding-top: 2.5rem;
 
     .logo {
       position: absolute;
       top: 0;
-      right: 0;
-      margin: 0;
+      left: 50%;
+      margin-left: -1.6rem;
+    }
+
+    &.site-nav-visible {
+      height: auto;
     }
   }
   .site-nav {
     flex: none;
     display: none;
     text-align: center;
-    margin-top: 3rem;
-    &_toggle {
+    background: $color-black;
+
+    &_toggle, &_program {
       display: block;
     }
     order: 2;
@@ -127,7 +146,6 @@
     }
   }
   .site-nav-visible {
-    height: 100% !important;
     .site-nav {
       display: block;
     }

src/css/page.scss

@@ -31,16 +31,20 @@
   font-weight: 400;
   text-align: center;
   margin-bottom: 2rem;
-  padding: 0 1rem;
 
   @media (max-width: $media-m) {
     font-size: 2.8rem;
   }
   @media (max-width: $media-s) {
-    font-size: 2rem;
+    font-size: 1.6rem;
+    margin-top: 1rem;
   }
 }
 
+.page .page-title {
+  padding: 0;
+}
+
 .page-title-pre {
   display: block;
   font-size: $font-s;
@@ -77,12 +81,13 @@
 
   h1, h2, h3, h4, h5, h6 {
     max-width: $width-m;
-    margin: 2.2rem auto 1rem;
+    margin: 2.4rem auto .6rem;
+    line-height: 1.1;
   }
 
   table, .table-wrap {
     width: 100% !important;
-    max-width: 100%;
+    max-width: $width-l;
   }
 
   .instagram-media {
@@ -90,6 +95,11 @@
   }
 
   @media (max-width: $media-s) {
-    margin: 0 1rem;
+    h2 {
+      font-size: 1.6rem;
+    }
+    h3 {
+      font-size: 1.3rem;
+    }
   }
 }

src/css/venues.scss

@@ -13,4 +13,19 @@ h2.venue-title {
 .venue-featured-image {
   width: 36rem;
   margin: 0 auto;
+}
+
+@media (min-width: $media-l) {
+  .venue-featured-image, .venue-text {
+    display: inline-block;
+    width: 48%;
+  }
+  .venue-featured-image {
+    vertical-align: top;
+  }
+}
+
+.neuf-map {
+  max-width: $width-l;
+  margin: 2rem auto;
 }

src/pages/index.js

@@ -4,6 +4,7 @@ import { graphql, Link } from 'gatsby'
 import Layout from '../components/Layout'
 import PostList from '../components/PostList'
 import EventList from '../components/EventList'
+import logo from '../img/logo/logo-xxl.svg'
 
 export default class IndexPage extends React.Component {
   render() {
@@ -15,8 +16,8 @@ export default class IndexPage extends React.Component {
       <Layout classes="index">
         <EventList
           events={events}
-          maxEvents={10}
           title="Dette skjer"
+          maxEvents={10}
           showMore
         />
         <section className="front-page-info">

src/templates/association.js

@@ -23,7 +23,7 @@ export const AssociationTemplate = ({
       )}
       {homepage && (
         <div className="association-homepage">
-          <a href={homepage}>Nettside</a>
+          &rarr; <a href={homepage}>Besøk vår nettside</a>
         </div>
       )}
       <div

src/templates/venue.js

@@ -29,41 +29,51 @@ export class VenueTemplate extends React.Component {
 
     return (
       <>
-        <div className="venue-hero">
-          {isSingle && <h1 className="venue-title page-title">{title}</h1>}
-          {!isSingle && (
-            <Link to={path}>
-              <h2 className="venue-title">{title}</h2>
-            </Link>
-          )}
-          {hasFeaturedMedia && (
-            <div className="venue-featured-image">
-              <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
-            </div>
-          )}
-        </div>
-        <div
-          className="venue-content wp-content"
-          dangerouslySetInnerHTML={{ __html: content }}
-        />
-        <div className="venue-meta">
-          <ul>
-            {floor && <li>Etasje: {floor}</li>}
-            {capacityLegal && <li>Branntillatelse for: {capacityLegal}</li>}
-            {capacityStanding && <li>Stående: {capacityStanding}</li>}
-            {capacitySitting && <li>Sittende: {capacitySitting}</li>}
-            {usedFor && <li>Bruk: {usedFor}</li>}
-            {bar && <li>Bar: {bar}</li>}
-            {audio && <li>Lyd: {audio}</li>}
-            {lighting && <li>Lys: {lighting}</li>}
-            {audioVideo && <li>A/V: {audioVideo}</li>}
-          </ul>
+        {isSingle && (
+          <div className="venue-hero">
+            <div className="page-title-pre">Lokale</div>
+            <h1 className="venue-title page-title">{title}</h1>
+          </div>
+        )}
+        {!isSingle && (
+          <Link to={path}>
+            <h2 className="venue-title">{title}</h2>
+          </Link>
+        )}
+        {hasFeaturedMedia && (
+          <div className="venue-featured-image">
+            <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
+          </div>
+        )}
+        <div className="venue-text">
+          <div
+            className="venue-content wp-content"
+            dangerouslySetInnerHTML={{ __html: content }}
+          />
+          <div className="venue-meta">
+            <ul>
+              {floor && <li>Etasje: {floor}</li>}
+              {capacityLegal && <li>Branntillatelse for: {capacityLegal}</li>}
+              {capacityStanding && <li>Stående: {capacityStanding}</li>}
+              {capacitySitting && <li>Sittende: {capacitySitting}</li>}
+              {usedFor && <li>Bruk: {usedFor}</li>}
+              {bar && <li>Bar: {bar}</li>}
+              {audio && <li>Lyd: {audio}</li>}
+              {lighting && <li>Lys: {lighting}</li>}
+              {audioVideo && <li>A/V: {audioVideo}</li>}
+            </ul>
+          </div>
         </div>
         {isSingle && (
           <div className="venue-map">
             <Map />
           </div>
         )}
+        {isSingle && (
+          <Link to="/booking/" className="button button-large">
+            <span>Se alle lokaler</span>
+          </Link>
+        )}
       </>
     )
   }