From d2080d5890da77ccfdb5f937b702987e25096e66 Mon Sep 17 00:00:00 2001
From: kmurphychi247 <82771690+kmurphychi247@users.noreply.github.com>
Date: Mon, 19 Aug 2024 13:11:15 -0500
Subject: [PATCH] adds config and templates for search block (#55)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* adds config and templates for search block

* adds styling changes for formatting a page and post using a hero block and adds styling for the search block

* updates search display in precontent

* removes block config from theme

* removes padding from node template

---------

Co-authored-by: “Kerry <“kmurphychi@gmail.com”>
---
 assets/scss/custom/_footer.scss               |   8 +-
 assets/scss/custom/_overrides.scss            |  23 ++-
 assets/scss/custom/_search.scss               |  95 ++++++++++++
 ...ock.block.saplings_child_local_actions.yml |  17 +++
 ...block.block.saplings_child_local_tasks.yml |   4 +-
 .../block.block.saplings_child_page_title.yml |   3 +-
 ...plings_child_views_block__hero_block_1.yml |  24 +++
 saplings_child.info.yml                       |   3 +-
 .../block/block--search-block.html.twig       |  31 ++++
 .../field--node--sa-body--sa-event.html.twig  |  67 ---------
 templates/overrides/node/node--hero.html.twig | 139 ++++++++++++++++++
 templates/overrides/node/node.html.twig       |  89 +++--------
 templates/overrides/system/page.html.twig     |  56 +++++--
 .../views/views-view--search.html.twig        |  73 +++++++++
 14 files changed, 471 insertions(+), 161 deletions(-)
 create mode 100644 assets/scss/custom/_search.scss
 create mode 100644 config/optional/block.block.saplings_child_local_actions.yml
 create mode 100644 config/optional/block.block.saplings_child_views_block__hero_block_1.yml
 create mode 100644 templates/overrides/block/block--search-block.html.twig
 delete mode 100644 templates/overrides/fields/field--node--sa-body--sa-event.html.twig
 create mode 100644 templates/overrides/node/node--hero.html.twig
 create mode 100644 templates/overrides/views/views-view--search.html.twig

diff --git a/assets/scss/custom/_footer.scss b/assets/scss/custom/_footer.scss
index 26fc676..216505c 100644
--- a/assets/scss/custom/_footer.scss
+++ b/assets/scss/custom/_footer.scss
@@ -2,7 +2,7 @@
 #footer {
   // Footer brand block placed first.
   #block-saplings-child-sitebranding-footer {
-    padding-left: 2rem;
+    padding-inline-start: 2rem;
   }
 
   ul.menu.menu--social.navbar-nav {
@@ -22,11 +22,11 @@
     .nav-link {
       padding: unset;
       position: relative;
-      margin-left: 1rem;
+      margin-inline-start: 1rem;
 
       @include media-breakpoint-down(md) {
-        margin-left: 0;
-        margin-right: 1rem;
+        margin-inline-start: 0;
+        margin-inline-end: 1rem;
       }
     }
 
diff --git a/assets/scss/custom/_overrides.scss b/assets/scss/custom/_overrides.scss
index 5277331..b856f41 100644
--- a/assets/scss/custom/_overrides.scss
+++ b/assets/scss/custom/_overrides.scss
@@ -6,18 +6,23 @@
 
 // Make sure container fluid is edge to edge.
 .container-fluid {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
+  padding-inline-start: 0 !important;
+  padding-inline-end: 0 !important;
 
   .row {
-    margin-right: 0;
-    margin-left: 0;
+    margin-inline-end: 0;
+    margin-inline-start: 0;
   }
 }
 
 // Main menu.
 #block-saplings-child-mainnavigation {
   width: 100%;
+  display: flex;
+
+  @include media-breakpoint-up(lg) {
+    justify-content: end;
+  }
 }
 
 // Main menu align right.
@@ -28,7 +33,7 @@
 }
 
 // Unset align right on mobile.
-@include media-breakpoint-down(md) {
+@include media-breakpoint-down(lg) {
   .navbar-expand-lg .navbar-nav {
     flex-direction: column;
     justify-content: start;
@@ -88,3 +93,11 @@ lite-youtube {
   border: 1px solid #000;
   cursor: pointer;
 }
+
+.text-align-center {
+  text-align: center;
+}
+
+.text-align-right {
+  text-align: end;
+}
diff --git a/assets/scss/custom/_search.scss b/assets/scss/custom/_search.scss
new file mode 100644
index 0000000..e64c2d4
--- /dev/null
+++ b/assets/scss/custom/_search.scss
@@ -0,0 +1,95 @@
+ #searchForm {
+   form {
+     display: flex;
+     width: 100%;
+
+     label {
+       display: none;
+     }
+
+     button.js-form-submit {
+       border-radius: 0 6.375rem 6.375rem 0;
+       height: 3.375rem;
+       font-size: 1.5rem;
+       line-height: 1.25;
+       letter-spacing: -0.01rem;
+     }
+
+     input {
+       border-color: #7e92ae;
+       border-radius: 1.6875rem 0 0 1.6875rem;
+       height: 3.375rem;
+       padding-inline-start: 1.875rem;
+     }
+
+     .form-type-textfield {
+       width: 100%;
+     }
+   }
+ }
+
+ #precontent {
+   form {
+     @include media-breakpoint-up(lg) {
+       display: flex;
+       width: 100%;
+
+       justify-content: center;
+       gap: 1rem;
+
+       label {
+         display: none;
+       }
+     }
+   }
+ }
+
+ .modal#searchForm {
+   .js-form-type-select {
+     display: none;
+   }
+
+   @include media-breakpoint-down(lg) {
+     display: block;
+     position: relative;
+     opacity: 1;
+
+     .modal-header {
+       display: none;
+     }
+
+     .modal-content {
+       background: none;
+       border: none;
+       box-shadow: none;
+     }
+
+     .modal-body {
+       padding: 0;
+     }
+
+     .modal-dialog {
+       margin: 0;
+       transform: none;
+       transition: none;
+     }
+   }
+
+   @include media-breakpoint-up(lg) {
+     top: 100px;
+   }
+ }
+
+ button.btn.search {
+   @include media-breakpoint-down(lg) {
+     display: none;
+   }
+ }
+
+ .gin--vertical-toolbar.user-logged-in {
+   .modal#searchForm {
+     @include media-breakpoint-up(lg) {
+       top: 160px;
+     }
+   }
+ }
diff --git a/config/optional/block.block.saplings_child_local_actions.yml b/config/optional/block.block.saplings_child_local_actions.yml
new file mode 100644
index 0000000..b6d66ef
--- /dev/null
+++ b/config/optional/block.block.saplings_child_local_actions.yml
@@ -0,0 +1,17 @@
+langcode: en
+status: true
+dependencies:
+  theme:
+    - saplings_child
+id: saplings_child_local_actions
+theme: saplings_child
+region: header
+weight: -7
+provider: null
+plugin: local_actions_block
+settings:
+  id: local_actions_block
+  label: 'Primary admin actions'
+  label_display: '0'
+  provider: core
+visibility: {  }
diff --git a/config/optional/block.block.saplings_child_local_tasks.yml b/config/optional/block.block.saplings_child_local_tasks.yml
index 07df50a..ed156e7 100644
--- a/config/optional/block.block.saplings_child_local_tasks.yml
+++ b/config/optional/block.block.saplings_child_local_tasks.yml
@@ -6,14 +6,14 @@ dependencies:
 id: saplings_child_local_tasks
 theme: saplings_child
 region: header
-weight: 10
+weight: -8
 provider: null
 plugin: local_tasks_block
 settings:
   id: local_tasks_block
   label: Tabs
-  provider: core
   label_display: '0'
+  provider: core
   primary: true
   secondary: true
 visibility: {  }
diff --git a/config/optional/block.block.saplings_child_page_title.yml b/config/optional/block.block.saplings_child_page_title.yml
index 098be15..3b8496b 100644
--- a/config/optional/block.block.saplings_child_page_title.yml
+++ b/config/optional/block.block.saplings_child_page_title.yml
@@ -2,14 +2,13 @@ langcode: en
 status: true
 dependencies:
   module:
-    - block_class
     - system
   theme:
     - saplings_child
 id: saplings_child_page_title
 theme: saplings_child
 region: content
-weight: -30
+weight: -7
 provider: null
 plugin: page_title_block
 settings:
diff --git a/config/optional/block.block.saplings_child_views_block__hero_block_1.yml b/config/optional/block.block.saplings_child_views_block__hero_block_1.yml
new file mode 100644
index 0000000..b1d2b0b
--- /dev/null
+++ b/config/optional/block.block.saplings_child_views_block__hero_block_1.yml
@@ -0,0 +1,24 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - views.view.hero
+  module:
+    - views
+  theme:
+    - saplings_child
+id: saplings_child_views_block__hero_block_1
+theme: saplings_child
+region: hero
+weight: -8
+provider: null
+plugin: 'views_block:hero-block_1'
+settings:
+  id: 'views_block:hero-block_1'
+  label: ''
+  label_display: '0'
+  provider: views
+  context_mapping: {  }
+  views_label: ''
+  items_per_page: none
+visibility: {  }
diff --git a/saplings_child.info.yml b/saplings_child.info.yml
index 1d7f057..7ad6533 100644
--- a/saplings_child.info.yml
+++ b/saplings_child.info.yml
@@ -11,9 +11,10 @@ regions:
   header: "Top Bar"
   highlighted: "Highlighted"
   help: "Help"
+  hero: "Hero"
+  pre_content: "Pre Content"
   content: "Content"
   sidebar_first: "Primary"
-  sidebar_second: "Secondary"
   footer: "Footer"
   page_top: "Page top"
   page_bottom: "Page bottom"
diff --git a/templates/overrides/block/block--search-block.html.twig b/templates/overrides/block/block--search-block.html.twig
new file mode 100644
index 0000000..b054862
--- /dev/null
+++ b/templates/overrides/block/block--search-block.html.twig
@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a branding block.
+ *
+ * Each branding element variable (logo, name, slogan) is only available if
+ * enabled in the block configuration.
+ *
+ * Available variables:
+ * - site_logo: Logo for site as defined in Appearance or theme settings.
+ * - site_name: Name for site as defined in Site information settings.
+ * - site_slogan: Slogan for site as defined in Site information settings.
+ *
+ * @ingroup templates
+ */
+#}
+<button type="button" aria-label="Search" aria-labelledby="Search" class="btn search" data-bs-toggle="modal" data-bs-target="#searchForm"><i class="bi bi-search" aria-hidden="true"></i></button>
+<div class="modal fade" id="searchForm" tabindex="-1" aria-labelledby="searchForm" aria-modal="true" role="dialog" data-bs-backdrop="false">
+  <div class="modal-dialog modal-xl">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        {% block content %}
+        {{ content }}
+        {% endblock %}
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/templates/overrides/fields/field--node--sa-body--sa-event.html.twig b/templates/overrides/fields/field--node--sa-body--sa-event.html.twig
deleted file mode 100644
index b59199f..0000000
--- a/templates/overrides/fields/field--node--sa-body--sa-event.html.twig
+++ /dev/null
@@ -1,67 +0,0 @@
-{#
-/**
- * @file
- * Default theme implementation 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.
- *
- * @see template_preprocess_field()
- *
- * @ingroup themeable
- */
-#}
-{{ attach_library('ui_suite_bootstrap/field') }}
-{%
-  set title_classes = [
-    'field--label',
-    'field--label--' ~ label_display|clean_class,
-    label_display == 'visually_hidden' ? 'visually-hidden',
-    label_display == 'inline' ? 'float-start',
-    label_display == 'inline' ? 'pe-2',
-    'fw-bold',
-  ]
-%}
-{% set field_items_attributes = create_attribute({
-  'class': [
-    'field--items',
-    multiple and label_display == 'inline' ? 'float-start'
-  ]
-}) %}
-<div{{ attributes.addClass('field--name-sa-body', 'mt-3') }}>
-  {% if not label_hidden %}
-    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
-  {% endif %}
-  <div{{ field_items_attributes }}>
-    {% for item in items %}
-      <div>{{ item.content }}</div>
-    {% endfor %}
-  </div>
-</div>
diff --git a/templates/overrides/node/node--hero.html.twig b/templates/overrides/node/node--hero.html.twig
new file mode 100644
index 0000000..8bb3540
--- /dev/null
+++ b/templates/overrides/node/node--hero.html.twig
@@ -0,0 +1,139 @@
+{#
+/**
+ * @file
+ * Default theme implementation 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: (optional) 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: (optional) Themed creation date field.
+ * - author_name: (optional) 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()
+ *
+ * @ingroup themeable
+ */
+#}
+
+{% set header_position = '' %}
+{% if content.sa_header_position is not empty %}
+  {% set header_position = content.sa_header_position|render|striptags|trim %}
+{% endif %}
+
+{% set overlay_level = '' %}
+{% if content.sa_overlay is not empty %}
+  {% set overlay_level = content.sa_overlay|render|striptags|trim %}
+{% endif %}
+
+{%
+  set classes = [
+    node.bundle|clean_class,
+    node.isPromoted() ? 'is-promoted',
+    node.isSticky() ? 'is-sticky',
+    'container-fluid',
+  ]
+%}
+
+<header{{ attributes.addClass(classes) }}>
+  {% if content.sa_hide_header[0]["#markup"] == 1 %}
+    <h1 class="visually-hidden">{{ label }}</h1>
+  {% else %}
+    {# Prints a nice image header. #}
+    {% if content.sa_featured_image[0] is not empty %}
+      <div class="page-header mb-lg-0 mb-3 {% if header_position is not empty %} {{ header_position }}{% endif %}"{% if overlay_level is not empty %} data-overlay="{{ overlay_level }}{% endif %}">
+        {{ content.sa_featured_image }}
+        <div class="page-header__meta">
+    {# If there is no image, print a simple header. #}
+    {% else %}
+      <div class="container">
+        <header class="row">
+          <div class="col col-12">
+    {% endif %}
+            {{ title_prefix }}
+            <h1>{{ label }}</h1>
+            {{ title_suffix }}
+            {% if node.bundle == 'sa_post'%}
+              <div class="field--name-published_at">
+                {{ node.published_at.value|date('F j, Y') }}
+              </div>
+            {% endif %}
+            {% if content.sa_author is not empty %}
+              <div class="field--name-sa-author">
+                <span class="fw-bold">By: </span>
+                {% if content.sa_author_url is not empty %}
+                  <a href="{{ content.sa_author_url|render|striptags|trim }}">
+                {% endif %}
+                {{ content.sa_author }}
+                {% if content.sa_author_url is not empty %}
+                </a>
+                {% endif %}
+              </div>
+            {% endif %}
+            {% if content.sa_external_source is not empty %}
+              <div class="field--name-sa-external-source">
+                {{ content.sa_external_source }}
+              </div>
+            {% endif %}
+    {% if content.sa_featured_image[0] is not empty %}
+        </div> <!-- / page-header__meta -->
+    {% endif %}
+        <div class="field--name-sa-description">{{ content.sa_description }}</div>
+    {% if content.sa_featured_image[0] is not empty %}
+      </header> <!-- / page-header -->
+    {% else %}
+    {% endif %}
+  {% endif %}
diff --git a/templates/overrides/node/node.html.twig b/templates/overrides/node/node.html.twig
index d38708c..72d3af0 100644
--- a/templates/overrides/node/node.html.twig
+++ b/templates/overrides/node/node.html.twig
@@ -68,84 +68,31 @@
  * @ingroup themeable
  */
 #}
-
-{% set header_position = '' %}
-{% if content.sa_header_position is not empty %}
-  {% set header_position = content.sa_header_position|render|striptags|trim %}
-{% endif %}
-
-{% set overlay_level = '' %}
-{% if content.sa_overlay is not empty %}
-  {% set overlay_level = content.sa_overlay|render|striptags|trim %}
-{% endif %}
-
 {%
   set classes = [
     node.bundle|clean_class,
     node.isPromoted() ? 'is-promoted',
     node.isSticky() ? 'is-sticky',
-    'container-fluid',
+    view_mode ? view_mode|clean_class,
+    'clearfix p-0',
   ]
 %}
+<article{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {{ title_suffix }}
 
-{%
-  set content_classes = [
-    'page-body'
-  ]
-%}
-<div{{ attributes.addClass(classes) }} role="main">
-  {% if content.sa_hide_header[0]["#markup"] == 1 %}
-    <h1 class="visually-hidden">{{ label }}</h1>
-  {% else %}
-    {# Prints a nice image header. #}
-    {% if content.sa_featured_image[0] is not empty %}
-      <div class="page-header mb-lg-0 mb-3 {% if header_position is not empty %} {{ header_position }}{% endif %}"{% if overlay_level is not empty %} data-overlay="{{ overlay_level }}{% endif %}">
-        {{ content.sa_featured_image }}
-        <div class="page-header__meta">
-    {# If there is no image, print a simple header. #}
-    {% else %}
-      <div class="container">
-        <div class="row">
-          <div class="col col-12">
-    {% endif %}
-            {{ title_prefix }}
-            <h1>{{ label }}</h1>
-            {{ title_suffix }}
-            {# {% if node.bundle == 'sa_post' and node.isPublished() %}
-              <div class="field--name-published_at">
-                {{ node.published_at.value|date('F j, Y') }}
-              </div>
-            {% endif %} #}
-            {% if content.sa_author is not empty %}
-              <div class="field--name-sa-author">
-                <span class="fw-bold">By: </span>
-                {% if content.sa_author_url is not empty %}
-                  <a href="{{ content.sa_author_url|render|striptags|trim }}">
-                {% endif %}
-                {{ content.sa_author }}
-                {% if content.sa_author_url is not empty %}
-                </a>
-                {% endif %}
-              </div>
-            {% endif %}
-            {% if content.sa_external_source is not empty %}
-              <div class="field--name-sa-external-source">
-                {{ content.sa_external_source }}
-              </div>
-            {% endif %}
-    {% if content.sa_featured_image[0] is not empty %}
-        </div> <!-- / page-header__meta -->
-    {% endif %}
-        <div class="field--name-sa-description">{{ content.sa_description }}</div>
-    {% if content.sa_featured_image[0] is not empty %}
-      </div> <!-- / page-header -->
-    {% else %}
-          </div> <!-- / col -->
-        </div> <!-- / row -->
-      </div> <!-- / container -->
-    {% endif %}
+  {% if display_submitted %}
+    <footer>
+      {{ author_picture }}
+      <div{{ author_attributes }}>
+        {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
+        {{ metadata }}
+      </div>
+    </footer>
   {% endif %}
-  <div{{ content_attributes.addClass(content_classes) }}>
-    {{ content|without('published_at', 'sa_author', 'sa_author_url', 'sa_description', 'sa_hide_header', 'sa_external_source', 'sa_featured_image', 'sa_header_position', 'sa_overlay', ) }}
+
+  <div{{ content_attributes }}>
+    {{ content }}
   </div>
-</div> <!-- / main -->
+
+</article>
diff --git a/templates/overrides/system/page.html.twig b/templates/overrides/system/page.html.twig
index e409915..62dcf19 100644
--- a/templates/overrides/system/page.html.twig
+++ b/templates/overrides/system/page.html.twig
@@ -76,13 +76,13 @@
     {% if is_admin %}
       {% if page.header %}
         {% block header %}
-            <div class="{{ container }}" id="header">
-              <div class="row">
-                <div class="col col-12 mb-4 pb-1">
-                  {{ page.header }}
-                </div>
+          <div class="{{ container }}" id="header">
+            <div class="row">
+              <div class="col col-12 mb-4 pb-1">
+                {{ page.header }}
               </div>
             </div>
+          </div>
         {% endblock %}
       {% endif %}
     {% endif %}
@@ -106,12 +106,50 @@
     </div>
   {% endblock %}
 {% endif %}
+{% if page.pre_content %}
+  {% block pre_content %}
+    <div class="container mt-3 mb-3" id="precontent">
+      {{ page.pre_content }}
+    </div>
+  {% endblock %}
+{% endif %}
+{# Hero #}
+{% if page.hero %}
+  {% block hero %}
+    {{ page.hero }}
+  {% endblock %}
+{% endif %}
 {# Content #}
+{%
+  set content_classes = [
+  page.sidebar_first ? 'col col-12 col-md-10',
+  page.sidebar_first is empty ? 'col col-12'
+]
+%}
 {% block content %}
-  <main class="container-fluid" id="main-content">
-    <div class="row">
-     {{ page.content }}
-   </div>
+  {# Sidebar First #}
+  {% if page.sidebar_first %}
+    <main class="container" id="main-content">
+      <div class="row">
+        {% block sidebar_first %}
+          <aside class="col col-12 col-md-2 mt-3 mt-md-5" role="complementary">
+            {{ page.sidebar_first }}
+          </aside>
+        {% endblock %}
+      {% else %}
+        <main class="container-fluid" id="main-content">
+          <div class="row">
+          {% endif %}
+          {% if page.sidebar_first %}
+            <section{{content_attributes.addClass(content_classes)}}>
+            {% endif %}
+            {{ page.content }}
+            {% if page.sidebar_first %}
+            </div>
+          </div>
+        </section>
+      {% endif %}
+    </div>
   </main>
 {% endblock %}
 {% if page.footer %}
diff --git a/templates/overrides/views/views-view--search.html.twig b/templates/overrides/views/views-view--search.html.twig
new file mode 100644
index 0000000..a6fc3f7
--- /dev/null
+++ b/templates/overrides/views/views-view--search.html.twig
@@ -0,0 +1,73 @@
+{#
+/**
+ * @file
+ * Default theme implementation for main view template.
+ *
+ * Available variables:
+ * - attributes: Remaining HTML attributes for the element.
+ * - css_name: A CSS-safe version of the view name.
+ * - css_class: The user-specified classes names, if any.
+ * - header: The optional header.
+ * - footer: The optional footer.
+ * - rows: The results of the view query, if any.
+ * - empty: The content to display if there are no rows.
+ * - pager: The optional pager next/prev links to display.
+ * - exposed: Exposed widget form/info to display.
+ * - feed_icons: Optional feed icons to display.
+ * - more: An optional link to the next page of results.
+ * - title: Title of the view, only used when displaying in the admin preview.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the view title.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the view title.
+ * - attachment_before: An optional attachment view to be displayed before the
+ *   view content.
+ * - attachment_after: An optional attachment view to be displayed after the
+ *   view content.
+ * - dom_id: Unique id for every view being printed to give unique class for
+ *   JavaScript.
+ *
+ * @see template_preprocess_views_view()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    dom_id ? 'js-view-dom-id-' ~ dom_id,
+  ]
+%}
+<div class="container">
+  {{ title_prefix }}
+  {{ title }}
+  {{ title_suffix }}
+
+  {% if header %}
+    <header>
+      {{ header }}
+    </header>
+  {% endif %}
+
+  {{ exposed }}
+  {{ attachment_before }}
+
+  {% if rows -%}
+  <div{{ attributes.addClass(classes) }}>
+    {{ rows }}
+    <div>
+  {% elseif empty -%}
+    {{ empty }}
+  {% endif %}
+  {{ pager }}
+
+  {{ attachment_after }}
+  {{ more }}
+
+  {% if footer %}
+    <footer>
+      {{ footer }}
+    </footer>
+  {% endif %}
+
+  {{ feed_icons }}
+</div>