CHEMH-89 | @jdwjdwjdw | Style event node and teaser (#55)

* Fixup event cta button icon

* Update event card styling

* Update events card template

* Update event card

* Add events list library

* Update event node page

* Update event node page styles, fixup event card link

* Update upcoming events button

* Update event node styles

* Fixups

* Update dist

* Remove a tag from event type

* Remove unnecessary code

* Update heading font-size

* Update dist

src/js/chem_h_subtheme.behaviors.js

@@ -30,9 +30,13 @@
           .removeAttr('height')
           .removeAttr('width');
       });
-
+      
       // Heading change for the halfpill title banner.
       $('.chemh-wrapper--banner-halfpill-title h2').contents().unwrap().wrap('<h1/>');
+
+      // Replace <a> tag for event node event type taxonomy with <p>
+      $('.node.event .section-editorial-content .su-event-type a').contents().unwrap().wrap('<p/>');
+
     }
   };
 

src/scss/components/events/_event-card.scss

@@ -0,0 +1,123 @@
+@charset "UTF-8";
+
+.su-event-card {
+  @include chemh--shadow-custom-button-default;
+  border-bottom-left-radius: 6rem;
+  padding-top: 0;
+
+  // Whole card hover and focus
+  &:hover,
+  &:focus,
+  &:focus-within,
+  &:active {
+    @include chemh--shadow-news-card-hover;
+
+    .su-event-card__footer {
+      a {
+        background-color: $chemh-color-red;
+      }
+    }
+  }
+
+  &.su-card {
+    .su-event-list-item__date {
+      background: black;
+      width: fit-content;
+      padding: 0.8rem 3rem;
+      max-width: unset;
+
+      .su-event-list-item__date__seperator {
+        color: #fff;
+        font-weight: 900;
+        margin-right: 2rem;
+        margin-left: 2rem;
+      }
+
+      .su-event-start-month,
+      .su-event-start-date,
+      .su-event-end-month,
+      .su-event-end-date {
+        font-weight: 400;
+        color: #fff;
+      }
+    }
+
+    .su-event-list-item__details {
+      .event-list-item__type {
+        display: block;
+        padding-bottom: 1rem;
+
+        a {
+          @include type_f;
+          color: $chemh-color-dusk;
+          text-decoration: none;
+          text-transform: uppercase;
+          font-weight: 600;
+        }
+      }
+
+      h2 {
+        a {
+          &:hover,
+          &:focus,
+          &:focus-within,
+          &:active {
+            color: $chemh-color-digital-blue;
+          }
+
+        }
+      }
+    }
+  }
+
+  &.su-card {
+    position: relative;
+    border: none;
+    height: 100%;
+
+    @media (max-width: 1550px) {
+      margin-bottom: 4.5rem;
+    }
+
+    @include grid-media-max('md') {
+      width: 100%;
+    }
+  }
+
+  .su-event-card__footer {
+    margin-top: 2rem;
+
+    a {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      padding: 1.3rem;
+      background-color: $chemh-color-dusk;
+      color: $su-color-white;
+      -webkit-box-shadow: unset;
+      box-shadow: unset;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: $chemh-color-red;
+
+        .su-link--icon,
+        .su-link--icon--external {
+          border-bottom: 2px solid white;
+          color: $su-color-white;
+        }
+      }
+    }
+  }
+
+  // Removing the external icon to move it to the
+  // lower right corner of event card.
+  a {
+    &.su-link--external {
+      &::after {
+        display: none;
+      }
+    }
+  }
+}

src/scss/components/events/_event-node.scss

@@ -0,0 +1,197 @@
+@charset "UTF-8";
+
+.node.event {
+  .section-editorial-content {
+    @include responsive-spacing('padding-top', 3);
+
+    background: $su-color-black url(../../assets/png/header-sm-000--cropped.png) no-repeat 5%/cover;
+    max-width: 100%;
+    width: 100%;
+    padding-bottom: 0;
+
+    @include grid-media-min('2xl') {
+      background: $su-color-black url(../../assets/png/header-sm-000--cropped.png) no-repeat 50%/cover;
+    }
+
+    .su-event-type {
+      text-align: center;
+
+      a,
+      p {
+        color: $su-color-white;
+        text-transform: uppercase;
+        letter-spacing: .3rem;
+        margin-bottom: .5rem;
+        opacity: .9;
+      }
+    }
+
+    .su-event-headline {
+      width: 100%;
+      max-width: 100%;
+      text-align: center;
+
+      h1 {
+        @include chemh-heading--badge;
+        @include responsive-spacing('margin-bottom', 3);
+
+        color: $su-color-white;
+
+        &::before {
+          margin: 3rem auto;
+        }
+      }
+    }
+
+    .su-event-subheadline {
+      max-width: 100%;
+      text-align: center;
+      background: white;
+      margin: 0 auto;
+
+      @include grid-media-min('sm') {
+        width: 70%;
+      }
+
+      &::before {
+        @include chemh-main-nav--gradient;
+
+        content: '';
+        height: 1rem;
+        display: block;
+      }
+
+      h2 {
+        @include responsive-spacing('padding-top', 1);
+        @include type-b;
+
+        margin-bottom: 0;
+
+        @include grid-media-min('sm') {
+          text-align: start;
+          margin-left: 3.2rem;
+        }
+
+        @include grid-media-min('md') {
+          margin-left: 5rem;
+        }
+
+        @include grid-media-min('lg') {
+          margin-left: 8rem;
+        }
+
+        @include grid-media-min('xl') {
+          margin-left: 10rem;
+        }
+
+      }
+    }
+
+    .node-stanford-event-su-event-dek {
+      max-width: 100%;
+      text-align: center;
+      background: white;
+      margin: 0 auto;
+
+      @include grid-media-min('sm') {
+        width: 70%;
+      }
+
+      .su-event-dek {
+        @include responsive-spacing('padding-top', 0);
+
+        font-family: $su-font-serif;
+        font-style: italic;
+        font-size: 3rem;
+        margin: 0 auto;
+
+        @include grid-media-min('sm') {
+          @include responsive-spacing('padding-bottom', 0);
+
+          text-align: start;
+          border-bottom: 1px solid rgb(0, 0, 0);
+          width: auto;
+          max-width: 100%;
+          margin-left: 3.2rem;
+          margin-right: 3.2rem;
+        }
+
+        @include grid-media-min('md') {
+          margin-left: 5rem;
+          margin-right: 5rem;
+        }
+
+        @include grid-media-min('lg') {
+          margin-left: 8rem;
+          margin-right: 8rem;
+        }
+
+        @include grid-media-min('xl') {
+          margin-left: 10rem;
+          margin-right: 10rem;
+        }
+      }
+    }
+
+    .su-event-sponsor {
+      @include responsive-spacing('padding-top', 0);
+
+      max-width: 100%;
+      text-align: center;
+      background: white;
+      margin: 0 auto;
+
+      @include grid-media-min('sm') {
+        width: 70%;
+      }
+
+      div {
+        @include grid-media-min('sm') {
+          text-align: start;
+          margin-left: 3.2rem;
+        }
+
+        @include grid-media-min('md') {
+          margin-left: 5rem;
+        }
+
+        @include grid-media-min('lg') {
+          margin-left: 8rem;
+        }
+
+        @include grid-media-min('xl') {
+          margin-left: 10rem;
+        }
+      }
+
+    }
+  }
+
+  .su-events-details {
+    @include grid-media-min('sm') {
+      .details-wrapper {
+        border: 0;
+        box-shadow: none;
+        padding: 0;
+
+        .details {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  .section-event-more-block {
+    .more-link {
+      a {
+        @include chemh-button--gradient;
+
+        &:focus,
+        &:hover {
+          background-color: $chemh-color-hover-peach;
+        }
+
+      }
+    }
+  }
+}

src/scss/components/events/index.scss

@@ -0,0 +1,6 @@
+@charset "UTF-8";
+
+// Events teaser Roll Up
+
+@import 'event-card';
+@import 'event-node';

src/scss/components/index.scss

@@ -24,6 +24,7 @@
 
 @import 'banner/index.scss';
 @import 'card/index.scss';
+@import 'events/index.scss';
 @import 'header/index.scss';
 @import 'local-footer/index.scss';
 @import 'main-navigation/index.scss';