1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-14 09:05:17 +01:00
This commit is contained in:
Matthias Kretschmann 2015-06-22 21:28:31 +02:00
parent 496a83a574
commit 38da7ae3de
33 changed files with 161 additions and 100 deletions

View File

@ -1,16 +1,17 @@
# A sample Gemfile
source "https://rubygems.org"
group :development do
group :jekyll do
gem 'jekyll'
gem 'jekyll-sitemap'
gem 'jekyll-redirect-from'
gem 'jekyll-picture-tag'
gem 'jekyll-archives'
end
group :development do
gem 'rouge'
gem 'mini_magick'
gem 'fileutils'
gem 'rb-gsl'
end

View File

@ -17,7 +17,7 @@ button
transition: none
text-shadow: none
.btn
.btn,
a.btn
@extend .textcenter
display: inline-block
@ -179,3 +179,44 @@ a.btn-primary
color: #fff
cursor: pointer
outline: 0
// some helper classes for old content
/////////////////////////////////////
.content-download
@extend .clearfix
a
@extend .btn
padding-left: 15px
padding-right: 15px
display: block
span
font-size: $font-size-mini
color: $text-color-light
.icon-download,
.icon-heart,
.icon-wordpress,
.icon-github,
.icon-eye
&:before
content: ""
width: 18px
height: 18px
display: inline-block
margin-right: 5px
margin-bottom: -3px
opacity: .35
background: url('/assets/img/entypo-arrow-with-circle-down.svg') no-repeat left center
.icon-heart:before
background-image: url('/assets/img/entypo-heart.svg')
.icon-github:before
background-image: url('/assets/img/entypo-github.svg')
.icon-eye:before
background-image: url('/assets/img/entypo-eye.svg')

View File

@ -19,3 +19,7 @@
@extend .alignright
.icon
fill: $link-color
width: 18px
&:hover .icon
fill: $link-color-hover

View File

@ -20,6 +20,11 @@
.page-photos &
margin-bottom: ($line-height-computed*4)
.hash
@extend .h3
color: darken($page-bg, 15%)
margin-right: 5px
.hentry
@extend .divider-bottom
padding: ($line-height-computed*2) 0

View File

@ -21,14 +21,3 @@ svg
// Fix jQuery bug: http://bugs.jquery.com/ticket/11352
use
pointer-events: none
//
// some helper classes for old content
//
// .btn.icon-download
// &:before
// content: ""
// width: 20px
// height: 20px
// display: inline-block
// background: url('/assets/img/entypo-arrow-with-circle-down.svg') no-repeat center center

View File

@ -20,9 +20,9 @@
@import 'scaffolding'
@import 'typography'
@import 'grid'
@import 'icons'
@import 'forms'
@import 'buttons'
@import 'icons'
@import 'media'
@import 'tables'
@import 'code'

View File

@ -34,6 +34,7 @@
/////////////////////////////////////
.nav-main
@extend .clearfix
.menu-btn
margin-right: -.5em
padding: .5em .7em
@ -88,16 +89,24 @@
.icon
margin-bottom: -3px
.paginator-next,
.paginator-previous,
.paginator-pages
width: 32.7%
display: inline-block
clear: none
.paginator-next
@extend .alignright
text-align: right
.paginator-previous
@extend .alignleft
.paginator-pages
@extend .textcenter, .dimmed
font-size: $font-size-small
.paginator-number
font-size: $font-size-small
color: $brand-grey-light
font-size: $font-size-base
color: $text-color-light
padding: 0 2px
.paginator-title
@extend .h3, .heading-band

View File

@ -29,6 +29,8 @@
.intro-1,
.intro-2
@extend .divider-bottom
color: $text-color-light
@media $breakpoint2
max-width: 60%
margin-left: auto
@ -36,9 +38,6 @@
.intro-1
@extend .h3
color: $text-color-light
.intro-2
font-size: $font-size-large
letter-spacing: .01em
color: $text-color-dimmed

View File

@ -210,7 +210,7 @@ blockquote > p
color: lighten($text-color, 15%)
blockquote
padding: 0 40px
padding-left: 40px
margin: 0 0 $line-height-computed
position: relative

View File

@ -43,12 +43,7 @@
<use xlink:href="/assets/img/sprite.svg#entypo-github"></use>
</svg>
View source
</a> &brvbar; Hosted by <a href="http://www.mediatemple.net#a_aid=4f37f8fe3e47e" title="Media Temple">(mt)</a></p>
<p class="license">
Posts &amp; goodies: <a rel="item-license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA</a> &brvbar;
Photos &amp; images: &copy; Copyright &brvbar;
Code: <a rel="item-license" href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>
</a>
</p>
</section>

View File

@ -2,7 +2,7 @@
<nav class="row paginator">
<p class="paginator-previous col2">
<p class="paginator-previous">
{% if paginator.previous_page %}
<a
{% if page.category %}
@ -27,12 +27,11 @@
{% endif %}
</p>
<p class="col2 pagenumber textcenter">
<span class="paginator-number ">Page {{ paginator.page }} of {{ paginator.total_pages }}</span>
<p class="paginator-pages">
<span class="paginator-number">{{ paginator.page }}</span> of <span class="paginator-number">{{ paginator.total_pages }}</span>
</p>
<p class="paginator-next col2">
<p class="paginator-next">
{% if paginator.next_page %}
<a
{% if page.category %}

View File

@ -6,6 +6,8 @@ layout: base
{% if page.type == 'category' %}
<h1 class="page-title">{{ page.title }}</h1>
{% elsif page.type == 'tag' %}
<h1 class="page-title"><span class="hash">#</span>{{ page.title }}</h1>
{% else %}
<h1 class="page-title">{{ page.type }} archive for {{ page.title }}</h1>
{% endif %}

View File

@ -8,8 +8,8 @@ author: Matthias Kretschmann
date: 2008-04-04 01:55:54+00:00
wordpress_id: 21
categories:
- goodies
category: goodies
tags:
- icon
@ -27,6 +27,8 @@ These icons are free for your personal use and include icons for all file types
Get them from [the goodies-page](http://www.kremalicious.com/goodies/) and have fun.
<a class="btn btn-block icon icon-download" href="/media/aperturefiletypes_by_kremalicious.zip">Download</a>
<p class="content-download">
<a class="icon-download" href="/media/aperturefiletypes_by_kremalicious.zip">Download</a>
</p>
And don't forget to read my article about [how to change the generic image icons in Mac OS X Leopard](http://www.kremalicious.com/2008/04/changing-the-image-icons-in-mac-os-x-leopard/).

View File

@ -4,16 +4,11 @@ layout: link
title: 9 Lesser Known Safari Features
linkurl: http://www.danielmiessler.com/blog/9-lesser-known-safari-features-worth-switching-for
author: Matthias Kretschmann
category: design
date: 2008-04-06 21:21:22+00:00
wordpress_id: 29
categories:
- design
post_format:
- Link
---
Cool stuff, like the Inline Dictionary:
> Safari, being a Cocoa app (OS X), allows us to instantly define words we find. Simply highlight the word and hit the ctrl-cmd-d shortcut. So if I highlight the word functionality in Safari and hit the shortcut, heres what I get.
![image](http://dmiessler.com/wp-content/uploaded_content/2008/03/inline-dictionary.png)
> Safari, being a Cocoa app (OS X), allows us to instantly define words we find. Simply highlight the word and hit the ctrl-cmd-d shortcut.

View File

@ -20,6 +20,8 @@ I have added my first wallpaper to the Goodies section on this website. It's a s
You can get the wallpaper by browsing [my Goodies section](http://www.kremalicious.com/goodies/) and clicking on the download link for the wallpaper. The download package also includes a custom folder icon (512px as .icns, .png, .ico) with the Chives wallpaper on it.
<a class="btn btn-block icon icon-download" href="/media/chives_by_kremalicious.zip">Download Chives Wallpaper</a>
<p class="content-download">
<a class="icon-download" href="/media/chives_by_kremalicious.zip">Download Chives Wallpaper</a>
</p>
Beside that, this image is [available for print on deviantArt in various sizes](http://www.deviantart.com/print/3347544/).

View File

@ -94,7 +94,9 @@ Brief description of Daguerres role in the invention of photography process by T
This icon package was exclusively announced first on [MacThemes](http://macthemes2.net) and you can download it from the [Goodies section on this website](http://www.kremalicious.com/goodies/) or directly via this link:
<a class="btn btn-block icon icon-download" href="/media/niepces_camera_obscura_by_kremalicious.zip">Download </a>
<p class="content-download">
<a class="btn icon-download" href="/media/niepces_camera_obscura_by_kremalicious.zip">Download</a>
</p>
In addition to these icons you can download the [associated wallpapers for your desktop or your iPhone](http://www.kremalicious.com/2008/06/new-goodie-niepces-camera-obscura-wallpaper-pack/).
@ -114,4 +116,4 @@ These desktop icons are free for you personal and non-commercial use. All other
<a href="http://krlc.us/givecoffee">![Oh no!](/media/coffee-cup-empty.png)</a>
Congratulations! You finally arrived at the end of my article. There's a good chance that your coffee or tea cup is now empty. But before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-](http://www.kremalicious.com/feed/) or <a href="http://krlc.us/givecoffee">buy me my next coffee</a>.
Congratulations! You finally arrived at the end of my article. There's a good chance that your coffee or tea cup is now empty. But before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-](https://kremalicious.com/feed/) or <a href="http://krlc.us/givecoffee">buy me my next coffee</a>.

View File

@ -21,7 +21,9 @@ In addition to my Niépce's Camera Obscura icons for Aperture and iPhoto I have
All Wallpapers are using a custom designed background which imitates the look of a metal plate like it was used in Niépce's experiments although it wasn't golden ;-) To make it more Mac style I have added a stenciled dots pattern (which is a commonly used reference to the front design of the MacPro).
<a class="btn btn-block icon icon-download" href="/media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip">Download Niépce's Camera Obscura Wallpaper</a>
<p class="content-download">
<a class="icon-download" href="/media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip">Download Niépce's Camera Obscura Wallpaper</a>
</p>
Here are the details:

View File

@ -384,7 +384,9 @@ Here you can see the icons included in the Server Displays icon pack:
Because I've just modified Apple's standard icons these icons are just available via this blog post and they will not show up in my Goodies section. Just download the whole package directly via this link:
<a class="btn btn-primary icon icon-download" href="/media/server_displays_by_kremalicious.zip">Download Server Display Icons <span>zip</span></a>
<p class="content-download">
<a class="icon-download" href="/media/server_displays_by_kremalicious.zip">Download Server Display Icons <span>zip</span></a>
</p>
# How to use the icons

View File

@ -22,7 +22,9 @@ As always these desktop icons are free for you personal and non-commercial use.
The whole package includes 7 icons either packed in a nice tagged iContainer for use with Candybar or in Mac + Win + Linux compatible formats. If you have such an Icy Box case grab the icons [from my Goodies page.](http://www.kremalicious.com/goodies/#icons) Have fun!
<a class="btn btn-primary icon icon-download" href="http://cdn2.kremalicious.com/media/icybox_by_kremalicious.zip">Download Icy Box Icons</a>
<p class="content-download">
<a class="icon-download" href="http://cdn2.kremalicious.com/media/icybox_by_kremalicious.zip">Download Icy Box Icons <span>zip</span></a>
</p>
* Replacement icons for the silver and black Icy Box external aluminium case with USB interface
* Mac + Win + Linux + iContainer

View File

@ -20,4 +20,6 @@ Show your geeky love for extraterrestrial universities! This is a simple Futuram
As usual you can [grab the whole zip package from my Goodies page](http://www.kremalicious.com/goodies/#wall) and have fun.
<a class="btn btn-primary icon icon-download" href="/media/mars-u-wall-by-kremalicious.zip">Download Futurama Mars U Wallpaper</a>
<p class="content-download">
<a class="icon-download" href="/media/mars-u-wall-by-kremalicious.zip">Download Futurama Mars U Wallpaper <span>zip</span></a>
</p>

View File

@ -24,4 +24,6 @@ Ive just released my own coffee cup icon, enjoy:
## Download
<a class="btn btn-primary icon icon-download" href="/media/coffee_cup_by_kremalicious.zip">Download Coffee Cup Icons</a>
<p class="content-download">
<a class="icon-download" href="/media/coffee_cup_by_kremalicious.zip">Download Coffee Cup Icons</a>
</p>

View File

@ -28,6 +28,6 @@ Simple, high-resolution Futurama tribute wallpaper pack inspired by the latest F
Seriously, the pink versions are burning my eyes but the pink is a good reference to the events in the recent movie ;-)
The whole wallpaper pack can be downloaded [from the Goodies section on my website](http://www.kremalicious.com/goodies/) or via this button:
<a class="btn btn-primary icon icon-download" href="/media/out-of-whale-oil-wall-by-kremalicious.zip">Download</a>
<p class="content-download">
<a class="icon-download" href="/media/out-of-whale-oil-wall-by-kremalicious.zip">Download</a>
</p>

View File

@ -18,7 +18,9 @@ Here's a quick twitter icon for use on your websites which is kind of a by-produ
This icon comes in various formats (PNG, ICNS, iContainer) and in 4 different sizes (128px, 48px, 32px, 16px) with each icon size redrawn (of course). Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab these icons while they're hot.
<a class="btn btn-primary icon icon-download" href="/media/twitter-crisp-by-kremalicious.zip">Download</a>
<p class="content-download">
<a class="icon-download" href="/media/twitter-crisp-by-kremalicious.zip">Download</a>
</p>
Use them on any web project you like and/or [convert them into a send to twitter link](http://kremalicious.com/ultimate-coda-wordpress-share-link-bonanza/). Have fun!

View File

@ -29,7 +29,9 @@ The icon comes in various formats (iContainer, icns, png) in sizes from 512px-16
Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab this icon while it's hot.
<a class="btn btn-primary icon icon-download" href="/media/adiumeetie-by-kremalicious.zip">Download</a>
<p class="content-download">
<a class="icon-download" href="/media/adiumeetie-by-kremalicious.zip">Download</a>
</p>
## Adium Icon Usage

View File

@ -22,7 +22,9 @@ tags:
Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab these replacement icons.
<a class="btn btn-primary icon icon-download" href="/media/delibar-by-kremalicious.zip">Download</a>
<p class="content-download">
<a class="icon-download" href="/media/delibar-by-kremalicious.zip">Download</a>
</p>
## Icon Usage

View File

@ -28,7 +28,9 @@ The homescreen icons pixels in the 16px version needed all more vivid colors to
The icons come in various formats: iContainer, ICNS, ICO and PNG files for each size. Just click the following download button to grab the whole pack:
<a class="btn btn-primary icon icon-download" href="/media/ipixelpad_by_kremalicious.zip">Download</a>
<p class="content-download">
<a class="icon-download" href="/media/ipixelpad_by_kremalicious.zip">Download</a>
</p>
## License

View File

@ -24,4 +24,7 @@ The wallpaper comes in four versions with two color variations and two text vari
You can grab the full zip-package with versions for Desktop, iPad, iPhone & Android included:
<a class="btn btn-primary icon icon-download" href="/media/momcorp_wall_by_kremalicious.zip">Download</a>
<p class="content-download">
<a class="btn-primary icon-download col3" href="/media/momcorp_wall_by_kremalicious.zip">Download</a>
<a href="http://krlc.us/givecoffee" class="icon-heart col3">Donate</a>
</p>

View File

@ -10,8 +10,7 @@ featured: true
date: 2011-12-15 07:56:46+00:00
wordpress_id: 1468
categories:
- goodies
category: goodies
tags:
- wordpress
---
@ -28,16 +27,16 @@ The plugin is localized in english, german & spanish (thanks to Andrew Kurtis fr
You can just install the plugin via the automatic backend installer under _Plugins > Add New_, activate and enjoy the red badges.
<p class="clearfix">
<a href="http://wordpress.org/extend/plugins/badged" class="btn btn-primary btn-block icon icon-wordpress-alt col2">Plugin Page</a> <a class="btn btn-primary btn-block icon icon-github-alt col2" href="https://github.com/kremalicious/Badged">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon icon-heart btn btn-block col2">Donate</a>
<p class="content-download">
<a href="http://wordpress.org/extend/plugins/badged" class="btn-primary icon-wordpress col2">Plugin Page</a> <a class="btn-primary icon-github col2" href="https://github.com/kremalicious/Badged">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart btn col2">Donate</a>
</p>
The plugin is hosted on GitHub and will always be mirrored in the WordPress plugins directory. But in case you want to install the plugin manually:
1. Upload the badged plugin folder to the `/wp-content/plugins/` directory
2. Activate the plugin through the _Plugins_ menu in WordPress
3. Enjoy
4. (optional) Adjust options under _Settings > Badged_. Upon activation the plugin sets both options by default:
1. Upload the badged plugin folder to the `/wp-content/plugins/` directory
2. Activate the plugin through the _Plugins_ menu in WordPress
3. Enjoy
4. (optional) Adjust options under _Settings > Badged_. Upon activation the plugin sets both options by default:
![](/media/badged-settings.png)

View File

@ -34,8 +34,9 @@ So if you value quality and want pixel perfect icons in your admin area you need
Ive put the template along with the implementation examples from the next section on [github](https://github.com/kremalicious/wp-icons-template). You can just download the whole package right away:
<a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn btn-primary icon icon-download">Download Template &amp; Code</a> <a href="https://github.com/kremalicious/wp-icons-template" class="icon icon-github btn">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon icon-heart btn">Donate</a>
<p class="content-download">
<a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn-primary icon-download col2">Download</a> <a href="https://github.com/kremalicious/wp-icons-template" class="icon-github col2">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart col2">Donate</a>
</p>
### Usage

View File

@ -22,10 +22,9 @@ The above picture might be blurry depending on the device you're using so here's
They are completely styled with CSS3 so they're sharp on all screens no matter how high the dpi. Have a look at the [full demo](http://lab.kremalicious.com/kbdfun/) or grab the project folder with the CSS & LESS files from GitHub. The code is under the MIT license so you're free to use it in any personal or commercial project.
<p class="clearfix">
<a class="btn btn-primary col2" href="http://lab.kremalicious.com/kbdfun/">Demo</a>
<a class="btn btn-primary col2 icon icon-download" href="https://github.com/kremalicious/kbdfun/zipball/master">Download</a>
<a class="btn col2 icon icon-github" href="https://github.com/kremalicious/kbdfun/">Github</a>
<p class="content-download">
<a class="btn-primary icon-eye col3" href="http://lab.kremalicious.com/kbdfun/">Demo</a>
<a class="icon-github col3" href="https://github.com/kremalicious/kbdfun/">Github</a>
</p>
## Usage

View File

@ -33,7 +33,9 @@ The full size I designed the wallpaper in is 3200x2048px. I don't know why Apple
Download the whole package with all the sizes included or grab the individual ones from the list, all linked to the image files:
<a class="btn btn-block icon icon-download" href="/media/project-purple-kremalicious.zip">Download <span> zip</span></a>
<p class="content-download">
<a class="icon-download" href="/media/project-purple-kremalicious.zip">Download <span> zip</span></a>
</p>
* [Desktop/rMBP/iPad 3 (3200x2048)](/media/project-purple-kremalicious.png)
* [Laptop/Nexus 7/Galaxy Nexus (1280x800)](/media/project-purple-nexus-kremalicious.png)

View File

@ -16,4 +16,4 @@ redirect_from:
I'm a designer &amp; developer hybrid based in Berlin, Germany.
</p>
<p>Have a look at my <a href="http://matthiaskretschmann.com">portfolio</a> or hit me up on <a href="https://twitter.com/kremalicious">Twitter</a>, <a href="https://alpha.app.net/kremalicious">App.net</a> or <a href="https://plus.google.com/+MatthiasKretschmann" rel="author">Google+</a></p>
<p>Have a look at my <a href="http://matthiaskretschmann.com">portfolio</a> or hit me up on <a href="https://twitter.com/kremalicious">Twitter</a> or <a href="https://plus.google.com/+MatthiasKretschmann" rel="author">Google+</a></p>

View File

@ -40,7 +40,7 @@ var icons = {
dist: dist + '/assets/img/',
prefix: 'entypo-',
icons: [
'twitter', 'facebook', 'google+', 'magnifying-glass', 'menu', 'rss', 'link', 'arrow-with-circle-down', 'forward', 'heart', 'info-with-circle', 'infinity', 'github', 'chevron-right', 'chevron-left'
'twitter', 'facebook', 'google+', 'magnifying-glass', 'menu', 'rss', 'link', 'arrow-with-circle-down', 'forward', 'heart', 'info-with-circle', 'infinity', 'github', 'chevron-right', 'chevron-left', 'eye'
]
}
}
@ -134,20 +134,14 @@ gulp.task('css', function() {
.pipe($.autoprefixer({
browsers: 'last 2 versions'
}))
.pipe($.combineMq({
beautify: false
}))
.pipe($.combineMq({ beautify: false }))
// .pipe($.uncss({
// html: [dist + '/**/*.html'],
// ignore: ['.in', '.collapsing']
// }))
.pipe($.cssmin())
.pipe($.rename({
suffix: '.min'
}))
.pipe($.header(banner, {
pkg: pkg
}))
.pipe($.rename({ suffix: '.min' }))
.pipe($.header(banner, { pkg: pkg }))
.pipe(gulp.dest(dist + '/assets/css/'))
.pipe($.connect.reload());
});
@ -353,7 +347,7 @@ gulp.task('watch', function() {
gulp.watch([src + '/_assets/img/**/*.{png,jpg,jpeg,gif}'], ['images']);
gulp.watch([src + '/_assets/img/**/*.{svg}'], ['icons']);
gulp.watch([src + '/_media/**/*'], ['media']);
gulp.watch([src + '/**/*.{html,xml,json,txt}'], ['jekyll-build']);
gulp.watch([src + '/**/*.{html,xml,json,txt,md}'], ['jekyll-build']);
});
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^