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

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;