design progress on associations, events, page titles, etc 💅

src/components/AssociationList.js

@@ -6,7 +6,7 @@ import Img from 'gatsby-image'
 export default class AssociationList extends React.Component {
   render_association(association) {
     return (
-      <div className="association">
+      <Link className="association" to={association.path} key={association.id}>
         {association.featured_media && association.featured_media.localFile && (
           <div className="association-image">
             <Img
@@ -15,16 +15,14 @@ export default class AssociationList extends React.Component {
           </div>
         )}
         <div className="association-text">
-          <Link to={association.path} key={association.id}>
-            <h2 className="association-title">{association.title}</h2>
-          </Link>
+          <h2 className="association-title">{association.title}</h2>
 
           <div
             className="association-description"
             dangerouslySetInnerHTML={{ __html: association.excerpt }}
           />
         </div>
-      </div>
+      </Link>
     )
   }
 
@@ -33,7 +31,8 @@ export default class AssociationList extends React.Component {
 
     return (
       <section className="associations">
-        <h1 className="section-title">{title}</h1>
+        <h1 className="page-title">{title}</h1>
+        <p class="lead">Her burde det være en generell tekst om foreningene. Hva er en forening? Hvordan kan man bli med i en forening? Hva gjør foreningene? Kan jeg se alt som arrangeres av Kulturutvalget, for eksempel?</p>
         <div className="association-list">
           {associations.map(({ node: association }) =>
             this.render_association(association)

src/components/PostList.js

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

src/css/associations.scss

@@ -4,29 +4,28 @@
 }
 
 .association {
-  width: 29.333333%;
-  margin: 0 2% 1rem 2%;
   position: relative;
+  width: calc(50% - 1rem);
+  margin: 0 0.5rem 1rem;
+  border: 1px solid black;
+  padding: 1rem;
 
   @media (max-width: $media-m) {
-    width: 46%;
-  }
-
-  @media (max-width: $media-s) {
     width: 100%;
-    margin-left: 0;
-    margin-right: 0;
+    margin: 0 0 1rem;
   }
-
   @media (min-width: $media-xl) {
-    width: 21%;
-  }
-  
-  a {
-    text-decoration: none;
-    color: inherit;
+    width: calc(33.333333333% - 1rem);
   }
 
+  display: flex;
+  
+  text-decoration: none;
+  color: inherit;
+  &:hover {
+    color: inherit;
+    border-color: orange;
+  }
   &-title {
     font-size: 1.3rem;
     margin-bottom: 0.6rem;
@@ -34,17 +33,20 @@
 
   &-image {
     width: 100%;
-    padding-right: 2rem;
-    margin-bottom: 1rem;
-    img {
-      height: 20rem;
-    }
+    max-width: 200px;
+    height: 200px;
+    overflow: hidden;
+    margin: 0 auto 1rem;
+    padding-left: 2rem;
+    order: 2;
   }
 
   &-text {
     width: 100%;
     p {
       font-size: $font-s;
+      line-height: 1.4;
+      margin-left: 0;
     }
   }
 }

src/css/base.scss

@@ -46,6 +46,13 @@ a {
 p {
   max-width: $width-m;
   margin: 0 auto 2rem;
+
+  &.lead {
+    font-size: 1.3rem;
+    text-align: center;
+    line-height: 1.3;
+    margin-bottom: 4rem;
+  }
 }
 
 h1, h2, h3, h4, h5, h6 {

src/css/events.scss

@@ -4,38 +4,16 @@
 }
 
 .events {
-  text-align: center;
   padding: 0;
 }
 
-.event-group-header {
-  text-transform: uppercase;
-  font-weight: 700;
-  font-size: 1.3rem;
-  line-height: 1.2;
-  letter-spacing: 0.05em;
-  margin: 0;
+.event-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .event-grouped-by-day {
-  display: inline-block;
-  //width: 29.333333%;
-  margin: 0 2% 1rem 2%;
-
-  @media (max-width: $media-m) {
-    width: 46%;
-  }
-
-  @media (max-width: $media-s) {
-    width: 100%;
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  @media (min-width: $media-xl) {
-    width: 21%;
-  }
-
   .event-types, .event-group-header {
     display: none;
   }
@@ -49,47 +27,32 @@
 
   .event-group-header {
     text-align: center;
-    background-color: $color-red;
+    background-color: $color-orange;
     color: $color-white;
-    margin: 0 -2rem;
+    margin: 0 -2rem 1rem;
     padding: 0.4rem 2rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 1.3rem;
+    line-height: 1.2;
+    letter-spacing: 0.05em;
   }
 
-  .event {
-    width: 47.2%;
-    margin: 0 1.4% 2rem 1.4%;
-
-    @media (max-width: $media-m) {
-      width: 46%;
-    }
-  
-    @media (max-width: $media-s) {
-      width: 100%;
-      margin-left: 0;
-      margin-right: 0;
-    }
-  
-    @media (min-width: $media-xl) {
-      width: 21%;
-    }
-  }
-
-
   .event-types {
     display: none;
   }
 }
 
-.event-list {
-  padding-top: 2rem;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: left;
-}
-
 .event {
-  width: 100%;
-  margin: 0 0 1.2rem 0;
+  width: calc(33.333333333% - 1rem);
+  margin: 0 0.5rem 1rem;
+  @media (max-width: $media-l) {
+    width: calc(50% - 1rem);
+  }
+  @media (max-width: $media-s) {
+    width: 100%;
+    margin: 0 0 1rem;
+  }
   position: relative;
   text-decoration: none;
   color: $color-black;
@@ -97,15 +60,20 @@
   text-align: left;
   display: flex;
   justify-content: space-between;
+  align-items: center;
 
   &-image {
     display: block;
     position: relative;
     width: 30%;
+    height: 100%;
     margin: 0;
+    overflow: hidden;
+    background: $color-black;
   }
 
   &-header {
+    width: 70%;
     padding: 0.6rem 0.8rem;
     line-height: 1.1;
   }

src/css/page.scss

@@ -18,6 +18,15 @@ h1.section-title {
   margin-top: 1rem;
 }
 
+.page-title {
+  font-size: 3.6rem;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  font-weight: 400;
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
 .wp-content {
   max-width: $width-m;
   margin: 0 auto;

src/templates/association.js

@@ -15,7 +15,7 @@ export const AssociationTemplate = data => {
   } = data
   return (
     <section className="association-page">
-      <h1 className="section-title">{title}</h1>
+      <h1 className="page-title">{title}</h1>
       {hasFeaturedMedia && (
         <div className="association-logo">
           <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />

src/templates/event.js

@@ -80,7 +80,7 @@ export const EventTemplate = ({
               Pris: {formatPrices(priceRegular, priceStudent)}
             </div>
             {ticketUrl && (
-              <a className="ticket-url" href={ticketUrl}>
+              <a className="ticket-url" href={ticketUrl} target="_blank">
                 Kjøp billetter
               </a>
             )}

src/templates/page.js

@@ -6,7 +6,7 @@ import Layout from '../components/Layout'
 export const PageTemplate = ({ title, content }) => {
   return (
     <section className="page">
-      <h1 className="section-title">{title}</h1>
+      <h1 className="page-title">{title}</h1>
       <div
         className="page-content wp-content"
         dangerouslySetInnerHTML={{ __html: content }}

src/templates/venue.js

@@ -29,7 +29,7 @@ export class VenueTemplate extends React.Component {
         }`}
       >
         <div className="venue-hero">
-          <h1 className="section-title">{title}</h1>
+          <h1 className="page-title">{title}</h1>
           {hasFeaturedMedia && (
             <div className="venue-featured-image">
               <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />