design progress, mobile and color adjustments

src/css/associations.scss

@@ -12,6 +12,7 @@
   @media (max-width: $media-m) {
     width: 100%;
     margin: 0 0 1rem;
+    padding: 0;
   }
 
   display: flex;
@@ -74,6 +75,13 @@
 }
 
 .association-page {
+  padding-top: 2rem;
+  .page-title {
+    margin-top: 0;
+  }
+  .page-title-pre {
+    color: $color-red;
+  }
   .association-logo {
     width: 100%;
     max-width: $width-s;

src/css/base.scss

@@ -128,17 +128,37 @@ button, .button {
       background: $color-orange;
     }
   }
+
+  &-small {
+    display: inline-block;
+    width: auto;
+    padding: 0.3rem 1rem;
+    margin: .5rem auto;
+    color: $color-white;
+    background: $color-black;
+    border: none;
+    font-size: $font-s;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    &:hover {
+      color: $color-white;
+    }
+  }
 }
 
-.table-wrap {
-  max-width: 100%;
-  overflow: auto;
-}
 table {
   background: $color-yellow;
   margin: 1rem auto 2rem;
   line-height: 1.1;
 }
+.table-wrap {
+  max-width: 100%;
+  overflow: auto;
+
+  table {
+    margin: 0;
+  }
+}
 td, th {
   padding: 0.6rem 0.8rem;
   background: $color-white;
@@ -146,7 +166,7 @@ td, th {
 
 @media (max-width: $media-m) {
   td, th {
-    padding: 0.3rem 0.4rem;
+    padding: 0.3rem 1rem;
   }
 }
 

src/css/events.scss

@@ -291,7 +291,11 @@
     margin-bottom: 0;
   }
 
-  .venue {
+  a {
+    color: $color-bloodorange;
+  }
+
+  .event-meta-venue {
     margin-bottom: 1rem;
     font-size: 2rem;
     font-style: italic;
@@ -302,6 +306,12 @@
     letter-spacing: 0.1em;
   }
 
+  .event-types {
+    a {
+      color: $color-black;
+    }
+  }
+
   @media (max-width: $media-s) {
     h1 {
       font-size: 2rem;
@@ -318,7 +328,8 @@
     }
     &_image {
       .gatsby-image-wrapper {
-        margin-left: auto;
+        width: calc(100% + 2rem);
+        margin: 0 -1rem;
       }
     }
     &_text {
@@ -327,7 +338,7 @@
     h1 {
       margin: 0 auto;
     }
-    .venue {
+    .event-meta-venue {
       font-size: 1rem;
     }
     .event-types ul {

src/css/footer.scss

@@ -53,7 +53,7 @@
     height: 2rem;
     path {
       transition: all .2s ease-in-out;
-      fill: $color-orange;
+      fill: $color-bloodorange;
     }
     &:hover path {
       transition: all .2s ease-in-out;

src/css/front-page.scss

@@ -2,42 +2,75 @@
   display: flex;
   background: $color-white;
   padding: 0;
+  text-align: center;
+
   > div {
     width: 50%;
   }
 
-  h2 {
+  p {
+    margin: 0;
+
+    a {
+      color: $color-black;
+    }
+  }
+  h2, h3 {
+    text-align: center;
+  }
+
+  h2, h3, p, ul, .button {
+    margin-bottom: 1rem;
+  }
+
+  .section-title {
     font-weight: 400;
-    font-size: 1.8rem;
+    font-size: 2.8rem;
     text-transform: uppercase;
     letter-spacing: 0.03em;
     line-height: 1.1;
-  }
+    margin: 1rem auto;
-
-  p {
-    margin-left: 0;
   }
 }
 
-.address, .volunteer {
+.visit-us, .volunteer {
   padding: 2rem;
+
+  .inner {
+    margin: 0 auto;
+    max-width: $width-m;
+  }
 }
 
-.address {
+.visit-us {
   background: $color-green;
 
+  .button {
+    color: $color-green;
+    &:hover {
+      color: $color-white;
+    }
+  }
+
   label, input {
     display: block;
     width: 100%;
   }
 }
 
+.opening-hours {
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+}
+
 .volunteer {
   background: $color-yellow;
-  .section-title {
+
-    font-weight: 700;
+  .button {
-    color: $color-white;
+    color: $color-yellow;
-    text-shadow: 0.05em 0.05em $color-black;
     &:hover {
       color: $color-white;
     }
@@ -51,7 +84,7 @@
       width: 100%;
     }
   }
-  .address, .volunteer {
+  .visit-us, .volunteer {
     padding: 1rem 1rem 3rem;
   }
 }

src/css/header.scss

@@ -148,6 +148,12 @@
   .site-nav-visible {
     .site-nav {
       display: block;
+      &:first-of-type {
+        padding-top: 2rem;
+      }
+      &:last-of-type {
+        padding-bottom: 3rem;
+      }
     }
   }
 }

src/css/page.scss

@@ -49,11 +49,16 @@
   display: block;
   font-size: $font-s;
   font-weight: 700;
-  color: $color-red;
+  color: $color-bloodorange;
   text-transform: uppercase;
   text-align: center;
 }
 
+.page .page-title-pre {
+  margin-top: 1rem;
+  margin-bottom: -1rem;
+}
+
 .wp-content {
   img, div, ul, p, h1, h2, h3, h4, h5, h6, span, blockquote {
     max-width: $width-m;
@@ -65,6 +70,10 @@
     font-family: inherit !important;
   }
 
+  a {
+    color: $color-black;
+  }
+
   img, div, .wp-caption {
     max-width: $width-m;
     width: 100% !important;
@@ -94,6 +103,43 @@
     margin: 1rem auto 2rem !important;
   }
 
+  @media (max-width: $media-m) {
+    table {
+      width: 100% !important;
+      max-width: $width-m;
+    }
+
+    table {
+      padding: 0;
+      td, tr {
+        display: block;
+      }
+      td {
+        &:first-child {
+          padding-top: 1rem;
+        }
+        &:last-child {
+          padding-bottom: 1rem;
+        }
+      }
+    }
+
+    .table-wrap table {
+      td {
+        display: table-cell;
+        &:first-child {
+          padding-top: .3rem;
+        }
+        &:last-child {
+          padding-bottom: .3rem;
+        }
+      }
+      tr {
+        display: table-row;
+      }
+    }
+  }
+
   @media (max-width: $media-s) {
     h2 {
       font-size: 1.6rem;
@@ -101,5 +147,21 @@
     h3 {
       font-size: 1.3rem;
     }
+
+    table, .table-wrap {
+      width: 100% !important;
+      max-width: 100%;
+    }
+
+    table {
+      td, tr {
+        display: block;
+      }
+    }
+
+    .iframe-wrap {
+      width: calc(100% + 2rem) !important;
+      margin: 0 -1rem;
+    }
   }
 }

src/css/venues.scss

@@ -1,18 +1,63 @@
+.venue {
+  text-align: center;
+
+  ul, p {
+    text-align: left;
+    margin-bottom: 0;
+  }
+
+  ul {
+    font-size: $font-s;
+  }
+
+  p {
+    &:last-of-type {
+      margin-bottom: 1.2rem;
+    }
+  }
+}
+
+.venue-page {
+  padding-top: 2rem;
+  .page-title {
+    margin-top: 0;
+  }
+  ul, p {
+    text-align: left;
+    margin-bottom: 0;
+  }
+
+  ul {
+    font-size: $font-s;
+  }
+
+  p {
+    &:last-of-type {
+      margin-bottom: 1.2rem;
+    }
+  }
+}
+
 .venue-hero {
   max-width: $width-l;
   margin: 0 auto 2rem;
 }
 
-h2.venue-title {
+.venue-title {
-  text-transform: uppercase;
+  h2 {
-  text-align: center;
+    text-transform: uppercase;
-  margin: 1rem auto;
+    text-align: center;
-  padding-top: 2rem;
+    margin: 1rem auto;
+    padding-top: 2rem;
+    font-size: 1.6rem;
+  }
+  text-decoration: none;
 }
 
 .venue-featured-image {
   width: 36rem;
-  margin: 0 auto;
+  max-width: calc(100% + 2rem);
+  margin: 0 -1rem 1rem;
 }
 
 @media (min-width: $media-l) {
@@ -21,7 +66,12 @@ h2.venue-title {
     width: 48%;
   }
   .venue-featured-image {
+    max-width: 100%;
     vertical-align: top;
+    margin: 0 auto 1rem;
+  }
+  .venue-title h2 {
+    margin: 1rem auto 2rem;
   }
 }
 

src/pages/index.js

@@ -21,50 +21,52 @@ export default class IndexPage extends React.Component {
           showMore
         />
         <section className="front-page-info">
-          <div className="address">
+          <div className="visit-us">
-            <div>
+            <div className="inner">
-              <h2>Besøk oss</h2>
+              <h2 className="section-title">Besøk oss</h2>
-              <p>Vi holder til på Majorstua.</p>
+              <div className="address">
-            </div>
+                <p>Vi holder til på Majorstua, i Slemdalsveien 15.</p>
-            <div>
+                <a href="https://www.google.no/maps/place/Slemdalsveien+15,+0369+Oslo/data=!4m2!3m1!1s0x46416dc4ab53aa7d:0x5629681f36c1c8af?sa=X&ved=2ahUKEwjR94re3unjAhUj4aYKHRLOAuwQ8gEwAHoECBQQAQ" target="_blank" className="button button-small">Se i Google Maps</a>
-              <h2>Åpningstider</h2>
+              </div>
-              <ul>
+              <div className="opening-hours">
-                <li>
+                <h3>Åpningstider</h3>
-                  Glassbaren:
+                <ul>
-                  <ul>
+                  <li>
-                    <li>Mandag–lørdag: 14:00–00:00</li>
+                    <span class="opening-hours_venue">Glassbaren</span>
-                  </ul>
+                    <ul>
-                </li>
+                      <li>Mandag–lørdag: 14:00–00:00</li>
-                <li>
+                    </ul>
-                  Bokcaféen:
+                  </li>
-                  <ul>
+                  <li>
-                    <li>Mandag–torsdag: 19:00–00:00</li>
+                  <span class="opening-hours_venue">Bokcaféen</span>
-                    <li>Fredag: 20:00–03:00</li>
+                    <ul>
-                  </ul>
+                      <li>Mandag–torsdag: 19:00–00:00</li>
-                </li>
+                      <li>Fredag: 20:00–03:00</li>
-              </ul>
+                    </ul>
-              <a href="#">Se alle åpningstider</a>
+                  </li>
+                </ul>
+                <a href="#" className="button button-small">Se alle åpningstider</a>
+              </div>
             </div>
           </div>
           <div className="volunteer">
-            <Link to="/bli-aktiv/" className="section-title">
+            <div className="inner">
-              Bli frivillig
+              <Link to="/bli-aktiv/" className="section-title">
-            </Link>
+                Bli frivillig
-            <p>
+              </Link>
-              Vil du være med å arrangere greier på studentersamfundet? Sjekk ut
+              <p>
-              de ulike <Link to="/bli-aktiv/">foreningene</Link> som holder til på
+                Vil du være med å arrangere greier på studentersamfundet? Chateau Neuf drives i stor grad av frivillige, og vi trenger alltid flere engasjerte folk! Sjekk ut de ulike <Link to="/bli-aktiv/">foreningene</Link> som holder til på huset for å finne ut hva som passer for deg. Her er noen eksempler på roller du kan innta:
-              Chateau Neuf.
+              </p>
-            </p>
+              <ul>
-            <p>
+                <li>Økonomiansvarlig</li>
-              Vi trenger alltid flere engasjerte folk! Her er noen eksempler på
+                <li>Skuespiller</li>
-              roller du kan innta:
+                <li>Designer</li>
-            </p>
+                <li>Utvikler</li>
-            <ul>
+              </ul>
-              <li>Økonomiansvarlig</li>
+              <Link to="/bli-aktiv/" className="button button-small">
-              <li>Skuespiller</li>
+                Les mer om å bli frivillig
-              <li>Designere</li>
+              </Link>
-              <li>Utviklere</li>
+            </div>
-            </ul>
           </div>
         </section>
         <PostList posts={posts} title="Aktuelt" showMore />

src/templates/event.js

@@ -44,7 +44,7 @@ export const EventTemplate = ({
           <div className="event-hero_text">
             <h1>{title}</h1>
             <div className="event-meta">
-              <div className="venue">
+              <div className="event-meta-venue">
                 {venueCustom && <span>{venueCustom}</span>}
                 {venue && venue.title !== 'Hele huset' && (
                   <span>

src/templates/venue.js

@@ -36,8 +36,8 @@ export class VenueTemplate extends React.Component {
           </div>
         )}
         {!isSingle && (
-          <Link to={path}>
+          <Link to={path} className="venue-title">
-            <h2 className="venue-title">{title}</h2>
+            <h2>{title}</h2>
           </Link>
         )}
         {hasFeaturedMedia && (