Improved rendering of banners and simplified model

This commit is contained in:
Armin Ronacher 2015-12-26 10:52:00 +01:00
parent e1fb298946
commit d9e7456c45
6 changed files with 24 additions and 22 deletions

File diff suppressed because one or more lines are too long

View File

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

View File

@ -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

View File

@ -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

View File

@ -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>

View File

@ -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; }
}
}