💅 lotsa nice styles (wip)

src/css/associations.scss

@@ -27,4 +27,39 @@
       font-size: $font-s;
     }
   }
+}
+
+.association-page {
+  .association-logo {
+    width: $width-s;
+    max-width: 100%;
+    margin: 1rem auto;
+  }
+
+  .association-type {
+    max-width: $width-m;
+    margin: 0 auto;
+  }
+}
+.association-content {
+  max-width: $width-m;
+  margin: 0 auto;
+
+  img, div {
+    max-width: 100%;
+  }
+
+  ul {
+    max-width: $width-m;
+    margin: 0 auto 1rem;
+  }
+
+  ul, p {
+    margin: 0 auto 1.6rem;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    max-width: $width-m;
+    margin-top: 3.6rem;
+  }
 }

src/css/base.scss

@@ -12,8 +12,8 @@ html {
 
 body {
   min-height: 100%;
-  margin: 14rem 0 0;
-  padding: 0;
+  margin: 0;
+  padding: 2.5rem 0 0;
   background: $color-background;
   color: $color-text;
 

src/css/events.scss

@@ -1,6 +1,7 @@
-.events {
-  background: $color-black;
-  color: $color-white;
+.front-page-events, .event-program, .events {
+  background: $color-pink;
+  color: $color-text-event;
+  padding-top: 0;
 }
 
 .event-group-header {
@@ -10,15 +11,29 @@
   font-size: 1.3rem;
   line-height: 1.2;
   letter-spacing: 0.05em;
-  margin: 0 0 1.2rem;
+  margin: 0;
 }
 
 .event-grouped-by-day {
   display: inline-block;
-  width: 31.333333%;
-  margin: 0 1% 1rem 1%;
+  width: 29.333333%;
+  margin: 0 2% 1rem 2%;
 
-  .event-types, .event-date {
+  @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;
   }
 }
@@ -31,7 +46,8 @@
     text-align: center;
     background-color: $color-red;
     color: $color-white;
-    margin: 2rem -2rem;
+    margin: 0 -2rem;
+    padding: 0.4rem 2rem;
   }
 
   .event {
@@ -53,11 +69,6 @@
     }
   }
 
-  .event-date {
-    font-size: 1rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
 
   .event-types {
     display: none;
@@ -65,6 +76,7 @@
 }
 
 .event-list {
+  padding-top: 2rem;
   display: flex;
   flex-wrap: wrap;
   justify-content: left;
@@ -75,7 +87,7 @@
   margin: 0 0 1.2rem 0;
   position: relative;
   padding-bottom: 1.2rem;
-  border-bottom: 1px solid $color-white;
+  border-bottom: 0.13rem solid $color-text-event;
 
   text-decoration: none;
 
@@ -88,7 +100,7 @@
   &-title {
     display: block;
     text-decoration: none;
-    color: $color-white;
+    color: $color-text-event;
     font-size: 1.3rem;
     font-weight: 700;
     line-height: 1.2;
@@ -112,7 +124,7 @@
 
   &-meta {
     font-size: $font-s;
-    color: $color-white;
+    color: $color-text-event;
   }
 
   .event-start {
@@ -148,6 +160,14 @@
     }
   }
 
+  .event-date {
+    display: block;
+    font-size: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    line-height: 1.2;
+  }
+
   @media (max-width: $media-s) {
     margin: 0 0 1.2rem;
   }

src/css/footer.scss

@@ -7,21 +7,33 @@
   flex-wrap: wrap;
   justify-content: center;
 
+  .info {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 0 auto 2rem;
+  }
+
   .logo {
-    width: $width-m;
+    width: 50%;
     padding-right: 3rem;
   }
-
   p {
-    margin: 0 0 3rem;
+    width: 50%;
+    margin: 0;
   }
-}
 
-.info {
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
+  @media (max-width: $media-s) {
+    .info {
+      display: block;
+    }
+    .logo, p {
+      width: 100%;
+      padding: 0;
+      margin: 0 0 2rem;
+    }
+  }
 }
 
 .social-nav {
@@ -35,14 +47,4 @@
       margin-right: 0;
     }
   }
-}
-
-.hours {
-  font-size: 2rem;
-  background: $color-red;
-  width: 100%;
-}
-
-.meta {
-  font-size: $font-xs;
 }

src/css/header.scss

@@ -1,5 +1,5 @@
 .site-header {
-  padding: 1rem;
+  padding: 0.6rem 1rem;
   background: $color-black;
   color: $color-white;
   display: flex;
@@ -12,8 +12,8 @@
   z-index: 10;
 
   .logo {
-    width: 6rem;
-    height: 6rem;
+    width: 1rem;
+    height: 1rem;
     margin: 0 3rem;
   }
 }

src/css/page.scss

@@ -1,8 +1,8 @@
 .section-title {
-  margin: 2rem auto 4rem;
+  margin: 1rem auto 3rem;
   font-weight: 700;
-
   font-size: 3.2rem;
+  line-height: 1.1;
   text-align: center;
 }
 

src/css/variables.scss

@@ -12,7 +12,10 @@ $color-black: #060606;
 $color-white: #FFFFFF;
 
 $color-background: $color-black;
+
 $color-text: $color-white;
+$color-text-event: $color-black;
+
 $color-link: $color-orange;
 $color-hover: $color-yellow;