Twig and scss for hero paragraph
This commit is contained in:
parent
49ab3c3c0a
commit
d6649770c6
5 changed files with 228 additions and 2 deletions
|
|
@ -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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -329,3 +329,73 @@
|
|||
[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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue