conference_main/static/conference_main/styles/main.sass

@@ -54,6 +54,32 @@ body.is-scrolled
 	max-height: calc(var(--spacer) * 11.25)
 	min-height: initial
 
+.hero-gradient
+	background: linear-gradient(0deg, var(--body-color-bg) 0%, rgba(0, 0, 0, 0) 100%)
+	bottom: 0
+	height: calc(var(--spacer) * 8)
+	left: 0
+	position: absolute
+	width: 100%
+
+.hero-lg
+	--hero-max-height: calc(var(--spacer) * 50)
+	--hero-min-height: calc(var(--spacer) * 45)
+
+	.hero-content
+		img
+			transform: translateY(calc(var(--spacer) * -4))
+
+			+media-sm
+				transform: translateY(calc(var(--spacer) * -2))
+
+	&.is-container-overlap
+		&+.container
+			--page-with-header-content-offset: calc(var(--spacer) * 20)
+
+			+media-sm
+				--page-with-header-content-offset: calc(var(--spacer) * 18)
+
 .btn-float-right
 	position: absolute
 	right: calc(var(--spacer) * 2)

conference_main/templates/conference_main/base.pug

@@ -4,9 +4,11 @@
 
 | {% block header %}
 | {% block jumbotron %}
-.hero.is-container-overlap
+// TODO: @back-end make '.hero-lg' optional
+.hero.hero-lg.is-container-overlap
 	.container
 		.hero-content
+			// TODO: @back-end !important register a new field for hero logo, that overrides 'edition.logo' if set. Useful to display coloured logos in heros, while using monochrome logos in the navbar
 			{% if edition.logo %}
 			img.d-block.mb-3.mx-auto.img-fluid(src="{{ edition.logo.url }}", alt="{{ edition.title }}")
 			{% else %}
@@ -22,10 +24,12 @@
 			{% endif %}
 
 	{% if edition.header %}
-	.hero-bg(style="background-image: url({{ edition.header.url }});")
+	.hero-bg(style="background-image: url({{ edition.header.url }}); background-position-y: 50%")
+	// TODO: @back-end make '.hero-overlay' optional
+	// .hero-overlay
+	// TODO: @back-end make '.hero-gradient' optional
+	.hero-gradient
 	{% endif %}
-
-	.hero-overlay
 | {% endblock jumbotron %}
 | {% endblock header %}