-
-
Notifications
You must be signed in to change notification settings - Fork 145
Commit
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
# http://editorconfig.org | ||
|
||
root = true | ||
|
||
[*] | ||
charset = utf-8 | ||
indent_style = space | ||
indent_size = 4 | ||
end_of_line = lf | ||
insert_final_newline = true | ||
trim_trailing_whitespace = true | ||
|
||
[*.hbs] | ||
insert_final_newline = false | ||
|
||
[*.md] | ||
trim_trailing_whitespace = false |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
b-cov | ||
*.seed | ||
*.log | ||
*.csv | ||
*.dat | ||
*.out | ||
*.pid | ||
*.gz | ||
|
||
pids | ||
logs | ||
results | ||
|
||
npm-debug.log | ||
node_modules | ||
package-lock.json | ||
|
||
.idea/* | ||
*.iml | ||
*.map | ||
projectFilesBackup | ||
|
||
.DS_Store | ||
|
||
dist/ |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
language: node_js | ||
sudo: false | ||
node_js: | ||
- "8" |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,64 @@ | ||
# Editorial | ||
A free, open source theme for Ghost | ||
|
||
This is Editorial, a news-oriented design built around a huge background | ||
image and scroll effects powered by Scrollex. Originally created by [@ajlkn](https://twitter.com/ajlkn) for [HTML5 UP](https://html5up.net) and later ported to [Ghost](https://ghost.org) | ||
|
||
**Demo: https://editorial.ghost.io** | ||
|
||
| ||
|
||
 | ||
|
||
|
||
| ||
|
||
# First time using a Ghost theme? | ||
|
||
Ghost uses a simple templating language called [Handlebars](http://handlebarsjs.com/) for its themes. | ||
|
||
We've documented our default theme pretty heavily so that it should be fairly easy to work out what's going on just by reading the code and the comments. Once you feel comfortable with how everything works, we also have full [theme API documentation](https://themes.ghost.org) which explains every possible Handlebars helper and template. | ||
|
||
**The main files are:** | ||
|
||
- `default.hbs` - The main template file | ||
- `index.hbs` - Used for the home page | ||
- `post.hbs` - Used for individual posts | ||
- `page.hbs` - Used for individual pages | ||
- `tag.hbs` - Used for tag archives | ||
- `author.hbs` - Used for author archives | ||
|
||
One neat trick is that you can also create custom one-off templates just by adding the slug of a page to a template file. For example: | ||
|
||
- `page-about.hbs` - Custom template for the `/about/` page | ||
- `tag-news.hbs` - Custom template for `/tag/news/` archive | ||
- `author-ali.hbs` - Custom template for `/author/ali/` archive | ||
|
||
|
||
# Development | ||
|
||
This implementation tries to stay as true as possible to the original template without making too many modifications. The original code is unmodified, preserving the ability to update it later. | ||
|
||
There are two main changes compared to the original template files: | ||
|
||
- The original template contained separate `/assets` and `/images` directories. Ghost Themes require that all assets be nested under a top-level `/assets` directory, so these are moved to `/assets/main` and `/assets/images`, respectively. | ||
- In order to make minor modifications and add some new custom styles, one additional SaSS file is added under `/assets/main/sass/layout/ghost.sass` and included at the bottom of the `main.sass` file. | ||
|
||
To work on styles in this theme, you'll need to run a local development environment to build/watch for changes. Once cloned and installed with npm/yarn, the following `gulp` build tasks are available: | ||
|
||
```bash | ||
# Build files locally and watch for changes | ||
gulp | ||
|
||
# Build production zip locally and save to /dist | ||
gulp zip | ||
|
||
# Run compatibility test against latest version of Ghost | ||
yarn test | ||
``` | ||
|
||
Original template files and design by [@ajlkn](https://twitter.com/ajlkn) | ||
|
||
|
||
# Copyright & License | ||
|
||
Copyright (c) 2013-2018 [HTML5 UP](https://htmlup.net) & [Ghost Foundation](https://ghost.org) - This theme is licensed under both the [MIT and Creative Commons Attribution 3.0](LICENSE). Please note that the terms of the Creative Commons license require that you maintain the footer attribution to freely use this theme. |
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Large diffs are not rendered by default.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,258 @@ | ||
/* | ||
Massively by HTML5 UP | ||
html5up.net | @ajlkn | ||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) | ||
*/ | ||
|
||
(function($) { | ||
|
||
var $window = $(window), | ||
$body = $('body'), | ||
$wrapper = $('#wrapper'), | ||
$header = $('#header'), | ||
$nav = $('#nav'), | ||
$main = $('#main'), | ||
$navPanelToggle, $navPanel, $navPanelInner; | ||
|
||
// Breakpoints. | ||
breakpoints({ | ||
default: ['1681px', null ], | ||
xlarge: ['1281px', '1680px' ], | ||
large: ['981px', '1280px' ], | ||
medium: ['737px', '980px' ], | ||
small: ['481px', '736px' ], | ||
xsmall: ['361px', '480px' ], | ||
xxsmall: [null, '360px' ] | ||
}); | ||
|
||
/** | ||
* Applies parallax scrolling to an element's background image. | ||
* @return {jQuery} jQuery object. | ||
*/ | ||
$.fn._parallax = function(intensity) { | ||
|
||
var $window = $(window), | ||
$this = $(this); | ||
|
||
if (this.length == 0 || intensity === 0) | ||
return $this; | ||
|
||
if (this.length > 1) { | ||
|
||
for (var i=0; i < this.length; i++) | ||
$(this[i])._parallax(intensity); | ||
|
||
return $this; | ||
|
||
} | ||
|
||
if (!intensity) | ||
intensity = 0.25; | ||
|
||
$this.each(function() { | ||
|
||
var $t = $(this), | ||
$bg = $('<div class="bg"></div>').appendTo($t), | ||
on, off; | ||
|
||
on = function() { | ||
|
||
$bg | ||
.removeClass('fixed') | ||
.css('transform', 'matrix(1,0,0,1,0,0)'); | ||
|
||
$window | ||
.on('scroll._parallax', function() { | ||
|
||
var pos = parseInt($window.scrollTop()) - parseInt($t.position().top); | ||
|
||
$bg.css('transform', 'matrix(1,0,0,1,0,' + (pos * intensity) + ')'); | ||
|
||
}); | ||
|
||
}; | ||
|
||
off = function() { | ||
|
||
$bg | ||
.addClass('fixed') | ||
.css('transform', 'none'); | ||
|
||
$window | ||
.off('scroll._parallax'); | ||
|
||
}; | ||
|
||
// Disable parallax on .. | ||
if (browser.name == 'ie' // IE | ||
|| browser.name == 'edge' // Edge | ||
|| window.devicePixelRatio > 1 // Retina/HiDPI (= poor performance) | ||
|| browser.mobile) // Mobile devices | ||
off(); | ||
|
||
// Enable everywhere else. | ||
else { | ||
|
||
breakpoints.on('>large', on); | ||
breakpoints.on('<=large', off); | ||
|
||
} | ||
|
||
}); | ||
|
||
$window | ||
.off('load._parallax resize._parallax') | ||
.on('load._parallax resize._parallax', function() { | ||
$window.trigger('scroll'); | ||
}); | ||
|
||
return $(this); | ||
|
||
}; | ||
|
||
// Play initial animations on page load. | ||
$window.on('load', function() { | ||
window.setTimeout(function() { | ||
$body.removeClass('is-preload'); | ||
}, 100); | ||
}); | ||
|
||
// Scrolly. | ||
$('.scrolly').scrolly(); | ||
|
||
// Background. | ||
$wrapper._parallax(0.925); | ||
|
||
// Nav Panel. | ||
|
||
// Toggle. | ||
$navPanelToggle = $( | ||
'<a href="#navPanel" id="navPanelToggle">Menu</a>' | ||
) | ||
.appendTo($wrapper); | ||
|
||
// Change toggle styling once we've scrolled past the header. | ||
$header.scrollex({ | ||
bottom: '5vh', | ||
enter: function() { | ||
$navPanelToggle.removeClass('alt'); | ||
}, | ||
leave: function() { | ||
$navPanelToggle.addClass('alt'); | ||
} | ||
}); | ||
|
||
// Panel. | ||
$navPanel = $( | ||
'<div id="navPanel">' + | ||
'<nav>' + | ||
'</nav>' + | ||
'<a href="#navPanel" class="close"></a>' + | ||
'</div>' | ||
) | ||
.appendTo($body) | ||
.panel({ | ||
delay: 500, | ||
hideOnClick: true, | ||
hideOnSwipe: true, | ||
resetScroll: true, | ||
resetForms: true, | ||
side: 'right', | ||
target: $body, | ||
visibleClass: 'is-navPanel-visible' | ||
}); | ||
|
||
// Get inner. | ||
$navPanelInner = $navPanel.children('nav'); | ||
|
||
// Move nav content on breakpoint change. | ||
var $navContent = $nav.children(); | ||
|
||
breakpoints.on('>medium', function() { | ||
|
||
// NavPanel -> Nav. | ||
$navContent.appendTo($nav); | ||
|
||
// Flip icon classes. | ||
$nav.find('.icons, .icon') | ||
.removeClass('alt'); | ||
|
||
}); | ||
|
||
breakpoints.on('<=medium', function() { | ||
|
||
// Nav -> NavPanel. | ||
$navContent.appendTo($navPanelInner); | ||
|
||
// Flip icon classes. | ||
$navPanelInner.find('.icons, .icon') | ||
.addClass('alt'); | ||
|
||
}); | ||
|
||
// Hack: Disable transitions on WP. | ||
if (browser.os == 'wp' | ||
&& browser.osVersion < 10) | ||
$navPanel | ||
.css('transition', 'none'); | ||
|
||
// Intro. | ||
var $intro = $('#intro'); | ||
|
||
if ($intro.length > 0) { | ||
|
||
// Hack: Fix flex min-height on IE. | ||
if (browser.name == 'ie') { | ||
$window.on('resize.ie-intro-fix', function() { | ||
|
||
var h = $intro.height(); | ||
|
||
if (h > $window.height()) | ||
$intro.css('height', 'auto'); | ||
else | ||
$intro.css('height', h); | ||
|
||
}).trigger('resize.ie-intro-fix'); | ||
} | ||
|
||
// Hide intro on scroll (> small). | ||
breakpoints.on('>small', function() { | ||
|
||
$main.unscrollex(); | ||
|
||
$main.scrollex({ | ||
mode: 'bottom', | ||
top: '25vh', | ||
bottom: '-50vh', | ||
enter: function() { | ||
$intro.addClass('hidden'); | ||
}, | ||
leave: function() { | ||
$intro.removeClass('hidden'); | ||
} | ||
}); | ||
|
||
}); | ||
|
||
// Hide intro on scroll (<= small). | ||
breakpoints.on('<=small', function() { | ||
|
||
$main.unscrollex(); | ||
|
||
$main.scrollex({ | ||
mode: 'middle', | ||
top: '15vh', | ||
bottom: '-15vh', | ||
enter: function() { | ||
$intro.addClass('hidden'); | ||
}, | ||
leave: function() { | ||
$intro.removeClass('hidden'); | ||
} | ||
}); | ||
|
||
}); | ||
|
||
} | ||
|
||
})(jQuery); |