Improved rendering of banners and simplified model

content/contents.lr

@@ -9,8 +9,6 @@ image: header.jpg
 ----
 height: 500
 ----
-class: dark
-----
 contents:
 
 <div class="container lektor-intro">

content/docs/guides/sitemap/contents.lr

@@ -23,6 +23,10 @@ _model: none
 This instructs Lektor to use the template `sitemap.xml` for this page.  We
 also give it the empty `none` model for good measure.
 
+!!! Starting with Lektor 2.0 you can also add `_discoverable: no` as field
+into the file to hide it from `.children`.  This is useful for such special
+pages which should be excluded from navigation or automatic link generation.
+
 ## Template File
 
 The template loaded will be `templates/sitemap.xml`.  In this file we just

flowblocks/banner.ini

@@ -6,23 +6,16 @@ button_label = [[flag]]
 label = Image
 type = select
 source = record.attachments.images
-width = 2/4
+width = 3/4
 
 [fields.height]
 label = Height
 type = select
-choices = half, full, 500, 300
-choice_labels = Half, Full, 500px, 300px
+choices = 500, 300
+choice_labels = 500px, 300px
 default = 300
 width = 1/4
 
-[fields.class]
-label = Class
-type = select
-choices = dark
-choice_labels = Dark
-width = 1/4
-
 [fields.contents]
 label = Contents
 type = html

templates/blocks/banner.html

@@ -1,8 +1,5 @@
 {% set image = record.attachments.get(this.image) %}
-<div class="banner{% if this.class %} banner-{{ this.class }}{% endif %}" style="background-image: url({{ image|url
-  }}); height: {{ {
-    'full': image.height,
-    'half': image.height / 2,
-    }.get(this.height, this.height) }}px">{% if this.contents %}
+<div class="banner banner-{{ this.height }}" style="background-image: url({{ image|url
+  }})">{% if this.contents %}
   {{ this.contents }}
 {% endif %}</div>

webpack/scss/main.scss

@@ -103,7 +103,7 @@ div.slideshow {
   height: auto;
   overflow: auto;
   background: lighten($gray, 55) url(../images/dark-curls.png);
-  box-shadow: inset 0 0 10px darken($lektor-header-bg, 5);
+  box-shadow: inset 0 0 10px fade-out(darken($lektor-header-bg, 5), 0.8);
   color: white;
 
   div.slideshow-inner {
@@ -259,14 +259,24 @@ div.banner {
   margin: 15px 0;
   background-size: cover;
   background-position: center center;
+  background-color: $lektor-header-bg;
 
   &:first-child {
     margin-top: 0;
-    box-shadow: 0 4px 10px fade-out($gray, 0.8);
   }
 
-  &.banner-dark {
-    background-color: $lektor-header-bg;
+  &.banner-500 {
+    height: 500px;
+
+    @media (max-width: $screen-md-max) { height: 300px; }
+    @media (max-width: $screen-sm-max) { height: 200px; }
+  }
+
+  &.banner-300 {
+    height: 300px;
+
+    @media (max-width: $screen-md-max) { height: 200px; }
+    @media (max-width: $screen-sm-max) { height: 120px; }
   }
 }