mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-13 16:45:14 +01:00
commit
5dcf9a88dc
16
.travis.yml
Normal file
16
.travis.yml
Normal 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
1
Gemfile
@ -14,4 +14,5 @@ group :development do
|
||||
gem 'mini_magick'
|
||||
gem 'fileutils'
|
||||
gem 'gsl'
|
||||
gem 'narray'
|
||||
end
|
||||
|
||||
@ -3,7 +3,8 @@ kremalicious3
|
||||
|
||||
> [kremalicious.com](http://kremalicious.com) based on [Jekyll](http://jekyllrb.com). Neat.
|
||||
|
||||
[ ](https://www.codeship.io/projects/18092) [](https://gemnasium.com/kremalicious/kremalicious3)
|
||||
[ ](https://www.codeship.io/projects/18092)
|
||||
[](https://gemnasium.com/kremalicious/kremalicious3)
|
||||
|
||||
|
||||
Requirements
|
||||
@ -37,7 +38,7 @@ Get up and running
|
||||
Run the following command from the repository's root folder to install all dependencies.
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm install && bower install && bundle install
|
||||
```
|
||||
|
||||
### Development build
|
||||
|
||||
@ -15,9 +15,9 @@ var siteNavigation = {
|
||||
|
||||
siteSearch: function() {
|
||||
|
||||
var $content = $('.content'),
|
||||
var $content = $('.site__content'),
|
||||
$searchlink = $('.search-btn'),
|
||||
$searcharea = $('.topbar .search-area'),
|
||||
$searcharea = $('.search-area'),
|
||||
$searchfield = $('#search-input'),
|
||||
$searchresults = $('#search-results'),
|
||||
$searchpop = $('#search-popover');
|
||||
@ -36,7 +36,7 @@ var siteNavigation = {
|
||||
searchInput: document.getElementById('search-input'),
|
||||
resultsContainer: document.getElementById('search-results'),
|
||||
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
|
||||
})
|
||||
|
||||
|
||||
@ -154,24 +154,25 @@ a.btn-primary
|
||||
.icon
|
||||
width: 15px
|
||||
height: 15px
|
||||
margin: 1px 0 0 0
|
||||
margin: 1px 3px 0 0
|
||||
fill: #0089cb
|
||||
float: left
|
||||
|
||||
|
||||
// Close button
|
||||
/////////////////////////////////////
|
||||
|
||||
.close
|
||||
@extend .textcenter
|
||||
width: 16px
|
||||
height: 16px
|
||||
line-height: 12px
|
||||
font-size: $font-size-small
|
||||
@extend .textcenter, .transition
|
||||
width: 14px
|
||||
height: 14px
|
||||
padding: 0
|
||||
border-radius: 16px
|
||||
border-radius: 50%
|
||||
display: block
|
||||
background: $brand-grey-light
|
||||
background: lighten($brand-grey-light, 50%)
|
||||
color: #fff
|
||||
line-height: 1
|
||||
font-size: $font-size-mini
|
||||
|
||||
&:hover,
|
||||
&:focus
|
||||
@ -185,12 +186,18 @@ a.btn-primary
|
||||
/////////////////////////////////////
|
||||
|
||||
.content-download
|
||||
@extend .clearfix
|
||||
@extend .grid, .grid--gutters
|
||||
|
||||
display: block
|
||||
margin-top: 0
|
||||
|
||||
@media $breakpoint1
|
||||
display: flex
|
||||
margin-top: -($gutter-space)
|
||||
|
||||
a
|
||||
@extend .btn
|
||||
padding-left: 15px
|
||||
padding-right: 15px
|
||||
@extend .btn, .grid__col
|
||||
margin: $gutter-space 0 0 $gutter-space
|
||||
display: block
|
||||
|
||||
span
|
||||
|
||||
@ -6,20 +6,20 @@
|
||||
|
||||
.featured
|
||||
@extend .divider-bottom
|
||||
padding-top: $line-height-computed
|
||||
padding-bottom: $line-height-computed
|
||||
padding-top: ($line-height-computed*2)
|
||||
padding-bottom: ($line-height-computed*2)
|
||||
|
||||
@media $breakpoint2
|
||||
padding-top: ($line-height-computed*2)
|
||||
padding-bottom: ($line-height-computed*2)
|
||||
padding-top: ($line-height-computed*3)
|
||||
padding-bottom: ($line-height-computed*3)
|
||||
|
||||
.grid
|
||||
margin-bottom: 0
|
||||
|
||||
.featured-link
|
||||
display: block
|
||||
margin-bottom: $line-height-computed
|
||||
transition-property: none
|
||||
|
||||
@media $breakpoint2
|
||||
margin-bottom: 0
|
||||
|
||||
&:hover
|
||||
transform: scale(1.03)
|
||||
|
||||
@ -17,7 +17,6 @@
|
||||
.post-title
|
||||
@extend .h5
|
||||
margin: 0
|
||||
margin-bottom: $line-height-computed
|
||||
|
||||
.post-title,
|
||||
.post-title-link
|
||||
|
||||
@ -25,18 +25,18 @@
|
||||
color: darken($page-bg, 15%)
|
||||
margin-right: 2px
|
||||
|
||||
.hentry,
|
||||
.grid > .hentry
|
||||
.hentry
|
||||
@extend .divider-bottom
|
||||
padding-top: ($line-height-computed*2)
|
||||
padding-bottom: ($line-height-computed*2)
|
||||
width: 100%
|
||||
|
||||
@media $breakpoint2
|
||||
padding-top: ($line-height-computed*4)
|
||||
padding-bottom: ($line-height-computed*4)
|
||||
|
||||
.page-index &:first-child
|
||||
padding-top: ($line-height-computed*2)
|
||||
.page-index &:first-child
|
||||
padding-top: ($line-height-computed*3)
|
||||
|
||||
.page-single &
|
||||
padding-bottom: ($line-height-computed*2)
|
||||
@ -153,8 +153,7 @@
|
||||
|
||||
.masonry
|
||||
@media $breakpoint2
|
||||
width: 125%
|
||||
margin-left: -12.5%
|
||||
width: 100%
|
||||
clearfix()
|
||||
|
||||
.hentry
|
||||
|
||||
@ -4,10 +4,11 @@
|
||||
// Footer
|
||||
//
|
||||
|
||||
.footer
|
||||
.site__footer
|
||||
@extend .textcenter
|
||||
border-top: 1px solid rgba(255,255,255,.7)
|
||||
box-shadow: inset 0 1px 4px alpha($brand-dark, .2)
|
||||
padding-top: ($line-height-computed*2)
|
||||
|
||||
.gravatar
|
||||
margin-bottom: ($line-height-computed/2)
|
||||
|
||||
@ -5,74 +5,185 @@
|
||||
//
|
||||
|
||||
|
||||
// Prevents padding to be added
|
||||
*
|
||||
*,
|
||||
*:before,
|
||||
*:after
|
||||
box-sizing: border-box
|
||||
|
||||
.container
|
||||
padding-left: 7%
|
||||
padding-right: 7%
|
||||
width: 100%
|
||||
|
||||
@media $breakpoint2
|
||||
padding-left: 15%
|
||||
padding-right: 15%
|
||||
|
||||
//
|
||||
// Base
|
||||
//
|
||||
.grid
|
||||
margin: auto
|
||||
padding: 0
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
list-style: none
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
@media $breakpoint2
|
||||
max-width: 35em
|
||||
.grid__col
|
||||
flex: 1
|
||||
|
||||
> .col1,
|
||||
> .col2,
|
||||
> .col3,
|
||||
> .col4,
|
||||
> .col5,
|
||||
> .col6
|
||||
|
||||
//
|
||||
// Alignment per row
|
||||
//
|
||||
.grid--top
|
||||
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
|
||||
|
||||
.grid--full
|
||||
> .grid__col
|
||||
flex: 0 0 100%
|
||||
padding: 1em 0 0 1em
|
||||
|
||||
> .col6
|
||||
padding-left: 0
|
||||
.grid--1of6
|
||||
> .grid__col
|
||||
flex: 0 0 16.5%
|
||||
|
||||
> .col1-xs,
|
||||
> .col2-xs,
|
||||
> .col3-xs,
|
||||
> .col4-xs,
|
||||
> .col5-xs,
|
||||
> .col6-xs
|
||||
flex: 1
|
||||
padding: 1em 0 0 1em
|
||||
.grid--2of6,
|
||||
.grid--third
|
||||
> .grid__col
|
||||
flex: 0 0 33%
|
||||
|
||||
> .col1-xs
|
||||
flex: 0 0 16.666666667%
|
||||
> .col2-xs
|
||||
flex: 0 0 33.333333333%
|
||||
> .col3-xs
|
||||
.grid--3of6,
|
||||
.grid--half
|
||||
> .grid__col
|
||||
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
|
||||
> .col1
|
||||
flex: 0 0 16.5%
|
||||
> .col2
|
||||
flex: 0 0 33%
|
||||
> .col3
|
||||
flex: 0 0 50%
|
||||
> .col4
|
||||
flex: 0 0 66%
|
||||
> .col5
|
||||
flex: 0 0 82.5%
|
||||
> .col6
|
||||
.grid--4of6
|
||||
> .grid__col
|
||||
flex: 0 0 66%
|
||||
|
||||
.grid--5of6
|
||||
> .grid__col
|
||||
flex: 0 0 82.5%
|
||||
|
||||
|
||||
@media $breakpoint1
|
||||
.grid-small--fit
|
||||
> .grid__col
|
||||
flex: 1
|
||||
|
||||
.grid-small--full
|
||||
> .grid__col
|
||||
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%
|
||||
|
||||
@ -4,10 +4,8 @@
|
||||
// Header
|
||||
//
|
||||
|
||||
// Topbar
|
||||
/////////////////////////////////////
|
||||
|
||||
.topbar
|
||||
.site__header
|
||||
width: 100%
|
||||
background: $body-bg
|
||||
margin-top: ($line-height-computed/2)
|
||||
margin-bottom: ($line-height-computed/2)
|
||||
@ -46,31 +44,24 @@
|
||||
background-image: url('../img/logo@3x.png')
|
||||
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
|
||||
padding-top: 0
|
||||
// hide by default
|
||||
opacity: 0
|
||||
// show smooooothly on hover
|
||||
&:hover
|
||||
opacity: 1
|
||||
|
||||
.banner-title
|
||||
margin: 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
|
||||
&:active
|
||||
top: 0
|
||||
|
||||
@ -14,8 +14,9 @@
|
||||
@import 'mixins'
|
||||
|
||||
// Core CSS
|
||||
@import 'grid'
|
||||
@import 'scaffolding'
|
||||
@import 'grid'
|
||||
@import 'layout'
|
||||
@import 'typography'
|
||||
@import 'forms'
|
||||
@import 'buttons'
|
||||
|
||||
62
_src/_assets/styl/layout.styl
Normal file
62
_src/_assets/styl/layout.styl
Normal 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()
|
||||
@ -41,10 +41,14 @@
|
||||
.nav-popover
|
||||
@extend .divider-top, .list-unstyled
|
||||
padding: $line-height-computed 0
|
||||
margin-top: 60px
|
||||
margin-top: 30px
|
||||
margin-bottom: 0
|
||||
width: 100%
|
||||
background: $body-bg
|
||||
display: flex
|
||||
|
||||
.grid__col
|
||||
padding-top: 0
|
||||
|
||||
.nav-link
|
||||
@extend .h6, .textcenter
|
||||
@ -73,8 +77,13 @@
|
||||
/////////////////////////////////////
|
||||
|
||||
.paginator
|
||||
padding-top: $line-height-computed
|
||||
padding-bottom: $line-height-computed
|
||||
|
||||
.icon
|
||||
margin-bottom: -3px
|
||||
p
|
||||
margin-bottom: 0;
|
||||
|
||||
.paginator-next
|
||||
text-align: right
|
||||
|
||||
@ -26,46 +26,3 @@ textarea
|
||||
font-family: inherit
|
||||
font-size: 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()
|
||||
|
||||
@ -5,8 +5,9 @@
|
||||
//
|
||||
|
||||
&.search-open-blur
|
||||
@extend .transition
|
||||
filter: blur(10px)
|
||||
user-select: none
|
||||
pointer-events: none
|
||||
|
||||
.search-btn
|
||||
right: 50px
|
||||
@ -17,12 +18,12 @@
|
||||
|
||||
.search-close
|
||||
position: absolute
|
||||
right: 32px
|
||||
right: 16px
|
||||
|
||||
&,
|
||||
&:active
|
||||
top: 50%
|
||||
margin-top: -8px
|
||||
margin-top: -7px
|
||||
|
||||
.search-area
|
||||
@extend .transition
|
||||
@ -38,10 +39,29 @@
|
||||
&.ready
|
||||
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
|
||||
@extend .list-unstyled, .textcenter
|
||||
@extend .list-unstyled
|
||||
display: flex
|
||||
|
||||
.grid__col
|
||||
padding-top: 0
|
||||
|
||||
@media $breakpoint2
|
||||
margin-top: ($line-height-computed/2)
|
||||
margin-bottom: ($line-height-computed/2)
|
||||
@ -63,17 +83,3 @@
|
||||
border: none
|
||||
&:before
|
||||
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
|
||||
|
||||
@ -94,6 +94,11 @@ $link-color = lighten($brand-cyan, 5%)
|
||||
$link-color-hover = lighten($link-color, 10%)
|
||||
|
||||
|
||||
// Grid
|
||||
/////////////////////////////////////
|
||||
|
||||
$gutter-space = $line-height-computed
|
||||
|
||||
// Components spacing
|
||||
/////////////////////////////////////
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
|
||||
{% if post.layout == "link" %}
|
||||
|
||||
<article class="hentry format-link col6">
|
||||
<article class="hentry format-link">
|
||||
<header>
|
||||
<h1 class="entry-title">
|
||||
<a href="{{ post.linkurl }}" title="Go to source: {{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">
|
||||
@ -33,7 +33,7 @@
|
||||
|
||||
{% elsif post.layout == "photo" %}
|
||||
|
||||
<article class="hentry format-photo col6">
|
||||
<article class="hentry format-photo">
|
||||
|
||||
<a class="photo-link" href="{{ post.url }}">
|
||||
<figure class="hmedia">
|
||||
@ -48,7 +48,7 @@
|
||||
|
||||
{% else %}
|
||||
|
||||
<article class="hentry format-post col6">
|
||||
<article class="hentry format-post">
|
||||
<header>
|
||||
<h1 class="entry-title"><a href="{{ post.url }}">{{ post.title | titlecase }}</a></h1>
|
||||
</header>
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
|
||||
<aside class="grid 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>
|
||||
<aside class="featured">
|
||||
<div class="grid grid--full grid-small--fit grid--gutters">
|
||||
{% for post in site.posts %}
|
||||
{% if post.featured %}
|
||||
<article class="grid__col">
|
||||
<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 %}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@ -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 & 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 – {{ 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 & developer <a class="fn" rel="author" href="/about/">{{ site.author.name }}</a>
|
||||
</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>
|
||||
|
||||
<section class="footer-copyright" class="grid">
|
||||
<div class="col6">
|
||||
<p>© 2007 – {{ 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>
|
||||
|
||||
<script src="/assets/js/kremalicious3.min.js" async></script>
|
||||
|
||||
@ -1,49 +1,56 @@
|
||||
|
||||
<div class="topbar container">
|
||||
<div class="grid">
|
||||
<header role="banner" class="site__header">
|
||||
<div class="header__content">
|
||||
<div class="container">
|
||||
|
||||
<header role="banner" class="banner col3-xs">
|
||||
<h1 class="banner-title">
|
||||
<a class="banner-logo" href="/">kremalicious</a>
|
||||
</h1>
|
||||
</header>
|
||||
<div class="grid grid--half">
|
||||
|
||||
<nav role="navigation" class="nav-main col3-xs">
|
||||
<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>
|
||||
<div class="grid__col">
|
||||
<h1 class="header__title">
|
||||
<a class="header__logo" href="/">kremalicious</a>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<nav role="navigation" class="nav-main grid__col">
|
||||
<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">×</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">×</button>
|
||||
</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>
|
||||
</header>
|
||||
|
||||
<ul class="nav-popover grid hide">
|
||||
{% for category in site.categories %}
|
||||
<li class="col3-xs col2">
|
||||
<a class="nav-link" href="/{{ category | first }}/">
|
||||
{{ 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 id="search-popover" class="search-popover hide">
|
||||
<div class="container">
|
||||
<ul id="search-results" class="search-results grid grid--gutters grid-medium--half"></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
<nav class="paginator grid">
|
||||
|
||||
<p class="paginator-previous col2-xs">
|
||||
<p class="paginator-previous grid__col">
|
||||
{% if paginator.previous_page %}
|
||||
<a
|
||||
{% if page.category %}
|
||||
@ -27,11 +27,11 @@
|
||||
{% endif %}
|
||||
</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>
|
||||
</p>
|
||||
|
||||
<p class="paginator-next col2-xs">
|
||||
<p class="paginator-next grid__col">
|
||||
{% if paginator.next_page %}
|
||||
<a
|
||||
{% if page.category %}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<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 %}
|
||||
|
||||
<article class="related-photo col3-xs col2">
|
||||
<article class="related-photo grid__col">
|
||||
<a class="photo-link" href="{{ post.url }}">
|
||||
{% picture photothumb {{ post.image }} %}
|
||||
</a>
|
||||
|
||||
@ -3,11 +3,11 @@
|
||||
|
||||
<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 %}
|
||||
|
||||
<article class="related-post col2">
|
||||
<article class="related-post grid__col">
|
||||
<a class="post-title-link" href="{{ post.url }}">
|
||||
<h1 class="post-title">{{ post.title }}</h1>
|
||||
</a>
|
||||
|
||||
@ -3,13 +3,15 @@
|
||||
|
||||
{% 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 %}
|
||||
|
||||
<section role="document" class="document container">
|
||||
<div class="content">
|
||||
{{ content }}
|
||||
<section role="document" class="site__document">
|
||||
<div class="site__content">
|
||||
<div class="container">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@ -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:
|
||||
|
||||
<p class="content-download">
|
||||
<a class="btn-primary icon-download col3" href="/media/momcorp_wall_by_kremalicious.zip">Download</a>
|
||||
<a href="http://krlc.us/givecoffee" class="icon-heart col3">Donate</a>
|
||||
<a class="btn-primary icon-download" href="/media/momcorp_wall_by_kremalicious.zip">Download</a>
|
||||
<a href="http://krlc.us/givecoffee" class="icon-heart">Donate</a>
|
||||
</p>
|
||||
|
||||
@ -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.
|
||||
|
||||
<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>
|
||||
|
||||
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:
|
||||
|
||||
@ -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:
|
||||
|
||||
<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>
|
||||
|
||||
### Usage
|
||||
@ -80,12 +80,12 @@ function custom_post_type_icon() {
|
||||
#menu-posts-YOUR_POSTTYPE_NAME .wp-menu-image {
|
||||
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;
|
||||
}
|
||||
/* Post Screen - 32px */
|
||||
.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
|
||||
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-resolution: 1.5dppx) {
|
||||
|
||||
/* Admin Menu - 16px @2x */
|
||||
#menu-posts-YOUR_POSTTYPE_NAME .wp-menu-image {
|
||||
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite_2x.png') !important;
|
||||
-webkit-background-size: 16px 48px;
|
||||
-moz-background-size: 16px 48px;
|
||||
background-size: 16px 48px;
|
||||
}
|
||||
/* Post Screen - 32px @2x */
|
||||
.icon32-posts-YOUR_POSTTYPE_NAME {
|
||||
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminpage32_2x.png') !important;
|
||||
-webkit-background-size: 32px 32px;
|
||||
-moz-background-size: 32px 32px;
|
||||
background-size: 32px 32px;
|
||||
}
|
||||
/* Admin Menu - 16px @2x */
|
||||
#menu-posts-YOUR_POSTTYPE_NAME .wp-menu-image {
|
||||
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite_2x.png') !important;
|
||||
-webkit-background-size: 16px 48px;
|
||||
-moz-background-size: 16px 48px;
|
||||
background-size: 16px 48px;
|
||||
}
|
||||
/* Post Screen - 32px @2x */
|
||||
.icon32-posts-YOUR_POSTTYPE_NAME {
|
||||
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminpage32_2x.png') !important;
|
||||
-webkit-background-size: 32px 32px;
|
||||
-moz-background-size: 32px 32px;
|
||||
background-size: 32px 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<?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()
|
||||
*/
|
||||
#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 */
|
||||
#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 {
|
||||
background-position: 6px -26px !important;
|
||||
@ -160,7 +160,7 @@ function option_page_icon() {
|
||||
|
||||
/* Option Screen - 32px */
|
||||
#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
|
||||
@ -169,23 +169,23 @@ function option_page_icon() {
|
||||
only screen and ( -o-min-device-pixel-ratio: 3/2),
|
||||
only screen and ( min-device-pixel-ratio: 1.5),
|
||||
only screen and ( min-resolution: 1.5dppx) {
|
||||
/* Admin Menu - 16px @2x
|
||||
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 {
|
||||
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite_2x.png') !important;
|
||||
-webkit-background-size: 16px 48px;
|
||||
-moz-background-size: 16px 48px;
|
||||
background-size: 16px 48px;
|
||||
}
|
||||
/* Admin Menu - 16px @2x
|
||||
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 {
|
||||
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite_2x.png') !important;
|
||||
-webkit-background-size: 16px 48px;
|
||||
-moz-background-size: 16px 48px;
|
||||
background-size: 16px 48px;
|
||||
}
|
||||
|
||||
/* Option Screen - 32px @2x */
|
||||
#PLUGINNAME.icon32 {
|
||||
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminpage32_2x.png') !important;
|
||||
-webkit-background-size: 32px 32px;
|
||||
-moz-background-size: 32px 32px;
|
||||
background-size: 32px 32px;
|
||||
}
|
||||
/* Option Screen - 32px @2x */
|
||||
#PLUGINNAME.icon32 {
|
||||
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminpage32_2x.png') !important;
|
||||
-webkit-background-size: 32px 32px;
|
||||
-moz-background-size: 32px 32px;
|
||||
background-size: 32px 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<?php }
|
||||
|
||||
@ -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.
|
||||
|
||||
<p class="content-download">
|
||||
<a class="btn-primary icon-eye col3" href="http://lab.kremalicious.com/kbdfun/">Demo</a>
|
||||
<a class="icon-github col3" href="https://github.com/kremalicious/kbdfun/">Github</a>
|
||||
<a class="btn-primary icon-eye" href="http://lab.kremalicious.com/kbdfun/">Demo</a>
|
||||
<a class="icon-github" href="https://github.com/kremalicious/kbdfun/">Github</a>
|
||||
</p>
|
||||
|
||||
## Usage
|
||||
|
||||
@ -9,9 +9,6 @@
|
||||
"version": "3.0.0",
|
||||
"license": "MIT",
|
||||
"main": "gulpfile.js",
|
||||
"scripts": {
|
||||
"postinstall": "bower install && bundle install"
|
||||
},
|
||||
"dependencies": {
|
||||
"imagesloaded": ">=3.1.8",
|
||||
"jquery": ">=2.1.4",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user