[SITE] add template, blueprint, css for the blog

2016-04-17 00:23:20 +02:00 · 2016-04-17 00:23:20 +02:00 · 2f2fa568ef
parent 64cb550e9f
commit 2f2fa568ef
14 changed files with 466 additions and 9 deletions
--- a/.brackets.json
+++ b/.brackets.json
@ -11,7 +11,6 @@
                "sourceComments": false,
                "outputStyle": "nested"
            },
-            "linting.collapsed": false
        },
        "assets/scss/templates/*": {
            "sass.enabled": true,
@ -23,7 +22,6 @@
                "sourceComments": false,
                "outputStyle": "nested"
            },
-            "linting.collapsed": true
        },
        "assets/vendors/bootstrap/scss/*": {
            "sass.enabled": true,
--- a/assets/css/blog.css
+++ b/assets/css/blog.css
@ -0,0 +1,69 @@
+/* STYLE for jannikbeyerstedt.de
+ * for specific template
+ */
+h2 {
+  margin-bottom: 5px; }
+
+a:hover, a:active, a:focus {
+  text-decoration: none; }
+
+main.blog .container {
+  max-width: 700px; }
+
+main.blog h1 a {
+  color: inherit; }
+
+main.blog article div.meta {
+  color: #a6a6a6; }
+  main.blog article div.meta span.tags {
+    margin-left: 5px;
+    border-left: 1px solid #a6a6a6;
+    padding-left: 6px; }
+    main.blog article div.meta span.tags a {
+      color: inherit; }
+    main.blog article div.meta span.tags a:after {
+      content: ','; }
+    main.blog article div.meta span.tags a:last-child:after {
+      content: ''; }
+
+main.blog article.excerpt {
+  padding-bottom: 30px;
+  margin-top: 25px;
+  border-bottom: 1px solid #a6a6a6;
+  margin-bottom: 20px; }
+  main.blog article.excerpt a.more {
+    font-size: 1.7em;
+    line-height: 1rem;
+    position: relative;
+    top: 0.03em; }
+
+main.blog article.blogarticle {
+  margin-top: 30px;
+  padding-bottom: 60px;
+  border-bottom: 2px solid silver;
+  margin-bottom: 50px; }
+
+main.blog div.teasers article.excerpt:last-child {
+  border-bottom: none; }
+
+nav.pagination {
+  float: none;
+  text-align: center;
+  height: 45px;
+  color: #a6a6a6; }
+  nav.pagination a.button {
+    display: inline-block;
+    padding: 5px 14px;
+    background-color: #fff;
+    border: 1px solid #d9d9d9;
+    border-radius: 10px;
+    color: inherit; }
+    nav.pagination a.button.older {
+      float: left; }
+    nav.pagination a.button.newer {
+      float: right; }
+  nav.pagination span.num-pages {
+    position: relative;
+    top: 0.5em; }
+
+/*# sourceMappingURL=blog.css.map */
--- a/assets/css/blog.css.map
+++ b/assets/css/blog.css.map
@ -0,0 +1,44 @@
+{
+  "version": 3,
+  "file": "blog.css",
+  "sources": [
+    "../scss/blog.scss",
+    "../vendors/bootstrap/scss/_custom.scss",
+    "../vendors/bootstrap/scss/_variables.scss",
+    "../vendors/bootstrap/scss/_mixins.scss",
+    "../scss/_mainvariables.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": "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",
+  "names": []
+}
--- a/assets/css/main.css
+++ b/assets/css/main.css
@ -22,7 +22,7 @@ p {

 a {
  color: #2da301; }
-  a:active, a:hover {
+  a:active, a:hover, a:focus {
    color: #1f7001; }

 main div.container {
--- a/assets/css/main.css.map
+++ b/assets/css/main.css.map
--- a/assets/scss/blog.scss
+++ b/assets/scss/blog.scss
@ -0,0 +1,105 @@
+/* STYLE for jannikbeyerstedt.de
+ * for specific template
+ */
+@import "custom";
+@import "variables";
+@import "mixins";
+
+@import "mainvariables";
+
+$blog_color_meta: #a6a6a6;
+
+// change main.scss behavior
+body {
+
+}
+h2 {
+  margin-bottom: 5px;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: none;
+}
+
+
+// additional css
+main.blog {
+  .container {
+    max-width: 700px;
+  }
+  h1 a {
+    color: inherit;
+  }
+
+  article {
+    div.meta {
+      color: $blog_color_meta;
+      span.tags {
+        margin-left: 5px;
+        border-left: 1px solid $blog_color_meta;
+        padding-left: 6px;
+        a {color: inherit;}
+        a:after {content: ',';}
+        a:last-child:after {content: '';}
+      }
+    }
+  }
+
+  article.excerpt {
+    padding-bottom: 30px;
+    margin-top: 25px;
+    border-bottom: 1px solid $blog_color_meta;
+    margin-bottom: 20px;
+
+    a.more {
+      font-size: 1.7em;
+      line-height: 1rem;
+      position: relative;
+      top: 0.03em;
+    }
+  }
+
+  article.blogarticle {
+    margin-top: 30px;
+
+    padding-bottom: 60px;
+    border-bottom: 2px solid lighten($blog_color_meta, 10%);
+    margin-bottom: 50px;
+  }
+
+  div.teasers {
+    article.excerpt:last-child {
+      border-bottom: none;
+    }
+  }
+}
+
+nav.pagination {
+  float: none;
+  text-align: center;
+  height: 45px;
+  color: $blog_color_meta;
+  a.button {
+    display: inline-block;
+    padding: 5px 14px;
+    background-color: #fff;
+    border: 1px solid lighten($blog_color_meta, 20%);
+    border-radius: 10px;
+    color: inherit;
+    &.older {
+      float: left;
+    }
+    &.newer {
+      float: right;
+    }
+  }
+  span.num-pages {
+    position: relative;
+    top: 0.5em;
+  }
+}
+
+
+
+// ---- from boostrap ----
+//@import "images";
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@ -28,7 +28,7 @@ p {
 }
 a {
  color: $link_color;
-  &:active, &:hover {
+  &:active, &:hover, &:focus {
    color: $link_active;
  }
 }
--- a/site/blueprints/blog.yaml
+++ b/site/blueprints/blog.yaml
@ -0,0 +1,16 @@
+title: Blog
+pages:
+  template:
+    - blogarticle
+  num: date
+  sort: flip
+
+files: true
+
+fields:
+  title:
+    label: Title
+    type:  text
+  text:
+    label: Text
+    type:  textarea
--- a/site/blueprints/blogarticle.yaml
+++ b/site/blueprints/blogarticle.yaml
@ -0,0 +1,23 @@
+title: Blog Article
+pages: false
+
+files: true
+
+fields:
+  title:
+    label: Title
+    type:  text
+  date:
+    label: Date
+    type:  date
+    width: 1/4
+  tags:
+    label: Tags
+    type:  tags
+    width: 3/4
+  text:
+    label: Text
+    type:  textarea
+  meta-robots:
+    label: Metatag robots
+    type:  text
--- a/site/snippets/base/cont-header.php
+++ b/site/snippets/base/cont-header.php
@ -9,12 +9,12 @@
 $subnav = false;
 if ($page->depth() == 1) {
  $baseSec = $page;
-  if ( $page->isVisible() && $baseSec->hasVisibleChildren() ) {
+  if ( $page->isVisible() && $baseSec->hasVisibleChildren() && $page->template() != 'blog' ) {
    $subnav = true;
  }
 }else if ($page->depth() == 2) {
  $baseSec = $page->parent();
-  if ( $page->isVisible() && $baseSec->hasVisibleChildren() ) {
+  if ( $page->isVisible() && $baseSec->hasVisibleChildren() && $page->template() != 'blogarticle' ) {
    $subnav = true;
  }
 }
@ -26,7 +26,7 @@ if ($page->depth() == 1) {
      <ul class="nav mobileNav">
      <?php foreach ($site->children()->visible() as $p) : ?>
        <a href="<?php echo $p->url()?>" <?php echo ($page == $p)?'class="active"':'' ?>><li><?php echo $p->title() ?></li></a>
-        <?php if ($p->hasVisibleChildren()) : ?>
+        <?php if ($p->hasVisibleChildren() && $p->template() != 'blog') : ?>
        <ul class="">
        <?php foreach ($p->children()->visible() as $c) : ?>
          <a href="<?php echo $c->url()?>" <?php echo ($page == $c)?'class="active"':'' ?>><li><?php echo $c->title() ?></li></a>
@ -47,7 +47,7 @@ if ($page->depth() == 1) {
    </a>
    <?php endif; ?>

-    <nav>
+    <nav aria-hidden="true">
      <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
        Menü <i class="fa fa-bars"></i>
      </button>
--- a/site/snippets/blog-htmlhead.php
+++ b/site/snippets/blog-htmlhead.php
@ -0,0 +1,40 @@
+<?php
+// -------------------------------------------
+// kirby snippet FOR jannikbeyerstedt.de
+
+// copyright: Jannik Beyerstedt | https://jannikbeyerstedt.de
+// license: http://www.gnu.org/licenses/gpl-3.0.txt GPLv3 License
+// -------------------------------------------
+
+if( $page->isHomePage() ) {
+  $title = $site->title()->html();
+}else if ($page->depth() == 2) {
+  $title = $page->parent()->title()->html().': '.$page->title()->html();
+}else {
+  $title = $page->title()->html().' | '.$site->title()->html();
+}
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title><?php echo $title ?> </title>
+  <meta name="description" content="<?php echo $site->description()->html() ?>">
+  <meta name="keywords" content="<?php echo $page->tags()->html() ?>">
+  <meta name="author" content="<?php echo $site->author()->html() ?>" >
+<?php if ($page->meta_robots()->html() != "") : ?>
+  <meta name="robots" content="<?php echo $page->meta_robots()->html() ?>">
+<?php endif; ?>
+
+  <?php echo css('assets/css/foundation.css') ?>
+
+  <?php echo css('assets/css/main.css') ?>
+
+  <?php echo css('assets/css/blog.css') ?>
+
+  <!-- Google web fonts -->
+  <link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,100,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'>
+  <link href='https://fonts.googleapis.com/css?family=Crimson+Text:400,700' rel='stylesheet' type='text/css'>
+</head>
+<body>
--- a/site/snippets/blogexcerpt.php
+++ b/site/snippets/blogexcerpt.php
@ -0,0 +1,22 @@
+<?php
+// -------------------------------------------
+// kirby snippet FOR jannikbeyerstedt.de
+
+// copyright: Jannik Beyerstedt | https://jannikbeyerstedt.de
+// license: http://www.gnu.org/licenses/gpl-3.0.txt GPLv3 License
+
+// usage: snippet('blogexcerpt',["article"=>$article,"length"=>200,"base_url"=>$base_url])
+// -------------------------------------------
+
+$a = $article;
+?>
+<article class="excerpt">
+  <h2><a href="<?php echo $a->url()?>"><?php echo $a->title()->html() ?></a></h2>
+  <p><?php echo $a->text()->excerpt($length) ?>
+    <a class="more" href="<?php echo $a->url()?>">»</a>
+  </p>
+  <div class="meta">
+    <time datetime="<?php echo $a->date('Y-m-d') ?>"><?php echo $a->date('d. M. Y') ?></time>
+    <?php echo tags($base_url, $a); ?>
+  </div>
+</article>
--- a/site/templates/blog.php
+++ b/site/templates/blog.php
@ -0,0 +1,83 @@
+<?php
+// -------------------------------------------
+// kirby template FOR jannikbeyerstedt.de
+
+// copyright: Jannik Beyerstedt | https://jannikbeyerstedt.de
+// license: http://www.gnu.org/licenses/gpl-3.0.txt GPLv3 License
+// -------------------------------------------
+
+$base_url   = $site->find('blog')->url();
+function tags($base_url, $article) {
+  $tags = explode(',',(string)$article->tags());
+
+  if (!empty($tags[0])) {
+    $return_val = '<span class="tags">';
+    foreach ($tags as $tag) {
+      $url = $base_url.'/tag:'.$tag;
+      $return_val .= '<a href="'.$url.'">' . $tag . '</a> ';
+    }
+    $return_val .= '</span>';
+    return $return_val;
+  } else {
+    return '';
+  }
+}
+
+$articles   = $page->children()->visible()->flip();
+
+$title      = $page->title()->html();
+
+if($tag = param('tag')) {
+  $articles = $articles->filterBy('tags', $tag, ',');
+  $title   .= ' - '.$tag;
+}
+
+$articles   = $articles->paginate(6);
+$pagination = $articles->pagination();
+
+snippet('blog-htmlhead');
+snippet('base/cont-header');
+?>
+
+<main class="section blog">
+  <div class="container">
+
+    <h1><a href="<?php echo $base_url ?>"><?php echo $title ?></a></h1>
+    <?php echo $page->text()->kirbytext(); ?>
+
+<?php if($pagination->hasPages() && $pagination->page() != 1): ?>
+    <nav class="pagination">
+      <?php if($pagination->hasNextPage()): ?>
+      <a class="button older" href="<?php echo $pagination->nextPageURL() ?>">&lsaquo; älter</a>
+      <?php endif ?>
+      <span class="num-pages">Seite <?php echo $pagination->page() ?> von <?php echo $pagination->pages() ?></span>
+      <?php if($pagination->hasPrevPage()): ?>
+      <a class="button newer" href="<?php echo $pagination->prevPageURL() ?>">neuer &rsaquo;</a>
+      <?php endif ?>
+    </nav>
+<?php endif ?>
+
+
+<?php foreach($articles as $a) {
+  echo snippet('blogexcerpt',["article"=>$a,"length"=>200,"base_url"=>$base_url]);
+}?>
+
+
+<?php if($pagination->hasPages()): ?>
+    <nav class="pagination">
+      <?php if($pagination->hasNextPage()): ?>
+      <a class="button older" href="<?php echo $pagination->nextPageURL() ?>">&lsaquo; älter</a>
+      <?php endif ?>
+      <span class="num-pages">Seite <?php echo $pagination->page() ?> von <?php echo $pagination->pages() ?></span>
+      <?php if($pagination->hasPrevPage()): ?>
+      <a class="button newer" href="<?php echo $pagination->prevPageURL() ?>">neuer &rsaquo;</a>
+      <?php endif ?>
+    </nav>
+<?php endif ?>
+
+  </div>
+</main>
+
+<?php snippet('base/cont-footer') ?>
+<?php snippet('base/html-end', ["bs_util"=>1,
+                                "bs_collapse"=>1]) ?>
--- a/site/templates/blogarticle.php
+++ b/site/templates/blogarticle.php
@ -0,0 +1,57 @@
+<?php
+// -------------------------------------------
+// kirby template FOR jannikbeyerstedt.de
+
+// copyright: Jannik Beyerstedt | https://jannikbeyerstedt.de
+// license: http://www.gnu.org/licenses/gpl-3.0.txt GPLv3 License
+// -------------------------------------------
+
+$base_url   = $site->find('blog')->url();
+function tags($base_url, $article) {
+  $tags = explode(',',(string)$article->tags());
+
+  if (!empty($tags[0])) {
+    $return_val = '<span class="tags">';
+    foreach ($tags as $tag) {
+      $url = $base_url.'/tag:'.$tag;
+      $return_val .= '<a href="'.$url.'">' . $tag . '</a> ';
+    }
+    $return_val .= '</span>';
+    return $return_val;
+  } else {
+    return '';
+  }
+}
+
+snippet('blog-htmlhead');
+snippet('base/cont-header');
+?>
+
+<main class="section blog">
+  <div class="container">
+    <article class="blogarticle">
+
+      <h1><?php echo $page->title()->html() ?></h1>
+      <?php echo $page->text()->kirbytext(); ?>
+
+    </article>
+
+<?php if($page->hasPrevVisible() || $page->hasNextVisible()): ?>
+    <div class="teasers">
+      <?php if($page->hasNextVisible()) {
+        echo snippet('blogexcerpt',["article"=>$page->nextVisible(),"length"=>200,"base_url"=>$base_url]);
+      } ?>
+      <?php if($page->hasPrevVisible()) {
+        echo snippet('blogexcerpt',["article"=>$page->prevVisible(),"length"=>200,"base_url"=>$base_url]);
+      } ?>
+    </div>
+<?php endif ?>
+
+
+
+  </div>
+</main>
+
+<?php snippet('base/cont-footer') ?>
+<?php snippet('base/html-end', ["bs_util"=>1,
+                                "bs_collapse"=>1]) ?>