Session and speaker styling updates

web/themes/dcb2017/css/style.css

@@ -10,6 +10,15 @@ a:visited {
   a:visited:focus {
     color: black; }
 
+h1 {
+  font-size: 2.4em; }
+
+h2 {
+  font-size: 2em; }
+
+h3 {
+  font-size: 1.6em; }
+
 h1, h2, h3, h4 {
   font-weight: 600; }
 
@@ -338,4 +347,34 @@ nav.menu--main {
     height: auto;
     max-width: 100%; }
 
+.node--type-session .field--name-field-category,
+.node--type-session .field--name-field-level,
+.node--type-session .field--name-field-length {
+  padding-right: 5em; }
+  @media screen and (min-width: 37.5rem) {
+    .node--type-session .field--name-field-category,
+    .node--type-session .field--name-field-level,
+    .node--type-session .field--name-field-length {
+      float: left;
+      font-weight: 600; }
+      .node--type-session .field--name-field-category .field__label,
+      .node--type-session .field--name-field-level .field__label,
+      .node--type-session .field--name-field-length .field__label {
+        display: none; } }
+
+.node--type-session .field--name-body {
+  clear: both;
+  padding: 0.5em 0; }
+
+.node--type-speaker .node__content {
+  position: relative; }
+
+@media screen and (min-width: 37.5rem) {
+  .node--type-speaker .profile-picture {
+    position: absolute;
+    top: 0;
+    left: 0; }
+  .node--type-speaker .profile-info {
+    padding-left: 9em; } }
+
 /*# sourceMappingURL=style.css.map */

web/themes/dcb2017/dcb2017.theme

@@ -13,3 +13,10 @@ function dcb2017_preprocess_html(&$variables) {
     $variables['head_title'] = $site_config->get('name');
   }
 }
+
+/**
+ * Implements template_preprocess_node().
+ */
+function dcb2017_preprocess_node(&$variables) {
+
+}

web/themes/dcb2017/sass/_global.scss

@@ -13,6 +13,18 @@ a:visited {
   }
 }
 
+h1 {
+  font-size: 2.4em;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.6em;
+}
+
 h1, h2, h3, h4 {
   font-weight: 600;
 }

web/themes/dcb2017/sass/content/_session.scss

@@ -0,0 +1,21 @@
+.node--type-session {
+  .field--name-field-category,
+  .field--name-field-level,
+  .field--name-field-length {
+    padding-right: 5em;
+
+    @include media-tablet {
+      float: left;
+      font-weight: 600;
+
+      .field__label {
+        display: none;
+      }
+    }
+  }
+
+  .field--name-body {
+    clear: both;
+    padding: 0.5em 0;
+  }
+}

web/themes/dcb2017/sass/content/_speaker.scss

@@ -0,0 +1,17 @@
+.node--type-speaker {
+  .node__content {
+    position: relative;
+  }
+
+  @include media-tablet {
+    .profile-picture {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    .profile-info {
+      padding-left: 9em;
+    }
+  }
+}

web/themes/dcb2017/sass/style.scss

@@ -16,3 +16,6 @@
 @import 'components/blocks';
 @import 'components/forms';
 @import 'components/views';
+
+@import 'content/session';
+@import 'content/speaker';

web/themes/dcb2017/templates/content/node--session.html.twig

@@ -0,0 +1,98 @@
+{#
+/**
+ * @file
+ * Theme override to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: Themed creation date field.
+ * - author_name: Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_node()
+ *
+ * @todo Remove the id attribute (or make it a class), because if that gets
+ *   rendered twice on a page this is invalid CSS for example: two lists
+ *   in different view modes.
+ */
+#}
+{%
+  set classes = [
+    'node',
+    'node--type-' ~ node.bundle|clean_class,
+    node.isPromoted() ? 'node--promoted',
+    node.isSticky() ? 'node--sticky',
+    not node.isPublished() ? 'node--unpublished',
+    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
+  ]
+%}
+{{ attach_library('classy/node') }}
+<article{{ attributes.addClass(classes) }}>
+
+  {{ title_prefix }}
+  {% if not page %}
+    <h2{{ title_attributes }}>
+      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
+    </h2>
+  {% endif %}
+  {{ title_suffix }}
+
+  <div{{ content_attributes.addClass('node__content') }}>
+    {{ content }}
+  </div>
+
+</article>

web/themes/dcb2017/templates/content/node--speaker.html.twig

@@ -0,0 +1,111 @@
+{#
+/**
+ * @file
+ * Theme override to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: Themed creation date field.
+ * - author_name: Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_node()
+ *
+ * @todo Remove the id attribute (or make it a class), because if that gets
+ *   rendered twice on a page this is invalid CSS for example: two lists
+ *   in different view modes.
+ */
+#}
+{%
+  set classes = [
+    'node',
+    'node--type-' ~ node.bundle|clean_class,
+    node.isPromoted() ? 'node--promoted',
+    node.isSticky() ? 'node--sticky',
+    not node.isPublished() ? 'node--unpublished',
+    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
+  ]
+%}
+{{ attach_library('classy/node') }}
+<article{{ attributes.addClass(classes) }}>
+
+  {{ title_prefix }}
+  {% if not page %}
+    <h3{{ title_attributes }}>
+      {{ label }}
+    </h3>
+  {% endif %}
+  {{ title_suffix }}
+
+  <div{{ content_attributes.addClass('node__content') }}>
+    <div class="profile-picture">
+      {{ content.field_profile_picture }}
+    </div>
+    <div class="profile-info">
+      <div class="speaker-links">
+        {% if node.field_twitter_handle.value %}
+          <span class="speaker-twitter"><a href="https://twitter.com/{{ node.field_twitter_handle.value }}">{{ node.field_twitter_handle.value }}</a></span>
+        {% endif %}
+        {% if node.field_drupal_org_handle.value %}
+          <span class="speaker-drupal"><a href="https://www.drupal.org/u/{{ node.field_drupal_org_handle.value }}">{{ node.field_drupal_org_handle.value }}</a></span>
+        {% endif %}
+      </div>
+      {{ content.body }}
+    </div>
+  </div>
+
+</article>