From f9eb0e19c547e2fa7bfb5a47624b2760b55571ad Mon Sep 17 00:00:00 2001
From: Alex Grintsvayg <grin@lbry.io>
Date: Mon, 23 May 2016 21:12:58 -0400
Subject: [PATCH] fancy blog header backgrounds

---
 model/Post.class.php        | 18 ++++++++++++++----
 view/template/blog/post.php |  4 ++--
 web/scss/_blog.scss         | 38 +++++++++++++++++++++++++++++++++----
 3 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/model/Post.class.php b/model/Post.class.php
index d75179db..2aa3c021 100644
--- a/model/Post.class.php
+++ b/model/Post.class.php
@@ -62,18 +62,23 @@ class Post
     return $this->contentHtml;
   }
 
+  public function getPostNum()
+  {
+    return array_search($this->getSlug(), array_keys(Blog::getSlugMap()));
+  }
+
   public function getPrevPost()
   {
     $slugs = array_keys(Blog::getSlugMap());
-    $key = array_search($this->getSlug(), $slugs);
-    return $key === false || $key === 0 ? null : Blog::getPost($slugs[$key-1]);
+    $postNum = $this->getPostNum();
+    return $postNum === false || $postNum === 0 ? null : Blog::getPost($slugs[$postNum-1]);
   }
 
   public function getNextPost()
   {
     $slugs = array_keys(Blog::getSlugMap());
-    $key = array_search($this->getSlug(), $slugs);
-    return $key === false || $key >= count($slugs)-1 ? null : Blog::getPost($slugs[$key+1]);
+    $postNum = $this->getPostNum();
+    return $postNum === false || $postNum >= count($slugs)-1 ? null : Blog::getPost($slugs[$postNum+1]);
   }
 
   public function getAuthorName()
@@ -128,4 +133,9 @@ class Post
         return '<p>Much of our writing is a collaboration between LBRY team members, so we use SamueL BRYan to share credit. Sam has become a friend... an imaginary friend... even though we\'re adults...</p>';
     }
   }
+
+  public function getCoverBackgroundStyle($maxStyles)
+  {
+    return $this->getPostNum() % $maxStyles + 1;
+  }
 }
\ No newline at end of file
diff --git a/view/template/blog/post.php b/view/template/blog/post.php
index 6c441b63..108494c9 100644
--- a/view/template/blog/post.php
+++ b/view/template/blog/post.php
@@ -2,10 +2,10 @@
 <?php NavActions::setNavUri('/news') ?>
 <?php echo View::render('nav/header') ?>
 <main>
-  <header class="post-header"
+  <header class="post-header <?php echo $post->getCover() ? 'with-cover' : ('no-cover'.$post->getCoverBackgroundStyle(4)) ?>"
           <?php echo $post->getCover() ? 'style="background-image: url(\'/img/blog-covers/' . $post->getCover() . '\')"' : ''?>
           >
-    <div class="post-header-inner content <?php echo !$post->getCover() || $post->getIsCoverLight() ? 'content-light' : 'content-dark' ?>">
+    <div class="post-header-inner content <?php echo $post->getIsCoverLight() ? 'content-light' : 'content-dark' ?>">
       <h1><?php echo htmlentities($post->getTitle()) ?></h1>
       <div class="meta spacer1">
         <?php echo $post->getAuthorName() ?>
diff --git a/web/scss/_blog.scss b/web/scss/_blog.scss
index 617341b1..4ba8ad5d 100644
--- a/web/scss/_blog.scss
+++ b/web/scss/_blog.scss
@@ -21,10 +21,40 @@
   margin-bottom: $spacing-vertical * 2;
   min-height: 100vh;
 
-  background-color: $color-light-alt;
-  @include background-size (cover);
-  background-repeat: no-repeat;
-  background-position: center center;
+  &.no-cover1 { // diagonal stripes
+    background-color: $color-primary;
+    background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.08) 35px, rgba(255,255,255,.08) 70px);
+  }
+  &.no-cover2 { // argyle
+    background-color: $color-primary;
+    background-image:
+    repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
+    repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
+    linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
+    linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
+    background-size: 70px 120px;
+  }
+  &.no-cover3 { // polka dots
+    background-color: $color-primary;
+    background-image: radial-gradient(rgba(255,255,255,.1) 15%, transparent 16%),
+    radial-gradient(rgba(255,255,255,.1) 15%, transparent 16%);
+    background-size:60px 60px;
+    background-position: 0 0, 30px 30px;
+  }
+  &.no-cover4 { // pluses
+    background:
+      radial-gradient(circle, transparent 17%, $color-primary 17%, $color-primary 83%, transparent 83%, transparent),
+      radial-gradient(circle, transparent 17%, $color-primary 17%, $color-primary 83%, transparent 83%, transparent) 50px 50px,
+      linear-gradient(lighten($color-primary, 7%) 6px, transparent 6px) 0 -3px,
+      linear-gradient(90deg, lighten($color-primary, 7%) 6px, transparent 6px) -3px 0;
+    background-color: $color-primary;
+    background-size:100px 100px, 100px 100px, 50px 50px, 50px 50px;
+  }
+  &.with-cover {
+    @include background-size (cover);
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
 
   @include absolute-center();