711: Styled blog page header

web/modules/custom/posse_dc/src/Plugin/Block/BlogHeader.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace Drupal\posse_dc\Plugin\Block;
+
+use Drupal\Core\Block\BlockBase;
+
+/**
+ * Provides a 'BlogHeader' block.
+ *
+ * @Block(
+ *  id = "blog_header",
+ *  admin_label = @Translation("Blog header"),
+ * )
+ */
+class BlogHeader extends BlockBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function build() {
+    $build = [];
+    $build['blog_header']['#markup'] = 'Implement BlogHeader.';
+
+    return $build;
+  }
+
+}

web/themes/custom/posse_theme/scss/_posse_misc_bh.scss

@@ -0,0 +1,62 @@
+/***** Blog Page *****/
+
+
+/* Blog Header */
+
+.blog_section {
+	height: 500px;
+	width: 1140px;
+	background-color: #1c3243;
+	display: inline-flex;
+	font-family: 'Montserrat', sans-serif;
+	img {
+		width: 50%;
+	}
+}
+
+.content_section {
+	width: 570px;
+	color: #ffff;
+	text-align: center;
+}
+
+.top_section {
+	margin-top: 42px;
+	margin-bottom: 42px;
+	word-spacing: 90px;	
+}
+
+.mid_section span {
+	color: #FFA500;
+	font-size: 18px;
+	font-weight: lighter;
+	text-transform: uppercase;
+	font-family: 'Montserrat', sans-serif;
+}
+
+.mid_section p {
+	font-size: 40px;
+	text-transform: uppercase;
+	padding: 10px 40px;
+	letter-spacing: 5px;
+	font-family: 'Montserrat', sans-serif;
+}
+
+.top_section ul {
+	list-style-type: none;
+	li {
+		display: inline;
+		font-weight: 100;
+		font-size: 24px;
+	}
+}
+
+.lower_section p {
+	text-transform: uppercase;
+	padding-top: 30px;
+	letter-spacing: 8px;
+}
+
+.lower_section p span {
+	margin-bottom: 18px;
+}

web/themes/custom/posse_theme/scss/style.scss

@@ -12,3 +12,6 @@
 
 // Miscillaneous styling for PROJ-POSSE
 @import 'proj-posse';
+
+// POSSE Blog Header Theme styling.
+@import 'posse_misc_bh';

web/themes/custom/posse_theme/templates/block--blogheader.html.twig

@@ -0,0 +1,77 @@
+{% extends "block.html.twig" %}
+{#
+/**
+ * @file
+ * Default theme implementation to display a block.
+ *
+ * Available variables:
+ * - $block->subject: Block title.
+ * - $content: Block content.
+ * - $block->module: Module that generated the block.
+ * - $block->delta: An ID for the block, unique within each module.
+ * - $block->region: The block region embedding the current block.
+ * - $classes: String of classes that can be used to style contextually through
+ *   CSS. It can be manipulated through the variable $classes_array from
+ *   preprocess functions. The default values can be one or more of the
+ *   following:
+ *   - block: The current template type, i.e., "theming hook".
+ *   - block-[module]: The module generating the block. For example, the user
+ *     module is responsible for handling the default user navigation block. In
+ *     that case the class would be 'block-user'.
+ * - $title_prefix (array): An array containing additional output populated by
+ *   modules, intended to be displayed in front of the main title tag that
+ *   appears in the template.
+ * - $title_suffix (array): An array containing additional output populated by
+ *   modules, intended to be displayed after the main title tag that appears in
+ *   the template.
+ *
+ * Helper variables:
+ * - $classes_array: Array of html class attribute values. It is flattened
+ *   into a string within the variable $classes.
+ * - $block_zebra: Outputs 'odd' and 'even' dependent on each block region.
+ * - $zebra: Same output as $block_zebra but independent of any block region.
+ * - $block_id: Counter dependent on each block region.
+ * - $id: Same output as $block_id but independent of any block region.
+ * - $is_front: Flags true when presented in the front page.
+ * - $logged_in: Flags true when the current user is a logged-in member.
+ * - $is_admin: Flags true when the current user is an administrator.
+ * - $block_html_id: A valid HTML ID and guaranteed unique.
+ *
+ * @ingroup templates
+ *
+ * @see bootstrap_preprocess_block()
+ * @see template_preprocess()
+ * @see template_preprocess_block()
+ * @see bootstrap_process_block()
+ * @see template_process()
+ */
+#}
+  {% block content %}
+  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+
+    <div class="blog_section">
+      <img src="{{ base_path ~ directory }}/images/blog-donut.png" alt="donutpic">
+        <div class="content_section">
+           <div class="top_section">
+            <ul>
+              <li>Work</li>
+              <li>Blog</li>
+              <li>Contact</li>
+            </ul>
+          </div>  
+
+        <div class="mid_section">
+          <span>Blog</span>
+          <p>New Site Launch: Sullivan Street Bakery</p>
+        </div>
+
+        <div class="lower_section">
+          <p>By | <span>Reed Richards</span></p>
+        </div>
+      </div>         
+    </div>
+
+  {% endblock %}
+
+
+