mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-22 09:56:51 +01:00
MEGA COMMIT, final stylus refactoring
This commit is contained in:
parent
b9640e20dd
commit
6f2e669873
11
Gruntfile.js
11
Gruntfile.js
@ -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'],
|
||||
|
||||
@ -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"
|
||||
@ -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">∞</a>
|
||||
</p>
|
||||
</section>
|
||||
@ -64,12 +64,12 @@
|
||||
<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 %}
|
||||
|
||||
@ -77,7 +77,7 @@
|
||||
{% 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,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
13
_src/_includes/featured.html
Normal 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>
|
||||
@ -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>
|
||||
|
||||
@ -9,20 +9,20 @@
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
@ -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">∞</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
@ -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/).
|
||||
|
||||
@ -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/).
|
||||
|
||||
@ -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/).
|
||||
|
||||
|
||||
@ -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:
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ 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
|
||||
|
||||
@ -16,4 +16,4 @@ Show your geeky love for extraterrestrial universities! This is a simple Futuram
|
||||
|
||||
As usual you can [grab the whole zip package from my Goodies page](http://www.kremalicious.com/goodies/#wall) and have fun.
|
||||
|
||||
<a class="btn btn-primary icon-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>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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
|
||||
|
||||
@ -129,7 +129,7 @@ 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.
|
||||
|
||||
|
||||
@ -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!
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -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 & 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 & 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
|
||||
|
||||
@ -5,7 +5,7 @@ title: Using <kbd> 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
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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; }
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
@ -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 }
|
||||
}
|
||||
@ -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 }
|
||||
|
||||
}
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
@ -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));
|
||||
}
|
||||
@ -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%; }
|
||||
|
||||
}
|
||||
@ -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";
|
||||
}
|
||||
@ -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';
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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 }
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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; }
|
||||
}
|
||||
@ -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; }
|
||||
}
|
||||
}
|
||||
@ -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; }
|
||||
}
|
||||
@ -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 */
|
||||
@ -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;
|
||||
}
|
||||
@ -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; }
|
||||
@ -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;
|
||||
}
|
||||
@ -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) ";
|
||||
@ -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
44
_src/assets/styl/animations.styl
Normal 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
|
||||
@ -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
|
||||
@ -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
21
_src/assets/styl/comments.styl
Normal 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
33
_src/assets/styl/content-featured.styl
Normal 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
19
_src/assets/styl/content-link.styl
Normal 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
73
_src/assets/styl/content-photo.styl
Normal 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
35
_src/assets/styl/content-related.styl
Normal 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
|
||||
@ -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
76
_src/assets/styl/footer.styl
Normal 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
|
||||
@ -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%)
|
||||
|
||||
@ -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
75
_src/assets/styl/header.styl
Normal 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
|
||||
@ -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"
|
||||
@ -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'
|
||||
|
||||
@ -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
|
||||
img.alignright
|
||||
margin: 0 0 $line-height-computed $line-height-computed
|
||||
@ -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
|
||||
|
||||
148
_src/assets/styl/navigation.styl
Normal file
148
_src/assets/styl/navigation.styl
Normal 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
68
_src/assets/styl/page-404.styl
Normal 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
44
_src/assets/styl/page-about.styl
Normal 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
73
_src/assets/styl/poststyle-2300.styl
Normal 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
80
_src/assets/styl/print.styl
Normal 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
|
||||
@ -10,182 +10,12 @@
|
||||
|
||||
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
|
||||
// site background
|
||||
/////////////////////////////////////
|
||||
@ -204,17 +34,17 @@ a.close,
|
||||
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,7 +54,7 @@ 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
|
||||
@ -234,4 +64,4 @@ a.close,
|
||||
box-shadow: none
|
||||
|
||||
.menu-open &
|
||||
@extend .hide
|
||||
hide()
|
||||
|
||||
62
_src/assets/styl/search.styl
Normal file
62
_src/assets/styl/search.styl
Normal 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
|
||||
@ -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
|
||||
|
||||
@ -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,
|
||||
@ -74,17 +75,16 @@ 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
|
||||
@ -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,
|
||||
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,19 +213,18 @@ 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
|
||||
/////////////////////////////////////
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -4,7 +4,7 @@ front_page: true
|
||||
---
|
||||
|
||||
{% if paginator.next_page == 2 %}
|
||||
{% include sticky.html %}
|
||||
{% include featured.html %}
|
||||
{% endif %}
|
||||
|
||||
<section role="main" id="main" class="row">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user