Updating containers and mobile styles, allowing for local videos.

config/default/gin.settings.yml

@@ -15,7 +15,7 @@ third_party_settings:
 preset_accent_color: teal
 preset_focus_color: accent
 enable_darkmode: '0'
-classic_toolbar: new
+classic_toolbar: horizontal
 secondary_toolbar_frontend: true
 high_contrast_mode: false
 accent_color: ''

web/modules/custom/nodepath_access/src/EventSubscriber/KernelRequestNodePathCheck.php

@@ -38,7 +38,7 @@ public function onRequest(RequestEvent $event) {
     $current_request = \Drupal::requestStack()->getCurrentRequest();
     $path = \Drupal::request()->getRequestUri();
     if (str_contains($path, '/node/')) {
-      throw new NotFoundHttpException();
+      return new NotFoundHttpException();
     }
   }
 }

web/themes/custom/dchadwick/components/button/button.component.yml

@@ -10,8 +10,15 @@ props:
       description: "The type of button to render"
       # The enum directive restricts the possible values in the element to our list.
       enum: ['primary', 'secondary', 'danger']
-slots:
+    link:
-  # Content to display in the chip.
+      type: boolean
-  button_text:
+      title: Link type
-      title: Button Text
+      description: If true, output anchor element, else button.
-      description: The text for the button
+    uri:
+      type: string
+      title: Uri destination
+      description: The destination for the button.
+    text:
+      type: string
+      title: Text
+      description: The text for the button.

web/themes/custom/dchadwick/components/button/button.twig

@@ -5,6 +5,8 @@
 ]
 %}
 
-<button class="{{ classes|join(" ") }}">
+{% if link %}
-  {% block button_text %}{% endblock %}
+  <a href="{{ uri }}" class="{{ classes|join(" ") }}">{{ text }}</a>
-</button>
+{% else %}
+  <button class="{{ classes|join(" ") }}">{{ text }}</button>
+{% endif %}

web/themes/custom/dchadwick/css/style.css

@@ -47,10 +47,12 @@ h1.center {
   cursor: pointer;
   transition: background 0.2s ease;
   padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
 }
 .btn-primary:hover {
-  background: var(--site-secondary);
+  background: var(--site-white);
-  color: var(--site-primary);
+  color: var(--site-secondary);
 }
 
 header#header {
@@ -67,6 +69,9 @@ header#header > div {
   justify-content: space-between;
   align-items: center;
 }
+header#header .region-navigation {
+  width: 100%;
+}
 header#header #block-dchadwick-site-branding a {
   white-space: nowrap;
   color: var(--site-secondary);
@@ -145,6 +150,17 @@ header#header #block-dchadwick-main-menu > ul a.is-active:hover {
   overflow: hidden;
   position: relative;
 }
+.hero-slide .hero-bground::before {
+  content: "";
+  position: absolute;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+}
 .hero-slide video {
   position: absolute;
   top: -50px;
@@ -157,21 +173,32 @@ header#header #block-dchadwick-main-menu > ul a.is-active:hover {
 }
 
 .hero-caption {
-  width: 50%;
+  z-index: 2;
+  width: 400px;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 2rem;
-  background: white;
+  background: rgba(254, 215, 101, 0.93);
   padding: 2rem 8rem 2rem 2rem;
+  border-radius: 10px;
 }
 @media screen and (max-width: 767px) {
   .hero-caption {
     width: 100%;
+    top: unset;
+    transform: none;
+    left: 0;
+    bottom: 0;
+    border-radius: 0;
   }
 }
 .hero-caption__text {
-  font-size: 2rem;
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+.hero-caption__text p {
+  margin: 0;
 }
 
 #recent-fights > div {
@@ -404,6 +431,7 @@ table.cols-5 td.incorrect {
 html {
   font-size: 100%;
   box-sizing: border-box;
+  overflow-x: hidden;
 }
 
 .region-content {
@@ -431,6 +459,6 @@ img {
 }
 
 .container {
-  width: 1152px;
+  max-width: 1152px;
   margin: auto;
 }

web/themes/custom/dchadwick/src/sass/partials/buttons.scss

@@ -4,9 +4,11 @@
   cursor: pointer;
   transition: background .2s ease;
   padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
 
   &:hover {
-    background: var(--site-secondary);
+    background: var(--site-white);
-    color: var(--site-primary);
+    color: var(--site-secondary);
   }
 }

web/themes/custom/dchadwick/src/sass/partials/header.scss

@@ -13,6 +13,10 @@ header#header {
     align-items: center;
   }
 
+  .region-navigation {
+    width: 100%;
+  }
+
   #block-dchadwick-site-branding {
     a {
       white-space: nowrap;

web/themes/custom/dchadwick/src/sass/partials/hero.scss

@@ -4,7 +4,17 @@
   position: relative;
 
   .hero-bground {
-    // position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 5px;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+    }
   }
 
   video {
@@ -20,19 +30,30 @@
 }
 
 .hero-caption {
-  width: 50%;
+  z-index: 2;
+  width: 400px;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 2rem;
-  background: white;
+  background: rgba(254, 215, 101, 0.93);
   padding: 2rem 8rem 2rem 2rem;
+  border-radius: 10px;
 
   @media screen and (max-width: 767px) {
     width: 100%;
+    top: unset;
+    transform: none;
+    left: 0;
+    bottom: 0;
+    border-radius: 0;
   }
 
   &__text {
-    font-size: 2rem;
+    font-size: 24px;
+    margin-bottom: 20px;
+    p {
+      margin: 0;
+    }
   }
 }

web/themes/custom/dchadwick/src/sass/style.scss

@@ -48,7 +48,7 @@ $container-plus-padding: 1216px;
 html {
   font-size: 100%;
   box-sizing: border-box;
-  // overflow: hidden;
+  overflow-x: hidden;
 }
 
 .region-content {
@@ -76,7 +76,7 @@ img {
 }
 
 .container {
-  width: $container-full;
+  max-width: $container-full;
   margin: auto;
 }
 

web/themes/custom/dchadwick/templates/blocks/block--inline-block--hero-slide.html.twig

@@ -39,7 +39,7 @@
 {# Set the variables for the block #}
 {% set hasRemoteVideo = content.field_external_video.0['#context']['value'] %}
 {% set slideImage = content.field_slide_image.0['#media'].field_media_image.entity.uri.value %}
-
+{% set slideVideo = file_url(content.field_slide_image.0['#media'].field_media_video_file.entity.uri.value) %}
 <div{{ attributes.addClass(classes) }}>
   {% block content %}
   {{ title_prefix }}
@@ -49,6 +49,10 @@
       <video autoplay muted loop id="bgVideo">
         <source src="{{ hasRemoteVideo }}" type="video/mp4">
       </video>
+    {% elseif slideVideo is not null %}
+      <video autoplay muted loop id="bgVideo">
+        <source src="{{ slideVideo }}" type="video/mp4">
+      </video>
     {% else %}
       <img src="{{ slideImage }}">
     {% endif %}

web/themes/custom/dchadwick/templates/field/field--block-content--field-slide-link.html.twig

@@ -37,36 +37,15 @@
  * @see template_preprocess_field()
  */
 #}
-{%
+<div{{ attributes }}>
-  set classes = [
-    'field',
-    'field--name-' ~ field_name|clean_class,
-    'field--type-' ~ field_type|clean_class,
-    'field--label-' ~ label_display,
-    label_display == 'inline' ? 'clearfix',
-  ]
-%}
-{%
-  set title_classes = [
-    'field__label',
-    label_display == 'visually_hidden' ? 'visually-hidden',
-  ]
-%}
-
-  <div{{ attributes.addClass(classes) }}>
-    {% if multiple %}
-      <div class="field__items">
-    {% endif %}
   {% for item in items %}
     {% set linkText = item.content['#title'] %}
     {% set url = item.content['#url'] ?? '' %}
-      {% include '@dchadwick/templates/components/button.html.twig' with {
+    {% include 'dchadwick:button' with {
       'type': 'primary',
       'text': linkText,
-        'uri': url
+      'uri': url,
+      'link': true
     } %}
   {% endfor %}
-    {% if multiple %}
+</div>
-      </div>
-    {% endif %}
-  </div>