mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-13 16:45:14 +01:00
fixes
This commit is contained in:
parent
496a83a574
commit
38da7ae3de
25
Gemfile
25
Gemfile
@ -1,16 +1,17 @@
|
||||
# A sample Gemfile
|
||||
source "https://rubygems.org"
|
||||
|
||||
group :development do
|
||||
|
||||
gem 'jekyll'
|
||||
gem 'jekyll-sitemap'
|
||||
gem 'jekyll-redirect-from'
|
||||
gem 'jekyll-picture-tag'
|
||||
gem 'jekyll-archives'
|
||||
gem 'rouge'
|
||||
gem 'mini_magick'
|
||||
gem 'fileutils'
|
||||
gem 'rb-gsl'
|
||||
|
||||
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
|
||||
|
||||
@ -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')
|
||||
|
||||
@ -19,3 +19,7 @@
|
||||
@extend .alignright
|
||||
.icon
|
||||
fill: $link-color
|
||||
width: 18px
|
||||
|
||||
&:hover .icon
|
||||
fill: $link-color-hover
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -20,9 +20,9 @@
|
||||
@import 'scaffolding'
|
||||
@import 'typography'
|
||||
@import 'grid'
|
||||
@import 'icons'
|
||||
@import 'forms'
|
||||
@import 'buttons'
|
||||
@import 'icons'
|
||||
@import 'media'
|
||||
@import 'tables'
|
||||
@import 'code'
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -43,13 +43,8 @@
|
||||
<use xlink:href="/assets/img/sprite.svg#entypo-github"></use>
|
||||
</svg>
|
||||
View source
|
||||
</a> ¦ Hosted by <a href="http://www.mediatemple.net#a_aid=4f37f8fe3e47e" title="Media Temple">(mt)</a></p>
|
||||
|
||||
<p class="license">
|
||||
Posts & goodies: <a rel="item-license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA</a> ¦
|
||||
Photos & images: © Copyright ¦
|
||||
Code: <a rel="item-license" href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>
|
||||
</p>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -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/).
|
||||
|
||||
@ -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, here’s what I get.
|
||||
|
||||
> 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.
|
||||
|
||||
@ -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/).
|
||||
|
||||
@ -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"></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>.
|
||||
|
||||
@ -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:
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -24,4 +24,6 @@ I’ve 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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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!
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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:
|
||||
|
||||
|
||||
|
||||
|
||||
@ -34,8 +34,9 @@ So if you value quality and want pixel perfect icons in your admin area you need
|
||||
|
||||
I’ve 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 & 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
|
||||
|
||||
|
||||
@ -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
|
||||
@ -74,4 +73,4 @@ Adding an ios or android class gives a replica of those system keys. Android use
|
||||
|
||||
I've let the default `display: inline` intact so all padding on the `kbd` elements won't affect the line-height of the surrounding text. This leads to problems when you want to use them over multiple lines so just make them `display: inline-block` in this scenario.
|
||||
|
||||
Pro Tip: if you want to replicate all Mac keyboards after 2003 you have to get VAG rounded for the font.
|
||||
Pro Tip: if you want to replicate all Mac keyboards after 2003 you have to get VAG rounded for the font.
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -16,4 +16,4 @@ redirect_from:
|
||||
I'm a designer & 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>
|
||||
|
||||
16
gulpfile.js
16
gulpfile.js
@ -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']);
|
||||
});
|
||||
|
||||
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||
|
||||
Loading…
Reference in New Issue
Block a user