Jumbotron overlay is now optional.

Just add the jumbotron-overlay class, or jumbotron-overlay-gradient
This commit is contained in:
Pablo Vazquez 2018-09-16 04:28:11 +02:00
parent e56b3ec61f
commit a5bc36b1cf
3 changed files with 27 additions and 14 deletions

View File

@ -7,22 +7,35 @@
margin-bottom: 0
padding-top: 10em
padding-bottom: 10em
position: relative
&:after
background-color: rgba(black, .6)
bottom: 0
content: ''
display: none
left: 0
position: absolute
right: 0
top: 0
visibility: hidden
// Black-transparent gradient from left to right to better read the overlay text.
&.jumbotron-overlay
position: relative
&:after
background-image: linear-gradient(45deg, rgba(black, .5) 25%, transparent 50%)
bottom: 0
content: ''
left: 0
position: absolute
right: 0
top: 0
*
z-index: 1
&:after
display: block
visibility: visible
&.jumbotron-overlay-gradient
*
z-index: 1
&:after
background-color: transparent
background-image: linear-gradient(45deg, rgba(black, .5) 25%, transparent 50%)
display: block
visibility: visible
h2, p
text-shadow: 1px 1px rgba(black, .2), 1px 1px 25px rgba(black, .5)

View File

@ -6,7 +6,7 @@
// #}
mixin jumbotron(title, text, image, url)
if url
a.jumbotron.jumbotron-overlay.text-white(
a.jumbotron.text-white(
style='background-image: url(' + image + ');',
href=url)&attributes(attributes)
.container
@ -19,7 +19,7 @@ mixin jumbotron(title, text, image, url)
.lead
=text
else
.jumbotron.jumbotron-overlay.text-white(style='background-image: url(' + image + ');')&attributes(attributes)
.jumbotron.text-white(style='background-image: url(' + image + ');')&attributes(attributes)
.container
.row
.col-md-9

View File

@ -14,7 +14,7 @@ include ../../../mixins/components
.container.pb-5
.row
.col-8.mx-auto
h2.pt-5.text-center {{node.name}}
h2.pt-5.pb-3.text-center {{node.name}}
| {% if node.description %}
.node-details-description