Feat topic

css/style.css

@@ -348,6 +348,56 @@ section.gc-nav h1 {
     float: left;
   }
 }
+/**
+ * Contributirs (byline).
+ */
+.page-node-type-topic .gc-contributors {
+  margin-top: 38px;
+}
+
+.page-node-type-page .gc-contributors {
+  margin-bottom: 30px;
+}
+
+.gc-contributors h2,.gc-contributors ul {
+  font-size: 1em;
+  margin-top: 0;
+}
+
+.gc-contributors ul {
+  -webkit-padding-start: 20px;
+  padding-inline-start:20px;
+}
+
+.gc-contributors ul li {
+  font-weight: 700;
+}
+
+@media screen and (min-width: 992px) {
+  .gc-contributors {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .gc-contributors h2 {
+    line-height: 1.8em;
+  }
+  .gc-contributors ul {
+    -webkit-padding-start: 5px;
+    padding-inline-start:5px;
+  }
+  .gc-contributors ul li {
+    display: inline-block;
+    margin-right: .5em;
+  }
+  .gc-contributors ul li::after {
+    content: "\2022";
+    margin-left: .7em;
+  }
+  .gc-contributors ul li:last-child::after {
+    content: none;
+  }
+}
 /**
  * $file
  * Visual styles for fields.

sass/_overrides.scss

@@ -3,6 +3,7 @@
 @import "component/alert";
 @import "component/ajax";
 @import "component/book";
+@import "component/contributors";
 @import "component/field";
 @import "component/file";
 @import "component/filter";

sass/component/_contributors.scss

@@ -0,0 +1,63 @@
+/**
+ * Contributirs (byline).
+ */
+
+.page-node-type-topic {
+ 	.gc-contributors {
+    	margin-top: 38px;
+    }
+}
+
+.page-node-type-page {
+ 	.gc-contributors {
+    	margin-bottom: 30px;
+    }
+}
+
+.gc-contributors {
+    h2,
+    ul {
+    	font-size: 1em;
+    	margin-top: 0;
+    }
+
+    ul {
+	    -webkit-padding-start: 20px;
+	    padding-inline-start:20px;
+
+	    li {
+	    	font-weight: 700;
+	    }
+    }
+}
+
+@media screen and (min-width: 992px) {
+	.gc-contributors {
+	    display: -webkit-box;
+	    display: -ms-flexbox;
+	    display: flex;
+
+	    h2 {
+		    line-height: 1.8em;
+		}
+
+		ul {
+			-webkit-padding-start: 5px;
+	    	padding-inline-start:5px;
+
+	    	li {
+	    		display: inline-block;
+	    		margin-right: .5em;
+
+	    		&:after {
+				    content: "\2022";
+				    margin-left: .7em;
+				}
+
+				&:last-child::after {
+				    content: none
+				}
+	    	}
+		}
+	}
+}

templates/field/field--field-byline.html.twig

@@ -0,0 +1,52 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @ingroup templates
+ *
+ * @see template_preprocess_field()
+ */
+#}
+
+<section class="gc-contributors">
+  <h2>{{ 'From:'|t }}</h2>
+
+  <ul>
+    {% for item in items %}
+      <li>
+        {{ item.content }}
+      </li>
+    {% endfor %}
+  </ul>
+</section>

templates/field/field--field-social-media-block.html.twig

@@ -0,0 +1,57 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @ingroup templates
+ *
+ * @see template_preprocess_field()
+ */
+#}
+
+<div class="gc-followus">
+  <h2 class="mrgn-tp-0 h3">
+    {{ label }}
+  </h2>
+
+  {% if is_horizontal %}
+    <ul class="list-inline mrgn-bttm-lg">
+  {% else %}
+    <ul>
+  {% endif %}
+
+    {% for item in items %}
+      {{ item.content }}
+    {% endfor %}
+  </ul>
+</div>

templates/field/field--field-social-media-link.html.twig

@@ -0,0 +1,44 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @ingroup templates
+ *
+ * @see template_preprocess_field()
+ */
+#}
+
+{% for item in items %}
+  {{ item.content }}
+{% endfor %}