mirror of
https://github.com/kremalicious/blog.git
synced 2024-06-28 16:48:00 +02: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: {
|
stylus: {
|
||||||
compile: {
|
compile: {
|
||||||
options: {
|
options: {
|
||||||
include css: true
|
'include css': true,
|
||||||
}
|
compress: false
|
||||||
|
},
|
||||||
files: {
|
files: {
|
||||||
'<%= config.site %>/<%= config.assets.css %>/kremalicious3.min.css' : '<%= config.src %>/<%= config.assets.stylus %>/kremalicious3.styl',
|
'<%= 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'
|
'<%= config.site %>/<%= config.assets.css %>/poststyle-2300.min.css' : '<%= config.src %>/<%= config.assets.stylus %>/poststyle-2300.styl'
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// combine css media queries
|
// combine css media queries
|
||||||
|
|
@ -167,7 +168,7 @@ module.exports = function(grunt){
|
||||||
},
|
},
|
||||||
stylus: {
|
stylus: {
|
||||||
files: ['<%= config.src %>/<%= config.assets.stylus %>/*.styl'],
|
files: ['<%= config.src %>/<%= config.assets.stylus %>/*.styl'],
|
||||||
tasks: ['stylus','cmq','cssmin']
|
tasks: ['stylus', 'cmq', 'cssmin']
|
||||||
},
|
},
|
||||||
js: {
|
js: {
|
||||||
files: ['<%= config.src %>/<%= config.assets.js %>/*.js'],
|
files: ['<%= config.src %>/<%= config.assets.js %>/*.js'],
|
||||||
|
|
|
||||||
|
|
@ -68,10 +68,10 @@ picture:
|
||||||
width: "480"
|
width: "480"
|
||||||
source_default:
|
source_default:
|
||||||
width: "320"
|
width: "320"
|
||||||
sticky:
|
featured:
|
||||||
ppi: [1, 2]
|
ppi: [1, 2]
|
||||||
attr:
|
attr:
|
||||||
class: "sticky-image"
|
class: "featured-image"
|
||||||
itemprop: "image"
|
itemprop: "image"
|
||||||
source_default:
|
source_default:
|
||||||
width: "190"
|
width: "190"
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
<header>
|
<header>
|
||||||
<h1 class="entry-title">
|
<h1 class="entry-title">
|
||||||
<a href="{{ post.linkurl }}" title="Go to source: {{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">
|
<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>
|
<span class="linkurl">{{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' | split:'/' | first }}</span>
|
||||||
</a>
|
</a>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
<section class="entry-content">
|
<section class="entry-content">
|
||||||
{{ post.content | markdownify }}
|
{{ post.content | markdownify }}
|
||||||
<p>
|
<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>
|
<a class="permalink-link" href="{{ post.url | append: '/' }}" rel="tooltip" title="Permalink">∞</a>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -26,58 +26,58 @@
|
||||||
|
|
||||||
<a class="photo-link" href="{{ post.url }}">
|
<a class="photo-link" href="{{ post.url }}">
|
||||||
<figure class="hmedia">
|
<figure class="hmedia">
|
||||||
|
|
||||||
{% picture {{ post.image }} %}
|
{% picture {{ post.image }} %}
|
||||||
|
|
||||||
<figcaption class="entry-title fn">{{ post.title | titlecase }}</figcaption>
|
<figcaption class="entry-title fn">{{ post.title | titlecase }}</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
{% else %}
|
{% else %}
|
||||||
|
|
||||||
<article class="hentry format-post">
|
<article class="hentry format-post">
|
||||||
<header>
|
<header>
|
||||||
<h1 class="entry-title"><a href="{{ post.url | append: '/' }}">{{ post.title | titlecase }}</a></h1>
|
<h1 class="entry-title"><a href="{{ post.url | append: '/' }}">{{ post.title | titlecase }}</a></h1>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section class="entry-content">
|
<section class="entry-content">
|
||||||
|
|
||||||
{% if post.image %}
|
{% if post.image %}
|
||||||
<a href="{{ post.url | append: '/' }}">
|
<a href="{{ post.url | append: '/' }}">
|
||||||
{% picture {{ post.image }} class="teaser" %}
|
{% picture {{ post.image }} class="teaser" %}
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% capture has_more %}{{ post.content | has_more }}{% endcapture %}
|
{% capture has_more %}{{ post.content | has_more }}{% endcapture %}
|
||||||
|
|
||||||
{% if has_more == 'true' %}
|
{% if has_more == 'true' %}
|
||||||
{{ post.content | post.excerpt | excerpt | markdownify }}
|
{{ post.content | post.excerpt | excerpt | markdownify }}
|
||||||
{% else %}
|
{% else %}
|
||||||
{% unless post.categories contains "goodies" and page.path contains "goodies" %}
|
{% unless post.categories contains "goodies" and page.path contains "goodies" %}
|
||||||
{{ post.excerpt | markdownify }}
|
{{ post.excerpt | markdownify }}
|
||||||
{% endunless %}
|
{% endunless %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if post.categories contains "goodies" and page.path contains "goodies" %}
|
{% if post.categories contains "goodies" and page.path contains "goodies" %}
|
||||||
<footer class="goodie-actions">
|
<footer class="goodie-actions">
|
||||||
|
|
||||||
<p class="info col3">
|
<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>
|
</p>
|
||||||
|
|
||||||
{% if post.download %}
|
{% if post.download %}
|
||||||
<p class="download col3">
|
<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>
|
</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
</footer>
|
</footer>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% unless page.path contains "goodies" %}
|
{% 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 %}
|
{% endunless %}
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,6 @@
|
||||||
<aside class="comments">
|
<aside class="comments">
|
||||||
|
|
||||||
<p>You should tweet this post</p>
|
<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>
|
</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>
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<footer role="contentinfo" class="footer container">
|
<footer role="contentinfo" class="footer container">
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<div class="vcard author">
|
<div class="vcard author">
|
||||||
<img class="avatar photo" src="/assets/img/avatar.jpeg" />
|
<img class="avatar photo" src="/assets/img/avatar.jpeg" />
|
||||||
<p class="footer-description">Blog of designer & developer <a class="fn" rel="author" href="/about/">{{ site.author }}</a>
|
<p class="footer-description">Blog of designer & developer <a class="fn" rel="author" href="/about/">{{ site.author }}</a>
|
||||||
|
|
@ -10,10 +10,10 @@
|
||||||
<aside class="subscribe">
|
<aside class="subscribe">
|
||||||
<h1 class="subscribe-title">Subscribe</h1>
|
<h1 class="subscribe-title">Subscribe</h1>
|
||||||
<p>
|
<p>
|
||||||
<a class="btn rss icon-rss" href="http://kremalicious.com/feed"></a>
|
<a class="btn rss icon icon-rss" href="http://kremalicious.com/feed"></a>
|
||||||
<a class="btn twitter icon-twitter" href="https://twitter.com/kremaliciouscom"></a>
|
<a class="btn twitter icon 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 google icon 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 facebook icon icon-facebook" href="https://www.facebook.com/pages/kremalicious/154539134564052"></a>
|
||||||
</p>
|
</p>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
|
|
||||||
<div class="topbar container">
|
<div class="topbar container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<header role="banner" class="banner">
|
<header role="banner" class="banner">
|
||||||
<h1 class="banner-title">
|
<h1 class="banner-title">
|
||||||
<a class="banner-logo" href="/">kremalicious</a>
|
<a class="banner-logo" href="/">kremalicious</a>
|
||||||
|
|
@ -9,23 +9,23 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<nav role="navigation" class="nav-main">
|
<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">
|
<div class="nav-popover hide">
|
||||||
<a class="nav-link goodies icon-gift" href="/goodies/">goodies</a>
|
<a class="nav-link goodies icon icon-gift" href="/goodies/">goodies</a>
|
||||||
<a class="nav-link photos icon-pictures" href="/photos/">photos</a>
|
<a class="nav-link photos icon icon-pictures" href="/photos/">photos</a>
|
||||||
<a class="nav-link personal icon-user" href="/personal/">personal</a>
|
<a class="nav-link personal icon icon-user" href="/personal/">personal</a>
|
||||||
<a class="nav-link design icon-tools" href="/design/">design</a>
|
<a class="nav-link design icon icon-tools" href="/design/">design</a>
|
||||||
<a class="nav-link photography icon-camera" href="/photography/">photography</a>
|
<a class="nav-link photography icon icon-camera" href="/photography/">photography</a>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<section class="site-search">
|
<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">
|
<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>
|
<a class="search-close close" href="#">x</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -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>
|
<header>
|
||||||
<h1 class="entry-title">
|
<h1 class="entry-title">
|
||||||
<a href="{{ page.linkurl }}" title="Go to source: {{ page.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">
|
<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>
|
<span class="linkurl">{{ page.linkurl | remove:'http://' | remove:'https://' | remove:'www.' | split:'/' | first }}</span>
|
||||||
</a>
|
</a>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
@ -17,7 +17,7 @@ layout: base
|
||||||
<section class="entry-content">
|
<section class="entry-content">
|
||||||
{{ content }}
|
{{ content }}
|
||||||
<p>
|
<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>
|
<a class="permalink-link" href="{{ page.url | append: '/' }}" rel="tooltip" title="Permalink">∞</a>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</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.
|
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/).
|
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.
|
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/).
|
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:
|
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/).
|
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).
|
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:
|
Here are the details:
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -316,13 +316,13 @@ In short you have to allow communications over port 548 and 5353.
|
||||||
|
|
||||||
## "Connection Failed"
|
## "Connection Failed"
|
||||||
|
|
||||||
If you get one of those errors:
|
If you get one of those errors:
|
||||||
|
|
||||||
````
|
````
|
||||||
Connection Failed - There was an error connection to the server. Check the server name or IP address and try again
|
Connection Failed - There was an error connection to the server. Check the server name or IP address and try again
|
||||||
```
|
```
|
||||||
|
|
||||||
or
|
or
|
||||||
|
|
||||||
```
|
```
|
||||||
There was an error connecting to the server. Check the server name or IP address and try again. If you are unable to resolve the problem contact your system administrator.
|
There was an error connecting to the server. Check the server name or IP address and try again. If you are unable to resolve the problem contact your system administrator.
|
||||||
|
|
@ -419,7 +419,7 @@ Here you can see the icons included in the Server Displays icon pack:
|
||||||
|
|
||||||
Because I've just modified Apple's standard icons these icons are just available via this blog post and they will not show up in my Goodies section. Just download the whole package directly via this link:
|
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
|
# How to use the icons
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -18,11 +18,11 @@ As always these desktop icons are free for you personal and non-commercial use.
|
||||||
|
|
||||||
The whole package includes 7 icons either packed in a nice tagged iContainer for use with Candybar or in Mac + Win + Linux compatible formats. If you have such an Icy Box case grab the icons [from my Goodies page.](http://www.kremalicious.com/goodies/#icons) Have fun!
|
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
|
* Replacement icons for the silver and black Icy Box external aluminium case with USB interface
|
||||||
* Mac + Win + Linux + iContainer
|
* Mac + Win + Linux + iContainer
|
||||||
* Leopard ready (512x512)
|
* Leopard ready (512x512)
|
||||||
* including 7 icons with 2 Time Machine versions
|
* including 7 icons with 2 Time Machine versions
|
||||||
|
|
||||||
[](/media/icybox_teaser2.jpg)
|
[](/media/icybox_teaser2.jpg)
|
||||||
|
|
|
||||||
|
|
@ -12,8 +12,8 @@ categories:
|
||||||
- wallpaper
|
- wallpaper
|
||||||
---
|
---
|
||||||
|
|
||||||
Show your geeky love for extraterrestrial universities! This is a simple Futurama tribute wallpaper displaying the logo of the Mars University as seen in the first season (1ACV11/S02E02). But I've modified it a bit to get it out of the 2D. Including one high-resolution desktop version for widescreen displays (2560x1600) and one iPhone version (320x480).
|
Show your geeky love for extraterrestrial universities! This is a simple Futurama tribute wallpaper displaying the logo of the Mars University as seen in the first season (1ACV11/S02E02). But I've modified it a bit to get it out of the 2D. Including one high-resolution desktop version for widescreen displays (2560x1600) and one iPhone version (320x480).
|
||||||
|
|
||||||
As usual you can [grab the whole zip package from my Goodies page](http://www.kremalicious.com/goodies/#wall) and have fun.
|
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>
|
||||||
|
|
@ -14,7 +14,7 @@ categories:
|
||||||
---
|
---
|
||||||
|
|
||||||
I’ve just released my own coffee cup icon, enjoy:
|
I’ve just released my own coffee cup icon, enjoy:
|
||||||
|
|
||||||
* Desktop icons showing the fuel of most designers. Originally I've made the coffee cup for the donations button on my website earlier this year and now decided to release it as an icon.
|
* Desktop icons showing the fuel of most designers. Originally I've made the coffee cup for the donations button on my website earlier this year and now decided to release it as an icon.
|
||||||
* Mac + Win + Linux + iContainer
|
* Mac + Win + Linux + iContainer
|
||||||
* Leopard ready (512x512)
|
* Leopard ready (512x512)
|
||||||
|
|
@ -23,4 +23,4 @@ I’ve just released my own coffee cup icon, enjoy:
|
||||||
|
|
||||||
## Download
|
## 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:
|
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:
|
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 ;-):
|
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):
|
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
|
## 2. Usage
|
||||||
|
|
||||||
|
|
@ -106,7 +106,7 @@ To me a more cleaner solution is to use the css background-image property to inc
|
||||||
And in your CSS select this class and style it with a background image. Assuming you want the site icon to appear left beside the link text you would also have to add some padding so the text won't overlap the icons:
|
And in your CSS select this class and style it with a background image. Assuming you want the site icon to appear left beside the link text you would also have to add some padding so the text won't overlap the icons:
|
||||||
|
|
||||||
|
|
||||||
{% highlight css %}
|
{% highlight css %}
|
||||||
.delicious {
|
.delicious {
|
||||||
background: url(delicious.png) no-repeat center center;
|
background: url(delicious.png) no-repeat center center;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
|
|
@ -116,7 +116,7 @@ And in your CSS select this class and style it with a background image. Assuming
|
||||||
|
|
||||||
If you want to use just icons and no text you should provide a link text anyway but hide it with css. This is a good practice for accessibility and search engine optimization. Also you would have to provide the dimensions of the icon:
|
If you want to use just icons and no text you should provide a link text anyway but hide it with css. This is a good practice for accessibility and search engine optimization. Also you would have to provide the dimensions of the icon:
|
||||||
|
|
||||||
{% highlight css %}
|
{% highlight css %}
|
||||||
.delicious {
|
.delicious {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
|
|
@ -129,13 +129,13 @@ If you want to use just icons and no text you should provide a link text anyway
|
||||||
|
|
||||||
Sadly Coda's clips aren't in a portable format ([Panic guys](http://panic.com), consider this is a feature request!) so here's a comprehensive list for the non-Coda users of all the links included in the above Coda Clips with plain and the Wordpress version for every site. This comes as a downloadable stripped-down HTML file (meaning there's no HTML site structure included) and as a long list within in this article. First, here's the HTML file download. Just open this locally in your browser or in your favorite editor:
|
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.
|
And here's the huge list with all the share links in case you quickly want to grab just one of them. But be warned that this is a huge list so this is hidden by default.
|
||||||
|
|
||||||
Just click the Toggle All Links button to reveal them and click it again to hide the whole list again. If you want to import one of these links into Coda you can just use the [Coda Clips bookmarklet created by kyle](http://www.rayogram.com/coda-clips-bookmarklet), as he points out [in the comments](http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/#comment-42084).
|
Just click the Toggle All Links button to reveal them and click it again to hide the whole list again. If you want to import one of these links into Coda you can just use the [Coda Clips bookmarklet created by kyle](http://www.rayogram.com/coda-clips-bookmarklet), as he points out [in the comments](http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/#comment-42084).
|
||||||
|
|
||||||
↓ Toggle All Links ↓
|
↓ Toggle All Links ↓
|
||||||
|
|
||||||
## Delicious
|
## Delicious
|
||||||
|
|
||||||
|
|
@ -188,13 +188,13 @@ Just click the Toggle All Links button to reveal them and click it again to hide
|
||||||
|
|
||||||
**Plain**
|
**Plain**
|
||||||
|
|
||||||
|
|
||||||
<code class="html"><!-- Digg This Link
|
<code class="html"><!-- Digg This Link
|
||||||
|
|
||||||
Usage:
|
Usage:
|
||||||
--------------------------------------------------
|
--------------------------------------------------
|
||||||
url : URL-encode all strings as appropriate.
|
url : URL-encode all strings as appropriate.
|
||||||
For example:
|
For example:
|
||||||
http%3A%2F%2Fyourwebsite%2Fyourstoryurl.html
|
http%3A%2F%2Fyourwebsite%2Fyourstoryurl.html
|
||||||
Maximum length is 255 characters
|
Maximum length is 255 characters
|
||||||
title : Also URL-encode the story title
|
title : Also URL-encode the story title
|
||||||
|
|
|
||||||
|
|
@ -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.
|
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!
|
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.
|
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
|
## 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.
|
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
|
## 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:
|
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
|
## License
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@ categories:
|
||||||
- wallpaper
|
- wallpaper
|
||||||
---
|
---
|
||||||
|
|
||||||
The recent Futurama episode "[Attack of the Killer App](http://en.wikipedia.org/wiki/Attack_of_the_Killer_App)" mocked a phone and a company you probably all have heard of. I've made some wallpapers with the logo of MomCorp presented everywhere in this episode.
|
The recent Futurama episode "[Attack of the Killer App](http://en.wikipedia.org/wiki/Attack_of_the_Killer_App)" mocked a phone and a company you probably all have heard of. I've made some wallpapers with the logo of MomCorp presented everywhere in this episode.
|
||||||
|
|
||||||
The wallpaper comes in four versions with two color variations and two text variations with Mom's favorite tagline. Here's an overview:
|
The wallpaper comes in four versions with two color variations and two text variations with Mom's favorite tagline. Here's an overview:
|
||||||
|
|
||||||
|
|
@ -23,5 +23,5 @@ The wallpaper comes in four versions with two color variations and two text vari
|
||||||
|
|
||||||
You can grab the full zip-package with versions for Desktop, iPad, iPhone & Android included:
|
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
|
image: Badged-Teaser-kremalicious@2x.png
|
||||||
author: Matthias Kretschmann
|
author: Matthias Kretschmann
|
||||||
updated: 2013-11-10 07:56:46+00:00
|
updated: 2013-11-10 07:56:46+00:00
|
||||||
sticky: true
|
featured: true
|
||||||
|
|
||||||
date: 2011-12-15 07:56:46+00:00
|
date: 2011-12-15 07:56:46+00:00
|
||||||
wordpress_id: 1468
|
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.
|
You can just install the plugin via the automatic backend installer under _Plugins > Add New_, activate and enjoy the red badges.
|
||||||
|
|
||||||
<p class="clearfix">
|
<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>
|
</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:
|
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:
|
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
|
### Usage
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ title: Using <kbd> for fun and profit
|
||||||
image: kremalicious-kbdfun-teaser.png
|
image: kremalicious-kbdfun-teaser.png
|
||||||
style: poststyle-2300.min.css
|
style: poststyle-2300.min.css
|
||||||
author: Matthias Kretschmann
|
author: Matthias Kretschmann
|
||||||
sticky: true
|
featured: true
|
||||||
|
|
||||||
date: 2012-07-16 14:36:58+00:00
|
date: 2012-07-16 14:36:58+00:00
|
||||||
wordpress_id: 2300
|
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.
|
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
|
## Usage
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ title: Project Purple
|
||||||
image: Teaser-Project-Purple.png
|
image: Teaser-Project-Purple.png
|
||||||
download: project-purple-kremalicious.zip
|
download: project-purple-kremalicious.zip
|
||||||
author: Matthias Kretschmann
|
author: Matthias Kretschmann
|
||||||
sticky: true
|
featured: true
|
||||||
|
|
||||||
date: 2012-08-07 13:15:44+00:00
|
date: 2012-08-07 13:15:44+00:00
|
||||||
wordpress_id: 2350
|
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:
|
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)
|
* [Desktop/rMBP/iPad 3 (3200x2048)](/media/project-purple-kremalicious.png)
|
||||||
* [Laptop/Nexus 7/Galaxy Nexus (1280x800)](/media/project-purple-nexus-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
|
// kremalicious3
|
||||||
// --------------
|
// --------------
|
||||||
// Mixins
|
// Alerts
|
||||||
//
|
//
|
||||||
|
|
||||||
.alert
|
.alert
|
||||||
padding: $padding-base-horizontal
|
padding: $padding-base-vertical $padding-base-horizontal
|
||||||
margin-bottom: $line-height-computed
|
margin-bottom: $line-height-computed
|
||||||
border-radius: $border-radius-base
|
border-radius: $border-radius-base
|
||||||
font-size: $font-size-small
|
font-size: $font-size-small
|
||||||
border: 1px solid transparent
|
border: 1px solid transparent
|
||||||
|
|
||||||
// alignment and spacing of inner content
|
// alignment and spacing of inner content
|
||||||
> p,
|
> p,
|
||||||
|
|
@ -19,17 +19,17 @@
|
||||||
margin-top: 5px
|
margin-top: 5px
|
||||||
|
|
||||||
.alert-success
|
.alert-success
|
||||||
color: #468847
|
color: #468847
|
||||||
background: #dff0d8
|
background: #dff0d8
|
||||||
border-color: #b5c6a8
|
border-color: #b5c6a8
|
||||||
|
|
||||||
.alert-danger,
|
.alert-danger,
|
||||||
.alert-error
|
.alert-error
|
||||||
color: #b94a48
|
color: #b94a48
|
||||||
background: #f2dede
|
background: #f2dede
|
||||||
border-color: #dcc5ca
|
border-color: #dcc5ca
|
||||||
|
|
||||||
.alert-info
|
.alert-info
|
||||||
color: #3a87ad
|
color: #3a87ad
|
||||||
background: #d9edf7
|
background: #d9edf7
|
||||||
border-color: #a6ced8
|
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
|
transition: all .2s ease-in-out
|
||||||
|
|
||||||
// Default Button
|
// 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)
|
background-color: rgba(255,255,255,.1)
|
||||||
border: 1px solid rgba(94,131,162,.3)
|
border: 1px solid rgba(94,131,162,.3)
|
||||||
border-bottom-color: rgba(94,131,162,.4)
|
border-bottom-color: rgba(94,131,162,.4)
|
||||||
|
|
@ -25,81 +25,69 @@
|
||||||
font-weight: $headings-font-weight
|
font-weight: $headings-font-weight
|
||||||
color: $brand-grey
|
color: $brand-grey
|
||||||
text-transform: uppercase
|
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
|
&:focus
|
||||||
background-color: rgba(255,255,255,.5)
|
background-color: rgba(255,255,255,.5)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background-color: transparent
|
background-color: transparent
|
||||||
border-top-color: rgba(94,131,162,.5)
|
border-top-color: rgba(94,131,162,.5)
|
||||||
box-shadow: 0 1px 0 #fff
|
box-shadow: 0 1px 0 #fff
|
||||||
transition: none
|
transition: none
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
outline: 0
|
outline: 0
|
||||||
border-color: $input-border-focus
|
border-color: $input-border-focus
|
||||||
|
|
||||||
// Disabled State
|
// Disabled State
|
||||||
&.disabled,
|
&.disabled,
|
||||||
&[disabled],
|
&[disabled],
|
||||||
fieldset[disabled] &
|
fieldset[disabled] &
|
||||||
cursor: not-allowed
|
cursor: not-allowed
|
||||||
pointer-events: none // Future-proof disabling of clicks
|
pointer-events: none // Future-proof disabling of clicks
|
||||||
opacity: .6
|
opacity: .6
|
||||||
box-shadow: none
|
box-shadow: none
|
||||||
|
|
||||||
.btn span
|
.btn span
|
||||||
font-size: .9em
|
font-size: .9em
|
||||||
color: rgba(19, 56, 50, .6)
|
color: rgba(19, 56, 50, .6)
|
||||||
margin-left: .3em
|
margin-left: .3em
|
||||||
|
|
||||||
// Primary Button
|
// Primary Button
|
||||||
.btn-primary
|
.btn-primary
|
||||||
color: darken($link-color, 30%)
|
color: darken($link-color, 50%)
|
||||||
text-shadow: 0 1px 0 rgba(255,255,255,.3)
|
text-shadow: 0 1px 0 rgba(255,255,255,.3)
|
||||||
background: lighten(@link-color, 15%)
|
background: lighten($link-color, 15%)
|
||||||
border-color: rgba(40,101,93,.4)
|
border-color: $link-color
|
||||||
border-bottom-color: rgba(40,101,93,.5)
|
box-shadow: 0 1px 3px $brand-grey-light, inset 0 1px 0 rgba(255,255,255,.4)
|
||||||
box-shadow: 0 1px 3px rgba(151,156,159,.1), inset 0 1px 0 rgba(255,255,255,.4)
|
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus
|
&:focus
|
||||||
color: darken($link-color, 30%)
|
color: darken($link-color, 50%)
|
||||||
background-color: lighten($link-color, 25%)
|
background-color: lighten($link-color, 25%)
|
||||||
text-shadow: 0 1px 0 rgba(255,255,255,.3)
|
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)
|
|
||||||
|
|
||||||
|
&: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
|
.more-link
|
||||||
@extend .btn
|
font-family: $headings-font-family
|
||||||
background: none
|
font-weight: $headings-font-weight
|
||||||
border: none
|
font-size: $font-size-small
|
||||||
box-shadow: none
|
color: $link-color
|
||||||
padding: 0
|
text-transform: uppercase
|
||||||
margin: 0
|
|
||||||
|
|
||||||
|
// icon
|
||||||
i:before
|
i:before
|
||||||
top: .15em
|
top: .15em
|
||||||
position: relative
|
position: relative
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus
|
|
||||||
background: none
|
|
||||||
|
|
||||||
&:active
|
|
||||||
background: $link-color
|
|
||||||
box-shadow: none
|
|
||||||
|
|
||||||
|
|
||||||
.btn-block
|
.btn-block
|
||||||
display: block
|
display: block
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
|
|
@ -109,34 +97,54 @@
|
||||||
display: inline-block
|
display: inline-block
|
||||||
padding: 1px 3px 0 3px
|
padding: 1px 3px 0 3px
|
||||||
height: 21px
|
height: 21px
|
||||||
border: 1px solid #ccc
|
border: 1px solid #ccc
|
||||||
border-radius: 3px
|
border-radius: 3px
|
||||||
font: bold 11px/17px Helvetica, Arial, sans-serif
|
font: bold 11px/17px Helvetica, Arial, sans-serif
|
||||||
text-align: left
|
text-align: left
|
||||||
color: #333
|
color: #333
|
||||||
text-transform: none
|
text-transform: none
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .5)
|
text-shadow: 0 1px 0 rgba(255, 255, 255, .5)
|
||||||
background-color: #f8f8f8
|
background-color: #f8f8f8
|
||||||
background-image: linear-gradient(top, #fff, #dedede);
|
background-image: linear-gradient(top, #fff, #dedede)
|
||||||
vertical-align: top
|
vertical-align: top
|
||||||
box-shadow: none
|
box-shadow: none
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active
|
&:active
|
||||||
border-color: #bbb
|
border-color: #bbb
|
||||||
background-color: #d9d9d9
|
background-color: #d9d9d9
|
||||||
background-image: linear-gradient(top, #f8f8f8, #d9d9d9);
|
background-image: linear-gradient(top, #f8f8f8, #d9d9d9)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
top: 0
|
top: 0
|
||||||
background-color: #efefef
|
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
|
// icon
|
||||||
&:before
|
&:before
|
||||||
font-size: 15px
|
font-size: 15px
|
||||||
margin-right: 2px
|
margin-right: 2px
|
||||||
top: 1px
|
top: 1px
|
||||||
color: #0089cb
|
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
|
border-radius: $border-radius-base
|
||||||
|
|
||||||
// make 'em scrollable
|
// make 'em scrollable
|
||||||
overflow: scroll
|
overflow: scroll
|
||||||
-webkit-overflow-scrolling: touch
|
-webkit-overflow-scrolling: touch
|
||||||
max-height: 300px
|
max-height: 300px
|
||||||
|
|
||||||
// Account for some code outputs that place code tags in pre tags
|
// Account for some code outputs that place code tags in pre tags
|
||||||
code
|
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
|
.page-title
|
||||||
@extend .h2, .heading-band
|
@extend .h2, .heading-band
|
||||||
color: $brand-grey-light
|
color: $brand-grey-light
|
||||||
margin-top: $line-height-computed/2
|
margin-top: ($line-height-computed/2)
|
||||||
margin-bottom: $line-height-computed/2
|
margin-bottom: ($line-height-computed/2)
|
||||||
|
|
||||||
// icons
|
// icons
|
||||||
&:before
|
&:before
|
||||||
font-size: 32px
|
font-size: 32px
|
||||||
color: fade($text-color-dimmed, 70%)
|
color: rgba($text-color-dimmed, .7)
|
||||||
margin-right: .5em
|
margin-right: .5em
|
||||||
|
|
||||||
@media $breakpoint2
|
@media $breakpoint2
|
||||||
margin-left: -108%
|
margin-left: -108%
|
||||||
|
|
||||||
.page-photos &
|
.page-photos &
|
||||||
margin-bottom: $line-height-computed*4
|
margin-bottom: ($line-height-computed*4)
|
||||||
|
|
||||||
.hentry
|
.hentry
|
||||||
@extend .divider-bottom
|
@extend .divider-bottom
|
||||||
padding: $line-height-computed*2 0
|
padding: ($line-height-computed*2) 0
|
||||||
|
|
||||||
@media $breakpoint2
|
@media $breakpoint2
|
||||||
padding: $line-height-computed*4 0
|
padding: ($line-height-computed*4) 0
|
||||||
|
|
||||||
&:first-child
|
&:first-child
|
||||||
padding-top: $line-height-computed
|
padding-top: $line-height-computed
|
||||||
|
|
||||||
.page-single &
|
.page-single &
|
||||||
padding-bottom: $line-height-computed*2
|
padding-bottom: ($line-height-computed*2)
|
||||||
border: none
|
border: none
|
||||||
|
|
||||||
&:before
|
&:before
|
||||||
@extend .hide
|
@extend .hide
|
||||||
|
|
||||||
// Post Title
|
// Post Title
|
||||||
/////////////////////////////////////
|
/////////////////////////////////////
|
||||||
|
|
||||||
.entry-title {
|
.entry-title
|
||||||
@extend .h1, .textcenter
|
@extend .h1, .textcenter
|
||||||
color: $headings-color
|
color: $headings-color
|
||||||
margin-top: 0
|
margin-top: 0
|
||||||
margin-bottom: $line-height-computed
|
margin-bottom: $line-height-computed
|
||||||
|
|
||||||
.format-link &
|
.format-link &
|
||||||
@extend .h3
|
@extend .h3
|
||||||
|
|
||||||
|
|
||||||
// Post Content
|
// Post Content
|
||||||
/////////////////////////////////////
|
/////////////////////////////////////
|
||||||
|
|
||||||
.entry-content
|
.entry-content
|
||||||
h1,
|
h1,
|
||||||
h2
|
h2
|
||||||
@extend .heading-band
|
@extend .heading-band
|
||||||
|
|
||||||
|
|
@ -68,30 +71,12 @@
|
||||||
margin-bottom: 0
|
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
|
// Post meta
|
||||||
/////////////////////////////////////
|
/////////////////////////////////////
|
||||||
|
|
||||||
.entry-meta
|
.entry-meta
|
||||||
@extend .clearfix
|
@extend .clearfix
|
||||||
margin-top: $line-height-computed*2
|
margin-top: ($line-height-computed*2)
|
||||||
font-size: $font-size-small
|
font-size: $font-size-small
|
||||||
|
|
||||||
.byline,
|
.byline,
|
||||||
|
|
@ -101,10 +86,10 @@ time,
|
||||||
|
|
||||||
.byline,
|
.byline,
|
||||||
time
|
time
|
||||||
font-style: italic
|
font-style: italic
|
||||||
|
|
||||||
.byline
|
.byline
|
||||||
margin-bottom: 0
|
margin-bottom: 0
|
||||||
color: $text-color-light
|
color: $text-color-light
|
||||||
|
|
||||||
.by
|
.by
|
||||||
|
|
@ -139,7 +124,7 @@ time
|
||||||
display: block
|
display: block
|
||||||
|
|
||||||
.download
|
.download
|
||||||
margin-top: $line-height-computed/2
|
margin-top: ($line-height-computed/2)
|
||||||
|
|
||||||
@media $breakpoint2
|
@media $breakpoint2
|
||||||
margin-top: 0
|
margin-top: 0
|
||||||
|
|
@ -152,28 +137,28 @@ time
|
||||||
@media $breakpoint2
|
@media $breakpoint2
|
||||||
width: 125%
|
width: 125%
|
||||||
margin-left: -12.5%
|
margin-left: -12.5%
|
||||||
.clearfix
|
clearfix()
|
||||||
|
|
||||||
.hentry
|
.hentry
|
||||||
@media $breakpoint1
|
@media $breakpoint1
|
||||||
width: 49%
|
width: 49%
|
||||||
float: left
|
float: left
|
||||||
clear: none
|
clear: none
|
||||||
padding-top: 0
|
padding-top: 0
|
||||||
padding-bottom: 0
|
padding-bottom: 0
|
||||||
margin-bottom: .7em
|
margin-bottom: .7em
|
||||||
margin-top: 0
|
margin-top: 0
|
||||||
margin-left: 0
|
margin-left: 0
|
||||||
margin-right: 1%
|
margin-right: 1%
|
||||||
border: none
|
border: none
|
||||||
|
|
||||||
&:before
|
&:before
|
||||||
display: none
|
display: none
|
||||||
|
|
||||||
&:nth-child(2n+1)
|
&:nth-child(2n+1)
|
||||||
margin-right: 0
|
margin-right: 0
|
||||||
|
|
||||||
&:last-child
|
&:last-child
|
||||||
margin-bottom: 3em
|
margin-bottom: 3em
|
||||||
|
|
||||||
.grid-sizer
|
.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
|
-webkit-appearance: none // screw you, iOS default inset box-shadow
|
||||||
|
|
||||||
// Placeholder
|
// 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
|
&:hover
|
||||||
lighten($input-bg, 30%)
|
lighten($input-bg, 30%)
|
||||||
|
|
|
||||||
|
|
@ -7,17 +7,16 @@
|
||||||
|
|
||||||
// Prevents padding to be added
|
// Prevents padding to be added
|
||||||
*
|
*
|
||||||
box-sizing: border-box
|
box-sizing: border-box
|
||||||
|
|
||||||
// 320px and up
|
// 320px and up
|
||||||
.container
|
.container
|
||||||
padding: 0 7%
|
padding: 0 7%
|
||||||
width: 100%
|
width: 100%
|
||||||
|
|
||||||
.row
|
.row
|
||||||
margin-top: $line-height-computed
|
margin-top: $line-height-computed
|
||||||
margin-bottom: $line-height-computed
|
margin-bottom: $line-height-computed
|
||||||
|
|
||||||
|
|
||||||
.col1,
|
.col1,
|
||||||
.col2,
|
.col2,
|
||||||
|
|
@ -25,10 +24,10 @@
|
||||||
.col4,
|
.col4,
|
||||||
.col5,
|
.col5,
|
||||||
.col6
|
.col6
|
||||||
width: 100%
|
width: 100%
|
||||||
margin-left: 0
|
margin-left: 0
|
||||||
// ensures empty columns won't collapse
|
// ensures empty columns won't collapse
|
||||||
min-height: 1px
|
min-height: 1px
|
||||||
|
|
||||||
// clear
|
// clear
|
||||||
.container,
|
.container,
|
||||||
|
|
@ -36,46 +35,45 @@
|
||||||
@extend .clearfix
|
@extend .clearfix
|
||||||
|
|
||||||
@media $breakpoint2
|
@media $breakpoint2
|
||||||
|
|
||||||
.container
|
.container
|
||||||
padding: 0 15%
|
padding: 0 15%
|
||||||
|
|
||||||
.row
|
.row
|
||||||
max-width: 35em
|
max-width: 35em
|
||||||
margin: $line-height-computed*2 auto
|
margin: ($line-height-computed*2) auto
|
||||||
padding-left: 0
|
padding-left: 0
|
||||||
padding-right: 0
|
padding-right: 0
|
||||||
|
|
||||||
.col1,
|
.col1,
|
||||||
.col2,
|
.col2,
|
||||||
.col3,
|
.col3,
|
||||||
.col4,
|
.col4,
|
||||||
.col5,
|
.col5,
|
||||||
.col6
|
.col6
|
||||||
float: left
|
float: left
|
||||||
margin-left: 4%
|
margin-left: 4%
|
||||||
|
|
||||||
.col1:first-child,
|
.col1:first-child,
|
||||||
.col2:first-child,
|
.col2:first-child,
|
||||||
.col3:first-child,
|
.col3:first-child,
|
||||||
.col4:first-child,
|
.col4:first-child,
|
||||||
.col5:first-child,
|
.col5:first-child,
|
||||||
.col6,
|
.col6,
|
||||||
.col3:nth-child(2n+3),
|
.col3:nth-child(2n+3),
|
||||||
.col2:nth-child(3n+4),
|
.col2:nth-child(3n+4),
|
||||||
.col1:nth-child(6n+7)
|
.col1:nth-child(6n+7)
|
||||||
margin-left: 0
|
margin-left: 0
|
||||||
clear: both
|
clear: both
|
||||||
|
|
||||||
.col1
|
.col1
|
||||||
width: 13%
|
width: 13%
|
||||||
.col2
|
.col2
|
||||||
width: 30.6%
|
width: 30.6%
|
||||||
.col3
|
.col3
|
||||||
width: 48%
|
width: 48%
|
||||||
.col4
|
.col4
|
||||||
width: 65%
|
width: 65%
|
||||||
.col5
|
.col5
|
||||||
width: 82%
|
width: 82%
|
||||||
.col6
|
.col6
|
||||||
width: 100%
|
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-face
|
||||||
font-family: 'entypo'
|
font-family: 'entypo'
|
||||||
src:url('../fonts/entypo.eot')
|
src: url('../fonts/entypo.eot')
|
||||||
src:url('../fonts/entypo.eot?#iefix') format('embedded-opentype'),
|
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')
|
||||||
url('../fonts/entypo.woff') format('woff'),
|
font-weight: normal
|
||||||
url('../fonts/entypo.ttf') format('truetype'),
|
font-style: normal
|
||||||
url('../fonts/entypo.svg#entypo') format('svg')
|
|
||||||
font-weight: normal
|
|
||||||
font-style: normal
|
|
||||||
|
|
||||||
[class*="icon-"]:before
|
.icon:before
|
||||||
color: $text-color-light
|
color: $text-color-light
|
||||||
font-size: 20px
|
font-size: 20px
|
||||||
font-family: 'entypo'
|
font-family: 'entypo'
|
||||||
speak: none
|
speak: none
|
||||||
font-style: normal
|
font-style: normal
|
||||||
font-weight: normal
|
font-weight: normal
|
||||||
font-variant: normal
|
font-variant: normal
|
||||||
text-transform: none
|
text-transform: none
|
||||||
line-height: 1
|
line-height: 1
|
||||||
-webkit-font-smoothing: antialiased
|
-webkit-font-smoothing: antialiased
|
||||||
-moz-osx-font-smoothing: grayscale
|
-moz-osx-font-smoothing: grayscale
|
||||||
|
|
||||||
.btn&
|
.btn&
|
||||||
font-size: 18px
|
font-size: 18px
|
||||||
|
|
@ -39,76 +36,75 @@
|
||||||
.btn-primary&
|
.btn-primary&
|
||||||
color: darken($link-color, 15%)
|
color: darken($link-color, 15%)
|
||||||
|
|
||||||
|
|
||||||
.icon-twitter:before
|
.icon-twitter:before
|
||||||
content: "\e600"
|
content: "\e600"
|
||||||
|
|
||||||
.icon-rss:before
|
.icon-rss:before
|
||||||
content: "\e603"
|
content: "\e603"
|
||||||
|
|
||||||
.icon-user:before,
|
.icon-user:before,
|
||||||
.icon-personal:before
|
.icon-personal:before
|
||||||
content: "\e604"
|
content: "\e604"
|
||||||
|
|
||||||
.icon-leaf:before
|
.icon-leaf:before
|
||||||
content: "\e605"
|
content: "\e605"
|
||||||
|
|
||||||
.icon-link:before
|
.icon-link:before
|
||||||
content: "\e606"
|
content: "\e606"
|
||||||
|
|
||||||
.icon-pictures:before,
|
.icon-pictures:before,
|
||||||
.icon-photos:before
|
.icon-photos:before
|
||||||
content: "\e607"
|
content: "\e607"
|
||||||
|
|
||||||
.icon-camera:before,
|
.icon-camera:before,
|
||||||
.icon-photography:before
|
.icon-photography:before
|
||||||
content: "\e608"
|
content: "\e608"
|
||||||
|
|
||||||
.icon-arrow-down-circle:before,
|
.icon-arrow-down-circle:before,
|
||||||
.icon-download:before
|
.icon-download:before
|
||||||
content: "\e609"
|
content: "\e609"
|
||||||
|
|
||||||
.icon-forward:before
|
.icon-forward:before
|
||||||
content: "\e60a"
|
content: "\e60a"
|
||||||
|
|
||||||
.icon-heart:before
|
.icon-heart:before
|
||||||
content: "\e60b"
|
content: "\e60b"
|
||||||
|
|
||||||
.icon-info:before
|
.icon-info:before
|
||||||
content: "\e60c"
|
content: "\e60c"
|
||||||
|
|
||||||
.icon-github:before
|
.icon-github:before
|
||||||
content: "\e60e"
|
content: "\e60e"
|
||||||
|
|
||||||
.icon-star:before,
|
.icon-star:before,
|
||||||
.entry-content ul li:before
|
.entry-content ul li:before
|
||||||
content: "\e60d"
|
content: "\e60d"
|
||||||
|
|
||||||
.icon-search:before
|
.icon-search:before
|
||||||
content: "\e60f"
|
content: "\e60f"
|
||||||
|
|
||||||
.icon-googleplus:before
|
.icon-googleplus:before
|
||||||
content: "\e601"
|
content: "\e601"
|
||||||
|
|
||||||
.icon-facebook:before
|
.icon-facebook:before
|
||||||
content: "\e602"
|
content: "\e602"
|
||||||
|
|
||||||
.icon-list:before
|
.icon-list:before
|
||||||
content: "\e610"
|
content: "\e610"
|
||||||
|
|
||||||
.icon-tools:before,
|
.icon-tools:before,
|
||||||
.icon-design:before
|
.icon-design:before
|
||||||
content: "\e611"
|
content: "\e611"
|
||||||
|
|
||||||
.icon-arrow-down:before
|
.icon-arrow-down:before
|
||||||
content: "\e612"
|
content: "\e612"
|
||||||
|
|
||||||
.icon-arrow-right:before
|
.icon-arrow-right:before
|
||||||
content: "\e614"
|
content: "\e614"
|
||||||
|
|
||||||
.icon-arrow-left:before
|
.icon-arrow-left:before
|
||||||
content: "\e615"
|
content: "\e615"
|
||||||
|
|
||||||
.icon-gift:before,
|
.icon-gift:before,
|
||||||
.icon-goodies:before
|
.icon-goodies:before
|
||||||
content: "\e613"
|
content: "\e613"
|
||||||
|
|
@ -6,57 +6,45 @@
|
||||||
|
|
||||||
|
|
||||||
// Normalize all the things
|
// 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
|
// Core variables and mixins
|
||||||
@import 'variables'
|
@import 'variables'
|
||||||
@import 'mixins'
|
@import 'mixins'
|
||||||
|
|
||||||
// grid
|
// Core CSS
|
||||||
@import 'grid'
|
|
||||||
|
|
||||||
// Typography
|
|
||||||
@import 'typography'
|
|
||||||
|
|
||||||
// Scaffolding
|
|
||||||
@import 'scaffolding'
|
@import 'scaffolding'
|
||||||
|
@import 'typography'
|
||||||
// Icons
|
@import 'grid'
|
||||||
@import 'icons'
|
@import 'icons'
|
||||||
|
|
||||||
// Forms & Buttons
|
|
||||||
@import 'forms'
|
@import 'forms'
|
||||||
@import 'buttons'
|
@import 'buttons'
|
||||||
|
|
||||||
// Media: images, video etc.
|
|
||||||
@import 'media'
|
@import 'media'
|
||||||
|
|
||||||
// Tables
|
|
||||||
@import 'tables'
|
@import 'tables'
|
||||||
|
|
||||||
// Code
|
|
||||||
@import 'code'
|
@import 'code'
|
||||||
@import 'syntax'
|
@import 'syntax'
|
||||||
|
|
||||||
// Alerts
|
|
||||||
@import 'alerts'
|
@import 'alerts'
|
||||||
|
@import 'animations'
|
||||||
|
|
||||||
|
// Components
|
||||||
|
@import 'header'
|
||||||
|
@import 'navigation'
|
||||||
|
@import 'search'
|
||||||
|
@import 'footer'
|
||||||
|
|
||||||
// Content
|
// Content
|
||||||
@import 'content'
|
@import 'content'
|
||||||
@import 'content-photo.less'
|
@import 'content-photo'
|
||||||
@import 'content-link.less'
|
@import 'content-link'
|
||||||
@import 'content-related.less'
|
@import 'content-featured'
|
||||||
@import 'comments.less'
|
@import 'content-related'
|
||||||
@import 'sticky.less'
|
@import 'comments'
|
||||||
|
|
||||||
@import 'page-about.less'
|
@import 'page-about'
|
||||||
@import 'page-404.less'
|
@import 'page-404'
|
||||||
|
|
||||||
// Navigation
|
|
||||||
@import 'navigation.less'
|
|
||||||
|
|
||||||
// Animations
|
|
||||||
@import 'animations.less'
|
|
||||||
|
|
||||||
// Print
|
// Print
|
||||||
@import 'print.less'
|
@import 'print'
|
||||||
|
|
|
||||||
|
|
@ -9,24 +9,23 @@
|
||||||
/////////////////////////////////////
|
/////////////////////////////////////
|
||||||
|
|
||||||
figure, img, svg, video, audio, embed, canvas
|
figure, img, svg, video, audio, embed, canvas
|
||||||
max-width: 100%
|
max-width: 100%
|
||||||
height: auto
|
height: auto
|
||||||
margin: 0 auto
|
margin: 0 auto
|
||||||
display: block
|
display: block
|
||||||
border-radius: $border-radius-base
|
border-radius: $border-radius-base
|
||||||
|
|
||||||
|
|
||||||
// Images
|
// Images
|
||||||
/////////////////////////////////////
|
/////////////////////////////////////
|
||||||
|
|
||||||
img
|
img
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,.2)
|
box-shadow: 0 1px 3px rgba(0,0,0,.2)
|
||||||
|
|
||||||
.teaser,
|
.teaser,
|
||||||
.teaser img
|
.teaser img
|
||||||
margin-top: $line-height-computed*1.5
|
margin-top: ($line-height-computed*1.5)
|
||||||
margin-bottom: $line-height-computed*1.5
|
margin-bottom: ($line-height-computed*1.5)
|
||||||
|
|
||||||
|
|
||||||
// Media Positioning
|
// Media Positioning
|
||||||
|
|
@ -35,13 +34,12 @@ img
|
||||||
img.alignleft,
|
img.alignleft,
|
||||||
img.alignright,
|
img.alignright,
|
||||||
img.aligncenter
|
img.aligncenter
|
||||||
float: none
|
float: none
|
||||||
display: block
|
display: block
|
||||||
margin: $line-height-computed auto
|
margin: $line-height-computed auto
|
||||||
|
|
||||||
@media $breakpoint2
|
@media $breakpoint2
|
||||||
img.alignleft
|
img.alignleft
|
||||||
margin: 0 $line-height-computed $line-height-computed 0
|
margin: 0 $line-height-computed $line-height-computed 0
|
||||||
|
img.alignright
|
||||||
img.alignright
|
margin: 0 0 $line-height-computed $line-height-computed
|
||||||
margin: 0 0 $line-height-computed $line-height-computed
|
|
||||||
|
|
@ -9,9 +9,11 @@
|
||||||
/////////////////////////////////////
|
/////////////////////////////////////
|
||||||
|
|
||||||
clearfix()
|
clearfix()
|
||||||
|
&:before,
|
||||||
&:after
|
&:after
|
||||||
content: ""
|
content: " "
|
||||||
display: table
|
display: table
|
||||||
|
&:after
|
||||||
clear: both
|
clear: both
|
||||||
|
|
||||||
.clearfix
|
.clearfix
|
||||||
|
|
@ -50,26 +52,32 @@ aligncenter()
|
||||||
/////////////////////////////////////
|
/////////////////////////////////////
|
||||||
|
|
||||||
textcenter()
|
textcenter()
|
||||||
text-align: center
|
text-align: center
|
||||||
|
|
||||||
.textcenter
|
.textcenter
|
||||||
textcenter()
|
textcenter()
|
||||||
|
|
||||||
|
|
||||||
// Toggling content
|
// Toggling content
|
||||||
/////////////////////////////////////
|
/////////////////////////////////////
|
||||||
|
|
||||||
// Hide from both screenreaders and browsers: h5bp.com/u
|
// Hide from both screenreaders and browsers: h5bp.com/u
|
||||||
.hide
|
hide()
|
||||||
display: none !important
|
display: none !important
|
||||||
visibility: hidden
|
visibility: hidden
|
||||||
|
|
||||||
.show
|
show()
|
||||||
display: block
|
display: block
|
||||||
visibility: visible
|
visibility: visible
|
||||||
|
|
||||||
|
.hide
|
||||||
|
hide()
|
||||||
|
|
||||||
|
.show
|
||||||
|
show()
|
||||||
|
|
||||||
// Hide only visually, but have it available for screenreaders: h5bp.com/v
|
// Hide only visually, but have it available for screenreaders: h5bp.com/v
|
||||||
.visuallyhidden
|
visuallyhidden()
|
||||||
border: 0
|
border: 0
|
||||||
clip: rect(0 0 0 0)
|
clip: rect(0 0 0 0)
|
||||||
height: 1px
|
height: 1px
|
||||||
|
|
@ -90,6 +98,9 @@ textcenter()
|
||||||
position: static
|
position: static
|
||||||
width: auto
|
width: auto
|
||||||
|
|
||||||
|
.visuallyhidden
|
||||||
|
visuallyhidden()
|
||||||
|
|
||||||
// Hide visually and from screenreaders, but maintain layout
|
// Hide visually and from screenreaders, but maintain layout
|
||||||
.invisible
|
.invisible
|
||||||
visibility: hidden
|
visibility: hidden
|
||||||
|
|
@ -100,21 +111,21 @@ textcenter()
|
||||||
|
|
||||||
.ir,
|
.ir,
|
||||||
.hide-text
|
.hide-text
|
||||||
font: 0/0 a
|
font: 0/0 a
|
||||||
color: transparent
|
color: transparent
|
||||||
text-shadow: none
|
text-shadow: none
|
||||||
background-color: transparent
|
background-color: transparent
|
||||||
border: 0
|
border: 0
|
||||||
|
|
||||||
|
|
||||||
// Dimmed Text
|
// Dimmed Text
|
||||||
/////////////////////////////////////
|
/////////////////////////////////////
|
||||||
|
|
||||||
dimmed()
|
dimmed()
|
||||||
color: $text-color-dimmed
|
color: $text-color-dimmed
|
||||||
p
|
p
|
||||||
color: $text-color-dimmed
|
color: $text-color-dimmed
|
||||||
li
|
li
|
||||||
color: $text-color-dimmed
|
color: $text-color-dimmed
|
||||||
|
|
||||||
.dimmed
|
.dimmed
|
||||||
|
|
@ -124,11 +135,23 @@ dimmed()
|
||||||
// Text overflow
|
// Text overflow
|
||||||
/////////////////////////////////////
|
/////////////////////////////////////
|
||||||
|
|
||||||
.ellipsis
|
ellipsis()
|
||||||
text-overflow: ellipsis
|
text-overflow: ellipsis
|
||||||
|
overflow: hidden
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
|
.ellipsis
|
||||||
|
ellipsis()
|
||||||
|
|
||||||
|
|
||||||
|
// Default transition
|
||||||
|
/////////////////////////////////////
|
||||||
|
|
||||||
|
transition()
|
||||||
|
transition: all ease-in-out .15s
|
||||||
|
|
||||||
|
.transition
|
||||||
|
transition()
|
||||||
|
|
||||||
// Dashed Dividers
|
// Dashed Dividers
|
||||||
/////////////////////////////////////
|
/////////////////////////////////////
|
||||||
|
|
@ -138,52 +161,49 @@ dimmed()
|
||||||
position: relative
|
position: relative
|
||||||
|
|
||||||
&:before
|
&:before
|
||||||
content: ""
|
content: ""
|
||||||
position: absolute
|
position: absolute
|
||||||
left: 0
|
left: 0
|
||||||
height: 1px
|
height: 1px
|
||||||
|
|
||||||
.divider-top
|
.divider-top
|
||||||
border-top: 1px dashed #afc3cb
|
border-top: 1px dashed #afc3cb
|
||||||
padding-top: 1em
|
padding-top: 1em
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
content: ""
|
content: ""
|
||||||
position: absolute
|
position: absolute
|
||||||
left: 0
|
left: 0
|
||||||
height: 1px
|
height: 1px
|
||||||
top: 0
|
top: 0
|
||||||
width: 100%
|
width: 100%
|
||||||
border-top: 1px dashed #fff
|
border-top: 1px dashed #fff
|
||||||
|
|
||||||
.divider-bottom
|
.divider-bottom
|
||||||
border-bottom: 1px dashed #afc3cb
|
border-bottom: 1px dashed #afc3cb
|
||||||
padding-bottom: 1em
|
padding-bottom: 1em
|
||||||
|
|
||||||
&:before
|
|
||||||
bottom: -2px
|
|
||||||
width: 100%
|
|
||||||
border-bottom: 1px dashed #fff
|
|
||||||
|
|
||||||
|
&:before
|
||||||
|
bottom: -2px
|
||||||
|
width: 100%
|
||||||
|
border-bottom: 1px dashed #fff
|
||||||
|
|
||||||
// Heading band
|
// Heading band
|
||||||
/////////////////////////////////////
|
/////////////////////////////////////
|
||||||
|
|
||||||
.heading-band
|
.heading-band
|
||||||
display: inline-block
|
display: inline-block
|
||||||
clear: both
|
clear: both
|
||||||
background: rgba(255,255,255,.55)
|
background: rgba(255,255,255,.55)
|
||||||
padding: $line-height-computed/2 $line-height-computed $line-height-computed/2 100%
|
padding: ($line-height-computed/2) $line-height-computed ($line-height-computed/2) 100%
|
||||||
margin-left: -100%;
|
margin-left: -100%
|
||||||
.border-right-radius($border-radius-base)
|
|
||||||
|
|
||||||
|
|
||||||
// Lead paragraph
|
// Lead paragraph
|
||||||
/////////////////////////////////////
|
/////////////////////////////////////
|
||||||
|
|
||||||
.lead
|
.lead
|
||||||
font-size: $font-size-large;
|
font-size: $font-size-large
|
||||||
line-height: $line-height-computed*1.15
|
line-height: ($line-height-computed*1.15)
|
||||||
|
|
||||||
|
|
||||||
// Button sizing
|
// Button sizing
|
||||||
|
|
@ -217,4 +237,4 @@ input-size(input-height, padding-vertical, padding-horizontal, font-size, line-h
|
||||||
|
|
||||||
textarea&,
|
textarea&,
|
||||||
select[multiple]&
|
select[multiple]&
|
||||||
height: auto
|
height: auto
|
||||||
|
|
|
||||||
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,189 +10,19 @@
|
||||||
|
|
||||||
html
|
html
|
||||||
font-size: 62.5%
|
font-size: 62.5%
|
||||||
-webkit-tap-highlight-color: fade($link-color, 20%);
|
-webkit-tap-highlight-color: rgba($link-color, .2)
|
||||||
|
|
||||||
body
|
body
|
||||||
background: $body-bg
|
background: $body-bg
|
||||||
|
|
||||||
|
|
||||||
.document
|
// topbar and footer as fixed
|
||||||
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
|
// site background
|
||||||
/////////////////////////////////////
|
/////////////////////////////////////
|
||||||
|
|
||||||
.topbar
|
.topbar
|
||||||
height: 71px
|
height: 71px
|
||||||
|
|
||||||
.menu-open &
|
.menu-open &
|
||||||
height: auto
|
height: auto
|
||||||
|
|
||||||
|
|
@ -202,19 +32,19 @@ a.close,
|
||||||
@media only screen and (min-width: 40.625em) and (min-height: 650px)
|
@media only screen and (min-width: 40.625em) and (min-height: 650px)
|
||||||
body
|
body
|
||||||
position: relative
|
position: relative
|
||||||
|
|
||||||
.document
|
.document
|
||||||
|
transition()
|
||||||
|
position: relative
|
||||||
z-index: 2
|
z-index: 2
|
||||||
margin-top: 71px
|
margin-top: 71px
|
||||||
.transition
|
|
||||||
|
|
||||||
.menu-open &
|
|
||||||
margin-top: 300px
|
|
||||||
|
|
||||||
margin-bottom: 580px;
|
margin-bottom: 580px;
|
||||||
border-top: 1px solid rgba(255,255,255,.7)
|
border-top: 1px solid rgba(255,255,255,.7)
|
||||||
border-bottom: 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,
|
.topbar,
|
||||||
.footer
|
.footer
|
||||||
|
|
@ -224,14 +54,14 @@ a.close,
|
||||||
.topbar
|
.topbar
|
||||||
z-index: 1
|
z-index: 1
|
||||||
top: 0
|
top: 0
|
||||||
box-shadow: inset 0 1px 4px fade($brand-dark, 10%)
|
box-shadow: inset 0 1px 4px rgba($brand-dark, .1)
|
||||||
border: none
|
border: none
|
||||||
|
|
||||||
.footer
|
.footer
|
||||||
z-index: 0
|
z-index: 0
|
||||||
height: 580px
|
height: 580px
|
||||||
bottom: 0
|
bottom: 0
|
||||||
box-shadow: none
|
box-shadow: none
|
||||||
|
|
||||||
.menu-open &
|
.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
|
table
|
||||||
border-collapse: collapse
|
border-collapse: collapse
|
||||||
border-spacing: 0
|
border-spacing: 0
|
||||||
width: 100%
|
width: 100%
|
||||||
max-width: 100%
|
max-width: 100%
|
||||||
background-color: transparent
|
background-color: transparent
|
||||||
margin-bottom: $line-height-computed
|
margin-bottom: $line-height-computed
|
||||||
border-bottom: 1px solid #cfd9e1
|
border-bottom: 1px solid #cfd9e1
|
||||||
|
|
||||||
td
|
td
|
||||||
vertical-align: top
|
vertical-align: top
|
||||||
|
|
||||||
th,
|
th,
|
||||||
td
|
td
|
||||||
padding: .7em .3em
|
padding: .7em .3em
|
||||||
text-align: left
|
text-align: left
|
||||||
vertical-align: top
|
vertical-align: top
|
||||||
border-top: 1px solid #cfd9e1
|
border-top: 1px solid #cfd9e1
|
||||||
|
|
||||||
th
|
th
|
||||||
@extend .bold
|
@extend .bold
|
||||||
|
|
||||||
thead th
|
thead th
|
||||||
vertical-align: bottom
|
vertical-align: bottom
|
||||||
|
|
||||||
table tbody + tbody
|
table tbody + tbody
|
||||||
border-top: 2px solid #cfd9e1
|
border-top: 2px solid #cfd9e1
|
||||||
|
|
|
||||||
|
|
@ -14,19 +14,19 @@ body
|
||||||
font-size: $font-size-base
|
font-size: $font-size-base
|
||||||
line-height: $line-height-base
|
line-height: $line-height-base
|
||||||
color: $font-color-base
|
color: $font-color-base
|
||||||
word-wrap: break-word
|
word-wrap: break-word
|
||||||
|
|
||||||
@media $breakpoint1
|
@media $breakpoint1
|
||||||
line-height: $line-height-computed
|
line-height: $line-height-computed
|
||||||
|
|
||||||
@media $breakpoint3
|
@media $breakpoint3
|
||||||
font-size: 125%
|
font-size: 125%
|
||||||
line-height: 1.6em
|
line-height: 1.6em
|
||||||
|
|
||||||
p,
|
p,
|
||||||
ul,
|
ul,
|
||||||
ol
|
ol
|
||||||
margin: 0 0 $line-height-computed
|
margin: 0 0 $line-height-computed
|
||||||
|
|
||||||
|
|
||||||
// Headings
|
// Headings
|
||||||
|
|
@ -34,14 +34,15 @@ ol
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6,
|
h1, h2, h3, h4, h5, h6,
|
||||||
.h1, .h2, .h3, .h4, .h5, .h6
|
.h1, .h2, .h3, .h4, .h5, .h6
|
||||||
font-family: $headings-font-family
|
font-family: $headings-font-family
|
||||||
font-weight: $headings-font-weight
|
font-weight: $headings-font-weight
|
||||||
color: $headings-color
|
line-height: $headings-line-height
|
||||||
|
color: $headings-color
|
||||||
|
|
||||||
h1, .h1,
|
h1, .h1,
|
||||||
h2, .h2
|
h2, .h2
|
||||||
margin-top: $line-height-computed*2
|
margin-top: ($line-height-computed*2)
|
||||||
margin-bottom: $line-height-computed*2
|
margin-bottom: ($line-height-computed*2)
|
||||||
|
|
||||||
h3, .h3
|
h3, .h3
|
||||||
h4, .h4,
|
h4, .h4,
|
||||||
|
|
@ -49,7 +50,7 @@ h5, .h5,
|
||||||
h6, .h6
|
h6, .h6
|
||||||
margin-top: $line-height-computed
|
margin-top: $line-height-computed
|
||||||
margin-bottom: $line-height-computed
|
margin-bottom: $line-height-computed
|
||||||
|
|
||||||
h1, .h1
|
h1, .h1
|
||||||
font-size: $font-size-h1
|
font-size: $font-size-h1
|
||||||
|
|
||||||
|
|
@ -74,21 +75,20 @@ h6, .h6
|
||||||
|
|
||||||
a
|
a
|
||||||
color: $link-color
|
color: $link-color
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
outline: 0
|
outline: 0
|
||||||
transition: color .2s ease-in-out
|
transition: color .2s ease-in-out
|
||||||
position: relative
|
|
||||||
|
&:hover,
|
||||||
&:hover
|
&:focus
|
||||||
color: $link-color-hover
|
color: $link-color-hover
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
transition: none
|
transition: none
|
||||||
top: 1px
|
|
||||||
background: $link-color
|
background: $link-color
|
||||||
color: #fff
|
color: #fff
|
||||||
text-shadow: none
|
text-shadow: none
|
||||||
|
|
||||||
h1 &,
|
h1 &,
|
||||||
h2 &,
|
h2 &,
|
||||||
h3 &
|
h3 &
|
||||||
|
|
@ -106,53 +106,50 @@ ol
|
||||||
padding-left: 2em
|
padding-left: 2em
|
||||||
|
|
||||||
ul li
|
ul li
|
||||||
position: relative
|
position: relative
|
||||||
margin-bottom: .5em
|
margin-bottom: .5em
|
||||||
|
|
||||||
&:before
|
&:before
|
||||||
font-size: 14px
|
font-size: 14px
|
||||||
font-family: 'entypo'
|
font-family: 'entypo'
|
||||||
color: $text-color-light
|
color: $text-color-light
|
||||||
speak: none
|
speak: none
|
||||||
font-style: normal
|
font-style: normal
|
||||||
font-weight: normal
|
font-weight: normal
|
||||||
font-variant: normal
|
font-variant: normal
|
||||||
text-transform: none
|
text-transform: none
|
||||||
line-height: 1
|
line-height: 1
|
||||||
-webkit-font-smoothing: antialiased
|
-webkit-font-smoothing: antialiased
|
||||||
|
|
||||||
position: absolute
|
position: absolute
|
||||||
left: -2em
|
left: -2em
|
||||||
top: .5em
|
top: .5em
|
||||||
|
|
||||||
ol
|
ol
|
||||||
counter-reset: ol-counter
|
counter-reset: ol-counter
|
||||||
|
|
||||||
li
|
li
|
||||||
position: relative
|
position: relative
|
||||||
|
|
||||||
&:before
|
&:before
|
||||||
position: absolute
|
position: absolute
|
||||||
left: -2em
|
left: -2em
|
||||||
top: 0
|
top: 0
|
||||||
color: #fff
|
color: #fff
|
||||||
content: counter(ol-counter)
|
content: counter(ol-counter)
|
||||||
counter-increment: ol-counter
|
counter-increment: ol-counter
|
||||||
font-style: italic
|
font-style: italic
|
||||||
font-size: 14px
|
font-size: 14px
|
||||||
background: $text-color-dimmed
|
background: $text-color-dimmed
|
||||||
|
|
||||||
width: 20px
|
width: 20px
|
||||||
height: 20px
|
height: 20px
|
||||||
border-radius: 20px
|
border-radius: 20px
|
||||||
line-height: 20px
|
line-height: 20px
|
||||||
display: block
|
display: block
|
||||||
text-align: center
|
text-align: center
|
||||||
top: .2em
|
top: .2em
|
||||||
box-shadow: 0 1px 0 rgba(255,255,255,.7))
|
box-shadow: 0 1px 0 rgba(255,255,255,.7)
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul,
|
ul,
|
||||||
ol
|
ol
|
||||||
|
|
@ -160,17 +157,20 @@ ol
|
||||||
ol
|
ol
|
||||||
margin-bottom: 0
|
margin-bottom: 0
|
||||||
|
|
||||||
nav ul,
|
|
||||||
nav ol
|
|
||||||
@extend .list-unstyled
|
|
||||||
|
|
||||||
// List options
|
// List options
|
||||||
// Unstyled keeps list items block level, just removes default browser padding and list-style
|
// Unstyled keeps list items block level, just removes default browser padding and list-style
|
||||||
.list-unstyled
|
list-unstyled()
|
||||||
padding-left: 0
|
padding-left: 0
|
||||||
list-style: none
|
list-style: none
|
||||||
display: block
|
display: block
|
||||||
|
|
||||||
|
.list-unstyled
|
||||||
|
list-unstyled()
|
||||||
|
|
||||||
|
nav ul,
|
||||||
|
nav ol
|
||||||
|
@extend .list-unstyled
|
||||||
|
|
||||||
// Inline turns list items into inline-block
|
// Inline turns list items into inline-block
|
||||||
.list-inline
|
.list-inline
|
||||||
@extend .list-unstyled
|
@extend .list-unstyled
|
||||||
|
|
@ -188,24 +188,24 @@ nav ol
|
||||||
/////////////////////////////////////
|
/////////////////////////////////////
|
||||||
|
|
||||||
p, li
|
p, li
|
||||||
hyphens: auto
|
hyphens: auto
|
||||||
|
|
||||||
b,
|
b,
|
||||||
strong,
|
strong,
|
||||||
.bold
|
.bold
|
||||||
font-weight: 700
|
font-weight: 700
|
||||||
font-style: normal
|
font-style: normal
|
||||||
|
|
||||||
em
|
em
|
||||||
font-style: italic
|
font-style: italic
|
||||||
|
|
||||||
cite
|
cite
|
||||||
font-style: normal
|
font-style: normal
|
||||||
|
|
||||||
hr
|
hr
|
||||||
@extend .divider-bottom
|
@extend .divider-bottom
|
||||||
border: 0
|
border: 0
|
||||||
margin-bottom: $line-height-computed*2
|
margin-bottom: ($line-height-computed*2)
|
||||||
|
|
||||||
|
|
||||||
// Quotes
|
// Quotes
|
||||||
|
|
@ -213,21 +213,20 @@ hr
|
||||||
|
|
||||||
blockquote,
|
blockquote,
|
||||||
blockquote > p
|
blockquote > p
|
||||||
font-style: italic
|
font-style: italic
|
||||||
color: $text-color-light
|
color: $text-color-light
|
||||||
|
|
||||||
blockquote
|
blockquote
|
||||||
padding: ($line-height-computed / 2) $line-height-computed
|
padding: 0 $line-height-computed
|
||||||
margin: 0 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
|
p:last-child
|
||||||
margin-bottom: 0
|
margin-bottom: 0
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Selection
|
// Selection
|
||||||
/////////////////////////////////////
|
/////////////////////////////////////
|
||||||
|
|
||||||
::-moz-selection { background: #2e4f5c; color: #fff; }
|
::-moz-selection { background: #2e4f5c; color: #fff; }
|
||||||
::selection { background: #2e4f5c; color: #fff; }
|
::selection { background: #2e4f5c; color: #fff; }
|
||||||
|
|
|
||||||
|
|
@ -16,8 +16,8 @@ support-for-ie = false // Nib IE 8 support
|
||||||
// Asset Paths
|
// Asset Paths
|
||||||
/////////////////////////////////////
|
/////////////////////////////////////
|
||||||
|
|
||||||
$img-path = '/assets/images/'
|
$img-path = '/assets/images/'
|
||||||
$font-path = '/assets/fonts/'
|
$font-path = '/assets/fonts/'
|
||||||
|
|
||||||
|
|
||||||
// Colors
|
// 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-family = 'brandon-grotesque','Helvetica Neue',Helvetica,Arial,sans-serif
|
||||||
$headings-font-weight = 500 // Medium
|
$headings-font-weight = 500 // Medium
|
||||||
$headings-line-height = 1.2
|
$headings-line-height = 1.1
|
||||||
$headings-color = $brand-dark
|
$headings-color = $brand-dark
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -91,8 +91,8 @@ $border-radius-base = 3px
|
||||||
$border-radius-small = $border-radius-base
|
$border-radius-small = $border-radius-base
|
||||||
$border-radius-large = $border-radius-base
|
$border-radius-large = $border-radius-base
|
||||||
|
|
||||||
$padding-base-vertical = 6px
|
$padding-base-vertical = 12px
|
||||||
$padding-base-horizontal = 12px
|
$padding-base-horizontal = 32px
|
||||||
|
|
||||||
$padding-small-vertical = ($padding-base-vertical / 2)
|
$padding-small-vertical = ($padding-base-vertical / 2)
|
||||||
$padding-small-horizontal = ($padding-base-horizontal / 2)
|
$padding-small-horizontal = ($padding-base-horizontal / 2)
|
||||||
|
|
@ -104,12 +104,12 @@ $padding-large-horizontal = ($padding-base-horizontal * 2)
|
||||||
// Forms
|
// Forms
|
||||||
/////////////////////////////////////
|
/////////////////////////////////////
|
||||||
|
|
||||||
$input-bg = rgba(255,255,255,.3)
|
$input-bg = #fff
|
||||||
$input-bg-focus = rgba(255,255,255,.7)
|
$input-bg-focus = #fff
|
||||||
$input-bg-disabled = $brand-grey-light
|
$input-bg-disabled = $brand-grey-light
|
||||||
|
|
||||||
$input-font-size = $font-size-base
|
$input-font-size = $font-size-base
|
||||||
$input-font-weight = 700
|
$input-font-weight = $font-weight-base
|
||||||
|
|
||||||
$input-color = $font-color-base
|
$input-color = $font-color-base
|
||||||
$input-color-placeholder = rgba(46, 79, 92, .3)
|
$input-color-placeholder = rgba(46, 79, 92, .3)
|
||||||
|
|
|
||||||
|
|
@ -4,15 +4,15 @@ front_page: true
|
||||||
---
|
---
|
||||||
|
|
||||||
{% if paginator.next_page == 2 %}
|
{% if paginator.next_page == 2 %}
|
||||||
{% include sticky.html %}
|
{% include featured.html %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<section role="main" id="main" class="row">
|
<section role="main" id="main" class="row">
|
||||||
|
|
||||||
{% for post in paginator.posts %}
|
{% for post in paginator.posts %}
|
||||||
|
|
||||||
{% include articles.html %}
|
{% include articles.html %}
|
||||||
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user