Minor style fixes & allow gutenberg block usage

Author: eebbi

CHANGELOG.MD

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- Allow gutenberg block usage
+- Minor style fixes across layouts
+
 ## [1.0.0] - 2026-06-17
 
 - Create tms-theme-muumib2b from tms-theme-base

assets/styles/layouts/_call-to-action.scss

@@ -32,7 +32,7 @@
 /*
  * Specific styles if CTA is below hero
  */
-.hero + .call-to-action {
+body.page-template-page-front-page .hero + .call-to-action.before-has-background-white:has(.shape-slot--top.border-shape--wave-top-reverse) {
     margin-top: $theme-spacing-two;
     padding-top: 0 !important;
 
@@ -71,7 +71,7 @@ $_hero-bleed-colors: (
 );
 
 @each $name, $color in $_hero-bleed-colors {
-    .hero.has-background-#{$name} + .call-to-action {
+    body.page-template-page-front-page .hero.has-background-#{$name} + .call-to-action.before-has-background-white:has(.shape-slot--top.border-shape--wave-top-reverse) {
         background-image: linear-gradient(
             to bottom,
             #{$color} 16rem,

assets/styles/layouts/_hero.scss

@@ -73,7 +73,7 @@
             max-height: 900px;
             height: 100%;
             object-fit: cover;
-            object-position: bottom center;
+            object-position: center;
         }
 
         .hero-image--rounded img {

assets/styles/layouts/_image-banner.scss

@@ -24,4 +24,8 @@
 
 .image-banner {
     padding: 0 !important;
+
+    &.is-align-full {
+        width: 100%;
+    }
 }

assets/styles/views/_page-exhibition-three.scss

@@ -6,8 +6,8 @@
             min-height: 600px;
         }
 
-        .image {
-            @media (min-width: 768px) {
+        .column.is-6-desktop > .image {
+            @media (min-width: 768px) and (max-width: 2000px) {
                 position: absolute;
                 right: -25%;
                 top: 0;

models/page-extend.php

@@ -31,6 +31,45 @@ public function hero_image() : ?int {
             : null;
     }
 
+    /**
+     * Check if the page has any Gutenberg block content.
+     *
+     * @return bool
+     */
+    public function has_content() : bool {
+        return \has_blocks( \get_the_ID() );
+    }
+
+    /**
+     * Check if page has a hero flexible content layout.
+     *
+     * @return bool
+     */
+    public function has_hero_layout() : bool {
+        $content = \get_field( 'components' ) ?? [];
+
+        if ( empty( $content ) || ! \is_array( $content ) ) {
+            return false;
+        }
+
+        $hero_layouts = [
+            'hero',
+            'hero_and_image_carousel',
+        ];
+
+        foreach ( $content as $layout ) {
+            if ( empty( $layout['acf_fc_layout'] ) ) {
+                continue;
+            }
+
+            if ( \in_array( $layout['acf_fc_layout'], $hero_layouts, true ) ) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
     /**
      * Get post siblings.
      *

partials/page.dust

@@ -9,6 +9,36 @@
                 {>"views/page/page-hero" /}
             {/Page.hero_image}
 
+            {^Page.hero_image}
+                {^Page.has_hero_layout}
+                    <section class="section pb-0">
+                        <div class="container">
+                            <div class="columns">
+                                <div class="column is-10 is-offset-1">
+                                    <h1 class="entry__title mt-0 mb-8 has-line-height-tight has-text-centered ">
+                                        {@title /}
+                                    </h1>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                {/Page.has_hero_layout}
+            {/Page.hero_image}
+
+            {?Page.has_content}
+                <section class="section pt-0">
+                    <div class="container">
+                        <div class="columns">
+                            <div class="column is-10 is-offset-1">
+                                <div class="entry__content is-content-grid keep-vertical-spacing">
+                                    {@content /}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            {/Page.has_content}
+
             {>"ui/components" components=Page.components /}
         {/Page.is_password_protected_page}
     </main>

partials/shared/footer-inner.dust

@@ -105,8 +105,12 @@
                 <div class="column is-12 is-4-desktop mt-6 mt-0-desktop has-text-centered has-text-right-desktop">
                     <a href="{brand_logo_url|url}" class="site-footer__tampere-vaakuna is-flex">
                         <span class="is-sr-only">{Strings.s.footer.to_main_site|html}</span>
-                        {@image id=bottom_logo class="brand-logo" size="large" /}
-                        {@image id=bottom_second_logo class="brand-logo" size="large" /}
+                        {?bottom_logo}
+                            {@image id=bottom_logo class="brand-logo" size="large" /}
+                        {/bottom_logo}
+                        {?bottom_second_logo}
+                            {@image id=bottom_second_logo class="brand-logo" size="large" /}
+                        {/bottom_second_logo}
                     </a>
                 </div>
             </div>