Twig and scss for hero paragraph

web/themes/custom/agarica/patternlibrary/agaric/css/agaric.css

@@ -10217,6 +10217,19 @@ a#main-content {
   padding-bottom: auto !important;
 }
 
+/* Full Width classes and mixins
+-----------------------------------------------------------
+*/
+.full-width {
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw !important;
+  margin-right: -50vw !important;
+  max-height: inherit;
+}
+
 .is-equal-height .column {
   display: flex;
 }
@@ -11582,6 +11595,63 @@ a.teaser:hover .subtitle {
   background-position: bottom 20% center;
 }
 
+.hero {
+  min-height: var(--hero-height, 100px);
+}
+.hero.project-hero-header {
+  background-image: linear-gradient(to bottom right, hsla(155, 65%, 25%, 0.8), hsla(155, 25%, 90%, 0.6)), var(--hero-background);
+}
+.hero {
+  background-repeat: no-repeat, no-repeat;
+  background-size: cover, cover;
+  background-position: center;
+}
+.hero.full-width {
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw !important;
+  margin-right: -50vw !important;
+  max-height: inherit;
+}
+.hero .container {
+  width: 100%;
+}
+.hero .hero__content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  display: block;
+}
+.hero .hero__content:has(.card) {
+  align-items: stretch;
+  gap: 2rem;
+}
+.hero:has(.hero__side-image) {
+  justify-content: space-between;
+}
+@media (width > 1023px) {
+  .hero:has(.hero__side-image) {
+    flex-direction: row;
+  }
+}
+.hero:has(.hero__side-image) .hero__side-image {
+  background-image: var(--hero-background);
+  min-height: var(--hero-height);
+  background-size: cover;
+  background-position: center;
+}
+.hero:has(.hero__side-image) .hero__content {
+  padding: 1rem 5%;
+}
+.hero .paragraph__column {
+  padding: 0;
+}
+.hero strong {
+  color: inherit;
+}
+
 .carousel {
   padding-top: 64px;
   padding-bottom: 64px;

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_component.hero.scss

@@ -328,4 +328,74 @@
 
 [about="/home-page"] .hero-main{
   background-position: bottom 20% center;
+}
+
+.hero {
+
+  min-height: var(--hero-height, 100px);
+
+  &.project-hero-header {
+    background-image: linear-gradient(
+      to bottom right,
+      hsl(155 65% 25% / 0.8),
+      hsl(155 25% 90% / 0.6)
+      ),
+      var(--hero-background);
+  }
+
+  background-repeat: no-repeat, no-repeat;
+  background-size: cover, cover;
+  background-position: center;
+
+  &.full-width {
+    width: 100vw;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: -50vw !important;
+    margin-right: -50vw !important;
+    max-height: inherit;
+  }
+
+  .container {
+    width: 100%;
+  }
+
+  .hero__content {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    display: block;
+
+    &:has(.card) {
+      align-items: stretch;
+      gap: 2rem;
+    }
+  }
+
+    &:has(.hero__side-image) {
+    justify-content: space-between;
+    @media (width > 1023px) {
+      flex-direction: row;
+    }
+
+    .hero__side-image {
+      background-image: var(--hero-background);
+      min-height: var(--hero-height);
+      background-size: cover;
+      background-position: center;
+    }
+
+    .hero__content {
+      padding: 1rem 5%;
+    }
+  }
+
+  .paragraph__column {
+    padding: 0;
+  }
+
+  strong {
+    color: inherit;
+  }
 }

web/themes/custom/agarica/patternlibrary/agaric/templates/paragraph/paragraph--hero-wrapper.html.twig

@@ -0,0 +1,86 @@
+{% set bg_image = file_url(content.field_hero_image.0['#media'].thumbnail.entity.uri.value) %}
+{% set hero_id = "hero-paragraph-#{paragraph.id.value}" %}
+{% set textcolor = content.field_text_color.0['#markup']  %}
+{% set image_pos = paragraph.field_image_use.value %}
+
+{% if paragraph.field_background_color.value.0['color'] %}
+  {% set bg_color = "rgb(from " ~ paragraph.field_background_color.value.0['color'] ~ " r g b / "~ paragraph.field_background_color.value.0['opacity'] ~ ")"  %}
+{% else %}
+  {% set bg_color = "transparent" %}  
+{% endif %}
+
+{# {{ include('@agaric/components/hero/hero.twig', {
+  hero_id: hero_id,
+  heading: node.title.value,
+  bgcolor: paragraph.field_bg_color.value,
+  textcolor: paragraph.field_text_color.value,
+  opacity: paragraph.field_opacity.value,
+  bgimage: bg_image,
+  image_pos: paragraph.field_image_use.value,
+  height: paragraph.field_hero_height.value,
+  container: paragraph.field_paragraphs.value,
+  flex_direction: paragraph.field_hero_content_direction.value,
+  content: content.field_paragraphs,
+}, with_context = false) }} #}
+
+
+{%
+set classes = [
+  'hero',
+  hero_id,
+  'full-width',
+  opacity,
+  image_pos == 'side_image' ? 'side-image columns is-flex-direction-row is-desktop',
+  image_pos == 'background_image' ? 'bg-image p-5',
+  'my-auto',
+  'align-items-center',
+]
+%}
+{% set flex_dir = flex-direction ? 'flex-row' : 'flex-column' %}
+
+  <style>
+    .{{ hero_id }} {
+      --hero-bg: {{bg_color}};
+      --hero-background: url("{{bg_image}}");
+      --hero-height: {{paragraph.field_hero_height.value}};
+        background: {{ bg_color }};
+        background-size: cover;
+        background-position: center;
+      {% if hero_id|render|trim starts with 'hero-paragraph' %}
+        {% if paragraph.field_image_use.value == 'background_image' %}
+          background-image:url({{bg_image}}); 
+        {% endif %}
+      {% endif %}
+
+      /* {% if image_pos == 'side_image' %}
+        .hero__side-image {
+
+        }
+      {% endif %} */
+
+      {% if textcolor %}
+        color: {{ textcolor }};
+        h1,h2,h3 {
+          color: {{textcolor}};
+        }
+      {% endif %}
+    }
+</style>
+<div{{attributes.addClass(classes)}}>
+		<div class="container is-flex">
+	{% if container %}
+	{% endif %}
+
+  {% if image_pos == 'side_image' %}
+    <div class="hero__side-image column is-full is-one-third-desktop is-align-self-stretch">
+    </div>
+  {% endif %}
+
+  <div class="hero__content is-flex {{ flex_dir }} {{ image_pos == 'side_image' ? 'column' : 'container' }}">
+    {{ content.field_paragraphs }}
+  </div>
+
+		</div>
+  {% if container %}
+	{% endif %}
+</div>

web/themes/custom/agarica/patternlibrary/agaric/templates/views/viewsreference--view-title--blog.html.twig

@@ -1,5 +1,5 @@
 <div class="titlebar content container">
   <div class="titlebar_title">
-    <h3 class="subtitle is-mono is-4">{{ title }}</h3>
+    <h3 class="subtitle is-4">{{ title }}</h3>
   </div>
 </div>