theme improvements

moraza · Nov 2, 2014 · c4edc1d · c4edc1d
1 parent aab24d3
commit c4edc1d
Show file tree

Hide file tree

Showing 32 changed files with 1,522 additions and 42 deletions.
diff --git a/default.hbs b/default.hbs
@@ -10,37 +10,24 @@
  <meta name="HandheldFriendly" content="True" />
  <meta name="MobileOptimized" content="320" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
-
- <link rel="stylesheet" type="text/css" href="{{asset "css/normalize.css"}}" />
- <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
+
+ <link rel="stylesheet" type="text/css" href="{{asset "css/main.css"}}" />
 
  {{#if pagination.next}}<link href="{{page_url pagination.next}}" rel="prefetch" />{{/if}}
 
  {{ghost_head}}
 </head>
 <body class="{{body_class}}">
 
- <header id="site-head">
- {{#if @blog.logo}}<a id="blog-logo" href="{{@blog.url}}"><div class="bloglogo" style="background: url({{@blog.logo}})"></div></a>{{/if}}
- <h1 class="blog-title"><a href="{{@blog.url}}">{{@blog.title}}</a></h1>
- {{> header-description}}
- {{!> menu}}
- </header>
-
- {{{body}}}
+ {{> header }}
 
- <footer class="site-footer">
- <div class="inner">
- {{!> footer-description}}
- <section class="copyright">&copy; {{date format="YYYY"}} <a href="/">{{@blog.title}}</a>. All rights reserved.</section>
- <section>Vapor theme by <a href="https://sethlilly.com/">Seth Lilly</a></section>
- <section class="poweredby">Proudly published with <a class="icon-ghost" href="https://ghost.org/"><span class="hidden">Ghost</span></a></section>
- </div>
- </footer>
+ <div class="wrapper">
+ {{{ body }}}
+ </div>
 
- {{ghost_foot}}
+ {{> footer }}
 
- <script type="text/javascript" src="{{asset "js/index.js"}}"></script>
+ <script type="text/javascript" src="{{asset "js/main.js"}}"></script>
 
 </body>
 </html>
diff --git a/dev/Gruntfile.js b/dev/Gruntfile.js
@@ -11,6 +11,7 @@ module.exports = function (grunt) {
  // Configurable paths for the theme application.
  var appConfig = {
  temp: '.tmp/',
+ devimg: 'assets/images/',
  devjs: 'assets/js/',
  devless: 'assets/less/',
  dist: '../',
@@ -85,6 +86,11 @@ module.exports = function (grunt) {
 
  // Minify the file from the JS temporary folder and save it for production.
  uglify: {
+ options: {
+ mangle: false,
+ compress: false,
+ beautify: true
+ },
  all: {
  src: '<%= toro.temp %>/main.tmp.js',
  dest: '<%= toro.distjs %>/main.js'
@@ -121,21 +127,36 @@ module.exports = function (grunt) {
  all: ['<%= toro.devless %>/main.less'],
  options: {
  csslint: {
- 'font-sizes': false
+ 'box-sizing': false,
+ 'font-sizes': false,
+ 'known-properties': false,
+ 'unique-headings': false,
+ 'universal-selector': false
  }
  }
  },
 
  // Parse CSS and add vendor-prefixed CSS properties.
  autoprefixer: {
  options: {
- browsers: ['last 3 version']
+ browsers: ['last 1 version']
  },
  all: {
  src: '<%= toro.distcss %>/main.css'
  }
  },
 
+ copy: {
+ all: {
+ files: [{
+ expand: true,
+ src: ['<%= toro.devimg %>/**/*.png'],
+ dest: '<%= toro.dist %>',
+ filter: 'isFile'
+ }]
+ }
+ },
+
  // Watches files for changes and runs tasks based on the changed files.
  watch: {
  options: {
@@ -161,6 +182,7 @@ module.exports = function (grunt) {
  'less',
  'autoprefixer',
  'lesslint',
+ 'copy',
  'watch'
  ]);
 

diff --git a/dev/assets/images/circle-grey.png b/dev/assets/images/circle-grey.png
diff --git a/dev/assets/images/circle-red.png b/dev/assets/images/circle-red.png
diff --git a/dev/assets/images/cross-grey.png b/dev/assets/images/cross-grey.png
diff --git a/dev/assets/images/cross-red.png b/dev/assets/images/cross-red.png
diff --git a/dev/assets/images/pixel-grid.png b/dev/assets/images/pixel-grid.png
diff --git a/dev/assets/images/square-grey.png b/dev/assets/images/square-grey.png
diff --git a/dev/assets/images/square-red.png b/dev/assets/images/square-red.png
diff --git a/dev/assets/js/index.js b/dev/assets/js/index.js
@@ -0,0 +1,73 @@
+/**
+ * Main JS file for GhosToro behaviours
+ */
+
+/*globals jQuery, document */
+(function ($) {
+ "use strict";
+
+ $(document).ready(function(){
+ // Push down the blog at the beginning.
+ var home = $('.home-template');
+ var centered = $('.v-center');
+ var t;
+
+ if (home.length !== 0) {
+ $(window).resize(function() {
+ clearTimeout(t);
+ t = setTimeout(setHeight(), 100);
+ });
+
+ setHeight();
+ }
+
+ function setHeight() {
+ var headerHeight = $('#header').height();
+ var windowHeight = $(window).height();
+ var h = windowHeight - headerHeight;
+ centered.css('height', h);
+ }
+
+ // Hide the "scroll down" text on scroll.
+ var scrollDownText = $('.scroll-down');
+
+ $(window).scroll(function() {
+ if ($(this).scrollTop() > 10) {
+ scrollDownText.fadeOut();
+ } else if ($(this).scrollTop() === 0) {
+ scrollDownText.fadeIn();
+ }
+ });
+
+ // Add active class on navigation.
+ var url = window.location.pathname;
+ var navEl = $('#nav a');
+ var urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
+
+ navEl.each(function(){
+ if(urlRegExp.test(this.href.replace(/\/$/,''))) {
+ $(this).addClass('active');
+ }
+ });
+
+ // If blog images are larger than viewport set width to 100% to be responsive.
+ var contentImages = $('.content img');
+
+ $(window).resize(function() {
+ clearTimeout(t);
+ t = setTimeout(setImgWidth(), 100);
+ });
+
+ setImgWidth();
+
+ function setImgWidth() {
+ var windowWidth = $(window).width();
+ if (contentImages.width() > windowWidth) {
+ contentImages.css('width', '100%');
+ } else {
+ contentImages.css('width', 'auto');
+ }
+ }
+ });
+
+}(jQuery));
diff --git a/dev/assets/js/lib/pixi.js b/dev/assets/js/lib/pixi.js