[SITE] add template, blueprint, css for project pages and projects page

assets/css/main.css

@@ -219,4 +219,7 @@ div.video-container {
   width: 100%;
   height: 100%; }
 
+.columns ul {
+  padding-left: 25px; }
+
 /*# sourceMappingURL=main.css.map */

assets/css/templates/project.css

@@ -0,0 +1,36 @@
+/* STYLE for jannikbeyerstedt.de
+ * for specific template
+ */
+.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=project.css.map */

assets/css/templates/projects.css

@@ -0,0 +1,249 @@
+/* STYLE for jannikbeyerstedt.de
+ * for specific template
+ */
+.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; }
+
+.card {
+  position: relative;
+  display: block;
+  margin-bottom: 0.75rem;
+  background-color: #fff;
+  border-radius: 0.25rem;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.125); }
+
+.card-block {
+  padding: 1.25rem; }
+  .card-block::after {
+    content: "";
+    display: table;
+    clear: both; }
+
+.card-title {
+  margin-bottom: 0.75rem; }
+
+.card-subtitle {
+  margin-top: -0.375rem;
+  margin-bottom: 0; }
+
+.card-text:last-child {
+  margin-bottom: 0; }
+
+.card-link:hover {
+  text-decoration: none; }
+
+.card-link + .card-link {
+  margin-left: 1.25rem; }
+
+.card > .list-group:first-child .list-group-item:first-child {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem; }
+
+.card > .list-group:last-child .list-group-item:last-child {
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem; }
+
+.card-header {
+  padding: 0.75rem 1.25rem;
+  background-color: #f5f5f5;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.125); }
+  .card-header::after {
+    content: "";
+    display: table;
+    clear: both; }
+  .card-header:first-child {
+    border-radius: 0.25rem 0.25rem 0 0; }
+
+.card-footer {
+  padding: 0.75rem 1.25rem;
+  background-color: #f5f5f5;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.125); }
+  .card-footer::after {
+    content: "";
+    display: table;
+    clear: both; }
+  .card-footer:last-child {
+    border-radius: 0 0 0.25rem 0.25rem; }
+
+.card-header-tabs {
+  margin-right: -0.625rem;
+  margin-bottom: -0.75rem;
+  margin-left: -0.625rem;
+  border-bottom: 0; }
+  .card-header-tabs .nav-item {
+    margin-bottom: 0; }
+
+.card-header-pills {
+  margin-right: -0.625rem;
+  margin-left: -0.625rem; }
+
+.card-primary {
+  background-color: #0275d8;
+  border-color: #0275d8; }
+
+.card-success {
+  background-color: #5cb85c;
+  border-color: #5cb85c; }
+
+.card-info {
+  background-color: #5bc0de;
+  border-color: #5bc0de; }
+
+.card-warning {
+  background-color: #f0ad4e;
+  border-color: #f0ad4e; }
+
+.card-danger {
+  background-color: #d9534f;
+  border-color: #d9534f; }
+
+.card-outline-primary {
+  background-color: transparent;
+  border-color: #0275d8; }
+
+.card-outline-secondary {
+  background-color: transparent;
+  border-color: #ccc; }
+
+.card-outline-info {
+  background-color: transparent;
+  border-color: #5bc0de; }
+
+.card-outline-success {
+  background-color: transparent;
+  border-color: #5cb85c; }
+
+.card-outline-warning {
+  background-color: transparent;
+  border-color: #f0ad4e; }
+
+.card-outline-danger {
+  background-color: transparent;
+  border-color: #d9534f; }
+
+.card-inverse .card-header,
+.card-inverse .card-footer {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
+
+.card-inverse .card-header,
+.card-inverse .card-footer,
+.card-inverse .card-title,
+.card-inverse .card-blockquote {
+  color: #fff; }
+
+.card-inverse .card-link,
+.card-inverse .card-text,
+.card-inverse .card-blockquote > footer {
+  color: rgba(255, 255, 255, 0.65); }
+
+.card-inverse .card-link:focus,
+.card-inverse .card-link:hover {
+  color: #fff; }
+
+.card-blockquote {
+  padding: 0;
+  margin-bottom: 0;
+  border-left: 0; }
+
+.card-img {
+  border-radius: 0.25rem; }
+
+.card-img-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1.25rem; }
+
+.card-img-top {
+  border-radius: 0.25rem 0.25rem 0 0; }
+
+.card-img-bottom {
+  border-radius: 0 0 0.25rem 0.25rem; }
+
+@media (min-width: 544px) {
+  .card-deck {
+    display: table;
+    table-layout: fixed;
+    border-spacing: 1.25rem 0; }
+    .card-deck .card {
+      display: table-cell;
+      width: 1%;
+      vertical-align: top; }
+  .card-deck-wrapper {
+    margin-right: -1.25rem;
+    margin-left: -1.25rem; } }
+
+@media (min-width: 544px) {
+  .card-group {
+    display: table;
+    width: 100%;
+    table-layout: fixed; }
+    .card-group .card {
+      display: table-cell;
+      vertical-align: top; }
+      .card-group .card + .card {
+        margin-left: 0;
+        border-left: 0; }
+      .card-group .card:first-child {
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0; }
+        .card-group .card:first-child .card-img-top {
+          border-top-right-radius: 0; }
+        .card-group .card:first-child .card-img-bottom {
+          border-bottom-right-radius: 0; }
+      .card-group .card:last-child {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0; }
+        .card-group .card:last-child .card-img-top {
+          border-top-left-radius: 0; }
+        .card-group .card:last-child .card-img-bottom {
+          border-bottom-left-radius: 0; }
+      .card-group .card:not(:first-child):not(:last-child) {
+        border-radius: 0; }
+        .card-group .card:not(:first-child):not(:last-child) .card-img-top,
+        .card-group .card:not(:first-child):not(:last-child) .card-img-bottom {
+          border-radius: 0; } }
+
+@media (min-width: 544px) {
+  .card-columns {
+    column-count: 3;
+    column-gap: 1.25rem; }
+    .card-columns .card {
+      display: inline-block;
+      width: 100%; } }
+
+.card-img-top {
+  width: 100%; }
+
+/*# sourceMappingURL=projects.css.map */

assets/scss/main.scss

@@ -296,3 +296,6 @@ div.video-container {
   width: 100%; height: 100%;
 }
 
+.columns ul {
+  padding-left: 25px;
+}

assets/scss/templates/project.scss

@@ -0,0 +1,26 @@
+/* STYLE for jannikbeyerstedt.de
+ * for specific template
+ */
+@import "custom";
+@import "variables";
+@import "mixins";
+
+@import "../mainvariables";
+
+// change main.scss behavior - inverted color style
+body {
+
+}
+
+
+// additional css
+main.project {
+  .container {
+
+  }
+}
+
+
+
+// ---- from boostrap ----
+@import "images";

assets/scss/templates/projects.scss

@@ -0,0 +1,31 @@
+/* STYLE for jannikbeyerstedt.de
+ * for specific template
+ */
+@import "custom";
+@import "variables";
+@import "mixins";
+
+@import "../mainvariables";
+
+// change main.scss behavior - inverted color style
+body {
+
+}
+
+
+// additional css
+main.projects {
+  .container {
+
+  }
+}
+
+
+
+// ---- from boostrap ----
+@import "images";
+@import "card";
+
+.card-img-top {
+  width: 100%;
+}

site/blueprints/project.yaml

@@ -0,0 +1,25 @@
+title: Project
+pages:
+  template:
+    - project
+
+files: true
+
+fields:
+  title:
+    label: Title
+    type:  text
+  exrpt_img:
+    label: Excerpt image
+    type:  image
+    width: 1/2
+  exrpt_text:
+    label: Excerpt for overview
+    type:  textarea
+    width: 1/2
+  text:
+    label: Text
+    type:  textarea
+  text2:
+    label: Text below masonry
+    type:  textarea

site/blueprints/projects.yaml

@@ -0,0 +1,14 @@
+title: Projects
+pages:
+  template:
+    - project
+
+files: true
+
+fields:
+  title:
+    label: Title
+    type:  text
+  text:
+    label: Text
+    type:  textarea

site/templates/project.php

@@ -0,0 +1,27 @@
+<?php
+// -------------------------------------------
+// kirby template FOR jannikbeyerstedt.de
+
+// copyright: Jannik Beyerstedt | https://jannikbeyerstedt.de
+// license: http://www.gnu.org/licenses/gpl-3.0.txt GPLv3 License
+// -------------------------------------------
+
+snippet('base/html-head');
+snippet('base/cont-header');
+?>
+
+<main class="section project">
+  <div class="container">
+    <h1><?php echo $page->title()->kirbytext(); ?></h1>
+    <?php echo $page->text()->kirbytext(); ?>
+  </div>
+
+  <?php echo snippet('plg/plg-masonry-sb', array('currentPage'=>$page)) ; ?>
+  
+  <div class="container">
+    <?php echo $page->text2()->kirbytext(); ?>
+  </div>
+</main>
+
+<?php snippet('base/cont-footer') ?>
+<?php snippet('base/html-end') ?>

site/templates/projects.php

@@ -0,0 +1,42 @@
+<?php
+// -------------------------------------------
+// kirby template FOR jannikbeyerstedt.de
+
+// copyright: Jannik Beyerstedt | https://jannikbeyerstedt.de
+// license: http://www.gnu.org/licenses/gpl-3.0.txt GPLv3 License
+// -------------------------------------------
+
+$children = $page->children();
+
+snippet('base/html-head');
+snippet('base/cont-header');
+?>
+
+<main class="section projects">
+  <div class="container">
+    <h1><?php echo $page->title()->kirbytext(); ?></h1>
+    <?php echo $page->text()->kirbytext(); ?>
+  </div>
+
+  <div class="container"><div class="row">
+    <?php $i=0; foreach($children as $c) : $i++; ?>
+    <div class="col-sm-6 col-lg-3"><div class="card">
+      <?php if ($img = $c->images()->find($c->exrpt_img())) {
+        echo thumb($img, array('width'=>400, 'class'=>"card-img-top"));
+      } ?>
+      <div class="card-block">
+        <h5 class="card-title"><?php echo $c->title()->html(); ?></h5>
+        <p class="card-text"><?php echo $c->exrpt_text()->kirbytext(); ?>      </p>
+        <a href="<?php echo $c->url(); ?>" class="card-link">mehr</a>
+      </div>
+    </div></div>
+    <?php
+      echo ($i%2 == 0)?'<div class="clearfix hidden-lg-up"></div>':'';
+      echo ($i%4 == 0)?'<div class="clearfix hidden-md-down"></div>':''
+    ?>
+    <?php endforeach; ?>
+  </div></div>
+</main>
+
+<?php snippet('base/cont-footer') ?>
+<?php snippet('base/html-end') ?>