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

2016-04-07 21:57:06 +02:00 · 2016-04-07 21:57:06 +02:00 · 75d1ead187
parent 573ac12fca
commit 75d1ead187
13 changed files with 548 additions and 1 deletions
--- a/assets/css/main.css
+++ b/assets/css/main.css
@ -219,4 +219,7 @@ div.video-container {
  width: 100%;
  height: 100%; }

+.columns ul {
+  padding-left: 25px; }
+
 /*# sourceMappingURL=main.css.map */
--- a/assets/css/main.css.map
+++ b/assets/css/main.css.map
--- a/assets/css/templates/project.css
+++ b/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 */
--- a/assets/css/templates/project.css.map
+++ b/assets/css/templates/project.css.map
@ -0,0 +1,45 @@
+{
+  "version": 3,
+  "file": "project.css",
+  "sources": [
+    "../../scss/templates/project.scss",
+    "../../vendors/bootstrap/scss/_custom.scss",
+    "../../vendors/bootstrap/scss/_variables.scss",
+    "../../vendors/bootstrap/scss/_mixins.scss",
+    "../../scss/_mainvariables.scss",
+    "../../vendors/bootstrap/scss/_images.scss",
+    "../../vendors/bootstrap/scss/mixins/_breakpoints.scss",
+    "../../vendors/bootstrap/scss/mixins/_hover.scss",
+    "../../vendors/bootstrap/scss/mixins/_image.scss",
+    "../../vendors/bootstrap/scss/mixins/_tag.scss",
+    "../../vendors/bootstrap/scss/mixins/_reset-filter.scss",
+    "../../vendors/bootstrap/scss/mixins/_resize.scss",
+    "../../vendors/bootstrap/scss/mixins/_screen-reader.scss",
+    "../../vendors/bootstrap/scss/mixins/_size.scss",
+    "../../vendors/bootstrap/scss/mixins/_tab-focus.scss",
+    "../../vendors/bootstrap/scss/mixins/_reset-text.scss",
+    "../../vendors/bootstrap/scss/mixins/_text-emphasis.scss",
+    "../../vendors/bootstrap/scss/mixins/_text-hide.scss",
+    "../../vendors/bootstrap/scss/mixins/_text-truncate.scss",
+    "../../vendors/bootstrap/scss/mixins/_alert.scss",
+    "../../vendors/bootstrap/scss/mixins/_buttons.scss",
+    "../../vendors/bootstrap/scss/mixins/_cards.scss",
+    "../../vendors/bootstrap/scss/mixins/_pagination.scss",
+    "../../vendors/bootstrap/scss/mixins/_lists.scss",
+    "../../vendors/bootstrap/scss/mixins/_list-group.scss",
+    "../../vendors/bootstrap/scss/mixins/_nav-divider.scss",
+    "../../vendors/bootstrap/scss/mixins/_forms.scss",
+    "../../vendors/bootstrap/scss/mixins/_progress.scss",
+    "../../vendors/bootstrap/scss/mixins/_table-row.scss",
+    "../../vendors/bootstrap/scss/mixins/_background-variant.scss",
+    "../../vendors/bootstrap/scss/mixins/_border-radius.scss",
+    "../../vendors/bootstrap/scss/mixins/_gradients.scss",
+    "../../vendors/bootstrap/scss/mixins/_clearfix.scss",
+    "../../vendors/bootstrap/scss/mixins/_grid-framework.scss",
+    "../../vendors/bootstrap/scss/mixins/_grid.scss",
+    "../../vendors/bootstrap/scss/mixins/_pulls.scss"
+  ],
+  "sourcesContent": [],
+  "mappings": "AAAA;;GAEG;AKKH,UAAU,CAAC;EGGT,OAAO,EADkB,KAAK;EAE9B,SAAS,EAAE,IAAK;EAChB,MAAM,EAAE,IAAK,GHLH;;AAKZ,YAAY,CAAC;EyBRT,aAAa,E5BgOQ,MAAK,GGxNhB;;AAKd,cAAc,CAAC;EACb,OAAO,EHmtBqB,OAAM;EGltBlC,gBAAgB,EHkFL,IAAI;EGjFf,MAAM,EH0EO,GAAG,CG1EgB,KAAK,CHotBT,IAAI;EGntBhC,aAAa,EH8MU,OAAM;EG7M7B,UAAU,EAAE,GAAG,CAAC,IAAG,CAAC,WAAW;EGZ/B,OAAO,EHgBY,YAAY;EGf/B,SAAS,EAAE,IAAK;EAChB,MAAM,EAAE,IAAK,GHKC;;AAahB,WAAW,CAAC;EACV,aAAa,EAAE,GAAI,GADR;;AAQb,OAAO,CAAC;EAEN,OAAO,EAAE,YAAa,GAFf;;AAKT,WAAW,CAAC;EACV,aAAa,EAAG,MAAS;EACzB,WAAW,EAAE,CAAE,GAFJ;;AAKb,eAAe,CAAC;EACd,SAAS,EH8rBgB,GAAG;EG7rB5B,KAAK,EHRqB,OAAO,GGMlB",
+  "names": []
+}
--- a/assets/css/templates/projects.css
+++ b/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 */
--- a/assets/css/templates/projects.css.map
+++ b/assets/css/templates/projects.css.map
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@ -296,3 +296,6 @@ div.video-container {
  width: 100%; height: 100%;
 }

+.columns ul {
+  padding-left: 25px;
+}
--- a/assets/scss/templates/project.scss
+++ b/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";
--- a/assets/scss/templates/projects.scss
+++ b/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%;
+}
--- a/site/blueprints/project.yaml
+++ b/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
--- a/site/blueprints/projects.yaml
+++ b/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
--- a/site/templates/project.php
+++ b/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') ?>
--- a/site/templates/projects.php
+++ b/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') ?>