Browse Source

Initial commit

master
commit
82523822e3
27 changed files with 12578 additions and 0 deletions
  1. +18
    -0
      .gitignore
  2. +14
    -0
      Gemfile
  3. +121
    -0
      Gemfile.lock
  4. +87
    -0
      config.rb
  5. +5
    -0
      source/about/index.html.erb
  6. BIN
      source/content/12-john_raymond.jpg
  7. +7
    -0
      source/content/12-john_raymond.yaml
  8. BIN
      source/content/13-raymond_reid.jpg
  9. BIN
      source/fonts/portfolio-pixellove/portfolio-pixellove.eot
  10. +19
    -0
      source/fonts/portfolio-pixellove/portfolio-pixellove.svg
  11. BIN
      source/fonts/portfolio-pixellove/portfolio-pixellove.ttf
  12. BIN
      source/fonts/portfolio-pixellove/portfolio-pixellove.woff
  13. BIN
      source/images/close.png
  14. BIN
      source/images/loader.gif
  15. BIN
      source/images/loading.gif
  16. BIN
      source/images/next.png
  17. BIN
      source/images/prev.png
  18. +23
    -0
      source/index.html.erb
  19. +74
    -0
      source/javascripts/jquery.fitvids.js
  20. +10337
    -0
      source/javascripts/jquery.js
  21. +416
    -0
      source/javascripts/lightbox.js
  22. +97
    -0
      source/javascripts/main.js
  23. +69
    -0
      source/layouts/layout.erb
  24. +210
    -0
      source/stylesheets/lightbox.css
  25. +726
    -0
      source/stylesheets/main.css
  26. +337
    -0
      source/stylesheets/normalize.css
  27. +18
    -0
      source/stylesheets/open-sans.css

+ 18
- 0
.gitignore View File

@@ -0,0 +1,18 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.
#
# If you find yourself ignoring temporary files generated by your text editor
# or operating system, you probably want to add a global ignore instead:
# git config --global core.excludesfile ~/.gitignore_global

# Ignore bundler config
/.bundle

# Ignore the build directory
/build

# Ignore cache
/.sass-cache
/.cache

# Ignore .DS_store file
.DS_Store

+ 14
- 0
Gemfile View File

@@ -0,0 +1,14 @@
# If you have OpenSSL installed, we recommend updating
# the following line to use "https"
source 'http://rubygems.org'

gem "middleman", "~>3.3.3"

# Live-reloading plugin
gem "middleman-livereload", "~> 3.1.0"

# For faster file watcher updates on Windows:
gem "wdm", "~> 0.1.0", :platforms => [:mswin, :mingw]

# Windows does not come with time zone data
gem "tzinfo-data", platforms: [:mswin, :mingw]

+ 121
- 0
Gemfile.lock View File

@@ -0,0 +1,121 @@
GEM
remote: http://rubygems.org/
specs:
activesupport (4.1.4)
i18n (~> 0.6, >= 0.6.9)
json (~> 1.7, >= 1.7.7)
minitest (~> 5.1)
thread_safe (~> 0.1)
tzinfo (~> 1.1)
chunky_png (1.3.1)
coffee-script (2.2.0)
coffee-script-source
execjs
coffee-script-source (1.7.1)
compass (0.12.7)
chunky_png (~> 1.2)
fssm (>= 0.2.7)
sass (~> 3.2.19)
compass-import-once (1.0.4)
sass (>= 3.2, < 3.5)
em-websocket (0.5.1)
eventmachine (>= 0.12.9)
http_parser.rb (~> 0.6.0)
erubis (2.7.0)
eventmachine (1.0.3)
execjs (2.2.1)
ffi (1.9.3)
fssm (0.2.10)
haml (4.0.5)
tilt
hike (1.2.3)
hooks (0.4.0)
uber (~> 0.0.4)
http_parser.rb (0.6.0)
i18n (0.6.11)
json (1.8.1)
kramdown (1.4.0)
listen (1.3.1)
rb-fsevent (>= 0.9.3)
rb-inotify (>= 0.9)
rb-kqueue (>= 0.2)
middleman (3.3.3)
coffee-script (~> 2.2.0)
compass (>= 0.12.4)
compass-import-once (= 1.0.4)
execjs (~> 2.0)
haml (>= 4.0.5)
kramdown (~> 1.2)
middleman-core (= 3.3.3)
middleman-sprockets (>= 3.1.2)
sass (>= 3.2.17, < 4.0)
uglifier (~> 2.5)
middleman-core (3.3.3)
activesupport (~> 4.1.0)
bundler (~> 1.1)
erubis
hooks (~> 0.3)
i18n (~> 0.6.9)
listen (~> 1.1)
padrino-helpers (~> 0.12.1)
rack (>= 1.4.5, < 2.0)
rack-test (~> 0.6.2)
thor (>= 0.15.2, < 2.0)
tilt (~> 1.4.1, < 2.0)
middleman-livereload (3.1.1)
em-websocket (>= 0.2.0)
middleman-core (>= 3.0.2)
multi_json (~> 1.0)
rack-livereload
middleman-sprockets (3.3.3)
middleman-core (>= 3.2)
sprockets (~> 2.2)
sprockets-helpers (~> 1.1.0)
sprockets-sass (~> 1.1.0)
minitest (5.4.0)
multi_json (1.10.1)
padrino-helpers (0.12.2)
i18n (~> 0.6, >= 0.6.7)
padrino-support (= 0.12.2)
tilt (~> 1.4.1)
padrino-support (0.12.2)
activesupport (>= 3.1)
rack (1.5.2)
rack-livereload (0.3.15)
rack
rack-test (0.6.2)
rack (>= 1.0)
rb-fsevent (0.9.4)
rb-inotify (0.9.5)
ffi (>= 0.5.0)
rb-kqueue (0.2.3)
ffi (>= 0.5.0)
sass (3.2.19)
sprockets (2.12.1)
hike (~> 1.2)
multi_json (~> 1.0)
rack (~> 1.0)
tilt (~> 1.1, != 1.3.0)
sprockets-helpers (1.1.0)
sprockets (~> 2.0)
sprockets-sass (1.1.0)
sprockets (~> 2.0)
tilt (~> 1.1)
thor (0.19.1)
thread_safe (0.3.4)
tilt (1.4.1)
tzinfo (1.2.1)
thread_safe (~> 0.1)
uber (0.0.7)
uglifier (2.5.3)
execjs (>= 0.3.0)
json (>= 1.8.0)

PLATFORMS
ruby

DEPENDENCIES
middleman (~> 3.3.3)
middleman-livereload (~> 3.1.0)
tzinfo-data
wdm (~> 0.1.0)

+ 87
- 0
config.rb View File

@@ -0,0 +1,87 @@
###
# Compass
###

# Change Compass configuration
# compass_config do |config|
# config.output_style = :compact
# end

###
# Page options, layouts, aliases and proxies
###

# Per-page layout changes:
#
# With no layout
# page "/path/to/file.html", :layout => false
#
# With alternative layout
# page "/path/to/file.html", :layout => :otherlayout
#
# A path which all have the same layout
# with_layout :admin do
# page "/admin/*"
# end

# Proxy pages (http://middlemanapp.com/basics/dynamic-pages/)
# proxy "/this-page-has-no-template.html", "/template-file.html", :locals => {
# :which_fake_page => "Rendering a fake page with a local variable" }

###
# Helpers
###

# Automatic image dimensions on image_tag helper
# activate :automatic_image_sizes

# Reload the browser automatically whenever files change
# configure :development do
# activate :livereload
# end

$picture_files = (Dir.glob(File.join("source/content", "*.jpg")) +
Dir.glob(File.join("source/content", "*.png"))).sort.reverse

# Methods defined in the helpers block are available in templates
helpers do
def picture_info
$picture_files.map {|path|
base_filename = path.gsub(/\.[^.]+$/, "")
info = {"description" => "Some drawing",
"tags" => ["pencil", "scan", "mdscan"]}
begin
info = YAML.load(File.read(base_filename + ".yaml"))
rescue Errno::ENOENT
end
{:id => File.basename(base_filename),
:name => File.basename(path),
:description => info["description"],
:tags => info["tags"]}
}
end
end

set :css_dir, 'stylesheets'

set :js_dir, 'javascripts'

set :images_dir, 'images'

# Build-specific configuration
configure :build do
# For example, change the Compass output style for deployment
# activate :minify_css

# Minify Javascript on build
# activate :minify_javascript

# Enable cache buster
# activate :asset_hash

# Use relative URLs
# activate :relative_assets

# Or use a different image path
# set :http_prefix, "/Content/images/"
end

+ 5
- 0
source/about/index.html.erb View File

@@ -0,0 +1,5 @@
---
title: About
---

These are drawings I make to learn how to draw.

BIN
source/content/12-john_raymond.jpg View File

Before After
Width: 1486  |  Height: 1837  |  Size: 822KB

+ 7
- 0
source/content/12-john_raymond.yaml View File

@@ -0,0 +1,7 @@
---
description: Study of different poses for characters John &amp; Raymond
tags:
- scan
- mdscan
- pencil
- poses

BIN
source/content/13-raymond_reid.jpg View File

Before After
Width: 1381  |  Height: 762  |  Size: 360KB

BIN
source/fonts/portfolio-pixellove/portfolio-pixellove.eot View File


+ 19
- 0
source/fonts/portfolio-pixellove/portfolio-pixellove.svg View File

@@ -0,0 +1,19 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by Fontastic.me</metadata>
<defs>
<font id="portfolio-pixellove" horiz-adv-x="512">
<font-face font-family="portfolio-pixellove" units-per-em="512" ascent="480" descent="-32"/>
<missing-glyph horiz-adv-x="512" />

<glyph unicode="&#97;" d="M256 512c-141 0-256-115-256-256 0-141 115-256 256-256 141 0 256 115 256 256 0 141-115 256-256 256z m92-140l-36 0c-14 0-25-11-25-25l0-19 61 0 0-63-61 0 0-183-82 0 0 183-41 0 0 63 41 0 0 34c0 37 30 68 68 68l75 0z"/>
<glyph unicode="&#98;" d="M494 432l-475 0 238-237z m18-339l0 329-255-255-255 255 0-329 151 151 13-14-151-151 483 0-151 151 14 14z"/>
<glyph unicode="&#99;" d="M256 512c-141 0-255-114-255-256 0-141 114-255 255-255 142 0 256 114 256 255 0 142-114 256-256 256z m-49-430c-56 0-104 23-104 60 0 37 43 73 100 73 6 0 12 0 18 0-8 8-14 17-14 28 0 7 2 13 5 19-3 0-6 0-9 0-47 0-78 33-78 73 0 40 43 75 89 75l102 0-23-17-33 0c22-8 33-33 33-58 0-22-12-40-29-53-16-13-19-18-19-29 0-9 18-25 27-32 27-19 35-36 35-66 0-36-35-73-100-73z m182 246l0-61-20 0 0 61-62 0 0 20 62 0 0 62 20 0 0-62 62 0 0-20z m-188 67c-26 1-44-25-39-59 4-35 29-63 55-64 27-1 44 26 40 61-5 34-30 62-56 62z m13-189c-39 0-74-24-74-53 0-30 28-54 67-54 55 0 74 23 74 52 0 4 0 7-1 11-4 17-20 25-41 39-8 3-16 4-25 5z"/>
<glyph unicode="&#100;" d="M256 512c-141 0-256-115-256-256 0-104 62-194 152-234 0 16 0 45 4 61 5 20 33 138 33 138 0 0-8 16-8 40 0 38 21 66 48 66 24 0 35-17 35-38 0-23-15-58-23-90-6-27 14-49 40-49 48 0 81 62 81 135 0 55-38 97-106 97-77 0-125-57-125-121 0-23 7-38 17-50 5-6 5-8 4-14-1-5-4-16-5-21-2-6-7-8-13-6-36 14-52 53-52 97 0 72 61 158 181 158 97 0 161-70 161-145 0-99-56-174-137-174-28 0-53 15-62 32 0 0-15-59-18-70-5-17-19-42-27-56 24-8 49-12 76-12 141 0 256 115 256 256 0 141-115 256-256 256z"/>
<glyph unicode="&#101;" d="M256 512c-141 0-256-115-256-256 0-141 115-256 256-256 141 0 256 115 256 256 0 141-115 256-256 256z m-102-399c-23 0-41 18-41 41 0 22 18 41 41 41 22 0 41-19 41-41 0-23-19-41-41-41z m102 0c0 38-15 74-42 101-27 28-63 43-101 43l0 58c111 0 202-90 202-202z m105 0c0 137-111 248-248 248l0 59c169 0 307-138 307-307z"/>
<glyph unicode="&#102;" d="M256 512c-141 0-256-115-256-256 0-141 115-256 256-256 141 0 256 115 256 256 0 141-115 256-256 256z m143-194c0-3 0-7 0-10 0-95-73-206-206-206-41 0-79 12-111 33 6-1 11-1 17-1 34 0 65 11 90 31-32 0-58 21-68 50 5-1 9-1 14-1 7 0 13 1 19 2-33 7-58 36-58 71l0 1c10-5 21-8 33-9-20 13-32 35-32 60 0 14 3 26 9 37 36-44 90-73 150-76-2 6-2 11-2 17 0 40 32 72 72 72 21 0 40-9 53-23 17 3 32 10 46 18-5-17-17-31-32-40 15 2 29 5 42 11-10-14-22-27-36-37z"/>
<glyph unicode="&#103;" d="M256 512c-141 0-256-115-256-256 0-141 115-256 256-256 141 0 256 115 256 256 0 141-115 256-256 256z m45-105l23 0 0-93c0-3 0-5 1-6 1-1 3-2 5-2 2 0 4 1 6 2 3 2 5 4 8 7l0 92 23 0 0-121-23 0 0 13c-5-5-9-9-14-11-4-3-9-4-13-4-5 0-9 2-12 5-3 4-4 9-4 17l0 101z m-52 3c9 0 17-3 23-8 6-6 9-14 9-23l0-63c0-10-3-19-9-25-5-5-14-8-24-8-10 0-18 3-24 9-6 6-9 14-9 24l0 64c0 9 3 16 9 22 6 6 14 8 25 8z m-94 41l17-66 1 0 16 66 27 0-30-97 0-68-26 0 0 65-31 100z m253-344c0-24-20-44-45-44-35-1-71-2-107-2-36 0-72 1-107 2-25 0-45 20-45 44-1 18-2 37-2 56 0 19 1 38 2 57 0 23 20 43 45 43 35 1 71 2 107 2 36 0 72-1 107-2 25 0 45-20 45-43 1-19 2-38 2-57 0-19-1-38-2-56z m-217 125l-65 0 0-20 22 0 0-114 21 0 0 114 22 0z m34-110c-2-2-4-4-6-5-2-2-4-2-5-2-2 0-3 0-4 1-1 1-1 3-1 5l0 76-19 0 0-83c0-5 1-10 4-13 2-3 5-4 9-4 4 0 7 1 11 3 4 2 7 5 11 9l0-11 19 0 0 99-19 0 0-75z m72 76c-3 0-6-1-8-2-3-2-6-4-8-7l0 43-19 0 0-134 19 0 0 8c2-3 5-5 8-7 2-1 6-2 9-2 6 0 10 2 13 6 3 3 4 9 4 16l0 54c0 8-1 15-4 19-3 4-8 6-14 6z m-1-77c0-3 0-5-1-6-2-2-3-2-6-2-1 0-3 0-4 1-1 0-3 1-4 3l0 61c1 2 2 3 3 3 2 1 3 1 4 1 3 0 5 0 6-2 1-2 2-4 2-8z m62 78c-9 0-15-2-21-8-5-5-8-12-8-21l0-44c0-9 3-17 8-22 4-6 11-8 19-8 10 0 17 2 21 7 5 5 7 13 7 23l0 8-19 0 0-7c0-6-1-10-2-12-1-1-3-2-6-2-3 0-5 1-7 3-1 2-1 5-1 11l0 18 35 0 0 25c0 10-2 17-7 22-4 5-11 7-19 7z m7-38l-16 0 0 10c0 4 0 7 2 8 1 2 3 3 6 3 3 0 5-1 6-3 1-1 2-4 2-8l0-10z m-117 228c-3 0-5-1-7-2-2-2-3-4-3-7l0-66c0-3 1-6 3-8 1-1 4-2 7-2 3 0 5 1 7 2 2 2 3 5 3 8l0 66c0 3-1 5-3 7-2 1-4 2-7 2z"/>
<glyph unicode="&#104;" d="M512 313l-196 0-60 190-60-190-196 0 159-119-61-185 158 115 158-115-61 185z m-127-264l-129 94-129-94 50 151-126 94 155 0 50 158 50-158 155 0-126-94z"/>
<glyph unicode="&#105;" d="M396 432c20 0 36-16 36-36 0-20-16-36-36-36-20 0-36 16-36 36 0 20 16 36 36 36m0 17c-29 0-53-24-53-53 0-29 24-53 53-53 29 0 53 24 53 53 0 29-24 53-53 53z m74 42c14 0 21-7 21-21l0-148c0-9 0-18-6-25l-284-270c-5-5-11-8-18-8-7 0-13 3-18 8l-138 138c-5 5-8 11-8 18 0 7 3 13 8 18l275 280c6 6 15 10 24 10l144 0m0 21l-144 0c-14 0-27-6-36-15l-275-284c-16-16-17-43 0-60l138-138c9-8 19-13 30-13 11 0 22 5 30 13l284 270c10 11 15 24 15 37l0 148c0 23-19 42-42 42z"/>
</font></defs></svg>

BIN
source/fonts/portfolio-pixellove/portfolio-pixellove.ttf View File


BIN
source/fonts/portfolio-pixellove/portfolio-pixellove.woff View File


BIN
source/images/close.png View File

Before After
Width: 27  |  Height: 27  |  Size: 280B

BIN
source/images/loader.gif View File

Before After
Width: 16  |  Height: 16  |  Size: 1.7KB

BIN
source/images/loading.gif View File

Before After
Width: 32  |  Height: 32  |  Size: 8.3KB

BIN
source/images/next.png View File

Before After
Width: 50  |  Height: 45  |  Size: 1.3KB

BIN
source/images/prev.png View File

Before After
Width: 50  |  Height: 45  |  Size: 1.3KB

+ 23
- 0
source/index.html.erb View File

@@ -0,0 +1,23 @@
---
title: Drawings by Esteban Manchado
---

<% picture_info.each do |picture| %>
<article class="post tag-photo tag-music post__wrapper" data-cols="4">
<div class="post__wrapper_helper post__wrapper_helper--notloaded el__transition">
<p><img src="/content/<%= picture[:name] %>" alt="featured-image" /></p>

<div data-lightbox-label-for="<%= picture[:id] %>" class="post__preview el__transition">
<p class="post__excerpt"><a id="<%= picture[:id] %>" data-lightbox="drawings" href="/content/<%= picture[:name] %>" class="post__link post__title_link"><span><%= picture[:description] %></span></a></p>
</div>

<footer class="post__meta">
<ul class="post__tags">
<% picture[:tags].each_with_index do |tag, i| %>
<li class="post__tag"><a href="/tag/<%= tag %>/" class="post__link post__tag_link"><%= tag %></a><% if i != picture[:tags].size - 1 %>, <% end %></li>
<% end %>
</ul>
</footer>
</div>
</article>
<% end %>

+ 74
- 0
source/javascripts/jquery.fitvids.js View File

@@ -0,0 +1,74 @@
/*global jQuery */
/*jshint multistr:true browser:true */
/*!
* FitVids 1.0.3
*
* Copyright 2013, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com
* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
* Released under the WTFPL license - http://sam.zoy.org/wtfpl/
*
* Date: Thu Sept 01 18:00:00 2011 -0500
*/

(function( $ ){

"use strict";

$.fn.fitVids = function( options ) {
var settings = {
customSelector: null
};

if(!document.getElementById('fit-vids-style')) {

var div = document.createElement('div'),
ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0],
cssStyles = '&shy;<style>.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%;}</style>';

div.className = 'fit-vids-style';
div.id = 'fit-vids-style';
div.style.display = 'none';
div.innerHTML = cssStyles;

ref.parentNode.insertBefore(div,ref);

}

if ( options ) {
$.extend( settings, options );
}

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"
];

if (settings.customSelector) {
selectors.push(settings.customSelector);
}

var $allVideos = $(this).find(selectors.join(','));
$allVideos = $allVideos.not("object object"); // SwfObj conflict patch

$allVideos.each(function(){
var $this = $(this);
if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
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);
}
$this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%");
$this.removeAttr('height').removeAttr('width');
});
});
};
// Works with either jQuery or Zepto
})( window.jQuery || window.Zepto );

+ 10337
- 0
source/javascripts/jquery.js
File diff suppressed because it is too large
View File


+ 416
- 0
source/javascripts/lightbox.js View File

@@ -0,0 +1,416 @@
/**
* Lightbox v2.7.1
* by Lokesh Dhakar - http://lokeshdhakar.com/projects/lightbox2/
*
* @license http://creativecommons.org/licenses/by/2.5/
* - Free for use in both personal and commercial projects
* - Attribution requires leaving author name, author link, and the license info intact
*/

(function() {
// Use local alias
var $ = jQuery;

var LightboxOptions = (function() {
function LightboxOptions() {
this.fadeDuration = 500;
this.fitImagesInViewport = true;
this.resizeDuration = 700;
this.positionFromTop = 50;
this.showImageNumberLabel = true;
this.alwaysShowNavOnTouchDevices = false;
this.wrapAround = false;
}
// Change to localize to non-english language
LightboxOptions.prototype.albumLabel = function(curImageNum, albumSize) {
return "Image " + curImageNum + " of " + albumSize;
};

return LightboxOptions;
})();


var Lightbox = (function() {
function Lightbox(options) {
this.options = options;
this.album = [];
this.currentImageIndex = void 0;
this.init();
}

Lightbox.prototype.init = function() {
this.enable();
this.build();
};

// Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
// that contain 'lightbox'. When these are clicked, start lightbox.
Lightbox.prototype.enable = function() {
var self = this;
$('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
self.start($(event.currentTarget));
return false;
});
$('body').on('click', '*[data-lightbox-label-for]', function(event) {
var lightboxElement = $(event.currentTarget).data('lightboxLabelFor');
self.start($("#" + lightboxElement));
return false;
});
};

// Build html for the lightbox and the overlay.
// Attach event handlers to the new DOM elements. click click click
Lightbox.prototype.build = function() {
var self = this;
$("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div>").appendTo($('body'));
// Cache jQuery objects
this.$lightbox = $('#lightbox');
this.$overlay = $('#lightboxOverlay');
this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
this.$container = this.$lightbox.find('.lb-container');

// Store css values for future lookup
this.containerTopPadding = parseInt(this.$container.css('padding-top'), 10);
this.containerRightPadding = parseInt(this.$container.css('padding-right'), 10);
this.containerBottomPadding = parseInt(this.$container.css('padding-bottom'), 10);
this.containerLeftPadding = parseInt(this.$container.css('padding-left'), 10);
// Attach event handlers to the newly minted DOM elements
this.$overlay.hide().on('click', function() {
self.end();
return false;
});

this.$lightbox.hide().on('click', function(event) {
if ($(event.target).attr('id') === 'lightbox') {
self.end();
}
return false;
});

this.$outerContainer.on('click', function(event) {
if ($(event.target).attr('id') === 'lightbox') {
self.end();
}
return false;
});

this.$lightbox.find('.lb-prev').on('click', function() {
if (self.currentImageIndex === 0) {
self.changeImage(self.album.length - 1);
} else {
self.changeImage(self.currentImageIndex - 1);
}
return false;
});

this.$lightbox.find('.lb-next').on('click', function() {
if (self.currentImageIndex === self.album.length - 1) {
self.changeImage(0);
} else {
self.changeImage(self.currentImageIndex + 1);
}
return false;
});

this.$lightbox.find('.lb-loader, .lb-close').on('click', function() {
self.end();
return false;
});
};

// Show overlay and lightbox. If the image is part of a set, add siblings to album array.
Lightbox.prototype.start = function($link) {
var self = this;
var $window = $(window);

$window.on('resize', $.proxy(this.sizeOverlay, this));

$('select, object, embed').css({
visibility: "hidden"
});

this.sizeOverlay();

this.album = [];
var imageNumber = 0;

function addToAlbum($link) {
self.album.push({
link: $link.attr('href'),
title: $link.attr('data-title') || $link.attr('title')
});
}

// Support both data-lightbox attribute and rel attribute implementations
var dataLightboxValue = $link.attr('data-lightbox');
var $links;

if (dataLightboxValue) {
$links = $($link.prop("tagName") + '[data-lightbox="' + dataLightboxValue + '"]');
for (var i = 0; i < $links.length; i = ++i) {
addToAlbum($($links[i]));
if ($links[i] === $link[0]) {
imageNumber = i;
}
}
} else {
if ($link.attr('rel') === 'lightbox') {
// If image is not part of a set
addToAlbum($link);
} else {
// If image is part of a set
$links = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
for (var j = 0; j < $links.length; j = ++j) {
addToAlbum($($links[j]));
if ($links[j] === $link[0]) {
imageNumber = j;
}
}
}
}
// Position Lightbox
var top = $window.scrollTop() + this.options.positionFromTop;
var left = $window.scrollLeft();
this.$lightbox.css({
top: top + 'px',
left: left + 'px'
}).fadeIn(this.options.fadeDuration);

this.changeImage(imageNumber);
};

// Hide most UI elements in preparation for the animated resizing of the lightbox.
Lightbox.prototype.changeImage = function(imageNumber) {
var self = this;

this.disableKeyboardNav();
var $image = this.$lightbox.find('.lb-image');

this.$overlay.fadeIn(this.options.fadeDuration);

$('.lb-loader').fadeIn('slow');
this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();

this.$outerContainer.addClass('animating');

// When image to show is preloaded, we send the width and height to sizeContainer()
var preloader = new Image();
preloader.onload = function() {
var $preloader, imageHeight, imageWidth, maxImageHeight, maxImageWidth, windowHeight, windowWidth;
$image.attr('src', self.album[imageNumber].link);

$preloader = $(preloader);

$image.width(preloader.width);
$image.height(preloader.height);
if (self.options.fitImagesInViewport) {
// Fit image inside the viewport.
// Take into account the border around the image and an additional 10px gutter on each side.

windowWidth = $(window).width();
windowHeight = $(window).height();
maxImageWidth = windowWidth - self.containerLeftPadding - self.containerRightPadding - 20;
maxImageHeight = windowHeight - self.containerTopPadding - self.containerBottomPadding - 120;

// Is there a fitting issue?
if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
imageWidth = maxImageWidth;
imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
$image.width(imageWidth);
$image.height(imageHeight);
} else {
imageHeight = maxImageHeight;
imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
$image.width(imageWidth);
$image.height(imageHeight);
}
}
}
self.sizeContainer($image.width(), $image.height());
};

preloader.src = this.album[imageNumber].link;
this.currentImageIndex = imageNumber;
};

// Stretch overlay to fit the viewport
Lightbox.prototype.sizeOverlay = function() {
this.$overlay
.width($(window).width())
.height($(document).height());
};

// Animate the size of the lightbox to fit the image we are showing
Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
var self = this;
var oldWidth = this.$outerContainer.outerWidth();
var oldHeight = this.$outerContainer.outerHeight();
var newWidth = imageWidth + this.containerLeftPadding + this.containerRightPadding;
var newHeight = imageHeight + this.containerTopPadding + this.containerBottomPadding;
function postResize() {
self.$lightbox.find('.lb-dataContainer').width(newWidth);
self.$lightbox.find('.lb-prevLink').height(newHeight);
self.$lightbox.find('.lb-nextLink').height(newHeight);
self.showImage();
}

if (oldWidth !== newWidth || oldHeight !== newHeight) {
this.$outerContainer.animate({
width: newWidth,
height: newHeight
}, this.options.resizeDuration, 'swing', function() {
postResize();
});
} else {
postResize();
}
};

// Display the image and it's details and begin preload neighboring images.
Lightbox.prototype.showImage = function() {
this.$lightbox.find('.lb-loader').hide();
this.$lightbox.find('.lb-image').fadeIn('slow');
this.updateNav();
this.updateDetails();
this.preloadNeighboringImages();
this.enableKeyboardNav();
};

// Display previous and next navigation if appropriate.
Lightbox.prototype.updateNav = function() {
// Check to see if the browser supports touch events. If so, we take the conservative approach
// and assume that mouse hover events are not supported and always show prev/next navigation
// arrows in image sets.
var alwaysShowNav = false;
try {
document.createEvent("TouchEvent");
alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices)? true: false;
} catch (e) {}

this.$lightbox.find('.lb-nav').show();

if (this.album.length > 1) {
if (this.options.wrapAround) {
if (alwaysShowNav) {
this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1');
}
this.$lightbox.find('.lb-prev, .lb-next').show();
} else {
if (this.currentImageIndex > 0) {
this.$lightbox.find('.lb-prev').show();
if (alwaysShowNav) {
this.$lightbox.find('.lb-prev').css('opacity', '1');
}
}
if (this.currentImageIndex < this.album.length - 1) {
this.$lightbox.find('.lb-next').show();
if (alwaysShowNav) {
this.$lightbox.find('.lb-next').css('opacity', '1');
}
}
}
}
};

// Display caption, image number, and closing button.
Lightbox.prototype.updateDetails = function() {
var self = this;

// Enable anchor clicks in the injected caption html.
// Thanks Nate Wright for the fix. @https://github.com/NateWr
if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
this.$lightbox.find('.lb-caption')
.html(this.album[this.currentImageIndex].title)
.fadeIn('fast')
.find('a').on('click', function(event){
location.href = $(this).attr('href');
});
}
if (this.album.length > 1 && this.options.showImageNumberLabel) {
this.$lightbox.find('.lb-number').text(this.options.albumLabel(this.currentImageIndex + 1, this.album.length)).fadeIn('fast');
} else {
this.$lightbox.find('.lb-number').hide();
}
this.$outerContainer.removeClass('animating');
this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function() {
return self.sizeOverlay();
});
};

// Preload previous and next images in set.
Lightbox.prototype.preloadNeighboringImages = function() {
if (this.album.length > this.currentImageIndex + 1) {
var preloadNext = new Image();
preloadNext.src = this.album[this.currentImageIndex + 1].link;
}
if (this.currentImageIndex > 0) {
var preloadPrev = new Image();
preloadPrev.src = this.album[this.currentImageIndex - 1].link;
}
};

Lightbox.prototype.enableKeyboardNav = function() {
$(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
};

Lightbox.prototype.disableKeyboardNav = function() {
$(document).off('.keyboard');
};

Lightbox.prototype.keyboardAction = function(event) {
var KEYCODE_ESC = 27;
var KEYCODE_LEFTARROW = 37;
var KEYCODE_RIGHTARROW = 39;

var keycode = event.keyCode;
var key = String.fromCharCode(keycode).toLowerCase();
if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
this.end();
} else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
if (this.currentImageIndex !== 0) {
this.changeImage(this.currentImageIndex - 1);
} else if (this.options.wrapAround && this.album.length > 1) {
this.changeImage(this.album.length - 1);
}
} else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
if (this.currentImageIndex !== this.album.length - 1) {
this.changeImage(this.currentImageIndex + 1);
} else if (this.options.wrapAround && this.album.length > 1) {
this.changeImage(0);
}
}
};

// Closing time. :-(
Lightbox.prototype.end = function() {
this.disableKeyboardNav();
$(window).off("resize", this.sizeOverlay);
this.$lightbox.fadeOut(this.options.fadeDuration);
this.$overlay.fadeOut(this.options.fadeDuration);
$('select, object, embed').css({
visibility: "visible"
});
};

return Lightbox;

})();

$(function() {
var options = new LightboxOptions();
var lightbox = new Lightbox(options);
});

}).call(this);

+ 97
- 0
source/javascripts/main.js View File

@@ -0,0 +1,97 @@
/**
* Main JS file for Casper behaviours
*/

/*globals jQuery, document */
(function ($) {
"use strict";

$(document).ready(function(){
// move main image to header
if(
$('.post-template').length > 0 ||
$('.page-template').length > 0
) {
var featured_image = $('img[alt="featured-image"]');
var featured_video = $('.post__content iframe:first-child')
// check if the featured image exists
if(featured_image && featured_image.length > 0) {
// create container for the image
featured_image.appendTo($('.post__media'));
} else if(featured_video && featured_video.length > 0) {
featured_video.appendTo($('.post__media'));
}
}

if(
$(document.body).hasClass('home-template') ||
$(document.body).hasClass('archive-template') ||
$(document.body).hasClass('tag-template')
) {
// get the post images
var blocks = [];
$('.post__wrapper_helper--notloaded').each(function(i, block) {
blocks.push(block);
});
var add_class = function(block, class_name, delay) {
setTimeout(function() {
$(block).addClass(class_name);
}, delay);
};
for(var i = 0; i < blocks.length; i++) {
add_class(blocks[i], 'post__wrapper_helper--animated', i * 200);
}
$('.post__wrapper_helper--notloaded').each(function(i, wrapper) {
wrapper = $(wrapper);
var img = wrapper.find('p > img')[0];
if(img) {
// wait for the images
var timer = setInterval(function() {
// when the image is laoded
if(img.complete) {
// stop periodical calls
clearInterval(timer);
// generate the image wrapper
var src = $(img).attr('src');
img.remove();
var img_container = $('<div class="post__image el__transition_long" style="background-image: url(\''+src+'\')"></div>');
img_container.appendTo(wrapper);
wrapper.removeClass('post__wrapper_helper--notloaded');
// add class with delay
setTimeout(function() {
img_container.addClass('post__image--loaded');
}, 250);
}
}, 500);
// add necessary mouse events
wrapper.mouseenter(function() {
wrapper.addClass('post__wrapper_helper--hover');
});

wrapper.mouseleave(function() {
wrapper.removeClass('post__wrapper_helper--hover');
});
} else {
// where there is no image - display the text directly
wrapper.addClass('post__wrapper_helper--hover');
}
});
}
// fit videos
$(".post-header").fitVids();
$(".post-content").fitVids();
// menu behaviour
var main_menu = $(".menu");
main_menu.click(function() {
if(main_menu.hasClass("menu--open")) {
main_menu.removeClass("menu--open");
} else {
main_menu.addClass("menu--open");
}
});
});
}(jQuery));

+ 69
- 0
source/layouts/layout.erb View File

@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title><%= current_page.data.title || "Drawings by Esteban Manchado" %></title>
<meta name="description" content="" />

<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta property="og:type" content="article">
<meta property="og:title" content="Drawings">
<meta property="og:description" content="">

<link rel="shortcut icon" href="/favicon.ico">

<%= stylesheet_link_tag "normalize", "main", "open-sans", "lightbox" %>

<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<meta name="generator" content="Middleman 3.3.3" />
<link rel="alternate" type="application/rss+xml" title="Drawings" href="/rss/">
<link rel="canonical" href="https://drawings.hcoder.org/" />
</head>
<body class="home-template">
<header class="logo">
<h1 class="logo__title">
<a href="https://drawings.hcoder.org" class="logo__link">Drawings</a>
</h1>
</header>

<main role="main" class=" default-bg">
<div class="main__wrapper">
<nav class="menu">
<div class="menu__wrap">
<a href="/" class="menu__item menu__item--active">Index</a>
<a href="/about" class="menu__item">About</a>
</div>
</nav>

<%= yield %>

</div>
</main>

<footer class="footer">
<div class="footer__copyrights">
<p class="footer__text footer__copyright-text">All content copyright <a href="https://drawings.hcoder.org/">Esteban Manchado Velázquez</a> &copy; 2014 &bull; All rights reserved. Designed by <a href="http://www.gavick.com">GavickPro</a></p>
<p class="footer__text footer__powered-by">Proudly published with <a class="footer__ghost-icon" href="http://middlemanapp.com">Middleman</a></p>
</div>
</footer>


<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "jquery.fitvids" %>
<%= javascript_include_tag "lightbox" %>
<%= javascript_include_tag "main" %>

</body>
</html>

+ 210
- 0
source/stylesheets/lightbox.css View File

@@ -0,0 +1,210 @@
/* Preload images */
body:after {
content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
display: none;
}

.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
display: none;
}

.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}

.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}

.lightbox a img {
border: none;
}

.lb-outerContainer {
position: relative;
background-color: white;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}

.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}

.lb-container {
padding: 4px;
}

.lb-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}

.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../img/loading.gif) no-repeat;
}

.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}

.lb-container > .nav {
left: 0;
}

.lb-nav a {
outline: none;
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
height: 100%;
cursor: pointer;
display: block;
}

.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../img/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}

.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../img/next.png) right 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}

.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}

.lb-data {
padding: 0 4px;
color: #ccc;
}

.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em;
}

.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
}

.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999999;
}

.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../img/close.png) top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}

+ 726
- 0
source/stylesheets/main.css View File

@@ -0,0 +1,726 @@
/*---------------------------------

Portfolio Ghost Theme by GavickPro
05-06-2014
v.1.0.0

- - - - - - - - - - - - - - - - - -

1. Basic Elements
1.1 Fonts
2. Page elements
2.1 Logo
2.2 Menu
2.3 Footer
2.4 Pagination
3. Post items
4. Typography
5. RWD

----------------------------------*/

/*---------------------------------
1. Basic elements
----------------------------------*/
html {
font-size: 62.5%;
-webkit-font-smoothing: subpixel-antialiased;
}
body {
background: #fff;
color: #777;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.8;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
a {
color: #5cc1a9;
text-decoration: none;
}
a:active,
a:focus,
a:hover { color: #363636; }
img { max-width: 100%; }
h1,
h2,
h3,
h4,
h5,
h6 {
color: #363636;
font-weight: 500;
}
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
iframe {
border: none;
}

/* Transitions */
a,
.el__transition,
.social__icon:before {
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.el__transition_long {
-webkit-transition: all .75s ease-out;
-moz-transition: all .75s ease-out;
-ms-transition: all .75s ease-out;
transition: all .75s ease-out;
}

/* Containers */
main {
background-color: #f1f1f1;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
}

.main__wrapper {
margin: 0 auto;
max-width: 1260px;
padding: 60px 0;
width: 100%;
}

.main__wrapper:after {
clear: both;
content: "";
display: table;
}

.main__header {
font-size: 16px;
font-weight: normal;
text-align: center;
}

.main__header--tagname {
font-weight: bold;
}

/*---------------------------------
1.1 Fonts
----------------------------------*/
@font-face {
font-family: "portfolio-pixellove";
src: url("../fonts/portfolio-pixellove/portfolio-pixellove.eot");
src: url("../fonts/portfolio-pixellove/portfolio-pixellove.svg#portfolio-pixellove") format("svg"), url("../fonts/portfolio-pixellove/portfolio-pixellove.ttf") format("truetype"), url("../fonts/portfolio-pixellove/portfolio-pixellove.eot?#iefix") format("embedded-opentype"), url("../fonts/portfolio-pixellove/portfolio-pixellove.woff") format("woff");
font-weight: normal;
font-style: normal;
}

/*---------------------------------
2.1 Logo
----------------------------------*/
.logo {
background: #fff;
color: #000;
height: 64px;
text-align: center;
}
.logo__image {

}
.logo__title {
font-size: 16px;
font-weight: 700;
line-height: 64px;
margin: 0;
text-transform: uppercase;
}
.logo__desc {
color: #999;
font-size: 10px;
font-weight: 300;
line-height: 10px;
margin-top: -20px;
}
.logo__link {
color: #000;
}
.logo__link:active,
.logo__link:focus,
.logo__link:hover {
color: #5cc1a9;
}

/*---------------------------------
2.2 Menu
----------------------------------*/

.menu {
padding: 0 0 42px 0;
text-align: center;
}

.menu__item {
border: 1px solid transparent;
color: #777;
display: inline-block;
font-size: 14px;
font-weight: 400;
line-height: 34px;
padding: 0 20px;
}

.menu__item:active,
.menu__item:focus,
.menu__item:hover {
color: #5cc1a9;
}

.menu__item--active {
border-color: #5cc1a9;
border-radius: 2px;
color: #5cc1a9;
}

/*---------------------------------
2.3 Footer
----------------------------------*/

.footer {
color: #999;
font-size: 12px;
font-weight: 400;
margin: 0 auto;
max-width: 1100px;
padding: 72px 0;
text-align: center;
width: 100%;
}

.footer__text {
margin: 0;
}

.social {
margin: 50px 0;
}

.social--footer {
margin: 0 0 32px 0;
}

.social--share {
text-align: center;
}

.social__label {
font-size: 12px;
line-height: 1;
padding: 0 8px 0 0;
position: relative;
top: -8px;
}

.social__icon {
display: inline-block;
height: 24px;
margin: 0 4px;
overflow: hidden;
width: 22px;
}

.social__icon:hover:before {
color: #5cc1a9;
}

.social__icon:before {
color: #ccc;
font-family: 'portfolio-pixellove';
font-size: 22px;
line-height: 24px;
}
.social__icon--gplus:before { content: "c"; }
.social__icon--fb:before { content: "a"; }
.social__icon--twitter:before { content: "f"; }
.social__icon--pinterest:before { content: "d"; }
.social__icon--youtube:before { content: "g"; }
.social__icon--rss:before { content: "e"; }

/*---------------------------------
2.4 Pagination
----------------------------------*/

.pagination {
margin: 40px 0 0 0;
padding: 0 0 40px 0;
}
.pagination__wrap {
text-align: center;
}
.pagination__item {
color: #999;
display: inline-block;
font-size: 14px;
font-style: italic;
}
.pagination__item--link:active,
.pagination__item--link:focus,
.pagination__item--link:hover {
color: #5cc1a9;
}
.pagination__item--older {
padding: 0 25px 0 0;
}
.pagination__item--older:after,
.pagination__item--newer:before {
border-left: 1px solid #d5d5d5;
content: "";
display: inline-block;
left: -25px;
height: 18px;
position: relative;
top: 3px;
width: 1px;
}
.pagination__item--older:after {
left: auto;
right: -25px;
}
.pagination__item--counter {
padding: 0 20px;
}
.pagination__item--newer {
padding: 0 0 0 25px;
}

/*---------------------------------
3. Post items
----------------------------------*/

.post__wrapper {
float: left;
height: 416px;
overflow: hidden;
padding: 18px 10px;
-webkit-perspective: 500;
-moz-perspective: 500;
-ms-perspective: 500;
perspective: 500;
}

.post__wrapper--subpage {
background: #fff;
-webkit-box-shadow: 0 0 13px rgba(0, 0, 0, .07);
-moz-box-shadow: 0 0 13px rgba(0, 0, 0, .07);
-ms-box-shadow: 0 0 13px rgba(0, 0, 0, .07);
box-shadow: 0 0 13px rgba(0, 0, 0, .07);
margin: 0 auto;
padding: 72px 72px 20px 72px;
width: 700px;
}

.post__wrapper[data-cols="2"] { width: 50%; }
.post__wrapper[data-cols="3"] { width: 33.333333%; }
.post__wrapper[data-cols="4"] { width: 25%; }

.post__wrapper_helper {
background: #fff;
-webkit-box-shadow: 0 0 13px rgba(0, 0, 0, .07);
-moz-box-shadow: 0 0 13px rgba(0, 0, 0, .07);
-ms-box-shadow: 0 0 13px rgba(0, 0, 0, .07);
box-shadow: 0 0 13px rgba(0, 0, 0, .07);
height: 380px;
overflow: hidden;
opacity: 0;
position: relative;
-webkit-transform: rotateY(89deg);
-moz-transform: rotateY(89deg);
-ms-transform: rotateY(89deg);
-o-transform: rotateY(89deg);
transform: rotateY(89deg);
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
transition: all .5s ease-out;
}

.post__wrapper_helper--animated {
opacity: 1;
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}

.post__wrapper_helper--notloaded {
background: #f5f5f5 url('../images/loader.gif') no-repeat center center;
}

.post__image {
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}

.post__image--loaded {
opacity: 1;
}

.post__preview {
background: #fff;
height: 100%;
width: 100%;
padding: 56px 36px 36px 36px;
position: absolute;
top: 100%;
z-index: 1;
}

.post__wrapper_helper--hover .post__preview {
top: 0;
}

.post__wrapper_helper--notloaded img {
opacity: 0;
}

.post__header {
padding: 0 0 24px 0;
}

.post__title {
color: #333;
font-size: 16px;
line-height: 1.6;
margin: 0;
}

.post__title--subpage {
font-size: 32px;
font-weight: normal;
line-height: 1.2;
margin: 50px 0 5px 0;
}

.post__title_link {
color: #333;
}

.post__link:active,
.post__link:focus,
.post__link:hover {
color: #5cc1a9;
}

.post__date {
color: #b5b5b5;
font-size: 12px;
}

.post__media {
margin: -72px -72px 20px -72px;
}

.post__excerpt {
color: #777;
font-size: 13px;
margin: 0;
}

.post__readmore {
color: #777;
}

.post__meta {
background: #fff;
border-top: 1px solid #fff;
bottom: 0;
color: #b5b5b5;
font-size: 11px;
height: 68px;
padding: 0 30px 0 76px;
position: absolute;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
width: 100%;
z-index: 2;
}

.post__wrapper_helper--hover .post__meta {
border-top-color: #e5e5e5;
}

.post__meta:before {
bottom: 0;
color: #5cc1a9;
content: "i";
display: block;
font-size: 24px;
font-family: portfolio-pixellove;
height: 70px;
left: 0;
line-height: 80px;
position: absolute;
text-align: right;
width: 60px;
}

.post__tags {
list-style-type: none;
margin: 0;
padding: 0;
}

.post__meta--subpage {
list-style-type: none;
margin: 0 0 -10px 0;
overflow: hidden;
padding: 0 0 0 50px;
position: relative;
}

.post__meta--subpage:before {
left: -10px;
width: 40px;
}

.post__meta--subpage:after {
border-top: 1px solid #e5e5e5;
content: "";
display: block;
margin: 0 -100px;
}

.post__tag {
float: left;
line-height: 68px;
padding-right: 4px;
}

.post__tag_link {
color: #b5b5b5;
font-weight: 500;
}

.post__comments {
margin: 32px auto;
width: 700px;
}

/* Author block */
.author {
background: #fff;
-webkit-box-shadow: 0 0 13px rgba(0, 0, 0, .07);
-moz-box-shadow: 0 0 13px rgba(0, 0, 0, .07);
-ms-box-shadow: 0 0 13px rgba(0, 0, 0, .07);
box-shadow: 0 0 13px rgba(0, 0, 0, .07);
margin: 0 auto;
padding: 72px 72px 20px 72px;
width: 700px;
}

.author {
margin: 42px auto;
padding: 32px 72px;
}

.author__avatar {
float: left;
margin: 0 60px 0 0;
}

.author__name {
font-weight: normal;
margin: -14px 0 0 0;
}

.author__bio {
font-size: 12px;
margin: 10px 0 0 0;
}

/*---------------------------------
4. Typography
----------------------------------*/

blockquote {
border-left: 4px solid #59c0ab;
background: #fdfbec;
font-size: 12px;
font-weight: 500;
line-height: 2;
margin: 30px 0;
padding: 15px 30px 15px 45px;
}

blockquote p {
margin: 0;
}

code {
background: #fdfbec;
padding: 3px;
}

ul {
line-height: 2;
padding-left: 20px;
}

/*---------------------------------
5. RWD
----------------------------------*/

@media (max-width: 1140px) {
.main__wrapper {
padding: 40px 0;
}
.post__wrapper {
height: 336px;
}
.post__wrapper_helper {
height: 320px;
}
.post__preview {
padding: 20px 16px 36px 16px;
}
.pagination {
margin: 10px 0 0 0;
}
}

@media (max-width: 900px) {
.post__wrapper[data-cols="3"],
.post__wrapper[data-cols="4"] {
width: 50%;
}
.author,
.post__comments,
.post__wrapper--subpage {
max-width: 95%;
}
}

@media (max-width: 700px) {
.menu {
padding: 0 0 30px 0;
position: relative;
}

.menu:before {
content: "≡ Menu";
cursor: pointer;
font-family: Arial, sans-serif;
font-weight: bold;
}

.menu__wrap {
background: #fff;
border-radius: 2px;
left: -9999px;
position: absolute;
width: 300px;
}

.menu__item {
border-top: 1px solid #e5e5e5;
width: 100%;
}

.menu__item--active {
background: #5cc1a9;
border-color: #5cc1a9;
color: #fff;
}

.menu__item--active:active,
.menu__item--active:focus,
.menu__item--active:hover {
color: #fff;
}

.menu__item--active + .menu__item {
border-top: none;
}

.menu--open .menu__wrap {
float: none;
margin: 20px auto;
position: static;
}
.post__wrapper--subpage {
padding: 72px 36px 20px 36px;
}
.post__media {
margin: -72px -36px 20px -36px;
}
.post__title--subpage {
font-size: 26px;
}
.author {
padding: 32px 36px;
}
.author__avatar {
margin: 0 20px 0 0;
}
.author__name {
font-size: 18px;
}
.pagination__item {
font-size: 12px;
}
.pagination__item--older {
padding: 0 12px 0 0;
}
.pagination__item--newer {
padding: 0 0 0 12px;
}
.pagination__item--counter {
padding: 0 8px;
}
.pagination__item--older:after {
right: -12px;
}
.pagination__item--newer:after {
left: -12px;
}
}

@media (max-width: 480px) {
body {
font-size: 14px;
}
.menu:before {
font-size: 16px;
}
.post__wrapper[data-cols="2"],
.post__wrapper[data-cols="3"],
.post__wrapper[data-cols="4"] {
width: 100%;
}
}

+ 337
- 0
source/stylesheets/normalize.css View File

@@ -0,0 +1,337 @@
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */

/* ==========================================================================
HTML5 display definitions
========================================================================== */

/**
* Correct `block` display not defined in IE 8/9.
*/

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary { display: block; }
/**
* Correct `inline-block` display not defined in IE 8/9.
*/

audio,
canvas,
video { display: inline-block; }
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/

audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9.
* Hide the `template` element in IE, Safari, and Firefox < 22.
*/

[hidden],
template { display: none; }
/* ==========================================================================
Base
========================================================================== */

/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/

html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/

body { margin: 0; }
/* ==========================================================================
Links
========================================================================== */

/**
* Remove the gray background color from active links in IE 10.
*/

a { background: transparent; }
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/

a:focus { outline: thin dotted; }
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/

a:active,
a:hover { outline: 0; }
/* ==========================================================================
Typography
========================================================================== */

/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari 5, and Chrome.
*/

h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9, Safari 5, and Chrome.
*/

abbr[title] { border-bottom: 1px dotted; }
p { margin: 1em 0 2em }
/**
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/

b,
strong { font-weight: bold; }
/**
* Address styling not present in Safari 5 and Chrome.
*/

dfn { font-style: italic; }
/**
* Address differences between Firefox and other browsers.
*/

hr {
border: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 6rem;
position: relative;
}
blockquote { position: relative; }
/**
* Address styling not present in IE 8/9.
*/

mark {
background: #ff0;
color: #000;
}
/**
* Correct font family set oddly in Safari 5 and Chrome.
*/

code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/**
* Improve readability of pre-formatted text in all browsers.
*/

pre {
background: #F6F7F9;
border-left: 4px solid #DA6426;
margin: 1em 0 2em;
padding: 2rem 0 2rem 6rem;
white-space: pre-wrap;
}
/**
* Set consistent quote types.
*/

q { quotes: "\201C" "\201D" "\2018" "\2019"; }
/**
* Address inconsistent and variable font size in all browsers.
*/

small { font-size: 80%; }
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* ==========================================================================
Embedded content
========================================================================== */

/**
* Remove border when inside `a` element in IE 8/9.
*/

img { border: 0; }
/**
* Correct overflow displayed oddly in IE 9.
*/

svg:not(:root) { overflow: hidden; }
/* ==========================================================================
Figures
========================================================================== */

/**
* Address margin not present in IE 8/9 and Safari 5.
*/

figure { margin: 0; }
/* ==========================================================================
Forms
========================================================================== */

/**
* Define consistent border, margin, and padding.
*/

fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/