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;
-  }
-
-  p {
-    margin-left: 0;
+    margin: 1rem auto;
   }
 }
 
-.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;
-    color: $color-white;
-    text-shadow: 0.05em 0.05em $color-black;
+
+  .button {
+    color: $color-yellow;
     &: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 {
-  text-transform: uppercase;
-  text-align: center;
-  margin: 1rem auto;
-  padding-top: 2rem;
+.venue-title {
+  h2 {
+    text-transform: uppercase;
+    text-align: center;
+    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;
   }
 }