m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-13 16:45:14 +01:00
Code

more universal strategy for post specific style sheets

Browse Source
This commit is contained in:
Matthias Kretschmann 2015-08-23 21:21:30 +02:00
parent f07bfc4f53
commit b8949549a8
3 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
_src/_assets/styl/poststyle-2300.styl → _src/_assets/styl/post-kbd.styl
View File

8
_src/_posts/2012-07-16-using-kbd-for-fun-and-profit.md
View File

@ -3,7 +3,7 @@ layout: post
title: Using <kbd> for fun and profit
image: kremalicious-kbdfun-teaser.png
style: poststyle-2300.min.css
style: post-kbd.min.css
author: Matthias Kretschmann
featured: true
@ -32,7 +32,7 @@ They are completely styled with CSS3 so they're sharp on all screens no matter h
### CSS
Just drop in the kbdftw.css in your `head`:
Just drop in the `kbdftw.css` in your `head`:
```html
<link rel="stylesheet" href="kbdfun.css">
@ -47,9 +47,9 @@ You also need to add all the Roboto font files from assets/fonts to your project
### LESS
There're some variables in the kbdfun.less file you can customize.
There're some variables in the `kbdfun.less` file you can customize.
For the Android style, there's roboto.less as include at the end. But the font files won't load unless you uncomment the .font-roboto line in kbdftw.less. This is to make sure, users won't download all the font files if you don't use the Android style.
For the Android style, there's `roboto.less` as include at the end. But the font files won't load unless you uncomment the `.font-roboto` line in kbdftw.less. This is to make sure, users won't download all the font files if you don't use the Android style.
### Markup

2
gulpfile.js
View File

@ -135,7 +135,7 @@ gulp.task('jekyll:production', function(cb) {
gulp.task('css', function() {
return gulp.src([
src + '/_assets/styl/kremalicious3.styl',
src + '/_assets/styl/poststyle-2300.styl'
src + '/_assets/styl/post-*.styl'
])
.pipe($.stylus({ 'include css': true })).on('error', onError)
.pipe($.autoprefixer({ browsers: 'last 2 versions' })).on('error', onError)