diff --git a/css/custom.css b/css/custom.css
index 56accdc..535e33e 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -1,4 +1,4 @@
-body, wrapper
+body, #wrapper
{
min-height: 100vh;
}
diff --git a/css/sidebar.css b/css/sidebar.css
new file mode 100644
index 0000000..d642b2a
--- /dev/null
+++ b/css/sidebar.css
@@ -0,0 +1,208 @@
+/*!
+ * Start Bootstrap - Simple Sidebar (https://startbootstrap.com/template-overviews/simple-sidebar)
+ * Copyright 2013-2017 Start Bootstrap
+ * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-simple-sidebar/blob/master/LICENSE)
+ */
+
+#wrapper, #sidebar-wrapper, #menu-toggle-icon {
+ -webkit-transition: all 0.5s ease;
+ -moz-transition: all 0.5s ease;
+ -o-transition: all 0.5s ease;
+ transition: all 0.5s ease;
+}
+
+#wrapper.toggled {
+ padding-left: 0;
+}
+
+#sidebar-wrapper {
+ z-index: 1000;
+ position: fixed;
+ top 0;
+ left: 0;
+ width: 100%;
+ height: 3em;
+ overflow-y: auto;
+ background: #000;
+ padding: 10px;
+ padding-left: 0;
+
+ border-width: thin;
+ border-color: white;
+}
+
+#wrapper.toggled #sidebar-wrapper {
+ height: 100%;
+}
+
+#wrapper.toggled #menu-toggle-icon {
+ -moz-transform: scale(1, -1);
+ -webkit-transform: scale(1, -1);
+ -o-transform: scale(1, -1);
+ -ms-transform: scale(1, -1);
+ transform: scale(1, -1);
+}
+
+#menu-toggle, #menu-toggle-icon {
+ display: block-inline;
+}
+
+#menu-toggle
+{
+ z-index: 1500;
+ position: absolute;
+ width: 100%;
+ top: 0;
+ height: 2em;
+ padding: 0.5em;
+ text-align: center;
+ color: #fff;
+ -webkit-transition: all 0.5s ease;
+ -moz-transition: all 0.5s ease;
+ -o-transition: all 0.5s ease;
+ transition: all 0.5s ease;
+}
+
+.content-wrapper {
+ margin-top: 3em;
+ position: relative;
+}
+
+/* Sidebar Styles */
+
+.sidebar-nav {
+ white-space: nowrap;
+ opacity: 0;
+ visibility: hidden;
+ overflow-x: hidden;
+ position: absolute;
+ width: 100%;
+ top: 0;
+ margin: 0;
+ padding: 0;
+ padding-bottom: 3em;
+ list-style: none;
+ -webkit-transition: all 0.5s ease;
+ -moz-transition: all 0.5s ease;
+ -o-transition: all 0.5s ease;
+ transition: all 0.5s ease;
+}
+
+#wrapper.toggled #sidebar-wrapper .sidebar-nav {
+ opacity: 1;
+ visibility: visible;
+ overflow-x: visible;
+ width: 100%;
+}
+
+.sidebar-nav li {
+ text-indent: 20px;
+ line-height: 40px;
+}
+
+.sidebar-nav li.sidebar-brand {
+ text-align: center;
+ text-indent: 0;
+ padding: 0 20px 0 20px;
+ margin: 0.5em 0 0.5em 0;
+}
+
+.sidebar-nav li.sidebar-brand a img {
+ filter: invert(100%);
+}
+
+.sidebar-nav li.sidebar-brand a img,
+.sidebar-nav li.sidebar-brand {
+ height: 5em;
+}
+
+.sidebar-nav li a {
+ display: block;
+ text-decoration: none;
+ color: #bbb;
+}
+
+.sidebar-nav li a:hover {
+ text-decoration: none;
+ color: #fff;
+ background: rgba(255, 255, 255, 0.2);
+}
+
+.sidebar-nav li a:active, .sidebar-nav li a:focus {
+ text-decoration: none;
+}
+
+.sidebar-nav>.sidebar-brand {
+ height: 65px;
+ font-size: 18px;
+ line-height: 60px;
+}
+
+.sidebar-nav>.sidebar-brand a {
+ color: #999999;
+}
+
+.sidebar-nav>.sidebar-brand a:hover {
+ color: #fff;
+ background: none;
+}
+
+.sidebar-nav>.sidebar-toggle {
+ width: 100%;
+ text-indent: 0;
+ z-index: -1000;
+}
+
+.sidebar-nav>.sidebar-spacer {
+ height: 3em;
+}
+
+@media (min-width: 576px) {
+ .sidebar-nav {
+ width: 0;
+ }
+
+ #sidebar-wrapper {
+ left: 250px;
+ width: 3em;
+ height: 100%;
+ margin-left: -250px;
+
+ border-right-style: solid;
+ }
+
+ #wrapper {
+ padding-top: 0em;
+ padding-left: 3em;
+ }
+
+ .content-wrapper {
+ margin-top: 0;
+ position: relative;
+ }
+
+ #wrapper.toggled #menu-toggle-icon {
+ -moz-transform: scale(-1, 1);
+ -webkit-transform: scale(-1, 1);
+ -o-transform: scale(-1, 1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(-1, 1);
+ }
+
+ #wrapper.toggled #sidebar-wrapper {
+ width: 250px;
+ }
+
+ #wrapper.toggled {
+ padding-left: 250px;
+ }
+
+ #wrapper.toggled #sidebar-wrapper .sidebar-nav {
+ width: 100%;
+ }
+
+ #menu-toggle {
+ width: auto;
+ text-align: right;
+ }
+}
diff --git a/templates/info.html.twig b/templates/info.html.twig
new file mode 100644
index 0000000..5f78054
--- /dev/null
+++ b/templates/info.html.twig
@@ -0,0 +1,16 @@
+{% extends 'partials/base.html.twig' %}
+
+{% block content %}
+ <div class="row">
+ {% set text_class = 'col-12' %}
+ {% if page.media.images %}
+ {% set text_class = 'col-12 col-md-6' %}
+ <div class="col-12 col-md-6">
+ <img width="100%" src="{{ page.media.images|first.url }}">
+ </div>
+ {% endif %}
+ <div class="{{ text_class }}">
+ {{ page.content }}
+ </div>
+ </div>
+{% endblock %}
diff --git a/templates/item.html.twig b/templates/item.html.twig
index f825d45..f80fcda 100644
--- a/templates/item.html.twig
+++ b/templates/item.html.twig
@@ -1,4 +1,5 @@
{% extends 'partials/base.html.twig' %}
+
{% set blog = page.find(header_var('blog_url')|defined(theme_var('blog-page'))) %}
{% set show_breadcrumbs = header_var('show_breadcrumbs', [page, blog])|defined(true) %}
{% set show_sidebar = header_var('show_sidebar', [page, blog])|defined(true) %}
diff --git a/templates/modular.html.twig b/templates/modular.html.twig
new file mode 100644
index 0000000..9c218e7
--- /dev/null
+++ b/templates/modular.html.twig
@@ -0,0 +1,27 @@
+{% extends 'partials/base.html.twig' %}
+
+{% set collection = page.collection() %}
+
+{% block content %}
+ {{ page.content }}
+ {% for child in collection %}
+ {% if child.template == 'info' %}
+ <div class="row">
+ {% set text_class = 'col-12' %}
+ {% if child.media.images|first %}
+ {% set text_class = 'col-12 col-md-6' %}
+ <div class="col-12 col-md-6">
+ <img width="100%" src="{{ child.media.images|first.url }}">
+ </div>
+ {% endif %}
+ <div class="{{ text_class }}">
+ {{ child.content }}
+ </div>
+ </div>
+ {% else %}
+ <a href="{{ child.url }}">{{ child.title }}</a>
+ <p>{{ child.summary }}</p>
+ {% endif %}
+ <div class="mb-4"></div>
+ {% endfor %}
+{% endblock %}
diff --git a/templates/partials/base.html.twig b/templates/partials/base.html.twig
index 7e8fb05..b4256a5 100644
--- a/templates/partials/base.html.twig
+++ b/templates/partials/base.html.twig
@@ -32,36 +32,33 @@
{% endblock %}
</head>
<body id="top" class="{{ page.header.body_classes }}">
+ <div id="wrapper" class="d-flex flex-column">
+ {% block body %}
+ <main class="container py-3 flex-fill">
+ {% block header %}
+ {% include 'partials/navbar.html.twig' %}
+ {% endblock %}
+ {% block content %}{% endblock %}
+ </main>
+ {% endblock %}
-<wrapper class="d-flex flex-column">
-
-{% block header %}
- {% include 'partials/navbar.html.twig' %}
-{% endblock %}
-
-{% block body %}
- <main class="container py-3 flex-fill">
- {% block content %}{% endblock %}
- </main>
-{% endblock %}
-
-{% block footer %}
- <footer class="container-fluid bg-dark text-light py-3">
- <div class="row">
- <p class="mx-auto"><a href="/impressum">Impressum</a> | <a href="/datenschutzerklaerung">Datenschutzerklärung</a></p>
- </div>
- <div class="row">
- <p class="mx-auto">© Heike Tischler</p>
- </div>
- <div class="row">
- <p class="mx-auto">Diese Webseite nutzt <a href="http://getgrav.org">Grav</a> von <a href="http://www.rockettheme.com">RocketTheme</a>.</p>
- </div>
- </footer>
-{% endblock %}
-
-{% block bottom %}
- {{ assets.js('bottom')|raw }}
-{% endblock %}
+ {% block footer %}
+ <footer class="container-fluid bg-dark text-light py-3">
+ <div class="row">
+ <p class="mx-auto"><a href="/impressum">Impressum</a> | <a href="/datenschutzerklaerung">Datenschutzerklärung</a></p>
+ </div>
+ <div class="row">
+ <p class="mx-auto">© Heike Tischler</p>
+ </div>
+ <div class="row">
+ <p class="mx-auto">Diese Webseite nutzt <a href="http://getgrav.org">Grav</a> von <a href="http://www.rockettheme.com">RocketTheme</a>.</p>
+ </div>
+ </footer>
+ {% endblock %}
+ </div>
+ {% block bottom %}
+ {{ assets.js('bottom')|raw }}
+ {% endblock %}
</body>
</html>
diff --git a/templates/pictures.html.twig b/templates/pictures.html.twig
index 54c7e30..125557f 100644
--- a/templates/pictures.html.twig
+++ b/templates/pictures.html.twig
@@ -1,4 +1,5 @@
{% extends 'partials/base.html.twig' %}
+
{% set blog = page.find(header_var('blog_url')|defined(theme_var('blog-page'))) %}
{% set show_breadcrumbs = header_var('show_breadcrumbs', [page, blog])|defined(true) %}