m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-09-24 01:58:50 +02:00
Code

Merge pull request #24 from kremalicious/flexbox-grid

Browse Source 
Flexbox grid
This commit is contained in:
Matthias Kretschmann 2015-08-19 00:38:14 +02:00
commit 5dcf9a88dc
30 changed files with 511 additions and 337 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
.travis.yml Normal file
View File

@ -0,0 +1,16 @@
sudo: false
language: ruby
rvm:
- 2.2.2
- 1.9.3
cache: bundler
addons:
apt:
packages:
- libgsl0-dev
before_script:
- npm install gulp bower -g
- npm install
- bower install
- bundle install
script: gulp build

1
Gemfile
View File

@ -14,4 +14,5 @@ group :development do
gem 'mini_magick' gem 'mini_magick'
gem 'fileutils' gem 'fileutils'
gem 'gsl' gem 'gsl'
gem 'narray'
end end

5
README.md
View File

@ -3,7 +3,8 @@ kremalicious3
> [kremalicious.com](http://kremalicious.com) based on [Jekyll](http://jekyllrb.com). Neat. > [kremalicious.com](http://kremalicious.com) based on [Jekyll](http://jekyllrb.com). Neat.
[ ![Codeship Status for kremalicious/kremalicious3](https://www.codeship.io/projects/f6973090-9f04-0131-a2b7-625e8177ce9a/status?branch=master)](https://www.codeship.io/projects/18092) [![Dependency Status](https://gemnasium.com/kremalicious/kremalicious3.svg)](https://gemnasium.com/kremalicious/kremalicious3) [ ![Codeship Status for kremalicious/kremalicious3](https://www.codeship.io/projects/f6973090-9f04-0131-a2b7-625e8177ce9a/status?branch=master)](https://www.codeship.io/projects/18092)
[![Dependency Status](https://gemnasium.com/kremalicious/kremalicious3.svg)](https://gemnasium.com/kremalicious/kremalicious3)
Requirements Requirements
@ -37,7 +38,7 @@ Get up and running
Run the following command from the repository's root folder to install all dependencies. Run the following command from the repository's root folder to install all dependencies.
```bash ```bash
npm install npm install && bower install && bundle install
``` ```
### Development build ### Development build

6
_src/_assets/js/app.js
View File

@ -15,9 +15,9 @@ var siteNavigation = {
siteSearch: function() { siteSearch: function() {
var $content = $('.content'), var $content = $('.site__content'),
$searchlink = $('.search-btn'), $searchlink = $('.search-btn'),
$searcharea = $('.topbar .search-area'), $searcharea = $('.search-area'),
$searchfield = $('#search-input'), $searchfield = $('#search-input'),
$searchresults = $('#search-results'), $searchresults = $('#search-results'),
$searchpop = $('#search-popover'); $searchpop = $('#search-popover');
@ -36,7 +36,7 @@ var siteNavigation = {
searchInput: document.getElementById('search-input'), searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('search-results'), resultsContainer: document.getElementById('search-results'),
json: '/search.json', json: '/search.json',
searchResultTemplate: '<li class="col3"><a class="search-link" href="{url}">{title}</a></li>', searchResultTemplate: '<li class="grid__col"><a class="search-link" href="{url}">{title}</a></li>',
fuzzy: false fuzzy: false
}) })

31
_src/_assets/styl/buttons.styl
View File

@ -154,24 +154,25 @@ a.btn-primary
.icon .icon
width: 15px width: 15px
height: 15px height: 15px
margin: 1px 0 0 0 margin: 1px 3px 0 0
fill: #0089cb fill: #0089cb
float: left
// Close button // Close button
///////////////////////////////////// /////////////////////////////////////
.close .close
@extend .textcenter @extend .textcenter, .transition
width: 16px width: 14px
height: 16px height: 14px
line-height: 12px
font-size: $font-size-small
padding: 0 padding: 0
border-radius: 16px border-radius: 50%
display: block display: block
background: $brand-grey-light background: lighten($brand-grey-light, 50%)
color: #fff color: #fff
line-height: 1
font-size: $font-size-mini
&:hover, &:hover,
&:focus &:focus
@ -185,12 +186,18 @@ a.btn-primary
///////////////////////////////////// /////////////////////////////////////
.content-download .content-download
@extend .clearfix @extend .grid, .grid--gutters
display: block
margin-top: 0
@media $breakpoint1
display: flex
margin-top: -($gutter-space)
a a
@extend .btn @extend .btn, .grid__col
padding-left: 15px margin: $gutter-space 0 0 $gutter-space
padding-right: 15px
display: block display: block
span span

14
_src/_assets/styl/content-featured.styl
View File

@ -6,20 +6,20 @@
.featured .featured
@extend .divider-bottom @extend .divider-bottom
padding-top: $line-height-computed padding-top: ($line-height-computed*2)
padding-bottom: $line-height-computed padding-bottom: ($line-height-computed*2)
@media $breakpoint2 @media $breakpoint2
padding-top: ($line-height-computed*2) padding-top: ($line-height-computed*3)
padding-bottom: ($line-height-computed*2) padding-bottom: ($line-height-computed*3)
.grid
margin-bottom: 0
.featured-link .featured-link
display: block display: block
margin-bottom: $line-height-computed
transition-property: none
@media $breakpoint2 @media $breakpoint2
margin-bottom: 0
&:hover &:hover
transform: scale(1.03) transform: scale(1.03)

1
_src/_assets/styl/content-related.styl
View File

@ -17,7 +17,6 @@
.post-title .post-title
@extend .h5 @extend .h5
margin: 0 margin: 0
margin-bottom: $line-height-computed
.post-title, .post-title,
.post-title-link .post-title-link

11
_src/_assets/styl/content.styl
View File

@ -25,18 +25,18 @@
color: darken($page-bg, 15%) color: darken($page-bg, 15%)
margin-right: 2px margin-right: 2px
.hentry, .hentry
.grid > .hentry
@extend .divider-bottom @extend .divider-bottom
padding-top: ($line-height-computed*2) padding-top: ($line-height-computed*2)
padding-bottom: ($line-height-computed*2) padding-bottom: ($line-height-computed*2)
width: 100%
@media $breakpoint2 @media $breakpoint2
padding-top: ($line-height-computed*4) padding-top: ($line-height-computed*4)
padding-bottom: ($line-height-computed*4) padding-bottom: ($line-height-computed*4)
.page-index &:first-child .page-index &:first-child
padding-top: ($line-height-computed*2) padding-top: ($line-height-computed*3)
.page-single & .page-single &
padding-bottom: ($line-height-computed*2) padding-bottom: ($line-height-computed*2)
@ -153,8 +153,7 @@
.masonry .masonry
@media $breakpoint2 @media $breakpoint2
width: 125% width: 100%
margin-left: -12.5%
clearfix() clearfix()
.hentry .hentry

3
_src/_assets/styl/footer.styl
View File

@ -4,10 +4,11 @@
// Footer // Footer
// //
.footer .site__footer
@extend .textcenter @extend .textcenter
border-top: 1px solid rgba(255,255,255,.7) border-top: 1px solid rgba(255,255,255,.7)
box-shadow: inset 0 1px 4px alpha($brand-dark, .2) box-shadow: inset 0 1px 4px alpha($brand-dark, .2)
padding-top: ($line-height-computed*2)
.gravatar .gravatar
margin-bottom: ($line-height-computed/2) margin-bottom: ($line-height-computed/2)

223
_src/_assets/styl/grid.styl
View File

@ -5,74 +5,185 @@
// //
// Prevents padding to be added *,
* *:before,
*:after
box-sizing: border-box box-sizing: border-box
.container //
padding-left: 7% // Base
padding-right: 7% //
width: 100%
@media $breakpoint2
padding-left: 15%
padding-right: 15%
.grid .grid
margin: auto
padding: 0
display: flex display: flex
flex-wrap: wrap flex-wrap: wrap
list-style: none
margin: 0
padding: 0
@media $breakpoint2 .grid__col
max-width: 35em flex: 1
> .col1,
> .col2, //
> .col3, // Alignment per row
> .col4, //
> .col5, .grid--top
> .col6 align-items: flex-start
.grid--bottom
align-items: flex-end
.grid--center
align-items: center
//
// Alignment per cell
//
.grid_col--top
align-self: flex-start
.grid_col--bottom
align-self: flex-end
.grid_col--center
align-self: center
//
// Gutters
//
.grid--gutters
margin: -($gutter-space) 0 $gutter-space (-($gutter-space))
> .grid__col
padding: $gutter-space 0 0 $gutter-space
//
// Columns
//
.grid--fit
> .grid__col
flex: 1 flex: 1
.grid--full
> .grid__col
flex: 0 0 100% flex: 0 0 100%
padding: 1em 0 0 1em
> .col6 .grid--1of6
padding-left: 0 > .grid__col
flex: 0 0 16.5%
> .col1-xs, .grid--2of6,
> .col2-xs, .grid--third
> .col3-xs, > .grid__col
> .col4-xs, flex: 0 0 33%
> .col5-xs,
> .col6-xs
flex: 1
padding: 1em 0 0 1em
> .col1-xs .grid--3of6,
flex: 0 0 16.666666667% .grid--half
> .col2-xs > .grid__col
flex: 0 0 33.333333333%
> .col3-xs
flex: 0 0 50% flex: 0 0 50%
> .col4-xs
flex: 0 0 66.666666666%
> .col5-xs
flex: 0 0 83.333333333%
> .col6-xs
flex: 0 0 100%
padding-left: 0
@media $breakpoint2 .grid--4of6
> .col1 > .grid__col
flex: 0 0 16.5% flex: 0 0 66%
> .col2
flex: 0 0 33% .grid--5of6
> .col3 > .grid__col
flex: 0 0 50% flex: 0 0 82.5%
> .col4
flex: 0 0 66%
> .col5 @media $breakpoint1
flex: 0 0 82.5% .grid-small--fit
> .col6 > .grid__col
flex: 1
.grid-small--full
> .grid__col
flex: 0 0 100% flex: 0 0 100%
.grid-small--1of6
> .grid__col
flex: 0 0 16.5%
.grid-small--2of6,
.grid-small--third
> .grid__col
flex: 0 0 33%
.grid-small--3of6,
.grid-small--half
> .grid__col
flex: 0 0 50%
.grid-small--4of6
> .grid__col
flex: 0 0 66%
.grid-small--5of6
> .grid__col
flex: 0 0 82.5%
@media $breakpoint2
.grid-medium--fit
> .grid__col
flex: 1
.grid-medium--full
> .grid__col
flex: 0 0 100%
.grid-medium--1of6
> .grid__col
flex: 0 0 16.5%
.grid-medium--2of6,
.grid-medium--third
> .grid__col
flex: 0 0 33%
.grid-medium--3of6,
.grid-medium--half
> .grid__col
flex: 0 0 50%
.grid-medium--4of6
> .grid__col
flex: 0 0 66%
.grid-medium--5of6
> .grid__col
flex: 0 0 82.5%
@media $breakpoint3
.grid-large--fit
> .grid__col
flex: 1
.grid-large--full
> .grid__col
flex: 0 0 100%
.grid-large--1of6
> .grid__col
flex: 0 0 16.5%
.grid-large--2of6,
.grid-large--third
> .grid__col
flex: 0 0 33%
.grid-large--3of6,
.grid-large--half
> .grid__col
flex: 0 0 50%
.grid-large--4of6
> .grid__col
flex: 0 0 66%
.grid-large--5of6
> .grid__col
flex: 0 0 82.5%

49
_src/_assets/styl/header.styl
View File

@ -4,10 +4,8 @@
// Header // Header
// //
// Topbar .site__header
///////////////////////////////////// width: 100%
.topbar
background: $body-bg background: $body-bg
margin-top: ($line-height-computed/2) margin-top: ($line-height-computed/2)
margin-bottom: ($line-height-computed/2) margin-bottom: ($line-height-computed/2)
@ -46,31 +44,24 @@
background-image: url('../img/logo@3x.png') background-image: url('../img/logo@3x.png')
background-size: 183px 62px background-size: 183px 62px
.header__title
margin: 0
// display toned down logo
// by default
@extend .logo
// Banner .header__logo
///////////////////////////////////// @extend .ir
// repeat logo
// but display hover version
@extend .logo
background-position: left bottom
.banner // hide by default
padding-top: 0 opacity: 0
// show smooooothly on hover
&:hover
opacity: 1
.banner-title &:active
margin: 0 top: 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

3
_src/_assets/styl/kremalicious3.styl
View File

@ -14,8 +14,9 @@
@import 'mixins' @import 'mixins'
// Core CSS // Core CSS
@import 'grid'
@import 'scaffolding' @import 'scaffolding'
@import 'grid'
@import 'layout'
@import 'typography' @import 'typography'
@import 'forms' @import 'forms'
@import 'buttons' @import 'buttons'

62
_src/_assets/styl/layout.styl Normal file
View File

@ -0,0 +1,62 @@
//
// kremalicious3
// --------------
// Layout
//
.site__content,
.header__content
.footer__content
padding: 0 7%
width: 100%
@media $breakpoint2
padding: 0 15%
.container
max-width: 35em
margin: 0 auto
// topbar and footer as fixed
// site background
/////////////////////////////////////
.site__document
background-color: $page-bg
border-top: 1px solid rgba(255,255,255,.7)
border-bottom: 1px solid rgba(255,255,255,.7)
box-shadow: 0 1px 4px alpha($brand-dark, .1), 0 -1px 4px alpha($brand-dark, .2)
@media only screen and (min-width: 40.625em) and (min-height: 650px)
.site
position: relative
.site__document
@extend .transition
position: relative
z-index: 2
margin-top: 80px
margin-bottom: 420px
.menu-open &
margin-top: 220px
.site__header,
.site__footer
position: fixed
border: none
width: 100%
.site__header
z-index: 1
top: 0
border: none
.site__footer
z-index: 0
bottom: 0
box-shadow: none
.menu-open &
hide()

11
_src/_assets/styl/navigation.styl
View File

@ -41,10 +41,14 @@
.nav-popover .nav-popover
@extend .divider-top, .list-unstyled @extend .divider-top, .list-unstyled
padding: $line-height-computed 0 padding: $line-height-computed 0
margin-top: 60px margin-top: 30px
margin-bottom: 0 margin-bottom: 0
width: 100% width: 100%
background: $body-bg background: $body-bg
display: flex
.grid__col
padding-top: 0
.nav-link .nav-link
@extend .h6, .textcenter @extend .h6, .textcenter
@ -73,8 +77,13 @@
///////////////////////////////////// /////////////////////////////////////
.paginator .paginator
padding-top: $line-height-computed
padding-bottom: $line-height-computed
.icon .icon
margin-bottom: -3px margin-bottom: -3px
p
margin-bottom: 0;
.paginator-next .paginator-next
text-align: right text-align: right

43
_src/_assets/styl/scaffolding.styl
View File

@ -26,46 +26,3 @@ textarea
font-family: inherit font-family: inherit
font-size: inherit font-size: inherit
line-height: inherit line-height: inherit
// topbar and footer as fixed
// site background
/////////////////////////////////////
.document
background-color: $page-bg
border-top: 1px solid rgba(255,255,255,.7)
border-bottom: 1px solid rgba(255,255,255,.7)
box-shadow: 0 1px 4px alpha($brand-dark, .1), 0 -1px 4px alpha($brand-dark, .2)
@media only screen and (min-width: 40.625em) and (min-height: 650px)
body
position: relative
.document
@extend .transition
position: relative
z-index: 2
margin-top: 80px
margin-bottom: 500px
.menu-open &
margin-top: 220px
.topbar,
.footer
position: fixed
border: none
.topbar
z-index: 1
top: 0
border: none
.footer
z-index: 0
bottom: 0
box-shadow: none
.menu-open &
hide()

42
_src/_assets/styl/search.styl
View File

@ -5,8 +5,9 @@
// //
&.search-open-blur &.search-open-blur
@extend .transition
filter: blur(10px) filter: blur(10px)
user-select: none
pointer-events: none
.search-btn .search-btn
right: 50px right: 50px
@ -17,12 +18,12 @@
.search-close .search-close
position: absolute position: absolute
right: 32px right: 16px
&, &,
&:active &:active
top: 50% top: 50%
margin-top: -8px margin-top: -7px
.search-area .search-area
@extend .transition @extend .transition
@ -38,10 +39,29 @@
&.ready &.ready
display: block display: block
.search-popover
position: absolute
left: 0
top: 71px
z-index: 6
width: 100%
padding-top: ($line-height-computed/2)
background: lighten($page-bg, 3%)
border-bottom: 1px solid rgba(255,255,255,.7)
box-shadow: 0 1px 4px alpha($brand-dark, .1)
@media $breakpoint2
top: 0
.search-results .search-results
@extend .list-unstyled, .textcenter @extend .list-unstyled
display: flex display: flex
.grid__col
padding-top: 0
@media $breakpoint2 @media $breakpoint2
margin-top: ($line-height-computed/2) margin-top: ($line-height-computed/2)
margin-bottom: ($line-height-computed/2) margin-bottom: ($line-height-computed/2)
@ -63,17 +83,3 @@
border: none border: none
&:before &:before
display: none display: none
.search-popover
position: absolute
left: 0
top: 71px
z-index: 6
width: 100%
padding-top: ($line-height-computed/2)
background: lighten($page-bg, 3%)
border-bottom: 1px solid rgba(255,255,255,.7)
box-shadow: 0 1px 4px alpha($brand-dark, .1)
@media $breakpoint2
top: 0

5
_src/_assets/styl/variables.styl
View File

@ -94,6 +94,11 @@ $link-color = lighten($brand-cyan, 5%)
$link-color-hover = lighten($link-color, 10%) $link-color-hover = lighten($link-color, 10%)
// Grid
/////////////////////////////////////
$gutter-space = $line-height-computed
// Components spacing // Components spacing
///////////////////////////////////// /////////////////////////////////////

6
_src/_includes/articles.html
View File

@ -1,7 +1,7 @@
{% if post.layout == "link" %} {% if post.layout == "link" %}
<article class="hentry format-link col6"> <article class="hentry format-link">
<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.' }}">
@ -33,7 +33,7 @@
{% elsif post.layout == "photo" %} {% elsif post.layout == "photo" %}
<article class="hentry format-photo col6"> <article class="hentry format-photo">
<a class="photo-link" href="{{ post.url }}"> <a class="photo-link" href="{{ post.url }}">
<figure class="hmedia"> <figure class="hmedia">
@ -48,7 +48,7 @@
{% else %} {% else %}
<article class="hentry format-post col6"> <article class="hentry format-post">
<header> <header>
<h1 class="entry-title"><a href="{{ post.url }}">{{ post.title | titlecase }}</a></h1> <h1 class="entry-title"><a href="{{ post.url }}">{{ post.title | titlecase }}</a></h1>
</header> </header>

24
_src/_includes/featured.html
View File

@ -1,13 +1,15 @@
<aside class="grid featured"> <aside class="featured">
{% for post in site.posts %} <div class="grid grid--full grid-small--fit grid--gutters">
{% if post.featured %} {% for post in site.posts %}
<article class="col2"> {% if post.featured %}
<a class="featured-link" href="{{ post.url }}" title="{{ post.title }}"> <article class="grid__col">
{% picture featured {{ post.image }} %} <a class="featured-link" href="{{ post.url }}" title="{{ post.title }}">
<h1 class="featured-title">{{ post.title | titlecase }}</h1> {% picture featured {{ post.image }} %}
</a> <h1 class="featured-title">{{ post.title | titlecase }}</h1>
</article> </a>
{% endif %} </article>
{% endfor %} {% endif %}
{% endfor %}
</div>
</aside> </aside>

94
_src/_includes/footer.html
View File

@ -1,55 +1,55 @@
<footer role="contentinfo" class="footer container"> <footer role="contentinfo" class="site__footer">
<div class="footer__content">
<div class="grid"> <div class="container">
<div class="vcard author">
<img class="avatar photo" src="/assets/img/avatar.jpeg" />
<p class="footer-description">Blog of designer &amp; developer <a class="fn" rel="author" href="/about/">{{ site.author.name }}</a>
</div>
<aside class="subscribe">
<h1 class="subscribe-title">Subscribe</h1>
<p>
<a class="btn rss" href="http://kremalicious.com/feed">
<svg class="icon icon-entypo icon-entypo-rss">
<use xlink:href="/assets/img/sprite.svg#entypo-rss"></use>
</svg>
</a>
<a class="btn twitter" href="https://twitter.com/kremaliciouscom">
<svg class="icon icon-entypo icon-entypo-twitter">
<use xlink:href="/assets/img/sprite.svg#entypo-twitter"></use>
</svg>
</a>
<a class="btn google" href="https://plus.google.com/100015950464424503954" rel="publisher">
<svg class="icon icon-entypo icon-entypo-google+">
<use xlink:href="/assets/img/sprite.svg#entypo-google+"></use>
</svg>
</a>
<a class="btn facebook" href="https://www.facebook.com/pages/kremalicious/154539134564052">
<svg class="icon icon-entypo icon-entypo-facebook">
<use xlink:href="/assets/img/sprite.svg#entypo-facebook"></use>
</svg>
</a>
</p>
</aside>
<section class="footer-copyright">
<p>© 2007 &ndash; {{ site.time | date: "%Y" }} <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a></p>
<p>
<a href="https://github.com/kremalicious/kremalicious3">
<svg class="icon icon-entypo icon-entypo-github">
<use xlink:href="/assets/img/sprite.svg#entypo-github"></use>
</svg>
View source
</a>
</p>
</section>
<div class="vcard author col6">
<img class="avatar photo" src="/assets/img/avatar.jpeg" />
<p class="footer-description">Blog of designer &amp; developer <a class="fn" rel="author" href="/about/">{{ site.author.name }}</a>
</div> </div>
<aside class="subscribe col6">
<h1 class="subscribe-title">Subscribe</h1>
<p>
<a class="btn rss" href="http://kremalicious.com/feed">
<svg class="icon icon-entypo icon-entypo-rss">
<use xlink:href="/assets/img/sprite.svg#entypo-rss"></use>
</svg>
</a>
<a class="btn twitter" href="https://twitter.com/kremaliciouscom">
<svg class="icon icon-entypo icon-entypo-twitter">
<use xlink:href="/assets/img/sprite.svg#entypo-twitter"></use>
</svg>
</a>
<a class="btn google" href="https://plus.google.com/100015950464424503954" rel="publisher">
<svg class="icon icon-entypo icon-entypo-google+">
<use xlink:href="/assets/img/sprite.svg#entypo-google+"></use>
</svg>
</a>
<a class="btn facebook" href="https://www.facebook.com/pages/kremalicious/154539134564052">
<svg class="icon icon-entypo icon-entypo-facebook">
<use xlink:href="/assets/img/sprite.svg#entypo-facebook"></use>
</svg>
</a>
</p>
</aside>
</div> </div>
<section class="footer-copyright" class="grid">
<div class="col6">
<p>© 2007 &ndash; {{ site.time | date: "%Y" }} <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a></p>
<p>
<a href="https://github.com/kremalicious/kremalicious3">
<svg class="icon icon-entypo icon-entypo-github">
<use xlink:href="/assets/img/sprite.svg#entypo-github"></use>
</svg>
View source
</a>
</p>
</div>
</section>
</footer> </footer>
<script src="/assets/js/kremalicious3.min.js" async></script> <script src="/assets/js/kremalicious3.min.js" async></script>

87
_src/_includes/header.html
View File

@ -1,49 +1,56 @@
<div class="topbar container"> <header role="banner" class="site__header">
<div class="grid"> <div class="header__content">
<div class="container">
<header role="banner" class="banner col3-xs"> <div class="grid grid--half">
<h1 class="banner-title">
<a class="banner-logo" href="/">kremalicious</a>
</h1>
</header>
<nav role="navigation" class="nav-main col3-xs"> <div class="grid__col">
<button type="button" class="menu-btn"> <h1 class="header__title">
<svg class="icon icon-entypo icon-entypo-menu" role="img" aria-labelledby="title"> <a class="header__logo" href="/">kremalicious</a>
<title id="title">Menu</title> </h1>
<use xlink:href="/assets/img/sprite.svg#entypo-menu"></use> </div>
</svg>
</button> <nav role="navigation" class="nav-main grid__col">
</nav> <button type="button" class="menu-btn">
<svg class="icon icon-entypo icon-entypo-menu" role="img" aria-labelledby="title">
<title id="title">Menu</title>
<use xlink:href="/assets/img/sprite.svg#entypo-menu"></use>
</svg>
</button>
</nav>
<section class="site-search">
<button type="button" class="search-btn">
<svg class="icon icon-entypo icon-entypo-search" role="img" aria-labelledby="title">
<title id="title">Search</title>
<use xlink:href="/assets/img/sprite.svg#entypo-magnifying-glass"></use>
</svg>
</button>
<div class="search-area">
<input type="search" id="search-input" class="form-control input-search search-field" placeholder="Search everything">
<button class="close search-close">&times;</button>
</div>
</section>
<section class="site-search">
<button type="button" class="search-btn">
<svg class="icon icon-entypo icon-entypo-search" role="img" aria-labelledby="title">
<title id="title">Search</title>
<use xlink:href="/assets/img/sprite.svg#entypo-magnifying-glass"></use>
</svg>
</button>
<div class="search-area">
<input type="search" id="search-input" class="form-control input-search search-field" placeholder="Search everything">
<button class="close search-close">&times;</button>
</div> </div>
</section>
<ul class="nav-popover grid grid--gutters grid--half grid-medium--third hide">
{% for category in site.categories %}
<li class="grid__col">
<a class="nav-link" href="/{{ category | first }}/">
{{ category | first }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div> </div>
</header>
<ul class="nav-popover grid hide"> <div id="search-popover" class="search-popover hide">
{% for category in site.categories %} <div class="container">
<li class="col3-xs col2"> <ul id="search-results" class="search-results grid grid--gutters grid-medium--half"></ul>
<a class="nav-link" href="/{{ category | first }}/"> </div>
{{ category | first }}
</a>
</li>
{% endfor %}
</ul>
</div>
<div id="search-popover" class="search-popover container hide">
<ul id="search-results" class="search-results grid"></ul>
</div> </div>

6
_src/_includes/paginator.html
View File

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

4
_src/_includes/relatedphotos.html
View File

@ -1,10 +1,10 @@
<aside class="related-photos"> <aside class="related-photos">
<div class="grid"> <div class="grid grid--gutters grid--half grid-medium--third">
{% for post in site.categories['photos'] limit:6 %} {% for post in site.categories['photos'] limit:6 %}
<article class="related-photo col3-xs col2"> <article class="related-photo grid__col">
<a class="photo-link" href="{{ post.url }}"> <a class="photo-link" href="{{ post.url }}">
{% picture photothumb {{ post.image }} %} {% picture photothumb {{ post.image }} %}
</a> </a>

4
_src/_includes/relatedposts.html
View File

@ -3,11 +3,11 @@
<h1 class="related-posts-title">Related</h1> <h1 class="related-posts-title">Related</h1>
<div class="grid"> <div class="grid grid--gutters grid--full grid-small--half grid-medium--third">
{% for post in site.related_posts limit:6 %} {% for post in site.related_posts limit:6 %}
<article class="related-post col2"> <article class="related-post grid__col">
<a class="post-title-link" href="{{ post.url }}"> <a class="post-title-link" href="{{ post.url }}">
<h1 class="post-title">{{ post.title }}</h1> <h1 class="post-title">{{ post.title }}</h1>
</a> </a>

10
_src/_layouts/base.html
View File

@ -3,13 +3,15 @@
{% capture id %}{{ page.url | replace:'/','-' | replace_first:'-','' | replace:'.html','' | replace:'-index','' }}{% endcapture %} {% capture id %}{{ page.url | replace:'/','-' | replace_first:'-','' | replace:'.html','' | replace:'-index','' }}{% endcapture %}
<body class="page-{{ id | remove:'-' }}"> <body class="page-{{ id | remove:'-' }} site">
{% include header.html %} {% include header.html %}
<section role="document" class="document container"> <section role="document" class="site__document">
<div class="content"> <div class="site__content">
{{ content }} <div class="container">
{{ content }}
</div>
</div> </div>
</section> </section>

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

@ -25,6 +25,6 @@ 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:
<p class="content-download"> <p class="content-download">
<a class="btn-primary icon-download col3" href="/media/momcorp_wall_by_kremalicious.zip">Download</a> <a class="btn-primary icon-download" href="/media/momcorp_wall_by_kremalicious.zip">Download</a>
<a href="http://krlc.us/givecoffee" class="icon-heart col3">Donate</a> <a href="http://krlc.us/givecoffee" class="icon-heart">Donate</a>
</p> </p>

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

@ -28,7 +28,7 @@ The plugin is localized in english, german & spanish (thanks to Andrew Kurtis fr
You can just install the plugin via the automatic backend installer under _Plugins > Add New_, activate and enjoy the red badges. You can just install the plugin via the automatic backend installer under _Plugins > Add New_, activate and enjoy the red badges.
<p class="content-download"> <p class="content-download">
<a href="http://wordpress.org/extend/plugins/badged" class="btn-primary icon-wordpress col2">Plugin Page</a> <a class="btn-primary icon-github col2" href="https://github.com/kremalicious/Badged">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart btn col2">Donate</a> <a href="http://wordpress.org/extend/plugins/badged" class="btn-primary icon-wordpress">Plugin Page</a> <a class="btn-primary icon-github" href="https://github.com/kremalicious/Badged">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart btn">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:

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

@ -35,7 +35,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:
<p class="content-download"> <p class="content-download">
<a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn-primary icon-download col2">Download</a> <a href="https://github.com/kremalicious/wp-icons-template" class="icon-github col2">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart col2">Donate</a> <a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn-primary icon-download">Download</a> <a href="https://github.com/kremalicious/wp-icons-template" class="icon-github">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart">Donate</a>
</p> </p>
### Usage ### Usage
@ -80,12 +80,12 @@ function custom_post_type_icon() {
#menu-posts-YOUR_POSTTYPE_NAME .wp-menu-image { #menu-posts-YOUR_POSTTYPE_NAME .wp-menu-image {
background: url(<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite.png) no-repeat 6px 6px !important; background: url(<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite.png) no-repeat 6px 6px !important;
} }
#menu-posts-YOUR_POSTTYPE_NAME:hover .wp-menu-image, #menu-posts-YOUR_POSTTYPE_NAME.wp-has-current-submenu .wp-menu-image { #menu-posts-YOUR_POSTTYPE_NAME:hover .wp-menu-image, #menu-posts-YOUR_POSTTYPE_NAME.wp-has-current-submenu .wp-menu-image {
background-position: 6px -26px !important; background-position: 6px -26px !important;
} }
/* Post Screen - 32px */ /* Post Screen - 32px */
.icon32-posts-YOUR_POSTTYPE_NAME { .icon32-posts-YOUR_POSTTYPE_NAME {
background: url(<?php bloginfo('template_url') ?>/images/icon-adminpage32.png) no-repeat left top !important; background: url(<?php bloginfo('template_url') ?>/images/icon-adminpage32.png) no-repeat left top !important;
} }
@media @media
only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-webkit-min-device-pixel-ratio: 1.5),
@ -94,20 +94,20 @@ function custom_post_type_icon() {
only screen and ( min-device-pixel-ratio: 1.5), only screen and ( min-device-pixel-ratio: 1.5),
only screen and ( min-resolution: 1.5dppx) { only screen and ( min-resolution: 1.5dppx) {
/* Admin Menu - 16px @2x */ /* Admin Menu - 16px @2x */
#menu-posts-YOUR_POSTTYPE_NAME .wp-menu-image { #menu-posts-YOUR_POSTTYPE_NAME .wp-menu-image {
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite_2x.png') !important; background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite_2x.png') !important;
-webkit-background-size: 16px 48px; -webkit-background-size: 16px 48px;
-moz-background-size: 16px 48px; -moz-background-size: 16px 48px;
background-size: 16px 48px; background-size: 16px 48px;
} }
/* Post Screen - 32px @2x */ /* Post Screen - 32px @2x */
.icon32-posts-YOUR_POSTTYPE_NAME { .icon32-posts-YOUR_POSTTYPE_NAME {
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminpage32_2x.png') !important; background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminpage32_2x.png') !important;
-webkit-background-size: 32px 32px; -webkit-background-size: 32px 32px;
-moz-background-size: 32px 32px; -moz-background-size: 32px 32px;
background-size: 32px 32px; background-size: 32px 32px;
} }
} }
</style> </style>
<?php } <?php }
@ -148,11 +148,11 @@ function option_page_icon() {
Use only if you put your plugin or option page in the top level via add_menu_page() Use only if you put your plugin or option page in the top level via add_menu_page()
*/ */
#toplevel_page_PLUGINNAME-FILENAME .wp-menu-image { #toplevel_page_PLUGINNAME-FILENAME .wp-menu-image {
background: url(<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite.png) no-repeat 6px 6px !important; background: url(<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite.png) no-repeat 6px 6px !important;
} }
/* We need to hide the generic.png img element inserted by default */ /* We need to hide the generic.png img element inserted by default */
#toplevel_page_PLUGINNAME-FILENAME .wp-menu-image img { #toplevel_page_PLUGINNAME-FILENAME .wp-menu-image img {
display: none; display: none;
} }
#toplevel_page_PLUGINNAME-FILENAME:hover .wp-menu-image, #toplevel_page_PLUGINNAME-FILENAME.wp-has-current-submenu .wp-menu-image { #toplevel_page_PLUGINNAME-FILENAME:hover .wp-menu-image, #toplevel_page_PLUGINNAME-FILENAME.wp-has-current-submenu .wp-menu-image {
background-position: 6px -26px !important; background-position: 6px -26px !important;
@ -160,7 +160,7 @@ function option_page_icon() {
/* Option Screen - 32px */ /* Option Screen - 32px */
#PLUGINNAME.icon32 { #PLUGINNAME.icon32 {
background: url(<?php bloginfo('template_url') ?>/images/icon-adminpage32.png) no-repeat left top !important; background: url(<?php bloginfo('template_url') ?>/images/icon-adminpage32.png) no-repeat left top !important;
} }
@media @media
@ -169,23 +169,23 @@ function option_page_icon() {
only screen and ( -o-min-device-pixel-ratio: 3/2), only screen and ( -o-min-device-pixel-ratio: 3/2),
only screen and ( min-device-pixel-ratio: 1.5), only screen and ( min-device-pixel-ratio: 1.5),
only screen and ( min-resolution: 1.5dppx) { only screen and ( min-resolution: 1.5dppx) {
/* Admin Menu - 16px @2x /* Admin Menu - 16px @2x
Use only if you put your plugin or option page in the top level via add_menu_page() Use only if you put your plugin or option page in the top level via add_menu_page()
*/ */
#toplevel_page_PLUGINNAME-FILENAME .wp-menu-image { #toplevel_page_PLUGINNAME-FILENAME .wp-menu-image {
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite_2x.png') !important; background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite_2x.png') !important;
-webkit-background-size: 16px 48px; -webkit-background-size: 16px 48px;
-moz-background-size: 16px 48px; -moz-background-size: 16px 48px;
background-size: 16px 48px; background-size: 16px 48px;
} }
/* Option Screen - 32px @2x */ /* Option Screen - 32px @2x */
#PLUGINNAME.icon32 { #PLUGINNAME.icon32 {
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminpage32_2x.png') !important; background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminpage32_2x.png') !important;
-webkit-background-size: 32px 32px; -webkit-background-size: 32px 32px;
-moz-background-size: 32px 32px; -moz-background-size: 32px 32px;
background-size: 32px 32px; background-size: 32px 32px;
} }
} }
</style> </style>
<?php } <?php }

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

@ -23,8 +23,8 @@ 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.
<p class="content-download"> <p class="content-download">
<a class="btn-primary icon-eye col3" href="http://lab.kremalicious.com/kbdfun/">Demo</a> <a class="btn-primary icon-eye" href="http://lab.kremalicious.com/kbdfun/">Demo</a>
<a class="icon-github col3" href="https://github.com/kremalicious/kbdfun/">Github</a> <a class="icon-github" href="https://github.com/kremalicious/kbdfun/">Github</a>
</p> </p>
## Usage ## Usage

3
package.json
View File

@ -9,9 +9,6 @@
"version": "3.0.0", "version": "3.0.0",
"license": "MIT", "license": "MIT",
"main": "gulpfile.js", "main": "gulpfile.js",
"scripts": {
"postinstall": "bower install && bundle install"
},
"dependencies": { "dependencies": {
"imagesloaded": ">=3.1.8", "imagesloaded": ">=3.1.8",
"jquery": ">=2.1.4", "jquery": ">=2.1.4",