m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-22 01:46:51 +01:00
Code

picturefill, imagemin refinements

Browse Source
This commit is contained in:
Matthias Kretschmann 2013-11-22 00:35:07 +01:00
parent e1cf277e3e
commit 9fb0040d8b
6 changed files with 43 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
Gruntfile.js
View File

@ -122,6 +122,16 @@ module.exports = function(grunt){
}
]
},
media: {
files: [
{
expand: true,
cwd: '<%= config.site %>/media/',
src: ['**/*.{png,jpg,jpeg,gif}'],
dest: '<%= config.site %>/media/'
}
]
},
touchicons: {
files: [
{
@ -166,7 +176,7 @@ module.exports = function(grunt){
'<%= config.src %>/_layouts/**',
'<%= config.src %>/_posts/**'
],
tasks: ['jekyll', 'less']
tasks: ['jekyll', 'less', 'uglify']
},
},
@ -219,6 +229,11 @@ module.exports = function(grunt){
'imagemin'
]);
// Imagemin only task
grunt.registerTask('imagemin', [
'imagemin'
]);
// Production build
grunt.registerTask('build', [
'clean',

4
_src/_includes/head.html
View File

@ -22,7 +22,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" href="/assets/css/kremalicious3.min.css">
@ -33,7 +33,7 @@
<script data-cfasync="false" src="//use.typekit.com/msu4qap.js"></script>
<script data-cfasync="false">try{Typekit.load();}catch(e){}</script>
<script src="/assets/js/kremalicious3.min.js"></script>
<script src="/assets/js/kremalicious3.min.js" defer async></script>
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary">

14
_src/_layouts/image.html
View File

@ -6,8 +6,18 @@ layout: base
<div class="photoPost">
<figure class="hmedia">
<img src="/media/{{ page.image }}" />
<span data-picture data-alt="{{ page.title }}">
<span data-src="/media/320/{{ page.image }}"></span>
<span data-src="/media/640/{{ page.image }}" data-media="(min-device-pixel-ratio: 1.5)"></span>
<span data-src="/media/640/{{ page.image }}" data-media="(min-width: 500px)"></span>
<span data-src="/media/1280/{{ page.image }}" data-media="(min-width: 640px) and (min-device-pixel-ratio: 2.0)"></span>
<noscript>
<img src="/media/{{ page.image }}">
</noscript>
</span>
<figcaption class="entry-title fn">{{ page.title }}</figcaption>
exif
</figure>

11
_src/_layouts/post.html
View File

@ -9,7 +9,16 @@ layout: base
<section class="entry-content">
{% if page.image %}
<img class="teaser" src="/media/{{ page.image }}" />
<span class="teaser" data-picture data-alt="">
<span data-src="/media/320/{{ post.image }}"></span>
<span data-src="/media/640/{{ post.image }}" data-media="(min-device-pixel-ratio: 1.5)"></span>
<span data-src="/media/640/{{ post.image }}" data-media="(min-width: 500px)"></span>
<span data-src="/media/1280/{{ post.image }}" data-media="(min-width: 640px) and (min-device-pixel-ratio: 2.0)"></span>
<noscript>
<img src="/media/{{ post.image }}">
</noscript>
</span>
{% endif %}
{{ content }}

2
_src/_posts/2011-12-15-badged.markdown
View File

@ -2,7 +2,7 @@
layout: post
title: Badged - iOS Style Notification Badges for WordPress
image: Badged-Teaser-kremalicious.png
image: Badged-Teaser-kremalicious@2x.png
author: Matthias Kretschmann
moddate: 2013-11-10 07:56:46+00:00

4
_src/index.html
View File

@ -38,7 +38,7 @@ description: 'Blog of designer & developer Matthias Kretschmann'
<span data-src="/media/1280/{{ post.image }}" data-media="(min-width: 640px) and (min-device-pixel-ratio: 2.0)"></span>
<noscript>
<img src="small.jpg">
<img src="/media/{{ post.image }}">
</noscript>
</span>
@ -67,7 +67,7 @@ description: 'Blog of designer & developer Matthias Kretschmann'
<span data-src="/media/1280/{{ post.image }}" data-media="(min-width: 640px) and (min-device-pixel-ratio: 2.0)"></span>
<noscript>
<img src="small.jpg">
<img src="/media/{{ post.image }}">
</noscript>
</span>
</a>