[SITE] add template, blueprint, css for webdesign page

assets/css/templates/webdesign.css

@@ -0,0 +1,52 @@
+/* STYLE for jannikbeyerstedt.de
+ * for specific template
+ */
+main.webdesign .container {
+  margin-top: 30px; }
+
+.featurette h2 {
+  font-family: inherit;
+  margin-top: 10px; }
+
+@media (max-width: 767px) {
+  .featurette img {
+    margin-top: 50px; } }
+
+@media (max-width: 543px) {
+  .featurette img {
+    margin: 0 auto;
+    max-height: 200px; } }
+
+.img-fluid {
+  display: block;
+  max-width: 100%;
+  height: auto; }
+
+.img-rounded {
+  border-radius: 0.3rem; }
+
+.img-thumbnail {
+  padding: 0.25rem;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 0.25rem;
+  transition: all 0.2s ease-in-out;
+  display: inline-block;
+  max-width: 100%;
+  height: auto; }
+
+.img-circle {
+  border-radius: 50%; }
+
+.figure {
+  display: inline-block; }
+
+.figure-img {
+  margin-bottom: 0.5rem;
+  line-height: 1; }
+
+.figure-caption {
+  font-size: 90%;
+  color: #818a91; }
+
+/*# sourceMappingURL=webdesign.css.map */

assets/scss/templates/webdesign.scss

@@ -0,0 +1,46 @@
+/* STYLE for jannikbeyerstedt.de
+ * for specific template
+ */
+@import "custom";
+@import "variables";
+@import "mixins";
+
+@import "../mainvariables";
+
+// change main.scss behavior
+body {
+
+}
+
+
+// additional css
+main.webdesign {
+  .container {
+    margin-top: 30px;
+  }
+}
+
+.featurette {
+  
+  h2 {
+    font-family: inherit;
+    margin-top: 10px;
+  }
+
+  @include media-breakpoint-down(sm) {
+    img {
+      margin-top: 50px;
+    }
+  }
+  @include media-breakpoint-down(xs) {
+    img {
+      margin: 0 auto;
+      max-height: 200px;
+    }
+  }
+}
+
+
+
+// ---- from boostrap ----
+@import "images";

site/blueprints/webdesign.yaml

@@ -0,0 +1,23 @@
+title: Webdesign
+pages: true
+
+files: true
+
+fields:
+  title:
+    label: Title
+    type:  text
+  featurette_headline:
+    label: Featurette Headline
+    type:  text
+  featurette_text:
+    label: Featurette Text
+    type:  textarea
+    width: 1/2
+  featurette_img:
+    label: Featurette Image
+    type:  image
+    width: 1/2
+  text:
+    label: Text
+    type:  textarea

site/templates/webdesign.php

@@ -0,0 +1,36 @@
+<?php
+// -------------------------------------------
+// kirby template FOR jannikbeyerstedt.de
+
+// copyright: Jannik Beyerstedt | https://jannikbeyerstedt.de
+// license: http://www.gnu.org/licenses/gpl-3.0.txt GPLv3 License
+// -------------------------------------------
+
+$img = $page->images()->find($page->featurette_img());
+
+snippet('base/html-head');
+snippet('base/cont-header');
+?>
+
+<main class="section webdesign">
+  <div class="container">
+
+    <div class="row featurette">
+      <div class="col-sm-9">
+        <h2 class="featurette-heading"><?php echo $page->featurette_headline()->html() ?></h2>
+        <p class="lead"><?php echo $page->featurette_text()->kirbytextRaw() ?></p>
+      </div>
+      <div class="col-sm-3">
+        <?php if ($img = $page->images()->find($page->featurette_img())) {
+          echo '<img src="'.$img->width(235)->url().'" class="img-fluid img-rounded" alt="Portrait">';
+        }?>
+      </div>
+    </div>
+
+    <?php echo $page->text()->kirbytext(); ?>
+
+  </div>
+</main>
+
+<?php snippet('base/cont-footer') ?>
+<?php snippet('base/html-end') ?>