LBRYFoundation/lbry.com
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry.com.git synced 2025-08-23 17:47:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fancy blog header backgrounds

Browse source
This commit is contained in:
Alex Grintsvayg 2016-05-23 21:12:58 -04:00
parent 7341ad9d10
commit f9eb0e19c5
3 changed files with 50 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
model/Post.class.php
View file

@ -62,18 +62,23 @@ class Post
return $this->contentHtml; return $this->contentHtml;
} }
public function getPostNum()
{
return array_search($this->getSlug(), array_keys(Blog::getSlugMap()));
}
public function getPrevPost() public function getPrevPost()
{ {
$slugs = array_keys(Blog::getSlugMap()); $slugs = array_keys(Blog::getSlugMap());
$key = array_search($this->getSlug(), $slugs); $postNum = $this->getPostNum();
return $key === false || $key === 0 ? null : Blog::getPost($slugs[$key-1]); return $postNum === false || $postNum === 0 ? null : Blog::getPost($slugs[$postNum-1]);
} }
public function getNextPost() public function getNextPost()
{ {
$slugs = array_keys(Blog::getSlugMap()); $slugs = array_keys(Blog::getSlugMap());
$key = array_search($this->getSlug(), $slugs); $postNum = $this->getPostNum();
return $key === false || $key >= count($slugs)-1 ? null : Blog::getPost($slugs[$key+1]); return $postNum === false || $postNum >= count($slugs)-1 ? null : Blog::getPost($slugs[$postNum+1]);
} }
public function getAuthorName() 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>'; 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;
}
} }

4
view/template/blog/post.php
View file

@ -2,10 +2,10 @@
<?php NavActions::setNavUri('/news') ?> <?php NavActions::setNavUri('/news') ?>
<?php echo View::render('nav/header') ?> <?php echo View::render('nav/header') ?>
<main> <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() . '\')"' : ''?> <?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> <h1><?php echo htmlentities($post->getTitle()) ?></h1>
<div class="meta spacer1"> <div class="meta spacer1">
<?php echo $post->getAuthorName() ?> <?php echo $post->getAuthorName() ?>

32
web/scss/_blog.scss
View file

@ -21,10 +21,40 @@
margin-bottom: $spacing-vertical * 2; margin-bottom: $spacing-vertical * 2;
min-height: 100vh; min-height: 100vh;
background-color: $color-light-alt; &.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); @include background-size (cover);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
}
@include absolute-center(); @include absolute-center();