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

MEGA COMMIT, final stylus refactoring

Browse Source
This commit is contained in:
Matthias Kretschmann 2014-07-12 21:22:47 +02:00
parent b9640e20dd
commit 6f2e669873
84 changed files with 1353 additions and 3268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
Gruntfile.js
View File

@ -66,13 +66,14 @@ module.exports = function(grunt){
stylus: {
compile: {
options: {
include css: true
}
'include css': true,
compress: false
},
files: {
'<%= config.site %>/<%= config.assets.css %>/kremalicious3.min.css' : '<%= config.src %>/<%= config.assets.stylus %>/kremalicious3.styl',
'<%= config.site %>/<%= config.assets.css %>/poststyle-2300.min.css' : '<%= config.src %>/<%= config.assets.stylus %>/poststyle-2300.styl'
},
},
}
}
},
// combine css media queries
@ -167,7 +168,7 @@ module.exports = function(grunt){
},
stylus: {
files: ['<%= config.src %>/<%= config.assets.stylus %>/*.styl'],
tasks: ['stylus','cmq','cssmin']
tasks: ['stylus', 'cmq', 'cssmin']
},
js: {
files: ['<%= config.src %>/<%= config.assets.js %>/*.js'],

4
_config.yml
View File

@ -68,10 +68,10 @@ picture:
width: "480"
source_default:
width: "320"
sticky:
featured:
ppi: [1, 2]
attr:
class: "sticky-image"
class: "featured-image"
itemprop: "image"
source_default:
width: "190"

30
_src/_includes/articles.html
View File

@ -5,7 +5,7 @@
<header>
<h1 class="entry-title">
<a href="{{ post.linkurl }}" title="Go to source: {{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">
{{ post.title | titlecase }} <i class="icon-forward"></i>
{{ post.title | titlecase }} <i class="icon icon-forward"></i>
<span class="linkurl">{{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' | split:'/' | first }}</span>
</a>
</h1>
@ -14,7 +14,7 @@
<section class="entry-content">
{{ post.content | markdownify }}
<p>
<a class="more-link" href="{{ post.linkurl }}">Go to source <i class="icon-forward"></i></a>
<a class="more-link" href="{{ post.linkurl }}">Go to source <i class="icon icon-forward"></i></a>
<a class="permalink-link" href="{{ post.url | append: '/' }}" rel="tooltip" title="Permalink">&#8734;</a>
</p>
</section>
@ -26,58 +26,58 @@
<a class="photo-link" href="{{ post.url }}">
<figure class="hmedia">
{% picture {{ post.image }} %}
<figcaption class="entry-title fn">{{ post.title | titlecase }}</figcaption>
</figure>
</a>
</article>
{% else %}
{% else %}
<article class="hentry format-post">
<header>
<h1 class="entry-title"><a href="{{ post.url | append: '/' }}">{{ post.title | titlecase }}</a></h1>
</header>
<section class="entry-content">
{% if post.image %}
<a href="{{ post.url | append: '/' }}">
{% picture {{ post.image }} class="teaser" %}
</a>
{% endif %}
{% capture has_more %}{{ post.content | has_more }}{% endcapture %}
{% if has_more == 'true' %}
{{ post.content | post.excerpt | excerpt | markdownify }}
{{ post.content | post.excerpt | excerpt | markdownify }}
{% else %}
{% unless post.categories contains "goodies" and page.path contains "goodies" %}
{{ post.excerpt | markdownify }}
{% endunless %}
{% endif %}
{% if post.categories contains "goodies" and page.path contains "goodies" %}
<footer class="goodie-actions">
<p class="info col3">
<a class="btn icon-info" href="{{ post.url | append: '/' }}">Release Post</a>
<a class="btn icon icon-info" href="{{ post.url | append: '/' }}">Release Post</a>
</p>
{% if post.download %}
<p class="download col3">
<a class="btn icon-download" href="/media/{{ post.download }}">Download <span>zip</span></a>
<a class="btn icon icon-download" href="/media/{{ post.download }}">Download <span>zip</span></a>
</p>
{% endif %}
</footer>
{% endif %}
{% unless page.path contains "goodies" %}
<a class="more-link" href="{{ post.url | append: '/' }}">Continue reading <i class="icon-arrow-right"></i></a>
<a class="more-link" href="{{ post.url | append: '/' }}">Continue reading <i class="icon icon-arrow-right"></i></a>
{% endunless %}
</section>

2
_src/_includes/comments.html
View File

@ -2,6 +2,6 @@
<aside class="comments">
<p>You should tweet this post</p>
<p class="btn-wrap"><a class="btn twitter-share icon-twitter" target="_blank" href="https://twitter.com/intent/tweet?url={{ site.url | cgi_escape }}{{ page.url | cgi_escape }}&text={{ page.title | cgi_escape }}&via=kremalicious&related=kremaliciouscom,ezeep">Tweet</a></p>
<p class="btn-wrap"><a class="btn twitter-share icon icon-twitter" target="_blank" href="https://twitter.com/intent/tweet?url={{ site.url | cgi_escape }}{{ page.url | cgi_escape }}&text={{ page.title | cgi_escape }}&via=kremalicious&related=kremaliciouscom,ezeep">Tweet</a></p>
</aside>

13
_src/_includes/featured.html Normal file
View File

@ -0,0 +1,13 @@
<aside class="row featured">
{% for post in site.posts %}
{% if post.featured %}
<article class="col2">
<a class="featured-link" href="{{ post.url }}" title="{{ post.title }}">
{% picture featured {{ post.image }} %}
<h1 class="featured-title">{{ post.title | titlecase }}</h1>
</a>
</article>
{% endif %}
{% endfor %}
</aside>

12
_src/_includes/footer.html
View File

@ -1,7 +1,7 @@
<footer role="contentinfo" class="footer container">
<div class="row">
<div class="vcard author">
<img class="avatar photo" src="/assets/img/avatar.jpeg" />
<p class="footer-description">Blog of designer &amp; developer <a class="fn" rel="author" href="/about/">{{ site.author }}</a>
@ -10,10 +10,10 @@
<aside class="subscribe">
<h1 class="subscribe-title">Subscribe</h1>
<p>
<a class="btn rss icon-rss" href="http://kremalicious.com/feed"></a>
<a class="btn twitter icon-twitter" href="https://twitter.com/kremaliciouscom"></a>
<a class="btn google icon-googleplus" href="https://plus.google.com/100015950464424503954" rel="publisher"></a>
<a class="btn facebook icon-facebook" href="https://www.facebook.com/pages/kremalicious/154539134564052"></a>
<a class="btn rss icon icon-rss" href="http://kremalicious.com/feed"></a>
<a class="btn twitter icon icon-twitter" href="https://twitter.com/kremaliciouscom"></a>
<a class="btn google icon icon-googleplus" href="https://plus.google.com/100015950464424503954" rel="publisher"></a>
<a class="btn facebook icon icon-facebook" href="https://www.facebook.com/pages/kremalicious/154539134564052"></a>
</p>
</aside>
</div>

22
_src/_includes/header.html
View File

@ -1,7 +1,7 @@
<div class="topbar container">
<div class="row">
<header role="banner" class="banner">
<h1 class="banner-title">
<a class="banner-logo" href="/">kremalicious</a>
@ -9,23 +9,23 @@
</header>
<nav role="navigation" class="nav-main">
<a class="menu-btn icon-list" href="#"></a>
<a class="menu-btn icon icon-list" href="#"></a>
<div class="nav-popover hide">
<a class="nav-link goodies icon-gift" href="/goodies/">goodies</a>
<a class="nav-link photos icon-pictures" href="/photos/">photos</a>
<a class="nav-link personal icon-user" href="/personal/">personal</a>
<a class="nav-link design icon-tools" href="/design/">design</a>
<a class="nav-link photography icon-camera" href="/photography/">photography</a>
<a class="nav-link goodies icon icon-gift" href="/goodies/">goodies</a>
<a class="nav-link photos icon icon-pictures" href="/photos/">photos</a>
<a class="nav-link personal icon icon-user" href="/personal/">personal</a>
<a class="nav-link design icon icon-tools" href="/design/">design</a>
<a class="nav-link photography icon icon-camera" href="/photography/">photography</a>
</div>
</nav>
<section class="site-search">
<a class="search-btn icon-search" href="#"></a>
<a class="search-btn icon icon-search" href="#"></a>
<div class="search-area">
<input type="search" class="input-search search-field" placeholder="Search everything">
<input type="search" class="form-control input-search search-field" placeholder="Search everything">
<a class="search-close close" href="#">x</a>
</div>
</section>
</div>
</div>

13
_src/_includes/sticky.html
View File

@ -1,13 +0,0 @@
<aside class="row sticky">
{% for post in site.posts %}
{% if post.sticky %}
<article class="col2">
<a class="sticky-link" href="{{ post.url }}" title="{{ post.title }}">
{% picture sticky {{ post.image }} %}
<h1 class="sticky-title">{{ post.title | titlecase }}</h1>
</a>
</article>
{% endif %}
{% endfor %}
</aside>

4
_src/_layouts/link.html
View File

@ -8,7 +8,7 @@ layout: base
<header>
<h1 class="entry-title">
<a href="{{ page.linkurl }}" title="Go to source: {{ page.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">
{{ page.title | titlecase }} <i class="icon-forward"></i>
{{ page.title | titlecase }} <i class="icon icon-forward"></i>
<span class="linkurl">{{ page.linkurl | remove:'http://' | remove:'https://' | remove:'www.' | split:'/' | first }}</span>
</a>
</h1>
@ -17,7 +17,7 @@ layout: base
<section class="entry-content">
{{ content }}
<p>
<a class="more-link" href="{{ page.linkurl }}">Go to source <i class="icon-forward"></i></a>
<a class="more-link" href="{{ page.linkurl }}">Go to source <i class="icon icon-forward"></i></a>
<a class="permalink-link" href="{{ page.url | append: '/' }}" rel="tooltip" title="Permalink">&#8734;</a>
</p>
</section>

2
_src/_posts/2008-04-04-aperture-file-types.md
View File

@ -21,6 +21,6 @@ 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-download" href="/media/aperturefiletypes_by_kremalicious.zip">Download</a>
<a class="btn btn-block icon icon-download" href="/media/aperturefiletypes_by_kremalicious.zip">Download</a>
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/).

2
_src/_posts/2008-06-01-chives.md
View File

@ -17,6 +17,6 @@ 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-download" href="/media/chives_by_kremalicious.zip">Download Chives Wallpaper</a>
<a class="btn btn-block icon icon-download" href="/media/chives_by_kremalicious.zip">Download Chives Wallpaper</a>
Beside that, this image is [available for print on deviantArt in various sizes](http://www.deviantart.com/print/3347544/).

2
_src/_posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md
View File

@ -88,7 +88,7 @@ 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-download" href="/media/niepces_camera_obscura_by_kremalicious.zip">Download </a>
<a class="btn btn-block icon icon-download" href="/media/niepces_camera_obscura_by_kremalicious.zip">Download </a>
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/).

2
_src/_posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md
View File

@ -17,7 +17,7 @@ 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-download" href="/media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip">Download Niépce's Camera Obscura Wallpaper</a>
<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>
Here are the details:

6
_src/_posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md
View File

@ -316,13 +316,13 @@ In short you have to allow communications over port 548 and 5353.
## "Connection Failed"
If you get one of those errors:
If you get one of those errors:
````
Connection Failed - There was an error connection to the server. Check the server name or IP address and try again
```
or
or
```
There was an error connecting to the server. Check the server name or IP address and try again. If you are unable to resolve the problem contact your system administrator.
@ -419,7 +419,7 @@ 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-download" href="/media/server_displays_by_kremalicious.zip">Download Server Display Icons <span>zip</span></a>
<a class="btn btn-primary icon icon-download" href="/media/server_displays_by_kremalicious.zip">Download Server Display Icons <span>zip</span></a>
# How to use the icons

4
_src/_posts/2008-08-26-icy-box-icons.md
View File

@ -18,11 +18,11 @@ 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-download" href="http://cdn2.kremalicious.com/media/icybox_by_kremalicious.zip">Download Icy Box Icons</a>
<a class="btn btn-primary icon icon-download" href="http://cdn2.kremalicious.com/media/icybox_by_kremalicious.zip">Download Icy Box Icons</a>
* Replacement icons for the silver and black Icy Box external aluminium case with USB interface
* Mac + Win + Linux + iContainer
* Leopard ready (512x512)
* Leopard ready (512x512)
* including 7 icons with 2 Time Machine versions
[![Icy Box Icons](/media/icybox_teaser2_small.png)](/media/icybox_teaser2.jpg)

4
_src/_posts/2008-09-23-futurama-mars-university-wallpaper.md
View File

@ -12,8 +12,8 @@ categories:
- wallpaper
---
Show your geeky love for extraterrestrial universities! This is a simple Futurama tribute wallpaper displaying the logo of the Mars University as seen in the first season (1ACV11/S02E02). But I've modified it a bit to get it out of the 2D. Including one high-resolution desktop version for widescreen displays (2560x1600) and one iPhone version (320x480).
Show your geeky love for extraterrestrial universities! This is a simple Futurama tribute wallpaper displaying the logo of the Mars University as seen in the first season (1ACV11/S02E02). But I've modified it a bit to get it out of the 2D. Including one high-resolution desktop version for widescreen displays (2560x1600) and one iPhone version (320x480).
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-download" href="/media/mars-u-wall-by-kremalicious.zip">Download Futurama Mars U Wallpaper</a>
<a class="btn btn-primary icon icon-download" href="/media/mars-u-wall-by-kremalicious.zip">Download Futurama Mars U Wallpaper</a>

4
_src/_posts/2008-10-23-coffee-cup-icon.md
View File

@ -14,7 +14,7 @@ categories:
---
I’ve just released my own coffee cup icon, enjoy:
* Desktop icons showing the fuel of most designers. Originally I've made the coffee cup for the donations button on my website earlier this year and now decided to release it as an icon.
* Mac + Win + Linux + iContainer
* Leopard ready (512x512)
@ -23,4 +23,4 @@ I’ve just released my own coffee cup icon, enjoy:
## Download
<a class="btn btn-primary icon-download" href="/media/coffee_cup_by_kremalicious.zip">Download Coffee Cup Icons</a>
<a class="btn btn-primary icon icon-download" href="/media/coffee_cup_by_kremalicious.zip">Download Coffee Cup Icons</a>

2
_src/_posts/2009-02-17-out-of-whale-oil.md
View File

@ -29,4 +29,4 @@ Seriously, the pink versions are burning my eyes but the pink is a good referenc
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-download" href="/media/out-of-whale-oil-wall-by-kremalicious.zip">Download</a>
<a class="btn btn-primary icon icon-download" href="/media/out-of-whale-oil-wall-by-kremalicious.zip">Download</a>

22
_src/_posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md
View File

@ -29,7 +29,7 @@ But I think you don't want to load tons of scripts on your websites if you inclu
To make this a bit more straightforward I provide these links compiled within two Coda Clip files for use with [Panic's Coda](http://panic.com/coda). While the first clip group contains all the plain link snippets the second group includes those snippets for use with Wordpress. Just download and add them to your Coda Clips collection:
<a class="btn btn-primary icon-download" href="/media/share-link-bonanza-coda-clips.zip" title="Download Share Links Coda Clips">Download Share Links Coda Clips</a>
<a class="btn btn-primary icon icon-download" href="/media/share-link-bonanza-coda-clips.zip" title="Download Share Links Coda Clips">Download Share Links Coda Clips</a>
Included are a **total of 40 share links per clip group** for the following social/bookmark sites. This list uses the links provided in the Coda clips so you can test them out here with this article ;-):
@ -42,7 +42,7 @@ _
If you download the above Coda Clip files this icon is already applied on the clip files but here're just the icon files (icns, folder, iContainer, PNGs):
<a class="btn btn-primary icon-download" href="http://www.kremalicious.com/media/coda-clips-icon-files.zip" title="Download Coda Clips Icon">Download Coda Clips Icon</a>
<a class="btn btn-primary icon icon-download" href="http://www.kremalicious.com/media/coda-clips-icon-files.zip" title="Download Coda Clips Icon">Download Coda Clips Icon</a>
## 2. Usage
@ -106,7 +106,7 @@ To me a more cleaner solution is to use the css background-image property to inc
And in your CSS select this class and style it with a background image. Assuming you want the site icon to appear left beside the link text you would also have to add some padding so the text won't overlap the icons:
{% highlight css %}
{% highlight css %}
.delicious {
background: url(delicious.png) no-repeat center center;
padding-left: 20px;
@ -116,7 +116,7 @@ And in your CSS select this class and style it with a background image. Assuming
If you want to use just icons and no text you should provide a link text anyway but hide it with css. This is a good practice for accessibility and search engine optimization. Also you would have to provide the dimensions of the icon:
{% highlight css %}
{% highlight css %}
.delicious {
width: 16px;
height: 16px;
@ -129,13 +129,13 @@ If you want to use just icons and no text you should provide a link text anyway
Sadly Coda's clips aren't in a portable format ([Panic guys](http://panic.com), consider this is a feature request!) so here's a comprehensive list for the non-Coda users of all the links included in the above Coda Clips with plain and the Wordpress version for every site. This comes as a downloadable stripped-down HTML file (meaning there's no HTML site structure included) and as a long list within in this article. First, here's the HTML file download. Just open this locally in your browser or in your favorite editor:
<a class="btn btn-primary icon-download" href="http://www.kremalicious.com/media/share-link-bonanza-html.zip" title="Download Share Links HTML File">Download Share Links HTML File</a>
<a class="btn btn-primary icon icon-download" href="http://www.kremalicious.com/media/share-link-bonanza-html.zip" title="Download Share Links HTML File">Download Share Links HTML File</a>
And here's the huge list with all the share links in case you quickly want to grab just one of them. But be warned that this is a huge list so this is hidden by default.
Just click the Toggle All Links button to reveal them and click it again to hide the whole list again. If you want to import one of these links into Coda you can just use the [Coda Clips bookmarklet created by kyle](http://www.rayogram.com/coda-clips-bookmarklet), as he points out [in the comments](http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/#comment-42084).
↓ Toggle All Links ↓
↓ Toggle All Links ↓
## Delicious
@ -188,13 +188,13 @@ Just click the Toggle All Links button to reveal them and click it again to hide
**Plain**
<code class="html"><!-- Digg This Link
<code class="html"><!-- Digg This Link
Usage:
--------------------------------------------------
url : URL-encode all strings as appropriate.
For example:
url : URL-encode all strings as appropriate.
For example:
http%3A%2F%2Fyourwebsite%2Fyourstoryurl.html
Maximum length is 255 characters
title : Also URL-encode the story title

2
_src/_posts/2009-06-04-twitter-crisp.md
View File

@ -17,7 +17,7 @@ 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-download" href="/media/twitter-crisp-by-kremalicious.zip">Download</a>
<a class="btn btn-primary icon icon-download" href="/media/twitter-crisp-by-kremalicious.zip">Download</a>
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!

2
_src/_posts/2009-06-24-adiumeetie.md
View File

@ -28,7 +28,7 @@ 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-download" href="/media/adiumeetie-by-kremalicious.zip">Download</a>
<a class="btn btn-primary icon icon-download" href="/media/adiumeetie-by-kremalicious.zip">Download</a>
## Adium Icon Usage

2
_src/_posts/2009-09-05-delibar.md
View File

@ -21,7 +21,7 @@ categories:
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-download" href="/media/delibar-by-kremalicious.zip">Download</a>
<a class="btn btn-primary icon icon-download" href="/media/delibar-by-kremalicious.zip">Download</a>
## Icon Usage

2
_src/_posts/2010-02-04-ipixelpad.md
View File

@ -27,7 +27,7 @@ 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-download" href="/media/ipixelpad_by_kremalicious.zip">Download</a>
<a class="btn btn-primary icon icon-download" href="/media/ipixelpad_by_kremalicious.zip">Download</a>
## License

4
_src/_posts/2010-07-03-momcorp.md
View File

@ -13,7 +13,7 @@ categories:
- wallpaper
---
The recent Futurama episode "[Attack of the Killer App](http://en.wikipedia.org/wiki/Attack_of_the_Killer_App)" mocked a phone and a company you probably all have heard of. I've made some wallpapers with the logo of MomCorp presented everywhere in this episode.
The recent Futurama episode "[Attack of the Killer App](http://en.wikipedia.org/wiki/Attack_of_the_Killer_App)" mocked a phone and a company you probably all have heard of. I've made some wallpapers with the logo of MomCorp presented everywhere in this episode.
The wallpaper comes in four versions with two color variations and two text variations with Mom's favorite tagline. Here's an overview:
@ -23,5 +23,5 @@ 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-download" href="/media/momcorp_wall_by_kremalicious.zip">Download</a>
<a class="btn btn-primary icon icon-download" href="/media/momcorp_wall_by_kremalicious.zip">Download</a>

4
_src/_posts/2011-12-15-badged.md
View File

@ -5,7 +5,7 @@ title: Badged - iOS Style Notification Badges for WordPress
image: Badged-Teaser-kremalicious@2x.png
author: Matthias Kretschmann
updated: 2013-11-10 07:56:46+00:00
sticky: true
featured: true
date: 2011-12-15 07:56:46+00:00
wordpress_id: 1468
@ -26,7 +26,7 @@ The plugin is localized in english & german, which is only important for the set
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-wordpress-alt col2">Plugin Page</a> <a class="btn btn-primary btn-block icon-github-alt col2" href="https://github.com/kremalicious/Badged">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart btn btn-block col2">Donate</a>
<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>
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:

2
_src/_posts/2012-05-15-wp-icons-template.md
View File

@ -33,7 +33,7 @@ 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-download">Download Template &amp; Code</a> <a href="https://github.com/kremalicious/wp-icons-template" class="icon-github btn">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart btn">Donate</a>
<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-heart btn">Donate</a>
### Usage

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

@ -5,7 +5,7 @@ title: Using &lt;kbd&gt; for fun and profit
image: kremalicious-kbdfun-teaser.png
style: poststyle-2300.min.css
author: Matthias Kretschmann
sticky: true
featured: true
date: 2012-07-16 14:36:58+00:00
wordpress_id: 2300
@ -22,7 +22,7 @@ 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.
<a class="btn btn-primary" href="http://lab.kremalicious.com/kbdfun/">Demo</a> <a class="btn btn-primary icon-download" href="https://github.com/kremalicious/kbdfun/zipball/master">Download</a> <a class="btn icon-github" href="https://github.com/kremalicious/kbdfun/">Github</a>
<a class="btn btn-primary" href="http://lab.kremalicious.com/kbdfun/">Demo</a> <a class="btn btn-primary icon icon-download" href="https://github.com/kremalicious/kbdfun/zipball/master">Download</a> <a class="btn icon icon-github" href="https://github.com/kremalicious/kbdfun/">Github</a>
## Usage

4
_src/_posts/2012-08-07-projectpurple.md
View File

@ -5,7 +5,7 @@ title: Project Purple
image: Teaser-Project-Purple.png
download: project-purple-kremalicious.zip
author: Matthias Kretschmann
sticky: true
featured: true
date: 2012-08-07 13:15:44+00:00
wordpress_id: 2350
@ -33,7 +33,7 @@ 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-download" href="/media/project-purple-kremalicious.zip">Download <span> zip</span></a>
<a class="btn btn-block icon icon-download" href="/media/project-purple-kremalicious.zip">Download <span> zip</span></a>
* [Desktop/rMBP/iPad 3 (3200x2048)](/media/project-purple-kremalicious.png)
* [Laptop/Nexus 7/Galaxy Nexus (1280x800)](/media/project-purple-nexus-kremalicious.png)

41
_src/assets/less/alerts.less
View File

@ -1,41 +0,0 @@
/////////////////////////////////////
// Alerts
/////////////////////////////////////
.alert {
font-size: @font-size-small;
padding: .5em 1em;
color: #8a6d3d;
background: #fcf8e3;
border: 1px solid #d7cab9;
border-radius: 4px;
}
.alert-success {
color: #468847;
background: #dff0d8;
border-color: #b5c6a8;
}
.alert-danger,
.alert-error {
color: #b94a48;
background: #f2dede;
border-color: #dcc5ca;
}
.alert-info {
color: #3a87ad;
background: #d9edf7;
border-color: #a6ced8;
}
.alert-block {
padding-top: 1em;
padding-bottom: 1em;
> p,
> ul { margin-bottom: 0; }
p + p { margin-top: 5px; }
}

52
_src/assets/less/animations.less
View File

@ -1,52 +0,0 @@
// Buttery Smooth(tm)
////////////////////////////////////
.gpuacceleration {
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
// Masonry
////////////////////////////////////
.masonry,
.masonry .masonry-brick {
.transition-duration(0.7s);
}
.masonry {
.transition-property(~"height, width");
}
.masonry .masonry-brick {
.transition-property(~"left, right, top");
}
// Loading Thingy
////////////////////////////////////
.loading {
.animation(loadingThingy .2s infinite);
.gpuacceleration;
}
@keyframes loadingThingy {
from {
opacity: 1;
}
to {
opacity: 0
}
}
@-webkit-keyframes loadingThingy {
from {
opacity: 1;
}
to {
opacity: 0
}
}

137
_src/assets/less/buttons.less
View File

@ -1,137 +0,0 @@
/////////////////////////////////////
// BUTTONS CSS FOR KREMALICIOUS.COM
/////////////////////////////////////
.btn {
font-family: @headings-font-family;
font-weight: @headings-font-weight;
font-size: .85em;
line-height: 1em;
text-align: center;
text-transform: uppercase;
vertical-align: middle;
cursor: pointer;
display: inline-block;
padding: @line-height-computed/2 2em;
margin-bottom: @line-height-computed;
background: rgba(255,255,255,.1);
border: 1px solid rgba(94,131,162,.3);
border-bottom-color: rgba(94,131,162,.4);
.border-radius;
.box-shadow(~"0 1px 3px rgba(151,156,159,.1), inset 0 1px 0 rgba(255,255,255,.7)");
.transition;
&:hover {
background-color: rgba(255,255,255,.5);
}
&:active {
background-color: transparent;
border-top-color: rgba(94,131,162,.5);
outline: 0;
.box-shadow(0 1px 0 #fff);
.transition(none);
}
span {
font-size: .9em;
color: rgba(19, 56, 50, .6);
margin-left: .3em;
}
}
.btn-primary,
a.btn-primary:visited {
color: darken(@link-color, 30%);
text-shadow: 0 1px 0 rgba(255,255,255,.3);
background: lighten(@link-color, 15%);
border-color: rgba(40,101,93,.4);
border-bottom-color: rgba(40,101,93,.5);
.box-shadow(~"0 1px 3px rgba(151,156,159,.1), inset 0 1px 0 rgba(255,255,255,.4)");
&:hover {
color: darken(@link-color, 30%);
background-color: lighten(@link-color, 25%);
text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
&:active {
color: darken(@link-color, 30%);
background-color: lighten(@link-color, 15%);
border-top-color: rgba(40,101,93,.9);
.box-shadow(~"0 1px 0 #fff,inset 0 0 18px rgba(43,100,92,.3)");
.transition(none);
}
}
.more-link {
.btn;
background: none;
border: none;
.box-shadow(none);
padding: 0;
margin: 0;
i:before {
top: .15em;
position: relative;
}
&:hover {
background: none;
}
&:active {
background: @link-color;
.box-shadow(none);
}
}
.btn-block {
display: block;
}
//
// Tweet button
//
.btn.twitter-share {
display: inline-block;
padding: 1px 3px 0 3px;
height: 21px;
border: 1px solid #ccc;
border-radius: 3px;
font: bold 11px/17px Helvetica, Arial, sans-serif;
text-align: left;
color: #333;
text-transform: none;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
background-color: #f8f8f8;
#gradient > .vertical(#fff; 0%; #dedede; 100%);
vertical-align: top;
.box-shadow(none);
&:hover,
&:focus,
&:active {
border-color: #bbb;
background-color: #d9d9d9;
#gradient > .vertical(#f8f8f8; 0%; #d9d9d9; 100%);
}
&:active {
top: 0;
background-color: #efefef;
box-shadow: inset 0 3px 5px rgba(0,0,0,0.1);
}
// icon
&:before {
font-size: 15px;
margin-right: 2px;
top: 1px;
color: #0089cb;
}
}

55
_src/assets/less/code.less
View File

@ -1,55 +0,0 @@
// CODE
/////////////////////////////////////
pre, code, kbd, samp {
font-family: @font-family-monospace;
font-size: 14px;
line-height: 1.4em;
color: spin(@text-color, 70);
background: #f8f8f8;
background: rgba(255,255,255,.6);
border-radius: @border-radius-base;
}
code {
padding: .3em .6em;
}
pre {
padding: 1em;
margin-bottom: 1.5em;
display: block;
width: auto;
overflow: scroll;
-webkit-overflow-scrolling: touch;
max-height: 300px;
white-space: pre;
white-space: pre-wrap;
word-wrap: normal;
.transition;
&:hover {
background: #fff;
background: rgba(255,255,255,.8);
}
code {
border: none;
padding: 0;
margin: 0;
border-radius: 0;
background: none;
}
}
code.bash {
padding-left: 1.5em;
display: block;
&:before {
content: "$";
color: @text-color-dimmed;
display: inline-block;
margin-left: -1.5em;
margin-right: .8em;
}
}

17
_src/assets/less/comments.less
View File

@ -1,17 +0,0 @@
.comments {
&:extend(.clearfix all, .textcenter);
font-size: @font-size-small;
font-style: italic;
color: @text-color-dimmed;
margin-top: @line-height-computed*2;
.border-radius;
p,
.btn { margin-bottom: 0; }
.btn-wrap {
margin-top: @line-height-computed/2;
height: 27px
}
}

27
_src/assets/less/content-link.less
View File

@ -1,27 +0,0 @@
// LINK POST
/////////////////////////////////////
.hentry.format-link {
}
.linkurl {
display: block;
font-family: @font-family-base;
font-size: @font-size-mini;
color: @text-color-dimmed;
padding: @line-height-computed/3 0;
margin-left: auto;
margin-right: auto;
&:extend(.ellipsis);
max-width: 70%;
@media @breakpoint2 {
max-width: 50%;
}
}
.permalink-link {
float: right;
font-size: 1.1em
}

77
_src/assets/less/content-photo.less
View File

@ -1,77 +0,0 @@
// PHOTO POST
/////////////////////////////////////
.hentry.format-photo {
text-align: center;
figure {
position: relative;
display: inline-block;
margin-left: auto;
margin-right: auto;
img,
figcaption {
margin-bottom: 0;
}
img { max-height: 540px }
figcaption {
position: absolute;
left: 0;
top: 25%;
max-width: 55%;
min-width: 45%;
text-align: right;
font-family: @headings-font-family;
font-weight: @headings-font-weight;
font-style: normal;
font-size: .9em;
padding: @line-height-computed/3;
background: @link-color;
background: fade(@link-color, 70%);
color: #fff;
text-shadow: 0 1px 0 #000;
opacity: 0;
.translate(0,-20px);
.transition;
}
&:hover figcaption {
opacity: 1;
.translate(0,0);
}
}
.entry-content { text-align: left; }
.page-single & {
padding-top: @line-height-computed*2;
padding-bottom: @line-height-computed*3;
@media @breakpoint2 {
padding-top: @line-height-computed*4;
padding-bottom: @line-height-computed*6;
}
figure img { max-height: none }
figcaption {
opacity: 1;
.translate(0,0);
top: auto;
bottom: 0;
background: #000;
background: fade(#000, 40%);
}
}
}
.photo-link {
display: block;
&:active { background: none }
}

37
_src/assets/less/content-related.less
View File

@ -1,37 +0,0 @@
// Related Posts
/////////////////////////////////////
.related-posts {
.row { margin-top: 0 }
}
.related-posts-title {
&:extend(.heading-band, .h3);
margin-bottom: @line-height-computed;
}
.related-post {
.post-title {
&:extend(.h6);
margin-top: @line-height-computed;
margin-bottom: @line-height-computed;
}
.post-title,
.post-title-link {
color: @brand-grey-light;
.transition;
&:hover,
&:focus { color: @link-color }
&:active {
color: #fff;
.transition(none);
}
}
.post-title-link { display: block }
}

191
_src/assets/less/content.less
View File

@ -1,191 +0,0 @@
.page-title {
&:extend(.h2, .heading-band);
color: @brand-grey-light;
margin-top: @line-height-computed/2;
margin-bottom: @line-height-computed/2;
// icons
&:before {
font-size: 32px;
color: fade(@text-color-dimmed, 70%);
margin-right: .5em
}
@media @breakpoint2 {
margin-left: -108%;
.page-photos & { margin-bottom: @line-height-computed*4; }
}
}
.hentry {
&:extend(.divider-bottom);
padding: @line-height-computed*2 0;
@media @breakpoint2 {
padding: @line-height-computed*4 0;
}
&:first-child {
padding-top: @line-height-computed;
}
.page-single & {
padding-bottom: @line-height-computed*2;
border: none;
&:before { .hide; }
}
}
// post title
.entry-title {
&:extend(.h1, .textcenter);
color: @headings-color;
margin-top: 0;
margin-bottom: @line-height-computed;
.format-link & { &:extend(.h3); }
}
// post content
.entry-content {
h1, h2 {
&:extend(.heading-band);
}
h1 { font-size: ceil(@font-size-base * 2.5) }
p:last-child {
margin-bottom: 0;
}
}
// post category icons
/////////////////////////////////////
.posttype {
display: block;
width: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: @line-height-computed/2;
margin-top: -@line-height-computed;
// icon adjustments
&:before {
font-size: 20px;
color: @text-color-light
}
&:hover:before {
color: @link-color
}
}
// POST META
/////////////////////////////////////
.entry-meta {
&:extend(.clearfix all);
margin-top: @line-height-computed*2;
font-size: @font-size-small;
}
.byline,
time,
.categories {
&:extend(.textcenter);
}
.byline,
time {
font-style: italic;
color: @text-color-light;
}
.byline {
margin-bottom: 0;
.by { display: block }
}
time {
display: block;
color: @text-color-dimmed
}
.categories {
margin-top: @line-height-computed;
}
.avatar {
width: 80px;
height: 80px;
.border-radius(80px);
border: 2px solid #fff;
}
//
// Goodies download
//
.goodie-actions {
&:extend(.clearfix all);
max-width: 640px;
margin: 0 auto;
p,
.btn { margin-bottom: 0 }
.btn { display: block; }
.download {
margin-top: @line-height-computed/2;
@media @breakpoint2 {
margin-top: 0;
text-align: right
}
}
}
// Masonry
.masonry {
@media @breakpoint2 {
width: 125%;
margin-left: -12.5%;
.clearfix();
}
.hentry {
@media @breakpoint1 {
width: 49%;
float: left;
clear: none;
padding-top: 0;
padding-bottom: 0;
margin-bottom: .7em;
margin-top: 0;
margin-left: 0;
margin-right: 1%;
border: none;
&:before { display: none; }
&:nth-child(2n+1) { margin-right: 0; }
&:last-child { margin-bottom: 3em; }
}
}
}
.grid-sizer {
width: 100%;
@media screen and (min-width: 480px) {
width: 50%;
}
}

48
_src/assets/less/forms.less
View File

@ -1,48 +0,0 @@
/////////////////////////////////////
// FORMS CSS FOR KREMALICIOUS.COM
/////////////////////////////////////
// Make all forms have space below them
form {
margin: 0 0 @line-height-computed;
}
label {
display: block;
color: rgba(46, 79, 92, .7);
margin-bottom: 0;
// Indicate that 'label' will shift focus to the associated form element
cursor: pointer;
}
select,
textarea,
.input-text,
.input-search {
font-size: @font-size-base;
line-height: @line-height-computed;
font-family: @font-family-base;
color: @text-color;
font-weight: 700;
display: inline-block;
padding: .5em;
background: #fff;
background: rgba(255,255,255,.3);
border: 0;
width: 100%;
.transition();
-webkit-appearance: none;
&:hover {
background: rgba(255,255,255,.5)
}
&:focus {
background: rgba(255,255,255,.7);
outline: 0;
outline: thin dotted \9; /* IE6-9 */
}
// placeholder
.placeholder(rgba(46, 79, 92, .3));
}

78
_src/assets/less/grid.less
View File

@ -1,78 +0,0 @@
// Prevents padding to be added
* {
.box-sizing(border-box);
}
// 320px and up
.container {
padding: 0 7%;
width: 100%; }
.row {
margin-top: @line-height-computed;
margin-bottom: @line-height-computed;
}
.col1, .col2, .col3, .col4, .col5, .col6 {
width: 100%;
margin-left: 0;
// ensures empty columns won't collapse
min-height: 1px; }
// clear trick
.container:before, .row:before,
.container:after, .row:after { display: table; content: ""; }
.container:after, .row:after { clear: both; }
@media @breakpoint1 {
.col1,
.col2,
.col3,
.col4,
.col5,
.col6 { }
}
@media @breakpoint2 {
.container { padding: 0 15%; }
.row {
max-width: 35em;
margin: @line-height-computed*2 auto;
padding-left: 0;
padding-right: 0;
}
.col1,
.col2,
.col3,
.col4,
.col5,
.col6 {
float: left;
margin-left: 4%; }
.col1:first-child,
.col2:first-child,
.col3:first-child,
.col4:first-child,
.col5:first-child,
.col6,
.col3:nth-child(2n+3),
.col2:nth-child(3n+4),
.col1:nth-child(6n+7) {
margin-left: 0;
clear: both
}
.col1 { width: 13%; }
.col2 { width: 30.6%; }
.col3 { width: 48%; }
.col4 { width: 65%; }
.col5 { width: 82%; }
.col6 { width: 100%; }
}

115
_src/assets/less/icons.less
View File

@ -1,115 +0,0 @@
//////////////////////
// ICONS
//////////////////////
@font-face {
font-family: 'entypo';
src:url('../fonts/entypo.eot');
src:url('../fonts/entypo.eot?#iefix') format('embedded-opentype'),
url('../fonts/entypo.woff') format('woff'),
url('../fonts/entypo.ttf') format('truetype'),
url('../fonts/entypo.svg#entypo') format('svg');
font-weight: normal;
font-style: normal;
}
[class*="icon-"]:before {
color: @text-color-light;
font-size: 20px;
font-family: 'entypo';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.btn[class*="icon-"]:before {
font-size: 18px;
margin-right: .3em;
top: .1em;
position: relative;
vertical-align: baseline;
line-height: inherit;
}
.btn-primary[class*="icon-"]:before {
color: darken(@link-color, 15%);
}
.icon-twitter:before {
content: "\e600";
}
.icon-rss:before {
content: "\e603";
}
.icon-user:before,
.icon-personal:before {
content: "\e604";
}
.icon-leaf:before {
content: "\e605";
}
.icon-link:before {
content: "\e606";
}
.icon-pictures:before,
.icon-photos:before {
content: "\e607";
}
.icon-camera:before,
.icon-photography:before {
content: "\e608";
}
.icon-arrow-down-circle:before,
.icon-download:before {
content: "\e609";
}
.icon-forward:before {
content: "\e60a";
}
.icon-heart:before {
content: "\e60b";
}
.icon-info:before {
content: "\e60c";
}
.icon-github:before {
content: "\e60e";
}
.icon-star:before,
.entry-content ul li:before {
content: "\e60d";
}
.icon-search:before {
content: "\e60f";
}
.icon-googleplus:before {
content: "\e601";
}
.icon-facebook:before {
content: "\e602";
}
.icon-list:before {
content: "\e610";
}
.icon-tools:before,
.icon-design:before {
content: "\e611";
}
.icon-arrow-down:before {
content: "\e612";
}
.icon-arrow-right:before {
content: "\e614";
}
.icon-arrow-left:before {
content: "\e615";
}
.icon-gift:before,
.icon-goodies:before {
content: "\e613";
}

72
_src/assets/less/kremalicious3.less
View File

@ -1,72 +0,0 @@
/*
MAIN CSS FOR KREMALICIOUS.COM
-----------------------------------------------------------------
Copyright (c) 2013 Matthias Kretschmann | http://mkretschmann.com
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
// Normalize all the things
@import (less) 'bower_components/normalize-css/normalize.css';
// grid
@import 'grid.less';
// Core variables and mixins
@import 'variables.less';
@import 'mixins.less';
// Typography
@import 'typography.less';
// Scaffolding
@import 'scaffolding.less';
// Icons
@import 'icons.less';
// Forms & Buttons
@import 'forms.less';
@import 'buttons.less';
// Media: images, video etc.
@import 'media.less';
// Code
@import 'code.less';
@import 'syntax.less';
// Content
@import 'tables.less';
@import 'content.less';
@import 'content-photo.less';
@import 'content-link.less';
@import 'content-related.less';
@import 'comments.less';
@import 'sticky.less';
@import 'page-about.less';
@import 'page-404.less';
// Alerts
@import 'alerts.less';
// Navigation
@import 'navigation.less';
// Animations
@import 'animations.less';
// Utility classes
@import 'utilities.less';
// Print
@import 'print.less';

53
_src/assets/less/media.less
View File

@ -1,53 +0,0 @@
/////////////////////////////////////
// MEDIA CSS FOR KREMALICIOUS.COM
/////////////////////////////////////
// IMAGES
/////////////////////////////////////
img,
figure {
max-width: 100%;
height: auto;
.border-radius;
display: block;
margin-left: auto;
margin-right: auto;
}
img {
vertical-align: middle;
.box-shadow(0 1px 3px rgba(0,0,0,.2));
}
.teaser,
.teaser img {
margin-top: @line-height-computed*1.5;
margin-bottom: @line-height-computed*1.5;
}
//
// Media Positioning
//
img.alignleft,
img.alignright,
img.aligncenter {
float: none;
display: block;
margin: @line-height-computed auto;
}
@media @breakpoint2 {
img.alignleft {
margin: 0 @line-height-computed @line-height-computed 0;
float: left;
}
img.alignright {
margin: 0 0 @line-height-computed @line-height-computed;
float: right;
}
}

258
_src/assets/less/mixins.less
View File

@ -1,258 +0,0 @@
/////////////////////////////////////
// MIXINS
/////////////////////////////////////
// Dimmed Text
/////////////////////////////////////
.dimmed {
color: @text-color-dimmed;
p { color: @text-color-dimmed; }
li { color: @text-color-dimmed; }
}
// Text overflow
/////////////////////////////////////
.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
}
// Dashed Dividers
/////////////////////////////////////
.divider-top,
.divider-bottom {
position: relative;
&:before {
content: "";
position: absolute;
left: 0;
height: 1px;
}
}
.divider-top {
border-top: 1px dashed #afc3cb;
padding-top: 1em;
&:after {
content: "";
position: absolute;
left: 0;
height: 1px;
top: 0;
width: 100%;
border-top: 1px dashed #fff;
}
}
.divider-bottom {
border-bottom: 1px dashed #afc3cb;
padding-bottom: 1em;
&:before {
bottom: -2px;
width: 100%;
border-bottom: 1px dashed #fff;
}
}
// Heading band
/////////////////////////////////////
.heading-band {
display: inline-block;
clear: both;
background: rgba(255,255,255,.55);
padding: @line-height-computed/2 @line-height-computed @line-height-computed/2 100%;
margin-left: -100%;
.border-right-radius(@border-radius-base);
}
// Lead paragraph
/////////////////////////////////////
.lead {
font-size: @font-size-large;
line-height: @line-height-computed*1.15
}
/////////////////////////////////////
// CSS3 PROPERTIES
/////////////////////////////////////
// Border Radius
.border-radius(@radius: @border-radius-base) {
border-radius: @radius;
background-clip: padding-box;
}
// Single side border-radius
.border-top-radius(@radius: @border-radius-base) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius: @border-radius-base) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius: @border-radius-base) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius: @border-radius-base) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}
// Drop shadows
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
// Transitions
.transition(@transition: all .2s ease-in-out 0s) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-property(@property) {
-webkit-transition-property: @property;
transition-property: @property;
}
// Animations
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
// Transformations
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees);
transform: rotate(@degrees);
}
.scale(@ratio) {
-webkit-transform: scale(@ratio);
-ms-transform: scale(@ratio);
transform: scale(@ratio);
}
.translate(@x, @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y);
transform: translate(@x, @y);
}
.skew(@x, @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
transform: skew(@x, @y);
}
.translate3d(@x, @y, @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
.backface-visibility(@visibility){
-webkit-backface-visibility: @visibility;
-moz-backface-visibility: @visibility;
backface-visibility: @visibility;
}
// Background clipping
.background-clip(@clip) {
-webkit-background-clip: @clip;
-moz-background-clip: @clip;
background-clip: @clip;
}
// Box sizing
.box-sizing(@boxmodel) {
-webkit-box-sizing: @boxmodel;
-moz-box-sizing: @boxmodel;
box-sizing: @boxmodel;
}
// User select
// For selecting text on the page
.user-select(@select) {
-webkit-user-select: @select;
-moz-user-select: @select;
-ms-user-select: @select;
user-select: @select;
}
// Resize anything
.resizable(@direction) {
resize: @direction; // Options: horizontal, vertical, both
overflow: auto; // Safari fix
}
// CSS3 Content Columns
.content-columns(@column-count, @column-gap: @grid-gutter-width) {
-webkit-column-count: @column-count;
-moz-column-count: @column-count;
column-count: @column-count;
-webkit-column-gap: @column-gap;
-moz-column-gap: @column-gap;
column-gap: @column-gap;
}
// Optional hyphenation
.hyphens(@mode: auto) {
word-wrap: break-word;
-webkit-hyphens: @mode;
-moz-hyphens: @mode;
-ms-hyphens: @mode;
hyphens: @mode;
}
// GRADIENTS
/////////////////////////////////////
#gradient {
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.horizontal(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
background-repeat: repeat-x;
}
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.vertical(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
background-repeat: repeat-x;
}
}

246
_src/assets/less/navigation.less
View File

@ -1,246 +0,0 @@
/////////////////////////////////////
// NAVIGATION
/////////////////////////////////////
.menu-btn,
.search-btn {
line-height: 1em;
text-align: center;
vertical-align: middle;
display: inline-block;
margin: 0;
position: absolute;
right: 0;
top: 0;
// icons
&:before {
color: @link-color;
.transition;
}
&:hover:before {
color: @link-color-hover
}
&:active:before {
.transition(none);
color: #fff
}
}
.search-btn { right: 50px }
//
// Main Navigation
//
.nav-main {
.menu-btn {
margin-right: -.5em;
padding: .5em .7em;
&:before { font-size: 26px; }
}
li { display: inline-block; }
}
.nav-popover {
padding: @line-height-computed*1.5 0;
width: 100%;
background: @body-bg;
.clearfix;
}
.nav-link {
.h6;
display: block;
padding: .5em 1em;
width: 50%;
@media @breakpoint2 { width: 33.3% }
float: left;
text-align: center;
padding: 1em;
color: @link-color;
line-height: @line-height-computed;
text-transform: uppercase;
font-size: .8em;
// the icons
&:before {
display: block;
width: 100%;
text-align: center;
font-size: 32px;
height: 32px;
color: fade(@text-color-dimmed, 70%);
.transition;
}
&:hover,
&:hover:before {
color: @link-color;
border-bottom-color: @link-color
}
&:hover { background: rgba(255,255,255,.5); }
&:active {
background: @link-color;
top: 0;
}
&:active:before {
color: #fff;
.transition(none)
}
}
//
// Site Search
//
.site-search {
margin-right: 4%;
.nav-popover {
left: 0;
width: 100%;
}
}
.search-btn {
padding: .65em .85em;
}
.search-close {
position: absolute;
right: 1em;
&,
&:active { top: 1em; }
}
.topbar .search-area {
position: absolute;
width: 100%;
left: 0;
top: -3px;
z-index: 3;
background: #f1f4f7;
// hidden by default
.translate(0, -60px);
.transition;
&.ready {
.translate(0, 0);
}
}
.topbar .search-field {
width: 97%;
border: none;
.box-shadow(none);
background: transparent;
&:hover,
&:focus {
background: rgba(255,255,255,.7) !important;
}
}
.search-results {
.clearfix;
.nav-link {
@media @breakpoint2 {
width: 50%;
float: left;
font-size: .85em;
line-height: 1.3em
}
}
}
.popover {
position: absolute;
left: 0;
top: 71px;
z-index: 6;
background: lighten(@page-bg, 3%);
border-bottom: 1px solid rgba(255,255,255,.7);
box-shadow: 0 1px 4px fade(@brand-dark, 10%);
@media @breakpoint2 {
top: 0;
.row {
margin-top: @line-height-computed;
margin-bottom: @line-height-computed
}
}
}
//
// Paginator
//
.paginator {
.clearfix;
p { position: relative; }
a { display: block; }
i {
position: absolute;
left: 0;
top: 0;
}
.next {
text-align: right;
float: right;
a { margin-right: 1.5em; }
i {
margin-left: .5em;
left: auto;
right: 0;
}
}
.previous {
float: left;
a { margin-left: 1.5em; }
i { margin-right: .5em; }
}
}
// Infinite Loader
/////////////////////////////////////
.infiniteLoader .next {
width: 100%;
float: none;
margin-left: 0;
a {
.btn;
.aligncenter;
padding-top: @line-height-computed/1.5;
padding-bottom: @line-height-computed/1.5;
}
}
.infiniteLoader .previous,
.infiniteLoader .pagenumber,
.infiniteLoader i {
.hide;
}

73
_src/assets/less/page-404.less
View File

@ -1,73 +0,0 @@
.page-404 {
text-align: center;
.entry-title { .hide; }
}
.srverror-title {
font-size: 2em;
margin-bottom: @line-height-computed/2;
color: @text-color-light;
}
.srverror-text {
font-size: 1.2em;
letter-spacing: .01em;
color: @text-color-dimmed
}
@hal-size: 72px;
.hal-9000 {
width: @hal-size;
height: @hal-size;
.border-radius(@hal-size);
background: #444;
padding: 1.5em;
margin: @line-height-computed auto;
text-align: center;
position: relative;
border: 4px solid #ccc;
box-shadow: inset 0 0 10px #000;
// eye
&:before {
content: " ";
width: 100%;
height: 100%;
.border-radius(100%);
display: block;
background: red;
box-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red, 0 0 20px red, 0 0 25px red, 0 0 30px red, 0 0 40px red;
.animation(halpulse 7s infinite);
}
// gloss
&:after {
content: "";
position: absolute;
width: @hal-size;
height: @hal-size;
.border-radius(@hal-size);
position: absolute;
left: 0;
top: 0;
background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.07) 40%, rgba(255,255,255,0) 41%);
background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.07) 40%,rgba(255,255,255,0) 41%);
background-image: -o-linear-gradient(-45deg, rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.07) 40%,rgba(255,255,255,0) 41%);
background-image: -ms-linear-gradient(-45deg, rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.07) 40%,rgba(255,255,255,0) 41%);
background-image: linear-gradient(135deg, rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.07) 40%,rgba(255,255,255,0) 41%);
}
}
@-webkit-keyframes halpulse {
0% { opacity: 1 }
50% { opacity: .6 }
100% { opacity: 1 }
}
@keyframes halpulse {
0% { opacity: 1 }
50% { opacity: .6 }
100% { opacity: 1 }
}

41
_src/assets/less/page-about.less
View File

@ -1,41 +0,0 @@
.page-about {
.entry-title { .visuallyhidden; }
.entry-content { text-align: center; }
.footer {
.avatar,
.footer-description { .hide; }
.subscribe-title { margin-top: 0; }
}
@media only screen and (min-width: 40.625em) and (min-height: 650px) {
.document {
margin-bottom: 350px
}
.footer { height: 350px }
}
}
.intro-1,
.intro-2 {
.divider-bottom;
@media @breakpoint2 {
max-width: 50%;
margin-left: auto;
margin-right: auto;
}
}
.intro-1 {
font-size: 2em;
color: @text-color-light;
}
.intro-2 {
font-size: 1.2em;
letter-spacing: .01em;
color: @text-color-dimmed
}

102
_src/assets/less/poststyle-2300.less
View File

@ -1,102 +0,0 @@
/*
KBDFUN
*/
/* Le kbd
---------------------- */
kbd {
font-size: 18px;
color: #444444;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
font-weight: normal;
font-style: normal;
text-align: center;
line-height: 1em;
text-shadow: 0 1px 0 #fff;
display: inline;
padding: .3em .55em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #bbb;
background-color: #f7f7f7;
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
background-image: linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a000000', endColorstr='#00000000', GradientType=0);
box-shadow: 0px 2px 0 #bbbbbb, 0 3px 1px #999999, 0 3px 0 #bbbbbb, inset 0 1px 1px #ffffff, inset 0 -1px 3px #cccccc;
}
kbd.dark {
color: #eeeeee;
text-shadow: 0 -1px 0 #000000;
border-color: #000;
background-color: #4d4c4c;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.5)), color-stop(80%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=0);
box-shadow: 0px 2px 0 #000000, 0 3px 1px #999999, inset 0 1px 1px #aaaaaa, inset 0 -1px 3px #272727;
}
kbd.ios {
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
color: #000;
border-color: rgba(0, 0, 0, 0.6);
border-top-color: rgba(0, 0, 0, 0.4);
background-color: ##b7b7bc;
background-image: -moz-linear-gradient(top, #efeff0, #b7b7bc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#efeff0), to(#b7b7bc));
background-image: -webkit-linear-gradient(top, #efeff0, #b7b7bc);
background-image: -o-linear-gradient(top, #efeff0, #b7b7bc);
background-image: linear-gradient(top, #efeff0, #b7b7bc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffefeff0', endColorstr='#ffb7b7bc', GradientType=0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 #ffffff;
}
kbd.android {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff;
text-shadow: none;
padding: .3em;
border: 1px solid rgba(0, 0, 0, 0.05);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: #5e5e5e;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #444444, inset 0 1px 0 #868686;
}
kbd.android.dark {
background: #222222;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #505050;
}
kbd.android.color {
background: #083c5b;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #36647b;
}
@font-face {
font-family: 'RobotoRegular';
src: url('../fonts/Roboto-Regular-webfont.eot');
src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular-webfont.woff') format('woff'), url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

65
_src/assets/less/print.less
View File

@ -1,65 +0,0 @@
/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent;
color: black !important;
box-shadow:none !important;
text-shadow: none !important;
}
.entry-content a[href]:after {
content: " (" attr(href) ")";
text-transform: none;
font-size: 0.8em;
}
// hide stuff in article view
.related-posts,
.footer .row:first-child,
.hentry:before {
.hide;
}
.topbar { .visuallyhidden; }
.hentry { border: none }
.footer {
color: #ccc !important;
.footer-copyright {
border-top: 1px solid #000 !important;
&:after { .hide; }
}
}
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 5.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
.hentry {
h1 { page-break-before: always; }
&:first-child h1 { page-break-before: avoid; }
}
h2, h3 { page-break-after: avoid; }
}

252
_src/assets/less/scaffolding.less
View File

@ -1,252 +0,0 @@
html {
-webkit-tap-highlight-color: fade(@link-color, 20%);
tap-highlight-color: fade(@link-color, 20%);
}
body {
background-color: @body-bg;
}
.document { position: relative }
//
// Topbar
//
.topbar {
.clearfix;
background: @body-bg;
border-bottom: 1px solid rgba(255,255,255,.7);
box-shadow: inset 0 1px 4px fade(@brand-dark, 20%), inset 0 -1px 4px fade(@brand-dark, 20%);
.row {
margin-top: @line-height-computed/2;
margin-bottom: @line-height-computed/2;
position: relative;
}
}
//
// Banner
//
.banner {
float: left;
@media @breakpoint2 {
margin-left: -54px
}
.banner-title {
margin-top: .1em;
margin-bottom: 0;
// display toned down logo
// by default
.logo;
}
.banner-logo {
.ir;
// repeat logo
// but display hover version
.logo;
background-position: left bottom;
// hide by default
opacity: 0;
// show smooooothly on hover
&:hover { opacity: 1 }
&:active { top: 0 }
}
}
// Logo
/////////////////////////////////////
.logo {
display: block;
background-image: data-uri('../img/logo.png');
background-repeat: no-repeat;
background-position: left top;
width: 47px;
height: 31px;
@media @breakpoint2 {
width: 183px;
}
@media @highDPI {
background-image: url('../img/logo@2x.png');
background-size: 183px 62px;
}
@media @highDPI_3x {
background-image: url('../img/logo@3x.png');
background-size: 183px 62px;
}
}
//
// close button
//
a.close,
.close {
width: 16px;
height: 16px;
line-height: 12px;
font-size: 16px;
padding: 0;
.border-radius(16px);
text-align: center;
display: block;
background: @brand-grey-light;
color: #fff;
&:hover { background: @link-color-hover }
}
// Footer
/////////////////////////////////////
.footer {
text-align: center;
background: fade(@brand-dark, 5%);
border-top: 1px solid rgba(255,255,255,.7);
box-shadow: inset 0 1px 4px fade(@brand-dark, 20%);
.gravatar {
margin-bottom: @line-height-computed/2;
}
.footer-description {
.h5;
a { display: block; }
}
&,
.footer-description {
color: @text-color-light;
line-height: @line-height-computed;
}
.footer-copyright {
.divider-top;
padding-top: @line-height-computed;
padding-bottom: @line-height-computed;
p {
margin-bottom: 0;
font-size: @font-size-mini;
}
}
}
// Subscribe component
.subscribe {
margin: @line-height-computed auto;
p {
margin: 0;
.clearfix;
text-align: center;
}
.btn {
width: 48px;
height: 40px;
line-height: 34px;
padding: 0;
margin: 0;
display: inline-block;
color: @text-color-light;
text-align: center;
&:first-child { margin-left: 0 }
&:last-child { margin-right: 0 }
&:before {
// Icon resets for color animations
.transition(color .3s ease-in-out);
color: inherit;
margin: 0 !important;
}
}
}
.subscribe-title {
.h5;
color: @text-color-dimmed;
margin-bottom: @line-height-computed/2;
}
.footer:hover .subscribe .rss:before {
color: #e15a00;
}
.footer:hover .subscribe .twitter:before {
color: #019ad2;
}
.footer:hover .subscribe .google:before {
color: #c63b1e;
}
.footer:hover .subscribe .facebook:before {
color: #3b5998;
}
//
// topbar and footer as fixed
// site background
//
.topbar {
height: 71px;
.menu-open & {
height: auto
}
}
.document {
background-color: @page-bg;
}
@media only screen and (min-width: 40.625em) and (min-height: 650px) {
body {
position: relative
}
.document {
z-index: 2;
margin-top: 71px;
.transition;
.menu-open & {
margin-top: 300px;
}
margin-bottom: 580px;
border-top: 1px solid rgba(255,255,255,.7);
border-bottom: 1px solid rgba(255,255,255,.7);
box-shadow: 0 1px 4px fade(@brand-dark, 10%), 0 -1px 4px fade(@brand-dark, 10%);
}
.topbar,
.footer {
position: fixed;
border: none;
}
.topbar {
z-index: 1;
top: 0;
box-shadow: inset 0 1px 4px fade(@brand-dark, 10%);
border: none;
}
.footer {
z-index: 0;
height: 580px;
bottom: 0;
box-shadow: none;
.menu-open & { .hide; }
}
}

40
_src/assets/less/sticky.less
View File

@ -1,40 +0,0 @@
/////////////////////////////////////
// Sticky posts styles
/////////////////////////////////////
.sticky {
.divider-bottom;
padding-top: @line-height-computed;
padding-bottom: @line-height-computed;
@media @breakpoint2 {
padding-bottom: @line-height-computed*3;
}
}
.sticky-link {
display: block;
margin-bottom: @line-height-computed;
.transition-property(none);
@media @breakpoint2 {
margin-bottom: 0;
&:hover {
.scale(1.03);
}
}
}
.sticky-title {
.h6;
font-size: .8em;
margin: 0;
.visuallyhidden;
}
.sticky-image {
display: block;
img { margin-bottom: 0; }
}

66
_src/assets/less/syntax.less
View File

@ -1,66 +0,0 @@
//
// Colorful
// https://github.com/richleland/pygments-css
//
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #808080 } /* Comment */
.highlight .err { color: #F00000; background-color: #F0A0A0 } /* Error */
.highlight .k { color: #008000; font-weight: bold } /* Keyword */
.highlight .o { color: #303030 } /* Operator */
.highlight .cm { color: #808080 } /* Comment.Multiline */
.highlight .cp { color: #507090 } /* Comment.Preproc */
.highlight .c1 { color: #808080 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold } /* Comment.Special */
.highlight .gd { color: #A00000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #FF0000 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .go { color: #808080 } /* Generic.Output */
.highlight .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #0040D0 } /* Generic.Traceback */
.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #003080; font-weight: bold } /* Keyword.Pseudo */
.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #303090; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #6000E0; font-weight: bold } /* Literal.Number */
.highlight .s { background-color: #fff0f0 } /* Literal.String */
.highlight .na { color: #0000C0 } /* Name.Attribute */
.highlight .nb { color: #007020 } /* Name.Builtin */
.highlight .nc { color: #B00060; font-weight: bold } /* Name.Class */
.highlight .no { color: #003060; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #505050; font-weight: bold } /* Name.Decorator */
.highlight .ni { color: #800000; font-weight: bold } /* Name.Entity */
.highlight .ne { color: #F00000; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0060B0; font-weight: bold } /* Name.Function */
.highlight .nl { color: #907000; font-weight: bold } /* Name.Label */
.highlight .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
.highlight .nt { color: #007000 } /* Name.Tag */
.highlight .nv { color: #906030 } /* Name.Variable */
.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #6000E0; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #005080; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000D0; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #4000E0; font-weight: bold } /* Literal.Number.Oct */
.highlight .sb { background-color: #fff0f0 } /* Literal.String.Backtick */
.highlight .sc { color: #0040D0 } /* Literal.String.Char */
.highlight .sd { color: #D04020 } /* Literal.String.Doc */
.highlight .s2 { background-color: #fff0f0 } /* Literal.String.Double */
.highlight .se { color: #606060; font-weight: bold; background-color: #fff0f0 } /* Literal.String.Escape */
.highlight .sh { background-color: #fff0f0 } /* Literal.String.Heredoc */
.highlight .si { background-color: #e0e0e0 } /* Literal.String.Interpol */
.highlight .sx { color: #D02000; background-color: #fff0f0 } /* Literal.String.Other */
.highlight .sr { color: #000000; background-color: #fff0ff } /* Literal.String.Regex */
.highlight .s1 { background-color: #fff0f0 } /* Literal.String.Single */
.highlight .ss { color: #A06000 } /* Literal.String.Symbol */
.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #306090 } /* Name.Variable.Class */
.highlight .vg { color: #d07000; font-weight: bold } /* Name.Variable.Global */
.highlight .vi { color: #3030B0 } /* Name.Variable.Instance */
.highlight .il { color: #0000D0; font-weight: bold } /* Literal.Number.Integer.Long */

47
_src/assets/less/tables.less
View File

@ -1,47 +0,0 @@
// TABLES
/////////////////////////////////////
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
max-width: 100%;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 1.5em;
border-bottom: 1px solid #cfd9e1;
}
td { vertical-align: top; }
th,
td {
padding: .7em .3em;
text-align: left;
vertical-align: top;
border-top: 1px solid #cfd9e1;
}
th {
font-weight: bold;
}
thead th {
vertical-align: bottom;
}
table tbody + tbody {
border-top: 2px solid #cfd9e1;
}
table tbody tr:nth-child(odd) td,
table tbody tr:nth-child(odd) th {
background-color: rgba(255,255,255,.2);
}
table tbody tr:hover td,
table tbody tr:hover th {
background-color: #f5f5f5;
}

226
_src/assets/less/typography.less
View File

@ -1,226 +0,0 @@
/////////////////////////////////////
// TYPOGRAPHY CSS FOR KREMALICIOUS.COM
/////////////////////////////////////
body {
font-family: @font-family-base;
font-weight: @font-weight-base;
color: @text-color;
word-wrap: break-word;
font-size: @font-size-base;
line-height: @line-height-base;
@media @breakpoint1 {
line-height: @line-height-computed;
}
@media @breakpoint3 {
font-size: 125%;
line-height: 1.6em;
}
}
// HEADINGS
/////////////////////////////////////
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
font-family: @headings-font-family;
font-weight: @headings-font-weight;
line-height: @headings-line-height;
color: @headings-color;
}
h1,
h2 {
margin-top: @line-height-computed*2;
margin-bottom: @line-height-computed*2;
}
h3,
h4,
h5,
h6 {
margin-top: @line-height-computed;
margin-bottom: @line-height-computed;
}
h1, .h1 { font-size: ceil(@font-size-base * 2.75); }
h2, .h2 { font-size: ceil(@font-size-base * 2); }
h3, .h3 { font-size: ceil(@font-size-base * 1.75); }
h4, .h4 { font-size: ceil(@font-size-base * 1.35); }
h5, .h5 { font-size: ceil(@font-size-base * 1.1); }
h6, .h6 { font-size: @font-size-base; }
// LINKS
/////////////////////////////////////
a,
a:visited {
text-decoration: none;
color: @link-color;
.transition;
position: relative;
}
a:hover,
h1 a:visited:hover,
h2 a:visited:hover,
h3 a:visited:hover {
color: @link-color-hover;
}
a:active,
h1 a:visited:active {
.transition(none);
top: 1px;
background: @link-color;
color: #fff;
text-shadow: none;
}
h1 a,
h2 a,
h3 a,
h1 a:visited,
h2 a:visited,
h3 a:visited {
color: @headings-color;
}
// TEXT ELEMENTS
/////////////////////////////////////
p,ul,ol,blockquote,pre,td,th,label,img {
margin: 0 0 @line-height-computed;
}
p, li {
.hyphens(auto);
}
b, strong,
.bold {
font-weight: 700;
font-style: normal;
}
em {
font-style: italic;
}
hr {
border: 0;
.divider-bottom;
margin-bottom: @line-height-computed*2
}
// QUOTES
/////////////////////////////////////
blockquote,
blockquote > p {
font-style: italic;
color: @text-color-light;
}
blockquote {
padding: (@line-height-computed / 2) @line-height-computed;
margin: 0 0 @line-height-computed;
border-left: 2px solid @text-color-dimmed;
p:last-child {
margin-bottom: 0;
}
}
// LISTS
/////////////////////////////////////
// Unordered and Ordered lists
ul,
ol {
margin-top: 0;
margin-bottom: @line-height-computed;
list-style: none;
padding-left: 2em;
}
ul li {
position: relative;
margin-bottom: .5em;
&:before {
font-size: 14px;
font-family: 'entypo';
color: @text-color-light;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
position: absolute;
left: -2em;
top: .5em;
}
}
ol {
counter-reset: ol-counter;
li {
position: relative;
&:before {
position: absolute;
left: -2em;
top: 0;
color: #fff;
content: counter(ol-counter);
counter-increment: ol-counter;
font-style: italic;
font-size: 14px;
background: @text-color-dimmed;
width: 20px;
height: 20px;
border-radius: 20px;
line-height: 20px;
display: block;
text-align: center;
top: .2em;
.box-shadow(0 1px 0 rgba(255,255,255,.7));
}
}
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;
}
// List options
.list-unstyled {
padding-left: 0;
list-style: none;
}
nav ul, nav ol {
&:extend(.list-unstyled);
}
// SELECTION
/////////////////////////////////////
::-moz-selection { background: #2e4f5c; color: #fff; }
::selection { background: #2e4f5c; color: #fff; }

105
_src/assets/less/utilities.less
View File

@ -1,105 +0,0 @@
/////////////////////////////////////
// Utilities
/////////////////////////////////////
// Clear stuff
.clearfix {
clear: both;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
// Quick floats
/////////////////////////////////////
.alignleft { float: left; }
.alignright { float: right; }
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
// Text alignment
/////////////////////////////////////
.textcenter {
text-align: center
}
// Placeholder text
/////////////////////////////////////
.placeholder(@color: @placeholder-text) {
&:-moz-placeholder {
color: @color;
font-weight: @font-weight-base;
}
&:-ms-input-placeholder {
color: @color;
font-weight: @font-weight-base;
}
&::-webkit-input-placeholder {
color: @color;
font-weight: @font-weight-base;
}
}
// Toggling content
/////////////////////////////////////
// Hide from both screenreaders and browsers: h5bp.com/u
.hide {
display: none !important;
visibility: hidden;
}
.show {
display: block;
visibility: visible;
}
// Hide only visually, but have it available for screenreaders: h5bp.com/v
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
// Extends the .visuallyhidden class to allow the
// element to be focusable when navigated to via the keyboard: h5bp.com/p
&.focusable:active,
&.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
}
// Hide visually and from screenreaders, but maintain layout
.invisible {
visibility: hidden;
}
// CSS image replacement
/////////////////////////////////////
.ir,
.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}

68
_src/assets/less/variables.less
View File

@ -1,68 +0,0 @@
// Colors
/////////////////////////////////////
@brand-dark: #015565;
@brand-light: #e7eef4;
@brand-cyan: #3a9085;
@brand-grey: #56666e;
@brand-grey-light: #96a6ad;
// Typography
/////////////////////////////////////
@font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
@font-family-base: 'ff-tisa-sans-web-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@font-weight-base: 400;
@font-size-base: 18px;
@font-size-large: ceil(@font-size-base * 1.15);
@font-size-small: ceil(@font-size-base * 0.8);
@font-size-mini: ceil(@font-size-base * 0.7);
@line-height-base: 1.5;
@line-height-computed: floor(@font-size-base * @line-height-base);
@headings-font-family: 'brandon-grotesque','Helvetica Neue',Helvetica,Arial,sans-serif;
@headings-font-weight: 500; // Medium
@headings-line-height: 1.2;
// Text Colors
/////////////////////////////////////
@text-color: lighten(@brand-grey, 5%);
@text-color-light: darken(@brand-grey-light, 5%);
@text-color-dimmed: lighten(@brand-grey-light, 5%);
@headings-color: @brand-dark;
// Scaffolding
/////////////////////////////////////
@body-bg: #dfe8ef;
@page-bg: @brand-light;
@border-radius-base: 3px;
// Links
/////////////////////////////////////
@link-color: lighten(@brand-cyan, 5%);
@link-color-hover: lighten(@link-color, 10%);
// Responsive breakpoints
/////////////////////////////////////
@breakpoint1: ~"only screen and (min-width: 30em)";
@breakpoint2: ~"only screen and (min-width: 40.625em)";
@breakpoint3: ~"only screen and (min-width: 87.500em)";
// High dpi media query
/////////////////////////////////////
@highDPI: ~"print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) ";
@highDPI_3x: ~"print, (-webkit-min-device-pixel-ratio: 3), (min-resolution: 344dpi) ";

26
_src/assets/styl/alerts.styl
View File

@ -1,15 +1,15 @@
//
// kremalicious3
// --------------
// Mixins
// Alerts
//
.alert
padding: $padding-base-horizontal
padding: $padding-base-vertical $padding-base-horizontal
margin-bottom: $line-height-computed
border-radius: $border-radius-base
font-size: $font-size-small
border: 1px solid transparent
font-size: $font-size-small
border: 1px solid transparent
// alignment and spacing of inner content
> p,
@ -19,17 +19,17 @@
margin-top: 5px
.alert-success
color: #468847
background: #dff0d8
border-color: #b5c6a8
color: #468847
background: #dff0d8
border-color: #b5c6a8
.alert-danger,
.alert-error
color: #b94a48
background: #f2dede
border-color: #dcc5ca
color: #b94a48
background: #f2dede
border-color: #dcc5ca
.alert-info
color: #3a87ad
background: #d9edf7
border-color: #a6ced8
color: #3a87ad
background: #d9edf7
border-color: #a6ced8

44
_src/assets/styl/animations.styl Normal file
View File

@ -0,0 +1,44 @@
//
// kremalicious3
// --------------
// Animations
//
// Buttery Smooth(tm)
////////////////////////////////////
gpuacceleration()
-webkit-transform: translate3d(0,0,0)
-webkit-backface-visibility: hidden
-webkit-perspective: 1000
.gpuacceleration
gpuacceleration()
// Masonry
////////////////////////////////////
.masonry
transition-property: height, width
&,
.masonry-brick
transition-duration: 0.7s
.masonry-brick
transition-property: left, right, top
// Loading Thingy
////////////////////////////////////
.loading
@extend .gpuacceleration
animation: loadingThingy .2s infinite
@keyframes loadingThingy
0%
opacity: 1
100%
opacity: 0

142
_src/assets/styl/buttons.styl
View File

@ -17,7 +17,7 @@
transition: all .2s ease-in-out
// Default Button
button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $border-radius-base)
button-size($padding-base-vertical, $padding-base-horizontal, $font-size-small, $line-height-base, $border-radius-base)
background-color: rgba(255,255,255,.1)
border: 1px solid rgba(94,131,162,.3)
border-bottom-color: rgba(94,131,162,.4)
@ -25,81 +25,69 @@
font-weight: $headings-font-weight
color: $brand-grey
text-transform: uppercase
box-shadow: 0 1px 3px rgba(151,156,159,.1), inset 0 1px 0 rgba(255,255,255,.7)
box-shadow: 0 1px 3px rgba(151,156,159,.1), inset 0 1px 0 rgba(255,255,255,.7)
&:hover,
&:hover,
&:focus
background-color: rgba(255,255,255,.5)
background-color: rgba(255,255,255,.5)
&:active
background-color: transparent
border-top-color: rgba(94,131,162,.5)
box-shadow: 0 1px 0 #fff
transition: none
&:active
background-color: transparent
border-top-color: rgba(94,131,162,.5)
box-shadow: 0 1px 0 #fff
transition: none
&:focus
outline: 0
border-color: $input-border-focus
// Disabled State
&.disabled,
&[disabled],
fieldset[disabled] &
cursor: not-allowed
pointer-events: none // Future-proof disabling of clicks
opacity: .6
box-shadow: none
// Disabled State
&.disabled,
&[disabled],
fieldset[disabled] &
cursor: not-allowed
pointer-events: none // Future-proof disabling of clicks
opacity: .6
box-shadow: none
.btn span
font-size: .9em
color: rgba(19, 56, 50, .6)
margin-left: .3em
font-size: .9em
color: rgba(19, 56, 50, .6)
margin-left: .3em
// Primary Button
.btn-primary
color: darken($link-color, 30%)
text-shadow: 0 1px 0 rgba(255,255,255,.3)
background: lighten(@link-color, 15%)
border-color: rgba(40,101,93,.4)
border-bottom-color: rgba(40,101,93,.5)
box-shadow: 0 1px 3px rgba(151,156,159,.1), inset 0 1px 0 rgba(255,255,255,.4)
color: darken($link-color, 50%)
text-shadow: 0 1px 0 rgba(255,255,255,.3)
background: lighten($link-color, 15%)
border-color: $link-color
box-shadow: 0 1px 3px $brand-grey-light, inset 0 1px 0 rgba(255,255,255,.4)
&:hover,
&:hover,
&:focus
color: darken($link-color, 30%)
background-color: lighten($link-color, 25%)
text-shadow: 0 1px 0 rgba(255,255,255,.3)
&:active
color: darken(@link-color, 30%)
background-color: lighten(@link-color, 15%)
border-top-color: rgba(40,101,93,.9)
box-shadow: 0 1px 0 #fff, inset 0 0 18px rgba(43,100,92,.3)
color: darken($link-color, 50%)
background-color: lighten($link-color, 25%)
text-shadow: 0 1px 0 rgba(255,255,255,.3)
&:active
color: darken($link-color, 50%)
background-color: lighten($link-color, 15%)
box-shadow: 0 1px 0 #fff, inset 0 2px 5px rgba(43,100,92,.5)
.more-link
@extend .btn
background: none
border: none
box-shadow: none
padding: 0
margin: 0
font-family: $headings-font-family
font-weight: $headings-font-weight
font-size: $font-size-small
color: $link-color
text-transform: uppercase
// icon
i:before
top: .15em
position: relative
&:hover,
&:focus
background: none
&:active
background: $link-color
box-shadow: none
.btn-block
display: block
display: block
//
@ -109,34 +97,54 @@
display: inline-block
padding: 1px 3px 0 3px
height: 21px
border: 1px solid #ccc
border-radius: 3px
font: bold 11px/17px Helvetica, Arial, sans-serif
text-align: left
color: #333
text-transform: none
border: 1px solid #ccc
border-radius: 3px
font: bold 11px/17px Helvetica, Arial, sans-serif
text-align: left
color: #333
text-transform: none
text-decoration: none
text-shadow: 0 1px 0 rgba(255, 255, 255, .5)
background-color: #f8f8f8
background-image: linear-gradient(top, #fff, #dedede);
vertical-align: top
box-shadow: none
text-shadow: 0 1px 0 rgba(255, 255, 255, .5)
background-color: #f8f8f8
background-image: linear-gradient(top, #fff, #dedede)
vertical-align: top
box-shadow: none
&:hover,
&:focus,
&:active
border-color: #bbb
background-color: #d9d9d9
background-image: linear-gradient(top, #f8f8f8, #d9d9d9);
background-image: linear-gradient(top, #f8f8f8, #d9d9d9)
&:active
top: 0
background-color: #efefef
box-shadow: inset 0 3px 5px rgba(0,0,0,0.1)
box-shadow: inset 0 3px 5px rgba(0,0,0, .1)
// icon
&:before
font-size: 15px
&:before
font-size: 15px
margin-right: 2px
top: 1px
color: #0089cb
// Close button
/////////////////////////////////////
a.close,
.close
@extend .textcenter
width: 16px
height: 16px
line-height: 12px
font-size: 16px
padding: 0
border-radius: 16px
display: block
background: $brand-grey-light
color: #fff
&:hover
background: $link-color-hover

6
_src/assets/styl/code.styl
View File

@ -40,9 +40,9 @@ pre
border-radius: $border-radius-base
// make 'em scrollable
overflow: scroll
-webkit-overflow-scrolling: touch
max-height: 300px
overflow: scroll
-webkit-overflow-scrolling: touch
max-height: 300px
// Account for some code outputs that place code tags in pre tags
code

21
_src/assets/styl/comments.styl Normal file
View File

@ -0,0 +1,21 @@
//
// kremalicious3
// --------------
// Comments
//
.comments
@extend .clearfix, .textcenter
font-size: $font-size-small
font-style: italic
color: $text-color-dimmed
margin-top: $line-height-computed*2
border-radius: $border-radius-base
p,
.btn
margin-bottom: 0
.btn-wrap
margin-top: $line-height-computed/2
height: 27px

33
_src/assets/styl/content-featured.styl Normal file
View File

@ -0,0 +1,33 @@
//
// kremalicious3
// --------------
// Content - Featured Posts
//
.featured
@extend .divider-bottom
padding-top: $line-height-computed
padding-bottom: $line-height-computed
@media $breakpoint2
padding-bottom: ($line-height-computed*3)
.featured-link
display: block
margin-bottom: $line-height-computed
transition-property: none
@media $breakpoint2
margin-bottom: 0
&:hover
transform: scale(1.03)
.featured-title
@extend .visuallyhidden
.featured-image
display: block
img
margin-bottom: 0

19
_src/assets/styl/content-link.styl Normal file
View File

@ -0,0 +1,19 @@
//
// kremalicious3
// --------------
// Content - Link Post
//
.linkurl
@extend .ellipsis, .aligncenter
font-family: $font-family-base
font-size: $font-size-mini
color: $text-color-dimmed
padding: ($line-height-computed/3) 0
max-width: 70%
@media $breakpoint2
max-width: 50%
.permalink-link
@extend .alignright

73
_src/assets/styl/content-photo.styl Normal file
View File

@ -0,0 +1,73 @@
//
// kremalicious3
// --------------
// Content - Photo Post
//
.hentry.format-photo
@extend .textcenter
figure
@extend .aligncenter
position: relative
display: inline-block
img,
figcaption
margin-bottom: 0
img
max-height: 540px
figcaption
@extend .transition
position: absolute
left: 0
top: 25%
max-width: 55%
min-width: 45%
text-align: right
font-family: $headings-font-family
font-weight: $headings-font-weight
font-style: normal
font-size: $font-size-small
padding: ($line-height-computed/3)
background: $link-color
background: rgba($link-color, .7)
color: #fff
text-shadow: 0 1px 0 #000
opacity: 0
transform: translate(0, -20px)
&:hover figcaption
opacity: 1
transform: translate(0, 0)
.entry-content
text-align: left
.page-single &
padding-top: ($line-height-computed*2)
padding-bottom: ($line-height-computed*3)
@media $breakpoint2
padding-top: ($line-height-computed*4)
padding-bottom: ($line-height-computed*6)
figure img
max-height: none
figcaption
opacity: 1
transform: translate(0,0)
top: auto
bottom: 0
background: #000
background: rgba(#000, .4)
.photo-link
display: block
&:active
background: none

35
_src/assets/styl/content-related.styl Normal file
View File

@ -0,0 +1,35 @@
//
// kremalicious3
// --------------
// Content - Related Posts
//
.related-posts
.row
margin-top: 0
.related-posts-title
@extend .heading-band, .h3
margin-bottom: $line-height-computed
.related-post
.post-title
@extend .h6
margin-top: $line-height-computed
margin-bottom: $line-height-computed
.post-title,
.post-title-link
color: $brand-grey-light
&:hover,
&:focus
color: $link-color
&:active
color: #fff
transition: none
.post-title-link
display: block

83
_src/assets/styl/content.styl
View File

@ -11,53 +11,56 @@
.page-title
@extend .h2, .heading-band
color: $brand-grey-light
margin-top: $line-height-computed/2
margin-bottom: $line-height-computed/2
margin-top: ($line-height-computed/2)
margin-bottom: ($line-height-computed/2)
// icons
&:before
font-size: 32px
color: fade($text-color-dimmed, 70%)
color: rgba($text-color-dimmed, .7)
margin-right: .5em
@media $breakpoint2
margin-left: -108%
.page-photos &
margin-bottom: $line-height-computed*4
margin-bottom: ($line-height-computed*4)
.hentry
@extend .divider-bottom
padding: $line-height-computed*2 0
padding: ($line-height-computed*2) 0
@media $breakpoint2
padding: $line-height-computed*4 0
@media $breakpoint2
padding: ($line-height-computed*4) 0
&:first-child
&:first-child
padding-top: $line-height-computed
.page-single &
padding-bottom: $line-height-computed*2
padding-bottom: ($line-height-computed*2)
border: none
&:before
@extend .hide
// Post Title
/////////////////////////////////////
.entry-title {
.entry-title
@extend .h1, .textcenter
color: $headings-color
margin-top: 0
margin-bottom: $line-height-computed
color: $headings-color
margin-top: 0
margin-bottom: $line-height-computed
.format-link &
.format-link &
@extend .h3
// Post Content
/////////////////////////////////////
.entry-content
h1,
h1,
h2
@extend .heading-band
@ -68,30 +71,12 @@
margin-bottom: 0
// post category icons
/////////////////////////////////////
.posttype
@extend .aligncenter
width: 20px
margin-bottom: $line-height-computed/2
margin-top: -$line-height-computed
// icon adjustments
&:before
font-size: 20px
color: $text-color-light
&:hover:before
color: $link-color
// Post meta
/////////////////////////////////////
.entry-meta
@extend .clearfix
margin-top: $line-height-computed*2
margin-top: ($line-height-computed*2)
font-size: $font-size-small
.byline,
@ -101,10 +86,10 @@ time,
.byline,
time
font-style: italic
font-style: italic
.byline
margin-bottom: 0
margin-bottom: 0
color: $text-color-light
.by
@ -139,7 +124,7 @@ time
display: block
.download
margin-top: $line-height-computed/2
margin-top: ($line-height-computed/2)
@media $breakpoint2
margin-top: 0
@ -152,28 +137,28 @@ time
@media $breakpoint2
width: 125%
margin-left: -12.5%
.clearfix
clearfix()
.hentry
@media $breakpoint1
width: 49%
float: left
clear: none
padding-top: 0
padding-bottom: 0
margin-bottom: .7em
margin-top: 0
margin-left: 0
margin-right: 1%
border: none
float: left
clear: none
padding-top: 0
padding-bottom: 0
margin-bottom: .7em
margin-top: 0
margin-left: 0
margin-right: 1%
border: none
&:before
&:before
display: none
&:nth-child(2n+1)
margin-right: 0
&:last-child
&:last-child
margin-bottom: 3em
.grid-sizer

76
_src/assets/styl/footer.styl Normal file
View File

@ -0,0 +1,76 @@
//
// kremalicious3
// --------------
// Footer
//
.footer
@extend .textcenter
background: rgba($brand-dark, .05)
border-top: 1px solid rgba(255,255,255,.7)
box-shadow: inset 0 1px 4px rgba($brand-dark, .2)
.gravatar
margin-bottom: ($line-height-computed/2)
.footer-description
@extend .h5
a
display: block
&,
.footer-description
color: $text-color-light
line-height: $line-height-computed
.footer-copyright
@extend .divider-top
padding-top: $line-height-computed
padding-bottom: $line-height-computed
p
margin-bottom: 0
font-size: $font-size-mini
// Subscribe component
.subscribe
margin: $line-height-computed auto
p
@extend .clearfix, .textcenter
margin: 0
.btn
@extend .textcenter
width: 48px
height: 40px
line-height: 34px
padding: 0
margin: 0
display: inline-block
color: $text-color-light
&:first-child
margin-left: 0
&:last-child
margin-right: 0
&:before
// Icon resets for color animations
transition: color .3s ease-in-out
color: inherit
margin: 0 !important
.subscribe-title
@extend .h5
color: $text-color-dimmed
margin-bottom: ($line-height-computed/2)
.footer:hover .subscribe .rss:before
color: #e15a00
.footer:hover .subscribe .twitter:before
color: #019ad2
.footer:hover .subscribe .google:before
color: #c63b1e
.footer:hover .subscribe .facebook:before
color: #3b5998

2
_src/assets/styl/forms.styl
View File

@ -80,7 +80,7 @@ select[size]
-webkit-appearance: none // screw you, iOS default inset box-shadow
// Placeholder
placeholder(color $input-color-placeholder, font-size $font-size-base, line-height $line-height-base+.3)
placeholder(color $input-color-placeholder, font-size $font-size-base, line-height $line-height-base)
&:hover
lighten($input-bg, 30%)

70
_src/assets/styl/grid.styl
View File

@ -7,17 +7,16 @@
// Prevents padding to be added
*
box-sizing: border-box
box-sizing: border-box
// 320px and up
.container
padding: 0 7%
width: 100%
padding: 0 7%
width: 100%
.row
margin-top: $line-height-computed
margin-bottom: $line-height-computed
margin-top: $line-height-computed
margin-bottom: $line-height-computed
.col1,
.col2,
@ -25,10 +24,10 @@
.col4,
.col5,
.col6
width: 100%
margin-left: 0
// ensures empty columns won't collapse
min-height: 1px
width: 100%
margin-left: 0
// ensures empty columns won't collapse
min-height: 1px
// clear
.container,
@ -36,46 +35,45 @@
@extend .clearfix
@media $breakpoint2
.container
padding: 0 15%
.row
max-width: 35em
margin: $line-height-computed*2 auto
padding-left: 0
padding-right: 0
.row
max-width: 35em
margin: ($line-height-computed*2) auto
padding-left: 0
padding-right: 0
.col1,
.col2,
.col3,
.col4,
.col5,
.col6
float: left
margin-left: 4%
.col1,
.col2,
.col3,
.col4,
.col5,
.col6
float: left
margin-left: 4%
.col1:first-child,
.col2:first-child,
.col3:first-child,
.col4:first-child,
.col5:first-child,
.col6,
.col1:first-child,
.col2:first-child,
.col3:first-child,
.col4:first-child,
.col5:first-child,
.col6,
.col3:nth-child(2n+3),
.col2:nth-child(3n+4),
.col1:nth-child(6n+7)
margin-left: 0
clear: both
.col1
.col1
width: 13%
.col2
.col2
width: 30.6%
.col3
.col3
width: 48%
.col4
.col4
width: 65%
.col5
.col5
width: 82%
.col6
.col6
width: 100%

75
_src/assets/styl/header.styl Normal file
View File

@ -0,0 +1,75 @@
//
// kremalicious3
// --------------
// Header
//
// Topbar
/////////////////////////////////////
.topbar
@extend .clearfix
background: $body-bg
border-bottom: 1px solid rgba(255,255,255,.7)
box-shadow: inset 0 1px 4px rgba($brand-dark, .2), inset 0 -1px 4px rgba($brand-dark, .2)
.row
margin-top: ($line-height-computed/2)
margin-bottom: ($line-height-computed/2)
position: relative
// Logo
/////////////////////////////////////
.logo
display: block
background-image: url('../img/logo.png')
background-repeat: no-repeat
background-position: left top
width: 47px
height: 31px
@media $breakpoint2
width: 183px
@media $highDPI
background-image: url('../img/logo@2x.png')
background-size: 183px 62px
@media $highDPI_3x
background-image: url('../img/logo@3x.png')
background-size: 183px 62px
// Banner
/////////////////////////////////////
.banner
@extend .alignleft
@media $breakpoint2
margin-left: -54px
.banner-title
margin-top: .1em
margin-bottom: 0
// display toned down logo
// by default
@extend .logo
.banner-logo
@extend .ir
// repeat logo
// but display hover version
@extend .logo
background-position: left bottom
// hide by default
opacity: 0
// show smooooothly on hover
&:hover
opacity: 1
&:active
top: 0

82
_src/assets/styl/icons.styl
View File

@ -6,27 +6,24 @@
@font-face
font-family: 'entypo'
src:url('../fonts/entypo.eot')
src:url('../fonts/entypo.eot?#iefix') format('embedded-opentype'),
url('../fonts/entypo.woff') format('woff'),
url('../fonts/entypo.ttf') format('truetype'),
url('../fonts/entypo.svg#entypo') format('svg')
font-weight: normal
font-style: normal
font-family: 'entypo'
src: url('../fonts/entypo.eot')
src: url('../fonts/entypo.eot?#iefix') format('embedded-opentype'), url('../fonts/entypo.woff') format('woff'), url('../fonts/entypo.ttf') format('truetype'), url('../fonts/entypo.svg#entypo') format('svg')
font-weight: normal
font-style: normal
[class*="icon-"]:before
color: $text-color-light
font-size: 20px
font-family: 'entypo'
speak: none
font-style: normal
font-weight: normal
font-variant: normal
text-transform: none
line-height: 1
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
.icon:before
color: $text-color-light
font-size: 20px
font-family: 'entypo'
speak: none
font-style: normal
font-weight: normal
font-variant: normal
text-transform: none
line-height: 1
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
.btn&
font-size: 18px
@ -39,76 +36,75 @@
.btn-primary&
color: darken($link-color, 15%)
.icon-twitter:before
content: "\e600"
content: "\e600"
.icon-rss:before
content: "\e603"
content: "\e603"
.icon-user:before,
.icon-personal:before
content: "\e604"
content: "\e604"
.icon-leaf:before
content: "\e605"
content: "\e605"
.icon-link:before
content: "\e606"
content: "\e606"
.icon-pictures:before,
.icon-photos:before
content: "\e607"
content: "\e607"
.icon-camera:before,
.icon-photography:before
content: "\e608"
content: "\e608"
.icon-arrow-down-circle:before,
.icon-download:before
content: "\e609"
content: "\e609"
.icon-forward:before
content: "\e60a"
content: "\e60a"
.icon-heart:before
content: "\e60b"
content: "\e60b"
.icon-info:before
content: "\e60c"
content: "\e60c"
.icon-github:before
content: "\e60e"
content: "\e60e"
.icon-star:before,
.entry-content ul li:before
content: "\e60d"
content: "\e60d"
.icon-search:before
content: "\e60f"
content: "\e60f"
.icon-googleplus:before
content: "\e601"
content: "\e601"
.icon-facebook:before
content: "\e602"
content: "\e602"
.icon-list:before
content: "\e610"
content: "\e610"
.icon-tools:before,
.icon-design:before
content: "\e611"
content: "\e611"
.icon-arrow-down:before
content: "\e612"
content: "\e612"
.icon-arrow-right:before
content: "\e614"
content: "\e614"
.icon-arrow-left:before
content: "\e615"
content: "\e615"
.icon-gift:before,
.icon-goodies:before
content: "\e613"
content: "\e613"

56
_src/assets/styl/kremalicious3.styl
View File

@ -6,57 +6,45 @@
// Normalize all the things
@import 'bower_components/normalize-css/normalize.css'
@import '../../../bower_components/normalize-css/normalize.css'
// Nib Nib
@import 'nib'
// Core variables and mixins
@import 'variables'
@import 'mixins'
// grid
@import 'grid'
// Typography
@import 'typography'
// Scaffolding
// Core CSS
@import 'scaffolding'
// Icons
@import 'typography'
@import 'grid'
@import 'icons'
// Forms & Buttons
@import 'forms'
@import 'buttons'
// Media: images, video etc.
@import 'media'
// Tables
@import 'tables'
// Code
@import 'code'
@import 'syntax'
// Alerts
@import 'alerts'
@import 'animations'
// Components
@import 'header'
@import 'navigation'
@import 'search'
@import 'footer'
// Content
@import 'content'
@import 'content-photo.less'
@import 'content-link.less'
@import 'content-related.less'
@import 'comments.less'
@import 'sticky.less'
@import 'content-photo'
@import 'content-link'
@import 'content-featured'
@import 'content-related'
@import 'comments'
@import 'page-about.less'
@import 'page-404.less'
// Navigation
@import 'navigation.less'
// Animations
@import 'animations.less'
@import 'page-about'
@import 'page-404'
// Print
@import 'print.less'
@import 'print'

30
_src/assets/styl/media.styl
View File

@ -9,24 +9,23 @@
/////////////////////////////////////
figure, img, svg, video, audio, embed, canvas
max-width: 100%
height: auto
margin: 0 auto
display: block
max-width: 100%
height: auto
margin: 0 auto
display: block
border-radius: $border-radius-base
// Images
/////////////////////////////////////
img
vertical-align: middle;
box-shadow: 0 1px 3px rgba(0,0,0,.2)
vertical-align: middle;
box-shadow: 0 1px 3px rgba(0,0,0,.2)
.teaser,
.teaser img
margin-top: $line-height-computed*1.5
margin-bottom: $line-height-computed*1.5
margin-top: ($line-height-computed*1.5)
margin-bottom: ($line-height-computed*1.5)
// Media Positioning
@ -35,13 +34,12 @@ img
img.alignleft,
img.alignright,
img.aligncenter
float: none
display: block
margin: $line-height-computed auto
float: none
display: block
margin: $line-height-computed auto
@media $breakpoint2
img.alignleft
img.alignleft
margin: 0 $line-height-computed $line-height-computed 0
img.alignright
margin: 0 0 $line-height-computed $line-height-computed
img.alignright
margin: 0 0 $line-height-computed $line-height-computed

110
_src/assets/styl/mixins.styl
View File

@ -9,9 +9,11 @@
/////////////////////////////////////
clearfix()
&:before,
&:after
content: ""
content: " "
display: table
&:after
clear: both
.clearfix
@ -50,26 +52,32 @@ aligncenter()
/////////////////////////////////////
textcenter()
text-align: center
text-align: center
.textcenter
textcenter()
textcenter()
// Toggling content
/////////////////////////////////////
// Hide from both screenreaders and browsers: h5bp.com/u
.hide
hide()
display: none !important
visibility: hidden
.show
show()
display: block
visibility: visible
.hide
hide()
.show
show()
// Hide only visually, but have it available for screenreaders: h5bp.com/v
.visuallyhidden
visuallyhidden()
border: 0
clip: rect(0 0 0 0)
height: 1px
@ -90,6 +98,9 @@ textcenter()
position: static
width: auto
.visuallyhidden
visuallyhidden()
// Hide visually and from screenreaders, but maintain layout
.invisible
visibility: hidden
@ -100,21 +111,21 @@ textcenter()
.ir,
.hide-text
font: 0/0 a
color: transparent
text-shadow: none
background-color: transparent
border: 0
font: 0/0 a
color: transparent
text-shadow: none
background-color: transparent
border: 0
// Dimmed Text
/////////////////////////////////////
dimmed()
color: $text-color-dimmed
p
color: $text-color-dimmed
p
color: $text-color-dimmed
li
li
color: $text-color-dimmed
.dimmed
@ -124,11 +135,23 @@ dimmed()
// Text overflow
/////////////////////////////////////
.ellipsis
ellipsis()
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
overflow: hidden
.ellipsis
ellipsis()
// Default transition
/////////////////////////////////////
transition()
transition: all ease-in-out .15s
.transition
transition()
// Dashed Dividers
/////////////////////////////////////
@ -138,52 +161,49 @@ dimmed()
position: relative
&:before
content: ""
position: absolute
left: 0
content: ""
position: absolute
left: 0
height: 1px
.divider-top
border-top: 1px dashed #afc3cb
padding-top: 1em
border-top: 1px dashed #afc3cb
padding-top: 1em
&:after
content: ""
position: absolute
left: 0
&:after
content: ""
position: absolute
left: 0
height: 1px
top: 0
width: 100%
border-top: 1px dashed #fff
top: 0
width: 100%
border-top: 1px dashed #fff
.divider-bottom
border-bottom: 1px dashed #afc3cb
padding-bottom: 1em
&:before
bottom: -2px
width: 100%
border-bottom: 1px dashed #fff
border-bottom: 1px dashed #afc3cb
padding-bottom: 1em
&:before
bottom: -2px
width: 100%
border-bottom: 1px dashed #fff
// Heading band
/////////////////////////////////////
.heading-band
display: inline-block
clear: both
background: rgba(255,255,255,.55)
padding: $line-height-computed/2 $line-height-computed $line-height-computed/2 100%
margin-left: -100%;
.border-right-radius($border-radius-base)
display: inline-block
clear: both
background: rgba(255,255,255,.55)
padding: ($line-height-computed/2) $line-height-computed ($line-height-computed/2) 100%
margin-left: -100%
// Lead paragraph
/////////////////////////////////////
.lead
font-size: $font-size-large;
line-height: $line-height-computed*1.15
font-size: $font-size-large
line-height: ($line-height-computed*1.15)
// Button sizing
@ -217,4 +237,4 @@ input-size(input-height, padding-vertical, padding-horizontal, font-size, line-h
textarea&,
select[multiple]&
height: auto
height: auto

148
_src/assets/styl/navigation.styl Normal file
View File

@ -0,0 +1,148 @@
//
// kremalicious3
// --------------
// Navigation
//
.menu-btn,
.search-btn
@extend .textcenter
line-height: 1em
vertical-align: middle
display: inline-block
margin: 0
position: absolute
right: 0
top: 0
// icons
&:before
color: $link-color
&:hover:before
color: $link-color-hover
&:active:before
transition: none
color: #fff
.search-btn
right: 50px
// Main Navigation
/////////////////////////////////////
.nav-main
.menu-btn
margin-right: -.5em
padding: .5em .7em
// icon
&:before
font-size: 26px
li
display: inline-block
.nav-popover
@extend .clearfix
padding: ($line-height-computed*1.5) 0
width: 100%
background: $body-bg
.nav-link
@extend .h6, .alignleft, .textcenter
padding: .5em 1em
margin-bottom: 0
width: 50%
color: $text-color-dimmed
line-height: $line-height-computed
text-transform: uppercase
font-size: $font-size-small
@media $breakpoint2
width: 33.3%
// the icons
&:before
@extend .textcenter, .transition
display: block
width: 100%
font-size: 32px
height: 32px
color: rgba($text-color-dimmed, .7)
&:hover,
&:hover:before
color: $link-color
border-bottom-color: $link-color
&:hover
background: rgba(255,255,255,.5)
&:active
background: $link-color
top: 0
&:active:before
color: #fff
transition: none
// Paginator
/////////////////////////////////////
.paginator
@extend .clearfix
p
position: relative
a
display: block
i
position: absolute
left: 0
top: 0
.next
@extend .alignright
text-align: right;
a
margin-right: 1.5em
i
margin-left: .5em
left: auto
right: 0
.previous
@extend .alignleft
a
margin-left: 1.5em
i
margin-right: .5em
// Infinite Loader
/////////////////////////////////////
.infiniteLoader
.next
width: 100%
float: none
margin-left: 0
a
@extend .btn, .btn-block, .aligncenter
color: $link-color
padding-top: ($line-height-computed/1.5)
padding-bottom: ($line-height-computed/1.5)
.previous,
.pagenumber,
i
@extend .hide

68
_src/assets/styl/page-404.styl Normal file
View File

@ -0,0 +1,68 @@
//
// kremalicious3
// --------------
// Page - 404
//
.page-404
@extend .textcenter
.entry-title
@extend .hide
.srverror-title
font-size: 2em
margin-bottom: $line-height-computed/2
color: $text-color-light
.srverror-text
font-size: 1.2em
letter-spacing: .01em
color: $text-color-dimmed
// HAL needs a size
$hal-size = 72px
.hal-9000
@extend .textcenter, .aligncenter
width: $hal-size
height: $hal-size
border-radius: $hal-size
background: #444
padding: 1.5em
margin-top: $line-height-computed
margin-bottom: $line-height-computed
position: relative
border: 4px solid #ccc
box-shadow: inset 0 0 10px #000
// eye
&:before
content: ""
width: 100%
height: 100%
border-radius: 100%
display: block
background: red
box-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red, 0 0 20px red, 0 0 25px red, 0 0 30px red, 0 0 40px red
animation: halpulse 7s infinite
// gloss
&:after
content: ""
position: absolute
width: $hal-size
height: $hal-size
border-radius: $hal-size
position: absolute
left: 0
top: 0
background-image: linear-gradient(135deg, rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.07) 40%,rgba(255,255,255,0) 41%)
@keyframes halpulse
0%
opacity: 1
50%
opacity: .6
100%
opacity: 1

44
_src/assets/styl/page-about.styl Normal file
View File

@ -0,0 +1,44 @@
//
// kremalicious3
// --------------
// Page - About
//
.page-about
.entry-title
@extend .visuallyhidden
.entry-content
@extend .textcenter
.footer
.avatar,
.footer-description
@extend .hide
.subscribe-title
margin-top: 0
@media only screen and (min-width: 40.625em) and (min-height: 650px)
.document
margin-bottom: 350px
.footer
height: 350px
.intro-1,
.intro-2
@extend .divider-bottom
@media $breakpoint2
max-width: 50%
margin-left: auto
margin-right: auto
.intro-1
font-size: 2em
color: $text-color-light
.intro-2
font-size: 1.2em
letter-spacing: .01em
color: $text-color-dimmed

73
_src/assets/styl/poststyle-2300.styl Normal file
View File

@ -0,0 +1,73 @@
//
// kremalicious3
// --------------
// kbdfun
//
@import 'nib'
@import 'variables'
kbd
font-size: 18px
color: #444444
font-family: "Lucida Grande", Lucida, Verdana, sans-serif
font-weight: normal
font-style: normal
text-align: center
line-height: 1em
text-shadow: 0 1px 0 #fff
display: inline
padding: .3em .55em
border-radius: 6px
background-clip: padding-box
border: 1px solid #bbb
background-color: #f7f7f7
background-image: linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0))
background-repeat: repeat-x
box-shadow: 0px 2px 0 #bbbbbb, 0 3px 1px #999999, 0 3px 0 #bbbbbb, inset 0 1px 1px #ffffff, inset 0 -1px 3px #cccccc
kbd.dark
color: #eeeeee
text-shadow: 0 -1px 0 #000000
border-color: #000
background-color: #4d4c4c
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0))
background-repeat: no-repeat
box-shadow: 0px 2px 0 #000000, 0 3px 1px #999999, inset 0 1px 1px #aaaaaa, inset 0 -1px 3px #272727
kbd.ios
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif
color: #000
border-color: rgba(0, 0, 0, 0.6)
border-top-color: rgba(0, 0, 0, 0.4)
background-color: #b7b7bc
background-image: linear-gradient(top, #efeff0, #b7b7bc)
background-repeat: repeat-x
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 #ffffff
kbd.android
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
color: #ffffff
text-shadow: none
padding: .3em
border: 1px solid rgba(0, 0, 0, 0.05)
border-radius: 3px
background-clip: padding-box
background: #5e5e5e
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #444444, inset 0 1px 0 #868686
kbd.android.dark
background: #222222;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #505050
kbd.android.color
background: #083c5b;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #36647b
@font-face
font-family: 'RobotoRegular'
src: url('../fonts/Roboto-Regular-webfont.eot')
src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular-webfont.woff') format('woff'), url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg')
font-weight: normal
font-style: normal

80
_src/assets/styl/print.styl Normal file
View File

@ -0,0 +1,80 @@
//
// kremalicious3
// --------------
// Print
//
@media print
*
background: transparent
color: black !important
box-shadow:none !important
text-shadow: none !important
.entry-content a[href]:after
content: " (" attr(href) ")"
text-transform: none
font-size: $font-size-small
// hide stuff in article view
.related-posts,
.footer .row:first-child,
.hentry:before,
.topbar
hide()
.hentry
border: none
.footer
color: #ccc !important
.footer-copyright
border-top: 1px solid #000 !important
&:after
hide()
abbr[title]:after
content: " (" attr(title) ")"
// Don't show links for images, or javascript/internal links
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after
content: ""
pre,
blockquote
page-break-inside: avoid
thead
display: table-header-group
tr,
img
page-break-inside: avoid
img
max-width: 100% !important
@page
margin: 5.5cm
p,
h2,
h3
orphans: 3
widows: 3
.hentry
h1
page-break-before: always
&:first-child h1
page-break-before: avoid
h2,
h3
page-break-after: avoid

198
_src/assets/styl/scaffolding.styl
View File

@ -10,189 +10,19 @@
html
font-size: 62.5%
-webkit-tap-highlight-color: fade($link-color, 20%);
-webkit-tap-highlight-color: rgba($link-color, .2)
body
background: $body-bg
.document
position: relative
// Topbar
/////////////////////////////////////
.topbar
@extend .clearfix
background: $body-bg
border-bottom: 1px solid rgba(255,255,255,.7)
box-shadow: inset 0 1px 4px fade($brand-dark, 20%), inset 0 -1px 4px fade($brand-dark, 20%)
.row
margin-top: $line-height-computed/2
margin-bottom: $line-height-computed/2
position: relative
// Banner
/////////////////////////////////////
.banner
@extend .alignleft
@media $breakpoint2
margin-left: -54px
.banner-title
margin-top: .1em
margin-bottom: 0
// display toned down logo
// by default
@extend .logo
.banner-logo
.ir
// repeat logo
// but display hover version
@extend .logo
background-position: left bottom
// hide by default
opacity: 0
// show smooooothly on hover
&:hover { opacity: 1 }
&:active { top: 0 }
// Logo
/////////////////////////////////////
.logo
display: block
background-image: data-uri('../img/logo.png')
background-repeat: no-repeat
background-position: left top
width: 47px
height: 31px
@media $breakpoint2
width: 183px
@media $highDPI
background-image: url('../img/logo@2x.png')
background-size: 183px 62px
@media $highDPI_3x
background-image: url('../img/logo@3x.png')
background-size: 183px 62px
// close button
/////////////////////////////////////
a.close,
.close
@extend .textcenter
width: 16px
height: 16px
line-height: 12px
font-size: 16px
padding: 0
border-radius: 16px
display: block
background: $brand-grey-light
color: #fff
&:hover
background: $link-color-hover
// Footer
/////////////////////////////////////
.footer
@extend .textcenter
background: fade($brand-dark, 5%)
border-top: 1px solid rgba(255,255,255,.7)
box-shadow: inset 0 1px 4px fade($brand-dark, 20%)
.gravatar
margin-bottom: $line-height-computed/2
.footer-description
@extend .h5
a
display: block
&,
.footer-description
color: $text-color-light
line-height: $line-height-computed
.footer-copyright
@extend .divider-top
padding-top: $line-height-computed
padding-bottom: $line-height-computed
p
margin-bottom: 0
font-size: $font-size-mini
// Subscribe component
.subscribe
margin: $line-height-computed auto
p
@extend .clearfix .textcenter
margin: 0
.btn
@extend .textcenter
width: 48px
height: 40px
line-height: 34px
padding: 0
margin: 0
display: inline-block
color: $text-color-light
&:first-child
margin-left: 0
&:last-child
margin-right: 0
&:before
// Icon resets for color animations
transition: color .3s ease-in-out)
color: inherit
margin: 0 !important
.subscribe-title
@extend .h5
color: $text-color-dimmed
margin-bottom: $line-height-computed/2
.footer:hover .subscribe .rss:before
color: #e15a00
.footer:hover .subscribe .twitter:before
color: #019ad2
.footer:hover .subscribe .google:before
color: #c63b1e
.footer:hover .subscribe .facebook:before
color: #3b5998
// topbar and footer as fixed
// topbar and footer as fixed
// site background
/////////////////////////////////////
.topbar
height: 71px
.menu-open &
height: auto
@ -202,19 +32,19 @@ a.close,
@media only screen and (min-width: 40.625em) and (min-height: 650px)
body
position: relative
.document
transition()
position: relative
z-index: 2
margin-top: 71px
.transition
.menu-open &
margin-top: 300px
margin-bottom: 580px;
border-top: 1px solid rgba(255,255,255,.7)
border-bottom: 1px solid rgba(255,255,255,.7)
box-shadow: 0 1px 4px fade($brand-dark, 10%), 0 -1px 4px fade($brand-dark, 10%)
box-shadow: 0 1px 4px rgba($brand-dark, .1), 0 -1px 4px rgba($brand-dark, .1)
.menu-open &
margin-top: 300px
.topbar,
.footer
@ -224,14 +54,14 @@ a.close,
.topbar
z-index: 1
top: 0
box-shadow: inset 0 1px 4px fade($brand-dark, 10%)
box-shadow: inset 0 1px 4px rgba($brand-dark, .1)
border: none
.footer
z-index: 0
height: 580px
bottom: 0
box-shadow: none
.menu-open &
@extend .hide
hide()

62
_src/assets/styl/search.styl Normal file
View File

@ -0,0 +1,62 @@
//
// kremalicious3
// --------------
// Search
//
.site-search
margin-right: 4%
.nav-popover
left: 0
width: 100%
.search-btn
padding: .65em .85em
.search-close
position: absolute
right: 1em
&,
&:active
top: 1em
.search-area
@extend .transition
position: absolute
width: 100%
left: 0
top: -3px
z-index: 3
// hidden by default
transform: translate(0, -70px)
&.ready
transform: translate(0, 0)
.search-results
@extend .clearfix
.nav-link
@media $breakpoint2
width: 50%
float: left
font-size: $font-size-small
.popover
position: absolute
left: 0
top: 71px
z-index: 6
background: lighten($page-bg, 3%)
border-bottom: 1px solid rgba(255,255,255,.7)
box-shadow: 0 1px 4px rgba($brand-dark, .1)
@media $breakpoint2
top: 0
.row
margin-top: $line-height-computed
margin-bottom: $line-height-computed

26
_src/assets/styl/tables.styl
View File

@ -6,29 +6,29 @@
table
border-collapse: collapse
border-spacing: 0
width: 100%
max-width: 100%
background-color: transparent
margin-bottom: $line-height-computed
border-bottom: 1px solid #cfd9e1
border-collapse: collapse
border-spacing: 0
width: 100%
max-width: 100%
background-color: transparent
margin-bottom: $line-height-computed
border-bottom: 1px solid #cfd9e1
td
vertical-align: top
th,
td
padding: .7em .3em
text-align: left
vertical-align: top
border-top: 1px solid #cfd9e1
padding: .7em .3em
text-align: left
vertical-align: top
border-top: 1px solid #cfd9e1
th
@extend .bold
@extend .bold
thead th
vertical-align: bottom
vertical-align: bottom
table tbody + tbody
border-top: 2px solid #cfd9e1

139
_src/assets/styl/typography.styl
View File

@ -14,19 +14,19 @@ body
font-size: $font-size-base
line-height: $line-height-base
color: $font-color-base
word-wrap: break-word
word-wrap: break-word
@media $breakpoint1
line-height: $line-height-computed
@media $breakpoint3
font-size: 125%
line-height: 1.6em
@media $breakpoint3
font-size: 125%
line-height: 1.6em
p,
ul,
ol
margin: 0 0 $line-height-computed
margin: 0 0 $line-height-computed
// Headings
@ -34,14 +34,15 @@ ol
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6
font-family: $headings-font-family
font-weight: $headings-font-weight
color: $headings-color
font-family: $headings-font-family
font-weight: $headings-font-weight
line-height: $headings-line-height
color: $headings-color
h1, .h1,
h2, .h2
margin-top: $line-height-computed*2
margin-bottom: $line-height-computed*2
margin-top: ($line-height-computed*2)
margin-bottom: ($line-height-computed*2)
h3, .h3
h4, .h4,
@ -49,7 +50,7 @@ h5, .h5,
h6, .h6
margin-top: $line-height-computed
margin-bottom: $line-height-computed
h1, .h1
font-size: $font-size-h1
@ -74,21 +75,20 @@ h6, .h6
a
color: $link-color
text-decoration: none
text-decoration: none
outline: 0
transition: color .2s ease-in-out
position: relative
&:hover
&:hover,
&:focus
color: $link-color-hover
&:active
transition: none
top: 1px
background: $link-color
color: #fff
text-shadow: none
h1 &,
h2 &,
h3 &
@ -106,53 +106,50 @@ ol
padding-left: 2em
ul li
position: relative
margin-bottom: .5em
position: relative
margin-bottom: .5em
&:before
font-size: 14px
font-family: 'entypo'
color: $text-color-light
speak: none
font-style: normal
font-weight: normal
font-variant: normal
text-transform: none
line-height: 1
-webkit-font-smoothing: antialiased
&:before
font-size: 14px
font-family: 'entypo'
color: $text-color-light
speak: none
font-style: normal
font-weight: normal
font-variant: normal
text-transform: none
line-height: 1
-webkit-font-smoothing: antialiased
position: absolute
left: -2em
top: .5em
position: absolute
left: -2em
top: .5em
ol
counter-reset: ol-counter
counter-reset: ol-counter
li
position: relative
&:before
position: absolute
left: -2em
top: 0
color: #fff
content: counter(ol-counter)
counter-increment: ol-counter
font-style: italic
position: absolute
left: -2em
top: 0
color: #fff
content: counter(ol-counter)
counter-increment: ol-counter
font-style: italic
font-size: 14px
background: $text-color-dimmed
background: $text-color-dimmed
width: 20px
width: 20px
height: 20px
border-radius: 20px
line-height: 20px
display: block
text-align: center
top: .2em
box-shadow: 0 1px 0 rgba(255,255,255,.7))
}
}
}
display: block
text-align: center
top: .2em
box-shadow: 0 1px 0 rgba(255,255,255,.7)
ul,
ol
@ -160,17 +157,20 @@ ol
ol
margin-bottom: 0
nav ul,
nav ol
@extend .list-unstyled
// List options
// Unstyled keeps list items block level, just removes default browser padding and list-style
.list-unstyled
list-unstyled()
padding-left: 0
list-style: none
display: block
.list-unstyled
list-unstyled()
nav ul,
nav ol
@extend .list-unstyled
// Inline turns list items into inline-block
.list-inline
@extend .list-unstyled
@ -188,24 +188,24 @@ nav ol
/////////////////////////////////////
p, li
hyphens: auto
hyphens: auto
b,
b,
strong,
.bold
font-weight: 700
font-style: normal
font-weight: 700
font-style: normal
em
font-style: italic
font-style: italic
cite
font-style: normal
font-style: normal
hr
@extend .divider-bottom
border: 0
margin-bottom: $line-height-computed*2
margin-bottom: ($line-height-computed*2)
// Quotes
@ -213,21 +213,20 @@ hr
blockquote,
blockquote > p
font-style: italic
color: $text-color-light
font-style: italic
color: $text-color-light
blockquote
padding: ($line-height-computed / 2) $line-height-computed
padding: 0 $line-height-computed
margin: 0 0 $line-height-computed
border-left: 2px solid $text-color-dimmed
border-left: 2px solid $text-color-dimmed
p:last-child
margin-bottom: 0
// Selection
/////////////////////////////////////
::-moz-selection { background: #2e4f5c; color: #fff; }
::selection { background: #2e4f5c; color: #fff; }
::selection { background: #2e4f5c; color: #fff; }

16
_src/assets/styl/variables.styl
View File

@ -16,8 +16,8 @@ support-for-ie = false // Nib IE 8 support
// Asset Paths
/////////////////////////////////////
$img-path = '/assets/images/'
$font-path = '/assets/fonts/'
$img-path = '/assets/images/'
$font-path = '/assets/fonts/'
// Colors
@ -58,7 +58,7 @@ $font-family-monospace = Menlo, Monaco, Consolas, 'Courier New', monospace
$headings-font-family = 'brandon-grotesque','Helvetica Neue',Helvetica,Arial,sans-serif
$headings-font-weight = 500 // Medium
$headings-line-height = 1.2
$headings-line-height = 1.1
$headings-color = $brand-dark
@ -91,8 +91,8 @@ $border-radius-base = 3px
$border-radius-small = $border-radius-base
$border-radius-large = $border-radius-base
$padding-base-vertical = 6px
$padding-base-horizontal = 12px
$padding-base-vertical = 12px
$padding-base-horizontal = 32px
$padding-small-vertical = ($padding-base-vertical / 2)
$padding-small-horizontal = ($padding-base-horizontal / 2)
@ -104,12 +104,12 @@ $padding-large-horizontal = ($padding-base-horizontal * 2)
// Forms
/////////////////////////////////////
$input-bg = rgba(255,255,255,.3)
$input-bg-focus = rgba(255,255,255,.7)
$input-bg = #fff
$input-bg-focus = #fff
$input-bg-disabled = $brand-grey-light
$input-font-size = $font-size-base
$input-font-weight = 700
$input-font-weight = $font-weight-base
$input-color = $font-color-base
$input-color-placeholder = rgba(46, 79, 92, .3)

8
_src/index.html
View File

@ -4,15 +4,15 @@ front_page: true
---
{% if paginator.next_page == 2 %}
{% include sticky.html %}
{% include featured.html %}
{% endif %}
<section role="main" id="main" class="row">
{% for post in paginator.posts %}
{% include articles.html %}
{% endfor %}
</section>