From cf1cf914868984ea33434b514b7aa8d0e141110e Mon Sep 17 00:00:00 2001
From: Dominik George <dominik.george@teckids.org>
Date: Sun, 7 Apr 2024 14:29:35 +0200
Subject: [PATCH] CLean up hero background SCSS
---
sass/_utils.scss | 29 ++++++++++++++++----------
templates/shortcodes/hero_section.html | 6 +++---
2 files changed, 21 insertions(+), 14 deletions(-)
diff --git a/sass/_utils.scss b/sass/_utils.scss
index 96bf1c2c..e23718ac 100644
--- a/sass/_utils.scss
+++ b/sass/_utils.scss
@@ -1,4 +1,5 @@
@use "./teckids";
+
.image.is-70p {
width: 70%;
height: 70%;
@@ -43,17 +44,9 @@ figure.image>figcaption {
opacity: 0.6;
bottom: -20vh;
- .box {
- color: black;
- }
- }
- .container.is-transparent {
- bottom: 0 !important;
- opacity: 1;
.box {
- background: none;
- box-shadow: none;
+ color: black;
}
}
}
@@ -66,7 +59,21 @@ figure.image>figcaption {
height: 100%;
}
- img.hero-background.is-transparent {
- opacity: 0.3;
+ &.is-transparent {
+ .hero-body {
+ .container {
+ bottom: 0 !important;
+ opacity: 1;
+
+ .box {
+ background: none;
+ box-shadow: none;
+ }
+ }
+ }
+
+ img.hero-background.is-transparent {
+ opacity: 0.3;
+ }
}
}
diff --git a/templates/shortcodes/hero_section.html b/templates/shortcodes/hero_section.html
index db42bc08..4b580150 100644
--- a/templates/shortcodes/hero_section.html
+++ b/templates/shortcodes/hero_section.html
@@ -1,10 +1,10 @@
-<section class="hero is-fullheight-with-navbar {% if background_img %}has-background{% endif %}">
+<section class="hero is-fullheight-with-navbar {% if background_img %}has-background{% endif %} {% if background_transparent %}is-transparent{% 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 }}" alt="">
+ <img class="hero-background" src="{{ image.url }}" alt="">
{% endif -%}
<div class="hero-body pl-0 pr-0">
- <div class="container has-text-centered {% if background_transparent %}is-transparent{% endif %}">
+ <div class="container has-text-centered">
<div class="box is-radiusless">
<h1 class="title is-1 mb-5">
{% if page.extra.title.image -%}
--
GitLab