From 444d19cb5d93f48a8aa780bb3df4e0d84abce0d4 Mon Sep 17 00:00:00 2001
From: Darius Auding <Darius.auding@gmx.de>
Date: Sun, 7 Apr 2024 08:49:09 +0200
Subject: [PATCH] Make title to a ribbon
---
sass/_utils.scss | 13 +++++++++++++
templates/shortcodes/hero_section.html | 10 ++++++----
2 files changed, 19 insertions(+), 4 deletions(-)
diff --git a/sass/_utils.scss b/sass/_utils.scss
index f6b19c4c..3162dfa9 100644
--- a/sass/_utils.scss
+++ b/sass/_utils.scss
@@ -1,3 +1,4 @@
+@use "./teckids";
.image.is-70p {
width: 70%;
height: 70%;
@@ -36,6 +37,18 @@ figure.image>figcaption {
position: relative;
overflow: hidden;
+ .hero-body {
+ .container {
+ max-width: none !important;
+ opacity: 0.6;
+
+ bottom: -20vh;
+ .box {
+ color: black;
+ }
+ }
+ }
+
img.hero-background {
position: absolute;
object-fit: cover;
diff --git a/templates/shortcodes/hero_section.html b/templates/shortcodes/hero_section.html
index 4dc7b453..e1543fd7 100644
--- a/templates/shortcodes/hero_section.html
+++ b/templates/shortcodes/hero_section.html
@@ -1,12 +1,14 @@
<section class="hero is-fullheight-with-navbar {% if background_img %}has-background{% endif %}">
{% if background_img %}
{% set image = resize_image(path="@/" ~ page.colocated_path ~ "/" ~ background_img, width=800, height=600) -%}
- <img class="hero-background {% if background_transparent %}is-transparent{% endif %}" src="{{ image.url }}" />
+ <img class="hero-background" src="{{ image.url }}" alt="">
{% endif -%}
- <div class="hero-body">
+ <div class="hero-body pl-0 pr-0">
<div class="container has-text-centered">
- <h1 class="title is-1 mb-5">{{ title | default(value=page.title) | safe }}</h1>
- {% if body or page.description %}<p class="subtitle">{{ body | default(value=page.description) | safe }}</p>{% endif -%}
+ <div class="box is-radiusless">
+ <h1 class="title is-1 mb-5">{{ title | default(value=page.title) | safe }}</h1>
+ {% if body or page.description %}<p class="subtitle">{{ body | default(value=page.description) | safe }}</p>{% endif -%}
+ </div>
</div>
</div>
</section>
--
GitLab