Second pass 2.0

This commit is contained in:
John O'Nolan 2017-05-31 19:09:50 +01:00
parent ad9cb81a06
commit bc9e5a0b2e
11 changed files with 186 additions and 71 deletions

View File

@ -373,7 +373,7 @@ dd {
}
blockquote {
margin: 1.6em 0;
margin: 1.5em 0;
padding: 0 1.6em 0 1.6em;
border-left: var(--whitegrey) 0.5em solid;;
}

View File

@ -48,11 +48,12 @@ body {
*/
/* Home page
/* Special Template Styles
/* ---------------------------------------------------------- */
@media (min-width: 900px) {
.home-template .post-feed {
.home-template .post-feed,
.tag-template .post-feed {
margin-top: -100px;
}
.home-template .site-nav {
@ -214,6 +215,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
display: flex;
align-items: center;
flex-shrink: 0;
height: 40px;
}
.social-links {
@ -294,6 +296,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
.post-card {
flex: 1 1 300px;
order: unset;
display: flex;
flex-direction: column;
margin: 0 15px 30px;
@ -366,7 +369,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
font-weight: 500;
}
/* Special Styling for first item (below):
/* Special Styling for home page grid (below):
The first (most recent) post in the list is styled to be bigger than the others and take over the full width of the grid to give it more emphasis. Wrapped in a media query to make sure this only happens on large viewports / desktop-ish devices.
@ -374,43 +377,58 @@ The first (most recent) post in the list is styled to be bigger than the others
@media (min-width: 795px) {
.post-feed .post-card:nth-child(6n+1) {
.home-template .post-feed .post-card:nth-child(6n+1) {
flex: 1 1 100%;
flex-direction: row;
}
.post-feed .post-card:nth-child(6n+1) .post-card-image-link {
.home-template .post-feed .post-card:nth-child(6n+1) .post-card-image-link {
flex: 1 1 auto;
}
.post-feed .post-card:nth-child(6n+1) .post-card-image {
.home-template .post-feed .post-card:nth-child(6n+1) .post-card-image {
width: 100%;
height: 100%;
}
.post-feed .post-card:nth-child(6n+1) .post-card-content {
.home-template .post-feed .post-card:nth-child(6n+1) .post-card-content {
flex: 0 1 357px;
}
.post-feed .post-card:nth-child(6n+1) h2 {
.home-template .post-feed .post-card:nth-child(6n+1) h2 {
font-size: 2.6rem;
}
.post-feed .post-card:nth-child(6n+1) p {
.home-template .post-feed .post-card:nth-child(6n+1) p {
font-size: 1.8rem;
line-height: 1.55em;
}
.post-feed .post-card:nth-child(6n+1) .post-card-content-link {
.home-template .post-feed .post-card:nth-child(6n+1) .post-card-content-link {
padding: 30px 30px 0;
}
.post-feed .post-card:nth-child(6n+1) .post-card-meta {
.home-template .post-feed .post-card:nth-child(6n+1) .post-card-meta {
padding: 0 30px 30px;
}
/* Special Styling for Subscribe box
We've got a special subscribe box, this allows it to appear in the middle of the loop of posts without actually needing to interrupt the loop. Neat trickery courtesy of David Darnes.
.post-card:nth-of-type(2),
.post-card:nth-of-type(3) {
order: -1;
}
*/
}
/* Single Post
@ -427,7 +445,7 @@ The first (most recent) post in the list is styled to be bigger than the others
/* ^ Required to make .post-full-content:before/after z-index stacking work */
.post-full-header {
max-width: 1000px;
max-width: 1040px;
margin: 0 auto;
padding: 10vw 3vw 6vw;
text-align: center;
@ -476,12 +494,11 @@ The first (most recent) post in the list is styled to be bigger than the others
.post-full-content {
position: relative;
max-width: 920px;
min-height: 230px;
padding: 70px 100px 0;
margin: 0 auto;
font-size: 2.2rem;
line-height: 1.55em;
line-height: 1.6em;
font-family: Georgia, serif;
background: #fff;
}
@ -514,27 +531,72 @@ The first (most recent) post in the list is styled to be bigger than the others
filter: blur(5px);
}
.post-full-content > p:first-of-type {
.kg-card-markdown {
display: flex;
flex-direction: column;
align-items: center;
max-width: 920px;
}
.post-full-content p {
min-width: 100%;
}
.kg-card-markdown > p:first-child {
font-size: 2.7rem;
line-height: 1.55em;
}
.post-full-content a {
box-shadow: var(--blue) 0 -1px 0 inset;
}
.post-full-content a:hover {
text-decoration: none;
}
.post-full-content img {
width: 100vw;
max-width: 1040px;
}
/*
If an image url has #full on the end, give it special wide styles.
Super neat trick courtesy of @JoelDrapper
*/
.post-full-content img[src$="#full"] {
max-width: 100vw;
}
.post-full-content blockquote {
margin: 0 0 1.5em 0;
padding: 0;
border: 0;
text-align: center;
font-size: 3rem;
line-height: 1.5em;
line-height: 1.6em;
color: var(--blue);
}
.post-full-content blockquote:before {
content: open-quote;
}
.post-full-content blockquote p {
margin: 0;
}
@media (min-width: 1000px) {
.post-full-content blockquote {
margin-left: -150px;
margin-right: -150px;
width: 100vw;
max-width: 1060px;
}
}
.post-full-content .fluid-width-video-wrapper {
margin-bottom: 1.5em;
}
/* Post Footer
/* ---------------------------------------------------------- */
@ -674,6 +736,8 @@ The first (most recent) post in the list is styled to be bigger than the others
.read-next-card {
position: relative;
flex: 1 1 300px;
display: flex;
flex-direction: column;
margin: 0 15px 30px;
padding: 25px;
color: #fff;
@ -692,7 +756,9 @@ The first (most recent) post in the list is styled to be bigger than the others
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(135deg, rgba(62,176,239,0.90) 0%,rgba(46,138,172,0.80) 100%);
background: linear-gradient(135deg, rgba(0,40,60,0.60) 0%,rgba(0,20,40,0.50) 100%);
border-radius: 5px;
backdrop-filter: blur(2px);
}
.read-next-card-header {
@ -711,6 +777,8 @@ The first (most recent) post in the list is styled to be bigger than the others
}
.read-next-card-content {
flex-grow: 1;
display: flex;
position: relative;
z-index: 50;
font-size: 1.7rem;
@ -721,6 +789,9 @@ The first (most recent) post in the list is styled to be bigger than the others
}
.read-next-card-content ol {
display: flex;
flex-direction: column;
justify-content: flex-end;
margin: 0;
padding: 0 0 0 2em;
}

View File

@ -1,4 +1,3 @@
/*global jQuery */
/*jshint browser:true */
/*!
* FitVids 1.1
@ -9,20 +8,21 @@
*
*/
(function( $ ){
;(function( $ ){
"use strict";
'use strict';
$.fn.fitVids = function( options ) {
var settings = {
customSelector: null
customSelector: null,
ignore: null
};
if(!document.getElementById('fit-vids-style')) {
// appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
var head = document.head || document.getElementsByTagName('head')[0];
var css = '.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
var div = document.createElement('div');
var div = document.createElement("div");
div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>';
head.appendChild(div.childNodes[1]);
}
@ -33,35 +33,55 @@
return this.each(function(){
var selectors = [
"iframe[src*='player.vimeo.com']",
"iframe[src*='youtube.com']",
"iframe[src*='youtube-nocookie.com']",
"iframe[src*='kickstarter.com'][src*='video.html']",
"object",
"embed"
'iframe[src*="player.vimeo.com"]',
'iframe[src*="youtube.com"]',
'iframe[src*="youtube-nocookie.com"]',
'iframe[src*="kickstarter.com"][src*="video.html"]',
'object',
'embed'
];
if (settings.customSelector) {
selectors.push(settings.customSelector);
}
var ignoreList = '.fitvidsignore';
if(settings.ignore) {
ignoreList = ignoreList + ', ' + settings.ignore;
}
var $allVideos = $(this).find(selectors.join(','));
$allVideos = $allVideos.not("object object"); // SwfObj conflict patch
$allVideos = $allVideos.not('object object'); // SwfObj conflict patch
$allVideos = $allVideos.not(ignoreList); // Disable FitVids on this video.
$allVideos.each(function(){
var $this = $(this);
if($this.parents(ignoreList).length > 0) {
return; // Disable FitVids on this video.
}
if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
if ((!$this.css('height') && !$this.css('width')) && (isNaN($this.attr('height')) || isNaN($this.attr('width'))))
{
$this.attr('height', 9);
$this.attr('width', 16);
}
var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),
width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
aspectRatio = height / width;
if(!$this.attr('id')){
var videoID = 'fitvid' + Math.floor(Math.random()*999999);
$this.attr('id', videoID);
if(!$this.attr('name')){
var videoName = 'fitvid' + $.fn.fitVids._count;
$this.attr('name', videoName);
$.fn.fitVids._count++;
}
$this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%");
$this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%');
$this.removeAttr('height').removeAttr('width');
});
});
};
// Internal counter for unique video names.
$.fn.fitVids._count = 0;
// Works with either jQuery or Zepto
})( window.jQuery || window.Zepto );

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -47,6 +47,9 @@
// TODO: Only include this on post.hbs - preferably put in floating-header.hbs and pass up to ghost_foot via block helper or similar.
$(function() {
var $postContent = $(".post-full-content");
$postContent.fitVids();
$(window).scroll(function() {
var header = $(".floating-header");
var title = $(".post-full-title");

View File

@ -25,10 +25,10 @@ into the {body} of the default.hbs template --}}
<div class="site-nav-right">
<div class="social-links">
{{#if @blog.facebook}}
<a class="social-link social-link-fb" href="{{facebook_url}}">{{> "icons/facebook"}}</a>
<a class="social-link social-link-fb" href="{{facebook_url}}" target="_blank">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @blog.twitter}}
<a class="social-link social-link-tw" href="{{twitter_url}}">{{> "icons/twitter"}}</a>
<a class="social-link social-link-tw" href="{{twitter_url}}" target="_blank">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#if @labs.subscribers}}

View File

@ -1,13 +1,15 @@
{{!< default}}
{{!-- This is a page template. A page outputs content just like any other post, and has all the same
attributes by default, but you can also customise it to behave differently if you prefer. --}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
{{!-- The big featured header, it uses blog cover image as a BG if available --}}
<header class="site-header outer {{#if @blog.cover_image}}" style="background-image: url({{@blog.cover_image}}){{else}}no-cover{{/if}}">
<header class="site-header outer">
<div class="inner">
<nav class="site-nav">
<div class="site-nav-left">
{{#if @blog.logo}}
<a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
{{/if}}
{{#if @blog.navigation}}
{{!-- The blog navigation links from /ghost/settings/design --}}
{{navigation}}
@ -32,21 +34,30 @@
</div>
</header>
{{!-- Everything inside the #post tags pulls data from the page --}}
{{!-- Everything inside the #post tags pulls data from the post --}}
{{#post}}
<main id="site-main" class="site-main outer" role="main">
<div class="inner">
<main class="content" role="main">
<article class="{{post_class}}">
<article class="post-full {{post_class}}">
<header class="post-header">
<h1 class="post-title">{{title}}</h1>
<header class="post-full-header">
<h1 class="post-full-title">{{title}}</h1>
</header>
<section class="post-content">
{{#if feature_image}}
<figure class="post-full-image" style="background-image: url({{feature_image}})">
</figure>
{{/if}}
<section class="post-full-content">
{{content}}
</section>
</article>
</div>
</main>
{{/post}}

View File

@ -1,5 +1,10 @@
<div class="post-feed">
{{!-- This is the post loop - each post will be output using this markup --}}
{{!-- <aside class="post-card number-3">
<h1>SUBSCRIBE</h1>
</aside> --}}
{{#foreach posts}}
<article class="post-card {{post_class}}">
{{#if feature_image}}
@ -22,7 +27,7 @@
{{/if}}
<span class="post-card-author">{{author}}</span>
{{#if tags}}
<span class="poar-card-tags"> in <a href="{{tags.[0].slug}}">{{tags.[0].name}}</a></span>
<span class="poar-card-tags"> in <a href="{{@blog.url}}tag/{{tags.[0].slug}}">{{tags.[0].name}}</a></span>
{{/if}}
</footer>
</div>

View File

@ -37,6 +37,7 @@ into the {body} of the default.hbs template --}}
{{!-- Everything inside the #post tags pulls data from the post --}}
{{#post}}
{{!-- Floating header which appears on-scroll, pulled from includes/floating-header.hbs --}}
{{> floating-header}}
<main id="site-main" class="site-main outer" role="main">
@ -48,7 +49,7 @@ into the {body} of the default.hbs template --}}
<section class="post-full-meta">
<time class="post-full-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMMM YYYY"}}</time>
{{#if tags}}
<span class="date-divider">/</span> <a href="{{tags.[0].slug}}">{{tags.[0].name}}</a>
<span class="date-divider">/</span> <a href="{{@blog.url}}tag/{{tags.[0].slug}}">{{tags.[0].name}}</a>
{{/if}}
</section>
<h1 class="post-full-title">{{title}}</h1>
@ -126,7 +127,14 @@ into the {body} of the default.hbs template --}}
<div class="read-next-feed">
{{#get "posts" filter="tags:{{tags.[0].slug}}+id:-{{id}}" limit="3"}}
<article class="read-next-card read-next-card {{post_class}}"{{#if ../tags.[0].feature_image}} style="background-image: url({{../tags.[0].feature_image}})"{{/if}}>
<article class="read-next-card"
{{#if ../tags.[0].feature_image}}
style="background-image: url({{../tags.[0].feature_image}})"
{{else}}
{{#if @blog.cover_image}}
style="background-image: url({{@blog.cover_image}})"{{/if}}
{{/if}}
>
<header class="read-next-card-header">
<h3 class="read-next-card-header-title">Read more posts like this</h3>
</header>

25
tag.hbs
View File

@ -2,10 +2,14 @@
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
{{!-- The big featured header, it uses blog cover image as a BG if available --}}
<header class="site-header outer {{#if @blog.cover_image}}" style="background-image: url({{@blog.cover_image}}){{else}}no-cover{{/if}}">
{{#tag}}
<header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}">
<div class="inner">
<nav class="site-nav">
<div class="site-nav-left">
{{#if @blog.logo}}
<a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
{{/if}}
{{#if @blog.navigation}}
{{!-- The blog navigation links from /ghost/settings/design --}}
{{navigation}}
@ -14,10 +18,10 @@
<div class="site-nav-right">
<div class="social-links">
{{#if @blog.facebook}}
<a class="social-link social-link-fb" href="{{facebook_url}}">{{> "icons/facebook"}}</a>
<a class="social-link social-link-fb" href="{{facebook_url}}" target="_blank">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @blog.twitter}}
<a class="social-link social-link-tw" href="{{twitter_url}}">{{> "icons/twitter"}}</a>
<a class="social-link social-link-tw" href="{{twitter_url}}" target="_blank">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#if @labs.subscribers}}
@ -27,16 +31,9 @@
{{/if}}
</div>
</nav>
</div>
</header>
{{!-- If we have a tag cover, display that - else blog cover - else nothing --}}
<header class="main-header tag-head {{#if tag.image}}" style="background-image: url({{tag.image}}){{else}}{{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}{{/if}}">
<div class="vertical">
{{#tag}}
<div class="main-header-content inner">
<h1 class="page-title">{{name}}</h1>
<h2 class="page-description">
<div class="site-header-content">
<h1 class="site-title">{{name}}</h1>
<h2 class="site-description">
{{#if description}}
{{description}}
{{else}}
@ -44,9 +41,9 @@
{{/if}}
</h2>
</div>
{{/tag}}
</div>
</header>
{{/tag}}
{{!-- The main content area --}}
<main id="site-main" class="site-main outer" role="main">