diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 002b4aa0..00000000 --- a/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["env"] -} diff --git a/.codeclimate.yml b/.codeclimate.yml new file mode 100644 index 00000000..ac7d75f9 --- /dev/null +++ b/.codeclimate.yml @@ -0,0 +1,5 @@ +version: '2' +checks: + method-lines: + config: + threshold: 55 # Gatsby's StaticQuery makes render functions pretty long diff --git a/.editorconfig b/.editorconfig index b64e0cd9..b444fcfc 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,13 +1,14 @@ # EditorConfig is awesome: http://EditorConfig.org +root = true [*] indent_style = space -indent_size = 4 +indent_size = 2 end_of_line = lf insert_final_newline = true charset = utf-8 trim_trailing_whitespace = true -[*.json] -indent_size = 2 +[*.scss] +indent_size = 4 diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 00000000..bcf8949d --- /dev/null +++ b/.eslintrc @@ -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" + } +} diff --git a/.gitignore b/.gitignore index a1bcc205..546b06fa 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,8 @@ node_modules -_site -_build -Gemfile.lock -_src/.jekyll-metadata yarn.lock .yarnclean package-lock.json +public +.cache +src/components/svg +plugins/gatsby-redirect-from diff --git a/.markdownlint.json b/.markdownlint.json new file mode 100644 index 00000000..ca4fcadb --- /dev/null +++ b/.markdownlint.json @@ -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 +} diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..6cddd8e6 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,5 @@ +node_modules/ +.cache/ +static/ +public/ +content/ diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..49955e2e --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "semi": false, + "singleQuote": true, + "trailingComma": "none" +} diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 00000000..ba14b900 --- /dev/null +++ b/.stylelintrc @@ -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 + } +} diff --git a/.travis.yml b/.travis.yml index 5b7e468c..6abe4d23 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,37 +1,23 @@ -language: ruby -rvm: - - 2.5 +language: node_js +node_js: node cache: - bundler: true directories: - - $TRAVIS_BUILD_DIR/node_modules - - $TRAVIS_BUILD_DIR/_site/media + - node_modules + - public -addons: - artifacts: - paths: - - $TRAVIS_BUILD_DIR/_site/media - apt: - update: true - packages: - - libgsl0ldbl - - libgsl0-dev +install: + - npm i -before_install: - - nvm install 10 - -before_script: "_ci/setup.sh" -script: "_ci/build.sh" - -deploy: - skip_cleanup: true - provider: script - script: "_ci/deploy.sh" - on: - branch: master +script: + - npm test + - npm run build +after_success: + - pip install --user awscli + - export PATH=$PATH:$HOME/.local/bin + - npm run deploy notifications: - email: false - slack: kremalicious:LXLUCjkY5yaZaC9vHl9vIORr + email: false + slack: kremalicious:LXLUCjkY5yaZaC9vHl9vIORr diff --git a/Gemfile b/Gemfile deleted file mode 100644 index c304a1e6..00000000 --- a/Gemfile +++ /dev/null @@ -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 diff --git a/LICENSE b/LICENSE index fc487c46..c4331e38 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ 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: diff --git a/LICENSE-content b/LICENSE-content index ac50ae93..5ce29441 100644 --- a/LICENSE-content +++ b/LICENSE-content @@ -1,5 +1,3 @@ -All post content under `_src/_posts` is licensed under a -Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International -License. +All post content under `./content/posts` is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. http://creativecommons.org/licenses/by-nc-sa/4.0/. diff --git a/LICENSE-photos b/LICENSE-photos index d789f81c..e4e1e1d5 100644 --- a/LICENSE-photos +++ b/LICENSE-photos @@ -1,7 +1,6 @@ -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. diff --git a/README.md b/README.md index e8103932..2620398c 100644 --- a/README.md +++ b/README.md @@ -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) -[![Greenkeeper badge](https://badges.greenkeeper.io/kremalicious/kremalicious3.svg)](https://greenkeeper.io/) +[![Build Status](https://travis-ci.com/kremalicious/blog.svg?branch=master)](https://travis-ci.com/kremalicious/blog) +[![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: -- [node.js](http://nodejs.org/) & [npm](https://npmjs.org/) -- [Ruby](https://www.ruby-lang.org) (for sanity, install with [rvm](https://rvm.io/)) and [Bundler](http://bundler.io/) +- [Node.js](http://nodejs.org/) +- [npm](https://npmjs.org/) - -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. +## Development ```bash -npm install && bundle install +npm i +npm start ``` -### Development server - -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`. +## Production build ```bash -gulp +npm run build ``` -### Production build +## Licenses -```bash -gulp build --production -``` +The MIT License (MIT) - -Licenses ------------------- +except for: ### Posts -Creative Commons License
All post content under `_src/_posts` is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. + + Creative Commons License + + +All post content under `./content/posts` is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. ### 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. - -### Everything else - -The MIT License (MIT) diff --git a/Rakefile b/Rakefile deleted file mode 100644 index 67ec86db..00000000 --- a/Rakefile +++ /dev/null @@ -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 diff --git a/_aws/redirects.xml b/_aws/redirects.xml index f16c9e70..c77e87b3 100644 --- a/_aws/redirects.xml +++ b/_aws/redirects.xml @@ -1,4 +1,3 @@ - diff --git a/_ci/build.sh b/_ci/build.sh deleted file mode 100755 index 15f86b64..00000000 --- a/_ci/build.sh +++ /dev/null @@ -1,11 +0,0 @@ -#!/usr/bin/env bash - -npm test && - -if [ "$TRAVIS_BRANCH" == "master" ]; then - gulp build --production -else - gulp build -fi; - -exit; diff --git a/_ci/deploy.sh b/_ci/deploy.sh deleted file mode 100755 index 8b267cf7..00000000 --- a/_ci/deploy.sh +++ /dev/null @@ -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 diff --git a/_ci/setup.sh b/_ci/setup.sh deleted file mode 100755 index 42fc7413..00000000 --- a/_ci/setup.sh +++ /dev/null @@ -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 diff --git a/_config.dev.yml b/_config.dev.yml deleted file mode 100644 index 3742e2ff..00000000 --- a/_config.dev.yml +++ /dev/null @@ -1,3 +0,0 @@ - -# fix for jekyll-picture-tag always prepending site.url -url: http://localhost:1337 diff --git a/_config.yml b/_config.yml deleted file mode 100644 index 998aa3d0..00000000 --- a/_config.yml +++ /dev/null @@ -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/' diff --git a/_src/404.md b/_src/404.md deleted file mode 100644 index 2c5bc8ef..00000000 --- a/_src/404.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -layout: page -title: I'm sorry Dave ---- - -
- -

I'm sorry Dave,

-

I'm afraid I can't do that.

- -How about a nice search? - -[Go to homepage](/) diff --git a/_src/_assets/js/_menu.js b/_src/_assets/js/_menu.js deleted file mode 100644 index 80546c51..00000000 --- a/_src/_assets/js/_menu.js +++ /dev/null @@ -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 diff --git a/_src/_assets/js/_modals.js b/_src/_assets/js/_modals.js deleted file mode 100644 index c0376d5f..00000000 --- a/_src/_assets/js/_modals.js +++ /dev/null @@ -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: ` -

Say thanks

-
-
-

Bitcoin

- - 
${btcAddress}
-
-
-

Ethereum

- - 
${ethAddress}
-
-
- ` - }) - - // 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 diff --git a/_src/_assets/js/_search.js b/_src/_assets/js/_search.js deleted file mode 100644 index 117250e7..00000000 --- a/_src/_assets/js/_search.js +++ /dev/null @@ -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: '{title}', - 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 diff --git a/_src/_assets/js/analytics.js b/_src/_assets/js/analytics.js deleted file mode 100644 index c77dcb17..00000000 --- a/_src/_assets/js/analytics.js +++ /dev/null @@ -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 diff --git a/_src/_assets/js/kremalicious3.js b/_src/_assets/js/kremalicious3.js deleted file mode 100644 index 2d91b3ce..00000000 --- a/_src/_assets/js/kremalicious3.js +++ /dev/null @@ -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() diff --git a/_src/_assets/js/photos.js b/_src/_assets/js/photos.js deleted file mode 100644 index 81e73294..00000000 --- a/_src/_assets/js/photos.js +++ /dev/null @@ -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` - } - }) -} diff --git a/_src/_assets/styl/_kremalicious/actions.styl b/_src/_assets/styl/_kremalicious/actions.styl deleted file mode 100644 index 2e76f1ad..00000000 --- a/_src/_assets/styl/_kremalicious/actions.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/_kremalicious/alerts.styl b/_src/_assets/styl/_kremalicious/alerts.styl deleted file mode 100644 index cbb26da4..00000000 --- a/_src/_assets/styl/_kremalicious/alerts.styl +++ /dev/null @@ -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%) diff --git a/_src/_assets/styl/_kremalicious/animations.styl b/_src/_assets/styl/_kremalicious/animations.styl deleted file mode 100644 index 00ed28cc..00000000 --- a/_src/_assets/styl/_kremalicious/animations.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/_kremalicious/buttons.styl b/_src/_assets/styl/_kremalicious/buttons.styl deleted file mode 100644 index f7095c89..00000000 --- a/_src/_assets/styl/_kremalicious/buttons.styl +++ /dev/null @@ -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') diff --git a/_src/_assets/styl/_kremalicious/code.styl b/_src/_assets/styl/_kremalicious/code.styl deleted file mode 100644 index a0fe0d61..00000000 --- a/_src/_assets/styl/_kremalicious/code.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/_kremalicious/content-featured.styl b/_src/_assets/styl/_kremalicious/content-featured.styl deleted file mode 100644 index a480b8cb..00000000 --- a/_src/_assets/styl/_kremalicious/content-featured.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/_kremalicious/content-link.styl b/_src/_assets/styl/_kremalicious/content-link.styl deleted file mode 100644 index 8882b0d6..00000000 --- a/_src/_assets/styl/_kremalicious/content-link.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/_kremalicious/content-photo.styl b/_src/_assets/styl/_kremalicious/content-photo.styl deleted file mode 100644 index 25f3cc62..00000000 --- a/_src/_assets/styl/_kremalicious/content-photo.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/_kremalicious/content-related.styl b/_src/_assets/styl/_kremalicious/content-related.styl deleted file mode 100644 index a4537473..00000000 --- a/_src/_assets/styl/_kremalicious/content-related.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/_kremalicious/content.styl b/_src/_assets/styl/_kremalicious/content.styl deleted file mode 100644 index e1f2fe86..00000000 --- a/_src/_assets/styl/_kremalicious/content.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/_kremalicious/footer.styl b/_src/_assets/styl/_kremalicious/footer.styl deleted file mode 100644 index a0dbe22f..00000000 --- a/_src/_assets/styl/_kremalicious/footer.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/_kremalicious/forms.styl b/_src/_assets/styl/_kremalicious/forms.styl deleted file mode 100644 index 277bc1b7..00000000 --- a/_src/_assets/styl/_kremalicious/forms.styl +++ /dev/null @@ -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() diff --git a/_src/_assets/styl/_kremalicious/grid.styl b/_src/_assets/styl/_kremalicious/grid.styl deleted file mode 100644 index 6fe40f25..00000000 --- a/_src/_assets/styl/_kremalicious/grid.styl +++ /dev/null @@ -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% diff --git a/_src/_assets/styl/_kremalicious/hamburger.styl b/_src/_assets/styl/_kremalicious/hamburger.styl deleted file mode 100644 index 7335d746..00000000 --- a/_src/_assets/styl/_kremalicious/hamburger.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/_kremalicious/header.styl b/_src/_assets/styl/_kremalicious/header.styl deleted file mode 100644 index f1030f36..00000000 --- a/_src/_assets/styl/_kremalicious/header.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/_kremalicious/icons.styl b/_src/_assets/styl/_kremalicious/icons.styl deleted file mode 100644 index 13a75ea3..00000000 --- a/_src/_assets/styl/_kremalicious/icons.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/_kremalicious/layout.styl b/_src/_assets/styl/_kremalicious/layout.styl deleted file mode 100644 index f5bc31e3..00000000 --- a/_src/_assets/styl/_kremalicious/layout.styl +++ /dev/null @@ -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() diff --git a/_src/_assets/styl/_kremalicious/media.styl b/_src/_assets/styl/_kremalicious/media.styl deleted file mode 100644 index e9f6e843..00000000 --- a/_src/_assets/styl/_kremalicious/media.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/_kremalicious/mixins.styl b/_src/_assets/styl/_kremalicious/mixins.styl deleted file mode 100644 index d0f3f7c9..00000000 --- a/_src/_assets/styl/_kremalicious/mixins.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/_kremalicious/navigation.styl b/_src/_assets/styl/_kremalicious/navigation.styl deleted file mode 100644 index 0b59b025..00000000 --- a/_src/_assets/styl/_kremalicious/navigation.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/_kremalicious/print.styl b/_src/_assets/styl/_kremalicious/print.styl deleted file mode 100644 index 9b9a2809..00000000 --- a/_src/_assets/styl/_kremalicious/print.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/_kremalicious/scaffolding.styl b/_src/_assets/styl/_kremalicious/scaffolding.styl deleted file mode 100644 index c0ebd647..00000000 --- a/_src/_assets/styl/_kremalicious/scaffolding.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/_kremalicious/search.styl b/_src/_assets/styl/_kremalicious/search.styl deleted file mode 100644 index 93b67152..00000000 --- a/_src/_assets/styl/_kremalicious/search.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/_kremalicious/syntax.styl b/_src/_assets/styl/_kremalicious/syntax.styl deleted file mode 100644 index e49aa10f..00000000 --- a/_src/_assets/styl/_kremalicious/syntax.styl +++ /dev/null @@ -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 */ diff --git a/_src/_assets/styl/_kremalicious/tables.styl b/_src/_assets/styl/_kremalicious/tables.styl deleted file mode 100644 index 0311699b..00000000 --- a/_src/_assets/styl/_kremalicious/tables.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/_kremalicious/tagcloud.styl b/_src/_assets/styl/_kremalicious/tagcloud.styl deleted file mode 100644 index 3c535136..00000000 --- a/_src/_assets/styl/_kremalicious/tagcloud.styl +++ /dev/null @@ -1,4 +0,0 @@ - -.tagcloud__tag - @extend .link--nounderline - padding: .3rem .5rem diff --git a/_src/_assets/styl/_kremalicious/tooltips.styl b/_src/_assets/styl/_kremalicious/tooltips.styl deleted file mode 100644 index 203d28c1..00000000 --- a/_src/_assets/styl/_kremalicious/tooltips.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/_kremalicious/typography.styl b/_src/_assets/styl/_kremalicious/typography.styl deleted file mode 100644 index 8cc962b3..00000000 --- a/_src/_assets/styl/_kremalicious/typography.styl +++ /dev/null @@ -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: ― ― - -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; } diff --git a/_src/_assets/styl/_kremalicious/variables.styl b/_src/_assets/styl/_kremalicious/variables.styl deleted file mode 100644 index 2faefccc..00000000 --- a/_src/_assets/styl/_kremalicious/variables.styl +++ /dev/null @@ -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%) diff --git a/_src/_assets/styl/_kremalicious/vex.styl b/_src/_assets/styl/_kremalicious/vex.styl deleted file mode 100644 index c3e3218f..00000000 --- a/_src/_assets/styl/_kremalicious/vex.styl +++ /dev/null @@ -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" // × - 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 diff --git a/_src/_assets/styl/_page-404.styl b/_src/_assets/styl/_page-404.styl deleted file mode 100644 index 53a98593..00000000 --- a/_src/_assets/styl/_page-404.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/_page-styleguide.styl b/_src/_assets/styl/_page-styleguide.styl deleted file mode 100644 index 38268d41..00000000 --- a/_src/_assets/styl/_page-styleguide.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/kremalicious3.styl b/_src/_assets/styl/kremalicious3.styl deleted file mode 100644 index eb1916a5..00000000 --- a/_src/_assets/styl/kremalicious3.styl +++ /dev/null @@ -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 diff --git a/_src/_assets/styl/post-kbd.styl b/_src/_assets/styl/post-kbd.styl deleted file mode 100644 index 62b9dc49..00000000 --- a/_src/_assets/styl/post-kbd.styl +++ /dev/null @@ -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 diff --git a/_src/_data/colors.yml b/_src/_data/colors.yml deleted file mode 100644 index 73a740ed..00000000 --- a/_src/_data/colors.yml +++ /dev/null @@ -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' diff --git a/_src/_includes/actions.html b/_src/_includes/actions.html deleted file mode 100644 index dd781ebf..00000000 --- a/_src/_includes/actions.html +++ /dev/null @@ -1,23 +0,0 @@ - - diff --git a/_src/_includes/articles.html b/_src/_includes/articles.html deleted file mode 100644 index 117c54dd..00000000 --- a/_src/_includes/articles.html +++ /dev/null @@ -1,108 +0,0 @@ - -{% if post.layout == "link" %} - - - -{% elsif post.layout == "photo" %} - - - -{% else %} - -
-
-

{{ post.title | titlecase }}

-
- -
- - {% if post.image %} - - {% include picture.html %} - - {% 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" %} - - {% endif %} - - {% unless page.path contains "goodies" %} - - Continue reading - - - - - {% endunless %} - -
-
- -{% endif %} diff --git a/_src/_includes/entry_meta.html b/_src/_includes/entry_meta.html deleted file mode 100644 index bb9f7f9a..00000000 --- a/_src/_includes/entry_meta.html +++ /dev/null @@ -1,31 +0,0 @@ - diff --git a/_src/_includes/featured.html b/_src/_includes/featured.html deleted file mode 100644 index 3261fad5..00000000 --- a/_src/_includes/featured.html +++ /dev/null @@ -1,15 +0,0 @@ - - diff --git a/_src/_includes/footer.html b/_src/_includes/footer.html deleted file mode 100644 index e83f3181..00000000 --- a/_src/_includes/footer.html +++ /dev/null @@ -1,69 +0,0 @@ - - -{% include scripts.html %} diff --git a/_src/_includes/head.html b/_src/_includes/head.html deleted file mode 100644 index 08f3906c..00000000 --- a/_src/_includes/head.html +++ /dev/null @@ -1,103 +0,0 @@ - - - - - - - - {% if paginator.previous_page %} - Page {{ paginator.page }} ¦ {{ site.name }} - {% elsif page.title %} - {{ page.title }} ¦ {{ site.name }} - {% else %} - {{ site.name }} ¦ {{ site.description }} - {% endif %} - - - {% if page.description %} - - {% elsif page.front_page %} - - {% else %} - - {% endif %} - - - - - - - - - - {% if page.style %} - - {% endif %} - - - {% if page.sitemap == false %} - - {% endif %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - {% include opengraph.html %} - - - {% include twittercards.html %} - - - - - - - - diff --git a/_src/_includes/header.html b/_src/_includes/header.html deleted file mode 100644 index 5d94beeb..00000000 --- a/_src/_includes/header.html +++ /dev/null @@ -1,57 +0,0 @@ - - - -
-
- -
-
diff --git a/_src/_includes/opengraph.html b/_src/_includes/opengraph.html deleted file mode 100644 index cbec20ed..00000000 --- a/_src/_includes/opengraph.html +++ /dev/null @@ -1,36 +0,0 @@ - - -{% if page.title %} - -{% else %} - -{% endif %} -{% if page.title %} - - -{% else %} - -{% endif %} -{% if page.description %} - -{% elsif page.front_page %} - -{% else %} - -{% endif %} -{% if page.url %} - -{% endif %} -{% if page.date %} - -{% endif %} -{% if page.image %} - -{% else %} - -{% endif %} -{% if page.categories %} - {% for category in page.categories limit:1 %} - - {% endfor %} -{% endif %} diff --git a/_src/_includes/paginator.html b/_src/_includes/paginator.html deleted file mode 100644 index 0bc2d62d..00000000 --- a/_src/_includes/paginator.html +++ /dev/null @@ -1,43 +0,0 @@ - -{% if paginator.total_pages > 1 %} - - - -{% endif %} diff --git a/_src/_includes/photos.html b/_src/_includes/photos.html deleted file mode 100644 index 7ea3a3b2..00000000 --- a/_src/_includes/photos.html +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/_src/_includes/picture.html b/_src/_includes/picture.html deleted file mode 100644 index cefb5a64..00000000 --- a/_src/_includes/picture.html +++ /dev/null @@ -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 %} - -{{ post.title }} diff --git a/_src/_includes/relatedphotos.html b/_src/_includes/relatedphotos.html deleted file mode 100644 index ff9692b1..00000000 --- a/_src/_includes/relatedphotos.html +++ /dev/null @@ -1,17 +0,0 @@ - diff --git a/_src/_includes/relatedposts.html b/_src/_includes/relatedposts.html deleted file mode 100644 index 91e3697c..00000000 --- a/_src/_includes/relatedposts.html +++ /dev/null @@ -1,24 +0,0 @@ -{% if site.related_posts.size > 1 %} - -{% endif %} diff --git a/_src/_includes/scripts.html b/_src/_includes/scripts.html deleted file mode 100644 index c3112b35..00000000 --- a/_src/_includes/scripts.html +++ /dev/null @@ -1,111 +0,0 @@ - - -{% if page.js %} - -{% elsif layout.js %} - -{% endif %} - -{% if page.coinhive %} -
-
Mining enabled
-
0 Hashes/s
-
- - -{% endif %} - -{% if jekyll.environment == "production" %} - - -{% endif %} - - - -{% if jekyll.environment == "production" %} - -{% else %} - -{% endif%} - - diff --git a/_src/_includes/twittercards.html b/_src/_includes/twittercards.html deleted file mode 100644 index 709b2303..00000000 --- a/_src/_includes/twittercards.html +++ /dev/null @@ -1,26 +0,0 @@ - -{% if page.category == "photos" %} - -{% else %} - -{% endif %} - - -{% if page.title %} - -{% else %} - -{% endif %} -{% if page.url %} - -{% endif %} -{% if page.description %} - -{% else %} - -{% endif %} -{% if page.image %} - -{% else %} - -{% endif %} diff --git a/_src/_layouts/archive.html b/_src/_layouts/archive.html deleted file mode 100644 index 1161f4f8..00000000 --- a/_src/_layouts/archive.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -layout: base ---- - -
- - {% if page.type == 'category' %} -

{{ page.title }}

- {% elsif page.type == 'tag' %} -

#{{ page.title }}

- {% else %} -

{{ page.type }} archive for {{ page.title }}

- {% endif %} - - {% if page.path contains "photos" %}
{% endif %} - {% for post in page.posts %} - - {% if post.layout == "photo" %} - {% include photos.html %} - {% else %} - {% include articles.html %} - {% endif %} - - {% endfor %} - {% if page.path contains "photos" %}
{% endif %} - -
- -{% include paginator.html %} diff --git a/_src/_layouts/base.html b/_src/_layouts/base.html deleted file mode 100644 index a2578742..00000000 --- a/_src/_layouts/base.html +++ /dev/null @@ -1,20 +0,0 @@ - -{% include head.html %} - -{% capture id %}{{ page.url | replace:'/','-' | replace_first:'-','' | replace:'.html','' | replace:'-index','' }}{% endcapture %} - - - - {% include header.html %} - -
-
-
- {{ content }} -
-
-
- - - -{% include footer.html %} diff --git a/_src/_layouts/link.html b/_src/_layouts/link.html deleted file mode 100644 index 14391012..00000000 --- a/_src/_layouts/link.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -layout: base ---- - -
- - - -
diff --git a/_src/_layouts/page.html b/_src/_layouts/page.html deleted file mode 100644 index a8162166..00000000 --- a/_src/_layouts/page.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -layout: base ---- - -
- -
-
-

{{ page.title | titlecase }}

-
- -
- {% if page.image %} - {% include picture.html %} - {% endif %} - - {{ content }} -
- -
- -
diff --git a/_src/_layouts/photo.html b/_src/_layouts/photo.html deleted file mode 100644 index 26490e63..00000000 --- a/_src/_layouts/photo.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -layout: base - -js: photos.min.js ---- - -
- -
- -
-

{{ page.title | titlecase }}

-
- -
- - {% include picture.html %} - - -
- -
- {{ content }} -
- - {% include entry_meta.html %} - - {% include relatedphotos.html %} - -
- -
diff --git a/_src/_layouts/post.html b/_src/_layouts/post.html deleted file mode 100644 index fdd25d7c..00000000 --- a/_src/_layouts/post.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -layout: base ---- - -
- -
-
-

{{ page.title | titlecase }}

-
- {{ page.excerpt }} -
-
- -
- {% if page.image %} -
- {% include picture.html %} -
- {% endif %} - - {{ content | remove: page.excerpt }} -
- - {% include actions.html %} - - {% include entry_meta.html %} - - {% include relatedposts.html %} - -
- -
diff --git a/_src/_plugins/octopress_filters.rb b/_src/_plugins/octopress_filters.rb deleted file mode 100644 index 2abdc629..00000000 --- a/_src/_plugins/octopress_filters.rb +++ /dev/null @@ -1,96 +0,0 @@ -#custom filters for Octopress - -module OctopressLiquidFilters - - # Used on the blog index to split posts on the marker - def excerpt(input) - if input.index(//i) - input.split(//i)[0] - else - input - end - end - - # Checks for excerpts (helpful for template conditionals) - def has_excerpt(input) - input =~ //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) - /
(?[\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(//, ']]>') - 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 + ' …' - 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 + ' …' - 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 \ No newline at end of file diff --git a/_src/_plugins/titlecase.rb b/_src/_plugins/titlecase.rb deleted file mode 100644 index 5fc9c3c8..00000000 --- a/_src/_plugins/titlecase.rb +++ /dev/null @@ -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 \ No newline at end of file diff --git a/_src/_posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md b/_src/_posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md deleted file mode 100644 index 494c3c43..00000000 --- a/_src/_posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md +++ /dev/null @@ -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... diff --git a/_src/_posts/2008-04-22-apple-releases-sdk-for-aperture-21.md b/_src/_posts/2008-04-22-apple-releases-sdk-for-aperture-21.md deleted file mode 100644 index 5f2083d0..00000000 --- a/_src/_posts/2008-04-22-apple-releases-sdk-for-aperture-21.md +++ /dev/null @@ -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. diff --git a/_src/_posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md b/_src/_posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md deleted file mode 100644 index 5208d24d..00000000 --- a/_src/_posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md +++ /dev/null @@ -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. diff --git a/_src/_posts/2008-05-05-scan-images-directly-into-apple-aperture.md b/_src/_posts/2008-05-05-scan-images-directly-into-apple-aperture.md deleted file mode 100644 index 0d9fbe39..00000000 --- a/_src/_posts/2008-05-05-scan-images-directly-into-apple-aperture.md +++ /dev/null @@ -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... diff --git a/_src/_posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md b/_src/_posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md deleted file mode 100644 index 617bd564..00000000 --- a/_src/_posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md +++ /dev/null @@ -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. diff --git a/_src/_posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md b/_src/_posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md deleted file mode 100644 index c0593c33..00000000 --- a/_src/_posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md +++ /dev/null @@ -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. diff --git a/_src/_posts/2008-08-28-canon-eos-50d-new-lens-announced.md b/_src/_posts/2008-08-28-canon-eos-50d-new-lens-announced.md deleted file mode 100644 index 0297efd6..00000000 --- a/_src/_posts/2008-08-28-canon-eos-50d-new-lens-announced.md +++ /dev/null @@ -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. - - - -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. diff --git a/_src/_posts/2010-07-03-momcorp.md b/_src/_posts/2010-07-03-momcorp.md deleted file mode 100644 index 0108895e..00000000 --- a/_src/_posts/2010-07-03-momcorp.md +++ /dev/null @@ -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: - -

- Download - Donate -

diff --git a/_src/_posts/2012-03-04-relaxing-cat.md b/_src/_posts/2012-03-04-relaxing-cat.md deleted file mode 100644 index 2782b4be..00000000 --- a/_src/_posts/2012-03-04-relaxing-cat.md +++ /dev/null @@ -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 ---- - - diff --git a/_src/_posts/2012-04-03-skeletor.md b/_src/_posts/2012-04-03-skeletor.md deleted file mode 100644 index 38184305..00000000 --- a/_src/_posts/2012-04-03-skeletor.md +++ /dev/null @@ -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 ---- - - diff --git a/_src/_posts/2012-04-03-train-station-leipzig.md b/_src/_posts/2012-04-03-train-station-leipzig.md deleted file mode 100644 index 6ced8dae..00000000 --- a/_src/_posts/2012-04-03-train-station-leipzig.md +++ /dev/null @@ -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 ---- - - diff --git a/_src/_posts/2012-04-05-current-sushi-status.md b/_src/_posts/2012-04-05-current-sushi-status.md deleted file mode 100644 index d3803f28..00000000 --- a/_src/_posts/2012-04-05-current-sushi-status.md +++ /dev/null @@ -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 ---- - - diff --git a/_src/_posts/2012-04-07-buna.md b/_src/_posts/2012-04-07-buna.md deleted file mode 100644 index 0f3c5e59..00000000 --- a/_src/_posts/2012-04-07-buna.md +++ /dev/null @@ -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 ---- - - diff --git a/_src/_posts/2012-04-07-cat-enjoying-a-good-ipad-game.md b/_src/_posts/2012-04-07-cat-enjoying-a-good-ipad-game.md deleted file mode 100644 index a67fe1a4..00000000 --- a/_src/_posts/2012-04-07-cat-enjoying-a-good-ipad-game.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -layout: photo - -title: Cat enjoying a good iPad game -image: 7838011c80ce11e19e4a12313813ffc0_7.jpg -author: Matthias Kretschmann - -date: 2012-04-07 16:26:46+00:00 -wordpress_id: 1739 -categories: -- photos -post_format: -- Image -tags: -- instagram ---- - - diff --git a/_src/_posts/2012-04-07-ipad-porn.md b/_src/_posts/2012-04-07-ipad-porn.md deleted file mode 100644 index 62572839..00000000 --- a/_src/_posts/2012-04-07-ipad-porn.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -layout: photo - -title: iPad Porn -image: 97a44d6080b711e181bd12313817987b_7.jpg -author: Matthias Kretschmann - -date: 2012-04-07 13:43:00+00:00 -wordpress_id: 1735 -categories: -- photos -post_format: -- Image -tags: -- instagram - -coinhive: true ---- - - diff --git a/_src/_posts/2012-04-07-opera.md b/_src/_posts/2012-04-07-opera.md deleted file mode 100644 index 0ccc1cb2..00000000 --- a/_src/_posts/2012-04-07-opera.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -layout: photo - -title: Opera -image: 5df6e0a280c911e1a87612313804ec91_7.jpg -author: Matthias Kretschmann - -date: 2012-04-07 15:50:15+00:00 -wordpress_id: 1737 -categories: -- photos -post_format: -- Image -tags: -- instagram ---- - - diff --git a/_src/_posts/2012-04-08-common-kitchen-decoration.md b/_src/_posts/2012-04-08-common-kitchen-decoration.md deleted file mode 100644 index 7b87df64..00000000 --- a/_src/_posts/2012-04-08-common-kitchen-decoration.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -layout: photo - -title: Common kitchen decoration -image: 2ba6eeba81b111e1989612313815112c_7.jpg -author: Matthias Kretschmann - -date: 2012-04-08 19:29:33+00:00 -wordpress_id: 1741 -categories: -- photos -post_format: -- Image -tags: -- instagram ---- - - diff --git a/_src/_posts/2012-06-27-typography-window.md b/_src/_posts/2012-06-27-typography-window.md deleted file mode 100644 index b7109b69..00000000 --- a/_src/_posts/2012-06-27-typography-window.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -layout: photo - -title: Typography window -image: 80a136dabff711e188131231381b5c25_7.jpg -author: Matthias Kretschmann - -date: 2012-06-27 01:29:13+00:00 -wordpress_id: 2215 -categories: -- photos -post_format: -- Image ---- - -from Instagram - diff --git a/_src/_posts/2012-07-20-mmmmh-coffee.md b/_src/_posts/2012-07-20-mmmmh-coffee.md deleted file mode 100644 index f88626e9..00000000 --- a/_src/_posts/2012-07-20-mmmmh-coffee.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -layout: photo - -title: Mmmmh, Coffee -image: 66a6e0c0d25a11e1a94522000a1e8aaf_7.jpg -author: Matthias Kretschmann - -date: 2012-07-20 11:02:30+00:00 -wordpress_id: 2345 -categories: -- photos -post_format: -- Image ---- - -from Instagram - diff --git a/_src/_posts/2012-08-08-amazingly-early.md b/_src/_posts/2012-08-08-amazingly-early.md deleted file mode 100644 index d277d5b6..00000000 --- a/_src/_posts/2012-08-08-amazingly-early.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -layout: photo - -title: Amazingly early -image: 2ca7a094e10f11e1868c12313817a130_7.jpg -author: Matthias Kretschmann - -date: 2012-08-08 04:11:48+00:00 -wordpress_id: 2384 -categories: -- photos -post_format: -- Image ---- - -from Instagram - diff --git a/_src/_posts/2012-08-25-so-much-room.md b/_src/_posts/2012-08-25-so-much-room.md deleted file mode 100644 index 7fd7331c..00000000 --- a/_src/_posts/2012-08-25-so-much-room.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -layout: photo - -title: So much room -image: c0c45b6eeea211e1ad8e22000a1cdbb8_7.jpg -author: Matthias Kretschmann - -date: 2012-08-25 10:50:58+00:00 -wordpress_id: 2409 -categories: -- photos -post_format: -- Image ---- - -from Instagram - diff --git a/_src/_posts/2012-09-07-huge-station-is-huge.md b/_src/_posts/2012-09-07-huge-station-is-huge.md deleted file mode 100644 index 42416ed2..00000000 --- a/_src/_posts/2012-09-07-huge-station-is-huge.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -layout: photo - -title: Huge station is huge -image: 619b3900f92911e1a31922000a1cddf1_7.jpg -author: Matthias Kretschmann - -date: 2012-09-07 20:19:52+00:00 -wordpress_id: 2412 -categories: -- photos -post_format: -- Image ---- - -from Instagram - diff --git a/_src/_posts/2012-09-10-subway-firefox.md b/_src/_posts/2012-09-10-subway-firefox.md deleted file mode 100644 index 84227f25..00000000 --- a/_src/_posts/2012-09-10-subway-firefox.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -layout: photo - -title: Subway Firefox -image: 84f9d2c4fb7411e19ca422000a1d0119_7.jpg -author: Matthias Kretschmann - -date: 2012-09-10 18:22:46+00:00 -wordpress_id: 2415 -categories: -- photos -post_format: -- Image ---- - -from Instagram - diff --git a/_src/_posts/2012-09-12-sweet-typography.md b/_src/_posts/2012-09-12-sweet-typography.md deleted file mode 100644 index b542055f..00000000 --- a/_src/_posts/2012-09-12-sweet-typography.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -layout: photo - -title: Sweet typography -image: 01f8b0b8fcc611e19b5b123138140bce_7.jpg -author: Matthias Kretschmann - -date: 2012-09-12 10:38:36+00:00 -wordpress_id: 2418 -categories: -- photos -post_format: -- Image ---- - -from Instagram - diff --git a/_src/_posts/2012-09-14-bvg-dos.md b/_src/_posts/2012-09-14-bvg-dos.md deleted file mode 100644 index c85e0e34..00000000 --- a/_src/_posts/2012-09-14-bvg-dos.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -layout: photo - -title: BVG DOS -image: 6c4003f2fe9911e1ae9122000a1e9e21_7.jpg -author: Matthias Kretschmann - -date: 2012-09-14 18:24:29+00:00 -wordpress_id: 2421 -categories: -- photos -post_format: -- Image ---- - -from Instagram - diff --git a/_src/api/posts.json b/_src/api/posts.json deleted file mode 100644 index c5ee380b..00000000 --- a/_src/api/posts.json +++ /dev/null @@ -1,23 +0,0 @@ ---- -layout: null ---- -[ - {% for post in site.posts %} - { - "title" : {{ post.title | titlecase | jsonify }}, - "excerpt" : {{ post.excerpt | jsonify }}, - "category" : "{{ post.categories | join: ', ' }}", - "tag" : "{{ post.tags | join: ', ' }}", - "url" : "{{ site.url }}{{ post.url }}", - "date" : "{{ post.date }}", - "content" : {{ post.content | jsonify }}, - "image" : "{{ post.image }}", - "author" : "{{ post.author }}", - "layout" : "{{ post.layout }}", - "id" : "{{ post.id }}", - "path" : "{{ post.path }}", - "download" : "{{ post.download }}", - "linkurl" : "{{ post.linkurl }}" - } {% unless forloop.last %},{% endunless %} - {% endfor %} -] diff --git a/_src/api/search.json b/_src/api/search.json deleted file mode 100644 index a15c7e9a..00000000 --- a/_src/api/search.json +++ /dev/null @@ -1,18 +0,0 @@ ---- -layout: null ---- -[ - {% for post in site.posts %} - { - "title" : "{{ post.title | strip_html | strip_newlines | titlecase }}", - "excerpt" : "{{ post.excerpt | strip_html | strip_newlines }}", - "category" : "{{ post.categories | join: ', ' }}", - "tag" : "{{ post.tags | join: ', ' }}", - "url" : "{{ site.url }}{{ post.url }}", - "date" : "{{ post.date }}", - "image" : "{{ post.image }}", - "content" : "{{ post.content | strip_html | strip_newlines | xml_escape }}", - "linkurl" : "{{ post.linkurl }}" - } {% unless forloop.last %},{% endunless %} - {% endfor %} -] diff --git a/_src/api/site.json b/_src/api/site.json deleted file mode 100644 index b9015cfb..00000000 --- a/_src/api/site.json +++ /dev/null @@ -1,13 +0,0 @@ ---- ---- -[ - { - "name" : "{{ site.name }}", - "description" : "{{ site.description | xml_escape }}", - "url" : "{{ site.url }}", - "author" : { - {% for item in site.author %}"{{ item[0] }}": "{{ item[1] }}"{% unless forloop.last %},{% endunless %} - {% endfor %} - } - } -] diff --git a/_src/feed.json b/_src/feed.json deleted file mode 100644 index 885bc0b8..00000000 --- a/_src/feed.json +++ /dev/null @@ -1,34 +0,0 @@ ---- -layout: null ---- -{ - "version": "https://jsonfeed.org/version/1", - "title": {{ site.name | smartify | jsonify }}, - {% if site.description %}"description": {{ site.description | smartify | jsonify }},{% endif %} - "home_page_url": "{{ site.url }}", - "feed_url": "{{ site.url }}/feed.json", - "icon": "{{ site.url }}/assets/img/touch-icon-192x192.png", - "favicon": "{{ site.url }}/assets/img/favicon-32x32.png", - "expired": false, - "author": { - "name": {{ site.author.name | smartify | jsonify }}, - "url": "{{ site.author.uri }}", - "avatar": "https://kremalicious.com/assets/img/avatar.jpeg" - }, - "items": [ - {% for post in site.posts %} - { - "title": {{ post.title | smartify | jsonify }}, - "date_published": "{{ post.date }}", - {% if post.updated %}"date_modified": "{{ post.updated }}",{% endif %} - "id": "{{ post.id }}", - "url": "{{ site.url }}{{ post.url }}", - {% if post.linkurl %}"external_url": "{{ post.linkurl }}",{% endif %} - "author": "{{ site.author.name }}", - "summary": {{ post.excerpt | smartify | jsonify }}, - {% if post.image %}"image": "{{ site.media_url }}/w_940/media/{{ post.image }}",{% endif %} - "content_html": {{ post.content | jsonify }} - }{% unless forloop.last == true %},{% endunless %} - {% endfor %} - ] -} diff --git a/_src/feed.xml b/_src/feed.xml deleted file mode 100644 index fee4147e..00000000 --- a/_src/feed.xml +++ /dev/null @@ -1,102 +0,0 @@ ---- -redirect_from: - - /home/feed/ - - /feed/atom/ - - /comments/feed/ ---- - - - Jekyll - - - - {{ site.time | date_to_xmlschema }} - {{ site.url }}/ - - {% if site.name %} - {{ site.name | xml_escape }} - {% endif %} - - {% if site.description %} - {{ site.description | xml_escape }} - {% endif %} - - {% if site.author %} - - {% if site.author.name %} - {{ site.author.name | xml_escape }} - {% else %} - {{ site.author | xml_escape }} - {% endif %} - {% if site.author.email %} - {{ site.author.email | xml_escape }} - {% endif %} - {% if site.author.uri %} - {{ site.author.uri | xml_escape }} - {% endif %} - - {% endif %} - - {% for post in site.posts limit:100 %} - - {% if post.layout == "link" %} - {{ post.title | markdownify | strip_html | strip_newlines | xml_escape | titlecase }} → - - {% else %} - {{ post.title | markdownify | strip_html | strip_newlines | xml_escape | titlecase }} - - {% endif %} - - {{ post.date | date_to_xmlschema }} - - {% if post.updated %} - {{ post.updated | date_to_xmlschema }} - {% else %} - {{ post.date | date_to_xmlschema }} - {% endif %} - - {{ post.id | prepend: site.url | xml_escape }} - - {% if post.image %} - <img src="{{ site.media_url }}/w_940/media/{{ post.image }}" /> - {% endif %} - - {{ post.content | markdownify | xml_escape }} - - {% if post.layout == "link" %} - <a href="{{ post.linkurl | xml_escape }}">Go to source &#187;</a> <br /> - <a href="{{ site.url }}{{ post.url | xml_escape }}" title="Permalink for this post">&#8734;</a> - {% endif %} - - - {% if post.author %} - - {% if post.author.name %} - {{ post.author.name | xml_escape }} - {% else %} - {{ post.author | xml_escape }} - {% endif %} - {% if post.author.email %} - {{ post.author.email | xml_escape }} - {% endif %} - {% if post.author.url %} - {{ post.author.url | xml_escape }} - {% endif %} - - {% endif %} - - {% if post.category %} - - {% endif %} - - {% for tag in post.tags %} - - {% endfor %} - - {% if post.excerpt %} - {{ post.excerpt | markdownify | strip_html | strip_newlines | xml_escape }} - {% endif %} - - - {% endfor %} - diff --git a/_src/index.html b/_src/index.html deleted file mode 100644 index c6041345..00000000 --- a/_src/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -layout: base -front_page: true -redirect_from: - - /blog/ - - /topics/howto-and-tutorial/ - - /howto-and-tutorial/ - - /most-popular-stuff-on-kremaliciouscom-in-2008/ - - /canon-eos-50d-officially-announced-and-new-lens/ ---- - -{% if paginator.next_page == 2 %} - {% include featured.html %} -{% endif %} - -
- - {% if paginator.previous_page %} -

Page {{ paginator.page }}

- {% endif %} - - {% for post in paginator.posts %} - - {% include articles.html %} - - {% endfor %} - -
- -{% include paginator.html %} diff --git a/_src/tag.html b/_src/tag.html deleted file mode 100644 index cd9d65bf..00000000 --- a/_src/tag.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -layout: base - -title: tags ---- - -
- - - -
diff --git a/_src/_media/01f8b0b8fcc611e19b5b123138140bce_7.jpg b/content/media/01f8b0b8fcc611e19b5b123138140bce_7.jpg similarity index 100% rename from _src/_media/01f8b0b8fcc611e19b5b123138140bce_7.jpg rename to content/media/01f8b0b8fcc611e19b5b123138140bce_7.jpg diff --git a/_src/_media/2015-03-29-anton-henning-heimat-schaffen-simpsons.jpg b/content/media/2015-03-29-anton-henning-heimat-schaffen-simpsons.jpg similarity index 100% rename from _src/_media/2015-03-29-anton-henning-heimat-schaffen-simpsons.jpg rename to content/media/2015-03-29-anton-henning-heimat-schaffen-simpsons.jpg diff --git a/_src/_media/2015-03-29-thanks-for-the-tip-little-orange-blob.jpg b/content/media/2015-03-29-thanks-for-the-tip-little-orange-blob.jpg similarity index 100% rename from _src/_media/2015-03-29-thanks-for-the-tip-little-orange-blob.jpg rename to content/media/2015-03-29-thanks-for-the-tip-little-orange-blob.jpg diff --git a/_src/_media/2015-04-17-suddenly-a-new-hindu-temple-appears-around-the-corner.jpg b/content/media/2015-04-17-suddenly-a-new-hindu-temple-appears-around-the-corner.jpg similarity index 100% rename from _src/_media/2015-04-17-suddenly-a-new-hindu-temple-appears-around-the-corner.jpg rename to content/media/2015-04-17-suddenly-a-new-hindu-temple-appears-around-the-corner.jpg diff --git a/_src/_media/2017-02-19-rotterdam-coats.jpg b/content/media/2017-02-19-rotterdam-coats.jpg similarity index 100% rename from _src/_media/2017-02-19-rotterdam-coats.jpg rename to content/media/2017-02-19-rotterdam-coats.jpg diff --git a/_src/_media/2017-02-21-david-chipperfield-staircase.jpg b/content/media/2017-02-21-david-chipperfield-staircase.jpg similarity index 100% rename from _src/_media/2017-02-21-david-chipperfield-staircase.jpg rename to content/media/2017-02-21-david-chipperfield-staircase.jpg diff --git a/_src/_media/2017-02-26-eu-gotham-city.jpg b/content/media/2017-02-26-eu-gotham-city.jpg similarity index 100% rename from _src/_media/2017-02-26-eu-gotham-city.jpg rename to content/media/2017-02-26-eu-gotham-city.jpg diff --git a/_src/_media/2017-02-27-amsterdam-cliche.jpg b/content/media/2017-02-27-amsterdam-cliche.jpg similarity index 100% rename from _src/_media/2017-02-27-amsterdam-cliche.jpg rename to content/media/2017-02-27-amsterdam-cliche.jpg diff --git a/_src/_media/2017-02-27-its-dark-and-i-dont-exist.jpg b/content/media/2017-02-27-its-dark-and-i-dont-exist.jpg similarity index 100% rename from _src/_media/2017-02-27-its-dark-and-i-dont-exist.jpg rename to content/media/2017-02-27-its-dark-and-i-dont-exist.jpg diff --git a/_src/_media/2017-02-28-stedelijk-museum.jpg b/content/media/2017-02-28-stedelijk-museum.jpg similarity index 100% rename from _src/_media/2017-02-28-stedelijk-museum.jpg rename to content/media/2017-02-28-stedelijk-museum.jpg diff --git a/_src/_media/2017-02-28-temple-guardian-rijksmuseum.jpg b/content/media/2017-02-28-temple-guardian-rijksmuseum.jpg similarity index 100% rename from _src/_media/2017-02-28-temple-guardian-rijksmuseum.jpg rename to content/media/2017-02-28-temple-guardian-rijksmuseum.jpg diff --git a/_src/_media/2017-02-28-watching-the-night-watch.jpg b/content/media/2017-02-28-watching-the-night-watch.jpg similarity index 100% rename from _src/_media/2017-02-28-watching-the-night-watch.jpg rename to content/media/2017-02-28-watching-the-night-watch.jpg diff --git a/_src/_media/2017-04-16-hamburgs-elbphilharmonie.jpg b/content/media/2017-04-16-hamburgs-elbphilharmonie.jpg similarity index 100% rename from _src/_media/2017-04-16-hamburgs-elbphilharmonie.jpg rename to content/media/2017-04-16-hamburgs-elbphilharmonie.jpg diff --git a/_src/_media/2017-07-05-kapaleeshwarar-temple-chennai.jpg b/content/media/2017-07-05-kapaleeshwarar-temple-chennai.jpg similarity index 100% rename from _src/_media/2017-07-05-kapaleeshwarar-temple-chennai.jpg rename to content/media/2017-07-05-kapaleeshwarar-temple-chennai.jpg diff --git a/_src/_media/2017-07-08-kochis-streetart-game-is-strong.jpg b/content/media/2017-07-08-kochis-streetart-game-is-strong.jpg similarity index 100% rename from _src/_media/2017-07-08-kochis-streetart-game-is-strong.jpg rename to content/media/2017-07-08-kochis-streetart-game-is-strong.jpg diff --git a/_src/_media/2017-07-09-orphaned-elephant-with-friend.jpg b/content/media/2017-07-09-orphaned-elephant-with-friend.jpg similarity index 100% rename from _src/_media/2017-07-09-orphaned-elephant-with-friend.jpg rename to content/media/2017-07-09-orphaned-elephant-with-friend.jpg diff --git a/_src/_media/2017-07-10-kochis-dhobhi-ghat.jpg b/content/media/2017-07-10-kochis-dhobhi-ghat.jpg similarity index 100% rename from _src/_media/2017-07-10-kochis-dhobhi-ghat.jpg rename to content/media/2017-07-10-kochis-dhobhi-ghat.jpg diff --git a/_src/_media/2017-07-13-mumbai-hand-painted-typography.jpg b/content/media/2017-07-13-mumbai-hand-painted-typography.jpg similarity index 100% rename from _src/_media/2017-07-13-mumbai-hand-painted-typography.jpg rename to content/media/2017-07-13-mumbai-hand-painted-typography.jpg diff --git a/_src/_media/2017-07-13-obligatory-gate-of-india-photo.jpg b/content/media/2017-07-13-obligatory-gate-of-india-photo.jpg similarity index 100% rename from _src/_media/2017-07-13-obligatory-gate-of-india-photo.jpg rename to content/media/2017-07-13-obligatory-gate-of-india-photo.jpg diff --git a/_src/_media/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.jpg b/content/media/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.jpg similarity index 100% rename from _src/_media/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.jpg rename to content/media/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.jpg diff --git a/_src/_media/2017-11-10-acropolis-the-erechtheum.jpg b/content/media/2017-11-10-acropolis-the-erechtheum.jpg similarity index 100% rename from _src/_media/2017-11-10-acropolis-the-erechtheum.jpg rename to content/media/2017-11-10-acropolis-the-erechtheum.jpg diff --git a/_src/_media/2017-11-10-acropolis-the-parthenon.jpg b/content/media/2017-11-10-acropolis-the-parthenon.jpg similarity index 100% rename from _src/_media/2017-11-10-acropolis-the-parthenon.jpg rename to content/media/2017-11-10-acropolis-the-parthenon.jpg diff --git a/_src/_media/2017-11-10-acropolis-the-propylaea.jpg b/content/media/2017-11-10-acropolis-the-propylaea.jpg similarity index 100% rename from _src/_media/2017-11-10-acropolis-the-propylaea.jpg rename to content/media/2017-11-10-acropolis-the-propylaea.jpg diff --git a/_src/_media/2017-12-16-sagrada-familia.jpg b/content/media/2017-12-16-sagrada-familia.jpg similarity index 100% rename from _src/_media/2017-12-16-sagrada-familia.jpg rename to content/media/2017-12-16-sagrada-familia.jpg diff --git a/_src/_media/2017-12-27-sao-paulo-traffic.jpg b/content/media/2017-12-27-sao-paulo-traffic.jpg similarity index 100% rename from _src/_media/2017-12-27-sao-paulo-traffic.jpg rename to content/media/2017-12-27-sao-paulo-traffic.jpg diff --git a/_src/_media/2018-01-04-passagem-literaria-da-consolacao.jpg b/content/media/2018-01-04-passagem-literaria-da-consolacao.jpg similarity index 100% rename from _src/_media/2018-01-04-passagem-literaria-da-consolacao.jpg rename to content/media/2018-01-04-passagem-literaria-da-consolacao.jpg diff --git a/_src/_media/2018-01-05-samba-school.jpg b/content/media/2018-01-05-samba-school.jpg similarity index 100% rename from _src/_media/2018-01-05-samba-school.jpg rename to content/media/2018-01-05-samba-school.jpg diff --git a/_src/_media/2ba6eeba81b111e1989612313815112c_7.jpg b/content/media/2ba6eeba81b111e1989612313815112c_7.jpg similarity index 100% rename from _src/_media/2ba6eeba81b111e1989612313815112c_7.jpg rename to content/media/2ba6eeba81b111e1989612313815112c_7.jpg diff --git a/_src/_media/2ca7a094e10f11e1868c12313817a130_7.jpg b/content/media/2ca7a094e10f11e1868c12313817a130_7.jpg similarity index 100% rename from _src/_media/2ca7a094e10f11e1868c12313817a130_7.jpg rename to content/media/2ca7a094e10f11e1868c12313817a130_7.jpg diff --git a/_src/_media/41b5a454a43811e1989612313815112c_7.jpeg b/content/media/41b5a454a43811e1989612313815112c_7.jpeg similarity index 100% rename from _src/_media/41b5a454a43811e1989612313815112c_7.jpeg rename to content/media/41b5a454a43811e1989612313815112c_7.jpeg diff --git a/_src/_media/44af28f2805b11e18cf91231380fd29b_7.jpg b/content/media/44af28f2805b11e18cf91231380fd29b_7.jpg similarity index 100% rename from _src/_media/44af28f2805b11e18cf91231380fd29b_7.jpg rename to content/media/44af28f2805b11e18cf91231380fd29b_7.jpg diff --git a/_src/_media/5df6e0a280c911e1a87612313804ec91_7.jpg b/content/media/5df6e0a280c911e1a87612313804ec91_7.jpg similarity index 100% rename from _src/_media/5df6e0a280c911e1a87612313804ec91_7.jpg rename to content/media/5df6e0a280c911e1a87612313804ec91_7.jpg diff --git a/_src/_media/5fc688aa953811e180c9123138016265_7.jpg b/content/media/5fc688aa953811e180c9123138016265_7.jpg similarity index 100% rename from _src/_media/5fc688aa953811e180c9123138016265_7.jpg rename to content/media/5fc688aa953811e180c9123138016265_7.jpg diff --git a/_src/_media/619b3900f92911e1a31922000a1cddf1_7.jpg b/content/media/619b3900f92911e1a31922000a1cddf1_7.jpg similarity index 100% rename from _src/_media/619b3900f92911e1a31922000a1cddf1_7.jpg rename to content/media/619b3900f92911e1a31922000a1cddf1_7.jpg diff --git a/_src/_media/6313cc1e7db611e180c9123138016265_7.jpg b/content/media/6313cc1e7db611e180c9123138016265_7.jpg similarity index 100% rename from _src/_media/6313cc1e7db611e180c9123138016265_7.jpg rename to content/media/6313cc1e7db611e180c9123138016265_7.jpg diff --git a/_src/_media/66a6e0c0d25a11e1a94522000a1e8aaf_7.jpg b/content/media/66a6e0c0d25a11e1a94522000a1e8aaf_7.jpg similarity index 100% rename from _src/_media/66a6e0c0d25a11e1a94522000a1e8aaf_7.jpg rename to content/media/66a6e0c0d25a11e1a94522000a1e8aaf_7.jpg diff --git a/_src/_media/690fe368a81911e1b2fe1231380205bf_7.jpg b/content/media/690fe368a81911e1b2fe1231380205bf_7.jpg similarity index 100% rename from _src/_media/690fe368a81911e1b2fe1231380205bf_7.jpg rename to content/media/690fe368a81911e1b2fe1231380205bf_7.jpg diff --git a/_src/_media/6c4003f2fe9911e1ae9122000a1e9e21_7.jpg b/content/media/6c4003f2fe9911e1ae9122000a1e9e21_7.jpg similarity index 100% rename from _src/_media/6c4003f2fe9911e1ae9122000a1e9e21_7.jpg rename to content/media/6c4003f2fe9911e1ae9122000a1e9e21_7.jpg diff --git a/_src/_media/7838011c80ce11e19e4a12313813ffc0_7.jpg b/content/media/7838011c80ce11e19e4a12313813ffc0_7.jpg similarity index 100% rename from _src/_media/7838011c80ce11e19e4a12313813ffc0_7.jpg rename to content/media/7838011c80ce11e19e4a12313813ffc0_7.jpg diff --git a/_src/_media/7e2b28f881b711e1af7612313813f8e8_7.jpg b/content/media/7e2b28f881b711e1af7612313813f8e8_7.jpg similarity index 100% rename from _src/_media/7e2b28f881b711e1af7612313813f8e8_7.jpg rename to content/media/7e2b28f881b711e1af7612313813f8e8_7.jpg diff --git a/_src/_media/7f9397a265d811e1b9f1123138140926_7.jpg b/content/media/7f9397a265d811e1b9f1123138140926_7.jpg similarity index 100% rename from _src/_media/7f9397a265d811e1b9f1123138140926_7.jpg rename to content/media/7f9397a265d811e1b9f1123138140926_7.jpg diff --git a/_src/_media/80a136dabff711e188131231381b5c25_7.jpg b/content/media/80a136dabff711e188131231381b5c25_7.jpg similarity index 100% rename from _src/_media/80a136dabff711e188131231381b5c25_7.jpg rename to content/media/80a136dabff711e188131231381b5c25_7.jpg diff --git a/_src/_media/8372983659_da0e88ca79_o.jpg b/content/media/8372983659_da0e88ca79_o.jpg similarity index 100% rename from _src/_media/8372983659_da0e88ca79_o.jpg rename to content/media/8372983659_da0e88ca79_o.jpg diff --git a/_src/_media/8450618380_83c64006c6_o.jpg b/content/media/8450618380_83c64006c6_o.jpg similarity index 100% rename from _src/_media/8450618380_83c64006c6_o.jpg rename to content/media/8450618380_83c64006c6_o.jpg diff --git a/_src/_media/8455835942_a9b9100373_o.jpg b/content/media/8455835942_a9b9100373_o.jpg similarity index 100% rename from _src/_media/8455835942_a9b9100373_o.jpg rename to content/media/8455835942_a9b9100373_o.jpg diff --git a/_src/_media/84f9d2c4fb7411e19ca422000a1d0119_7.jpg b/content/media/84f9d2c4fb7411e19ca422000a1d0119_7.jpg similarity index 100% rename from _src/_media/84f9d2c4fb7411e19ca422000a1d0119_7.jpg rename to content/media/84f9d2c4fb7411e19ca422000a1d0119_7.jpg diff --git a/_src/_media/8776417095_43553c88c2_o.jpg b/content/media/8776417095_43553c88c2_o.jpg similarity index 100% rename from _src/_media/8776417095_43553c88c2_o.jpg rename to content/media/8776417095_43553c88c2_o.jpg diff --git a/_src/_media/8782995066_e90ff6b3ae_o.jpg b/content/media/8782995066_e90ff6b3ae_o.jpg similarity index 100% rename from _src/_media/8782995066_e90ff6b3ae_o.jpg rename to content/media/8782995066_e90ff6b3ae_o.jpg diff --git a/_src/_media/97a44d6080b711e181bd12313817987b_7.jpg b/content/media/97a44d6080b711e181bd12313817987b_7.jpg similarity index 100% rename from _src/_media/97a44d6080b711e181bd12313817987b_7.jpg rename to content/media/97a44d6080b711e181bd12313817987b_7.jpg diff --git a/_src/_media/A-Long-Time-Ago.jpg b/content/media/A-Long-Time-Ago.jpg similarity index 100% rename from _src/_media/A-Long-Time-Ago.jpg rename to content/media/A-Long-Time-Ago.jpg diff --git a/_src/_media/Adiumeetie-Dock-Preview.png b/content/media/Adiumeetie-Dock-Preview.png similarity index 100% rename from _src/_media/Adiumeetie-Dock-Preview.png rename to content/media/Adiumeetie-Dock-Preview.png diff --git a/_src/_media/Adiumeetie-Teaser-AdiumIcon.png b/content/media/Adiumeetie-Teaser-AdiumIcon.png similarity index 100% rename from _src/_media/Adiumeetie-Teaser-AdiumIcon.png rename to content/media/Adiumeetie-Teaser-AdiumIcon.png diff --git a/_src/_media/Adiumeetie-Teaser.jpg b/content/media/Adiumeetie-Teaser.jpg similarity index 100% rename from _src/_media/Adiumeetie-Teaser.jpg rename to content/media/Adiumeetie-Teaser.jpg diff --git a/_src/_media/Badged-Teaser-kremalicious.png b/content/media/Badged-Teaser-kremalicious.png similarity index 100% rename from _src/_media/Badged-Teaser-kremalicious.png rename to content/media/Badged-Teaser-kremalicious.png diff --git a/_src/_media/Badged-Teaser-kremalicious@2x.png b/content/media/Badged-Teaser-kremalicious@2x.png similarity index 100% rename from _src/_media/Badged-Teaser-kremalicious@2x.png rename to content/media/Badged-Teaser-kremalicious@2x.png diff --git a/_src/_media/Basically-The-Monolith-Is-On-My-Desk.jpg b/content/media/Basically-The-Monolith-Is-On-My-Desk.jpg similarity index 100% rename from _src/_media/Basically-The-Monolith-Is-On-My-Desk.jpg rename to content/media/Basically-The-Monolith-Is-On-My-Desk.jpg diff --git a/_src/_media/Blaue-Tuerme-1.jpg b/content/media/Blaue-Tuerme-1.jpg similarity index 100% rename from _src/_media/Blaue-Tuerme-1.jpg rename to content/media/Blaue-Tuerme-1.jpg diff --git a/_src/_media/Bonsai-5-Version-2.jpg b/content/media/Bonsai-5-Version-2.jpg similarity index 100% rename from _src/_media/Bonsai-5-Version-2.jpg rename to content/media/Bonsai-5-Version-2.jpg diff --git a/_src/_media/Broken-Nexus-S-Screen.jpg b/content/media/Broken-Nexus-S-Screen.jpg similarity index 100% rename from _src/_media/Broken-Nexus-S-Screen.jpg rename to content/media/Broken-Nexus-S-Screen.jpg diff --git a/_src/_media/Delibar-Icons-Teaser.jpg b/content/media/Delibar-Icons-Teaser.jpg similarity index 100% rename from _src/_media/Delibar-Icons-Teaser.jpg rename to content/media/Delibar-Icons-Teaser.jpg diff --git a/_src/_media/Delibar-Icons-Teaser2.png b/content/media/Delibar-Icons-Teaser2.png similarity index 100% rename from _src/_media/Delibar-Icons-Teaser2.png rename to content/media/Delibar-Icons-Teaser2.png diff --git a/_src/_media/Enjoying-Paper.jpg b/content/media/Enjoying-Paper.jpg similarity index 100% rename from _src/_media/Enjoying-Paper.jpg rename to content/media/Enjoying-Paper.jpg diff --git a/_src/_media/Free-Monkey-Breath-Not-Soylent-Green.jpg b/content/media/Free-Monkey-Breath-Not-Soylent-Green.jpg similarity index 100% rename from _src/_media/Free-Monkey-Breath-Not-Soylent-Green.jpg rename to content/media/Free-Monkey-Breath-Not-Soylent-Green.jpg diff --git a/_src/_media/GDR-Helvetica.jpg b/content/media/GDR-Helvetica.jpg similarity index 100% rename from _src/_media/GDR-Helvetica.jpg rename to content/media/GDR-Helvetica.jpg diff --git a/_src/_media/Glowing-Star-Inside.jpg b/content/media/Glowing-Star-Inside.jpg similarity index 100% rename from _src/_media/Glowing-Star-Inside.jpg rename to content/media/Glowing-Star-Inside.jpg diff --git a/_src/_media/Historic-Flood-Levels.jpg b/content/media/Historic-Flood-Levels.jpg similarity index 100% rename from _src/_media/Historic-Flood-Levels.jpg rename to content/media/Historic-Flood-Levels.jpg diff --git a/_src/_media/Instagram-Swipe.png b/content/media/Instagram-Swipe.png similarity index 100% rename from _src/_media/Instagram-Swipe.png rename to content/media/Instagram-Swipe.png diff --git a/_src/_media/MG_1735-Version-2.jpg b/content/media/MG_1735-Version-2.jpg similarity index 100% rename from _src/_media/MG_1735-Version-2.jpg rename to content/media/MG_1735-Version-2.jpg diff --git a/_src/_media/MG_1920.jpg b/content/media/MG_1920.jpg similarity index 100% rename from _src/_media/MG_1920.jpg rename to content/media/MG_1920.jpg diff --git a/_src/_media/MG_5885_2006-7-23.jpg b/content/media/MG_5885_2006-7-23.jpg similarity index 100% rename from _src/_media/MG_5885_2006-7-23.jpg rename to content/media/MG_5885_2006-7-23.jpg diff --git a/_src/_media/MG_9313_2007-02-10.jpg b/content/media/MG_9313_2007-02-10.jpg similarity index 100% rename from _src/_media/MG_9313_2007-02-10.jpg rename to content/media/MG_9313_2007-02-10.jpg diff --git a/_src/_media/MomCorp-Walls-Overview.png b/content/media/MomCorp-Walls-Overview.png similarity index 100% rename from _src/_media/MomCorp-Walls-Overview.png rename to content/media/MomCorp-Walls-Overview.png diff --git a/_src/_media/Monstrum_Gameboy_Catherine_Kaleel.jpg b/content/media/Monstrum_Gameboy_Catherine_Kaleel.jpg similarity index 100% rename from _src/_media/Monstrum_Gameboy_Catherine_Kaleel.jpg rename to content/media/Monstrum_Gameboy_Catherine_Kaleel.jpg diff --git a/_src/_media/Office-Desk.jpg b/content/media/Office-Desk.jpg similarity index 100% rename from _src/_media/Office-Desk.jpg rename to content/media/Office-Desk.jpg diff --git a/_src/_media/PS_CR2FileIcon.png b/content/media/PS_CR2FileIcon.png similarity index 100% rename from _src/_media/PS_CR2FileIcon.png rename to content/media/PS_CR2FileIcon.png diff --git a/_src/_media/Project-Purple-Dribbble.png b/content/media/Project-Purple-Dribbble.png similarity index 100% rename from _src/_media/Project-Purple-Dribbble.png rename to content/media/Project-Purple-Dribbble.png diff --git a/_src/_media/Teaser-Adiumeetie.jpg b/content/media/Teaser-Adiumeetie.jpg similarity index 100% rename from _src/_media/Teaser-Adiumeetie.jpg rename to content/media/Teaser-Adiumeetie.jpg diff --git a/_src/_media/Teaser-Aperture-File-Types.jpg b/content/media/Teaser-Aperture-File-Types.jpg similarity index 100% rename from _src/_media/Teaser-Aperture-File-Types.jpg rename to content/media/Teaser-Aperture-File-Types.jpg diff --git a/_src/_media/Teaser-Camera-Obscura-Icons.jpg b/content/media/Teaser-Camera-Obscura-Icons.jpg similarity index 100% rename from _src/_media/Teaser-Camera-Obscura-Icons.jpg rename to content/media/Teaser-Camera-Obscura-Icons.jpg diff --git a/_src/_media/Teaser-Camera-Obscura-Walls.jpg b/content/media/Teaser-Camera-Obscura-Walls.jpg similarity index 100% rename from _src/_media/Teaser-Camera-Obscura-Walls.jpg rename to content/media/Teaser-Camera-Obscura-Walls.jpg diff --git a/_src/_media/Teaser-Chives.jpg b/content/media/Teaser-Chives.jpg similarity index 100% rename from _src/_media/Teaser-Chives.jpg rename to content/media/Teaser-Chives.jpg diff --git a/_src/_media/Teaser-Coffee-Cup-Icon.jpg b/content/media/Teaser-Coffee-Cup-Icon.jpg similarity index 100% rename from _src/_media/Teaser-Coffee-Cup-Icon.jpg rename to content/media/Teaser-Coffee-Cup-Icon.jpg diff --git a/_src/_media/Teaser-Delibar-Icons.jpg b/content/media/Teaser-Delibar-Icons.jpg similarity index 100% rename from _src/_media/Teaser-Delibar-Icons.jpg rename to content/media/Teaser-Delibar-Icons.jpg diff --git a/_src/_media/Teaser-Icy-Box.jpg b/content/media/Teaser-Icy-Box.jpg similarity index 100% rename from _src/_media/Teaser-Icy-Box.jpg rename to content/media/Teaser-Icy-Box.jpg diff --git a/_src/_media/Teaser-Mars-U.jpg b/content/media/Teaser-Mars-U.jpg similarity index 100% rename from _src/_media/Teaser-Mars-U.jpg rename to content/media/Teaser-Mars-U.jpg diff --git a/_src/_media/Teaser-MomCorp-Wall.png b/content/media/Teaser-MomCorp-Wall.png similarity index 100% rename from _src/_media/Teaser-MomCorp-Wall.png rename to content/media/Teaser-MomCorp-Wall.png diff --git a/_src/_media/Teaser-Out-Of-Whale-Oil.jpg b/content/media/Teaser-Out-Of-Whale-Oil.jpg similarity index 100% rename from _src/_media/Teaser-Out-Of-Whale-Oil.jpg rename to content/media/Teaser-Out-Of-Whale-Oil.jpg diff --git a/_src/_media/Teaser-Project-Purple.png b/content/media/Teaser-Project-Purple.png similarity index 100% rename from _src/_media/Teaser-Project-Purple.png rename to content/media/Teaser-Project-Purple.png diff --git a/_src/_media/Teaser-Twitter-Crisp.jpg b/content/media/Teaser-Twitter-Crisp.jpg similarity index 100% rename from _src/_media/Teaser-Twitter-Crisp.jpg rename to content/media/Teaser-Twitter-Crisp.jpg diff --git a/_src/_media/Teaser-iPixelPad.png b/content/media/Teaser-iPixelPad.png similarity index 100% rename from _src/_media/Teaser-iPixelPad.png rename to content/media/Teaser-iPixelPad.png diff --git a/_src/_media/Twitter-Crisp-16.png b/content/media/Twitter-Crisp-16.png similarity index 100% rename from _src/_media/Twitter-Crisp-16.png rename to content/media/Twitter-Crisp-16.png diff --git a/_src/_media/Typeface-condoms.jpg b/content/media/Typeface-condoms.jpg similarity index 100% rename from _src/_media/Typeface-condoms.jpg rename to content/media/Typeface-condoms.jpg diff --git a/_src/_media/View-from-the-Window-at-Le-Gras.png b/content/media/View-from-the-Window-at-Le-Gras.png similarity index 100% rename from _src/_media/View-from-the-Window-at-Le-Gras.png rename to content/media/View-from-the-Window-at-Le-Gras.png diff --git a/_src/_media/Windows-8-Metro-tile-kremalicious-all-apps.png b/content/media/Windows-8-Metro-tile-kremalicious-all-apps.png similarity index 100% rename from _src/_media/Windows-8-Metro-tile-kremalicious-all-apps.png rename to content/media/Windows-8-Metro-tile-kremalicious-all-apps.png diff --git a/_src/_media/Windows-8-Metro-tile-kremalicious-in-action.png b/content/media/Windows-8-Metro-tile-kremalicious-in-action.png similarity index 100% rename from _src/_media/Windows-8-Metro-tile-kremalicious-in-action.png rename to content/media/Windows-8-Metro-tile-kremalicious-in-action.png diff --git a/_src/_media/Windows-8-Metro-tile-kremalicious.png b/content/media/Windows-8-Metro-tile-kremalicious.png similarity index 100% rename from _src/_media/Windows-8-Metro-tile-kremalicious.png rename to content/media/Windows-8-Metro-tile-kremalicious.png diff --git a/_src/_media/WordPress-Admin-Icons-Template-Filled.png b/content/media/WordPress-Admin-Icons-Template-Filled.png similarity index 100% rename from _src/_media/WordPress-Admin-Icons-Template-Filled.png rename to content/media/WordPress-Admin-Icons-Template-Filled.png diff --git a/_src/_media/a-storm-is-coming.jpg b/content/media/a-storm-is-coming.jpg similarity index 100% rename from _src/_media/a-storm-is-coming.jpg rename to content/media/a-storm-is-coming.jpg diff --git a/_src/_media/adiumeetie-by-kremalicious.zip b/content/media/adiumeetie-by-kremalicious.zip similarity index 100% rename from _src/_media/adiumeetie-by-kremalicious.zip rename to content/media/adiumeetie-by-kremalicious.zip diff --git a/_src/_media/adiumeetie-goodies-teaser.png b/content/media/adiumeetie-goodies-teaser.png similarity index 100% rename from _src/_media/adiumeetie-goodies-teaser.png rename to content/media/adiumeetie-goodies-teaser.png diff --git a/_src/_media/aff38e2c7f5311e1b10e123138105d6b_7.jpg b/content/media/aff38e2c7f5311e1b10e123138105d6b_7.jpg similarity index 100% rename from _src/_media/aff38e2c7f5311e1b10e123138105d6b_7.jpg rename to content/media/aff38e2c7f5311e1b10e123138105d6b_7.jpg diff --git a/_src/_media/ai-wei-wei-stools.jpg b/content/media/ai-wei-wei-stools.jpg similarity index 100% rename from _src/_media/ai-wei-wei-stools.jpg rename to content/media/ai-wei-wei-stools.jpg diff --git a/_src/_media/airfield-reference-point.jpg b/content/media/airfield-reference-point.jpg similarity index 100% rename from _src/_media/airfield-reference-point.jpg rename to content/media/airfield-reference-point.jpg diff --git a/_src/_media/android-galaxy-note.png b/content/media/android-galaxy-note.png similarity index 100% rename from _src/_media/android-galaxy-note.png rename to content/media/android-galaxy-note.png diff --git a/_src/_media/android-navigation-buttons.png b/content/media/android-navigation-buttons.png similarity index 100% rename from _src/_media/android-navigation-buttons.png rename to content/media/android-navigation-buttons.png diff --git a/_src/_media/apassis.png b/content/media/apassis.png similarity index 100% rename from _src/_media/apassis.png rename to content/media/apassis.png diff --git a/_src/_media/aperture-impression.png b/content/media/aperture-impression.png similarity index 100% rename from _src/_media/aperture-impression.png rename to content/media/aperture-impression.png diff --git a/_src/_media/aperture-plugin128.png b/content/media/aperture-plugin128.png similarity index 100% rename from _src/_media/aperture-plugin128.png rename to content/media/aperture-plugin128.png diff --git a/_src/_media/aperture128.png b/content/media/aperture128.png similarity index 100% rename from _src/_media/aperture128.png rename to content/media/aperture128.png diff --git a/_src/_media/aperture15_1.png b/content/media/aperture15_1.png similarity index 100% rename from _src/_media/aperture15_1.png rename to content/media/aperture15_1.png diff --git a/_src/_media/aperture15_10.png b/content/media/aperture15_10.png similarity index 100% rename from _src/_media/aperture15_10.png rename to content/media/aperture15_10.png diff --git a/_src/_media/aperture15_11.png b/content/media/aperture15_11.png similarity index 100% rename from _src/_media/aperture15_11.png rename to content/media/aperture15_11.png diff --git a/_src/_media/aperture15_12.png b/content/media/aperture15_12.png similarity index 100% rename from _src/_media/aperture15_12.png rename to content/media/aperture15_12.png diff --git a/_src/_media/aperture15_13.png b/content/media/aperture15_13.png similarity index 100% rename from _src/_media/aperture15_13.png rename to content/media/aperture15_13.png diff --git a/_src/_media/aperture15_14.jpg b/content/media/aperture15_14.jpg similarity index 100% rename from _src/_media/aperture15_14.jpg rename to content/media/aperture15_14.jpg diff --git a/_src/_media/aperture15_15.png b/content/media/aperture15_15.png similarity index 100% rename from _src/_media/aperture15_15.png rename to content/media/aperture15_15.png diff --git a/_src/_media/aperture15_2.png b/content/media/aperture15_2.png similarity index 100% rename from _src/_media/aperture15_2.png rename to content/media/aperture15_2.png diff --git a/_src/_media/aperture15_3.png b/content/media/aperture15_3.png similarity index 100% rename from _src/_media/aperture15_3.png rename to content/media/aperture15_3.png diff --git a/_src/_media/aperture15_4.png b/content/media/aperture15_4.png similarity index 100% rename from _src/_media/aperture15_4.png rename to content/media/aperture15_4.png diff --git a/_src/_media/aperture15_5.png b/content/media/aperture15_5.png similarity index 100% rename from _src/_media/aperture15_5.png rename to content/media/aperture15_5.png diff --git a/_src/_media/aperture15_6.png b/content/media/aperture15_6.png similarity index 100% rename from _src/_media/aperture15_6.png rename to content/media/aperture15_6.png diff --git a/_src/_media/aperture15_7.png b/content/media/aperture15_7.png similarity index 100% rename from _src/_media/aperture15_7.png rename to content/media/aperture15_7.png diff --git a/_src/_media/aperture15_8.jpg b/content/media/aperture15_8.jpg similarity index 100% rename from _src/_media/aperture15_8.jpg rename to content/media/aperture15_8.jpg diff --git a/_src/_media/aperture15_8.png b/content/media/aperture15_8.png similarity index 100% rename from _src/_media/aperture15_8.png rename to content/media/aperture15_8.png diff --git a/_src/_media/aperture72.png b/content/media/aperture72.png similarity index 100% rename from _src/_media/aperture72.png rename to content/media/aperture72.png diff --git a/_src/_media/aperture97.png b/content/media/aperture97.png similarity index 100% rename from _src/_media/aperture97.png rename to content/media/aperture97.png diff --git a/_src/_media/aperture_borderfx.png b/content/media/aperture_borderfx.png similarity index 100% rename from _src/_media/aperture_borderfx.png rename to content/media/aperture_borderfx.png diff --git a/_src/_media/aperture_bt.png b/content/media/aperture_bt.png similarity index 100% rename from _src/_media/aperture_bt.png rename to content/media/aperture_bt.png diff --git a/_src/_media/apertureedit_interface.jpg b/content/media/apertureedit_interface.jpg similarity index 100% rename from _src/_media/apertureedit_interface.jpg rename to content/media/apertureedit_interface.jpg diff --git a/_src/_media/apertureedit_logo.png b/content/media/apertureedit_logo.png similarity index 100% rename from _src/_media/apertureedit_logo.png rename to content/media/apertureedit_logo.png diff --git a/_src/_media/apertureedit_logo2.png b/content/media/apertureedit_logo2.png similarity index 100% rename from _src/_media/apertureedit_logo2.png rename to content/media/apertureedit_logo2.png diff --git a/_src/_media/aperturefiletypes.png b/content/media/aperturefiletypes.png similarity index 100% rename from _src/_media/aperturefiletypes.png rename to content/media/aperturefiletypes.png diff --git a/_src/_media/aperturefiletypes_by_kremalicious.zip b/content/media/aperturefiletypes_by_kremalicious.zip similarity index 100% rename from _src/_media/aperturefiletypes_by_kremalicious.zip rename to content/media/aperturefiletypes_by_kremalicious.zip diff --git a/_src/_media/apertureimport_automatic.png b/content/media/apertureimport_automatic.png similarity index 100% rename from _src/_media/apertureimport_automatic.png rename to content/media/apertureimport_automatic.png diff --git a/_src/_media/apertureimport_automator.png b/content/media/apertureimport_automator.png similarity index 100% rename from _src/_media/apertureimport_automator.png rename to content/media/apertureimport_automator.png diff --git a/_src/_media/apertureimportplugin.png b/content/media/apertureimportplugin.png similarity index 100% rename from _src/_media/apertureimportplugin.png rename to content/media/apertureimportplugin.png diff --git a/_src/_media/aperturescan.png b/content/media/aperturescan.png similarity index 100% rename from _src/_media/aperturescan.png rename to content/media/aperturescan.png diff --git a/_src/_media/architect-icon.jpg b/content/media/architect-icon.jpg similarity index 100% rename from _src/_media/architect-icon.jpg rename to content/media/architect-icon.jpg diff --git a/_src/_media/architect-ui.png b/content/media/architect-ui.png similarity index 100% rename from _src/_media/architect-ui.png rename to content/media/architect-ui.png diff --git a/_src/_media/automator.png b/content/media/automator.png similarity index 100% rename from _src/_media/automator.png rename to content/media/automator.png diff --git a/_src/_media/badged-settings.png b/content/media/badged-settings.png similarity index 100% rename from _src/_media/badged-settings.png rename to content/media/badged-settings.png diff --git a/_src/_media/behind-the-art.jpg b/content/media/behind-the-art.jpg similarity index 100% rename from _src/_media/behind-the-art.jpg rename to content/media/behind-the-art.jpg diff --git a/_src/_media/berliner_bruecke1-HDR-16bit.jpg b/content/media/berliner_bruecke1-HDR-16bit.jpg similarity index 100% rename from _src/_media/berliner_bruecke1-HDR-16bit.jpg rename to content/media/berliner_bruecke1-HDR-16bit.jpg diff --git a/_src/_media/bonjour97.png b/content/media/bonjour97.png similarity index 100% rename from _src/_media/bonjour97.png rename to content/media/bonjour97.png diff --git a/_src/_media/box_download.png b/content/media/box_download.png similarity index 100% rename from _src/_media/box_download.png rename to content/media/box_download.png diff --git a/_src/_media/buddha-colorscheme.png b/content/media/buddha-colorscheme.png similarity index 100% rename from _src/_media/buddha-colorscheme.png rename to content/media/buddha-colorscheme.png diff --git a/_src/_media/buddha-printer.png b/content/media/buddha-printer.png similarity index 100% rename from _src/_media/buddha-printer.png rename to content/media/buddha-printer.png diff --git a/_src/_media/bundeskanzleramt_01_HDR_tonemapped_16bit-Version-2.jpg b/content/media/bundeskanzleramt_01_HDR_tonemapped_16bit-Version-2.jpg similarity index 100% rename from _src/_media/bundeskanzleramt_01_HDR_tonemapped_16bit-Version-2.jpg rename to content/media/bundeskanzleramt_01_HDR_tonemapped_16bit-Version-2.jpg diff --git a/_src/_media/c0c45b6eeea211e1ad8e22000a1cdbb8_7.jpg b/content/media/c0c45b6eeea211e1ad8e22000a1cdbb8_7.jpg similarity index 100% rename from _src/_media/c0c45b6eeea211e1ad8e22000a1cdbb8_7.jpg rename to content/media/c0c45b6eeea211e1ad8e22000a1cdbb8_7.jpg diff --git a/_src/_media/camera_obscura_wall_teaser.png b/content/media/camera_obscura_wall_teaser.png similarity index 100% rename from _src/_media/camera_obscura_wall_teaser.png rename to content/media/camera_obscura_wall_teaser.png diff --git a/_src/_media/cameraobscura11_all.png b/content/media/cameraobscura11_all.png similarity index 100% rename from _src/_media/cameraobscura11_all.png rename to content/media/cameraobscura11_all.png diff --git a/_src/_media/cameraobscura11_all_thumb.png b/content/media/cameraobscura11_all_thumb.png similarity index 100% rename from _src/_media/cameraobscura11_all_thumb.png rename to content/media/cameraobscura11_all_thumb.png diff --git a/_src/_media/cameraobscura_aperture_128.png b/content/media/cameraobscura_aperture_128.png similarity index 100% rename from _src/_media/cameraobscura_aperture_128.png rename to content/media/cameraobscura_aperture_128.png diff --git a/_src/_media/cameraobscura_inuse.png b/content/media/cameraobscura_inuse.png similarity index 100% rename from _src/_media/cameraobscura_inuse.png rename to content/media/cameraobscura_inuse.png diff --git a/_src/_media/cameraobscura_teaser1.png b/content/media/cameraobscura_teaser1.png similarity index 100% rename from _src/_media/cameraobscura_teaser1.png rename to content/media/cameraobscura_teaser1.png diff --git a/_src/_media/canon1.png b/content/media/canon1.png similarity index 100% rename from _src/_media/canon1.png rename to content/media/canon1.png diff --git a/_src/_media/canon1000d.png b/content/media/canon1000d.png similarity index 100% rename from _src/_media/canon1000d.png rename to content/media/canon1000d.png diff --git a/_src/_media/canon2.png b/content/media/canon2.png similarity index 100% rename from _src/_media/canon2.png rename to content/media/canon2.png diff --git a/_src/_media/canon3.png b/content/media/canon3.png similarity index 100% rename from _src/_media/canon3.png rename to content/media/canon3.png diff --git a/_src/_media/canon4.png b/content/media/canon4.png similarity index 100% rename from _src/_media/canon4.png rename to content/media/canon4.png diff --git a/_src/_media/canondrivercontents.png b/content/media/canondrivercontents.png similarity index 100% rename from _src/_media/canondrivercontents.png rename to content/media/canondrivercontents.png diff --git a/_src/_media/canoscanlide500f.jpg b/content/media/canoscanlide500f.jpg similarity index 100% rename from _src/_media/canoscanlide500f.jpg rename to content/media/canoscanlide500f.jpg diff --git a/_src/_media/ce2d29f40df411e2ad5812313817873b_7.jpg b/content/media/ce2d29f40df411e2ad5812313817873b_7.jpg similarity index 100% rename from _src/_media/ce2d29f40df411e2ad5812313817873b_7.jpg rename to content/media/ce2d29f40df411e2ad5812313817873b_7.jpg diff --git a/_src/_media/chives_by_kremalicious.zip b/content/media/chives_by_kremalicious.zip similarity index 100% rename from _src/_media/chives_by_kremalicious.zip rename to content/media/chives_by_kremalicious.zip diff --git a/_src/_media/chives_wallpaper_teaser.png b/content/media/chives_wallpaper_teaser.png similarity index 100% rename from _src/_media/chives_wallpaper_teaser.png rename to content/media/chives_wallpaper_teaser.png diff --git a/_src/_media/chrome-ui.png b/content/media/chrome-ui.png similarity index 100% rename from _src/_media/chrome-ui.png rename to content/media/chrome-ui.png diff --git a/_src/_media/coda-clips-icon-files.zip b/content/media/coda-clips-icon-files.zip similarity index 100% rename from _src/_media/coda-clips-icon-files.zip rename to content/media/coda-clips-icon-files.zip diff --git a/_src/_media/codaclips-hud.png b/content/media/codaclips-hud.png similarity index 100% rename from _src/_media/codaclips-hud.png rename to content/media/codaclips-hud.png diff --git a/_src/_media/codaclips-icon128.png b/content/media/codaclips-icon128.png similarity index 100% rename from _src/_media/codaclips-icon128.png rename to content/media/codaclips-icon128.png diff --git a/_src/_media/codaclips-icon48.png b/content/media/codaclips-icon48.png similarity index 100% rename from _src/_media/codaclips-icon48.png rename to content/media/codaclips-icon48.png diff --git a/_src/_media/codaclips-placeholder.png b/content/media/codaclips-placeholder.png similarity index 100% rename from _src/_media/codaclips-placeholder.png rename to content/media/codaclips-placeholder.png diff --git a/_src/_media/codaclips-teaser.png b/content/media/codaclips-teaser.png similarity index 100% rename from _src/_media/codaclips-teaser.png rename to content/media/codaclips-teaser.png diff --git a/_src/_media/coffee-cup-empty.png b/content/media/coffee-cup-empty.png similarity index 100% rename from _src/_media/coffee-cup-empty.png rename to content/media/coffee-cup-empty.png diff --git a/_src/_media/coffee-cup-icon-kremalicious.png b/content/media/coffee-cup-icon-kremalicious.png similarity index 100% rename from _src/_media/coffee-cup-icon-kremalicious.png rename to content/media/coffee-cup-icon-kremalicious.png diff --git a/_src/_media/coffee-cup-icon-teaser.png b/content/media/coffee-cup-icon-teaser.png similarity index 100% rename from _src/_media/coffee-cup-icon-teaser.png rename to content/media/coffee-cup-icon-teaser.png diff --git a/_src/_media/coffee-showcase-apple.png b/content/media/coffee-showcase-apple.png similarity index 100% rename from _src/_media/coffee-showcase-apple.png rename to content/media/coffee-showcase-apple.png diff --git a/_src/_media/coffee-showcase-baumann.png b/content/media/coffee-showcase-baumann.png similarity index 100% rename from _src/_media/coffee-showcase-baumann.png rename to content/media/coffee-showcase-baumann.png diff --git a/_src/_media/coffee-showcase-benedik.png b/content/media/coffee-showcase-benedik.png similarity index 100% rename from _src/_media/coffee-showcase-benedik.png rename to content/media/coffee-showcase-benedik.png diff --git a/_src/_media/coffee-showcase-brasgalla.png b/content/media/coffee-showcase-brasgalla.png similarity index 100% rename from _src/_media/coffee-showcase-brasgalla.png rename to content/media/coffee-showcase-brasgalla.png diff --git a/_src/_media/coffee-showcase-brasgalla2.png b/content/media/coffee-showcase-brasgalla2.png similarity index 100% rename from _src/_media/coffee-showcase-brasgalla2.png rename to content/media/coffee-showcase-brasgalla2.png diff --git a/_src/_media/coffee-showcase-cappuccinosofa.png b/content/media/coffee-showcase-cappuccinosofa.png similarity index 100% rename from _src/_media/coffee-showcase-cappuccinosofa.png rename to content/media/coffee-showcase-cappuccinosofa.png diff --git a/_src/_media/coffee-showcase-england.png b/content/media/coffee-showcase-england.png similarity index 100% rename from _src/_media/coffee-showcase-england.png rename to content/media/coffee-showcase-england.png diff --git a/_src/_media/coffee-showcase-flarup.png b/content/media/coffee-showcase-flarup.png similarity index 100% rename from _src/_media/coffee-showcase-flarup.png rename to content/media/coffee-showcase-flarup.png diff --git a/_src/_media/coffee-showcase-jaeppinen.png b/content/media/coffee-showcase-jaeppinen.png similarity index 100% rename from _src/_media/coffee-showcase-jaeppinen.png rename to content/media/coffee-showcase-jaeppinen.png diff --git a/_src/_media/coffee-showcase-kaycaffeine.png b/content/media/coffee-showcase-kaycaffeine.png similarity index 100% rename from _src/_media/coffee-showcase-kaycaffeine.png rename to content/media/coffee-showcase-kaycaffeine.png diff --git a/_src/_media/coffee-showcase-kretschmann.png b/content/media/coffee-showcase-kretschmann.png similarity index 100% rename from _src/_media/coffee-showcase-kretschmann.png rename to content/media/coffee-showcase-kretschmann.png diff --git a/_src/_media/coffee-showcase-lanham.png b/content/media/coffee-showcase-lanham.png similarity index 100% rename from _src/_media/coffee-showcase-lanham.png rename to content/media/coffee-showcase-lanham.png diff --git a/_src/_media/coffee-showcase-lopezruiz.png b/content/media/coffee-showcase-lopezruiz.png similarity index 100% rename from _src/_media/coffee-showcase-lopezruiz.png rename to content/media/coffee-showcase-lopezruiz.png diff --git a/_src/_media/coffee-showcase-lovecappu.png b/content/media/coffee-showcase-lovecappu.png similarity index 100% rename from _src/_media/coffee-showcase-lovecappu.png rename to content/media/coffee-showcase-lovecappu.png diff --git a/_src/_media/coffee-showcase-macrabbit.png b/content/media/coffee-showcase-macrabbit.png similarity index 100% rename from _src/_media/coffee-showcase-macrabbit.png rename to content/media/coffee-showcase-macrabbit.png diff --git a/_src/_media/coffee-showcase-matu.png b/content/media/coffee-showcase-matu.png similarity index 100% rename from _src/_media/coffee-showcase-matu.png rename to content/media/coffee-showcase-matu.png diff --git a/_src/_media/coffee-showcase-rask1.png b/content/media/coffee-showcase-rask1.png similarity index 100% rename from _src/_media/coffee-showcase-rask1.png rename to content/media/coffee-showcase-rask1.png diff --git a/_src/_media/coffee-showcase-rask2.png b/content/media/coffee-showcase-rask2.png similarity index 100% rename from _src/_media/coffee-showcase-rask2.png rename to content/media/coffee-showcase-rask2.png diff --git a/_src/_media/coffee-showcase-susumo.png b/content/media/coffee-showcase-susumo.png similarity index 100% rename from _src/_media/coffee-showcase-susumo.png rename to content/media/coffee-showcase-susumo.png diff --git a/_src/_media/coffee-showcase-times.png b/content/media/coffee-showcase-times.png similarity index 100% rename from _src/_media/coffee-showcase-times.png rename to content/media/coffee-showcase-times.png diff --git a/_src/_media/coffee-showcase-tut-abduzeedo.png b/content/media/coffee-showcase-tut-abduzeedo.png similarity index 100% rename from _src/_media/coffee-showcase-tut-abduzeedo.png rename to content/media/coffee-showcase-tut-abduzeedo.png diff --git a/_src/_media/coffee-showcase-tut-houle.png b/content/media/coffee-showcase-tut-houle.png similarity index 100% rename from _src/_media/coffee-showcase-tut-houle.png rename to content/media/coffee-showcase-tut-houle.png diff --git a/_src/_media/coffee-showcase-tut-psdtuts.png b/content/media/coffee-showcase-tut-psdtuts.png similarity index 100% rename from _src/_media/coffee-showcase-tut-psdtuts.png rename to content/media/coffee-showcase-tut-psdtuts.png diff --git a/_src/_media/coffee-showcase-tut-vectuts.png b/content/media/coffee-showcase-tut-vectuts.png similarity index 100% rename from _src/_media/coffee-showcase-tut-vectuts.png rename to content/media/coffee-showcase-tut-vectuts.png diff --git a/_src/_media/coffee-showcase-vegrafik.png b/content/media/coffee-showcase-vegrafik.png similarity index 100% rename from _src/_media/coffee-showcase-vegrafik.png rename to content/media/coffee-showcase-vegrafik.png diff --git a/_src/_media/coffee-showcase-visualpharm.png b/content/media/coffee-showcase-visualpharm.png similarity index 100% rename from _src/_media/coffee-showcase-visualpharm.png rename to content/media/coffee-showcase-visualpharm.png diff --git a/_src/_media/coffee_cup_by_kremalicious.zip b/content/media/coffee_cup_by_kremalicious.zip similarity index 100% rename from _src/_media/coffee_cup_by_kremalicious.zip rename to content/media/coffee_cup_by_kremalicious.zip diff --git a/_src/_media/coolhaven-rotterdam.jpg b/content/media/coolhaven-rotterdam.jpg similarity index 100% rename from _src/_media/coolhaven-rotterdam.jpg rename to content/media/coolhaven-rotterdam.jpg diff --git a/_src/_media/creaceed_hydra.png b/content/media/creaceed_hydra.png similarity index 100% rename from _src/_media/creaceed_hydra.png rename to content/media/creaceed_hydra.png diff --git a/_src/_media/css.png b/content/media/css.png similarity index 100% rename from _src/_media/css.png rename to content/media/css.png diff --git a/_src/_media/custom-gravatar.jpg b/content/media/custom-gravatar.jpg similarity index 100% rename from _src/_media/custom-gravatar.jpg rename to content/media/custom-gravatar.jpg diff --git a/_src/_media/de2ac24c7db911e1b9f1123138140926_7.jpg b/content/media/de2ac24c7db911e1b9f1123138140926_7.jpg similarity index 100% rename from _src/_media/de2ac24c7db911e1b9f1123138140926_7.jpg rename to content/media/de2ac24c7db911e1b9f1123138140926_7.jpg diff --git a/_src/_media/delibar-by-kremalicious.zip b/content/media/delibar-by-kremalicious.zip similarity index 100% rename from _src/_media/delibar-by-kremalicious.zip rename to content/media/delibar-by-kremalicious.zip diff --git a/_src/_media/delibar-website.png b/content/media/delibar-website.png similarity index 100% rename from _src/_media/delibar-website.png rename to content/media/delibar-website.png diff --git a/_src/_media/deliciouslinks.png b/content/media/deliciouslinks.png similarity index 100% rename from _src/_media/deliciouslinks.png rename to content/media/deliciouslinks.png diff --git a/_src/_media/dft-light_ui.jpg b/content/media/dft-light_ui.jpg similarity index 100% rename from _src/_media/dft-light_ui.jpg rename to content/media/dft-light_ui.jpg diff --git a/_src/_media/dft-ozone_ui.jpg b/content/media/dft-ozone_ui.jpg similarity index 100% rename from _src/_media/dft-ozone_ui.jpg rename to content/media/dft-ozone_ui.jpg diff --git a/_src/_media/dft-powerstroke_uis.jpg b/content/media/dft-powerstroke_uis.jpg similarity index 100% rename from _src/_media/dft-powerstroke_uis.jpg rename to content/media/dft-powerstroke_uis.jpg diff --git a/_src/_media/diskimage98.png b/content/media/diskimage98.png similarity index 100% rename from _src/_media/diskimage98.png rename to content/media/diskimage98.png diff --git a/_src/_media/dpmatte_index1.jpg b/content/media/dpmatte_index1.jpg similarity index 100% rename from _src/_media/dpmatte_index1.jpg rename to content/media/dpmatte_index1.jpg diff --git a/_src/_media/efs_18-200.png b/content/media/efs_18-200.png similarity index 100% rename from _src/_media/efs_18-200.png rename to content/media/efs_18-200.png diff --git a/_src/_media/efs_18-200_thumb.png b/content/media/efs_18-200_thumb.png similarity index 100% rename from _src/_media/efs_18-200_thumb.png rename to content/media/efs_18-200_thumb.png diff --git a/_src/_media/elegancesociale_smashingteaser.png b/content/media/elegancesociale_smashingteaser.png similarity index 100% rename from _src/_media/elegancesociale_smashingteaser.png rename to content/media/elegancesociale_smashingteaser.png diff --git a/_src/_media/encryption_certificate.png b/content/media/encryption_certificate.png similarity index 100% rename from _src/_media/encryption_certificate.png rename to content/media/encryption_certificate.png diff --git a/_src/_media/encryption_mail2.png b/content/media/encryption_mail2.png similarity index 100% rename from _src/_media/encryption_mail2.png rename to content/media/encryption_mail2.png diff --git a/_src/_media/eos_50D_back.png b/content/media/eos_50D_back.png similarity index 100% rename from _src/_media/eos_50D_back.png rename to content/media/eos_50D_back.png diff --git a/_src/_media/eos_50D_back_thumb.png b/content/media/eos_50D_back_thumb.png similarity index 100% rename from _src/_media/eos_50D_back_thumb.png rename to content/media/eos_50D_back_thumb.png diff --git a/_src/_media/eos_50D_front.png b/content/media/eos_50D_front.png similarity index 100% rename from _src/_media/eos_50D_front.png rename to content/media/eos_50D_front.png diff --git a/_src/_media/eos_50D_front_thumb.png b/content/media/eos_50D_front_thumb.png similarity index 100% rename from _src/_media/eos_50D_front_thumb.png rename to content/media/eos_50D_front_thumb.png diff --git a/_src/_media/filevault98.png b/content/media/filevault98.png similarity index 100% rename from _src/_media/filevault98.png rename to content/media/filevault98.png diff --git a/_src/_media/firefox-icon.png b/content/media/firefox-icon.png similarity index 100% rename from _src/_media/firefox-icon.png rename to content/media/firefox-icon.png diff --git a/_src/_media/firefox3promo.png b/content/media/firefox3promo.png similarity index 100% rename from _src/_media/firefox3promo.png rename to content/media/firefox3promo.png diff --git a/_src/_media/floating-sky-1.jpg b/content/media/floating-sky-1.jpg similarity index 100% rename from _src/_media/floating-sky-1.jpg rename to content/media/floating-sky-1.jpg diff --git a/_src/_media/free-pdf.png b/content/media/free-pdf.png similarity index 100% rename from _src/_media/free-pdf.png rename to content/media/free-pdf.png diff --git a/_src/_media/fry-2009-kremalicious.png b/content/media/fry-2009-kremalicious.png similarity index 100% rename from _src/_media/fry-2009-kremalicious.png rename to content/media/fry-2009-kremalicious.png diff --git a/_src/_media/futurama-mac-01.png b/content/media/futurama-mac-01.png similarity index 100% rename from _src/_media/futurama-mac-01.png rename to content/media/futurama-mac-01.png diff --git a/_src/_media/futurama-mac-02.png b/content/media/futurama-mac-02.png similarity index 100% rename from _src/_media/futurama-mac-02.png rename to content/media/futurama-mac-02.png diff --git a/_src/_media/futurama-mac-03.png b/content/media/futurama-mac-03.png similarity index 100% rename from _src/_media/futurama-mac-03.png rename to content/media/futurama-mac-03.png diff --git a/_src/_media/futurama-mac-04.png b/content/media/futurama-mac-04.png similarity index 100% rename from _src/_media/futurama-mac-04.png rename to content/media/futurama-mac-04.png diff --git a/_src/_media/futurama-mac-05.png b/content/media/futurama-mac-05.png similarity index 100% rename from _src/_media/futurama-mac-05.png rename to content/media/futurama-mac-05.png diff --git a/_src/_media/futurama-mac-06.png b/content/media/futurama-mac-06.png similarity index 100% rename from _src/_media/futurama-mac-06.png rename to content/media/futurama-mac-06.png diff --git a/_src/_media/futurama-mac-07.png b/content/media/futurama-mac-07.png similarity index 100% rename from _src/_media/futurama-mac-07.png rename to content/media/futurama-mac-07.png diff --git a/_src/_media/futurama-mac-08.png b/content/media/futurama-mac-08.png similarity index 100% rename from _src/_media/futurama-mac-08.png rename to content/media/futurama-mac-08.png diff --git a/_src/_media/futurama-mac-09.png b/content/media/futurama-mac-09.png similarity index 100% rename from _src/_media/futurama-mac-09.png rename to content/media/futurama-mac-09.png diff --git a/_src/_media/futurama-mac-10.png b/content/media/futurama-mac-10.png similarity index 100% rename from _src/_media/futurama-mac-10.png rename to content/media/futurama-mac-10.png diff --git a/_src/_media/futurama-mac-11.png b/content/media/futurama-mac-11.png similarity index 100% rename from _src/_media/futurama-mac-11.png rename to content/media/futurama-mac-11.png diff --git a/_src/_media/futurama-mac-12.png b/content/media/futurama-mac-12.png similarity index 100% rename from _src/_media/futurama-mac-12.png rename to content/media/futurama-mac-12.png diff --git a/_src/_media/futurama-mac-13.png b/content/media/futurama-mac-13.png similarity index 100% rename from _src/_media/futurama-mac-13.png rename to content/media/futurama-mac-13.png diff --git a/_src/_media/futurama-mac-14.png b/content/media/futurama-mac-14.png similarity index 100% rename from _src/_media/futurama-mac-14.png rename to content/media/futurama-mac-14.png diff --git a/_src/_media/futurama-mac-15.png b/content/media/futurama-mac-15.png similarity index 100% rename from _src/_media/futurama-mac-15.png rename to content/media/futurama-mac-15.png diff --git a/_src/_media/futurama-mac-16.png b/content/media/futurama-mac-16.png similarity index 100% rename from _src/_media/futurama-mac-16.png rename to content/media/futurama-mac-16.png diff --git a/_src/_media/futurama-mac-17.png b/content/media/futurama-mac-17.png similarity index 100% rename from _src/_media/futurama-mac-17.png rename to content/media/futurama-mac-17.png diff --git a/_src/_media/futurama-mac-18.png b/content/media/futurama-mac-18.png similarity index 100% rename from _src/_media/futurama-mac-18.png rename to content/media/futurama-mac-18.png diff --git a/_src/_media/futurama-mac-19.png b/content/media/futurama-mac-19.png similarity index 100% rename from _src/_media/futurama-mac-19.png rename to content/media/futurama-mac-19.png diff --git a/_src/_media/futurama-mac-20.png b/content/media/futurama-mac-20.png similarity index 100% rename from _src/_media/futurama-mac-20.png rename to content/media/futurama-mac-20.png diff --git a/_src/_media/futurama-mac-21.png b/content/media/futurama-mac-21.png similarity index 100% rename from _src/_media/futurama-mac-21.png rename to content/media/futurama-mac-21.png diff --git a/_src/_media/futurama-mac-teaser.png b/content/media/futurama-mac-teaser.png similarity index 100% rename from _src/_media/futurama-mac-teaser.png rename to content/media/futurama-mac-teaser.png diff --git a/_src/_media/futurama_gedeon.png b/content/media/futurama_gedeon.png similarity index 100% rename from _src/_media/futurama_gedeon.png rename to content/media/futurama_gedeon.png diff --git a/_src/_media/futurama_hawkins1.png b/content/media/futurama_hawkins1.png similarity index 100% rename from _src/_media/futurama_hawkins1.png rename to content/media/futurama_hawkins1.png diff --git a/_src/_media/futurama_hawkins2.png b/content/media/futurama_hawkins2.png similarity index 100% rename from _src/_media/futurama_hawkins2.png rename to content/media/futurama_hawkins2.png diff --git a/_src/_media/futurama_kremalicious.png b/content/media/futurama_kremalicious.png similarity index 100% rename from _src/_media/futurama_kremalicious.png rename to content/media/futurama_kremalicious.png diff --git a/_src/_media/futurama_rawpixels.png b/content/media/futurama_rawpixels.png similarity index 100% rename from _src/_media/futurama_rawpixels.png rename to content/media/futurama_rawpixels.png diff --git a/_src/_media/googlechrome.png b/content/media/googlechrome.png similarity index 100% rename from _src/_media/googlechrome.png rename to content/media/googlechrome.png diff --git a/_src/_media/hastuzeit-kremalicious2.jpg b/content/media/hastuzeit-kremalicious2.jpg similarity index 100% rename from _src/_media/hastuzeit-kremalicious2.jpg rename to content/media/hastuzeit-kremalicious2.jpg diff --git a/_src/_media/html-document-icon48.png b/content/media/html-document-icon48.png similarity index 100% rename from _src/_media/html-document-icon48.png rename to content/media/html-document-icon48.png diff --git a/_src/_media/iPhone-Coasters-1-Version-2.jpg b/content/media/iPhone-Coasters-1-Version-2.jpg similarity index 100% rename from _src/_media/iPhone-Coasters-1-Version-2.jpg rename to content/media/iPhone-Coasters-1-Version-2.jpg diff --git a/_src/_media/iPixelPad-Teaser-kremalicious2.jpg b/content/media/iPixelPad-Teaser-kremalicious2.jpg similarity index 100% rename from _src/_media/iPixelPad-Teaser-kremalicious2.jpg rename to content/media/iPixelPad-Teaser-kremalicious2.jpg diff --git a/_src/_media/iPixelPad-Teaser1.png b/content/media/iPixelPad-Teaser1.png similarity index 100% rename from _src/_media/iPixelPad-Teaser1.png rename to content/media/iPixelPad-Teaser1.png diff --git a/_src/_media/icon-Facebook.png b/content/media/icon-Facebook.png similarity index 100% rename from _src/_media/icon-Facebook.png rename to content/media/icon-Facebook.png diff --git a/_src/_media/icon-Twitter2.png b/content/media/icon-Twitter2.png similarity index 100% rename from _src/_media/icon-Twitter2.png rename to content/media/icon-Twitter2.png diff --git a/_src/_media/icon-deviantART.png b/content/media/icon-deviantART.png similarity index 100% rename from _src/_media/icon-deviantART.png rename to content/media/icon-deviantART.png diff --git a/_src/_media/icybox_by_kremalicious.zip b/content/media/icybox_by_kremalicious.zip similarity index 100% rename from _src/_media/icybox_by_kremalicious.zip rename to content/media/icybox_by_kremalicious.zip diff --git a/_src/_media/icybox_teaser1.png b/content/media/icybox_teaser1.png similarity index 100% rename from _src/_media/icybox_teaser1.png rename to content/media/icybox_teaser1.png diff --git a/_src/_media/icybox_teaser2.jpg b/content/media/icybox_teaser2.jpg similarity index 100% rename from _src/_media/icybox_teaser2.jpg rename to content/media/icybox_teaser2.jpg diff --git a/_src/_media/icybox_teaser2_small.png b/content/media/icybox_teaser2_small.png similarity index 100% rename from _src/_media/icybox_teaser2_small.png rename to content/media/icybox_teaser2_small.png diff --git a/_src/_media/imagestrends_shieoff.jpg b/content/media/imagestrends_shieoff.jpg similarity index 100% rename from _src/_media/imagestrends_shieoff.jpg rename to content/media/imagestrends_shieoff.jpg diff --git a/_src/_media/imagetrends_hemi_10.jpg b/content/media/imagetrends_hemi_10.jpg similarity index 100% rename from _src/_media/imagetrends_hemi_10.jpg rename to content/media/imagetrends_hemi_10.jpg diff --git a/_src/_media/imagetrends_pearlywhite.png b/content/media/imagetrends_pearlywhite.png similarity index 100% rename from _src/_media/imagetrends_pearlywhite.png rename to content/media/imagetrends_pearlywhite.png diff --git a/_src/_media/img_1820-Version-4.jpg b/content/media/img_1820-Version-4.jpg similarity index 100% rename from _src/_media/img_1820-Version-4.jpg rename to content/media/img_1820-Version-4.jpg diff --git a/_src/_media/indianajones_dock.png b/content/media/indianajones_dock.png similarity index 100% rename from _src/_media/indianajones_dock.png rename to content/media/indianajones_dock.png diff --git a/_src/_media/indianajones_first.png b/content/media/indianajones_first.png similarity index 100% rename from _src/_media/indianajones_first.png rename to content/media/indianajones_first.png diff --git a/_src/_media/ipixelpad-homescreen-zoom.png b/content/media/ipixelpad-homescreen-zoom.png similarity index 100% rename from _src/_media/ipixelpad-homescreen-zoom.png rename to content/media/ipixelpad-homescreen-zoom.png diff --git a/_src/_media/ipixelpad_by_kremalicious.zip b/content/media/ipixelpad_by_kremalicious.zip similarity index 100% rename from _src/_media/ipixelpad_by_kremalicious.zip rename to content/media/ipixelpad_by_kremalicious.zip diff --git a/_src/_media/jade_ui.png b/content/media/jade_ui.png similarity index 100% rename from _src/_media/jade_ui.png rename to content/media/jade_ui.png diff --git a/_src/_media/jade_ui_thumb.jpg b/content/media/jade_ui_thumb.jpg similarity index 100% rename from _src/_media/jade_ui_thumb.jpg rename to content/media/jade_ui_thumb.jpg diff --git a/_src/_media/jingjing_chacha_kremalicious.jpg b/content/media/jingjing_chacha_kremalicious.jpg similarity index 100% rename from _src/_media/jingjing_chacha_kremalicious.jpg rename to content/media/jingjing_chacha_kremalicious.jpg diff --git a/_src/_media/just-a-normal-sunday.jpg b/content/media/just-a-normal-sunday.jpg similarity index 100% rename from _src/_media/just-a-normal-sunday.jpg rename to content/media/just-a-normal-sunday.jpg diff --git a/_src/_media/keith-haring-vandalizing-a-wall.jpg b/content/media/keith-haring-vandalizing-a-wall.jpg similarity index 100% rename from _src/_media/keith-haring-vandalizing-a-wall.jpg rename to content/media/keith-haring-vandalizing-a-wall.jpg diff --git a/_src/_media/kremalicious-Teaser-Metro-Tile.jpg b/content/media/kremalicious-Teaser-Metro-Tile.jpg similarity index 100% rename from _src/_media/kremalicious-Teaser-Metro-Tile.jpg rename to content/media/kremalicious-Teaser-Metro-Tile.jpg diff --git a/_src/_media/kremalicious-Teaser-WP-Icon-Template.png b/content/media/kremalicious-Teaser-WP-Icon-Template.png similarity index 100% rename from _src/_media/kremalicious-Teaser-WP-Icon-Template.png rename to content/media/kremalicious-Teaser-WP-Icon-Template.png diff --git a/_src/_media/kremalicious-Teaser-ezeep.png b/content/media/kremalicious-Teaser-ezeep.png similarity index 100% rename from _src/_media/kremalicious-Teaser-ezeep.png rename to content/media/kremalicious-Teaser-ezeep.png diff --git a/_src/_media/kremalicious-iconiphone-80.png b/content/media/kremalicious-iconiphone-80.png similarity index 100% rename from _src/_media/kremalicious-iconiphone-80.png rename to content/media/kremalicious-iconiphone-80.png diff --git a/_src/_media/kremalicious-iconiphone.png b/content/media/kremalicious-iconiphone.png similarity index 100% rename from _src/_media/kremalicious-iconiphone.png rename to content/media/kremalicious-iconiphone.png diff --git a/_src/_media/kremalicious2-photogrid.jpg b/content/media/kremalicious2-photogrid.jpg similarity index 100% rename from _src/_media/kremalicious2-photogrid.jpg rename to content/media/kremalicious2-photogrid.jpg diff --git a/_src/_media/kremalicious2-photoposts.jpg b/content/media/kremalicious2-photoposts.jpg similarity index 100% rename from _src/_media/kremalicious2-photoposts.jpg rename to content/media/kremalicious2-photoposts.jpg diff --git a/_src/_media/kremalicious2-teaser.jpg b/content/media/kremalicious2-teaser.jpg similarity index 100% rename from _src/_media/kremalicious2-teaser.jpg rename to content/media/kremalicious2-teaser.jpg diff --git a/_src/_media/kremalicious2-topicicons.jpg b/content/media/kremalicious2-topicicons.jpg similarity index 100% rename from _src/_media/kremalicious2-topicicons.jpg rename to content/media/kremalicious2-topicicons.jpg diff --git a/_src/_media/kremalicious2-typography.jpg b/content/media/kremalicious2-typography.jpg similarity index 100% rename from _src/_media/kremalicious2-typography.jpg rename to content/media/kremalicious2-typography.jpg diff --git a/_src/_media/kremalicious_nav.txt b/content/media/kremalicious_nav.txt similarity index 100% rename from _src/_media/kremalicious_nav.txt rename to content/media/kremalicious_nav.txt diff --git a/_src/_media/kremaliciouscom-iPad-3.jpg b/content/media/kremaliciouscom-iPad-3.jpg similarity index 100% rename from _src/_media/kremaliciouscom-iPad-3.jpg rename to content/media/kremaliciouscom-iPad-3.jpg diff --git a/_src/_media/kremaliciousiphone.png b/content/media/kremaliciousiphone.png similarity index 100% rename from _src/_media/kremaliciousiphone.png rename to content/media/kremaliciousiphone.png diff --git a/_src/_media/kremaliciousiphone_thumb.png b/content/media/kremaliciousiphone_thumb.png similarity index 100% rename from _src/_media/kremaliciousiphone_thumb.png rename to content/media/kremaliciousiphone_thumb.png diff --git a/_src/_media/lens.png b/content/media/lens.png similarity index 100% rename from _src/_media/lens.png rename to content/media/lens.png diff --git a/_src/_media/lensfix_ci.png b/content/media/lensfix_ci.png similarity index 100% rename from _src/_media/lensfix_ci.png rename to content/media/lensfix_ci.png diff --git a/_src/_media/londonpolice.jpg b/content/media/londonpolice.jpg similarity index 100% rename from _src/_media/londonpolice.jpg rename to content/media/londonpolice.jpg diff --git a/_src/_media/magnifique-ui.png b/content/media/magnifique-ui.png similarity index 100% rename from _src/_media/magnifique-ui.png rename to content/media/magnifique-ui.png diff --git a/_src/_media/mars-u-teaser.png b/content/media/mars-u-teaser.png similarity index 100% rename from _src/_media/mars-u-teaser.png rename to content/media/mars-u-teaser.png diff --git a/_src/_media/mars-u-wall-by-kremalicious.zip b/content/media/mars-u-wall-by-kremalicious.zip similarity index 100% rename from _src/_media/mars-u-wall-by-kremalicious.zip rename to content/media/mars-u-wall-by-kremalicious.zip diff --git a/_src/_media/marsedit_kremalicious.png b/content/media/marsedit_kremalicious.png similarity index 100% rename from _src/_media/marsedit_kremalicious.png rename to content/media/marsedit_kremalicious.png diff --git a/_src/_media/marsedit_kremalicious.txt b/content/media/marsedit_kremalicious.txt similarity index 100% rename from _src/_media/marsedit_kremalicious.txt rename to content/media/marsedit_kremalicious.txt diff --git a/_src/_media/marsedit_kremalicious_big.png b/content/media/marsedit_kremalicious_big.png similarity index 100% rename from _src/_media/marsedit_kremalicious_big.png rename to content/media/marsedit_kremalicious_big.png diff --git a/_src/_media/mediaMomCorpTeaser.png b/content/media/mediaMomCorpTeaser.png similarity index 100% rename from _src/_media/mediaMomCorpTeaser.png rename to content/media/mediaMomCorpTeaser.png diff --git a/_src/_media/mkv2-android-chrome.png b/content/media/mkv2-android-chrome.png similarity index 100% rename from _src/_media/mkv2-android-chrome.png rename to content/media/mkv2-android-chrome.png diff --git a/_src/_media/mkv2-android-firefox.png b/content/media/mkv2-android-firefox.png similarity index 100% rename from _src/_media/mkv2-android-firefox.png rename to content/media/mkv2-android-firefox.png diff --git a/_src/_media/mkv2-android.png b/content/media/mkv2-android.png similarity index 100% rename from _src/_media/mkv2-android.png rename to content/media/mkv2-android.png diff --git a/_src/_media/mkv2-balls.jpg b/content/media/mkv2-balls.jpg similarity index 100% rename from _src/_media/mkv2-balls.jpg rename to content/media/mkv2-balls.jpg diff --git a/_src/_media/mkv2-detail.png b/content/media/mkv2-detail.png similarity index 100% rename from _src/_media/mkv2-detail.png rename to content/media/mkv2-detail.png diff --git a/_src/_media/mkv2-ipad-touchindicator.jpg b/content/media/mkv2-ipad-touchindicator.jpg similarity index 100% rename from _src/_media/mkv2-ipad-touchindicator.jpg rename to content/media/mkv2-ipad-touchindicator.jpg diff --git a/_src/_media/mkv2-ipad.png b/content/media/mkv2-ipad.png similarity index 100% rename from _src/_media/mkv2-ipad.png rename to content/media/mkv2-ipad.png diff --git a/_src/_media/mkv2-iphone.png b/content/media/mkv2-iphone.png similarity index 100% rename from _src/_media/mkv2-iphone.png rename to content/media/mkv2-iphone.png diff --git a/_src/_media/mkv2-portfolio-overlay.jpg b/content/media/mkv2-portfolio-overlay.jpg similarity index 100% rename from _src/_media/mkv2-portfolio-overlay.jpg rename to content/media/mkv2-portfolio-overlay.jpg diff --git a/_src/_media/mkv2-responsivelayouts.jpg b/content/media/mkv2-responsivelayouts.jpg similarity index 100% rename from _src/_media/mkv2-responsivelayouts.jpg rename to content/media/mkv2-responsivelayouts.jpg diff --git a/_src/_media/mkv2-teaser-450x250.jpg b/content/media/mkv2-teaser-450x250.jpg similarity index 100% rename from _src/_media/mkv2-teaser-450x250.jpg rename to content/media/mkv2-teaser-450x250.jpg diff --git a/_src/_media/mkv2-teaser-500x277.jpg b/content/media/mkv2-teaser-500x277.jpg similarity index 100% rename from _src/_media/mkv2-teaser-500x277.jpg rename to content/media/mkv2-teaser-500x277.jpg diff --git a/_src/_media/mkv2-teaser-540x288.jpg b/content/media/mkv2-teaser-540x288.jpg similarity index 100% rename from _src/_media/mkv2-teaser-540x288.jpg rename to content/media/mkv2-teaser-540x288.jpg diff --git a/_src/_media/mkv2.jpg b/content/media/mkv2.jpg similarity index 100% rename from _src/_media/mkv2.jpg rename to content/media/mkv2.jpg diff --git a/_src/_media/momcorp_wall_by_kremalicious.zip b/content/media/momcorp_wall_by_kremalicious.zip similarity index 100% rename from _src/_media/momcorp_wall_by_kremalicious.zip rename to content/media/momcorp_wall_by_kremalicious.zip diff --git a/_src/_media/most-surprising-dog-i-know.jpg b/content/media/most-surprising-dog-i-know.jpg similarity index 100% rename from _src/_media/most-surprising-dog-i-know.jpg rename to content/media/most-surprising-dog-i-know.jpg diff --git a/_src/_media/muehle_suhlendorf_HDR_Tonemapped_16bit.jpg b/content/media/muehle_suhlendorf_HDR_Tonemapped_16bit.jpg similarity index 100% rename from _src/_media/muehle_suhlendorf_HDR_Tonemapped_16bit.jpg rename to content/media/muehle_suhlendorf_HDR_Tonemapped_16bit.jpg diff --git a/_src/_media/navbar-kremalicious.png b/content/media/navbar-kremalicious.png similarity index 100% rename from _src/_media/navbar-kremalicious.png rename to content/media/navbar-kremalicious.png diff --git a/_src/_media/netatalk.png b/content/media/netatalk.png similarity index 100% rename from _src/_media/netatalk.png rename to content/media/netatalk.png diff --git a/_src/_media/new-passion-facade.jpg b/content/media/new-passion-facade.jpg similarity index 100% rename from _src/_media/new-passion-facade.jpg rename to content/media/new-passion-facade.jpg diff --git a/_src/_media/nicephore-niepce.jpg b/content/media/nicephore-niepce.jpg similarity index 100% rename from _src/_media/nicephore-niepce.jpg rename to content/media/nicephore-niepce.jpg diff --git a/_src/_media/niepce_portrait.png b/content/media/niepce_portrait.png similarity index 100% rename from _src/_media/niepce_portrait.png rename to content/media/niepce_portrait.png diff --git a/_src/_media/niepces_aperture_vault256.png b/content/media/niepces_aperture_vault256.png similarity index 100% rename from _src/_media/niepces_aperture_vault256.png rename to content/media/niepces_aperture_vault256.png diff --git a/_src/_media/niepces_camera_obscura_by_kremalicious.zip b/content/media/niepces_camera_obscura_by_kremalicious.zip similarity index 100% rename from _src/_media/niepces_camera_obscura_by_kremalicious.zip rename to content/media/niepces_camera_obscura_by_kremalicious.zip diff --git a/_src/_media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip b/content/media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip similarity index 100% rename from _src/_media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip rename to content/media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip diff --git a/_src/_media/nik_silverefex.png b/content/media/nik_silverefex.png similarity index 100% rename from _src/_media/nik_silverefex.png rename to content/media/nik_silverefex.png diff --git a/_src/_media/nik_silverefex_thumb.png b/content/media/nik_silverefex_thumb.png similarity index 100% rename from _src/_media/nik_silverefex_thumb.png rename to content/media/nik_silverefex_thumb.png diff --git a/_src/_media/noiseninja.png b/content/media/noiseninja.png similarity index 100% rename from _src/_media/noiseninja.png rename to content/media/noiseninja.png diff --git a/_src/_media/obligatory-it-s-summer-in-berlin-photo.jpg b/content/media/obligatory-it-s-summer-in-berlin-photo.jpg similarity index 100% rename from _src/_media/obligatory-it-s-summer-in-berlin-photo.jpg rename to content/media/obligatory-it-s-summer-in-berlin-photo.jpg diff --git a/_src/_media/openwithpreview.png b/content/media/openwithpreview.png similarity index 100% rename from _src/_media/openwithpreview.png rename to content/media/openwithpreview.png diff --git a/_src/_media/opera-icon.png b/content/media/opera-icon.png similarity index 100% rename from _src/_media/opera-icon.png rename to content/media/opera-icon.png diff --git a/_src/_media/out-of-whale-oil-overview.png b/content/media/out-of-whale-oil-overview.png similarity index 100% rename from _src/_media/out-of-whale-oil-overview.png rename to content/media/out-of-whale-oil-overview.png diff --git a/_src/_media/out-of-whale-oil-wall-by-kremalicious.zip b/content/media/out-of-whale-oil-wall-by-kremalicious.zip similarity index 100% rename from _src/_media/out-of-whale-oil-wall-by-kremalicious.zip rename to content/media/out-of-whale-oil-wall-by-kremalicious.zip diff --git a/_src/_media/out_of_whale_oil_detail.png b/content/media/out_of_whale_oil_detail.png similarity index 100% rename from _src/_media/out_of_whale_oil_detail.png rename to content/media/out_of_whale_oil_detail.png diff --git a/_src/_media/parallax-visualization.png b/content/media/parallax-visualization.png similarity index 100% rename from _src/_media/parallax-visualization.png rename to content/media/parallax-visualization.png diff --git a/_src/_media/parallax-visualization_big.png b/content/media/parallax-visualization_big.png similarity index 100% rename from _src/_media/parallax-visualization_big.png rename to content/media/parallax-visualization_big.png diff --git a/_src/_media/parallax.png b/content/media/parallax.png similarity index 100% rename from _src/_media/parallax.png rename to content/media/parallax.png diff --git a/_src/_media/parallax_001.jpg b/content/media/parallax_001.jpg similarity index 100% rename from _src/_media/parallax_001.jpg rename to content/media/parallax_001.jpg diff --git a/_src/_media/parallax_002.jpg b/content/media/parallax_002.jpg similarity index 100% rename from _src/_media/parallax_002.jpg rename to content/media/parallax_002.jpg diff --git a/_src/_media/parallax_003.jpg b/content/media/parallax_003.jpg similarity index 100% rename from _src/_media/parallax_003.jpg rename to content/media/parallax_003.jpg diff --git a/_src/_media/parallax_004.jpg b/content/media/parallax_004.jpg similarity index 100% rename from _src/_media/parallax_004.jpg rename to content/media/parallax_004.jpg diff --git a/_src/_media/parallax_005.jpg b/content/media/parallax_005.jpg similarity index 100% rename from _src/_media/parallax_005.jpg rename to content/media/parallax_005.jpg diff --git a/_src/_media/parallax_006.jpg b/content/media/parallax_006.jpg similarity index 100% rename from _src/_media/parallax_006.jpg rename to content/media/parallax_006.jpg diff --git a/_src/_media/parallax_007.jpg b/content/media/parallax_007.jpg similarity index 100% rename from _src/_media/parallax_007.jpg rename to content/media/parallax_007.jpg diff --git a/_src/_media/parallax_008.jpg b/content/media/parallax_008.jpg similarity index 100% rename from _src/_media/parallax_008.jpg rename to content/media/parallax_008.jpg diff --git a/_src/_media/parallax_009.jpg b/content/media/parallax_009.jpg similarity index 100% rename from _src/_media/parallax_009.jpg rename to content/media/parallax_009.jpg diff --git a/_src/_media/parallax_010.jpg b/content/media/parallax_010.jpg similarity index 100% rename from _src/_media/parallax_010.jpg rename to content/media/parallax_010.jpg diff --git a/_src/_media/parallax_011.jpg b/content/media/parallax_011.jpg similarity index 100% rename from _src/_media/parallax_011.jpg rename to content/media/parallax_011.jpg diff --git a/_src/_media/parallax_012.jpg b/content/media/parallax_012.jpg similarity index 100% rename from _src/_media/parallax_012.jpg rename to content/media/parallax_012.jpg diff --git a/_src/_media/parallax_013.jpg b/content/media/parallax_013.jpg similarity index 100% rename from _src/_media/parallax_013.jpg rename to content/media/parallax_013.jpg diff --git a/_src/_media/parallax_014.png b/content/media/parallax_014.png similarity index 100% rename from _src/_media/parallax_014.png rename to content/media/parallax_014.png diff --git a/_src/_media/parallax_015.png b/content/media/parallax_015.png similarity index 100% rename from _src/_media/parallax_015.png rename to content/media/parallax_015.png diff --git a/_src/_media/parallax_016.jpg b/content/media/parallax_016.jpg similarity index 100% rename from _src/_media/parallax_016.jpg rename to content/media/parallax_016.jpg diff --git a/_src/_media/parallax_017.jpg b/content/media/parallax_017.jpg similarity index 100% rename from _src/_media/parallax_017.jpg rename to content/media/parallax_017.jpg diff --git a/_src/_media/parallax_illusion_css.png b/content/media/parallax_illusion_css.png similarity index 100% rename from _src/_media/parallax_illusion_css.png rename to content/media/parallax_illusion_css.png diff --git a/_src/_media/pathphotoshop.png b/content/media/pathphotoshop.png similarity index 100% rename from _src/_media/pathphotoshop.png rename to content/media/pathphotoshop.png diff --git a/_src/_media/pathpreview.png b/content/media/pathpreview.png similarity index 100% rename from _src/_media/pathpreview.png rename to content/media/pathpreview.png diff --git a/_src/_media/paypal-logo.jpg b/content/media/paypal-logo.jpg similarity index 100% rename from _src/_media/paypal-logo.jpg rename to content/media/paypal-logo.jpg diff --git a/_src/_media/post-time.png b/content/media/post-time.png similarity index 100% rename from _src/_media/post-time.png rename to content/media/post-time.png diff --git a/_src/_media/potsdam.jpg b/content/media/potsdam.jpg similarity index 100% rename from _src/_media/potsdam.jpg rename to content/media/potsdam.jpg diff --git a/_src/_media/project-purple-ipad-kremalicious.png b/content/media/project-purple-ipad-kremalicious.png similarity index 100% rename from _src/_media/project-purple-ipad-kremalicious.png rename to content/media/project-purple-ipad-kremalicious.png diff --git a/_src/_media/project-purple-iphone4-kremalicious.png b/content/media/project-purple-iphone4-kremalicious.png similarity index 100% rename from _src/_media/project-purple-iphone4-kremalicious.png rename to content/media/project-purple-iphone4-kremalicious.png diff --git a/_src/_media/project-purple-kremalicious.png b/content/media/project-purple-kremalicious.png similarity index 100% rename from _src/_media/project-purple-kremalicious.png rename to content/media/project-purple-kremalicious.png diff --git a/_src/_media/project-purple-kremalicious.zip b/content/media/project-purple-kremalicious.zip similarity index 100% rename from _src/_media/project-purple-kremalicious.zip rename to content/media/project-purple-kremalicious.zip diff --git a/_src/_media/project-purple-nexus-kremalicious.png b/content/media/project-purple-nexus-kremalicious.png similarity index 100% rename from _src/_media/project-purple-nexus-kremalicious.png rename to content/media/project-purple-nexus-kremalicious.png diff --git a/_src/_media/ptlens_ui.png b/content/media/ptlens_ui.png similarity index 100% rename from _src/_media/ptlens_ui.png rename to content/media/ptlens_ui.png diff --git a/_src/_media/ptlens_ui_thumb.jpg b/content/media/ptlens_ui_thumb.jpg similarity index 100% rename from _src/_media/ptlens_ui_thumb.jpg rename to content/media/ptlens_ui_thumb.jpg diff --git a/_src/_media/pulitzer.png b/content/media/pulitzer.png similarity index 100% rename from _src/_media/pulitzer.png rename to content/media/pulitzer.png diff --git a/_src/_media/raw.png b/content/media/raw.png similarity index 100% rename from _src/_media/raw.png rename to content/media/raw.png diff --git a/_src/_media/raw20.png b/content/media/raw20.png similarity index 100% rename from _src/_media/raw20.png rename to content/media/raw20.png diff --git a/_src/_media/republica-banner-125x160_black.png b/content/media/republica-banner-125x160_black.png similarity index 100% rename from _src/_media/republica-banner-125x160_black.png rename to content/media/republica-banner-125x160_black.png diff --git a/_src/_media/republica10_kremaliciousbanner.png b/content/media/republica10_kremaliciousbanner.png similarity index 100% rename from _src/_media/republica10_kremaliciousbanner.png rename to content/media/republica10_kremaliciousbanner.png diff --git a/_src/_media/safari-logo.png b/content/media/safari-logo.png similarity index 100% rename from _src/_media/safari-logo.png rename to content/media/safari-logo.png diff --git a/_src/_media/safari4_zoom.png b/content/media/safari4_zoom.png similarity index 100% rename from _src/_media/safari4_zoom.png rename to content/media/safari4_zoom.png diff --git a/_src/_media/safari4_zoom_thumb.png b/content/media/safari4_zoom_thumb.png similarity index 100% rename from _src/_media/safari4_zoom_thumb.png rename to content/media/safari4_zoom_thumb.png diff --git a/_src/_media/safari_4_tabs.png b/content/media/safari_4_tabs.png similarity index 100% rename from _src/_media/safari_4_tabs.png rename to content/media/safari_4_tabs.png diff --git a/_src/_media/sagrada-familia-ceiling.jpg b/content/media/sagrada-familia-ceiling.jpg similarity index 100% rename from _src/_media/sagrada-familia-ceiling.jpg rename to content/media/sagrada-familia-ceiling.jpg diff --git a/_src/_media/scangear16bit.png b/content/media/scangear16bit.png similarity index 100% rename from _src/_media/scangear16bit.png rename to content/media/scangear16bit.png diff --git a/_src/_media/scangear48bit.png b/content/media/scangear48bit.png similarity index 100% rename from _src/_media/scangear48bit.png rename to content/media/scangear48bit.png diff --git a/_src/_media/scangear_color.png b/content/media/scangear_color.png similarity index 100% rename from _src/_media/scangear_color.png rename to content/media/scangear_color.png diff --git a/_src/_media/scangearwindow.png b/content/media/scangearwindow.png similarity index 100% rename from _src/_media/scangearwindow.png rename to content/media/scangearwindow.png diff --git a/_src/_media/scanwindow_preview.png b/content/media/scanwindow_preview.png similarity index 100% rename from _src/_media/scanwindow_preview.png rename to content/media/scanwindow_preview.png diff --git a/_src/_media/schnecke_blatt.jpg b/content/media/schnecke_blatt.jpg similarity index 100% rename from _src/_media/schnecke_blatt.jpg rename to content/media/schnecke_blatt.jpg diff --git a/_src/_media/securevault1.png b/content/media/securevault1.png similarity index 100% rename from _src/_media/securevault1.png rename to content/media/securevault1.png diff --git a/_src/_media/securevault2.png b/content/media/securevault2.png similarity index 100% rename from _src/_media/securevault2.png rename to content/media/securevault2.png diff --git a/_src/_media/securevault3.png b/content/media/securevault3.png similarity index 100% rename from _src/_media/securevault3.png rename to content/media/securevault3.png diff --git a/_src/_media/securevault4.png b/content/media/securevault4.png similarity index 100% rename from _src/_media/securevault4.png rename to content/media/securevault4.png diff --git a/_src/_media/securevault5.png b/content/media/securevault5.png similarity index 100% rename from _src/_media/securevault5.png rename to content/media/securevault5.png diff --git a/_src/_media/server_displays_by_kremalicious.zip b/content/media/server_displays_by_kremalicious.zip similarity index 100% rename from _src/_media/server_displays_by_kremalicious.zip rename to content/media/server_displays_by_kremalicious.zip diff --git a/_src/_media/serverdisplays.jpg b/content/media/serverdisplays.jpg similarity index 100% rename from _src/_media/serverdisplays.jpg rename to content/media/serverdisplays.jpg diff --git a/_src/_media/share-link-bonanza-coda-clips.zip b/content/media/share-link-bonanza-coda-clips.zip similarity index 100% rename from _src/_media/share-link-bonanza-coda-clips.zip rename to content/media/share-link-bonanza-coda-clips.zip diff --git a/_src/_media/share-link-bonanza-html.zip b/content/media/share-link-bonanza-html.zip similarity index 100% rename from _src/_media/share-link-bonanza-html.zip rename to content/media/share-link-bonanza-html.zip diff --git a/_src/_media/snippet.png b/content/media/snippet.png similarity index 100% rename from _src/_media/snippet.png rename to content/media/snippet.png diff --git a/_src/_media/softwareupdate.png b/content/media/softwareupdate.png similarity index 100% rename from _src/_media/softwareupdate.png rename to content/media/softwareupdate.png diff --git a/_src/_media/softwareupdate_photo200.png b/content/media/softwareupdate_photo200.png similarity index 100% rename from _src/_media/softwareupdate_photo200.png rename to content/media/softwareupdate_photo200.png diff --git a/_src/_media/speedlite430exii.jpg b/content/media/speedlite430exii.jpg similarity index 100% rename from _src/_media/speedlite430exii.jpg rename to content/media/speedlite430exii.jpg diff --git a/_src/_media/stonehead.jpg b/content/media/stonehead.jpg similarity index 100% rename from _src/_media/stonehead.jpg rename to content/media/stonehead.jpg diff --git a/_src/_media/streets-of-el-born.jpg b/content/media/streets-of-el-born.jpg similarity index 100% rename from _src/_media/streets-of-el-born.jpg rename to content/media/streets-of-el-born.jpg diff --git a/_src/_media/streets-of-el-raval.jpg b/content/media/streets-of-el-raval.jpg similarity index 100% rename from _src/_media/streets-of-el-raval.jpg rename to content/media/streets-of-el-raval.jpg diff --git a/_src/_media/tabs_overview.png b/content/media/tabs_overview.png similarity index 100% rename from _src/_media/tabs_overview.png rename to content/media/tabs_overview.png diff --git a/_src/_media/teaser-appstorebadges.png b/content/media/teaser-appstorebadges.png similarity index 100% rename from _src/_media/teaser-appstorebadges.png rename to content/media/teaser-appstorebadges.png diff --git a/_src/_media/teaser-out-of-whale-oil.png b/content/media/teaser-out-of-whale-oil.png similarity index 100% rename from _src/_media/teaser-out-of-whale-oil.png rename to content/media/teaser-out-of-whale-oil.png diff --git a/_src/_media/teaser-tor.png b/content/media/teaser-tor.png similarity index 100% rename from _src/_media/teaser-tor.png rename to content/media/teaser-tor.png diff --git a/_src/_media/teaser_elegance-sociale.png b/content/media/teaser_elegance-sociale.png similarity index 100% rename from _src/_media/teaser_elegance-sociale.png rename to content/media/teaser_elegance-sociale.png diff --git a/_src/_media/text-shadow-1.png b/content/media/text-shadow-1.png similarity index 100% rename from _src/_media/text-shadow-1.png rename to content/media/text-shadow-1.png diff --git a/_src/_media/text-shadow-10.png b/content/media/text-shadow-10.png similarity index 100% rename from _src/_media/text-shadow-10.png rename to content/media/text-shadow-10.png diff --git a/_src/_media/text-shadow-11.png b/content/media/text-shadow-11.png similarity index 100% rename from _src/_media/text-shadow-11.png rename to content/media/text-shadow-11.png diff --git a/_src/_media/text-shadow-12.png b/content/media/text-shadow-12.png similarity index 100% rename from _src/_media/text-shadow-12.png rename to content/media/text-shadow-12.png diff --git a/_src/_media/text-shadow-13.png b/content/media/text-shadow-13.png similarity index 100% rename from _src/_media/text-shadow-13.png rename to content/media/text-shadow-13.png diff --git a/_src/_media/text-shadow-14.png b/content/media/text-shadow-14.png similarity index 100% rename from _src/_media/text-shadow-14.png rename to content/media/text-shadow-14.png diff --git a/_src/_media/text-shadow-15.png b/content/media/text-shadow-15.png similarity index 100% rename from _src/_media/text-shadow-15.png rename to content/media/text-shadow-15.png diff --git a/_src/_media/text-shadow-2.png b/content/media/text-shadow-2.png similarity index 100% rename from _src/_media/text-shadow-2.png rename to content/media/text-shadow-2.png diff --git a/_src/_media/text-shadow-3.png b/content/media/text-shadow-3.png similarity index 100% rename from _src/_media/text-shadow-3.png rename to content/media/text-shadow-3.png diff --git a/_src/_media/text-shadow-4.png b/content/media/text-shadow-4.png similarity index 100% rename from _src/_media/text-shadow-4.png rename to content/media/text-shadow-4.png diff --git a/_src/_media/text-shadow-5.png b/content/media/text-shadow-5.png similarity index 100% rename from _src/_media/text-shadow-5.png rename to content/media/text-shadow-5.png diff --git a/_src/_media/text-shadow-6.png b/content/media/text-shadow-6.png similarity index 100% rename from _src/_media/text-shadow-6.png rename to content/media/text-shadow-6.png diff --git a/_src/_media/text-shadow-7.png b/content/media/text-shadow-7.png similarity index 100% rename from _src/_media/text-shadow-7.png rename to content/media/text-shadow-7.png diff --git a/_src/_media/text-shadow-8.png b/content/media/text-shadow-8.png similarity index 100% rename from _src/_media/text-shadow-8.png rename to content/media/text-shadow-8.png diff --git a/_src/_media/text-shadow-9.png b/content/media/text-shadow-9.png similarity index 100% rename from _src/_media/text-shadow-9.png rename to content/media/text-shadow-9.png diff --git a/_src/_media/text-shadow-hack.png b/content/media/text-shadow-hack.png similarity index 100% rename from _src/_media/text-shadow-hack.png rename to content/media/text-shadow-hack.png diff --git a/_src/_media/textshadow-apple.png b/content/media/textshadow-apple.png similarity index 100% rename from _src/_media/textshadow-apple.png rename to content/media/textshadow-apple.png diff --git a/_src/_media/tiffen_aperture.jpg b/content/media/tiffen_aperture.jpg similarity index 100% rename from _src/_media/tiffen_aperture.jpg rename to content/media/tiffen_aperture.jpg diff --git a/_src/_media/timemachine97.png b/content/media/timemachine97.png similarity index 100% rename from _src/_media/timemachine97.png rename to content/media/timemachine97.png diff --git a/_src/_media/timemachinedisk97.png b/content/media/timemachinedisk97.png similarity index 100% rename from _src/_media/timemachinedisk97.png rename to content/media/timemachinedisk97.png diff --git a/_src/_media/tiny_tiny_demons.jpg b/content/media/tiny_tiny_demons.jpg similarity index 100% rename from _src/_media/tiny_tiny_demons.jpg rename to content/media/tiny_tiny_demons.jpg diff --git a/_src/_media/tm-sparsebundle.png b/content/media/tm-sparsebundle.png similarity index 100% rename from _src/_media/tm-sparsebundle.png rename to content/media/tm-sparsebundle.png diff --git a/_src/_media/tor-browser.png b/content/media/tor-browser.png similarity index 100% rename from _src/_media/tor-browser.png rename to content/media/tor-browser.png diff --git a/_src/_media/tor-osx-proxy.png b/content/media/tor-osx-proxy.png similarity index 100% rename from _src/_media/tor-osx-proxy.png rename to content/media/tor-osx-proxy.png diff --git a/_src/_media/tor-osx-terminal.png b/content/media/tor-osx-terminal.png similarity index 100% rename from _src/_media/tor-osx-terminal.png rename to content/media/tor-osx-terminal.png diff --git a/_src/_media/tutorial-icon.png b/content/media/tutorial-icon.png similarity index 100% rename from _src/_media/tutorial-icon.png rename to content/media/tutorial-icon.png diff --git a/_src/_media/tweetie_select_bubbles.zip b/content/media/tweetie_select_bubbles.zip similarity index 100% rename from _src/_media/tweetie_select_bubbles.zip rename to content/media/tweetie_select_bubbles.zip diff --git a/_src/_media/twitter-bird-kremalicious.png b/content/media/twitter-bird-kremalicious.png similarity index 100% rename from _src/_media/twitter-bird-kremalicious.png rename to content/media/twitter-bird-kremalicious.png diff --git a/_src/_media/twitter-crisp-by-kremalicious.zip b/content/media/twitter-crisp-by-kremalicious.zip similarity index 100% rename from _src/_media/twitter-crisp-by-kremalicious.zip rename to content/media/twitter-crisp-by-kremalicious.zip diff --git a/_src/_media/twitter-crisp-teaser.jpg b/content/media/twitter-crisp-teaser.jpg similarity index 100% rename from _src/_media/twitter-crisp-teaser.jpg rename to content/media/twitter-crisp-teaser.jpg diff --git a/_src/_media/twitter-crisp-teaser2.png b/content/media/twitter-crisp-teaser2.png similarity index 100% rename from _src/_media/twitter-crisp-teaser2.png rename to content/media/twitter-crisp-teaser2.png diff --git a/_src/_media/twitter.png b/content/media/twitter.png similarity index 100% rename from _src/_media/twitter.png rename to content/media/twitter.png diff --git a/_src/_media/typographic-diamond.jpg b/content/media/typographic-diamond.jpg similarity index 100% rename from _src/_media/typographic-diamond.jpg rename to content/media/typographic-diamond.jpg diff --git a/_src/_media/ubuntu_mac_feature.jpg b/content/media/ubuntu_mac_feature.jpg similarity index 100% rename from _src/_media/ubuntu_mac_feature.jpg rename to content/media/ubuntu_mac_feature.jpg diff --git a/_src/_media/ubuntuserver1.png b/content/media/ubuntuserver1.png similarity index 100% rename from _src/_media/ubuntuserver1.png rename to content/media/ubuntuserver1.png diff --git a/_src/_media/ubuntuserver2.png b/content/media/ubuntuserver2.png similarity index 100% rename from _src/_media/ubuntuserver2.png rename to content/media/ubuntuserver2.png diff --git a/_src/_media/ubuntuserver3.png b/content/media/ubuntuserver3.png similarity index 100% rename from _src/_media/ubuntuserver3.png rename to content/media/ubuntuserver3.png diff --git a/_src/_media/ubuntuserver4.png b/content/media/ubuntuserver4.png similarity index 100% rename from _src/_media/ubuntuserver4.png rename to content/media/ubuntuserver4.png diff --git a/_src/_media/ubuntuserver4a.png b/content/media/ubuntuserver4a.png similarity index 100% rename from _src/_media/ubuntuserver4a.png rename to content/media/ubuntuserver4a.png diff --git a/_src/_media/ubuntuserver5.png b/content/media/ubuntuserver5.png similarity index 100% rename from _src/_media/ubuntuserver5.png rename to content/media/ubuntuserver5.png diff --git a/_src/_media/ubuntuserver97.png b/content/media/ubuntuserver97.png similarity index 100% rename from _src/_media/ubuntuserver97.png rename to content/media/ubuntuserver97.png diff --git a/_src/_media/vcardsite-arefjdey.png b/content/media/vcardsite-arefjdey.png similarity index 100% rename from _src/_media/vcardsite-arefjdey.png rename to content/media/vcardsite-arefjdey.png diff --git a/_src/_media/vcardsite-laurent.png b/content/media/vcardsite-laurent.png similarity index 100% rename from _src/_media/vcardsite-laurent.png rename to content/media/vcardsite-laurent.png diff --git a/_src/_media/vcardsite-maximilian.png b/content/media/vcardsite-maximilian.png similarity index 100% rename from _src/_media/vcardsite-maximilian.png rename to content/media/vcardsite-maximilian.png diff --git a/_src/_media/vcardsite-mk.png b/content/media/vcardsite-mk.png similarity index 100% rename from _src/_media/vcardsite-mk.png rename to content/media/vcardsite-mk.png diff --git a/_src/_media/vcardsite-rogie.png b/content/media/vcardsite-rogie.png similarity index 100% rename from _src/_media/vcardsite-rogie.png rename to content/media/vcardsite-rogie.png diff --git a/_src/_media/vcardsite-tim.png b/content/media/vcardsite-tim.png similarity index 100% rename from _src/_media/vcardsite-tim.png rename to content/media/vcardsite-tim.png diff --git a/_src/_media/view_from_the_window_at_le_gras_nicephore_niepce.jpg b/content/media/view_from_the_window_at_le_gras_nicephore_niepce.jpg similarity index 100% rename from _src/_media/view_from_the_window_at_le_gras_nicephore_niepce.jpg rename to content/media/view_from_the_window_at_le_gras_nicephore_niepce.jpg diff --git a/_src/_media/viveza.png b/content/media/viveza.png similarity index 100% rename from _src/_media/viveza.png rename to content/media/viveza.png diff --git a/_src/_media/viveza_aperture_ui.jpg b/content/media/viveza_aperture_ui.jpg similarity index 100% rename from _src/_media/viveza_aperture_ui.jpg rename to content/media/viveza_aperture_ui.jpg diff --git a/_src/_media/watermark_1.png b/content/media/watermark_1.png similarity index 100% rename from _src/_media/watermark_1.png rename to content/media/watermark_1.png diff --git a/_src/_media/watermark_2.png b/content/media/watermark_2.png similarity index 100% rename from _src/_media/watermark_2.png rename to content/media/watermark_2.png diff --git a/_src/_media/watermark_3.png b/content/media/watermark_3.png similarity index 100% rename from _src/_media/watermark_3.png rename to content/media/watermark_3.png diff --git a/_src/_media/watermark_4.png b/content/media/watermark_4.png similarity index 100% rename from _src/_media/watermark_4.png rename to content/media/watermark_4.png diff --git a/_src/_media/watermark_5.png b/content/media/watermark_5.png similarity index 100% rename from _src/_media/watermark_5.png rename to content/media/watermark_5.png diff --git a/_src/_media/watermark_6.png b/content/media/watermark_6.png similarity index 100% rename from _src/_media/watermark_6.png rename to content/media/watermark_6.png diff --git a/_src/_media/watermark_7.png b/content/media/watermark_7.png similarity index 100% rename from _src/_media/watermark_7.png rename to content/media/watermark_7.png diff --git a/_src/_media/watermark_8.png b/content/media/watermark_8.png similarity index 100% rename from _src/_media/watermark_8.png rename to content/media/watermark_8.png diff --git a/_src/_media/watermark_9.png b/content/media/watermark_9.png similarity index 100% rename from _src/_media/watermark_9.png rename to content/media/watermark_9.png diff --git a/_src/_media/watermark_aperture.jpg b/content/media/watermark_aperture.jpg similarity index 100% rename from _src/_media/watermark_aperture.jpg rename to content/media/watermark_aperture.jpg diff --git a/_src/_media/watermark_example_by_kremalicious.zip b/content/media/watermark_example_by_kremalicious.zip similarity index 100% rename from _src/_media/watermark_example_by_kremalicious.zip rename to content/media/watermark_example_by_kremalicious.zip diff --git a/_src/_media/watermarkexample_final.jpg b/content/media/watermarkexample_final.jpg similarity index 100% rename from _src/_media/watermarkexample_final.jpg rename to content/media/watermarkexample_final.jpg diff --git a/_src/_media/watermarkexample_v2.jpg b/content/media/watermarkexample_v2.jpg similarity index 100% rename from _src/_media/watermarkexample_v2.jpg rename to content/media/watermarkexample_v2.jpg diff --git a/_src/_media/watermarkexample_v3.jpg b/content/media/watermarkexample_v3.jpg similarity index 100% rename from _src/_media/watermarkexample_v3.jpg rename to content/media/watermarkexample_v3.jpg diff --git a/_src/_media/watermarkexample_v4.jpg b/content/media/watermarkexample_v4.jpg similarity index 100% rename from _src/_media/watermarkexample_v4.jpg rename to content/media/watermarkexample_v4.jpg diff --git a/_src/_media/webinspector_1.png b/content/media/webinspector_1.png similarity index 100% rename from _src/_media/webinspector_1.png rename to content/media/webinspector_1.png diff --git a/_src/_media/webinspector_2.png b/content/media/webinspector_2.png similarity index 100% rename from _src/_media/webinspector_2.png rename to content/media/webinspector_2.png diff --git a/_src/_media/webinspector_3.png b/content/media/webinspector_3.png similarity index 100% rename from _src/_media/webinspector_3.png rename to content/media/webinspector_3.png diff --git a/_src/_media/webkit.png b/content/media/webkit.png similarity index 100% rename from _src/_media/webkit.png rename to content/media/webkit.png diff --git a/_src/_media/wordpress-logo.png b/content/media/wordpress-logo.png similarity index 100% rename from _src/_media/wordpress-logo.png rename to content/media/wordpress-logo.png diff --git a/_src/_media/wordpress-thumbnail-1.png b/content/media/wordpress-thumbnail-1.png similarity index 100% rename from _src/_media/wordpress-thumbnail-1.png rename to content/media/wordpress-thumbnail-1.png diff --git a/_src/_media/wordpress-thumbnail-2.png b/content/media/wordpress-thumbnail-2.png similarity index 100% rename from _src/_media/wordpress-thumbnail-2.png rename to content/media/wordpress-thumbnail-2.png diff --git a/_src/_media/wordpress-thumbnail-3.png b/content/media/wordpress-thumbnail-3.png similarity index 100% rename from _src/_media/wordpress-thumbnail-3.png rename to content/media/wordpress-thumbnail-3.png diff --git a/_src/_media/wordpress-thumbnail-4.png b/content/media/wordpress-thumbnail-4.png similarity index 100% rename from _src/_media/wordpress-thumbnail-4.png rename to content/media/wordpress-thumbnail-4.png diff --git a/_src/_media/wordpress-thumbnail-5.png b/content/media/wordpress-thumbnail-5.png similarity index 100% rename from _src/_media/wordpress-thumbnail-5.png rename to content/media/wordpress-thumbnail-5.png diff --git a/_src/_media/wp34_retina_icons.png b/content/media/wp34_retina_icons.png similarity index 100% rename from _src/_media/wp34_retina_icons.png rename to content/media/wp34_retina_icons.png diff --git a/_src/_media/xserve_screwed.png b/content/media/xserve_screwed.png similarity index 100% rename from _src/_media/xserve_screwed.png rename to content/media/xserve_screwed.png diff --git a/content/menu.yml b/content/menu.yml new file mode 100644 index 00000000..1fdba700 --- /dev/null +++ b/content/menu.yml @@ -0,0 +1,5 @@ +- title: Photos + link: /photos + +- title: Goodies + link: /goodies diff --git a/content/meta.yml b/content/meta.yml new file mode 100644 index 00000000..75529cc2 --- /dev/null +++ b/content/meta.yml @@ -0,0 +1,31 @@ +# +# Home: / +# Archive Page: /archive/ +# Pagination: /page/N/ +# Post: /post-slug/ +# RSS Feed: /feed/ +# + +# Basics +# -------------------- + +title: kremalicious +tagline: 'Blog of designer & developer Matthias Kretschmann' +url: https://kremalicious.com +author: + name: Matthias Kretschmann + email: m@kretschmann.io + uri: https://matthiaskretschmann.com + twitter: https://twitter.com/kremalicious + github: https://github.com/kremalicious + facebook: https://facebook.com/matthiaskretschmann + googleplus: https://plus.google.com/+MatthiasKretschmann + rss: /feed.xml + jsonfeed: /feed.json + avatar: ../src/images/avatar.jpg + bitcoin: 171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V + ether: "0x339dbC44d39bf1961E385ed0Ae88FC6069b87Ea1" + + +typekitID: msu4qap +itemsPerPage: 20 diff --git a/_src/_posts/2005-07-26-beaucarnea-leafs.md b/content/posts/2005-07-26-beaucarnea-leafs.md similarity index 71% rename from _src/_posts/2005-07-26-beaucarnea-leafs.md rename to content/posts/2005-07-26-beaucarnea-leafs.md index 6101d89c..e3b1bdb6 100644 --- a/_src/_posts/2005-07-26-beaucarnea-leafs.md +++ b/content/posts/2005-07-26-beaucarnea-leafs.md @@ -1,14 +1,11 @@ --- -layout: photo +type: photo title: Beaucarnea leafs -image: img_1820-Version-4.jpg +image: ../media/img_1820-Version-4.jpg author: Matthias Kretschmann date: 2005-07-26 11:44:49+00:00 -wordpress_id: 1982 -categories: -- photos --- [Photo on 500px](http://500px.com/photo/2661202) [Photo on flickr](http://www.flickr.com/photos/krema/6821597484) diff --git a/_src/_posts/2005-08-02-snail-on-a-leaf.md b/content/posts/2005-08-02-snail-on-a-leaf.md similarity index 73% rename from _src/_posts/2005-08-02-snail-on-a-leaf.md rename to content/posts/2005-08-02-snail-on-a-leaf.md index 867a980a..2efbab5c 100644 --- a/_src/_posts/2005-08-02-snail-on-a-leaf.md +++ b/content/posts/2005-08-02-snail-on-a-leaf.md @@ -1,14 +1,11 @@ --- -layout: photo +type: photo title: Snail on a leaf -image: schnecke_blatt.jpg +image: ../media/schnecke_blatt.jpg author: Matthias Kretschmann date: 2005-08-02 11:39:04+00:00 -wordpress_id: 1973 -categories: -- photos --- [Photo on flickr](http://www.flickr.com/photos/krema/6965150181/in/photostream/) [Photo on 500px](http://500px.com/photo/5629909) diff --git a/_src/_posts/2006-07-23-electricity.md b/content/posts/2006-07-23-electricity.md similarity index 71% rename from _src/_posts/2006-07-23-electricity.md rename to content/posts/2006-07-23-electricity.md index 87f0fb1e..f4065f01 100644 --- a/_src/_posts/2006-07-23-electricity.md +++ b/content/posts/2006-07-23-electricity.md @@ -1,14 +1,11 @@ --- -layout: photo +type: photo title: Electricity -image: MG_5885_2006-7-23.jpg +image: ../media/MG_5885_2006-7-23.jpg author: Matthias Kretschmann date: 2006-07-23 11:36:28+00:00 -wordpress_id: 1970 -categories: -- photos --- [Photo on 500px](http://500px.com/photo/5629510) [Photo on flickr](http://www.flickr.com/photos/krema/6965105709) diff --git a/_src/_posts/2006-07-23-floating-sky.md b/content/posts/2006-07-23-floating-sky.md similarity index 80% rename from _src/_posts/2006-07-23-floating-sky.md rename to content/posts/2006-07-23-floating-sky.md index 42983731..454426ae 100644 --- a/_src/_posts/2006-07-23-floating-sky.md +++ b/content/posts/2006-07-23-floating-sky.md @@ -1,14 +1,11 @@ --- -layout: photo +type: photo title: Floating Sky -image: floating-sky-1.jpg +image: ../media/floating-sky-1.jpg author: Matthias Kretschmann date: 2006-07-23 11:32:14+00:00 -wordpress_id: 1964 -categories: -- photos --- Combining of a lot of techniques: a long exposured HDR (3 bracketed shots) processed in Photomatix and finally polished in Photoshop. diff --git a/_src/_posts/2006-08-21-new-berlin-bridge.md b/content/posts/2006-08-21-new-berlin-bridge.md similarity index 66% rename from _src/_posts/2006-08-21-new-berlin-bridge.md rename to content/posts/2006-08-21-new-berlin-bridge.md index e9fef347..85741064 100644 --- a/_src/_posts/2006-08-21-new-berlin-bridge.md +++ b/content/posts/2006-08-21-new-berlin-bridge.md @@ -1,14 +1,11 @@ --- -layout: photo +type: photo title: New Berlin Bridge -image: berliner_bruecke1-HDR-16bit.jpg +image: ../media/berliner_bruecke1-HDR-16bit.jpg author: Matthias Kretschmann date: 2006-08-21 11:22:34+00:00 -wordpress_id: 1958 -categories: -- photos --- ... in Halle (Saale) diff --git a/_src/_posts/2006-09-16-wooden-windmill.md b/content/posts/2006-09-16-wooden-windmill.md similarity index 66% rename from _src/_posts/2006-09-16-wooden-windmill.md rename to content/posts/2006-09-16-wooden-windmill.md index 249106f0..20b55a11 100644 --- a/_src/_posts/2006-09-16-wooden-windmill.md +++ b/content/posts/2006-09-16-wooden-windmill.md @@ -1,14 +1,11 @@ --- -layout: photo +type: photo title: Wooden Windmill -image: muehle_suhlendorf_HDR_Tonemapped_16bit.jpg +image: ../media/muehle_suhlendorf_HDR_Tonemapped_16bit.jpg author: Matthias Kretschmann date: 2006-09-16 11:47:16+00:00 -wordpress_id: 1985 -categories: -- photos --- [Photo on 500px](http://500px.com/photo/2661412) [Photo on flickr](http://www.flickr.com/photos/krema/6818985878) diff --git a/_src/_posts/2006-10-22-german-chancellery.md b/content/posts/2006-10-22-german-chancellery.md similarity index 64% rename from _src/_posts/2006-10-22-german-chancellery.md rename to content/posts/2006-10-22-german-chancellery.md index 940a5991..29171c7e 100644 --- a/_src/_posts/2006-10-22-german-chancellery.md +++ b/content/posts/2006-10-22-german-chancellery.md @@ -1,14 +1,11 @@ --- -layout: photo +type: photo title: German Chancellery -image: bundeskanzleramt_01_HDR_tonemapped_16bit-Version-2.jpg +image: ../media/bundeskanzleramt_01_HDR_tonemapped_16bit-Version-2.jpg author: Matthias Kretschmann date: 2006-10-22 11:43:00+00:00 -wordpress_id: 1979 -categories: -- photos --- [Photo on 500px](http://500px.com/photo/5650652) [Photo on flickr](http://www.flickr.com/photos/krema/6967670015) diff --git a/_src/_posts/2007-02-10-macbook-abstract.md b/content/posts/2007-02-10-macbook-abstract.md similarity index 65% rename from _src/_posts/2007-02-10-macbook-abstract.md rename to content/posts/2007-02-10-macbook-abstract.md index 4b1c13c4..e0925237 100644 --- a/_src/_posts/2007-02-10-macbook-abstract.md +++ b/content/posts/2007-02-10-macbook-abstract.md @@ -1,14 +1,11 @@ --- -layout: photo +type: photo title: MacBook abstract -image: MG_9313_2007-02-10.jpg +image: ../media/MG_9313_2007-02-10.jpg author: Matthias Kretschmann date: 2007-02-10 12:34:39+00:00 -wordpress_id: 1967 -categories: -- photos --- [Photo on flickr](http://www.flickr.com/photos/krema/2495391492) diff --git a/_src/_posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md b/content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md similarity index 96% rename from _src/_posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md rename to content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md index 4b1d17df..efe06ee4 100644 --- a/_src/_posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md +++ b/content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md @@ -1,14 +1,13 @@ --- -layout: post +type: post title: Adjustment Tool Guide for Aperture 1.5.2 author: Matthias Kretschmann date: 2007-03-01 20:50:32+00:00 -wordpress_id: 1562 -categories: -- photography + tags: +- photography - aperture coinhive: true --- diff --git a/_src/_posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md b/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md similarity index 89% rename from _src/_posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md rename to content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md index f11a8734..ede51b9a 100644 --- a/_src/_posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md +++ b/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md @@ -1,15 +1,13 @@ --- -layout: post +type: post title: Finally... a universal scanner driver for the Canon CanoScan LiDE 500F for Intel Macs author: Matthias Kretschmann date: 2007-06-11 18:44:28+00:00 -wordpress_id: 1563 -category: photography + tags: - - tutorial - - osx - - macos -published: true +- photography +- tutorial +- macos redirect_from: - /2007/06/finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs/ @@ -24,25 +22,22 @@ So there were two choices for using the scanner on an Intel-Mac: installing the So I called the Canon Support two months ago but they could only say sorry and advertise for their new scanner LiDE 600f which has a new Universal-driver and so on. But it hasn't really any new functions. And spending 100$ or so just for a new driver? So what??! They really wanted me to replace my scanner, which isn't a year old. Damn Canon-Support! So I had to keep on searching on all Canon-websites and finally... - - # The solution... - [Canon Asia](http://www.canon-asia.com/) (Canon South & Southeast-Asia to be precise) was the solution! They really offer a universal-driver for the CanoScan LiDE 500f on their site which is from June 2007! You have to follow this link and choose your desired device: [http://www.canon-asia.com/index.jsp?fuseaction=support∏_type=scanner&country;=SG](http://www.canon-asia.com/index.jsp?fuseaction=support&prod_type=scanner&country=SG) After choosing the scanner in the dropdown-menu and clicking on "Drivers & Software" you will come to a popup-window where you can find the driver called "LiDE 500F Scanner Driver Ver. 11.2.4.0X (Mac OS X)" in the middle of the site: -![image](/media/canon1.png) +![image](../media/canon1.png) And after installing (and rebooting the system) you can use the scanner with Photoshop CS3 on Intel-Macs. The scanner appears in Photoshop under File > Import > CanoScan LiDE 500f. -![image](/media/canon2.png) +![image](../media/canon2.png) -![image](/media/canon3.png)And don't forget to take a look in the preferences-dialog in the scan-window to set your color-management under the tab "Color Settings" +![image](../media/canon3.png)And don't forget to take a look in the preferences-dialog in the scan-window to set your color-management under the tab "Color Settings" -![image](/media/canon4.png)Another important setting is enabling 16bit per channel scanning under the tab "Scan". +![image](../media/canon4.png)Another important setting is enabling 16bit per channel scanning under the tab "Scan". The only problem that remains is that Photoshop really uses 50% of my CPU-Power (2GHz Intel Core2Duo) just when the scan-window is open. But now after six months of waiting i can finally scan my analog photography in acceptable quality. Thanks to Canon for nothing! diff --git a/_src/_posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md b/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md similarity index 95% rename from _src/_posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md rename to content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md index 02dd9bdc..ee1b6a0a 100644 --- a/_src/_posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md +++ b/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md @@ -1,16 +1,17 @@ --- -layout: post +type: post title: How to quickly generate encrypted .htpasswd passwords author: Matthias Kretschmann date: 2008-02-26 23:24:17+00:00 -wordpress_id: 12 -category: design + +category: + tags: - - tutorial - - osx - - macos +- design +- tutorial +- macos coinhive: true diff --git a/_src/_posts/2008-03-30-launch-of-kremaliciouscom.md b/content/posts/2008-03-30-launch-of-kremaliciouscom.md similarity index 88% rename from _src/_posts/2008-03-30-launch-of-kremaliciouscom.md rename to content/posts/2008-03-30-launch-of-kremaliciouscom.md index 734b7bc2..08f26dd7 100644 --- a/_src/_posts/2008-03-30-launch-of-kremaliciouscom.md +++ b/content/posts/2008-03-30-launch-of-kremaliciouscom.md @@ -1,15 +1,14 @@ --- -layout: post +type: post title: Launch of kremalicious.com author: Matthias Kretschmann date: 2008-03-30 19:24:21+00:00 -wordpress_id: 14 -categories: -- personal + tags: - - wordpress +- personal +- wordpress --- A fresh start of my website under the new domain www.kremalicious.com and with [Wordpress](http://www.wordpress.org) under the hood. My former website under [www.jpberlin.de/krema](http://www.jpberlin.de/krema) will no longer be updated and will be deleted soon. I just implemented a few posts from the old weblog. diff --git a/_src/_posts/2008-03-31-love-the-parallax.md b/content/posts/2008-03-31-love-the-parallax.md similarity index 78% rename from _src/_posts/2008-03-31-love-the-parallax.md rename to content/posts/2008-03-31-love-the-parallax.md index 8a572513..610765f8 100644 --- a/_src/_posts/2008-03-31-love-the-parallax.md +++ b/content/posts/2008-03-31-love-the-parallax.md @@ -1,16 +1,18 @@ --- -layout: post +type: post title: Love the parallax author: Matthias Kretschmann date: 2008-03-31 20:54:45+00:00 -wordpress_id: 15 -categories: + +tags: - design --- -![parallax](/media/parallax.png)If you resize your browser window while you are browsing this website you can see the black polaroids in my header fly and move at different speed on three layers. Pretty cool, huh? +![parallax](../media/parallax.png)If you resize your browser window while you are browsing this website you can see the black polaroids in my header fly and move at different speed on three layers. Pretty cool, huh? + + I implemented the header effect of those flying black polaroids on kremalicious.com following the original idea by the folks of [clearleft](http://clearleft.com/) on [their silverback teaser page](http://www.silverbackapp.com/) diff --git a/_src/_posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md b/content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md similarity index 92% rename from _src/_posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md rename to content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md index c3031f91..d134bead 100644 --- a/_src/_posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md +++ b/content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md @@ -1,13 +1,13 @@ --- -layout: link +type: link title: 6 Web Design Tips from Leonardo da Vinci linkurl: http://designpepper.com/blog/6-web-design-tips-from-leonardo-da-vinci author: Matthias Kretschmann date: 2008-04-04 18:43:05+00:00 -wordpress_id: 24 -categories: + +tags: - design --- diff --git a/_src/_posts/2008-04-04-aperture-file-types.md b/content/posts/2008-04-04-aperture-file-types.md similarity index 55% rename from _src/_posts/2008-04-04-aperture-file-types.md rename to content/posts/2008-04-04-aperture-file-types.md index a9c0a845..5f01151b 100644 --- a/_src/_posts/2008-04-04-aperture-file-types.md +++ b/content/posts/2008-04-04-aperture-file-types.md @@ -1,14 +1,15 @@ --- -layout: post +type: post title: Aperture File Types -image: "Teaser-Aperture-File-Types.jpg" -download: aperturefiletypes_by_kremalicious.zip +image: ../media/Teaser-Aperture-File-Types.jpg +download: ../media/aperturefiletypes_by_kremalicious.zip author: Matthias Kretschmann date: 2008-04-04T01:55:54.000Z -wordpress_id: 21 -category: goodies + +category: coinhive: true tags: + - goodies - icon redirect_from: - "/new-goodies-aperture-file-types-icons/" @@ -19,14 +20,14 @@ redirect_from: These icons are free for your personal use and include icons for all file types Apple’s Aperture 2.0 can handle (.jpeg, .gif, .tiff, .png, .pdf, .psd, .arw, .cr2, .crw, .mos, .nef, .raf, .raw, .srw, .tif, .oly, .fff, .3fr, .dng, .mrw, .pef, .srf, .orf). - * Mac + Win + Linux + iContainer - * Leopard ready (512×512) - * custom 32px and 16px icons +- Mac + Win + Linux + iContainer +- Leopard ready (512×512) +- custom 32px and 16px icons -Get them from [the goodies-page](http://www.kremalicious.com/goodies/) and have fun. +Get them and have fun.

- Download + Download

-And don't forget to read my article about [how to change the generic image icons in Mac OS X Leopard](http://www.kremalicious.com/2008/04/changing-the-image-icons-in-mac-os-x-leopard/). +And don't forget to read my article about [how to change the generic image icons in Mac OS X Leopard](https://kremalicious.com/2008/04/changing-the-image-icons-in-mac-os-x-leopard/). diff --git a/_src/_posts/2008-04-04-london-police-afraid-of-photographers.md b/content/posts/2008-04-04-london-police-afraid-of-photographers.md similarity index 92% rename from _src/_posts/2008-04-04-london-police-afraid-of-photographers.md rename to content/posts/2008-04-04-london-police-afraid-of-photographers.md index 4be9efe4..eda9ffaf 100644 --- a/_src/_posts/2008-04-04-london-police-afraid-of-photographers.md +++ b/content/posts/2008-04-04-london-police-afraid-of-photographers.md @@ -1,18 +1,20 @@ --- -layout: post +type: post title: London police afraid of photographers author: Matthias Kretschmann date: 2008-04-04 19:01:09+00:00 -wordpress_id: 25 -categories: + +tags: - photography --- -> Thousands of people take photos every day. What if one of them seems odd? Terrorists use surveillance to help plan attacks, taking photos and making notes about security measures like the location of CCTV cameras. If you see someone doing that, we need to know. Let experienced officers decide what action to take. +![London cops](../media/londonpolice.jpg) -![London cops](/media/londonpolice.jpg) + + +> Thousands of people take photos every day. What if one of them seems odd? Terrorists use surveillance to help plan attacks, taking photos and making notes about security measures like the location of CCTV cameras. If you see someone doing that, we need to know. Let experienced officers decide what action to take. yeah, i'm guilty. i took several photos of cctv cameras: [At Agentur Ahron](http://www.agentur-ahron.de/bild_db/details.php?image_id=552) diff --git a/_src/_posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md b/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md similarity index 95% rename from _src/_posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md rename to content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md index 946d58f6..4947abbe 100644 --- a/_src/_posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md +++ b/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md @@ -1,15 +1,14 @@ --- -layout: link +type: link title: 'Mac OS X Leopard: Designer’s Guide to Icons' linkurl: http://www.smashingmagazine.com/2008/04/04/mac-os-x-leopard-designers-guide-to-icons author: Matthias Kretschmann date: 2008-04-04 10:47:23+00:00 -wordpress_id: 22 -category: design + tags: - - osx + - design - macos - icon --- diff --git a/_src/_posts/2008-04-05-first-principles-for-choosing-type.md b/content/posts/2008-04-05-first-principles-for-choosing-type.md similarity index 96% rename from _src/_posts/2008-04-05-first-principles-for-choosing-type.md rename to content/posts/2008-04-05-first-principles-for-choosing-type.md index 57672256..96e01567 100644 --- a/_src/_posts/2008-04-05-first-principles-for-choosing-type.md +++ b/content/posts/2008-04-05-first-principles-for-choosing-type.md @@ -1,15 +1,14 @@ --- -layout: link +type: link title: First principles for choosing the right typeface linkurl: http://ilovetypography.com/2008/04/04/on-choosing-type author: Matthias Kretschmann date: 2008-04-05 14:01:51+00:00 -wordpress_id: 26 -categories: -- design + tags: +- design - typography --- diff --git a/_src/_posts/2008-04-06-9-lesser-known-safari-features-worth-switching-for.md b/content/posts/2008-04-06-9-lesser-known-safari-features-worth-switching-for.md similarity index 92% rename from _src/_posts/2008-04-06-9-lesser-known-safari-features-worth-switching-for.md rename to content/posts/2008-04-06-9-lesser-known-safari-features-worth-switching-for.md index 545cbf83..5a406b9d 100644 --- a/_src/_posts/2008-04-06-9-lesser-known-safari-features-worth-switching-for.md +++ b/content/posts/2008-04-06-9-lesser-known-safari-features-worth-switching-for.md @@ -1,10 +1,12 @@ --- -layout: link +type: link title: 9 Lesser Known Safari Features linkurl: http://www.danielmiessler.com/blog/9-lesser-known-safari-features-worth-switching-for author: Matthias Kretschmann -category: design + +tags: +- design date: 2008-04-06 21:21:22+00:00 --- diff --git a/_src/_posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md b/content/posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md similarity index 73% rename from _src/_posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md rename to content/posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md index 6b211928..8e3636be 100644 --- a/_src/_posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md +++ b/content/posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md @@ -1,16 +1,20 @@ --- -layout: post +type: post title: Pulitzer Price Winners 2008 announced, various photographers awarded author: Matthias Kretschmann date: 2008-04-08 15:48:14+00:00 -wordpress_id: 31 -categories: + +tags: - photography --- -![Pulitzer Price](/media/pulitzer.png)The Columbia University has announced the winners for 2008 of the 92nd annual Pulitzer Price. The Pulitzer Price itself is often cited as the highest honor for american journalists. Among the various categories there are two winning entries for [Breaking News Photography](http://www.pulitzer.org/year/2008/breaking-news-photography) and [Feature Photography](http://www.pulitzer.org/year/2008/feature-photography). +![Pulitzer Price](../media/pulitzer.png) + +The Columbia University has announced the winners for 2008 of the 92nd annual Pulitzer Price. The Pulitzer Price itself is often cited as the highest honor for american journalists. Among the various categories there are two winning entries for [Breaking News Photography](http://www.pulitzer.org/year/2008/breaking-news-photography) and [Feature Photography](http://www.pulitzer.org/year/2008/feature-photography). + + In the Breaking News Photography the price was won by Adrees Latif of Reuters [for his picture of the japanese videographer Kenji Nagai shot down during riots in Myanmar in 2007](http://www.pulitzer.org/year/2008/breaking-news-photography/works/). diff --git a/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md b/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md new file mode 100644 index 00000000..338577c8 --- /dev/null +++ b/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md @@ -0,0 +1,50 @@ +--- +type: post + +title: 'HowTo: Changing the image icons in Mac OS X Leopard' +author: Matthias Kretschmann + +date: 2008-04-09 13:13:42+00:00 + +coinhive: true +tags: + - design + - tutorial + - 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... diff --git a/_src/_posts/2008-04-09-measuring-the-color-of-light.md b/content/posts/2008-04-09-measuring-the-color-of-light.md similarity index 97% rename from _src/_posts/2008-04-09-measuring-the-color-of-light.md rename to content/posts/2008-04-09-measuring-the-color-of-light.md index dc3343b6..7eea5202 100644 --- a/_src/_posts/2008-04-09-measuring-the-color-of-light.md +++ b/content/posts/2008-04-09-measuring-the-color-of-light.md @@ -1,13 +1,13 @@ --- -layout: link +type: link title: Measuring the Color of Light linkurl: http://duncandavidson.com/2008/04/kelvins-and-the-color-of-light.html author: Matthias Kretschmann date: 2008-04-09 17:44:23+00:00 -wordpress_id: 33 -categories: + +tags: - photography --- diff --git a/_src/_posts/2008-04-10-the-story-behind-the-pulitzer-picture.md b/content/posts/2008-04-10-the-story-behind-the-pulitzer-picture.md similarity index 96% rename from _src/_posts/2008-04-10-the-story-behind-the-pulitzer-picture.md rename to content/posts/2008-04-10-the-story-behind-the-pulitzer-picture.md index edea869f..97149287 100644 --- a/_src/_posts/2008-04-10-the-story-behind-the-pulitzer-picture.md +++ b/content/posts/2008-04-10-the-story-behind-the-pulitzer-picture.md @@ -1,13 +1,13 @@ --- -layout: link +type: link title: The story behind the Pulitzer picture linkurl: http://blogs.reuters.com/photographers-blog/2008/04/07/the-story-behind-the-pictures/ author: Matthias Kretschmann date: 2008-04-10 13:16:47+00:00 -wordpress_id: 34 -categories: + +tags: - photography --- diff --git a/_src/_posts/2008-04-11-photographers-strike-back-in-uk.md b/content/posts/2008-04-11-photographers-strike-back-in-uk.md similarity index 67% rename from _src/_posts/2008-04-11-photographers-strike-back-in-uk.md rename to content/posts/2008-04-11-photographers-strike-back-in-uk.md index 907689d1..d7ce9cba 100644 --- a/_src/_posts/2008-04-11-photographers-strike-back-in-uk.md +++ b/content/posts/2008-04-11-photographers-strike-back-in-uk.md @@ -1,17 +1,19 @@ --- -layout: link +type: link title: Photographers strike back in UK linkurl: http://www.pressgazette.co.uk/node/40875 author: Matthias Kretschmann date: 2008-04-11 14:16:51+00:00 -wordpress_id: 36 -categories: + +tags: - photography --- -[![London police afraid of photographers](/media/londonpolice.jpg)](/media/londonpolice.jpg)Remember [the campaign of the London police](http://www.kremalicious.com/2008/04/london-police-afraid-of-photographers/) calling all people to regard photographers as potential terrorists? +[![London police afraid of photographers](../media/londonpolice.jpg)](../media/londonpolice.jpg) + +Remember [the campaign of the London police](http://www.kremalicious.com/2008/04/london-police-afraid-of-photographers/) calling all people to regard photographers as potential terrorists? Now the [PressGazette reports](http://www.pressgazette.co.uk/node/40875) that diff --git a/_src/_posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md b/content/posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md similarity index 53% rename from _src/_posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md rename to content/posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md index ecc10fb4..3c73428e 100644 --- a/_src/_posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md +++ b/content/posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md @@ -1,18 +1,22 @@ --- -layout: post +type: post title: New automation helper for Apple's Aperture released author: Matthias Kretschmann date: 2008-04-14 13:51:39+00:00 -wordpress_id: 37 -category: photography + coinhive: true tags: +- photography - aperture --- -![Aperture Assistent](/media/apassis.png)Panoramic photographer [Ian Wood](http://www.ianjameswood.co.uk/) has released an automation helper for Apple's Aperture called [Aperture Assistant](http://aperture-assistant.com) as a first beta version (build 49). Aperture Assistent allows you to setup and automate complex tasks for Apple's Aperture beyond the Apple delivered Automator actions in Mac OS X. The setup of these workflows is as easy as dragging around visual flowcharts. +![Aperture Assistent](../media/apassis.png) + +Panoramic photographer [Ian Wood](http://www.ianjameswood.co.uk/) has released an automation helper for Apple's Aperture called [Aperture Assistant](http://aperture-assistant.com) as a first beta version (build 49). Aperture Assistent allows you to setup and automate complex tasks for Apple's Aperture beyond the Apple delivered Automator actions in Mac OS X. The setup of these workflows is as easy as dragging around visual flowcharts. + + Although the interface looks and feels a bit buggy (dude, it's a beta!) it looks very promising. diff --git a/_src/_posts/2008-04-15-webkit-team-introduced-css-based-gradients.md b/content/posts/2008-04-15-webkit-team-introduced-css-based-gradients.md similarity index 77% rename from _src/_posts/2008-04-15-webkit-team-introduced-css-based-gradients.md rename to content/posts/2008-04-15-webkit-team-introduced-css-based-gradients.md index af27b5b4..0cb03931 100644 --- a/_src/_posts/2008-04-15-webkit-team-introduced-css-based-gradients.md +++ b/content/posts/2008-04-15-webkit-team-introduced-css-based-gradients.md @@ -1,18 +1,21 @@ --- -layout: post +type: post title: WebKit team introduces CSS-based gradients author: Matthias Kretschmann date: 2008-04-15 17:36:34+00:00 -wordpress_id: 38 -categories: -- design + tags: +- design - css --- -![WebKit](/media/webkit.png)Writing right now on a longer article about text-shadow and it's implementation in WebKit, the rendering engine which powers Safari and Konqueror. But now this exciting news popped up from Surfin' Safari, the blog of the WebKit development team: +![WebKit](../media/webkit.png) + +Writing right now on a longer article about text-shadow and it's implementation in WebKit, the rendering engine which powers Safari and Konqueror. But now this exciting news popped up from Surfin' Safari, the blog of the WebKit development team: + + > WebKit now supports gradients specified in CSS. There are two types of gradients: linear gradients and radial gradients. diff --git a/_src/_posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md b/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md similarity index 80% rename from _src/_posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md rename to content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md index 721d3251..8a61d857 100644 --- a/_src/_posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md +++ b/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md @@ -1,15 +1,16 @@ --- -layout: post +type: post title: 'Text-Shadow Exposed: Make cool and clever text effects with css text-shadow' author: Matthias Kretschmann -date: 2008-04-17 01:32:13+00:00 -wordpress_id: 39 -category: design +date: "2008-04-17 01:32:13+00:00" + +category: tags: - - css - - tutorial + - design + - css + - tutorial coinhive: true @@ -17,7 +18,9 @@ redirect_from: - /2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/ --- -![CSS](/media/css.png)The aim of this article is to give you a quick introduction of a css property named text-shadow which was first included in CSS2 (but it's not implemented in all browsers yet). Nevertheless you can make some cool effects with it, which could only be done before by photoshopping text and rendering it as an image. +![CSS](../media/css.png)The aim of this article is to give you a quick introduction of a css property named text-shadow which was first included in CSS2 (but it's not implemented in all browsers yet). Nevertheless you can make some cool effects with it, which could only be done before by photoshopping text and rendering it as an image. + + Because it's included in Safari since version 1.1(!) Mac users should be aware of various effects done by this property. In fact, most companys and persons with mac users as their main target audience use this effect on their websites. @@ -25,30 +28,28 @@ This article describes how text-shadow works, what you can do with it and which Here's an overview of the headlines in this article. As you can see it's rather complex and long. Be sure to get a delicious fresh cup of coffee or tea before reading on: - 1. What text-shadow is good for - 2. Which browsers support it - 3. Cross-browser compatibility - 4. How does it work and how to use it - 5. Examples with code & demos - 6. Hack: Safari Text Rendering - 7. More articles and resources - +1. What text-shadow is good for +2. Which browsers support it +3. Cross-browser compatibility +4. How does it work and how to use it +5. Examples with code & demos +6. Hack: Safari Text Rendering +7. More articles and resources ## 1. What text-shadow is good for -![kremalicious navbar](/media/navbar-kremalicious.png) +![kremalicious navbar](../media/navbar-kremalicious.png) subtle glow in my navigation The main goal of this property is to give designers and css coders a tool to make text effects, which could only be done before by rendering text as images with all the side effects. Text rendered as an image isn't searchable and therefore very undelicious for search engines. Another side effect is the fact that images can be way more bigger as one small line of code in terms of file size. As you may know most css-files, which contain the whole layout of a website, are smaller than one image on most websites. So it's really clever to use a css function instead of images for reducing unnecessary traffic. -![text-shadow used on apple.com](/media/textshadow-apple.png) +![text-shadow used on apple.com](../media/textshadow-apple.png) text-shadow on Apple.com Utilizing text-shadow to simulate engraved or stenciled text is widely used on websites. Apple did it everywhere in Mac OS X not just since Leopard (just look at the titlebars). So if you design a website for Mac users you can increase the sexyness of your website, because this particular usage of text-shadow integrates very well with the overall look of Mac OS X. I will explain how to achieve this engraved-text-on-metal effect later on in this article. - - ## 2. Which browsers support it? + In fact, text-shadow is not a new property since it was first defined with [CSS2 in 1998](http://www.w3.org/TR/REC-CSS2/text.html#text-shadow-props) but it was just implemented by the KHTML/WebKit-folks. But it's available in [Safari](http://www.apple.com/safari/) since version 1.1 (2003), in [Konqueror](http://www.konqueror.org/features/browser.php) since version 3.4 (I believe, not sure) and [Opera](http://www.opera.com/) 9.5. Furthermore it's also supported by [Firefox](http://www.mozilla.com/en-US/firefox/firefox.html) 3.1/3.5 and finally [Google Chrome](http://www.google.com/chrome) 2 adds full support for the text-shadow property after they had stripped this from the first version of Chrome. On the Mac platform WebKit is also used in various other programs with a browser included like [Coda](http://www.panic.com/coda/) from Panic, [CSSedit](http://www.macrabbit.com/cssedit/) from MacRabbit or [NetNewsWire](http://www.newsgator.com/NetNewsWire.aspx) from NewsGator. Also every browser which is powered by the WebKit engine is able to render the text-shadow property, like [Shiira](http://shiira.jp/en.php), [OmniWeb](http://www.omnigroup.com/applications/omniweb/) or [Epiphany](http://www.gnome.org/projects/epiphany/) which are either for Mac or Linux. @@ -57,12 +58,9 @@ But with Safari 3.1, the beta release of Opera 9.5, Firefox 3.1 and Google Chrom But wait, regarding Safari on Mac OS X there's one more (bad) thing to remember. The Mac OS X 10.5.2 update [resulted in minor changes of the WebKit text-shadow rendering](http://www.islayer.com/blog/?p=255). It seems that with this update text-shadow is finally rendered correctly as WebKit added one extra pixel to the shadow offset on 10.4.11 and 10.5.1. - - ## 3. Any chance of cross-browser compatibility? - -So the major browser Internet Explorer doesn't support it yet but just don't count on Internet Explorer. I guess they are happy with [coding their own non-standard version of CSS for IE9](http://blogs.msdn.com/ie/archive/2008/04/01/announcing-css-2012.aspx) and making shadows with those [DXImageTransform.Microsoft.Shadow-stuff](http://msdn2.microsoft.com/en-us/library/ms532985(VS.85).aspx) which in the end just [looks horrible](http://kilianvalkhof.com/2008/design/almost-cross-browser-text-shadow/). So even IE 9 won't have it included. +So the major browser Internet Explorer doesn't support it yet but just don't count on Internet Explorer. I guess they are happy with [coding their own non-standard version of CSS for IE9](http://blogs.msdn.com/ie/archive/2008/04/01/announcing-css-2012.aspx) and making shadows with those [DXImageTransform.Microsoft.Shadow-stuff]() which in the end just [looks horrible](http://kilianvalkhof.com/2008/design/almost-cross-browser-text-shadow/). So even IE 9 won't have it included. But with Firefox 3.1 including text-shadow all major browsers except Internet Explorer are now supporting it. So you can start using it all around your next projects just with a lot of other techniques which in the end aren't available in Internet Explorer. @@ -70,24 +68,22 @@ One cross-browser trick would be to use conditional tags and serve Internet Expl Now that you're aware of it's compatibility with the various browsers we can take a look at the syntax of the text-shadow property. - - ## 4. How does it work and how to use it - - When defined in a css-stylesheet the property syntax should look like this: ```css -p { text-shadow: 1px 1px 1px #000; } +p { + text-shadow: 1px 1px 1px #000; +} ``` The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow: -1. value = The X-ccordinate -2. value = The Y-coordinate -3. value = The blur radius -4. value = The color of the shadow +1. value = The X-ccordinate +2. value = The Y-coordinate +3. value = The blur radius +4. value = The color of the shadow Using positive numbers as the first two values ends up with placing the shadow to the right of the text horizontically (first value) and placing the shadow below the text vertically (second value). @@ -96,7 +92,9 @@ The third value, the blur radius, is an optional value which can be specified bu Alternatiely, for WebKit-based browsers, you can use rgba values instead of hex code colors as the fourth value. The last number stands for transparency and can be set between 0.0 and 1.0 so you can make the text-shadow more subtle: ```css -p { text-shadow: 1px 1px 1px rgba(255,255,255, .5); } +p { + text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5); +} ``` Of course the effects done by this property often depend on the colors of your text and your background, so let's take a look at what we can do with all those combinations. @@ -105,12 +103,8 @@ Of course the effects done by this property often depend on the colors of your t I've made up some examples to show you the possibilities of this css property. Every example code follows a text example which is rendered by your browser. Below that you'll find a screenshot of the described effect rendered in Safari 3.1 on Mac OS X 10.5.2 so the non-WebKit and non-Opera Internet Explorer users can see the effect. - - ## 5.1 Simple drop shadow - - With the following lines of css code you get black text on white background with a smooth black drop shadow.The shadow is placed 2 pixels right and 2 pixels below the text and has a blur radius of 3: ```css @@ -121,7 +115,7 @@ text-shadow: 2px 2px 3px #000;

I'm a text with a smooth shadow

-![image](/media/text-shadow-1.png) +![image](../media/text-shadow-1.png) Or you can make it not so smooth but also good looking by ignoring the blur radius and setting a lighter color for the shadow: @@ -133,7 +127,7 @@ text-shadow: 2px 2px #000;

I'm a text with no smooth shadow

-![image](/media/text-shadow-2.png) +![image](../media/text-shadow-2.png) Using some negative values you can make the shadow look like it's lightsource is placed below the text: @@ -147,7 +141,7 @@ text-shadow: 2px -2px 3px #000; background: #fff; text-shadow: 2px -2px 3px #000;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm a text with a smooth shadow

-![image](/media/text-shadow-3.png) +![image](../media/text-shadow-3.png) Of course you can make it more funky and horrible to read: @@ -161,7 +155,7 @@ text-shadow: 2px 2px 2px #ff3300; background: #fff; text-shadow: 2px 2px 2px #ff3300;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm funky colored text

-![image](/media/text-shadow-4.png) +![image](../media/text-shadow-4.png) ## 5.2 Apple style (engraved text on metal) @@ -177,7 +171,7 @@ text-shadow: 0px 1px 1px #fff; background: #666; text-shadow: 0px 1px 1px #fff;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:bold;padding:0.3em">I'm engraved text

-![image](/media/text-shadow-5.png) +![image](../media/text-shadow-5.png) This even works the other way around on a black background with grey text by adjusting only the color values: @@ -191,7 +185,7 @@ text-shadow: 0px 1px 0px #ccc; background: #000; text-shadow: 0px 1px 0px #ccc;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:bold;padding:0.3em">I'm engraved text on black

-![image](/media/text-shadow-6.png) +![image](../media/text-shadow-6.png) Or you can make this one which looks like the text stands out from the background: @@ -205,7 +199,7 @@ text-shadow: 0px 1px 1px #000; background: #666; text-shadow: 0px 1px 1px #000;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm on top of the background

-![image](/media/text-shadow-7.png) +![image](../media/text-shadow-7.png) ## 5.3 Make your text glow @@ -221,7 +215,7 @@ text-shadow: 1px 1px 6px #fff; background: #000; text-shadow: 1px 1px 6px #fff;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm subtle glowing text

-![image](/media/text-shadow-8.png) +![image](../media/text-shadow-8.png) You can also make the whole text blurry by using the same color for text and shadow with no offset: @@ -235,7 +229,7 @@ text-shadow: 0px 0px 3px #fff; background: #666; text-shadow: 0px 0px 3px #fff;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm also glowing but more blurry

-![image](/media/text-shadow-9.png) +![image](../media/text-shadow-9.png) We can make it quite mysterious by using the same color for text and background and make the text just visible through text-shadow. Remember that the same color for text and background can be bad for usability...: @@ -249,7 +243,7 @@ text-shadow: 1px 1px 4px #fff; background: #000; text-shadow: 1px 1px 4px #fff;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm pretty mysterious looking text

-![image](/media/text-shadow-10.png) +![image](../media/text-shadow-10.png) Or the other way around to make it look light and... milky: @@ -263,7 +257,7 @@ text-shadow: 1px 1px 4px#000; background: #fff; text-shadow: 1px 1px 4px#000;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm pretty milky looking text

-![image](/media/text-shadow-11.png) +![image](../media/text-shadow-11.png) ## 5.4 Duplicate your text @@ -279,7 +273,7 @@ text-shadow: 0px 20px #000; background: #fff; text-shadow: 0px 20px #000;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">Which line is text, which is shadow?

-![image](/media/text-shadow-13.png) +![image](../media/text-shadow-13.png) ## 5.5 Multiple shadows @@ -288,22 +282,23 @@ Sadly Safari 3 isn't able to render more than one shadow on one element. It just ```css color: #000; background: #000; -text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20; +text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px + #f80, 2px -18px 18px #f20; ```

Isn't this awesome?

-![image](/media/text-shadow-12.png) +![image](../media/text-shadow-12.png) ## 6. Hack: Avoid jagged light-on-dark text rendering in Safari -[![sub-pixel rendering](/media/text-shadow-15.png)](/media/text-shadow-hack.png) +[![sub-pixel rendering](../media/text-shadow-15.png)](../media/text-shadow-hack.png) More than a hack than an effect but it addresses the poor light-on-dark text rendering in Safari. This is caused by the [sub-pixel rendering](http://en.wikipedia.org/wiki/Subpixel_rendering) of OS X's Quartz 2D layer as a part of the Core Graphics framework. Also Safari 3.1 on Windows uses sub pixel rendering instead of plain anti-aliasing. -[![anti-alias rendering through text-shadow](/media/text-shadow-14.png)](/media/text-shadow-hack.png) +[![anti-alias rendering through text-shadow](../media/text-shadow-14.png)](../media/text-shadow-hack.png) In most situations this improves the legibility and smoothness of all 2D-text rendered throughout the Mac OS X interface which makes everything look so gorgeous. But it has some [rough problems with light text on dark backgrounds in Safari](http://equinox-of-insanity.com/2007/08/osx-text-rendering/) This problem doesn't exist when using anti-aliasing. @@ -324,29 +319,29 @@ But fear not. Rogie King already came up with a solution for this which you can ## 7. More articles and resources - * [Description of the text-shadow property](http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows) in: [CSS3 W3C Candidate Recommendation from 14 May 2003](http://www.w3.org/TR/2003/CR-css3-text-20030514) -text-shadow in-depth +- [Description of the text-shadow property](http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows) in: [CSS3 W3C Candidate Recommendation from 14 May 2003](http://www.w3.org/TR/2003/CR-css3-text-20030514) + text-shadow in-depth - * [Cross-browser text-shadow by Kilian Valkhof](http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/) -Nice article about trying to make text-shadow cross-browser compatible +- [Cross-browser text-shadow by Kilian Valkhof](http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/) + Nice article about trying to make text-shadow cross-browser compatible - * [CSS Drop Shadows on Design Meme](http://www.designmeme.com/articles/dropshadows/) -An easy css-hack for cross-browser compatibilty (but without a blur radius) +- [CSS Drop Shadows on Design Meme](http://www.designmeme.com/articles/dropshadows/) + An easy css-hack for cross-browser compatibilty (but without a blur radius) - * [text-shadow hack for firefox on klog](http://verens.com/archives/2005/02/28/text-shadow/) -Another hack just for Gecko-based browsers by utilizing javascript +- [text-shadow hack for firefox on klog](http://verens.com/archives/2005/02/28/text-shadow/) + Another hack just for Gecko-based browsers by utilizing javascript - * [Firefox plugin "A Text Shadow"](http://piro.sakura.ne.jp/xul/_textshadow.html.en) -A xpi-plugin providing support for text-shadow in Firefox written by Shimoda Hiroshi +- [Firefox plugin "A Text Shadow"](http://piro.sakura.ne.jp/xul/_textshadow.html.en) + A xpi-plugin providing support for text-shadow in Firefox written by Shimoda Hiroshi - * [Animating css text-shadow with javascript](http://maettig.com/code/css/text-shadow.html) -The author animates multiple text-shadows with javascript, really incredible. Also various nice examples on this page. +- [Animating css text-shadow with javascript](http://maettig.com/code/css/text-shadow.html) + The author animates multiple text-shadows with javascript, really incredible. Also various nice examples on this page. - * [Text-Shadow in Safari 1.1](http://whatdoiknow.org/archives/001305.shtml) -Propably the oldest text-shadow demo originally made for Safari 1.1 +- [Text-Shadow in Safari 1.1](http://whatdoiknow.org/archives/001305.shtml) + Propably the oldest text-shadow demo originally made for Safari 1.1 - * [10.5.2 brings WebKit text-shadow rendering changes](http://www.islayer.com/blog/?p=255) -Blog entry on islayer.com about different text-shadow rendering across different Mac OS X versions +- [10.5.2 brings WebKit text-shadow rendering changes](http://www.islayer.com/blog/?p=255) + Blog entry on islayer.com about different text-shadow rendering across different Mac OS X versions - * [CSS3 preview on css3.info](http://www.css3.info/preview/) -"Everything you need to know about CSS3" - get excited before CSS3 becomes final +- [CSS3 preview on css3.info](http://www.css3.info/preview/) + "Everything you need to know about CSS3" - get excited before CSS3 becomes final diff --git a/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md b/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md new file mode 100644 index 00000000..2a38b0d1 --- /dev/null +++ b/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md @@ -0,0 +1,20 @@ +--- +type: post + +title: Apple releases plugin-SDK for Aperture 2.1 +author: Matthias Kretschmann + +date: 2008-04-22 05:58:41+00:00 + +tags: +- photography +- 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. diff --git a/_src/_posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md b/content/posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md similarity index 54% rename from _src/_posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md rename to content/posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md index bc8eeadc..666f9eab 100644 --- a/_src/_posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md +++ b/content/posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md @@ -1,19 +1,19 @@ --- -layout: post +type: post title: 'More awesomeness from the WebKit team: CSS Masks' author: Matthias Kretschmann date: 2008-04-28 12:53:18+00:00 -wordpress_id: 44 -categories: - - design tags: - - css + - design + - css --- -![WebKit](/media/webkit.png)They won't stop with their cutting edge love. After having [text-shadow](http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/) implemented since many years and having a bunch of other cool stuff implemented like CSS gradients or CSS box-shadow the WebKit team freshly announced a new cool feature: CSS alpha masks. +![WebKit](../media/webkit.png)They won't stop with their cutting edge love. After having [text-shadow](http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/) implemented since many years and having a bunch of other cool stuff implemented like CSS gradients or CSS box-shadow the WebKit team freshly announced a new cool feature: CSS alpha masks. + + From the Surfin' Safari Blog: diff --git a/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md b/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md new file mode 100644 index 00000000..0c26c46f --- /dev/null +++ b/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md @@ -0,0 +1,67 @@ +--- +type: post + +title: Using the CanoScan LiDE 500F scanner with Mac OS X Leopard +author: Matthias Kretschmann +image: ../media/canoscanlide500f.jpg + +date: 2008-05-04 16:04:48+00:00 + +coinhive: true +tags: + - photography + - tutorial + - macos +--- + +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. diff --git a/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md b/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md new file mode 100644 index 00000000..0087aa5a --- /dev/null +++ b/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md @@ -0,0 +1,38 @@ +--- +type: post + +title: Scan images directly into Apple Aperture +author: Matthias Kretschmann +image: ../media/aperturescan.png + +date: 2008-05-05 04:15:11+00:00 + +coinhive: true +tags: + - photography + - aperture + - tutorial + - macos +--- + +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... diff --git a/_src/_posts/2008-05-07-high-quality-watermarks-with-aperture.md b/content/posts/2008-05-07-high-quality-watermarks-with-aperture.md similarity index 88% rename from _src/_posts/2008-05-07-high-quality-watermarks-with-aperture.md rename to content/posts/2008-05-07-high-quality-watermarks-with-aperture.md index e0019992..cccbaac1 100644 --- a/_src/_posts/2008-05-07-high-quality-watermarks-with-aperture.md +++ b/content/posts/2008-05-07-high-quality-watermarks-with-aperture.md @@ -1,15 +1,14 @@ --- -layout: post +type: post title: 'HowTo: Use high-quality watermarks in your images with Aperture 2.1' author: Matthias Kretschmann -image: watermark_aperture.jpg +image: ../media/watermark_aperture.jpg date: 2008-05-07 03:27:25+00:00 -wordpress_id: 48 -categories: -- photography + tags: +- photography - aperture - tutorial @@ -23,42 +22,40 @@ Since version 1.0 Aperture is able to render images on export with a graphic ove The steps for this magic involves 4 simple steps: - 1. Create a watermark image in Photoshop - 2. Render different sizes of the watermark image - 3. Define the watermark image inside an export preset in Aperture - 4. Make even more... - +1. Create a watermark image in Photoshop +2. Render different sizes of the watermark image +3. Define the watermark image inside an export preset in Aperture +4. Make even more... ## 1. Create a watermark image in Photoshop - Open up Photoshop and load a photo taken with your camera in full size (pixel size of course, not file size). If you have photos with different pixel sizes you should use a photo with the biggest pixel size you're going to export from your Aperture library. To illustrate the process I will use a picture taken by me. Create a new layer on top of the background layer and call it "watermark" or anything you like. -![Aperture Watermark example 1](/media/watermark_1.png) +![Aperture Watermark example 1](../media/watermark_1.png) If you want it simple you can start with the Text tool right now but I prefer to add a background so our text is always readable no matter if the photo is dark or light. With the select tool draw a rectangle on the bottom of the image. Then select the Paintbucket tool, chose a foreground color of white and click on the selection in the image so the rectangle selection is filled with white. -![Aperture Watermark example 2](/media/watermark_2.png) +![Aperture Watermark example 2](../media/watermark_2.png) Add some inner shadow by double clicking on the watermark layer and adjusting the values for inner shadow (just have a german speaking Photoshop version while writing this article but i guess you can identify the values visually): -![Aperture Watermark example 3](/media/watermark_3.png) +![Aperture Watermark example 3](../media/watermark_3.png) Adjust the Fill of the layer to 40%. This will just make the fill color transparent while the opacity of the layer styles are preserved. You should end up with something like this: -![Aperture Watermark example 4](/media/watermark_4.png) +![Aperture Watermark example 4](../media/watermark_4.png) Next select the Text tool, chose a black color in the tool preferences and click on the image. A new layer will be automatically created and you can type in the text you want to use in your watermark. For this tutorial I just used the copyright sign (opt + g) with a year and the word "Watermark". I used Helvetica Neue Ultra Light as font face. -Place the text at the bottom right and be sure to add some space to the right and to the bottom. Next set the layer mode of the text layer to "Overlay". Finally I've added a logo and set it's opacity to 80%. So now you should end up with something like this: +Place the text at the bottom right and be sure to add some space to the right and to the bottom. Next set the layer mode of the text layer to "Overlay". Finally I've added a logo and set it's opacity to 80%. So now you should end up with something like this: -![Aperture Watermark example 5](/media/watermark_5.png) +![Aperture Watermark example 5](../media/watermark_5.png) Now delete the Background layer. You should see the transparent grid. Next chose Image > Trim from the menu bar, select transparent pixels and click ok. The result should look like this: -![Aperture Watermark example 6](/media/watermark_6.png) +![Aperture Watermark example 6](../media/watermark_6.png) Although Aperture is able to render all layers even with their layer styles correctly it has some problems with text layers and their styles. So to be on the save side you should flatten the layers by selecting them all (with command + click on the name of the layers) and pressing command + e which will merge all layers into one. After this step you won't be able to edit your layers so maybe you want to save your document BEFORE this step as an editable psd template file. Be sure that the background of your canvas remains transparent. @@ -74,37 +71,27 @@ If you want to have full control and the highest quality you should repeat the a Now you can close Photoshop or let it open if you have enough RAM. - - ## 3. Define the watermark image inside an export preset - - Now we're going to make the watermark image part of an export preset inside Aperture. Open up Aperture and chose Aperture > Presets > Image Export from the menubar. In the Export Presets dialogue add a new preset by clicking on the little plus sign at the bottom left of the dialogue and give it a name: -![Aperture Watermark example 7](/media/watermark_7.png) - - +![Aperture Watermark example 7](../media/watermark_7.png) Now adjust your desired values before the "Show Watermark" part at the right. After you've finished click on the checkbox beside "Show Watermark" to activate watermarks for this export preset. For our example we will set the position of the image to Lower Right. Either drag your freshly created watermark.psd onto the drop field or chose it via Aperture's file inspector by clicking on the Choose Image button. The watermark image is automatically copied over to the Library folder of the user under /Application Support/Aperture/WatermarkImages. Just keep that in mind when you want to update your watermark images. - - As said before you can adjust the opacity of your watermark image but since we have included some different transparencies in our file we have to set it to an opacity of 1,0. Finally you can activate the "Scale watermark" checkbox if you want to use your big sized watermark image once and let Aperture scale it down for you. If you have created different sized watermark images you want to leave this deactivated and create a unique export preset for every size you want to export to. In this example we end up with those values: -![Aperture Watermark example 8](/media/watermark_8.png) - - +![Aperture Watermark example 8](../media/watermark_8.png) If you're done just click OK and select an image you want to export. Select File > Export > Versions from the menubar or press shift + command + e. In the Aperture file dialogue chose your destination and select your freshly created preset from the Export Preset dropdown menu and click OK. -![Aperture Watermark example 9](/media/watermark_9.png) +![Aperture Watermark example 9](../media/watermark_9.png) Your image is rendered in the background and you should end up with something like this. Click on it to zoom to the full sized version or open the link to the full image in a new browser window. (the full view image is scaled down with a 1024x1024px preset): -![Aperture Watermark example final](/media/watermarkexample_final.jpg) +![Aperture Watermark example final](../media/watermarkexample_final.jpg) You can also have a look at the psd file by downloading it here: @@ -116,11 +103,11 @@ Here are some quick examples by me: You can be a bit more subtle: -![Aperture Watermark example v2](/media/watermarkexample_v2.jpg) +![Aperture Watermark example v2](../media/watermarkexample_v2.jpg) Or use a subtle colorful spectrum: -![Aperture Watermark example v3](/media/watermarkexample_v3.jpg) +![Aperture Watermark example v3](../media/watermarkexample_v3.jpg) ## 4. Make even more... @@ -130,7 +117,7 @@ Just create a watermark image which has exactly the same size as your exported i And maybe you end up with something like this grunge old look just done with the watermark feature of Aperture: -![Aperture Watermark example v4](/media/watermarkexample_v4.jpg) +![Aperture Watermark example v4](../media/watermarkexample_v4.jpg) And that's it. Hope this article helped you mastering the watermark feature of Aperture. diff --git a/_src/_posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md b/content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md similarity index 76% rename from _src/_posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md rename to content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md index 1adf131b..f92c2cd2 100644 --- a/_src/_posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md +++ b/content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md @@ -1,18 +1,19 @@ --- -layout: post +type: post title: Nik ships Viveza as an Aperture editing plugin author: Matthias Kretschmann date: 2008-05-07 19:21:34+00:00 -wordpress_id: 49 -categories: -- photography + tags: +- photography - aperture --- -![Viveza](/media/viveza.png)Today [Nik Software](http://www.niksoftware.com) announced the availability of it's U-point-technology based editing plugin for Apple's Aperture 2.1 called [Viveza](http://www.niksoftware.com/viveza). +![Viveza](../media/viveza.png)Today [Nik Software](http://www.niksoftware.com) announced the availability of it's U-point-technology based editing plugin for Apple's Aperture 2.1 called [Viveza](http://www.niksoftware.com/viveza). + + With Viveza photographers are able to select areas from their images and adjust them separately from the rest of the picture by defining so called Color Control Points. diff --git a/_src/_posts/2008-05-07-the-15-best-new-features-of-aperture-2.md b/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md similarity index 85% rename from _src/_posts/2008-05-07-the-15-best-new-features-of-aperture-2.md rename to content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md index 81f80152..d6971a64 100644 --- a/_src/_posts/2008-05-07-the-15-best-new-features-of-aperture-2.md +++ b/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md @@ -1,15 +1,14 @@ --- -layout: post +type: post title: The 15 best new features of Aperture 2 author: Matthias Kretschmann -image: aperture15_7.png +image: ../media/aperture15_7.png date: 2008-05-07 19:22:49+00:00 -wordpress_id: 50 -categories: -- photography + tags: +- photography - aperture coinhive: true @@ -19,7 +18,7 @@ There are already some lists like this available on the web and they are always # 15. The "New" toolbar icon -[![New toolbar icon](/media/aperture15_1.png)](/media/aperture15_1.png) +[![New toolbar icon](../media/aperture15_1.png)](../media/aperture15_1.png) A handy dropdown icon with the most common create tasks you can do in Aperture 2. This causes Aperture 2 to have a delightful clean toolbar by default. @@ -27,31 +26,31 @@ A handy dropdown icon with the most common create tasks you can do in Aperture 2 # 14. Skimming through your projects -[![Skimming](/media/aperture15_2.png)](/media/aperture15_2.png) +[![Skimming](../media/aperture15_2.png)](../media/aperture15_2.png) The Library item has a new child item: All Photos. Clicking on it displays all your projects like the Event view known from iPhoto 08. By hovering the mouse over the key photo (which you can define for yourself too) you "skim" through the project and quickly see all images contained in this project. Perfect for visually finding that non-keyworded photo you remember you've taken it but don't know where it is. # 13. Search for adjustments -[![Search for adjustments](/media/aperture15_3.png)](/media/aperture15_3.png) +[![Search for adjustments](../media/aperture15_3.png)](../media/aperture15_3.png) With Aperture 2 you can define a search query based on the adjustments you've made to an image in your library. So you can quickly identify all your images which have the monochrome mixer applied to them or maybe all your images which have _no_ edge sharpening applied and so on. # 12. The Retouch tool -[![Retouch tool](/media/aperture15_4.png)](/media/aperture15_4.png) +[![Retouch tool](../media/aperture15_4.png)](../media/aperture15_4.png) No more fiddling around with the poor results of the spot & patch tool when you just want to remove some sensor dust from your image. The repair mode of this tool is just perfect for that kind of task. The clone mode pretty much functions the same way as the clone tool in Photoshop. You define a clone source in your image by pressing option + click in your image and then pasting that source onto the imperfection by clicking on it. # 11. Double click behavior -[![Double click behavior](/media/aperture15_5.png)](/media/aperture15_5.png) +[![Double click behavior](../media/aperture15_5.png)](../media/aperture15_5.png) The behavior of double clicking on images can now be set in Aperture's preferences. Either you can make Aperture show or hide the Viewer or set it to enter full screen mode with the double clicked image in focus. # 10. Book Layout -[![Book layout](/media/aperture15_6.png)](/media/aperture15_6.png) +[![Book layout](../media/aperture15_6.png)](../media/aperture15_6.png) The photobook layout capabilities of Aperture became much powerful with version 2. Now you can create your own book templates where you have much freedom for lay-outing it. In fact you have a powerful Desktop Publishing Program built right into Aperture. Be sure to listen to the [Inside Aperture Podcast about the book layout tool in Aperture](http://digitalmedia.oreilly.com/2008/05/06/aperture-layout-application-schorr.html). @@ -59,7 +58,7 @@ The photobook layout capabilities of Aperture became much powerful with version # 9. The V- and W-cycle -[![HUD](/media/aperture15_8.png)](/media/aperture15_8.png) +[![HUD](../media/aperture15_8.png)](../media/aperture15_8.png) By pressing V on your keyboard you can quickly cycle through different viewer modes. In previous versions of Aperture the V-key just showed/hid the big viewer. @@ -69,49 +68,49 @@ By pressing W on your keyboard you can cycle through the tabbed Inspector on the # 8. The tabbed Inspector/HUD -[![HUD](/media/aperture15_7.png)](/media/aperture15_7.png) +[![HUD](../media/aperture15_7.png)](../media/aperture15_7.png) An addition to the W-cycle: The overall inspector get polished by Apple which results in a completely new clean interface. But the best thing is you can access all those inspector tabs in full screen mode too by hitting the H-key. You can cycle through the tabs of the HUD in full screen mode just like you can do in the Aperture window by pressing the W-key. In fact the tabbed HUD will make you never want to leave full screen mode. # 7. .Mac Web Gallery -![Quick Preview](/media/aperture15_8.jpg) +![Quick Preview](../media/aperture15_8.jpg) Create easy updatable password protected galleries for different clients in no time. Your clients are even able to download the master files from your good looking .Mac web gallery. # 6. Definition adjustment slider -[![Recovery and Black Point sliders](/media/aperture15_11.png)](/media/aperture15_11.png) +[![Recovery and Black Point sliders](../media/aperture15_11.png)](../media/aperture15_11.png) It's a bit hard to describe. In short the slider adds more detail to the midtones of your image. But you just have to see it in action. You can get crisp and sharp images without the need of any sharpening tool. # 5. Recovery + Black Point sliders -![Recovery and Black Point sliders](/media/aperture15_10.png) +![Recovery and Black Point sliders](../media/aperture15_10.png) Although the Highlights & Shadow tool already produced reasonable results, the new Recovery and Black Point sliders are much more powerful and can reveal a lot of detail either in your blown out highlights or your underexposed shadows. Tip: While moving either the Recovery or the Black Point slider hold down the command key at the same time to see just an overlay of your hot & cold areas in your image. # 4. Quick Preview -![Quick Preview](/media/aperture15_12.png) +![Quick Preview](../media/aperture15_12.png) Perfect for first selections of your images during import. Aperture uses either a preview embedded by your camera in the RAW-file, the corresponding jpg-file if you shoot RAW+JPG or it uses the previews rendered by Aperture itself. # 3. Color Picker -[![Color Picker](/media/aperture15_13.png)](/media/aperture15_13.png) +[![Color Picker](../media/aperture15_13.png)](../media/aperture15_13.png) Inside the Color adjustment brick you can now directly pick the color you want to alter from your image by selecting it with the little eye dropper. So you aren't bound to the standard colors when adjusting the colors of your image separately. # 2. Spe(eeee)ed -[![Speed](/media/aperture15_14.jpg)](/media/aperture15_14.jpg) +[![Speed](../media/aperture15_14.jpg)](../media/aperture15_14.jpg) Now you can "scroll like butter" (I bet you know who said that) through your whole library fro real. I don't know what exactly causes Aperture 2 to be so much more responsive and speedier than previous versions but the development team have done magic with this. In combination with the quick preview mode quickly browsing through thousands of photos even in full screen mode is now a snap. # 1. RAW 2.0 -[![RAW power](/media/raw20.png)](/media/raw20.png) +[![RAW power](../media/raw20.png)](../media/raw20.png) The best new feature to me just because the whole purpose of Aperture should be producing the best looking images from your RAW files. While the first RAW 1.0 often rendered terrible pictures, the RAW 1.1 algorithm did it a lot better. But now we have a massive improvement to the RAW 1.1 algorithm with crisp highlights and more details in dark areas with less chromatic aberration by default. To me Aperture is now close and sometimes better than the quality of PhaseOne or CameraRAW. Of course Aperture 2 leaves all your old adjustments made in previous versions of Aperture alone and you can optionally migrate them all at once or separately. diff --git a/_src/_posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md b/content/posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md similarity index 56% rename from _src/_posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md rename to content/posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md index eb5eb299..7c11d23f 100644 --- a/_src/_posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md +++ b/content/posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md @@ -1,18 +1,20 @@ --- -layout: post +type: post title: The Iconfactory presents beautiful Indiana Jones desktop icons author: Matthias Kretschmann date: 2008-05-08 15:47:48+00:00 -wordpress_id: 51 -category: design + tags: +- design - icon --- -[![Indiana Jones Iconset by Iconfactory](/media/indianajones_first.png)](http://iconfactory.com/indianajones/)If you enjoyed the Indiana Jones movies than this first of four desktop icon sets is a must have for you. Icon Designer [Anthony Piraino](http://onebuttonmouse.com/) crafted some beautiful items from Indiana Jones and The Raiders of the Lost Ark movie. +[![Indiana Jones Iconset by Iconfactory](../media/indianajones_first.png)](http://iconfactory.com/indianajones/)If you enjoyed the Indiana Jones movies than this first of four desktop icon sets is a must have for you. Icon Designer [Anthony Piraino](http://onebuttonmouse.com/) crafted some beautiful items from Indiana Jones and The Raiders of the Lost Ark movie. + + The icons are available from the [special Iconfactory site](http://iconfactory.com/indianajones/) as an icontainer or mac and windows icon files. If you download the iContainer for use in [Candybar](http://www.panic.com/candybar/) you also get a new Mac OS X dock created by [David Lanham](http://dlanham.com/). All icons are free for your personal use only and there are already some nice placeholders for more icon sets inspired by the other movies. All of them will be released during May. -[![Indiana Jones Dock by David Lanham](/media/indianajones_dock.png)](/media/indianajones_dock.png) +[![Indiana Jones Dock by David Lanham](../media/indianajones_dock.png)](../media/indianajones_dock.png) diff --git a/_src/_posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md b/content/posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md similarity index 96% rename from _src/_posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md rename to content/posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md index 6ee73c1b..bc2e29f6 100644 --- a/_src/_posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md +++ b/content/posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md @@ -1,12 +1,13 @@ --- -layout: post +type: post title: Canon updates photographic software to work with Leopard author: Matthias Kretschmann date: 2008-05-14 10:01:15+00:00 -wordpress_id: 53 -category: photography + +tags: +- photography --- Canon has posted some updates for their photographic software on the Canon USA website: diff --git a/_src/_posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md b/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md similarity index 79% rename from _src/_posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md rename to content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md index 909fa621..62cd4087 100644 --- a/_src/_posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md +++ b/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md @@ -1,20 +1,21 @@ --- -layout: post +type: post title: 'Update: First overview: Aperture 2.1 adjustment plugins have arrived' author: Matthias Kretschmann date: 2008-05-18 05:00:01+00:00 -wordpress_id: 54 -categories: -- photography + tags: +- photography - aperture coinhive: true --- -![Aperture](/media/aperture97.png)With the release of Aperture 2.1 Apple introduced a plugin architecture for adding third party image adjustment and export plugins. Now the first third party image adjustment plugins for Aperture 2.1 have arrived. And they can definitely make you stop roundtripping your pictures to Photoshop and back. For now a total of 14 plugins from 9 companys were announced which are waiting to help you with your Aperture 2 workflow. +![Aperture](../media/aperture97.png)With the release of Aperture 2.1 Apple introduced a plugin architecture for adding third party image adjustment and export plugins. Now the first third party image adjustment plugins for Aperture 2.1 have arrived. And they can definitely make you stop roundtripping your pictures to Photoshop and back. For now a total of 14 plugins from 9 companys were announced which are waiting to help you with your Aperture 2 workflow. + + # Dfx digital filters plugin from Tiffen @@ -22,7 +23,7 @@ coinhive: true The first one is the [Dfx digital filters plug-in from Tiffen](http://www.tiffen.com/products.html?tablename=dfx) which was already available as an image editing plugin for Photoshop on Windows and Mac. It's an award winning set of [94 individual filters](http://www.tiffen.com/dfx_filter_effects_ig.html) for adjusting and altering your images in Aperture 2.1 and above. -[![Tiffen Dfx digital filters plugin Tiffen](/media/tiffen_aperture.jpg)](/media/tiffen_aperture.jpg) +[![Tiffen Dfx digital filters plugin Tiffen](../media/tiffen_aperture.jpg)](../media/tiffen_aperture.jpg) Tiffen made the plugin available in May 2008. You can download a [free 15-day trial](http://www.tiffen.com/dfx_downloads.html) too or you can purchase it from the Tiffen-website for US$299. Also don't forget to have a look [at the user guide](http://www.tiffen.com/userimages/Dfx-v1-Photo-UserGuide.pdf) for this plugin. @@ -34,15 +35,15 @@ Digital Film Tools [released three plugins](http://www.digitalfilmtools.com/aper [Power Stroke 1.0](http://www.digitalfilmtools.com/powerstroke/index.htm) is an image editing plugin for making targeted adjustments by intuitive handling with strokes. You can make multiple corrections and effects with one stroke such as color correction, recoloring or desaturation, colorization of black and white images, blur, fill light for dimly lit image areas and Diffusion/Glow. -[![Power Stroke 1.0](/media/dft-powerstroke_uis.jpg)](/media/dft-powerstroke_uis.jpg) +[![Power Stroke 1.0](../media/dft-powerstroke_uis.jpg)](../media/dft-powerstroke_uis.jpg) [Light! 3.5](http://www.digitalfilmtools.com/light/) is a plugin for adding Light effects with defined patterns which are created by Gamproducts. -[![Light! 3.5](/media/dft-light_ui.jpg)](/media/dft-light_ui.jpg) +[![Light! 3.5](../media/dft-light_ui.jpg)](../media/dft-light_ui.jpg) [Ozone 2.5](http://www.digitalfilmtools.com/ozone/) is an adjustment plugin for selective adjustments of colors. It' based on the Digital Zone System, which divides a picture into 11 discrete zones where you can adjust each zone separately. -[![Ozone 2.5](/media/dft-ozone_ui.jpg)](/media/dft-ozone_ui.jpg) +[![Ozone 2.5](../media/dft-ozone_ui.jpg)](../media/dft-ozone_ui.jpg) All plugins are available now and can be [purchased fom the Digital Film Tools website](http://www.digitalfilmtools.com/buy/home.php?cat=38) as a Super Bundle with all three plugins included for US$ 175 or separately for US$ 50 (Light and Ozone) or US$ 120 (Power Stroke). There are also trial versions for the [Power Stroke](http://www.digitalfilmtools.com/powerstroke/media.htm), [Light](http://www.digitalfilmtools.com/light/media.htm) and [Ozone](http://www.digitalfilmtools.com/ozone/media.htm) plugin available from DFT's website which will watermark the edited images in demo mode. @@ -53,13 +54,13 @@ Nik Software [announced the availabilty of Viveza](http://www.niksoftware.com/vi On May 7, 2008, Nik finally [shipped Viveza as the first availailabe plugin for Aperture 2.1](http://www.kremalicious.com/2008/05/nik-ships-viveza-as-the-first-available-aperture-editing-plugin/). You can grab a [15-day trial version](http://www.niksoftware.com/site/cont_index.php?nav_top=367&cms_child=__demo&productId=257) of the plugin too. -[![Nik Viveza](/media/viveza_aperture_ui.jpg)](/media/viveza_aperture_ui.jpg) +[![Nik Viveza](../media/viveza_aperture_ui.jpg)](../media/viveza_aperture_ui.jpg) # dvGarage dpMatte & HDR Toner [DpMatte](http://www.dvgarage.com/prod/prod.php?prod=dpmatte) is a plugin for greenscreen keying for photographers. You can easily composite two images together, like adding another background for a portrait. It is available since April 22 and costs you US$ 69. -[![dpMatte](/media/dpmatte_index1.jpg)](/media/dpmatte_index1.jpg) +[![dpMatte](../media/dpmatte_index1.jpg)](../media/dpmatte_index1.jpg) The folks at dvGarage are also working on an Aperture plugin called HDRToner for high dynamic range images which will cost US$ 69 too and is expected to be available on June 15 2008. @@ -67,15 +68,15 @@ The folks at dvGarage are also working on an Aperture plugin called HDRToner for Image Trends announced three plugins coming for Aperture 2.1. First one is the the anti-distortion plugin [Fisheye-Hemi](http://www.imagetrendsinc.com/products/prodpage_hemi.asp) which can remap images taken with fisheye lenses. If you're using a Fisheye lens you will love this plugin. According to Image Trends' Michael K. Conley the plugin should be available on May 19, 2008 and will cost US$ 29.95. But if you already purchased the Photoshop version Image Trends will give you 50% discount. -[![Fisheye-Hemi](/media/imagetrends_hemi_10.jpg)](/media/imagetrends_hemi_10.jpg) +[![Fisheye-Hemi](../media/imagetrends_hemi_10.jpg)](../media/imagetrends_hemi_10.jpg) The [PearlyWhites](http://www.imagetrendsinc.com/products/prodpage_pearly.asp) plugin, which is intended to automatically whiten and brighten teeth in your images should be available within the next 60 days. -[![PearlyWhites](/media/imagetrends_pearlywhite.png)](/media/imagetrends_pearlywhite.png) +[![PearlyWhites](../media/imagetrends_pearlywhite.png)](../media/imagetrends_pearlywhite.png) And the [ShineOff](http://www.imagetrendsinc.com/products/prodpage_shine.asp) plugin, which removes shine from faces and skin should be available within the next 60 days too. -[![ShineOff](/media/imagestrends_shieoff.jpg)](/media/imagestrends_shieoff.jpg) +[![ShineOff](../media/imagestrends_shieoff.jpg)](../media/imagestrends_shieoff.jpg) # Picturecode Noise Ninja @@ -83,7 +84,7 @@ Well known for it's awesome noise reduction capabilities, Picturecode's [Noise N According to Picturecode we can expect the plugin "sometimes next month" (June) and maybe there will be a beta version available before the final release. Definitely there will be a trial version of the plugin available from Picturecode's website. -[![Noise Ninja](/media/noiseninja.png)](/media/noiseninja.png) +[![Noise Ninja](../media/noiseninja.png)](../media/noiseninja.png) You can have a first look at an early alpha version of the plugin running in Aperture 2.1 in an [in-depth article by Rob Galbraith](http://www.robgalbraith.com/bins/content_page.asp?cid=7-9308-9356). @@ -91,11 +92,11 @@ You can have a first look at an early alpha version of the plugin running in Ape [Hydra](http://www.creaceed.com/hydra/) is a neat application for High Dynamic Range (HDR) image processing. With the release of Hydra 1.5, Creaceed made an Aperture plugin available with it too. It has a limited feature set compared to Photomatix or Photoshop but creating HDR images within Aperture is possible right now with this plugin. You can purchase Hydra for US$ 59.95 to get the included plugin or test it out by downloading the trial version (it will expire on July 1, 2008). But remember that the plugin is in beta stage at the moment. -![Hydra](/media/creaceed_hydra.png) +![Hydra](../media/creaceed_hydra.png) # Kekus LensFix CI -![Kekus LensFix CI](/media/lensfix_ci.png)The [LensFix](http://www.kekus.com/software/plugin.html) product from Kekus will help you to correct lens distortion automatically along with it's database of over 500 combinations of camera and lenses. It is also capable of reducing chromatic aberration in your images. Along with a standalone version and a Photoshop plugin the latest version will deliver you a plugin for Aperture in beta stage. The LensFix CI product with the Aperture plugin included will cost you US$ 30. +![Kekus LensFix CI](../media/lensfix_ci.png)The [LensFix](http://www.kekus.com/software/plugin.html) product from Kekus will help you to correct lens distortion automatically along with it's database of over 500 combinations of camera and lenses. It is also capable of reducing chromatic aberration in your images. Along with a standalone version and a Photoshop plugin the latest version will deliver you a plugin for Aperture in beta stage. The LensFix CI product with the Aperture plugin included will cost you US$ 30. You can read a first review of the beta plugin for Aperture [over at trick77.com](http://www.trick77.com/2008/05/18/review-lens-correction-plug-in-kekus-lensfix-for-aperture-2/). @@ -103,7 +104,7 @@ You can read a first review of the beta plugin for Aperture [over at trick77.com This plugin is a whole bundle of 11 different modules for more than 4000 effects like denoising, lens fixing, framing, light effects and many more. All effects can be applied to one image at a time or to a whole set of images at once. Just head over to the [product page](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) to see all effects and features this plugin bundle is capable of. The whole bundle will cost you US$ 299.95 or US$ 69.95 for each module. -[![Human Software ApertureEdit](/media/apertureedit_interface.jpg)](/media/apertureedit_interface.jpg) +[![Human Software ApertureEdit](../media/apertureedit_interface.jpg)](../media/apertureedit_interface.jpg) # More information diff --git a/_src/_posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md b/content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md similarity index 73% rename from _src/_posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md rename to content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md index 88c3eb9f..cd6eca0b 100644 --- a/_src/_posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md +++ b/content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md @@ -1,18 +1,19 @@ --- -layout: post +type: post title: Image Trends releases Fisheye-Hemi plug-in for Apple Aperture author: Matthias Kretschmann date: 2008-05-19 13:05:23+00:00 -wordpress_id: 55 -categories: -- photography + tags: +- photography - aperture --- -[![Fisheye-Hemi](/media/imagetrends_hemi_10.jpg)](/media/imagetrends_hemi_10.jpg)Today Image Trends Inc. [announced](http://www.imagetrendsinc.com/news/Aperture%20Fisheye%20Hemi%20%20Final.pdf) the final availability of the anti-distortion plugin [Fisheye-Hemi](http://www.imagetrendsinc.com/products/prodpage_hemi.asp) as an editing plugin for Aperture 2.1. The plugin will remap your hemispheric images taken with a fisheye lens. So if you take pictures with a fisheye lens this plugin is a must have for you. +[![Fisheye-Hemi](../media/imagetrends_hemi_10.jpg)](../media/imagetrends_hemi_10.jpg)Today Image Trends Inc. [announced](http://www.imagetrendsinc.com/news/Aperture%20Fisheye%20Hemi%20%20Final.pdf) the final availability of the anti-distortion plugin [Fisheye-Hemi](http://www.imagetrendsinc.com/products/prodpage_hemi.asp) as an editing plugin for Aperture 2.1. The plugin will remap your hemispheric images taken with a fisheye lens. So if you take pictures with a fisheye lens this plugin is a must have for you. + + From the press release: diff --git a/_src/_posts/2008-05-21-awesome-parallax-optical-illusion.md b/content/posts/2008-05-21-awesome-parallax-optical-illusion.md similarity index 56% rename from _src/_posts/2008-05-21-awesome-parallax-optical-illusion.md rename to content/posts/2008-05-21-awesome-parallax-optical-illusion.md index b1741ae6..e43da2ba 100644 --- a/_src/_posts/2008-05-21-awesome-parallax-optical-illusion.md +++ b/content/posts/2008-05-21-awesome-parallax-optical-illusion.md @@ -1,18 +1,19 @@ --- -layout: post +type: post title: 'Awesome parallax optical illusion: Make a horse move' author: Matthias Kretschmann date: 2008-05-21 13:02:00+00:00 -wordpress_id: 58 -categories: -- design + tags: +- design - css --- -![Parallax](/media/parallax_illusion_css.png)As you may know there's a nice parallax effect implemented on this website. Just resize your browser window and you can see the black polaroids in my header flying on different layers. As I stated in an [earlier post](http://www.kremalicious.com/2008/03/love-the-parallax/) there is already some usage for it around the web while this effect seems to be first used by the guys from [Silverback](http://www.silverbackapp.com/). If you don't know what this effect is about head over to [thinkvitamin](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax/trackback/) to get to know what it is and how you can achieve it. +![Parallax](../media/parallax_illusion_css.png)As you may know there's a nice parallax effect implemented on this website. Just resize your browser window and you can see the black polaroids in my header flying on different layers. As I stated in an [earlier post](http://www.kremalicious.com/2008/03/love-the-parallax/) there is already some usage for it around the web while this effect seems to be first used by the guys from [Silverback](http://www.silverbackapp.com/). If you don't know what this effect is about head over to [thinkvitamin](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax/trackback/) to get to know what it is and how you can achieve it. + + But now Marco Kuiper from [marcofolio.net](http://www.marcofolio.net) adds another usage for it. He created a cool optical illusion with just plain css/html and some pictures. You can see a [demo of this effect](http://demo.marcofolio.net/a_parallax_illusion_with_css/) in action on Marco's website. Head over to the demo and resize your browser window. You should articulate something like "whoooot!" now. Marco has written [some words about it](http://www.marcofolio.net/css/a_parallax_illusion_with_css_the_horse_in_motion.html) too and you can download the demo. He has also [done a nice tutorial](http://www.marcofolio.net/photoshop/your_own_css_parallax_illusion_3d_image.html) how to achieve this optical illusion. Very cool! diff --git a/_src/_posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md b/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md similarity index 73% rename from _src/_posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md rename to content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md index 0f3402bc..827df0a3 100644 --- a/_src/_posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md +++ b/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md @@ -1,17 +1,15 @@ --- -layout: post +type: post title: 'Showcasing the CSS Parallax Effect: 12+1 Creative Usages' author: Matthias Kretschmann -image: parallax-visualization_big.png +image: ../media/parallax-visualization_big.png date: 2008-05-22 20:01:12+00:00 -wordpress_id: 59 -categories: - - design tags: - - css + - design + - css redirect_from: - /2008/05/showcasing-the-css-parallax-effect-12-creative-usages/ @@ -19,7 +17,7 @@ redirect_from: Been so in love with the parallax effect that I have to post another article about it. It's time for a first showcase of websites using this effect. At the end of this article you'll find some tutorials for making this effect too. -For the non-geeks: I don't mean [measuring distances between objects in space](http://en.wikipedia.org/wiki/Parallax), the [parallax error in photography](http://en.wikipedia.org/wiki/Parallax#Parallax_error_in_photography), any [StarTrek episode](http://www.startrek.com/startrek/view/series/VOY/episode/68824.html), the [movie Parallax View](http://www.imdb.com/title/tt0071970/) and definitely not [DC Comic's Parallax monster](http://scifipedia.scifi.com/index.php/Parallax_(DC)). +For the non-geeks: I don't mean [measuring distances between objects in space](http://en.wikipedia.org/wiki/Parallax), the [parallax error in photography](http://en.wikipedia.org/wiki/Parallax#Parallax_error_in_photography), any [StarTrek episode](http://www.startrek.com/startrek/view/series/VOY/episode/68824.html), the [movie Parallax View](http://www.imdb.com/title/tt0071970/) and definitely not [DC Comic's Parallax monster](). I mean [Parallax Scrolling](http://en.wikipedia.org/wiki/Parallax_scrolling) which is a technique often used in good ol' arcade and video games like [Moon Patrol](http://en.wikipedia.org/wiki/Moon_Patrol) or [Sonic the Hedgehog](http://en.wikipedia.org/wiki/Sonic_the_Hedgehog_%28video_game%29). In such 2D games parallax scrolling was used to create an illusion of three dimensional depth. @@ -35,59 +33,49 @@ So here are the examples. Just start clicking, resizing and goggling! The undeniable Kings of the Parallax, designed by Paul Annett. The Silverback guys made the effect so popular and inspired me too: -[![Silverback app](/media/parallax_001.jpg)](http://www.silverbackapp.com/) - +[![Silverback app](../media/parallax_001.jpg)](http://www.silverbackapp.com/) [Starry Night](http://css-tricks.com/examples/StarryNight/) An example by Chris Coyier from css-tricks.com. This one works vertically too and he made a [tutorial out of it](http://css-tricks.com/3d-parralax-background-effect/): -[![Starry Night](/media/parallax_002.jpg)](http://css-tricks.com/examples/StarryNight/) - +[![Starry Night](../media/parallax_002.jpg)](http://css-tricks.com/examples/StarryNight/) [Percentage Backgrounds](http://www.sitepoint.com/examples/stretchy/test.php) Probably the first css-based usage of this effect by Alex Walker over at Sitepoint. And probably the funniest one: -[![Sitepoint's Percentage Backgrounds](/media/parallax_003.jpg)](http://www.sitepoint.com/examples/stretchy/test.php) - +[![Sitepoint's Percentage Backgrounds](../media/parallax_003.jpg)](http://www.sitepoint.com/examples/stretchy/test.php) [The Horse in Motion](http://demo.marcofolio.net/a_parallax_illusion_with_css/) Marco Kuiper created a cool optical illusion with just plain css/html and some pictures. Head over to the demo and resize your browser window. You should articulate something like "whoooot!" now. You can read [here how he made it](http://www.marcofolio.net/css/a_parallax_illusion_with_css_the_horse_in_motion.html). -[![The Horse in Motion](/media/parallax_004.jpg)](http://demo.marcofolio.net/a_parallax_illusion_with_css/) - +[![The Horse in Motion](../media/parallax_004.jpg)](http://demo.marcofolio.net/a_parallax_illusion_with_css/) [We all hate Quickbooks, Do You?](http://weallhatequickbooks.com/) Nice fire parallax on this sort of aggregating website. It displays all Tweets with the word "quickbooks" in it: -[![We all hate Quickbooks, Do You?](/media/parallax_005.jpg)](http://weallhatequickbooks.com/) - +[![We all hate Quickbooks, Do You?](../media/parallax_005.jpg)](http://weallhatequickbooks.com/) [Dumago](http://dumago.net/) More mysterious (Oh my god, what is it??) than the Silverback app and with frosty stars instead of jungle leaves: -[![Dumago](/media/parallax_006.jpg)](http://dumago.net/) - +[![Dumago](../media/parallax_006.jpg)](http://dumago.net/) [Dromaeo](http://dromaeo.com/) Another funky name and a nice parallax too. This one uses little dinosaurs. Something like "Oh, so cute" or "How adorable!" should come to your mind: -[![Dromaeo](/media/parallax_007.jpg)](http://dromaeo.com/) - +[![Dromaeo](../media/parallax_007.jpg)](http://dromaeo.com/) [cdev.ru](http://www.cdev.ru/) A russian site with an awesome making-webdesign-in-jungle parallax (thanks [egot](http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-104)!). They even have different parallax headers on every page. Just click through the top menu: -[![cdev.ru](/media/parallax_013.jpg)](http://www.cdev.ru/) - - - +[![cdev.ru](../media/parallax_013.jpg)](http://www.cdev.ru/) # More Scripts and Interaction, please @@ -97,64 +85,55 @@ All the showcased sites above need to be resized in the browser to see the effec Very cool cloud effect which becomes visible just by scrolling down the page. I think this is the future and next step of the parallax effect in Web-Design since scrolling is way more common than resizing the browser window: -[![Parallax Backgrounds - a multi–layered javascript experiment](/media/parallax_008.jpg)](http://inner.geek.nz/javascript/parallax/) - +[![Parallax Backgrounds - a multi–layered javascript experiment](../media/parallax_008.jpg)](http://inner.geek.nz/javascript/parallax/) [Fly + Parallax Scrolling Effect](http://www.esqsoft.com/examples/fly_parallax/fly_parallax.htm) Similar to the Starry Night example from css-tricks. But this example uses JavaScript to achieve this effect without resizing your browser window. It almost looks like it's done with Flash: -[![Fly + Parallax Scrolling Effect](/media/parallax_009.jpg)](http://www.esqsoft.com/examples/fly_parallax/fly_parallax.htm) - +[![Fly + Parallax Scrolling Effect](../media/parallax_009.jpg)](http://www.esqsoft.com/examples/fly_parallax/fly_parallax.htm) [40 Jaar Sire](http://www.umaghetzeggen.nl/) Whatever this site is about (Help me dutch speaking folks! edit: [anna knows it!](http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-102)) it creates a shaky effect controlled by your mouse pointer: -[![40 Jaar Sire](/media/parallax_010.jpg)](http://www.umaghetzeggen.nl/) - +[![40 Jaar Sire](../media/parallax_010.jpg)](http://www.umaghetzeggen.nl/) [CSS combined with Scriptaculous's Morph effect](http://offtheline.net/examples/parallax/) Same graphics as on Silverback but with a Morph effect assembled with Scriptaculous. The parallax effect becomes visible by shrinking and unshrinking which is controlled by your mouse clicks: -[![CSS combined with Scriptaculous's Morph effect](/media/parallax_011.jpg)](http://offtheline.net/examples/parallax/) - +[![CSS combined with Scriptaculous's Morph effect](../media/parallax_011.jpg)](http://offtheline.net/examples/parallax/) [WeblogR demo](http://www.weblogr.fr/demo/09052008/) Same graphics as on Silverback too but this Parallax follows your mouse pointer. This is done with jQuery: -[![WeblogR demo](/media/parallax_012.jpg)](http://www.weblogr.fr/demo/09052008/) - - - +[![WeblogR demo](../media/parallax_012.jpg)](http://www.weblogr.fr/demo/09052008/) # How-Tos and Tutorials - * [How to recreate Silverback's Parallax Effect](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax) +- [How to recreate Silverback's Parallax Effect](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax) - * [In the Lab: Doing strange things to CSS Backgrounds](http://www.sitepoint.com/blogs/2008/01/18/in-the-lab-doing-strange-things-to-css-backgrounds/) +- [In the Lab: Doing strange things to CSS Backgrounds](http://www.sitepoint.com/blogs/2008/01/18/in-the-lab-doing-strange-things-to-css-backgrounds/) - * [Starry Night: Incredible 3D Background Effect with Parallax](http://css-tricks.com/3d-parralax-background-effect/) +- [Starry Night: Incredible 3D Background Effect with Parallax](http://css-tricks.com/3d-parralax-background-effect/) - * [Your own CSS parallax illusion 3d image](http://www.marcofolio.net/photoshop/your_own_css_parallax_illusion_3d_image.html) +- [Your own CSS parallax illusion 3d image](http://www.marcofolio.net/photoshop/your_own_css_parallax_illusion_3d_image.html) - * [Parallax Backgrounds - a multi–layered javascript experiment](http://inner.geek.nz/javascript/parallax/) - - * [How to Make the Parallax Effect](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/) +- [Parallax Backgrounds - a multi–layered javascript experiment](http://inner.geek.nz/javascript/parallax/) +- [How to Make the Parallax Effect](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/) Hope you enjoyed this little showcase. Please share it on your favorite social website or vote for it. Your vote is always highly appreciated! And if you know any other websites using this effect (the non-flash versions) feel free to post them in the comments beneath this article. **Update 05/29/2008:** [Dylan Bathurst](http://www.dylanbathurst.com/) wrote an article [How to make the Parallax effect](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/) which includes his own "Keep out of the Rain" example and a sticky, Hulk style Parallax footer: -[![Dylan Bathurst](/media/parallax_015.png)](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/) +[![Dylan Bathurst](../media/parallax_015.png)](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/) And he has found another Parallax effect on the [website of the Rissington Podcast](http://therissingtonpodcast.co.uk/). Cool! -[![The Rissington Podcast](/media/parallax_014.png)](http://therissingtonpodcast.co.uk/) - +[![The Rissington Podcast](../media/parallax_014.png)](http://therissingtonpodcast.co.uk/) **Update 2 06/02/2008:** Nice commentators [routine](http://www.weaintplastic.com/) and [Jorge Epuñan](http://www.csslab.cl/) made some more interactive Parallax examples: @@ -162,11 +141,10 @@ And he has found another Parallax effect on the [website of the Rissington Podca A star parallax which follows your mouse pointer. Done with jQuery and with heavy CPU load. -[![Sonus:portals](/media/parallax_017.jpg)](http://www.sonus-game.com/) - +[![Sonus:portals](../media/parallax_017.jpg)](http://www.sonus-game.com/) [Parallax con Mootools](http://www.csslab.cl/ejemplos/parallax_mootools/) My personal favorite for now in terms of usability. If you are able to understand spanish, [read his explanation](http://www.csslab.cl/2008/05/29/parallax-en-uso-real/). -[![Parallax con Mootools](/media/parallax_016.jpg)](http://www.csslab.cl/ejemplos/parallax_mootools/) +[![Parallax con Mootools](../media/parallax_016.jpg)](http://www.csslab.cl/ejemplos/parallax_mootools/) diff --git a/_src/_posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md b/content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md similarity index 76% rename from _src/_posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md rename to content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md index 53968310..4651cdb9 100644 --- a/_src/_posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md +++ b/content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md @@ -1,20 +1,21 @@ --- -layout: post +type: post title: New all-in-one Aperture plug-in released author: Matthias Kretschmann date: 2008-05-28 15:29:56+00:00 -wordpress_id: 60 -categories: -- photography + tags: +- photography - aperture coinhive: true --- -![ApertureEdit](/media/apertureedit_logo.png)Today [Human Software](http://www.humansoftware.com) released an exciting image editing plug-in for Apple's Aperture. It's called [ApertureEdit](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) and according to Human Software it offers more than 4000 professional effects which you can achieve right within Aperture. +![ApertureEdit](../media/apertureedit_logo.png)Today [Human Software](http://www.humansoftware.com) released an exciting image editing plug-in for Apple's Aperture. It's called [ApertureEdit](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) and according to Human Software it offers more than 4000 professional effects which you can achieve right within Aperture. + + The ApertureEdit plug-in is a bundle of 11 different modules for denoising, lens fixing, framing, light effects and many more. All effects can be applied to one image at a time or to a whole set of images at once. Just head over to the [product page](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) to see all effects and features this plugin bundle is capable of. diff --git a/_src/_posts/2008-06-01-chives.md b/content/posts/2008-06-01-chives.md similarity index 76% rename from _src/_posts/2008-06-01-chives.md rename to content/posts/2008-06-01-chives.md index 66dc012d..77daf14d 100644 --- a/_src/_posts/2008-06-01-chives.md +++ b/content/posts/2008-06-01-chives.md @@ -1,17 +1,16 @@ --- -layout: post +type: post title: Chives -image: Teaser-Chives.jpg -download: chives_by_kremalicious.zip +image: ../media/Teaser-Chives.jpg +download: ../media/chives_by_kremalicious.zip author: Matthias Kretschmann date: 2008-06-01 18:43:40+00:00 -wordpress_id: 64 -categories: - - goodies + tags: - - wallpaper + - goodies + - wallpaper coinhive: true @@ -24,7 +23,7 @@ I have added my first wallpaper to the Goodies section on this website. It's a s You can get the wallpaper by browsing [my Goodies section](http://www.kremalicious.com/goodies/) and clicking on the download link for the wallpaper. The download package also includes a custom folder icon (512px as .icns, .png, .ico) with the Chives wallpaper on it.

- Download Chives Wallpaper + Download Chives Wallpaper

Beside that, this image is [available for print on deviantArt in various sizes](http://www.deviantart.com/print/3347544/). diff --git a/_src/_posts/2008-06-02-tweet-im-on-twitter-now.md b/content/posts/2008-06-02-tweet-im-on-twitter-now.md similarity index 69% rename from _src/_posts/2008-06-02-tweet-im-on-twitter-now.md rename to content/posts/2008-06-02-tweet-im-on-twitter-now.md index 1cbad2ff..b5a98161 100644 --- a/_src/_posts/2008-06-02-tweet-im-on-twitter-now.md +++ b/content/posts/2008-06-02-tweet-im-on-twitter-now.md @@ -1,18 +1,19 @@ --- -layout: post +type: post title: Tweet! I'm on Twitter now. author: Matthias Kretschmann date: 2008-06-02 18:26:37+00:00 -wordpress_id: 65 -categories: -- personal + tags: +- personal - twitter --- -![Twitter](/media/twitter.png)In a heavy venturesome step of unreasonable Web 2.0 love I've decided to get me on Twitter and [opened up an account](https://twitter.com/kremalicious). +![Twitter](../media/twitter.png)In a heavy venturesome step of unreasonable Web 2.0 love I've decided to get me on Twitter and [opened up an account](https://twitter.com/kremalicious). + + If you like, you can follow me now on Twitter while I try to find some advantages of this curious Twitter thing. The plan for now is to post about background updates of this website and about whatever I will throw into the Cloud on other places. But damn, just 140 characters. Feels like writing like it's 1999. diff --git a/_src/_posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md b/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md similarity index 82% rename from _src/_posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md rename to content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md index fda1f6b6..ba951c11 100644 --- a/_src/_posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md +++ b/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md @@ -1,20 +1,16 @@ --- -layout: post +type: post title: Niépce's Camera Obscura And The History Of The First Photograph -image: Teaser-Camera-Obscura-Icons.jpg -download: niepces_camera_obscura_by_kremalicious.zip +image: ../media/Teaser-Camera-Obscura-Icons.jpg +download: ../media/niepces_camera_obscura_by_kremalicious.zip author: Matthias Kretschmann date: 2008-06-03 14:34:03+00:00 -wordpress_id: 67 - -categories: - - goodies - - photography tags: - - icon +- goodies +- icon coinhive: true @@ -24,11 +20,13 @@ redirect_from: - /2008/06/niepces-camera-obscura-and-the-history-of-the-first-photograph/ --- -These two desktop icons show the Camera Obscura as it was used by Nicéphore Niépce in an Aperture and iPhoto style and are intended as an homage to him. Nicéphore Niépce made it first possible to preserve an image taken with a camera obscura in 1826 or 1827 by using a special mixture of bitumen on a pewter plate, naming it Heliography. This first preserved photograph "View from the Window at Le Gras" is the one you can see in the iPhoto icon contained in this package. The third icon is the folder icon I have created for this icon package. +These two desktop icons show the Camera Obscura as it was used by Nicéphore Niépce in an Aperture and iPhoto style and are intended as an homage to him. Nicéphore Niépce made it first possible to preserve an image taken with a camera obscura in 1826 or 1827 by using a special mixture of bitumen on a pewter plate, naming it Heliography. + +This first preserved photograph _View from the Window at Le Gras_ is the one you can see in the iPhoto icon contained in this package. The third icon is the folder icon I have created for this icon package. Either just download the icons or read the exciting story about the First Photograph. -{% include picture.html file='cameraobscura11_all.png' %} +![](../media/cameraobscura11_all.png) # The story behind these icons @@ -36,8 +34,7 @@ There's a fascinating story behind these icons which is nothing more than the st ## Nicéphore Niépce and The First Photograph - -![Nicéphore Niépce, ca. 1795](/media/nicephore-niepce.jpg) Nicéphore Niépce, ca. 1795 +Nicéphore Niépce, ca. 1795 Niépce was a multitasking French inventor who became famous for his experiments trying to preserve the projected image inside of the Camera Obscura. The Camera Obscura uses a well known optical phenomenon which is known to mankind for quite a long time. @@ -49,16 +46,15 @@ In 1822 he created a first non-fading negative contact print by utilizing a bitu After some more tries and combining other elements in his procedure he was able to produce the famous First Photograph "View from the Window at Le Gras" in 1826 or 1827 by utilizing a bitumen of Judea-coated pewter plate and improved lenses from the Paris optician, Charles Chevalier. He called this procedure Heliography and the bitumen-coated pewter plate needed an exposure of eight or more hours! -{% include picture.html file='View-from-the-Window-at-Le-Gras.png' %} -View from the Window at Le Gras +View from the Window at Le Gras -By the way, in 2002 another Picture made by Niépce was discovered which dates back to 1825. It was made in a process he called Heliogravure and it was an image of an (engraving) image (showing a man leading a horse). But since the scientific definition of the First Photograph is "the world's first permanent photograph from nature", "View from the Window at Le Gras" remains the First "real" photograph. +By the way, in 2002 another picture made by Niépce was discovered which dates back to 1825. It was made in a process he called Heliogravure and it was an image of an (engraving) image (showing a man leading a horse). But since the scientific definition of the First Photograph is "the world's first permanent photograph from nature", _View from the Window at Le Gras_ remains the first "real" photograph. -Because of his inventions he got in contact with the French artist, chemist and inventor Louis-Jacques-Mandé Daguerre and they became officially partners by the time of 1829 (14 December). At this time Daguerre already was famous for his impressive Dioramas. They were both experimenting a lot to produce preserved images in less time. In June 1832 both invented a process called the Physautotype. This process utilized a distillate of lavender oil as the photosensitive agent and produced images in fewer than 8 hours. +Because of his inventions he got in contact with the French artist, chemist and inventor Louis-Jacques-Mandé Daguerre and they became officially partners by the time of 1829 (14 December). At that time, Daguerre already was famous for his impressive Dioramas. They were both experimenting a lot to produce preserved images in less time. In June 1832 both invented a process called the Physautotype. This process utilized a distillate of lavender oil as the photosensitive agent and produced images in fewer than 8 hours. But Niépce died suddenly in 1833 and instead of him his partner Louis-Jacques-Mandé Daguerre became famous with his Daguerreotype process in 1839. Finally Daguerre was named and praised as the inventor of photography along with his competitor [William Fox Talbot](http://en.wikipedia.org/wiki/William_Henry_Fox_Talbot). -But in 1952 Niépce's lost image "View from the Window at Le Gras" was discovered and since then he has to be named along with Daguerre and Talbot when speaking of the invention of photography. And we can learn that the invention of photography wasn't an act of one particular genius but a decades long process with many smart people involved. +But in 1952 Niépce's lost image _View from the Window at Le Gras_ was discovered and since then he has to be named along with Daguerre and Talbot when speaking of the invention of photography. And we can learn that the invention of photography wasn't an act of one particular genius but a decades long process with many smart people involved. If you're interested in all the different processes and techniques used by Niépce and Daguerre you can browse the [Invention of Photography section on the website of Maison Nicéphore Niépce](http://www.nicephore-niepce.com/pagus/pagus-inv.html). @@ -99,14 +95,14 @@ Brief description of Daguerres role in the invention of photography process by T This icon package was exclusively announced first on [MacThemes](http://macthemes2.net) and you can download it from the [Goodies section on this website](/goodies/) or directly via this link:

- Download + Download

In addition to these icons you can download the [associated wallpapers for your desktop or your iPhone](http://www.kremalicious.com/2008/06/new-goodie-niepces-camera-obscura-wallpaper-pack/). # How to use these icons -![Niépce's Camera Obscura in use](/media/cameraobscura_inuse.png)These desktop icons are free for your personal and non-commercial use. They were intended to be replacement icons for Apple's Aperture and iPhoto applications. Of course, you can use it for every other application instead or use the folder icon for your picture collection. +![Niépce's Camera Obscura in use](../media/cameraobscura_inuse.png)These desktop icons are free for your personal and non-commercial use. They were intended to be replacement icons for Apple's Aperture and iPhoto applications. Of course, you can use it for every other application instead or use the folder icon for your picture collection. The easiest way to change and apply icons in Mac OS X involves the awesome application [Candybar](http://www.panic.com/candybar) from [Panic Software](http://www.panic.com/). In case you don't have it you can change your icons by following these steps: @@ -118,6 +114,6 @@ These desktop icons are free for you personal and non-commercial use. All other # Final Words -![Oh no!](/media/coffee-cup-empty.png) +![Oh no!](../media/coffee-cup-empty.png) Congratulations! You finally arrived at the end of my article. There's a good chance that your coffee or tea cup is now empty. But before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-](https://kremalicious.com/feed/) or buy me my next coffee. diff --git a/_src/_posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md b/content/posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md similarity index 77% rename from _src/_posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md rename to content/posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md index 61124ea0..d7aa417b 100644 --- a/_src/_posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md +++ b/content/posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md @@ -1,16 +1,15 @@ --- -layout: post +type: post title: Niépce's Camera Obscura Wallpaper Pack -image: Teaser-Camera-Obscura-Walls.jpg -download: niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip +image: ../media/Teaser-Camera-Obscura-Walls.jpg +download: ../media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip author: Matthias Kretschmann date: 2008-06-03 13:32:24+00:00 -wordpress_id: 66 -categories: -- goodies + tags: +- goodies - wallpaper coinhive: true @@ -24,7 +23,7 @@ In addition to my Niépce's Camera Obscura icons for Aperture and iPhoto I have All Wallpapers are using a custom designed background which imitates the look of a metal plate like it was used in Niépce's experiments although it wasn't golden. To make it more Mac style I have added a stenciled dots pattern (which is a commonly used reference to the front design of the MacPro).

- Download Niépce's Camera Obscura Wallpaper + Download Niépce's Camera Obscura Wallpaper

Here are the details: diff --git a/_src/_posts/2008-06-04-helvetica-typewriter-keys.md b/content/posts/2008-06-04-helvetica-typewriter-keys.md similarity index 62% rename from _src/_posts/2008-06-04-helvetica-typewriter-keys.md rename to content/posts/2008-06-04-helvetica-typewriter-keys.md index eaaf3e9a..43d97dff 100644 --- a/_src/_posts/2008-06-04-helvetica-typewriter-keys.md +++ b/content/posts/2008-06-04-helvetica-typewriter-keys.md @@ -1,16 +1,14 @@ --- -layout: photo +type: photo -slug: helvetica-typewriter-keys title: Helvetica Typewriter Keys -image: MG_1735-Version-2.jpg +image: ../media/MG_1735-Version-2.jpg author: Matthias Kretschmann date: 2008-06-04 11:41:01+00:00 -wordpress_id: 1976 -categories: -- photos -tags: typography + +tags: +- typography --- [Photo on 500px](http://500px.com/photo/5630073) [Photo on flickr](http://www.flickr.com/photos/krema/6965165687) diff --git a/_src/_posts/2008-06-11-safari-4-developer-preview.md b/content/posts/2008-06-11-safari-4-developer-preview.md similarity index 86% rename from _src/_posts/2008-06-11-safari-4-developer-preview.md rename to content/posts/2008-06-11-safari-4-developer-preview.md index 5b774c34..b3efb34d 100644 --- a/_src/_posts/2008-06-11-safari-4-developer-preview.md +++ b/content/posts/2008-06-11-safari-4-developer-preview.md @@ -1,33 +1,35 @@ --- -layout: post +type: post title: 'Safari 4 Developer Preview - Better Performance, Overhauled Web Inspector, New CSS' author: Matthias Kretschmann date: 2008-06-11 10:37:07+00:00 -wordpress_id: 70 -category: design + +category: tags: - - osx - - macos - - css + - design + - macos + - css --- -![Safari](/media/safari-logo.png)Apple released a developer preview of the upcoming version of its web browser Safari to registered Developers. The Safari 4 Developer Preview is available for Mac OS X Tiger/Leopard and Windows. While the main changes are not visible to the user the most significant visible new feature is the overhauled Web Inspector. +![Safari](../media/safari-logo.png)Apple released a developer preview of the upcoming version of its web browser Safari to registered Developers. The Safari 4 Developer Preview is available for Mac OS X Tiger/Leopard and Windows. While the main changes are not visible to the user the most significant visible new feature is the overhauled Web Inspector. + + You can access Safari's Web Inspector through Develop > Show Web Inspector (you have to check the "Show Develop menu" box in the Preferences first to enable it). The Web Inspector, like the Firebug plug-in for Firefox, is a cool tool especially for Web Developers to inspect various elements of the website you're browsing. The Navigation inside the Web Inspector is now moved from left to the top and there's a new "Databases" section and something like a browsing benchmarking "Profiles" section. All navigation tabs got new icons too. -![Web Inspector](/media/webinspector_3.png) +![Web Inspector](../media/webinspector_3.png) The "Resources" section got a slight overhaul too. With it you can see in which time the elements on your website were loaded with a nice graphical timeline. -![Web Inspector](/media/webinspector_2.png) +![Web Inspector](../media/webinspector_2.png) Among the visible new features in the Safari 4 Developer Preview is the ability to save websites as desktop applications or site-specific browsers (SSB) called Web Applications (File > Save as Web Application) and some more options for new windows or tabs in the General Preferences: -![Safari 4 New Windows And Tabs](/media/safari_4_tabs.png) +![Safari 4 New Windows And Tabs](../media/safari_4_tabs.png) In terms of web standards and performance the Safari 4 Developer Preview passes the [Acid3 performance test](http://acid3.acidtests.org/) with 100/100 and is way more faster at rendering web pages. @@ -37,7 +39,7 @@ Finally there seem to be a new css version implemented since Safari 4 now render Another new feature is the new full page zoom for zooming on web pages which was already implemented in the WebKit nightlies but [had to be manually activated](http://www.macosxhints.com/article.php?story=20080606045109546). In old Safari versions pressing Command + or - increased or decreased just the text size, sometimes destroying the whole layout of the page. The Safari 4 Developer Preview behaves just like the recent Firefox 3 RC1 and zooms out or zooms in the whole page layout and not just the text. -[![Web Inspector](/media/safari4_zoom_thumb.png)](/media/safari4_zoom.png) +[![Web Inspector](../media/safari4_zoom_thumb.png)](../media/safari4_zoom.png) And while Apple just [states in their press release](http://www.apple.com/pr/library/2008/06/09snowleopard.html) that Safari 4 delivers "the fastest implementation of JavaScript ever, increasing performance by 53 percent", other sources like [MacRumors](http://www.macrumors.com/2008/06/10/apple-seeds-safari-4-to-developers/) or [Macworld UK](http://www.macworld.co.uk/macsoftware/news/index.cfm?newsid=21625&pagtype=allchandate) expect this increased JavaScript performance to be based on the implementation of the freshly new [SquirrelFish JavaScript engine](http://webkit.org/blog/189/announcing-squirrelfish/). diff --git a/_src/_posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md b/content/posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md similarity index 73% rename from _src/_posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md rename to content/posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md index d150440a..b7fdc4f5 100644 --- a/_src/_posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md +++ b/content/posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md @@ -1,23 +1,24 @@ --- -layout: post +type: post title: 'Quick Tip: Borders & Titles Plug-In for Aperture' author: Matthias Kretschmann date: 2008-06-17 15:21:57+00:00 -wordpress_id: 73 -categories: -- photography + tags: +- photography - aperture --- -![Aperture](/media/aperture128.png)Have you ever looked for a way to quickly add text to your images [without photoshopping a watermark image](http://www.kremalicious.com/2008/05/high-quality-watermarks-with-aperture/) first? +![Aperture](../media/aperture128.png)Have you ever looked for a way to quickly add text to your images [without photoshopping a watermark image](http://www.kremalicious.com/2008/05/high-quality-watermarks-with-aperture/) first? + + There's a simple editing plug-in available for this task called [Borders & Titles](http://developer.apple.com/samplecode/BordersAndTitles/index.html) and as the name says you can add simple borders and text to your images within Aperture 2.1. It's a sample plug-in provided by Apple and it's fully functional. You can download it from Apple's Developer Connection website without registration: [Aperture Edit Plugin - Borders & Titles](http://developer.apple.com/samplecode/BordersAndTitles/index.html) -[![Borders & Titles](/media/aperture_bt_thumb.png)](/media/aperture_bt.png) +[![Borders & Titles](../media/aperture_bt_thumb.png)](../media/aperture_bt.png) The downlaod package includes the source code too so you can adjust the plug-in if you're able to code Cocoa. After downloading put the BordersAndTitles.ApertureEdit plug-in into /Library/Application Support/Aperture/Plug-Ins and access the plug-in from Aperture. diff --git a/_src/_posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md b/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md similarity index 81% rename from _src/_posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md rename to content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md index 212cdcba..24b63a4a 100644 --- a/_src/_posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md +++ b/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md @@ -1,21 +1,18 @@ --- -layout: post +type: post -slug: ubuntu-as-mac-file-server-and-time-machine-volume title: 'HowTo: Make Ubuntu A Perfect Mac File Server And Time Machine Volume' author: Matthias Kretschmann -image: ubuntu_mac_feature.jpg +image: ../media/ubuntu_mac_feature.jpg date: 2008-06-19 03:08:11+00:00 updated: 2016-06-12 14:29:11+00:00 -wordpress_id: 75 -category: design tags: - - tutorial - - osx - - macos - - ubuntu + - design + - tutorial + - macos + - ubuntu coinhive: true @@ -41,57 +38,56 @@ Personally I use a fresh installation of Ubuntu 8.04 Hardy Heron Desktop version Here are the steps involved in setting up your Ubuntu box as a Mac file server: - 1. Modify and install Netatalk (Open Source AFP implementation) - 2. Configure Netatalk - 3. Configure shared volumes (and Time Machine volume) - 4. Install Avahi (Open Source Bonjour implementation) - 5. Configure Avahi and advertise services - 6. Configure TimeMachine - 7. Conclusion, Problems and more informations - 8. Downloading and using the Server Display Icons - 9. Translations Of This Article +- [1. Modify and install Netatalk](#1-modify-and-install-netatalk) +- [2. Configure Netatalk](#2-configure-netatalk) +- [3. Configure shared Volumes](#3-configure-shared-volumes) +- [4. Install Avahi](#4-install-avahi) +- [5. Configure Avahi and advertise services](#5-configure-avahi-and-advertise-services) +- [6. Configure Time Machine](#6-configure-time-machine) +- [7. Conclusion, Problems and more informations](#7-conclusion-problems-and-more-informations) +- [8. Downloading and using the Server Display Icons](#8-downloading-and-using-the-server-display-icons) +- [9. Translations Of This Article](#9-translations-of-this-article) # 1. Modify and install Netatalk -![Netatalk icon](/media/netatalk.png)[Netatalk](http://netatalk.sourceforge.net/) is the Open Source implementation of AFP. Mac OS X requires encryption to work properly but the standard package of netatalk provided in the Ubuntu repositories doesn't include this feature. So we have to build our own netatalk package from the sources with the encryption feature enabled. +![Netatalk icon](../media/netatalk.png)[Netatalk](http://netatalk.sourceforge.net/) is the Open Source implementation of AFP. Mac OS X requires encryption to work properly but the standard package of netatalk provided in the Ubuntu repositories doesn't include this feature. So we have to build our own netatalk package from the sources with the encryption feature enabled. First you have to enable the Source Code repositories via System > Administration > Software Sources under the Ubuntu Software tab. Check the Source Code Box, click Close and choose Reload in the next dialogue. -![Source Code Repositories](/media/ubuntuserver1.png) +![Source Code Repositories](../media/ubuntuserver1.png) Alessandro has built [a nice .deb package for i386 machines](http://dl.getdropbox.com/u/187424/netatalk_2.0.3-brando0_i386.deb). Although written in italian you can follow the necessary code snippets for installing this package [in his blog post.](http://gpz500.wordpress.com/2008/09/27/lairone-al-servizio-del-leopardo/) If the install package works for you just skip the following self compiling process and head over to the [Configure Netatalk section.](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#netatalk2) Now fire up your Terminal under Applications > Accessories and execute the following lines (separately). You have to type Y for yes when Terminal asks you if it should continue: -```shell +```bash sudo apt-get build-dep netatalk sudo apt-get install cracklib2-dev fakeroot libssl-dev sudo apt-get source netatalk cd netatalk-2* -```` +``` Now you have downloaded the source code of Netatalk to your home folder, installed some required packages for building Netatalk and changed the directory to the downloaded folder. Next you have to build the Netatalk package with the encryption option enabled: -```shell +```bash sudo DEB_BUILD_OPTIONS=ssl dpkg-buildpackage -rfakeroot ``` Depending on your hardware this may take a while but you can enjoy the geeky build output in your Terminal: -![Building Netatalk](/media/ubuntuserver2.png) +![Building Netatalk](../media/ubuntuserver2.png) If everything went through without errors (except the signing warnings, can be ignored) you can install the recently created package: - -```shell +```bash sudo dpkg -i ~/netatalk_2*.deb ``` To stop Ubuntu from overwriting your custom Netatalk package you should set its state to hold. This will cause the Netatalk package being grayed out in the Software Update dialogue: -```shell +```bash echo "netatalk hold" | sudo dpkg --set-selections ``` @@ -99,9 +95,9 @@ Now you have successfully build and installed your custom Netatalk package which # 2. Configure Netatalk -![Netatalk icon](/media/netatalk.png)First you should deactivate services provided by Netatalk which are not needed if you just want to use your Ubuntu box for file sharing. This will speed up the response and startup time of Netatalk dramatically. For instance Netatalk starts the old AppleTalk protocol by default which is just needed for pre OS X systems. So we're going to use the graphical editor vi for stopping unneeded services: +![Netatalk icon](../media/netatalk.png)First you should deactivate services provided by Netatalk which are not needed if you just want to use your Ubuntu box for file sharing. This will speed up the response and startup time of Netatalk dramatically. For instance Netatalk starts the old AppleTalk protocol by default which is just needed for pre OS X systems. So we're going to use the graphical editor vi for stopping unneeded services: -```shell +```bash sudo vi /etc/default/netatalk ``` @@ -120,7 +116,7 @@ Here it's very important to run the cnid_meta daemon because this service will h Press Ctrl + S to save the document or choose File > Save. Next we have to edit the main config file for AFP sharing called afpd.conf: -```shell +```bash sudo vi /etc/netatalk/afpd.conf ``` @@ -134,9 +130,9 @@ Press Ctrl + S to save the document or choose File > Save. # 3. Configure shared Volumes -![Time Machine Volume icon](/media/timemachinedisk97.png)Now we have to tell the afpd daemon what Volumes to share. This is defined in the AppleVolumes.default file inside /etc/netatalk/. The following line will open this file in vim with superuser privileges (required for saving) where we can define our shared volumes: +![Time Machine Volume icon](../media/timemachinedisk97.png)Now we have to tell the afpd daemon what Volumes to share. This is defined in the AppleVolumes.default file inside /etc/netatalk/. The following line will open this file in vim with superuser privileges (required for saving) where we can define our shared volumes: -```shell +```bash sudo vi /etc/netatalk/AppleVolumes.default ``` @@ -148,7 +144,7 @@ Scroll to the bottom of the document and define your Volume shares. By adding th Because we want to use the Ubuntu machine as a backup server for Time Machine you should define a second volume just for Time Machine. Create a new folder in your home directory first and name it TimeMachine (or anything you like). Then add the following line to your AppleVolumes.default. This is one line so be sure that there’s no line break in your AppleVolumes.default file: -```` +``` /home/username/TimeMachine TimeMachine allow:username1,username2 cnidscheme:cdb options:usedots,upriv ``` @@ -164,25 +160,24 @@ Press Ctrl + S to save the document or choose File > Save. Of course you can def Finally restart Netatalk to activate the changes: -```shell +```bash sudo /etc/init.d/netatalk restart ``` - Although we now have a fully configured AFP file server it will not show up in the Finder sidebar on Mac OS X Leopard (but it's reachable via Go > Connect to Server... in the Finder). Macs use a service called [Bonjour](http://www.apple.com/macosx/technology/bonjour.html) for the sidebar thing (and for a lot of other cool stuff) and on the Linux side we can have this functionality with the Open Source implementation of Bonjour, called [Avahi](http://avahi.org/). # 4. Install Avahi -![Bonjour icon](/media/bonjour97.png)So the Avahi daemon will advertise all defined services across your network just like Bonjour do. So let's install the avahi daemon and the mDNS library used for imitating the Bonjour service. When fully configured this will cause all Macs in your network to discover your Ubuntu box automatically: +![Bonjour icon](../media/bonjour97.png)So the Avahi daemon will advertise all defined services across your network just like Bonjour do. So let's install the avahi daemon and the mDNS library used for imitating the Bonjour service. When fully configured this will cause all Macs in your network to discover your Ubuntu box automatically: -```shell +```bash sudo apt-get install avahi-daemon sudo apt-get install libnss-mdns ``` To make everything work properly you have to edit the nsswitch.conf file: -```shell +```bash sudo vi /etc/nsswitch.conf ``` @@ -196,9 +191,9 @@ Press Ctrl + S to save the document or choose File > Save. # 5. Configure Avahi and advertise services -![Bonjour icon](/media/bonjour97.png)Next we have to tell Avahi which services it should advertise across the network. In our case we just want to advertise AFP sharing. This is done by creating a xml-file for each service inside /etc/avahi/services/ following a special syntax. Let's create a xml-file for the afpd service with the following line: +![Bonjour icon](../media/bonjour97.png)Next we have to tell Avahi which services it should advertise across the network. In our case we just want to advertise AFP sharing. This is done by creating a xml-file for each service inside /etc/avahi/services/ following a special syntax. Let's create a xml-file for the afpd service with the following line: -```shell +```bash sudo vi /etc/avahi/services/afpd.service ``` @@ -225,7 +220,7 @@ update: The last part is used to assign a specific (Apple) hardware model to you Finally restart the avahi daemon to activate all changes: -```shell +```bash sudo /etc/init.d/avahi-daemon restart ``` @@ -233,21 +228,21 @@ Now you have configured the Avahi daemon to advertise AFP sharing across your ne Now you're done with setting up AFP file sharing on your Ubuntu box and advertising it across the network for Finder's sidebar. Check if everything works as intended by clicking on your Ubuntu server in Finder and clicking on the "Connect As" button. Enter your username and password (the ones you're using on your Ubuntu machine) and you should see the Volumes we defined earlier with the AppleVolumes.default file: -![Netatalk shares](/media/ubuntuserver3.png) +![Netatalk shares](../media/ubuntuserver3.png) Another side effect of using AFP is that your Ubuntu box will show up as a nice Apple Cinema Display icon instead of the BSOD windows icon. Here you see my Ubuntu server showing up in Finder as [Rockhopper](http://en.wikipedia.org/wiki/Southern_Rockhopper_Penguin): -![Ubuntu box in Finder](/media/ubuntuserver4.png) +![Ubuntu box in Finder](../media/ubuntuserver4.png) update: If you've followed the revised version of this article your Linux box should now be represented by a Xserve icon in Finder: -![Ubuntu box as Xserver in Finder](/media/ubuntuserver4a.png) +![Ubuntu box as Xserver in Finder](../media/ubuntuserver4a.png) # 6. Configure Time Machine -![Time Machine icon](/media/timemachine97.png)**update 07/14/2008:** On the Mac side you have to enable the option to use network volumes as Time Machine drives first. Without it your freshly shared and advertised network volume won't show up in the disk selection dialogue in Time Machine. This is a hidden option not accessible via the graphical user interface so you have to copy & paste this in Terminal (it's one line): +![Time Machine icon](../media/timemachine97.png)**update 07/14/2008:** On the Mac side you have to enable the option to use network volumes as Time Machine drives first. Without it your freshly shared and advertised network volume won't show up in the disk selection dialogue in Time Machine. This is a hidden option not accessible via the graphical user interface so you have to copy & paste this in Terminal (it's one line): -```shell +```bash defaults write com.apple.systempreferences TMShowUnsupportedNetworkVolumes 1 ``` @@ -257,7 +252,7 @@ Now just mount the "TimeMachine" Volume first and choose it as a backup disk in When your first Time Machine backup is done you can remove all Volumes and the next time Time Machine starts it will automagically mount the disk image from your TimeMachine volume on your Ubuntu box without mounting the whole TimeMachine volume: -![Finder sidebar](/media/ubuntuserver5.png) +![Finder sidebar](../media/ubuntuserver5.png) # 7. Conclusion, Problems and more informations @@ -279,7 +274,7 @@ In short, you have to create the backup disk image on your Desktop and copy it t First open up the Console from your Applications > Utilities folder and open the Time Machine preferences. In Time Machine preferences set your backup volume back to none. After that reselect your mounted Time Machine volume. The counter should start and Time Machine's big button will change to on. When the backup tries to start and fail have a look at your Console (Click All Messages in the sidepane). There should be a line telling you the name of the disk image: -```shell +```bash Creating disk image /Volumes/TimeMachine/computername_0014e3856bd0.sparsebundle ``` @@ -291,7 +286,7 @@ The secret number Time Machine adds to your computer name is nothing more than t In the field volume name write Backup of computername. Now FIRST chose sparse bundle disk image as the image format and THEN adjust the volume size to the size of your internal harddrive (minimum, choose more if you like) afterwards. Remember that Disk Utility won't let you make a bigger image file as you have physical hard drive space available if you don't chose sparse bundle disk image as the image format first. For reference have a look at this screenshot: -![Time Machine sparse bundle disk image](/media/tm-sparsebundle.png) +![Time Machine sparse bundle disk image](../media/tm-sparsebundle.png) Select your Desktop as destination and click create. After the creation is finished drag the created disk image to your mounted Time Machine volume (you can delete the disk image on your desktop when copy is finished). Finally go to Time Machine preferences and start your backup again and everything should work as expected now. After the first backup (this can take a long time depending on your harddrive) you can unmount your Time Machine volume and the next time Time Machine starts it will grab and mount the sparse bundle disk image automatically (with "Backup of computername" as the volume name). @@ -305,7 +300,7 @@ In short you have to allow communications over port 548 and 5353. If you get one of those errors: -```` +``` Connection Failed - There was an error connection to the server. Check the server name or IP address and try again ``` @@ -321,7 +316,7 @@ Remember that this error can be caused by a myriad of problems and just a lot of If you still can't connect to your Ubuntu box you can edit your /etc/hosts file as [I've pointed out in the comments](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-417): -```shell +```bash sudo vi /etc/hosts ``` @@ -342,9 +337,9 @@ But for those people still having problems with these error messages: On Mac OS ## -5014 error -Some people have problems when connecting to an AFP share and get a -5014 error. [As J5 pointed out in the comments](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-5021) you have to delete the hidden .AppleDB folders on your Ubuntu box and restart netatalk afterwards: +Some people have problems when connecting to an AFP share and get a -5014 error. You have to delete the hidden .AppleDB folders on your Ubuntu box and restart netatalk afterwards: -```shell +```bash sudo /etc/init.d/netatalk restart ``` @@ -352,13 +347,13 @@ sudo /etc/init.d/netatalk restart In case of a full system restore you would have to boot your Mac from the Mac OS X installation DVD (the one delivered with your Mac) by pressing the c key during boot. Your Mac will start with a minimal UI where you have a Utilities section in the top menu bar. There you'll find "Restore from a Time Machine Backup" but it won't find your network share with your Time Machine backup. Luckily [Dmitry Nedospasov found a way to manage this](http://nedos.net/2008/03/29/restore-from-an-unsupported-time-machine-backup-with-the-leopard-dvd/) by simply mounting your Time Machine network share with the Terminal (which you can find under Utilities in the menu bar too) by utilizing the following syntax (shamelessly copied from [Dmitry](http://nedos.net/2008/03/29/restore-from-an-unsupported-time-machine-backup-with-the-leopard-dvd/)): -```shell +```bash mount -t afp afp://username:password@hostname/ShareName /Volumes/ShareMount ``` Replace everything instead of /Volumes with your matching names. You can test if your network share was properly mounted by doing -```shell +```bash ls /Volumes ``` @@ -368,36 +363,35 @@ Now you can close the Terminal and select "Restore from Time Machine Backup" fro ## Netatalk backup disk reaching maximum capacity -As [Seron](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-15122) pointed out in the comments, there is some discussion on the net regarding problems with Netatalk and TimeMachine when the backup disk reaches maximum capacity. This is due to missing support for the AFP commands FPSyncDir aka commands 78 and 78 in Netatalk. [As a commenter in an ArsTechnica forum says](http://episteme.arstechnica.com/eve/forums/a/tpc/f/942005082731/m/370002065931?r=782005065931#782005065931): "As soon as your backup volume will reach max capacity, it will self destruct because of it." +There is some discussion on the net regarding problems with Netatalk and TimeMachine when the backup disk reaches maximum capacity. This is due to missing support for the AFP commands FPSyncDir aka commands 78 and 78 in Netatalk. [As a commenter in an ArsTechnica forum says](http://episteme.arstechnica.com/eve/forums/a/tpc/f/942005082731/m/370002065931?r=782005065931#782005065931): "As soon as your backup volume will reach max capacity, it will self destruct because of it." In the forum you'll also find some links to various patches to avoid problems with that. If you have tested such patch please post your experiences in the comments for this article. ## More Articles - * In case you want to connect your iPhone via AFP: [An AFP Server on your iPhone](http://www.eecs.berkeley.edu/~job/afpd/AFP_File_Server_on_your_iPhone.html). This uses the Netatalk package too - * [Netatalk 2.0 manual](http://netatalk.sourceforge.net/2.0/htmldocs/) - * [All possible AppleVolumes.default options (part of the Netatalk manual)](http://netatalk.sourceforge.net/2.0/htmldocs/AppleVolumes.default.5.html) - * [Overview and templates about services Avahi can advertise](http://holyarmy.org/2008/01/27/advertising-linux-services-via-avahibonjour) - * [In-depth article about Sparse Bundle disk images](http://db.tidbits.com/article/9673) - * [How-to: Get files off a Time Machine backup without using your Mac](http://carsonbaker.org/2008/06/23/time-machine-restore/): In case you have to access Time Machine backups from Ubuntu or any other Linux system - * [Using NetBSD, with guest account](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-6143): [Johannes](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-6143) laid down the steps to use NetBSD instead of Ubuntu. - +- In case you want to connect your iPhone via AFP: [An AFP Server on your iPhone](http://www.eecs.berkeley.edu/~job/afpd/AFP_File_Server_on_your_iPhone.html). This uses the Netatalk package too +- [Netatalk 2.0 manual](http://netatalk.sourceforge.net/2.0/htmldocs/) +- [All possible AppleVolumes.default options (part of the Netatalk manual)](http://netatalk.sourceforge.net/2.0/htmldocs/AppleVolumes.default.5.html) +- [Overview and templates about services Avahi can advertise](http://holyarmy.org/2008/01/27/advertising-linux-services-via-avahibonjour) +- [In-depth article about Sparse Bundle disk images](http://db.tidbits.com/article/9673) +- [How-to: Get files off a Time Machine backup without using your Mac](http://carsonbaker.org/2008/06/23/time-machine-restore/): In case you have to access Time Machine backups from Ubuntu or any other Linux system +- [Using NetBSD, with guest account](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-6143): [Johannes](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-6143) laid down the steps to use NetBSD instead of Ubuntu. # 8. Downloading and using the Server Display Icons -![Ubuntu Server Display](/media/ubuntuserver97.png)I've quickly crafted a custom icon for your Ubuntu server. It's the Apple Cinema Display with the default wallpaper of Ubuntu 8.04 called Hardy Heron. Additionally I've included an icon with the default Leopard and the default Vista wallpaper to represent your Leopard and Windows server too (The default Mac server icon uses the old Tiger wallpaper). +![Ubuntu Server Display](../media/ubuntuserver97.png)I've quickly crafted a custom icon for your Ubuntu server. It's the Apple Cinema Display with the default wallpaper of Ubuntu 8.04 called Hardy Heron. Additionally I've included an icon with the default Leopard and the default Vista wallpaper to represent your Leopard and Windows server too (The default Mac server icon uses the old Tiger wallpaper). Here you can see the icons included in the Server Displays icon pack: -![Server Displays](/media/serverdisplays.jpg) +![Server Displays](../media/serverdisplays.jpg) Because I've just modified Apple's standard icons these icons are just available via this blog post and they will not show up in my Goodies section. Just download the whole package directly via this link:

- Download Server Display Icons zip + Download Server Display Icons zip

-# How to use the icons +## How to use the icons In the avahi configuration part in this article you have assigned the Xserve device info to your afpd.service file. All you have to do is to replace the generic Xserve icon (or whatever model you have assigned in your afpd.service file) with an icon from this icon package. Just rename the Ubuntu Server.icns to com.apple.xserve.icns and navigate to @@ -413,15 +407,15 @@ As for the Windows Vista server icon: Just rename the Windows Server.icns file t ``` /System/Library/CoreServices/CoreTypes.bundle/Contents/Resources -```` +``` Now drag & drop the renamed file into this path and replace the generic icon (making a backup before doing that is a good idea) and after a logout all your Windows servers should be displayed with the new icon. update: A solution for the icon problem is here: [Simon Wheatley figured out](http://www.simonwheatley.co.uk/2008/04/06/avahi-finder-icons/trackback/) how to assign a different icon to your avahi advertised Linux box. All you have to do is assigning a device info part at the end of the avahi service file for AFP. I've updated this article to include this part. Please head back to the Configure Avahi and advertise services part in this article and edit your afpd.service file again if you've followed the first revision of this article. -![Oh no!](/media/coffee-cup-empty.png) +![Oh no!](../media/coffee-cup-empty.png) -Congratulations! You finally arrived at the end of my article. There's a good chance that your coffee or tea cup is now empty. But before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-Feed](http://www.kremalicious.com/feed/), discuss this article or buy me my next coffee. +Congratulations! You finally arrived at the end of my article. There's a good chance that your coffee or tea cup is now empty. But before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-Feed](/feed/), discuss this article or buy me my next coffee. # 9. Translations Of This Article diff --git a/_src/_posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md b/content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md similarity index 68% rename from _src/_posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md rename to content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md index e79e0a91..2d3ff1fc 100644 --- a/_src/_posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md +++ b/content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md @@ -1,18 +1,19 @@ --- -layout: post +type: post title: ApertureEdit is Edit for Aperture now, updated to 1.2 author: Matthias Kretschmann date: 2008-06-25 15:29:22+00:00 -wordpress_id: 77 -categories: -- photography + tags: +- photography - aperture --- -![Edit for Aperture logo](/media/apertureedit_logo2.png)The All-in-one Aperture adjustment plugin bundle from [Human Software](http://www.humansoftware.com) is now called Edit for Aperture or just [Edit](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html). The new version 1.2 can now apply multiple layers of curves correction at once and the interface gets a new split image view. Also "different compatibility issues for PowerPC users" were fixed according to the release notes. +![Edit for Aperture logo](../media/apertureedit_logo2.png)The All-in-one Aperture adjustment plugin bundle from [Human Software](http://www.humansoftware.com) is now called Edit for Aperture or just [Edit](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html). The new version 1.2 can now apply multiple layers of curves correction at once and the interface gets a new split image view. Also "different compatibility issues for PowerPC users" were fixed according to the release notes. + + The ApertureEdit plug-in is a bundle of 12 different modules for denoising, lens fixing, framing, light effects and many more. All effects can be applied to one image at a time or to a whole set of images at once and according to Human Software Edit offers more than 4000 professional effects. Just head over to the [product page](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) to see all effects and features this plugin bundle is capable of. diff --git a/content/posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md b/content/posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md new file mode 100644 index 00000000..95bc2df9 --- /dev/null +++ b/content/posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md @@ -0,0 +1,19 @@ +--- +type: 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 + +tags: +- 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. diff --git a/_src/_posts/2008-06-30-stone-head.md b/content/posts/2008-06-30-stone-head.md similarity index 77% rename from _src/_posts/2008-06-30-stone-head.md rename to content/posts/2008-06-30-stone-head.md index e40e4a2d..aed013f8 100644 --- a/_src/_posts/2008-06-30-stone-head.md +++ b/content/posts/2008-06-30-stone-head.md @@ -1,14 +1,11 @@ --- -layout: photo +type: photo title: Stone Head -image: stonehead.jpg +image: ../media/stonehead.jpg author: Matthias Kretschmann date: 2008-06-30 11:26:14+00:00 -wordpress_id: 1961 -categories: -- photos --- A stone made head which can be twittled. Halle(Saale)/Germany. Heavy Color Adjustements in Aperture 2.1 diff --git a/_src/_posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md b/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md similarity index 90% rename from _src/_posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md rename to content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md index d5c198b2..07be34e0 100644 --- a/_src/_posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md +++ b/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md @@ -1,18 +1,19 @@ --- -layout: post +type: post title: Everything Back To Normal On Kremalicious.com (Almost) author: Matthias Kretschmann date: 2008-07-01 16:39:02+00:00 -wordpress_id: 80 -categories: -- personal + tags: - - wordpress +- personal +- wordpress --- -![Server screwed](/media/xserve_screwed.png)As you may have noticed, kremalicious.com was a bit screwed in the last week and some of you have asked me via mail and twitter what exactly was wrong. So to satisfy the curious geek in you I will provide some informations about it. +![Server screwed](../media/xserve_screwed.png)As you may have noticed, kremalicious.com was a bit screwed in the last week and some of you have asked me via mail and twitter what exactly was wrong. So to satisfy the curious geek in you I will provide some informations about it. + + It all started with a move of my whole website to new and shiny servers with PHP 5 running by my host. I didn't heard of any incompatibilities between the latest Wordpress version running on PHP 5 and in fact Wordpress loves to use PHP 5. But somehow I wasn't able to update my site neither over http or ftp. Since I can contact my host admins directly ([thank you jpBerlin/Heinlein-Support!](http://www.jpberlin.de/)) this problem was addressed rather quickly. They just neglected to tell me that the server address for login also changed (I should have think of this too). So all my changes were applied to my Wordpress installation on the old server. Problem solved I thought. @@ -20,14 +21,14 @@ But more problems appeared. The display of the newest and latest posts and the n Now it's clear something with my code must be wrong, I thought. For displaying the latest posts in Wordpress I use a pretty standard way which is [described in the Wordpress Codex](http://codex.wordpress.org/Template_Tags/get_posts): -{% highlight php %} +```php
-{% endhighlight %} +``` This would get all recent posts sorted by their post_date entry in the (wp_posts) database table and style it as an unordered list with my preferred format. This code worked since the launch of kremalicious.com and I first used it to display the recent blog entries on my start page. But since i didn't change anything in the code this couldn't be caused by wrong code or something. @@ -39,7 +40,9 @@ This bug affects all versions of MySQL since 5.0.50 and it seems there is no sta Thankfully [a commenter](http://wordpress.org/support/topic/185896#post-793417) in the Wordpress forums reminded me of a nice temporary solution to this mess until my host updates MySQL: using wp_get_archives for displaying the recent posts. But this won't let me display the dates anymore: -{% highlight php %}{% endhighlight %} +```php + +``` Problem temporary solved! diff --git a/_src/_posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md b/content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md similarity index 93% rename from _src/_posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md rename to content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md index eab8925e..a2d10f14 100644 --- a/_src/_posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md +++ b/content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md @@ -1,32 +1,33 @@ --- -layout: post +type: post title: 'New Aperture Plug-Ins: Jade And PTLens' author: Matthias Kretschmann date: 2008-07-08 19:19:54+00:00 -wordpress_id: 84 -categories: -- photography + tags: +- photography - aperture --- +![image](../media/aperture-plugin128.png) + Last week two new image editing plug-ins were announced for Aperture 2.1: The PTLens plug-in for correcting barrel distortion, vignetting, chromatic aberration, and perspective and the Jade plug-in for automatic correction of color, levels and exposure. -![image](/media/aperture-plugin128.png) + The [PTLens plug-in](http://epaperpress.com/ptlens/) from [ePaperPress](http://epaperpress.com/) was available as a Photoshop plug-in in the past and is well known for its lens pincushion, barrel distortion, vignetting, chromatic aberration, and perspective correction abilities based on a lens model database similiar to [Kekus' LensFix CI plug-in](http://www.kekus.com/software/plugin.html). While I love the plug-ins ability to correct perspectives the Aperture plug-in doesn't work with RAW files(!), just with tiff and jpeg files which is one more way to compromise the way Aperture works (In my opinion the whole plug-in architecture of Aperture does that). And while I would love to show you the plug-ins user interface in Aperture PTLens refused to open either JPEG or TIFF files. So here's just a screenshot of the standalone application: -[![PTLens UI](/media/ptlens_ui_thumb.jpg)](/media/ptlens_ui.png) +[![PTLens UI](../media/ptlens_ui_thumb.jpg)](../media/ptlens_ui.png) So to me the PTLens plug-in for Aperture isn't finished yet. But you can download a [trial version from the plug-ins website](http://epaperpress.com/ptlens/media.html). The second plug-in recently released is the [Jade plug-in](http://jade.datamind.biz/) from Datamind. Because of its speed also on consumer Macs, Aperture 2 became popular among amateur photographers too. [Datamind](http://datamind.biz) targets it's first Aperture plug-in [Jade](http://jade.datamind.biz/) at this group. The former standalone application for Mac and Windows is now an Aperture adjustment plug-in for correcting your pictures colors, levels and exposure automatically with Dataminds own algorithm. And its user interface is very clean and uncluttered: -[![PTLens UI](/media/jade_ui_thumb.jpg)](/media/jade_ui.png) +[![PTLens UI](../media/jade_ui_thumb.jpg)](../media/jade_ui.png) While I have to say Jade produces very reasonable results it lacks a lot of controls and fails with complicated pictures where Aperture's adjustment controls wouldn't. So I would say this plug-in would be better as an iPhoto plug-in. Do you really want a blown up photoshop or tiff file for every photo you're going to correct in Aperture? diff --git a/_src/_posts/2008-07-11-enjoy-kremaliciousiphone.md b/content/posts/2008-07-11-enjoy-kremaliciousiphone.md similarity index 77% rename from _src/_posts/2008-07-11-enjoy-kremaliciousiphone.md rename to content/posts/2008-07-11-enjoy-kremaliciousiphone.md index 1ea50ab1..25013aef 100644 --- a/_src/_posts/2008-07-11-enjoy-kremaliciousiphone.md +++ b/content/posts/2008-07-11-enjoy-kremaliciousiphone.md @@ -1,18 +1,19 @@ --- -layout: post +type: post title: Enjoy Kremalicious{iPhone} author: Matthias Kretschmann date: 2008-07-11 00:20:22+00:00 -wordpress_id: 85 -categories: -- personal + tags: - - wordpress +- personal +- wordpress --- -![](/media/kremaliciousiphone_thumb.png)I'm thrilled to announce that kremalicious.com now uses an iPhone optimized theme. When you browse this website with your iPhone everything will automagically switch to the new kremalicious iPhone theme which is simply called kremalicious{iPhone}. See those hip brackets? +![](../media/kremaliciousiphone_thumb.png)I'm thrilled to announce that kremalicious.com now uses an iPhone optimized theme. When you browse this website with your iPhone everything will automagically switch to the new kremalicious iPhone theme which is simply called kremalicious{iPhone}. See those hip brackets? + + When the website detects an iPhone or iPod Touch it will automatically switch to another freshly created theme which is absolutely seamless to the user. This detection is done by the wonderful slim iPhone Wordpress plug-in from ContentRobot which was slightly modified by me. @@ -26,9 +27,9 @@ While Safari on iPhone will display all websites just fine it can happen that th The viewport can be larger or smaller than the visible area but I wanted my content to exactly fit the width of the iPhone and the goal was to make the text legible on first load. So here's what I use for kremalicious{iPhone}: -{% highlight html %} +```html -{% endhighlight %} +``` This code will let the user scale the content up to 1.6 times to the default view and the default width of the content is set to the width of the (iPhone) device. @@ -37,17 +38,17 @@ This code will let the user scale the content up to 1.6 times to the default vie There's neither an active nor a hover state for links on the iPhone which makes sense on a touch interface although it would be much easier to just use a:active for the tap highlighting. Safari on the iPhone uses a special webkit property for that: -{% highlight css %} --webkit-tap-highlight-color: rgba(234,234,234,0.5); -{% endhighlight %} +```css +-webkit-tap-highlight-color: rgba(234,234,234, .5); +``` # Home Screen Icon -![image](/media/kremalicious-iconiphone.png)I've used a 147x147px icon so the icon looks crisp and sharp on the iPhone screen (because it's a 160dpi screen). You really should use a bigger size than [Apple's recommendation in their iPhone HIG](https://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/chapter_14_section_2.html). You have to provide a png icon without rounded corners and without the highlight shine since the iPhone will render that automatically on the icon. The icon has to be named apple-touch-icon.png and gets automatically detected when put in the root of your website. Additionally you can tell the iPhone the place where the icon is with this link tag in your head section: +![image](../media/kremalicious-iconiphone.png)I've used a 147x147px icon so the icon looks crisp and sharp on the iPhone screen (because it's a 160dpi screen). You really should use a bigger size than [Apple's recommendation in their iPhone HIG](https://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/chapter_14_section_2.html). You have to provide a png icon without rounded corners and without the highlight shine since the iPhone will render that automatically on the icon. The icon has to be named apple-touch-icon.png and gets automatically detected when put in the root of your website. Additionally you can tell the iPhone the place where the icon is with this link tag in your head section: -{% highlight html %} +```html -{% endhighlight %} +``` And finally many thanks to [cschock](http://www.cschock.de) for continuously testing my code voodoo soup even at late hours. diff --git a/content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md b/content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md new file mode 100644 index 00000000..3f9c965b --- /dev/null +++ b/content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md @@ -0,0 +1,20 @@ +--- +type: post + +title: 'New Aperture Plug-In: Nik announces Silver Efex Pro' +author: Matthias Kretschmann + +date: 2008-07-11 19:13:16+00:00 + +tags: +- photography +- 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. diff --git a/_src/_posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md b/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md similarity index 81% rename from _src/_posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md rename to content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md index e248a8c6..b687878a 100644 --- a/_src/_posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md +++ b/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md @@ -1,26 +1,26 @@ --- -layout: post +type: post title: 'Wordpress 2.5+: Get Rid of That Sluggish Dashboard' author: Matthias Kretschmann date: 2008-07-15 14:04:46+00:00 -wordpress_id: 87 -categories: -- design tags: +- design - tutorial - wordpress --- -![Wordpress Logo by kremalicious](/media/wordpress-logo.png)Since Wordpress 2.5 it was nearly impossible for me to log into Wordpress and quickly head over to the write tab. The Dashboard always wants to load a bunch of things in it but this always seemed to fail in my setup and slow things down. And not enough the Dashboard just locks everything up while loading which can take more than one minute. +![Wordpress Logo by kremalicious](../media/wordpress-logo.png)Since Wordpress 2.5 it was nearly impossible for me to log into Wordpress and quickly head over to the write tab. The Dashboard always wants to load a bunch of things in it but this always seemed to fail in my setup and slow things down. And not enough the Dashboard just locks everything up while loading which can take more than one minute. + + I've searched for a simple way of disabling those feeds, plugins etc. stuff the Wordpress Dashboard tries to fill but it seems you can't disable these from the backend. But there's a quick way for doing this which involves editing your /wp-admin/index-extra.php and uncomment some lines there. This will leave your Dashboard intact while it stops Wordpress from connecting to various sources to screw your blog up when you just want to quickly write something. So open your `/wp-admin/index-extra.php` file. It should look like this: -{% highlight php %} +```php -{% endhighlight %} +``` Now just uncomment the lines so it looks like this (every line with two leading // is uncommented and therefore inactive): -{% highlight php %} +```php -{% endhighlight %} +``` And that's it. Save the file on your server, log in to your Wordpress backend and you should see your Dashboard with everything intact. It just won't search for incoming links and all those other RSS sources anymore. diff --git a/_src/_posts/2008-07-23-leaf-life.md b/content/posts/2008-07-23-leaf-life.md similarity index 68% rename from _src/_posts/2008-07-23-leaf-life.md rename to content/posts/2008-07-23-leaf-life.md index d76b96c0..bcb72d8d 100644 --- a/_src/_posts/2008-07-23-leaf-life.md +++ b/content/posts/2008-07-23-leaf-life.md @@ -1,16 +1,11 @@ --- -layout: photo +type: photo title: Leaf Life -image: MG_1920.jpg +image: ../media/MG_1920.jpg author: Matthias Kretschmann date: 2008-07-23 20:38:57+00:00 -wordpress_id: 1908 -categories: -- photos -post_format: -- Image --- Having fun with Aperture and Silver Efex Pro. diff --git a/_src/_posts/2008-08-03-tips-for-journalists-reporting-from-china.md b/content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md similarity index 97% rename from _src/_posts/2008-08-03-tips-for-journalists-reporting-from-china.md rename to content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md index db372b6f..f6dba4f8 100644 --- a/_src/_posts/2008-08-03-tips-for-journalists-reporting-from-china.md +++ b/content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md @@ -1,18 +1,20 @@ --- -layout: post +type: post title: Tips for Journalists Reporting From China author: Matthias Kretschmann date: 2008-08-03 17:10:25+00:00 -wordpress_id: 95 -categories: + +tags: - photography --- -![Jingjing and Chacha are watching you](/media/jingjing_chacha_kremalicious.jpg) +![Jingjing and Chacha are watching you](../media/jingjing_chacha_kremalicious.jpg) As you may know there's a huge Internet censorship going on in China. Contrary to promises made by chinese authorities and the International Olympic Committee (IOC) this Internet censorship is active during the Olympic Games [even in the international media centre](http://news.bbc.co.uk/2/hi/asia-pacific/7532338.stm). And the [IOC shares the current ideas of censorship in China](http://www.rsf.org/article.php3?id_article=26461). + + And as in every political system with totalitarian elements there's a good chance you will meet some angry lackeys if you're going to report about topics the chinese authorities don't want you to report. But more important they will threat your sources if their identity gets revealed. So if you want to report about [the water shortage in the villages around Beijing](http://www.voanews.com/english/2008-06-27-voa10.cfm), the [massive air pollution in Beijing](http://english.chosun.com/w21data/html/news/200807/200807300031.html) or about all the forced resettlements going on in China you should consider some security precautions to protect you and your sources. Especially there's two things to do here: First you have to use technologies to circumvent firewalls. Second is to secure your connections and your communication to protect you and your sources. diff --git a/_src/_posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md b/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md similarity index 79% rename from _src/_posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md rename to content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md index 75d28c57..eba3204c 100644 --- a/_src/_posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md +++ b/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md @@ -1,32 +1,34 @@ --- -layout: post +type: post title: 'HowTo: Create A Mobile Encrypted Aperture Vault' author: Matthias Kretschmann date: 2008-08-22 18:50:31+00:00 -wordpress_id: 142 -category: photography + tags: - - aperture - - tutorial - - osx - - macos + - photography + - aperture + - tutorial + - macos coinhive: true --- -![Niepce's Aperture Vault](/media/niepces_aperture_vault256.png)When on the road I always take a little mobile hard drive with me where all my referenced Aperture Masters from the past years and my mobile Aperture Vault (backing up the un-referenced Masters from the current year) reside. But being little and mobile also means the external hard drive can easily be lost or stolen exposing all my pictures to the thief. To avoid that you can use encryption so in the case of a lost or theft the data is not accessible by the thief. This can easily be done with [sparse bundle disk images](http://db.tidbits.com/article/9673) so you won't have to encrypt the whole hard drive with additional software. +![Niepce's Aperture Vault](../media/niepces_aperture_vault256.png)When on the road I always take a little mobile hard drive with me where all my referenced Aperture Masters from the past years and my mobile Aperture Vault (backing up the un-referenced Masters from the current year) reside. But being little and mobile also means the external hard drive can easily be lost or stolen exposing all my pictures to the thief. To avoid that you can use encryption so in the case of a lost or theft the data is not accessible by the thief. This can easily be done with [sparse bundle disk images](http://db.tidbits.com/article/9673) so you won't have to encrypt the whole hard drive with additional software. + + So in this quick tutorial I will show you how to create an encrypted Aperture Vault by using Sparse Bundle Disk Images and by utilizing tools built into Mac OS X. All this can be done in two simple steps. + ## 1. Create an encrypted disk image First you have to create the encrypted disk image where the Aperture Vault will reside. So fire up Disk Utility from the Utilities folder inside your Applications folder or use Spotlight to open it. Be sure there is no device or volume selected in the sidebar and click on the New Image icon in the toolbar. Set a file name of the disk image and the Volume Name (the name of the mounted disk image on your desktop). Change all the settings as seen in the following screenshot. Be sure to select sparse bundle disk image as the Image Format before changing the volume size. This way you can set a bigger volume size than your physical disk space available on your hard drive. After creation the disk image won't be as big as you have set it with volume size. It will grow as you write files to it. For maximum security (but slower performance) select 256-bit AES encryption in the Encryption drop down menu: -![](/media/securevault3.png) +![](../media/securevault3.png) Finally set the destination where you want to have the disk image created. To make it all mobile choose your mobile hard drive as destination. After clicking Create you will be asked to provide a password for encrypting the disk image. Be sure to click on the little key icon to use Mac OS X built in password generator. Generate a new extra long password. Type in your new password manually in the Verify field and be sure to check "Remember password in my keychain". This is the only time you have to provide the password since it will be saved in your keychain after clicking OK. @@ -40,15 +42,15 @@ Now your newly created sparse bundle disk image ahould be mounted on your deskto Now go to Aperture, choose the Projects tab and click on the little gear wheel at the bottom of the sidebar and choose "Add Vault" from the opened menu. -![](/media/securevault2.png) +![](../media/securevault2.png) In the opened dialogue select your mounted disk image under the devices section in your sidebar, give it a name and click Add. -![](/media/securevault4.png) +![](../media/securevault4.png) The new Vault will be added to your Vault list and is now to ready to be updated. -![](/media/securevault5.png) +![](../media/securevault5.png) Just click the little iSync-style arrow beside your Vault and the Vault be written to your encrypted disk image. When finished you can eject the disk image. It can now be mounted again just with the correct password which is stored in your keychain so won't even recognize the encryption. Of course, when you try to mount this disk image on another mac you have to type in the password or import the entry from your keychain. diff --git a/_src/_posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md b/content/posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md similarity index 83% rename from _src/_posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md rename to content/posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md index eee80418..e24c137e 100644 --- a/_src/_posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md +++ b/content/posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md @@ -1,21 +1,22 @@ --- -layout: post +type: post title: Noise Ninja finally available for Apple Aperture author: Matthias Kretschmann date: 2008-08-22 14:51:02+00:00 -wordpress_id: 120 -categories: -- photography + tags: +- photography - aperture --- -![image](/media/aperture-plugin128.png)Earlier this month [PictureCode](http://www.picturecode.com) finally released their noise reduction software [Noise Ninja](http://www.picturecode.com/media.htm) as an Aperture plug-in for Aperture 2.1 and above. +![image](../media/aperture-plugin128.png)Earlier this month [PictureCode](http://www.picturecode.com) finally released their noise reduction software [Noise Ninja](http://www.picturecode.com/media.htm) as an Aperture plug-in for Aperture 2.1 and above. The results are just as amazing as they are with the Photoshop plug-in. But the Aperture plug-in uses a streamlined interface which differs from the photoshop version. But the functionality is the same. + + You can [download a trial version of Noise Ninja for Aperture](http://www.picturecode.com/nn_aperture.htm) (images are watermarked with a grid pattern when you save them) and give it a try. The Noise Ninja plug-in for Aperture is available as a part of the [Pro Bundle (US$ 79.95)](http://www.picturecode.com/purchase.php) which includes the Photoshop and the Aperture plug-in. If you have an existing Pro Bundle license you can [upgrade it for US$ 20](http://www.picturecode.com/upgrade.php) to include the Aperture plug-in license. Interested in more Aperture plug-ins? Just have a look at my article [First overview: Aperture 2.1 adjustment plugins have arrived](http://www.kremalicious.com/2008/05/first-aperture-adjustment-plugins-have-arrived/) to get an overview about what's available at the moment or [browse my blog by the Aperture plug-in tag](http://www.kremalicious.com/tag/aperture-plug-in/). Additionally you can have a look at the [brand new Apple website for all the Aperture plug-ins and ressources](http://www.apple.com/aperture/resources/plugins.html). diff --git a/_src/_posts/2008-08-22-the-kremalicious-marsedit-style.md b/content/posts/2008-08-22-the-kremalicious-marsedit-style.md similarity index 80% rename from _src/_posts/2008-08-22-the-kremalicious-marsedit-style.md rename to content/posts/2008-08-22-the-kremalicious-marsedit-style.md index 79515d82..ccddae64 100644 --- a/_src/_posts/2008-08-22-the-kremalicious-marsedit-style.md +++ b/content/posts/2008-08-22-the-kremalicious-marsedit-style.md @@ -1,29 +1,31 @@ --- -layout: post +type: post title: The Kremalicious MarsEdit Style author: Matthias Kretschmann date: 2008-08-22 17:04:19+00:00 -wordpress_id: 122 -categories: + +tags: - goodies --- -![The Kremalicious MarsEdit Style](/media/marsedit_kremalicious.png)Personally I blog everything with RedSweater's awesome application [MarsEdit](http://www.red-sweater.com/marsedit/). MarsEdit has a cool preview window included where you can see your writing live while you type. The formatting of this preview is based on simple HTML and CSS so the style is pretty customizable. +![The Kremalicious MarsEdit Style](../media/marsedit_kremalicious.png)Personally I blog everything with RedSweater's awesome application [MarsEdit](http://www.red-sweater.com/marsedit/). MarsEdit has a cool preview window included where you can see your writing live while you type. The formatting of this preview is based on simple HTML and CSS so the style is pretty customizable. + + A while ago I've made a custom style for the blog on kremalicious.com and would like to share this style with you. The style is based on the colors used on kremalicious.com with a black background and light grey text on top of it. The links have the same blueish hover style as on my website: -[![The Kremalicious MarsEdit Style](/media/marsedit_kremalicious_big.png)](/media/marsedit_kremalicious_big.png) +[![The Kremalicious MarsEdit Style](../media/marsedit_kremalicious_big.png)](../media/marsedit_kremalicious_big.png) Here's how to apply the style for your blog preview in MarsEdit: In MarsEdit main window right-click (or ctrl + click) in the sidebar on the blog where you want to have my style applied to and choose Edit Preview Template. The Preview Template editor should open where you can customize the style of the preview with the css instructions in the header. -Just copy and paste the following HTML and CSS into your Preview Template editor. If something goes wrong with the source formatting, I've also provided [a txt file with the code](/media/marsedit_kremalicious.txt): +Just copy and paste the following HTML and CSS into your Preview Template editor. If something goes wrong with the source formatting, I've also provided [a txt file with the code](../media/marsedit_kremalicious.txt): -{% highlight html %} +```html @@ -70,7 +72,7 @@ Just copy and paste the following HTML and CSS into your Preview Template editor -{% endhighlight %} +``` Now click on Save Changes in the lower right corner of the window and there you have it. diff --git a/_src/_posts/2008-08-26-icy-box-icons.md b/content/posts/2008-08-26-icy-box-icons.md similarity index 61% rename from _src/_posts/2008-08-26-icy-box-icons.md rename to content/posts/2008-08-26-icy-box-icons.md index e1478526..09b2c28e 100644 --- a/_src/_posts/2008-08-26-icy-box-icons.md +++ b/content/posts/2008-08-26-icy-box-icons.md @@ -1,16 +1,15 @@ --- -layout: post +type: post title: Icy Box Icons -image: Teaser-Icy-Box.jpg -download: icybox_by_kremalicious.zip +image: ../media/Teaser-Icy-Box.jpg +download: ../media/icybox_by_kremalicious.zip author: Matthias Kretschmann date: 2008-08-26 19:16:38+00:00 -wordpress_id: 146 -categories: -- goodies + tags: +- goodies - icon redirect_from: @@ -19,12 +18,12 @@ redirect_from: A friend of mine asked me to craft an icon for his external hard drive case and I would like to share those with you too. These desktop icons show the the silver and black Icy Box external aluminium case with USB interface and are intended as a replacement for the generic external hard disk icon in Mac OS X Leopard. -As always these desktop icons are free for you personal and non-commercial use. All other usage of this copyrighted material [require my written permission](http://www.kremalicious.com/about/contact/). +As always these desktop icons are free for you personal and non-commercial use. All other usage of this copyrighted material require my written permission. -The whole package includes 7 icons either packed in a nice tagged iContainer for use with Candybar or in Mac + Win + Linux compatible formats. If you have such an Icy Box case grab the icons [from my Goodies page.](http://www.kremalicious.com/goodies/#icons) Have fun! +The whole package includes 7 icons either packed in a nice tagged iContainer for use with Candybar or in Mac + Win + Linux compatible formats. If you have such an Icy Box case grab the icons. Have fun!

- Download Icy Box Icons zip + Download Icy Box Icons zip

* Replacement icons for the silver and black Icy Box external aluminium case with USB interface @@ -32,4 +31,4 @@ The whole package includes 7 icons either packed in a nice tagged iContainer for * Leopard ready (512x512) * including 7 icons with 2 Time Machine versions -[![Icy Box Icons](/media/icybox_teaser2_small.png)](/media/icybox_teaser2.jpg) +[![Icy Box Icons](../media/icybox_teaser2_small.png)](../media/icybox_teaser2.jpg) diff --git a/_src/_posts/2008-08-28-architect-and-facade-theming-for-leopard.md b/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md similarity index 73% rename from _src/_posts/2008-08-28-architect-and-facade-theming-for-leopard.md rename to content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md index 8bd04701..62a65620 100644 --- a/_src/_posts/2008-08-28-architect-and-facade-theming-for-leopard.md +++ b/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md @@ -1,24 +1,23 @@ --- -layout: post +type: post title: 'Architect and Façade: Theming For Leopard' author: Matthias Kretschmann date: 2008-08-28 09:54:06+00:00 -wordpress_id: 156 -category: design + tags: - - osx - - macos + - design + - macos --- -![Architect icon](/media/architect-icon.jpg)There's good news for all you Mac OS X Leopard GUI Themer out there. While there's Panic's [Candybar](http://www.panic.com/candybar) for icon customization in OS X there is no application to alter all the user interface elements of Leopard. In Tiger there was an application called ShapeShifter but since the whole GUI in Leopard changed it stopped working. Architect and Façade to the rescue. +![Architect icon](../media/architect-icon.jpg)There's good news for all you Mac OS X Leopard GUI Themer out there. While there's Panic's [Candybar](http://www.panic.com/candybar) for icon customization in OS X there is no application to alter all the user interface elements of Leopard. In Tiger there was an application called ShapeShifter but since the whole GUI in Leopard changed it stopped working. Architect and Façade to the rescue. [SlightlyPretentious](http://www.slightlypretentious.com/) announced its "Theming made easy"-application Architect is coming as a public beta next sunday (is it 08/31 or 09/07?) on Wednesday, September 3rd. Icon Designer Laurent Baumann already posted [a new sweet application icon](http://www.flickr.com/photos/avetenebrae/2669353476/) for this app a while ago and we can expect a nice and good looking solution for theming and customization in Leopard. Head over to [the Screencast](http://www.slightlypretentious.com/) and see Architect and its UI in action. -![Architect UI](/media/architect-ui.png) +![Architect UI](../media/architect-ui.png) While Architect will help you customizing Leopards UI and building themes out of your modifications, Façade ([Laurent's icon of it](http://www.flickr.com/photos/avetenebrae/2665823420/in/photostream/)) will help you switch (and manage?) the themes. But currently there's no word on the [SlightlyPretentious](http://www.slightlypretentious.com/) website about this application. @@ -29,4 +28,4 @@ Still no sight of Façade anywhere except the [note of a Lead Developer change]( But meanwhile another theme manager was released: [Magnifique](http://magnifique.pcwizcomputer.com/), available as a free download. -![Magnifique UI](/media/magnifique-ui.png) +![Magnifique UI](../media/magnifique-ui.png) diff --git a/content/posts/2008-08-28-canon-eos-50d-new-lens-announced.md b/content/posts/2008-08-28-canon-eos-50d-new-lens-announced.md new file mode 100644 index 00000000..46ef0c44 --- /dev/null +++ b/content/posts/2008-08-28-canon-eos-50d-new-lens-announced.md @@ -0,0 +1,29 @@ +--- +type: post + +title: Canon EOS 50D And New Lens Officially Announced +author: Matthias Kretschmann + +date: 2008-08-28 11:28:33+00:00 + +tags: +- 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. + + + +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. diff --git a/_src/_posts/2008-09-01-a-new-browser-is-coming-google-chrome.md b/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md similarity index 96% rename from _src/_posts/2008-09-01-a-new-browser-is-coming-google-chrome.md rename to content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md index 6432f01a..d3033c85 100644 --- a/_src/_posts/2008-09-01-a-new-browser-is-coming-google-chrome.md +++ b/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md @@ -1,16 +1,14 @@ --- -layout: post +type: post title: 'A New Browser Is Coming: Google Chrome' author: Matthias Kretschmann -image: googlechrome.png +image: ../media/googlechrome.png date: 2008-09-01 20:40:38+00:00 -wordpress_id: 197 -categories: -- design tags: +- design - google --- @@ -30,7 +28,7 @@ Update 2: Google Chrome can now be downloaded for Windows from [google.com/chrom Update 3: Google Chrome seems to have problems with some of my transparent PNGs: -![Chrome UI](/media/chrome-ui.png) +![Chrome UI](../media/chrome-ui.png) Update 4: There are some nice articles about various aspects of Chrome available in the web: diff --git a/_src/_posts/2008-09-23-a-long-time-ago.md b/content/posts/2008-09-23-a-long-time-ago.md similarity index 86% rename from _src/_posts/2008-09-23-a-long-time-ago.md rename to content/posts/2008-09-23-a-long-time-ago.md index 9fcacc44..736d4ab7 100644 --- a/_src/_posts/2008-09-23-a-long-time-ago.md +++ b/content/posts/2008-09-23-a-long-time-ago.md @@ -1,15 +1,14 @@ --- -layout: photo +type: photo title: A Long Time Ago... -image: A-Long-Time-Ago.jpg +image: ../media/A-Long-Time-Ago.jpg author: Matthias Kretschmann date: 2008-09-23 20:33:48+00:00 -wordpress_id: 1905 -category: photos + tags: - - mac + - mac --- ... this used to be a nice entry-level Apple monitor (Apple Multiple Scan 20). However, it took more than 10 years 'til it refused to display red and green. diff --git a/_src/_posts/2008-09-23-futurama-mars-university-wallpaper.md b/content/posts/2008-09-23-futurama-mars-university-wallpaper.md similarity index 75% rename from _src/_posts/2008-09-23-futurama-mars-university-wallpaper.md rename to content/posts/2008-09-23-futurama-mars-university-wallpaper.md index 9209a493..140bf15b 100644 --- a/_src/_posts/2008-09-23-futurama-mars-university-wallpaper.md +++ b/content/posts/2008-09-23-futurama-mars-university-wallpaper.md @@ -1,16 +1,16 @@ --- -layout: post +type: post title: Futurama Mars University Wallpaper -image: Teaser-Mars-U.jpg +image: ../media/Teaser-Mars-U.jpg author: Matthias Kretschmann date: 2008-09-23 23:22:16+00:00 -wordpress_id: 256 -category: goodies + tags: - - wallpaper - - futurama + - goodies + - wallpaper + - futurama coinhive: true @@ -23,5 +23,5 @@ Show your geeky love for extraterrestrial universities! This is a simple Futuram As usual you can [grab the whole zip package from my Goodies page](http://www.kremalicious.com/goodies/#wall) and have fun.

- Download Futurama Mars U Wallpaper zip + Download Futurama Mars U Wallpaper zip

diff --git a/_src/_posts/2008-10-23-coffee-cup-icon.md b/content/posts/2008-10-23-coffee-cup-icon.md similarity index 76% rename from _src/_posts/2008-10-23-coffee-cup-icon.md rename to content/posts/2008-10-23-coffee-cup-icon.md index fb97e297..0f4950f4 100644 --- a/_src/_posts/2008-10-23-coffee-cup-icon.md +++ b/content/posts/2008-10-23-coffee-cup-icon.md @@ -1,16 +1,15 @@ --- -layout: post +type: post title: Coffee Cup Icon -image: Teaser-Coffee-Cup-Icon.jpg -download: coffee_cup_by_kremalicious.zip +image: ../media/Teaser-Coffee-Cup-Icon.jpg +download: ../media/coffee_cup_by_kremalicious.zip author: Matthias Kretschmann date: 2008-10-23 14:59:23+00:00 -wordpress_id: 1817 -categories: -- goodies + tags: +- goodies - icon --- @@ -25,5 +24,5 @@ I’ve just released my own coffee cup icon, enjoy: ## Download

- Download Coffee Cup Icons + Download Coffee Cup Icons

diff --git a/_src/_posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md b/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md similarity index 65% rename from _src/_posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md rename to content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md index d2ea267e..727316a1 100644 --- a/_src/_posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md +++ b/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md @@ -1,13 +1,13 @@ --- -layout: post +type: post title: The Finest Coffee Cups - Most Incredible Coffee Icons On The Web author: Matthias Kretschmann -image: coffee-cup-icon-kremalicious.png +image: ../media/coffee-cup-icon-kremalicious.png date: 2008-10-23 02:23:39+00:00 -wordpress_id: 277 -categories: + +tags: - design --- @@ -23,7 +23,7 @@ Please note that these icons are the property of their respective owners and you A bunch of colorful cups of coffee. -[![Coffee Cup icons by Susumo Yoshida](/media/coffee-showcase-susumo.png)](http://www.mcdodesign.com/?page_id=22) +[![Coffee Cup icons by Susumo Yoshida](../media/coffee-showcase-susumo.png)](http://www.mcdodesign.com/?page_id=22) @@ -32,7 +32,7 @@ A bunch of colorful cups of coffee. A hyperrealistic icon from Vegrafik -[![CoffeeCon icon by Vegrafik](/media/coffee-showcase-vegrafik.png)](http://macthemes2.net/forum/viewtopic.php?id=16789993) +[![CoffeeCon icon by Vegrafik](../media/coffee-showcase-vegrafik.png)](http://macthemes2.net/forum/viewtopic.php?id=16789993) @@ -41,7 +41,7 @@ A hyperrealistic icon from Vegrafik In a fit of megalomania I declared my icon as incredible and included it here. Originally I've made the coffee cup for the donations button on kremalicious.com. -[![Coffee Cup Icon by kremalicious](/media/coffee-showcase-kretschmann.png)](/coffee-cup-icon) +[![Coffee Cup Icon by kremalicious](../media/coffee-showcase-kretschmann.png)](/coffee-cup-icon) @@ -50,7 +50,7 @@ In a fit of megalomania I declared my icon as incredible and included it here. O The one and only Mac OS X system replacement icon set has some coffee folders too. -[![Coffee folders from Agua Icons by David Lanham](/media/coffee-showcase-lanham.png)](http://dlanham.com/art/agua/) +[![Coffee folders from Agua Icons by David Lanham](../media/coffee-showcase-lanham.png)](http://dlanham.com/art/agua/) @@ -59,14 +59,14 @@ The one and only Mac OS X system replacement icon set has some coffee folders to Coffee in a metal cup. Sadly Dave didn't updated his World of Aqua icon pack with bigger sizes so it's just 128px. -[![Kaffe! icon from World of Aqua 3 icon set by Dave Brasgalla](/media/coffee-showcase-brasgalla.png)](http://iconfactory.com/freeware/preview/woa3) +[![Kaffe! icon from World of Aqua 3 icon set by Dave Brasgalla](../media/coffee-showcase-brasgalla.png)](http://iconfactory.com/freeware/preview/woa3) ## Starbucks coffee icon by Rok Benedik -[![Starbucks coffee icon by Benedik](/media/coffee-showcase-benedik.png)](http://benedik.deviantart.com/art/Starbucks-coffee-icons-96173293) +[![Starbucks coffee icon by Benedik](../media/coffee-showcase-benedik.png)](http://benedik.deviantart.com/art/Starbucks-coffee-icons-96173293) @@ -75,7 +75,7 @@ Coffee in a metal cup. Sadly Dave didn't updated his World of Aqua icon pack wit Also Jonas used coffee as the metaphor for the work folder (supposedly) and made clear he likes very big coffee cups. -[![Coffee folders from the Maji sets by Jonas Rask](/media/coffee-showcase-rask1.png)](http://www.jonasraskdesign.com/medias/medias.html) +[![Coffee folders from the Maji sets by Jonas Rask](../media/coffee-showcase-rask1.png)](http://www.jonasraskdesign.com/medias/medias.html) @@ -84,14 +84,14 @@ Also Jonas used coffee as the metaphor for the work folder (supposedly) and made Does this application need any introduction? Although not released yet the new web-coding application from MacRabbit drew a lot of attention. The icon is one of the reasons for that. -[![Espresso icon by MacRabbit](/media/coffee-showcase-macrabbit.png)](http://macrabbit.com/espresso/) +[![Espresso icon by MacRabbit](../media/coffee-showcase-macrabbit.png)](http://macrabbit.com/espresso/) ## Coffee folders from the Pry system sets by Jonas Rask Another folder-combined-with-coffee icon by Jonas. -[![Coffee folders from the Pry system sets by Jonas Rask](/media/coffee-showcase-rask2.png)](http://www.jonasraskdesign.com/medias/medias.html) +[![Coffee folders from the Pry system sets by Jonas Rask](../media/coffee-showcase-rask2.png)](http://www.jonasraskdesign.com/medias/medias.html) @@ -100,7 +100,7 @@ Another folder-combined-with-coffee icon by Jonas. A glass coffee cup which is [wildly used](http://abduzeedo.com/amazing-photoshop-light-effect-10-steps) on the web. Created for Windows so the icons are just 256px in size. -[![Coffee icons from Office Space icon set by VisualPharm](/media/coffee-showcase-visualpharm.png)](http://www.visualpharm.com/office_space.html) +[![Coffee icons from Office Space icon set by VisualPharm](../media/coffee-showcase-visualpharm.png)](http://www.visualpharm.com/office_space.html) @@ -109,14 +109,14 @@ A glass coffee cup which is [wildly used](http://abduzeedo.com/amazing-photoshop An icon set made in collaboration between [Alejandro Lopez](http://www.dimensionofdeskmod.net/medias/) & [Sergio Ruiz](http://www.camtessadesign.com/descargas/ver/the_coffee_shop) with icons related to a coffee shop. -[![The Coffee Shop icon set by Alejandro Lopez & Sergio Ruiz](/media/coffee-showcase-lopezruiz.png)](http://RuizDesign.deviantart.com/art/The-Coffee-Shop-89457309) +[![The Coffee Shop icon set by Alejandro Lopez & Sergio Ruiz](../media/coffee-showcase-lopezruiz.png)](http://RuizDesign.deviantart.com/art/The-Coffee-Shop-89457309) ## Espresso icon by Iiro Jäppinen -[![Espresso icon by Iiro Jäppinen](/media/coffee-showcase-jaeppinen.png)](http://iirojappinen.com/medias.html) +[![Espresso icon by Iiro Jäppinen](../media/coffee-showcase-jaeppinen.png)](http://iirojappinen.com/medias.html) @@ -125,7 +125,7 @@ An icon set made in collaboration between [Alejandro Lopez](http://www.dimension Not an icon but the coffee cup drawn in this wallpaper from Michael Flarup would make a good one. The detail of the cup is stunning. -[![Coffee Wallpaper by Michael Flarup](/media/coffee-showcase-flarup.png)](http://pixelresort.com/wallpapers/) +[![Coffee Wallpaper by Michael Flarup](../media/coffee-showcase-flarup.png)](http://pixelresort.com/wallpapers/) @@ -134,7 +134,7 @@ Not an icon but the coffee cup drawn in this wallpaper from Michael Flarup would Bean is a free word processor for Mac OS X and Laurent Baumann included a nice coffee cup in the application icon for it. -[![Bean icon by Laurent Baumann](/media/coffee-showcase-baumann.png)](http://www.bean-osx.com/Bean.html) +[![Bean icon by Laurent Baumann](../media/coffee-showcase-baumann.png)](http://www.bean-osx.com/Bean.html) @@ -143,7 +143,7 @@ Bean is a free word processor for Mac OS X and Laurent Baumann included a nice c Nice shiny coffee cups with a lot of detail in the reflections. Sadly just in 128px size maximum. Maybe you can [persuade mat-u to update this icon with bigger sizes.](http://www.mat-u.com/) -[![Have A Break icons by mat-u](/media/coffee-showcase-matu.png)](http://mat-u.deviantart.com/art/Have-A-Break-Icons-54326598) +[![Have A Break icons by mat-u](../media/coffee-showcase-matu.png)](http://mat-u.deviantart.com/art/Have-A-Break-Icons-54326598) @@ -152,7 +152,7 @@ Nice shiny coffee cups with a lot of detail in the reflections. Sadly just in 12 Apple uses a nice coffee cup in their Java applications which can be found in the Utilities folder. Thanks to [David](http://dlanham.com/) for pointing this out. -![Java Application icons by Apple](/media/coffee-showcase-apple.png) +![Java Application icons by Apple](../media/coffee-showcase-apple.png) @@ -161,7 +161,7 @@ Apple uses a nice coffee cup in their Java applications which can be found in th Trevor Kay made the new icon for Caffeine. This application prevents your Mac from automatically going to sleep. Trevor also made [some additional icons for Caffeine](http://God-X.deviantart.com/art/Caffeine-Replacement-Icons-75619389) although the coffee cup looks pretty much the same as the one from Apple's Java application icons. -[![Caffeine icon by Trevor Kay](/media/coffee-showcase-kaycaffeine.png)](http://lightheadsw.com/caffeine/) +[![Caffeine icon by Trevor Kay](../media/coffee-showcase-kaycaffeine.png)](http://lightheadsw.com/caffeine/) @@ -170,7 +170,7 @@ Trevor Kay made the new icon for Caffeine. This application prevents your Mac fr Some comic style icons which deviate from the realism of all the other coffee icons. Sadly just available in 128px size. -[![Coffee and Tea icons by Kate England](/media/coffee-showcase-england.png)](http://iconfactory.com/freeware/preview/cofe) +[![Coffee and Tea icons by Kate England](../media/coffee-showcase-england.png)](http://iconfactory.com/freeware/preview/cofe) @@ -179,7 +179,7 @@ Some comic style icons which deviate from the realism of all the other coffee ic Dave made an icon set for the Iconfactory inspired by the classic sci-fi television series of the 70's and included a Moon Coffee cup. Also just in 128px size. -[![Moon Coffee icon from Space: 1999 icon set by Dave Brasgalla](/media/coffee-showcase-brasgalla2.png)](http://iconfactory.com/freeware/preview/1999) +[![Moon Coffee icon from Space: 1999 icon set by Dave Brasgalla](../media/coffee-showcase-brasgalla2.png)](http://iconfactory.com/freeware/preview/1999) @@ -188,7 +188,7 @@ Dave made an icon set for the Iconfactory inspired by the classic sci-fi televis Acrylic Software's "new type of newsreader for Mac OS X Leopard" called [Times](http://www.acrylicapps.com/times/) uses a gorgeous icon made by Mikio Inose. -[![Times Application Icon by Mikio Inose](/media/coffee-showcase-times.png)](http://www.mikworks.com/clientwork/times/) +[![Times Application Icon by Mikio Inose](../media/coffee-showcase-times.png)](http://www.mikworks.com/clientwork/times/) @@ -197,7 +197,7 @@ Acrylic Software's "new type of newsreader for Mac OS X Leopard" called [Times]( One delicious full and one empty cappuccino cup re available in this icon set made by Creative 9 Design. Available just in 256px from their [blog](http://www.c9-d.com/blog/view/63). -[![Do you love Cappuccino? by Creative 9 Design](/media/coffee-showcase-lovecappu.png)](http://www.c9-d.com/blog/view/63) +[![Do you love Cappuccino? by Creative 9 Design](../media/coffee-showcase-lovecappu.png)](http://www.c9-d.com/blog/view/63) @@ -206,7 +206,7 @@ One delicious full and one empty cappuccino cup re available in this icon set ma Not a coffee cup but also very coffee related is this awesome Cappuccino machine icon (although it shows an Espresso machine) made by [Sofa](http://www.madebysofa.com) for the Cappuccino framework. -[![Cappuccino Framework Icon by Sofa](/media/coffee-showcase-cappuccinosofa.png)](http://cappuccino.org/) +[![Cappuccino Framework Icon by Sofa](../media/coffee-showcase-cappuccinosofa.png)](http://cappuccino.org/) @@ -217,16 +217,16 @@ Not a coffee cup but also very coffee related is this awesome Cappuccino machine Finally here're some nice high quality tutorials for you to help you build your own coffee cup. - * ![](/media/coffee-showcase-tut-psdtuts.png)[Using Gradients to Make Light and Shadow - and a Coffee Cup!](http://psdtuts.com/tutorials-effects/using-gradients-to-make-light-and-shadow-and-a-coffee-cup/) + * ![](../media/coffee-showcase-tut-psdtuts.png)[Using Gradients to Make Light and Shadow - and a Coffee Cup!](http://psdtuts.com/tutorials-effects/using-gradients-to-make-light-and-shadow-and-a-coffee-cup/) Collis from [psdtuts](http://psdtuts.com) made a nice tutorial with a similar perspective as found in [my Coffee Cup Icon](http://www.kremalicious.com/goodies/). - * ![](/media/coffee-showcase-tut-houle.png)[Design A Coffee Mug Icon](http://www.myinkblog.com/2008/08/02/design-a-coffee-mug-icon/) + * ![](../media/coffee-showcase-tut-houle.png)[Design A Coffee Mug Icon](http://www.myinkblog.com/2008/08/02/design-a-coffee-mug-icon/) Photoshop tutorial by Andrew Houle for creating a coffee cup icon. - * ![](/media/coffee-showcase-tut-vectuts.png)[Creating a Coffee Cup with Inkscape](http://vectortuts.com/illustration/creating-a-coffee-cup-with-inkscape/) + * ![](../media/coffee-showcase-tut-vectuts.png)[Creating a Coffee Cup with Inkscape](http://vectortuts.com/illustration/creating-a-coffee-cup-with-inkscape/) Peter Anglea with a nice vector tutorial using the open source vector app Inkscape. - * ![](/media/coffee-showcase-tut-abduzeedo.png)[Amazing Photoshop Light Effect In 10 Steps](http://abduzeedo.com/amazing-photoshop-light-effect-10-steps) + * ![](../media/coffee-showcase-tut-abduzeedo.png)[Amazing Photoshop Light Effect In 10 Steps](http://abduzeedo.com/amazing-photoshop-light-effect-10-steps) Not an icon tutorial but Fabio Sasso achieves some awesome light effects combined with the coffee cup from the [Office Space icon set](http://www.visualpharm.com/office_space.html). diff --git a/_src/_posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md b/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md similarity index 97% rename from _src/_posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md rename to content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md index 4b57f1ed..7c20d088 100644 --- a/_src/_posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md +++ b/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md @@ -1,15 +1,14 @@ --- -layout: post +type: post title: The Definite Guide To Watermarks In Apple Aperture author: Matthias Kretschmann -image: watermark_aperture.jpg +image: ../media/watermark_aperture.jpg date: 2008-10-26 16:05:58+00:00 -wordpress_id: 318 -categories: -- photography + tags: +- photography - aperture coinhive: true @@ -27,7 +26,7 @@ In this article I will lay out every way I've found to add watermarks to your im Aperture has built-in support for watermarking your images on export. But you have to create a watermark image in a bitmap graphic editor like [Photoshop](http://www.adobe.com/products/photoshop/photoshop/), [Pixelmator](http://www.pixelmator.com/) or [Acorn](http://flyingmeat.com/acorn/) before you can start adding watermarks. But I've written a detailed article about how to use this feature of Aperture back in May 2008 named [HowTo: Use high-quality watermarks in your images with Aperture 2.1](http://www.kremalicious.com/2008/05/high-quality-watermarks-with-aperture/). In short, you have to create your watermark image first and then define it in a new export preset. In the end all images exported with this preset will have your defined watermark image on them. If you want to watermark your images the Aperture way be sure to [check out my tutorial](http://www.kremalicious.com/2008/05/high-quality-watermarks-with-aperture/). -![Aperture Watermark](/media/watermark_8.png) +![Aperture Watermark](../media/watermark_8.png) This way is perfect if you want to watermark a lot of images at once or if your copyright info doesn't change often. And this works with Aperture's Web Journal or Web Page feature if you add a watermark image to the export presets for that. Also this works with any other export plug-in in Aperture which utilizes the export presets, like the [FlickrExport](http://connectedflow.com/flickrexport/aperture/) plug-in. You just have to create e.g. a flickr export preset, define your watermark image there and chose it inside of FlickrExport from the export preset dropdown list. @@ -57,7 +56,7 @@ Because of Aperture's workflow design you're always free to open up your image i Now you can just right click or ctrl + click on every image to open the context menu and choose Edit With whereas the first entry will be your external editor set in the preferences. Aperture will automatically render your image creating a new file and opens that up. Just add a new text layer in your external editor, type in your preferred text and save the file from there. Aperture will update with the changes accordingly. -![Aperture Watermark example 5](/media/watermark_5.png) +![Aperture Watermark example 5](../media/watermark_5.png) @@ -83,7 +82,7 @@ But since Aperture always creates a psd or tiff file for that you will end up wi But it has some powerful features in terms of watermarking: It can read out some IPTC fields to use the text as your copyright text, it is capable of saving presets and you can open several images at once in the plug-in window. So it works similar to Aperture's built-in watermarking feature but gives you full control over the watermark look without leaving Aperture. -![Aperture BorderFX](/media/aperture_borderfx.png) +![Aperture BorderFX](../media/aperture_borderfx.png) @@ -101,7 +100,7 @@ But you can't see your changes made in the plug-in on the images in your library With the release of Aperture 2.1 and its Edit Plug-In architecture Apple also released some sample plug-ins which aren't included in Aperture (just the Dodge & Burn plug-in is). But you can easily [download it from Apple’s Developer Connection website without registration](http://developer.apple.com/samplecode/BordersAndTitles/index.html) for free. -![Borders & Titles](/media/aperture_bt.png) +![Borders & Titles](../media/aperture_bt.png) @@ -118,7 +117,7 @@ As with every Edit Plug-In every time you fire up an image with this plug-in Ape [Impression](http://www.bluecrowbar.com/software/impressionaperture/) is an Aperture Edit Plug-In from [Blue Crowbar Software](http://www.bluecrowbar.com) released in Sept. 2009. The developer claims it's mainly targeted for those people who want to have a copy of their watermarked image within Aperture. Also there's a nice blog post by the developer lining out [why he thinks this plug-in beats Aperture's builtin watermarks.](http://www.bluecrowbar.com/blog/posts/impression-for-aperture.html) -![Impression Watermark Plug-In](/media/aperture-impression.png) +![Impression Watermark Plug-In](../media/aperture-impression.png) This plug-in is pretty powerful and probably the best choice for watermarking your images in Aperture through an Edit Plug-In workflow. Watermarking multiple photos at once is also possible and you can use existing PSD or PNG images as a watermark image as well as from a RTF text file. Apart from the functionality it also has a quite beautiful UI with the controls laying over your image. diff --git a/_src/_posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md b/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md similarity index 92% rename from _src/_posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md rename to content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md index 513be3ce..57f1828d 100644 --- a/_src/_posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md +++ b/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md @@ -1,15 +1,13 @@ --- -layout: post +type: post title: 'HowTo: Set A Custom Gravatar Image In Wordpress 2.7+' author: Matthias Kretschmann date: 2008-12-11 22:59:06+00:00 -wordpress_id: 344 -categories: -- design tags: +- design - tutorial - wordpress @@ -19,12 +17,14 @@ redirect_from: - /2008/12/how-to-set-a-custom-gravatar-image-in-wordpress-27/ --- -![Wordpress Logo by kremalicious](/media/wordpress-logo.png) +![Wordpress Logo by kremalicious](../media/wordpress-logo.png) Sure enough I've upgraded immediately when [Wordpress 2.7 was released](http://wordpress.org/development/2008/12/coltrane/). Among all the other things that changed in this new version the comments functions got a massive overhaul. But the [new comment loop](http://codex.wordpress.org/Migrating_Plugins_and_Themes_to_2.7/Enhanced_Comment_Display#The_Comments_Loop) with the [new function ``](http://codex.wordpress.org/Template_Tags/wp_list_comments) lacks the ability to quickly set a custom default gravatar or avatar image. But with some help of the functions.php file we can set the default gravatar image in the Discussion settings in the Wordpress backend. + + Before Wordpress 2.7 I achieved a custom gravatar image on kremalicious.com with this code placed in the comments.php template file: -{% highlight php %} +```php -{% endhighlight %} +``` So we were able to set a path to our image we wanted to use as the default gravatar image. But with Wordpress 2.7 we have the new function [``](http://codex.wordpress.org/Template_Tags/wp_list_comments) which pretty much simplifies writing comment template code. Although it has a parameter for the avatar size it doesn't have one for setting a custom image like before. But we can use the functions.php file in your template directory and add some lines to it: (If you don't have a functions.php file just create one.) -{% highlight php %} +```php -{% endhighlight %} +``` Just set a name for your custom Gravatar image to show up beside the image in the Wordpress back-end. The code above assumes you have your custom default gravatar image inside a folder called images inside your template directory. Change it to your environment if neccessary. After that a new entry in the Wordpress backend under Settings > Discussions will appear with the custom image specified: -![custom gravatar](/media/custom-gravatar.jpg) +![custom gravatar](../media/custom-gravatar.jpg) And you can adjust the displayed size of the gravatar image by adding a parameter to `` function in your comments.php file: -{% highlight php %} +```php 70, )); ?> -{% endhighlight %} +``` diff --git a/_src/_posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md b/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md similarity index 88% rename from _src/_posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md rename to content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md index c59a8f7a..193e3263 100644 --- a/_src/_posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md +++ b/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md @@ -1,27 +1,27 @@ --- -layout: post +type: post title: 'HowTo: Styling Author Comments With Wordpress 2.7+' author: Matthias Kretschmann date: 2008-12-13 16:47:43+00:00 -wordpress_id: 360 -categories: -- design tags: +- design - tutorial - wordpress coinhive: true --- -![Wordpress Logo by kremalicious](/media/wordpress-logo.png) +![Wordpress Logo by kremalicious](../media/wordpress-logo.png) Since my update to Wordpress 2.7 I'm pretty much into all the new comments stuff. As [I've written before](http://www.kremalicious.com/2008/12/how-to-set-a-custom-gravatar-image-in-wordpress-27/), the comment functionality changed dramatically with Wordpress 2.7. This makes writing a comments template much easier but if you used Worpress prior to 2.7 you have to change some things to work again. Beside other things this includes [Gravatar styling](http://www.kremalicious.com/2008/12/how-to-set-a-custom-gravatar-image-in-wordpress-27/) and also adding different styling to comments from the author of an article. In this article I will show you how to realize the latter with Wordpress 2.7 and above. + + Let's start by looking at the code to achieve styling of author comments prior to Wordpress 2.7. On kremalicious.com I've used this code: -{% highlight php %} +```php
  • other comments code
    • -{% endhighlight %} +``` So with some php stuff we were able to check for the author name or, as I did it, for the URL of the comment author. If one of these were detected Wordpress added a new class 'author' to the `
  • ` tag which we were able to style by adding a li.author to our css file: - {% highlight css %}li.author { css comes in here }{% endhighlight %} +```css +li.author { /* css comes in here */ } +``` But with Wordpress 2.7 these steps are needless because of the [new function ``](http://codex.wordpress.org/Template_Tags/wp_list_comments) which adds a class on author comments for itself! If a comment from the author of an article is posted under this article, **Wordpress automatically adds the class 'bypostauthor' to the surrounding `
  • ` tag.** So all you have to do is adding a css style of `li.bypostauthor` to your css file or just renaming your old `li.author` class or whatever you used for this: - {% highlight css %}li.bypostauthor { css comes in here }{% endhighlight %} +```css +li.bypostauthor { /* css comes in here */ } +``` And that's it for adding a different style to comments from the article author. Just add some css and there you go. Wonderful! @@ -49,6 +53,8 @@ And that's it for adding a different style to comments from the article author. Wordpress also has a special class for registered users of your site so you're able to style their comments as well. For this just use the class 'byuser': -{% highlight css %}li.byuser { css comes in here }{% endhighlight %} +```css +li.byuser { /* css comes in here */ } +``` All the various classes Wordpress adds to comments are listed [in the Codex page for enhanced comments display](http://codex.wordpress.org/Migrating_Plugins_and_Themes_to_2.7/Enhanced_Comment_Display#CSS_Styling). And [here's a very nice grahical overview about everything Wordpress 2.7 adds to comments](http://www.wp-fun.co.uk/2008/12/10/27-comment-classes/). diff --git a/_src/_posts/2009-01-05-the-mac-in-futurama.md b/content/posts/2009-01-05-the-mac-in-futurama.md similarity index 75% rename from _src/_posts/2009-01-05-the-mac-in-futurama.md rename to content/posts/2009-01-05-the-mac-in-futurama.md index 2147d0f7..ee6b2f20 100644 --- a/_src/_posts/2009-01-05-the-mac-in-futurama.md +++ b/content/posts/2009-01-05-the-mac-in-futurama.md @@ -1,20 +1,18 @@ --- -layout: post +type: post title: The Mac in Futurama author: Matthias Kretschmann date: 2009-01-05 03:14:45+00:00 -image: futurama-mac-teaser.png -category: design +image: ../media/futurama-mac-teaser.png + tags: - - futurama - - mac + - design + - futurama + - mac coinhive: true - -slug: the-mac-in-futurama -wordpress_id: 440 --- Time for some Mac Futurama crossover geekiness! In a fun watching process I've compiled a list of all the references to Apple's Macintosh and other Apple products. In Futurama we mainly see references to the old, classic Macs running [System 6](http://en.wikipedia.org/wiki/Apple_System_Software_6), [System 7](http://en.wikipedia.org/wiki/System_7) or [OS 9](http://en.wikipedia.org/wiki/Mac_OS_9) ending with the colorful iMac G3. This is likely caused by the timeframe in which Matt Groening and David X. Cohen developed the first season of Futurama (1997-1999). @@ -25,232 +23,120 @@ For orientation: I've followed the original four season production cycle and not _All screens (C) 1999 by Twentieth Century Fox Film Corp._ - - ## Season 1 - ## 1ACV02 - The Series Has Landed - - The moon farmer introduces his three robot daughters. One of them is named "Daisy May 128k" as a reference to the first [Macintosh 128k](http://en.wikipedia.org/wiki/Macintosh_128K). -![Daisy May 128k](/media/futurama-mac-01.png) - - +![Daisy May 128k](../media/futurama-mac-01.png) ## 1ACV05 - Fear Of A Bot Planet - - Indeed the episode with the most Mac references. The Planet Express crew have to deliver a package to a planet settled by separatist robots. And guess what their favorite OS is? The sound to start the daily human hunt is the [Mac startup chime](http://musicthing.blogspot.com/2005/05/tiny-music-makers-pt-4-mac-startup.html) composed by [Jim Reekes ](http://en.wikipedia.org/wiki/Jim_Reekes) and first used in 1991 on the [Macintosh Quadra 700](http://en.wikipedia.org/wiki/Macintosh_Quadra_700). Maybe the [Chime of Death](http://en.wikipedia.org/wiki/Chimes_of_Death) would be more suitable for that. -![Mac startup chime](/media/futurama-mac-02.png) +![Mac startup chime](../media/futurama-mac-02.png) The judge is a not so friendly Macintosh 128k with a classic Mac OS Finder face. It uses Mac OS interface elements while judging and freezing at it. -![Macintosh 128k judge](/media/futurama-mac-03.png) +![Macintosh 128k judge](../media/futurama-mac-03.png) But the robots have some cool computer voodoo to get him back judging without the need of a restart. -![Macintosh 128k judge freeze](/media/futurama-mac-04.png) - -This one can be just coincidence or no Mac reference at all. The colors of the eyes and the mouths of the robot elders look pretty familiar to the [iMac G3 color flavors](http://www.apple.com/pr/photos/iMac/imaccolors.html) or the [original iBook colors](http://www.theapplecollection.com/iMac/iBook2.html) although there never was a yellow iMac (or iBook). ![Robot elders iBook colors](/media/futurama-mac-05.png) - +![Macintosh 128k judge freeze](../media/futurama-mac-04.png) +This one can be just coincidence or no Mac reference at all. The colors of the eyes and the mouths of the robot elders look pretty familiar to the [iMac G3 color flavors](http://www.apple.com/pr/photos/iMac/imaccolors.html) or the [original iBook colors](http://www.theapplecollection.com/iMac/iBook2.html) although there never was a yellow iMac (or iBook). ![Robot elders iBook colors](../media/futurama-mac-05.png) ## 1ACV10 A Flight to Remember - - The robot guy on the bar mixes sad Bender a drink out of Jägermeister and some Pennzoil product. He is named iZac as a reference to the Apple iMac or more generally for the "i"-brand. Beside that iZac is written in kind of the same font (variant of [ITC Garamond](http://new.myfonts.com/fonts/itc/garamond/), thanks [Schoschie](http://www.kremalicious.com/2009/01/the-mac-in-futurama/#comment-48831)) as in [Apple's Think Different tagline and campaigns](http://web.archive.org/web/20010228171255/www.apple.com/thinkdifferent/). Furthermore (but non-Mac related) iZac is also a reference to Isaac the bartender from the TV series love boat from 1977, as ["yeah" pointed out in the comments](http://www.kremalicious.com/2009/01/the-mac-in-futurama/#comment-37416). Thanks yeah! -![iZac](/media/futurama-mac-06.png) - - +![iZac](../media/futurama-mac-06.png) ## 1ACV11 Mars University - - -The Robot House fraternity is spying at a Macintosh 128k in the girls bed rooms. ![spying at a Macintosh 128k](/media/futurama-mac-07.png) - - +The Robot House fraternity is spying at a Macintosh 128k in the girls bed rooms. ![spying at a Macintosh 128k](../media/futurama-mac-07.png) ## 1ACV12 - When Aliens Attack - - -The crew searches the Internet on a Mac OS system for facts about the TV series Single Female Lawyer. ![Single Female Lawyer](/media/futurama-mac-08.png) - - +The crew searches the Internet on a Mac OS system for facts about the TV series Single Female Lawyer. ![Single Female Lawyer](../media/futurama-mac-08.png) ## Season 2 - - - - ## 2ACV09 A Bicyclops Built For Two +Bender choses a disguise while being in the Internet. He does this with a Mac style menu. ![Internet disguise](../media/futurama-mac-09.png) - -Bender choses a disguise while being in the Internet. He does this with a Mac style menu. ![Internet disguise](/media/futurama-mac-09.png) - -Alcasar submits Leela a video message which is played on Leelas display in a classic Mac OS styled window. ![Alcasar](/media/futurama-mac-10.png) - - +Alcasar submits Leela a video message which is played on Leelas display in a classic Mac OS styled window. ![Alcasar](../media/futurama-mac-10.png) ## 2ACV15 The Problem With Popplers - - -Hermes finds the name Popplers while searching the Internet on an iBook G3 with a weird antenna on top of it. ![Searching Popplers](/media/futurama-mac-11.png) - - +Hermes finds the name Popplers while searching the Internet on an iBook G3 with a weird antenna on top of it. ![Searching Popplers](../media/futurama-mac-11.png) ## 2ACV17 War Is The H-Word - - -Earth attacks the balls on Spheron 1 and a robot surgeon named iHawk operates the injured earthlings with a Martini in his hands. ![iHawk](/media/futurama-mac-12.png) - - +Earth attacks the balls on Spheron 1 and a robot surgeon named iHawk operates the injured earthlings with a Martini in his hands. ![iHawk](../media/futurama-mac-12.png) ## Season 3 - - - - ## 3ACV04 The Luck Of The Fryrish - - -Again the crew searches the Internet with a classic Mac OS interface. ![Internet Mac OS style](/media/futurama-mac-13.png) - - +Again the crew searches the Internet with a classic Mac OS interface. ![Internet Mac OS style](../media/futurama-mac-13.png) ## 3ACV06 Bendless Love - - -The Bending School for robots seems to be running on Mac OS because it uses a Mac OS interface progress bar. ![Mac OS Bending School](/media/futurama-mac-14.png) - - +The Bending School for robots seems to be running on Mac OS because it uses a Mac OS interface progress bar. ![Mac OS Bending School](../media/futurama-mac-14.png) ## 3ACV15 I Dated A Robot - - Sure enough, Prof. Farnsworth's blank robots are Mac formatted. -![Internet Mac OS style](/media/futurama-mac-15.png) - -Billy starring the propaganda movie "I dated a robot!" downloads his Monroe-Bot with a classic Macintosh 128k. ![Downloading Monroe-Bot](/media/futurama-mac-16.png) - +![Internet Mac OS style](../media/futurama-mac-15.png) +Billy starring the propaganda movie "I dated a robot!" downloads his Monroe-Bot with a classic Macintosh 128k. ![Downloading Monroe-Bot](../media/futurama-mac-16.png) ## Futurama 3ACV21 Future Stock - - -Planet Express is under new management of "that guy" from the 1980s. He shows the crew a new ad which is a parody of [Apple's legendary 1984 ad](http://www.youtube.com/watch?v=R706isyDrqI). ![1984 ad parody](/media/futurama-mac-19.png) - - +Planet Express is under new management of "that guy" from the 1980s. He shows the crew a new ad which is a parody of [Apple's legendary 1984 ad](http://www.youtube.com/watch?v=R706isyDrqI). ![1984 ad parody](../media/futurama-mac-19.png) ## Season 4 - - - - ## 4ACV06 Bender Should Not Be Allowed On TV - - The president of the TV network (who seems to be just a plain non-Mac laptop), has some sort of QuickTime Player running on him. -![President of Fox](/media/futurama-mac-17.png) - - +![President of Fox](../media/futurama-mac-17.png) ## 4ACV08 Crimes Of The Hot - - -iZac again. ![iZac on Galapagos Princess](/media/futurama-mac-18.png) - - +iZac again. ![iZac on Galapagos Princess](../media/futurama-mac-18.png) ## Season 5 - - - - ## 5ACV01 Bender's Big Score Part 1 +Bender is infected by the Scammers' obedience virus called iObey. ![iObey Obedience Virus](../media/futurama-mac-20.png) +## 5ACV15 Into The Wild Green Yonder Part 4 -Bender is infected by the Scammers' obedience virus called iObey. ![iObey Obedience Virus](/media/futurama-mac-20.png) - - - -## 5ACV15 Into The Wild Green Yonder Part 4 - - - -The audience in the violet dwarf star blowup or Encyclopod (or so) birth scene consists of many Futurama characters from all the Futurama series. If you look closely you can spot iZac again (upper left). In this screenshot there's also Matt Groening's head in the audience. ![iZac in audience](/media/futurama-mac-21.png) - - - +The audience in the violet dwarf star blowup or Encyclopod (or so) birth scene consists of many Futurama characters from all the Futurama series. If you look closely you can spot iZac again (upper left). In this screenshot there's also Matt Groening's head in the audience. ![iZac in audience](../media/futurama-mac-21.png) ## Futurama Stuff For Your Mac - - - - -![Futurama Vol. 1-6 by Gedeon Maheux](/media/futurama_gedeon.png)[[Futurama Vol. 1-6](http://iconfactory.com/freeware/preview/fut1) +![Futurama Vol. 1-6 by Gedeon Maheux](../media/futurama_gedeon.png)[[Futurama Vol. 1-6](http://iconfactory.com/freeware/preview/fut1) Amazing icons made by Iconfactory's [Gedeon Maheux](http://gedblog.com/). The recent [Volume 6 release](http://iconfactory.com/freeware/preview/fut6) also comes with some nice wallpapers showing silhouettes of the Planet Express crew members. [Vol.2](http://iconfactory.com/freeware/preview/fut2), [Vol.3](http://iconfactory.com/freeware/preview/fut3), [Vol.4](http://iconfactory.com/freeware/preview/fut4), [Vol.5](http://iconfactory.com/freeware/preview/fut5), [Vol.6](http://iconfactory.com/freeware/preview/fut6) Also [a search for Futurama in the freeware section on Iconfactory.com](http://iconfactory.com/search/freeware/futurama) is always a good idea... - - - - -![What If? Machine Terminal Icon by Mark Hawkins](/media/futurama_hawkins1.png)[What If? Machine Terminal Icon](http://scartissuemark.deviantart.com/art/What-If-Machine-Terminal-Icon-71455726) +![What If? Machine Terminal Icon by Mark Hawkins](../media/futurama_hawkins1.png)[What If? Machine Terminal Icon](http://scartissuemark.deviantart.com/art/What-If-Machine-Terminal-Icon-71455726) A nice icon intended as a Terminal replacement icon made by [Mark Hawkins](http://scartissuemark.deviantart.com/). - - - - -![Futurama: Trash Replacement by Mark Hawkins](/media/futurama_hawkins2.png)[Futurama: Trash Replacement](http://scartissuemark.deviantart.com/art/Futurama-Trash-Replacement-71612045) +![Futurama: Trash Replacement by Mark Hawkins](../media/futurama_hawkins2.png)[Futurama: Trash Replacement](http://scartissuemark.deviantart.com/art/Futurama-Trash-Replacement-71612045) A nice icon showing a big bucket of Fishy Joe's Popplers. Made by [Mark Hawkins](http://scartissuemark.deviantart.com/) too. - - - - -![Futurama Random Quote Generator by rawpixels](/media/futurama_rawpixels.png)[Futurama Random Quote Generator](http://www.apple.com/medias/dashboard/movie_tv/futuramarandomquotegenerator.html) +![Futurama Random Quote Generator by rawpixels](../media/futurama_rawpixels.png)[Futurama Random Quote Generator](http://www.apple.com/medias/dashboard/movie_tv/futuramarandomquotegenerator.html) A Dashboard widget for Mac OS X giving you random quotes from Futurama. Made by [rawpixels](http://www.rawpixels.com/). - - - - -![Futurama Mars University Wallpaper by Matthias Kretschmann/kremalicious.com](/media/futurama_kremalicious.png)[Futurama Mars University Wallpaper](http://www.kremalicious.com/2008/09/new-goodie-futurama-mars-university-wallpaper/) +![Futurama Mars University Wallpaper by Matthias Kretschmann/kremalicious.com](../media/futurama_kremalicious.png)[Futurama Mars University Wallpaper](http://www.kremalicious.com/2008/09/new-goodie-futurama-mars-university-wallpaper/) And there's my Futurama Mars University Wallpaper for Desktop and iPhone available in the [Goodies section](http://www.kremalicious.com/goodies) on this website. - - - - -![Futurama: Out Of Whale Oil Wallpaper Pack by Matthias Kretschmann/kremalicious.com](/media/out_of_whale_oil_detail.png)[Futurama: Out Of Whale Oil Wallpaper Pack](http://www.kremalicious.com/2009/02/out-of-whale-oil/) +![Futurama: Out Of Whale Oil Wallpaper Pack by Matthias Kretschmann/kremalicious.com](../media/out_of_whale_oil_detail.png)[Futurama: Out Of Whale Oil Wallpaper Pack](http://www.kremalicious.com/2009/02/out-of-whale-oil/) And finally there's my Futurama: Out Of Whale Oil Wallpaper pack for Desktop and iPhone also available in the [Goodies section](http://www.kremalicious.com/goodies) on this website. Vivid green and pink Feminista versions included. - - - - And that's it folks. Hope you enjoyed this fun article. If you know of more Mac or Apple references in Futurama or links to nice Futurama icons, wallpapers or application resources feel free to post them in the comments. As always: before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-Feed](http://www.kremalicious.com/feed/), discuss this article or buy me my next coffee. diff --git a/_src/_posts/2009-02-01-portal-thingy.md b/content/posts/2009-02-01-portal-thingy.md similarity index 90% rename from _src/_posts/2009-02-01-portal-thingy.md rename to content/posts/2009-02-01-portal-thingy.md index 29a78151..784cb3fe 100644 --- a/_src/_posts/2009-02-01-portal-thingy.md +++ b/content/posts/2009-02-01-portal-thingy.md @@ -1,18 +1,16 @@ --- -layout: post +type: post title: 'Portal Thingy: matthiaskretschmann.com' -image: +image: ../media/vcardsite-mk.png author: Matthias Kretschmann date: 2009-02-01 06:01:28+00:00 -wordpress_id: 504 -categories: + +tags: - personal --- - -[![matthiaskretschmann.com](/media/vcardsite-mk.png)](http://matthiaskretschmann.com) Just some self reference here. I've launched a slick new site under [matthiaskretschmann.com](http://matthiaskretschmann.com) today which has an absolute simple concept. It's kind of a digital business card site for being digitally present under my name. Beside that it has Links to my social media stuff so it's easier for you to stalk me. In the 90's we probably would have called it a Portal. As you can read in the sliding Colophon at the bottom of the site, it is written in valid XHTML 1.1 and CSS3 code and makes heavy use of jQuery. But, of course, it is fully functional without JavaScript enabled. Even the tab interface remains intact in such a case which is done by some PHP magic. Just the print and text-size buttons in the lower right will be gone without JavaScript. But that's ok because their functionality can be implemented just with JavaScript anyway. @@ -29,7 +27,7 @@ But the sad thing I had to learn was that Internet Explorer 7 and Google Chrome That's why some eye candy will not be displayed to Internet Explorer users (no big light spot and no hover effect on the header) and I hope Google will fix this soon. And following my own tradition Internet Explorer 6 and below users will get a big warning banner on top of the site. -For all other modern browsers beside those mentioned above the site should work well but you'll get the best viewing experience with [Safari](http://www.apple.com/safari/), [Firefox 3.1](http://www.mozilla.com/en-US/firefox/all-beta.html) or [Opera](http://www.opera.com/) (because of their [text-shadow support](http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/)). +For all other modern browsers beside those mentioned above the site should work well but you'll get the best viewing experience with [Safari](http://www.apple.com/safari/), [Firefox 3.1](http://www.mozilla.com/en-US/firefox/all-beta.html) or [Opera](http://www.opera.com/) (because of their [text-shadow support](http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/)). If you find a bug or have any additions feel free to [contact me](/contact), post them in the comments or [throw me a note on Twitter](https://twitter.com/kremalicious). @@ -39,23 +37,23 @@ If you find a bug or have any additions feel free to [contact me](/contact), pos With the concept of this little site I've kinda jumped on the bandwagon which obviously was started by [Tim van Damme's excellent small site under timvandamme.com](http://timvandamme.com/). -[![timvandamme.com](/media/vcardsite-tim.png)](http://timvandamme.com) +[![timvandamme.com](../media/vcardsite-tim.png)](http://timvandamme.com) I was just blown away by the smart concept when first seeing this site last year and immediately made some rough sketches and drafts for my own implementation of this concept. But sadly time was too short for a new personal side project so everything laid down until last week. Another great version based on Tim's concept was crafted by [Mr. Foliage-O-Meter Rogie King](http://www.komodomedia.com/) under [rogieking.com](http://rogieking.com/) and there was also a nice little discussion about inspiration in [Rogie's blog](http://www.komodomedia.com/blog/2009/01/timvandammecom/) after he had launched his site. -[![rogieking.com](/media/vcardsite-rogie.png)](http://rogieking.com) +[![rogieking.com](../media/vcardsite-rogie.png)](http://rogieking.com) Finally I find it very interesting to compare the jQuery code of the three sites afterwards. We all have some sort of tab interface with fancy stuff going on when the tabs change. But we wrote three completely different versions of code for that purpose but all with the same JavaScript library. Oh mighty flexible jQuery! ## More Business Card Style Sites -![lbaumann.com](/media/vcardsite-laurent.png) +![lbaumann.com](../media/vcardsite-laurent.png) [Icon- and UI-Designer Laurent Baumann](http://lbaumann.com/) -![maximilianschoening.com](/media/vcardsite-maximilian.png) +![maximilianschoening.com](../media/vcardsite-maximilian.png) [Interface-Designer Maximilian Schöning](http://www.maximilianschoening.com/) -![arefjdey.com](/media/vcardsite-arefjdey.png) +![arefjdey.com](../media/vcardsite-arefjdey.png) [Consultant & Blogger Aref Jdey (Design & Code by yours truly)](http://www.arefjdey.com/) diff --git a/_src/_posts/2009-02-17-out-of-whale-oil.md b/content/posts/2009-02-17-out-of-whale-oil.md similarity index 65% rename from _src/_posts/2009-02-17-out-of-whale-oil.md rename to content/posts/2009-02-17-out-of-whale-oil.md index e719c907..713c144a 100644 --- a/_src/_posts/2009-02-17-out-of-whale-oil.md +++ b/content/posts/2009-02-17-out-of-whale-oil.md @@ -1,19 +1,17 @@ --- -layout: post +type: post title: We Are Out Of Whale Oil -image: Teaser-Out-Of-Whale-Oil.jpg -download: out-of-whale-oil-wall-by-kremalicious.zip +image: ../media/Teaser-Out-Of-Whale-Oil.jpg +download: ../media/out-of-whale-oil-wall-by-kremalicious.zip author: Matthias Kretschmann date: 2009-02-17 20:11:55+00:00 -wordpress_id: 533 -featured: true -category: goodies tags: - - wallpaper - - futurama + - goodies + - wallpaper + - futurama coinhive: true @@ -23,7 +21,7 @@ redirect_from: Simple, high-resolution Futurama tribute wallpaper pack inspired by the latest Futurama movie Into The Wild Green Yonder. This pack includes 4 versions of the Planet Express ship whale oil indicator in 2 different sizes for desktop and iPhone use. Vivid pink Feminista versions included too. -![Futurama: Out Of Whale Oil Wallpaper Detail](/media/out_of_whale_oil_detail.png)Here're the details for the whole pack: +![Futurama: Out Of Whale Oil Wallpaper Detail](../media/out_of_whale_oil_detail.png)Here're the details for the whole pack: * 2 high-rez widescreen desktop versions with empty and full whale oil indicator (2560x1600) * 2 iPhone versions with empty and full whale oil indicator (320x480) @@ -31,10 +29,10 @@ Simple, high-resolution Futurama tribute wallpaper pack inspired by the latest F * 2 Feminista iPhone versions with empty and full whale oil indicator (320x480) * Icon folder files for this wallpaper release -[![Futurama: Out Of Whale Oil Wallpaper Pack by kremalicious](/media/out-of-whale-oil-overview.png)](http://www.kremalicious.com/goodies/#wall) +[![Futurama: Out Of Whale Oil Wallpaper Pack by kremalicious](../media/out-of-whale-oil-overview.png)](http://www.kremalicious.com/goodies/#wall) Seriously, the pink versions are burning my eyes but the pink is a good reference to the events in the recent movie.

    - Download + Download

    diff --git a/_src/_posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md b/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md similarity index 90% rename from _src/_posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md rename to content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md index 85f8dd5e..1b0f2643 100644 --- a/_src/_posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md +++ b/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md @@ -1,23 +1,23 @@ --- -layout: post +type: post title: Ultimate Share Link Bonanza For Coda, Wordpress And Everything Else -download: share-link-bonanza-coda-clips.zip +download: ../media/share-link-bonanza-coda-clips.zip author: Matthias Kretschmann date: 2009-03-29 23:12:15+00:00 -wordpress_id: 576 -categories: - - design +category: tags: - - tutorial - - wordpress + - design + - goodies + - tutorial + - wordpress coinhive: true --- -![Coda Clips Teaser](/media/codaclips-teaser.png) +![Coda Clips Teaser](../media/codaclips-teaser.png) Ever wanted to include those sharing links to social or bookmarking sites so users can easily submit your content to these sites in a Wordpress site or any other platform? Then you might have experienced a rather time consuming search odyssey to get those links. But fear no more! In this article I've provided a huge collection of all the links to your favorite social sites compiled in two handy Coda Clip files in a plain and a Wordpress version. And the non-Coda users can download an html file with all the links included. Additionally you'll find a huge list within this article with the separated links in two versions for each site. And finally I've put together a quick tutorial for using buttons or icons with these links. This way you can easily add content submit/sharing links to your sites in no time. @@ -33,7 +33,7 @@ But I think you don't want to load tons of scripts on your websites if you inclu To make this a bit more straightforward I provide these links compiled within two Coda Clip files for use with [Panic's Coda](http://panic.com/coda). While the first clip group contains all the plain link snippets the second group includes those snippets for use with Wordpress. Just download and add them to your Coda Clips collection: -Download Share Links Coda Clips +Download Share Links Coda Clips Included are a **total of 40 share links per clip group** for the following social/bookmark sites. This list uses the links provided in the Coda clips so you can test them out here with this article: @@ -42,7 +42,7 @@ _ ## Bonus: Coda Clips Icon -![Coda Clips Icon](/media/codaclips-icon128.png)There's no special icon for Coda Clips included in the recent Coda version (they use the blank one) so I quickly created one based on the other Coda file type icons. And the nice Panic guys allowed me to distribute this icon here. I've just made the 256px icon a bit sharper than the equivalent other coda file type icons. +![Coda Clips Icon](../media/codaclips-icon128.png)There's no special icon for Coda Clips included in the recent Coda version (they use the blank one) so I quickly created one based on the other Coda file type icons. And the nice Panic guys allowed me to distribute this icon here. I've just made the 256px icon a bit sharper than the equivalent other coda file type icons. If you download the above Coda Clip files this icon is already applied on the clip files but here're just the icon files (icns, folder, iContainer, PNGs): @@ -50,11 +50,13 @@ If you download the above Coda Clip files this icon is already applied on the cl ## 2. Usage -![Coda Clips HUD](/media/codaclips-hud.png)Just download and double click the Coda clip documents and two new clip groups will be created in your Coda Clips HUD with the various clips inside of them. All you have to do in Coda is inserting the clip by double clicking in the Coda Clips HUD and start typing your link text or type your link text first, select it and double click the clip in order to insert it. +![Coda Clips HUD](../media/codaclips-hud.png)Just download and double click the Coda clip documents and two new clip groups will be created in your Coda Clips HUD with the various clips inside of them. All you have to do in Coda is inserting the clip by double clicking in the Coda Clips HUD and start typing your link text or type your link text first, select it and double click the clip in order to insert it. -That's because both collections have their placeholder selection (the ![Coda Clips Placeholder](/media/codaclips-placeholder.png)) located where the link text would be: +That's because both collections have their placeholder selection (the ![Coda Clips Placeholder](../media/codaclips-placeholder.png)) located where the link text would be: -{% highlight html %}![Coda Clips Placeholder](/media/codaclips-placeholder.png){% endhighlight %} +```html +![Coda Clips Placeholder](../media/codaclips-placeholder.png) +``` As you can see I've also included the link title value usually with the name of the specific social site. Also I've already encoded all the entities so there shouldn't be any (X)HTML validation errors when using these links in your projects. @@ -74,7 +76,7 @@ Apart from that some sites allow you to add and submit more informations than ju ## 2.2 Share Links (Wordpress Edition) -![Wordpress logo by kremalicious](/media/wordpress-logo.png)The Wordpress edition of these share link collection includes some Wordpress php bits for dynamically creating the whole submit URL so there's no need to manually edit most of the links. The Wordpress template tags used are: +![Wordpress logo by kremalicious](../media/wordpress-logo.png)The Wordpress edition of these share link collection includes some Wordpress php bits for dynamically creating the whole submit URL so there's no need to manually edit most of the links. The Wordpress template tags used are: * `` to create the URL dynamically depending on the article under which you have included the share and submit links. @@ -85,17 +87,21 @@ Anyway, as I've said above some sites allow more to submit here and you'll find ## 3. Quick Tutorial For Using Icons With These Links -![Tutorial icon by kremalicious](/media/tutorial-icon.png)I've also written a quick tutorial in case you want to use little images as icons beside your links. To achieve this these two solution provided here should fit every need for this. You can do this by using one of these two techniques realized with HTML and CSS: +![Tutorial icon by kremalicious](../media/tutorial-icon.png)I've also written a quick tutorial in case you want to use little images as icons beside your links. To achieve this these two solution provided here should fit every need for this. You can do this by using one of these two techniques realized with HTML and CSS: ## 3.1 Use The <img /> Tag Element Just include an img element wrapped inside the link tag, like so: -{% highlight html %} Delicious{% endhighlight %} +```html + Delicious +``` And if you want to just use an icon with no text use just an img element without providing any link text: -{% highlight html %}{% endhighlight %} +```html + +``` @@ -105,29 +111,31 @@ And if you want to just use an icon with no text use just an img element without To me a more cleaner solution is to use the css background-image property to include the icon images. Just add a class or an id to every share link like so: -{% highlight html %}Delicious{% endhighlight %} +```html +Delicious +``` And in your CSS select this class and style it with a background image. Assuming you want the site icon to appear left beside the link text you would also have to add some padding so the text won't overlap the icons: -{% highlight css %} - .delicious { - background: url(delicious.png) no-repeat center center; - padding-left: 20px; - } -{% endhighlight %} +```css +.delicious { + background: url(delicious.png) no-repeat center center; + padding-left: 20px; +} +``` If you want to use just icons and no text you should provide a link text anyway but hide it with css. This is a good practice for accessibility and search engine optimization. Also you would have to provide the dimensions of the icon: -{% highlight css %} - .delicious { - width: 16px; - height: 16px; - background: url(delicious.png) no-repeat center center; - text-indent: -999999px; - } -{% endhighlight %} +```css +.delicious { + width: 16px; + height: 16px; + background: url(delicious.png) no-repeat center center; + text-indent: -999999px; +} +``` ## 4. HTML File Download And All The Links Separated @@ -675,7 +683,7 @@ Just click the Toggle All Links button to reveal them and click it again to hide ## 5. Please Jump Around, Then Spread The Word -![Coffee](/media/coffee-cup-icon-kremalicious.png) +![Coffee](../media/coffee-cup-icon-kremalicious.png) If you ever wanted or had to include such sharing links manually in your sites and searched hours for those you should already have recognized the value of this article and if not already happened you can now jump around to express your enjoyment. After this you should immediately bookmark or share this site on your favorite social site. And while you're at it [I could use another coffee](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=krema%40jpberlin%2ede&item_name=kremalicious%2ecom%20%2d%20Buy%20me%20a%20coffee%20or%20two%20or%20three%20or%20more&no_shipping=1&return=http%3a%2f%2fwww%2ekremalicious%2ecom%2fthank%2dyou%2f&tax=0¤cy_code=EUR&lc=US&bn=PP%2dDonationsBF&charset=UTF%2d8). diff --git a/_src/_posts/2009-06-04-twitter-crisp.md b/content/posts/2009-06-04-twitter-crisp.md similarity index 88% rename from _src/_posts/2009-06-04-twitter-crisp.md rename to content/posts/2009-06-04-twitter-crisp.md index ccb19a13..c9844834 100644 --- a/_src/_posts/2009-06-04-twitter-crisp.md +++ b/content/posts/2009-06-04-twitter-crisp.md @@ -1,16 +1,15 @@ --- -layout: post +type: post title: Twitter Crisp -image: Teaser-Twitter-Crisp.jpg -download: twitter-crisp-by-kremalicious.zip +image: ../media/Teaser-Twitter-Crisp.jpg +download: ../media/twitter-crisp-by-kremalicious.zip author: Matthias Kretschmann date: 2009-06-04 00:16:40+00:00 -wordpress_id: 794 -categories: -- goodies + tags: +- goodies - icon --- @@ -19,7 +18,7 @@ Here's a quick twitter icon for use on your websites which is kind of a by-produ This icon comes in various formats (PNG, ICNS, iContainer) and in 4 different sizes (128px, 48px, 32px, 16px) with each icon size redrawn (of course). Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab these icons while they're hot.

    - Download + Download

    Use them on any web project you like and/or [convert them into a send to twitter link](http://kremalicious.com/ultimate-coda-wordpress-share-link-bonanza/). Have fun! diff --git a/_src/_posts/2009-06-24-adiumeetie.md b/content/posts/2009-06-24-adiumeetie.md similarity index 74% rename from _src/_posts/2009-06-24-adiumeetie.md rename to content/posts/2009-06-24-adiumeetie.md index 62f60224..fe50b99a 100644 --- a/_src/_posts/2009-06-24-adiumeetie.md +++ b/content/posts/2009-06-24-adiumeetie.md @@ -1,29 +1,28 @@ --- -layout: post +type: post title: Adiumeetie. Tweetie Style Adium Icon -image: Teaser-Adiumeetie.jpg -download: adiumeetie-by-kremalicious.zip +image: ../media/Teaser-Adiumeetie.jpg +download: ../media/adiumeetie-by-kremalicious.zip author: Matthias Kretschmann date: 2009-06-24 21:00:38+00:00 -wordpress_id: 844 -category: goodies + tags: - - icon - - osx - - macos + - goodies + - icon + - macos --- Here's a new desktop goodie for your pleasure. It's a replacement dock icon for the popular Mac IM client [Adium](http://adium.im/) following the style of atebit's excellent [Tweetie for Mac](http://www.atebits.com/tweetie-mac/) icon. -![Adiumeetie Teaser](/media/Adiumeetie-Teaser.jpg) +![Adiumeetie Teaser](../media/Adiumeetie-Teaser.jpg) While the Tweetie Mac icon (and it's UI) was discussed quite controversial (which caused some very nice Tweetie replacement icons to appear, like [here](http://jonasraskdesign.com/medias/medias.html), [here](http://iconblock.deviantart.com/art/Tweetie-Mix-120360482), [here](http://macthemes2.net/forum/viewtopic.php?id=16795744) or [here](http://www.flickr.com/photos/marcelomarfil/3611311439/)), I grew to like the style of it. But Adium beside Tweetie in the Dock just looked weird... (No offense, [Adam](http://www.artofadambetts.com/weblog/?p=108)) So I redrew the whole icon and used Adium's duck silhouette on it and made some obvious and subtle changes in comparison to the Tweetie icon. And thanks to [Loren](http://blog.atebits.com/) who kind of rubber-stamped this icon release. The icon comes in various formats (iContainer, icns, png) in sizes from 512px-16px and as an Adium dock icon package. This icon package uses some more icons (just 128px each) for the different states of Adium (online, offline, alert etc.) and includes the application icon too. -![Adiumeetie States](/media/Adiumeetie-Teaser-AdiumIcon.png) +![Adiumeetie States](../media/Adiumeetie-Teaser-AdiumIcon.png) ## Download @@ -31,12 +30,12 @@ The icon comes in various formats (iContainer, icns, png) in sizes from 512px-16 Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab this icon while it's hot.

    - Download + Download

    ## Adium Icon Usage -![Adiumeetie Dock Preview](/media/Adiumeetie-Dock-Preview.png)Just double click the Adiumeetie.AdiumIcon file and the dock icon gets installed automatically. Then you can select the icon in Adium's preferences under Appearance > Dock Icon from the drop-down menu. After this the icon should be ready as your new Adium icon both in the Dock and in your Applications folder. +![Adiumeetie Dock Preview](../media/Adiumeetie-Dock-Preview.png)Just double click the Adiumeetie.AdiumIcon file and the dock icon gets installed automatically. Then you can select the icon in Adium's preferences under Appearance > Dock Icon from the drop-down menu. After this the icon should be ready as your new Adium icon both in the Dock and in your Applications folder. The icon is free for your personal use and I hope you'll enjoy it. If you do, don't forget to [spread the word via Twitter](http://twitter.com/home?status=Adiumeetie%3A%20Tweetie%20Style%20Adium%20Dock%20Icon%20from%20%40kremalicious%20http://kremalicious.com/adiumeetie/) and all your other favorite social media sites. diff --git a/_src/_posts/2009-09-05-delibar.md b/content/posts/2009-09-05-delibar.md similarity index 89% rename from _src/_posts/2009-09-05-delibar.md rename to content/posts/2009-09-05-delibar.md index b9f9c595..1b797d93 100644 --- a/_src/_posts/2009-09-05-delibar.md +++ b/content/posts/2009-09-05-delibar.md @@ -1,16 +1,15 @@ --- -layout: post +type: post title: Delibar Interface Replacement Icons -image: Teaser-Delibar-Icons.jpg -download: delibar-by-kremalicious.zip +image: ../media/Teaser-Delibar-Icons.jpg +download: ../media/delibar-by-kremalicious.zip author: Matthias Kretschmann date: 2009-09-05 19:07:31+00:00 -wordpress_id: 936 -categories: -- goodies + tags: +- goodies - icon --- @@ -23,7 +22,7 @@ tags: Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab these replacement icons.

    - Download + Download

    ## Icon Usage diff --git a/_src/_posts/2009-12-17-wordpress-post-thumbnails.md b/content/posts/2009-12-17-wordpress-post-thumbnails.md similarity index 63% rename from _src/_posts/2009-12-17-wordpress-post-thumbnails.md rename to content/posts/2009-12-17-wordpress-post-thumbnails.md index cfc80e9a..a106b4c6 100644 --- a/_src/_posts/2009-12-17-wordpress-post-thumbnails.md +++ b/content/posts/2009-12-17-wordpress-post-thumbnails.md @@ -1,17 +1,15 @@ --- -layout: post +type: post title: Using The New Post Thumbnail Feature In WordPress 2.9 author: Matthias Kretschmann date: 2009-12-17 04:00:21+00:00 -wordpress_id: 959 -categories: - - design tags: - - tutorial - - wordpress + - design + - tutorial + - wordpress coinhive: true @@ -19,60 +17,69 @@ redirect_from: - /2009/12/wordpress-post-thumbnails/ --- -![Wordpress Logo by kremalicious](/media/wordpress-logo.png)WordPress 2.9 added a new feature which allows you to assign an image to an article to make it the post image like it's often used in magazine style themes. This new feature along with a new template tag makes all the custom field hacks usually used for this functionality in the past obsolete. So here's a quick walkthrough to make use of the new post thumbnail feature and of course how to make it backwards compatible. +![Wordpress Logo by kremalicious](../media/wordpress-logo.png)WordPress 2.9 added a new feature which allows you to assign an image to an article to make it the post image like it's often used in magazine style themes. This new feature along with a new template tag makes all the custom field hacks usually used for this functionality in the past obsolete. So here's a quick walkthrough to make use of the new post thumbnail feature and of course how to make it backwards compatible. ## 1. Activate The Feature -![Add WordPress Post Thumbnail Support To Theme](/media/wordpress-thumbnail-1.png)For whatever reason you first have to activate the feature with an entry in your theme's _functions.php_ file in order to get the Post Thumbnail box in the Editor. +![Add WordPress Post Thumbnail Support To Theme](../media/wordpress-thumbnail-1.png)For whatever reason you first have to activate the feature with an entry in your theme's _functions.php_ file in order to get the Post Thumbnail box in the Editor. So just open up your theme's _functions.php_ file in your favorite editor or create it if there's no such file in your theme folder. Add this little code snippet to this file: -{% highlight php %} +```php -{% endhighlight %} +``` For backwards compatibility you should wrap this inside a function check for the new `add_theme_support`: -{% highlight php %} +```php -{% endhighlight %} +``` This makes sure WordPress installation prior to 2.9 won't get screwed up when using a theme with this new feature. ## 2. Add A Post Thumbnail To Your Post -![Add Post Thumbnail](/media/wordpress-thumbnail-2.png)After you've added the above mentioned code into your _functions.php_ file there should be a new Post Thumbnail box in the WordPress editor view on the right side. +![Add Post Thumbnail](../media/wordpress-thumbnail-2.png)After you've added the above mentioned code into your _functions.php_ file there should be a new Post Thumbnail box in the WordPress editor view on the right side. In this box click on the _Set Thumbnail link_ and the usual Add Media dialogue will pop up where you can choose an image from your Media Library. At the end of the dialogue for the selected image there's a new link beside the Insert into Post button called _Use as thumbnail_. -![Add Post Thumbnail 2](/media/wordpress-thumbnail-3.png)Click this and your chosen image will be assigned as the post thumbnail. (Unfortunately the _Use as thumbnail_ link is missing in the dialogue which appears after uploading an image, it's just there if you browse your Media Library.) +![Add Post Thumbnail 2](../media/wordpress-thumbnail-3.png)Click this and your chosen image will be assigned as the post thumbnail. (Unfortunately the _Use as thumbnail_ link is missing in the dialogue which appears after uploading an image, it's just there if you browse your Media Library.) You can close the media dialogue now and you will see the image in the Post Thumbnail box: -![Post Thumbnail added](/media/wordpress-thumbnail-4.png) +![Post Thumbnail added](../media/wordpress-thumbnail-4.png) ## 3. Display The Post Thumbnail In Your Theme -![Add to theme](/media/wordpress-thumbnail-5.png)Basically all you have to do is to add this new template tag in your theme files where you want to display the post thumbnail, most certainly in your _index.php_ file: -{% highlight php %}{% endhighlight %} +![Add to theme](../media/wordpress-thumbnail-5.png)Basically all you have to do is to add this new template tag in your theme files where you want to display the post thumbnail, most certainly in your _index.php_ file: + +```php + +``` + This template tag will display the thumbnail sized post thumbnail by default and is essentially the same as: -{% highlight php %}{% endhighlight %} +```php + +``` But of course you can grab the other sizes WordPress automatically creates when you upload an image: -{% highlight php %}{% endhighlight %} +?> +``` + _(Note: Matt [left a comment on WP Engineer](http://wpengineer.com/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/#comment-3053) stating he wouldn't recommend using these named arguments but provided no explanation for it yet.)_ The code will output a generic `` tag with a class of wp-post-image. Needless to say this is what you can select with css to style just the post thumbnails further: @@ -84,21 +91,27 @@ The code will output a generic `` tag with a class of wp-post-image. Need If you want to adjust the generated output of the tag you can do this by using some array stuff. So let's say you want to have the post thumbnails to be 200x200px big and another class assigned to it, you can extend the template tag like so: -{% highlight php %} 'alignleft' )); ?>{% endhighlight %} +```php + 'alignleft' )); ?> +``` If you want to add more than one class you can do this like so: -{% highlight php %} 'alignleft another_class')); ?>{% endhighlight %} +```php + 'alignleft another_class')); ?> +``` And you can add any attributes to the `` tag like a `title`, `rel` or an `alt` attribute. For accessibility reasons you should always add at least the alt-attribute: -{% highlight php %} 'alignleft', 'alt' => 'alttext')); ?>{% endhighlight %} +```php + 'alignleft', 'alt' => 'alttext')); ?> +``` As for the title attribute this will be grabbed automatically from the entry you've made in your Media Library during the upload process but you even could override this too: -{% highlight php %} +```php 'alignleft', 'alt' => 'alttext', 'title' => 'titletext')); ?> -{% endhighlight %} +``` @@ -107,22 +120,26 @@ As for the title attribute this will be grabbed automatically from the entry you Finally if you want to respect the custom sizes you or your users have set under Settings > Media you can first grab those sizes with [get_option function](http://codex.wordpress.org/Function_Reference/get_option) and then put it in the array: -{% highlight php %} 'alignleft')); -?>{% endhighlight %} +?> +``` You can also detect the Media settings for the other sizes and whether the crop setting is active or not: -{% highlight php %}{% endhighlight %} +?> +``` @@ -133,58 +150,50 @@ With the check in your functions.php at the beginning there's already ensured ol So it's a pretty good idea to make this backwards compatible with some quick if else voodoo, code shamelessly [adapted from WP-Recipes](http://www.wprecipes.com/wordpress-2-9-display-post-image-with-backward-compatibility): -{% highlight php %}if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { +```php +if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { the_post_thumbnail(); } else { $postimage = get_post_meta($post->ID, 'post-image', true); if ($postimage) { echo ''; } -}{% endhighlight %} +} +``` This first checks if the feature exists and if a post thumbnail was addd with this new feature. If it was, it simply returns the post thumbnail. If not, it falls back to whatever you've used in your theme before, the usual way is to check for and get the value of a special custom field named e.g. post-image and output it. You can add whatever you've used before inside the else statement. Et voilà, it's nicely backwards compatible now, yay! ## 5. Resources And More Information +* WP Engineer: [About WordPress Post Thumbnail](http://wpengineer.com/about-wordpress-post-thumbnail/) +* WP Engineer: [The Ultimative Guide For the_post_thumbnail In WordPress 2.9](http://wpengineer.com/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/) - - * WP Engineer: [About WordPress Post Thumbnail](http://wpengineer.com/about-wordpress-post-thumbnail/) +* WP Recipes: [WordPress 2.9 : Display post image with backward compatibility](http://www.wprecipes.com/wordpress-2-9-display-post-image-with-backward-compatibility) - * WP Engineer: [The Ultimative Guide For the_post_thumbnail In WordPress 2.9](http://wpengineer.com/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/) +* Justin Tadlock: [Everything you need to know about WordPress 2.9’s post image feature](http://justintadlock.com/archives/2009/11/16/everything-you-need-to-know-about-wordpress-2-9s-post-image-feature) - * WP Recipes: [WordPress 2.9 : Display post image with backward compatibility](http://www.wprecipes.com/wordpress-2-9-display-post-image-with-backward-compatibility) +* Chris Harrison: [Post Thumbnails in RSS Feeds](http://cdharrison.com/2009/12/the_post_thumbnail-for-rss-feeds/) - * Justin Tadlock: [Everything you need to know about WordPress 2.9’s post image feature](http://justintadlock.com/archives/2009/11/16/everything-you-need-to-know-about-wordpress-2-9s-post-image-feature) - - - * Chris Harrison: [Post Thumbnails in RSS Feeds](http://cdharrison.com/2009/12/the_post_thumbnail-for-rss-feeds/) - - - * Technosailor: [10 Things You Need to Know About WordPress 2.9](http://technosailor.com/2009/11/11/10-things-you-need-to-know-about-wordpress-2-9/) +* Technosailor: [10 Things You Need to Know About WordPress 2.9](http://technosailor.com/2009/11/11/10-things-you-need-to-know-about-wordpress-2-9/) Well and that's it. I would love to link to some smart WordPress Codex pages for these new template tags but at the time of this writing there simply isn't anything in the Codex about this. -![Oh no!](/media/coffee-cup-empty.png) +![Oh no!](../media/coffee-cup-empty.png) As always: before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-Feed](http://www.kremalicious.com/feed/), discuss this article or buy me my next coffee. - - - - ## Article Updates - 12/20/2009 Added some resources and a note about the named arguments 12/20/2009 function check for add_theme_support at the beginning 12/20/2009 corrected the size array code under Custom Output diff --git a/_src/_posts/2010-02-04-ipixelpad.md b/content/posts/2010-02-04-ipixelpad.md similarity index 87% rename from _src/_posts/2010-02-04-ipixelpad.md rename to content/posts/2010-02-04-ipixelpad.md index 10704c6a..62f6534c 100644 --- a/_src/_posts/2010-02-04-ipixelpad.md +++ b/content/posts/2010-02-04-ipixelpad.md @@ -1,16 +1,15 @@ --- -layout: post +type: post title: iPixelPad - Tongue Twisting But Crisp iPad Icons -image: Teaser-iPixelPad.png -download: ipixelpad_by_kremalicious.zip +image: ../media/Teaser-iPixelPad.png +download: ../media/ipixelpad_by_kremalicious.zip author: Matthias Kretschmann date: 2010-02-04 15:21:42+00:00 -wordpress_id: 1092 -categories: -- goodies + tags: +- goodies - icon coinhive: true @@ -22,7 +21,7 @@ They also come in two different versions for each size: with a matte highlight s And drawing the homescreen icons was quite funky and if you know the standard iPhone icons I bet you can guess what icons you can see here and in the icon files, at least in the 48px and 32px versions: -![ipixelpad-homescreen-zoom.png](/media/ipixelpad-homescreen-zoom.png) +![ipixelpad-homescreen-zoom.png](../media/ipixelpad-homescreen-zoom.png) The homescreen icons pixels in the 16px version needed all more vivid colors to get them distinguishable from the wallpaper background so they're a bit different from the other sizes. These are the times I wish I could modify just half a pixel. @@ -31,7 +30,7 @@ The homescreen icons pixels in the 16px version needed all more vivid colors to The icons come in various formats: iContainer, ICNS, ICO and PNG files for each size. Just click the following download button to grab the whole pack:

    - Download + Download

    ## License diff --git a/_src/_posts/2010-03-27-office-desk.md b/content/posts/2010-03-27-office-desk.md similarity index 68% rename from _src/_posts/2010-03-27-office-desk.md rename to content/posts/2010-03-27-office-desk.md index 1c24be05..88de12c6 100644 --- a/_src/_posts/2010-03-27-office-desk.md +++ b/content/posts/2010-03-27-office-desk.md @@ -1,17 +1,11 @@ --- -layout: photo +type: photo title: Office Desk -image: Office-Desk.jpg +image: ../media/Office-Desk.jpg author: Matthias Kretschmann date: 2010-03-27 21:31:35+00:00 - -wordpress_id: 1901 -categories: -- photos -post_format: -- Image --- Lost in this gorgeous figure. East Indian Rosewood, FTW! diff --git a/content/posts/2010-07-03-momcorp.md b/content/posts/2010-07-03-momcorp.md new file mode 100644 index 00000000..936d2c5b --- /dev/null +++ b/content/posts/2010-07-03-momcorp.md @@ -0,0 +1,32 @@ +--- +type: post + +title: MomCorp Wallpaper +image: ../media/Teaser-MomCorp-Wall.png +download: ../media/momcorp_wall_by_kremalicious.zip +author: Matthias Kretschmann + +date: 2010-07-03 17:12:53+00:00 + +tags: + - goodies + - wallpaper + - futurama + +coinhive: true +--- + +The 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: + +

    + Download + Donate +

    diff --git a/_src/_posts/2010-07-18-typeface-condoms.md b/content/posts/2010-07-18-typeface-condoms.md similarity index 71% rename from _src/_posts/2010-07-18-typeface-condoms.md rename to content/posts/2010-07-18-typeface-condoms.md index b9484314..d616f3b5 100644 --- a/_src/_posts/2010-07-18-typeface-condoms.md +++ b/content/posts/2010-07-18-typeface-condoms.md @@ -1,16 +1,14 @@ --- -layout: photo +type: photo title: Typeface condoms -image: Typeface-condoms.jpg +image: ../media/Typeface-condoms.jpg author: Matthias Kretschmann date: 2010-07-18 20:28:33+00:00 -wordpress_id: 1898 -categories: -- photos -post_format: -- Image + +tags: +- typography --- Burg Giebichenstein Hochschule für Kunst & Design Halle Jahresausstellung 2010, Campus Design diff --git a/_src/_posts/2010-08-07-bonsai.md b/content/posts/2010-08-07-bonsai.md similarity index 61% rename from _src/_posts/2010-08-07-bonsai.md rename to content/posts/2010-08-07-bonsai.md index 2256cd42..113e0ee4 100644 --- a/_src/_posts/2010-08-07-bonsai.md +++ b/content/posts/2010-08-07-bonsai.md @@ -1,16 +1,11 @@ --- -layout: photo +type: photo title: Bonsai -image: Bonsai-5-Version-2.jpg +image: ../media/Bonsai-5-Version-2.jpg author: Matthias Kretschmann date: 2010-08-07 20:23:31+00:00 -wordpress_id: 1895 -categories: -- photos -post_format: -- Image --- Still needs a cut diff --git a/_src/_posts/2010-09-01-gdr-helvetica.md b/content/posts/2010-09-01-gdr-helvetica.md similarity index 66% rename from _src/_posts/2010-09-01-gdr-helvetica.md rename to content/posts/2010-09-01-gdr-helvetica.md index 0a38a693..53effdcb 100644 --- a/_src/_posts/2010-09-01-gdr-helvetica.md +++ b/content/posts/2010-09-01-gdr-helvetica.md @@ -1,16 +1,14 @@ --- -layout: photo +type: photo title: GDR Helvetica -image: GDR-Helvetica.jpg +image: ../media/GDR-Helvetica.jpg author: Matthias Kretschmann date: 2010-09-01 20:21:43+00:00 -wordpress_id: 1892 -categories: -- photos -post_format: -- Image + +tags: +- typography --- Must be socialist Helvetica or something diff --git a/_src/_posts/2010-12-11-iphone-coasters.md b/content/posts/2010-12-11-iphone-coasters.md similarity index 71% rename from _src/_posts/2010-12-11-iphone-coasters.md rename to content/posts/2010-12-11-iphone-coasters.md index 3680f8ec..a9f5f296 100644 --- a/_src/_posts/2010-12-11-iphone-coasters.md +++ b/content/posts/2010-12-11-iphone-coasters.md @@ -1,16 +1,11 @@ --- -layout: photo +type: photo title: iPhone Coasters -image: iPhone-Coasters-1-Version-2.jpg +image: ../media/iPhone-Coasters-1-Version-2.jpg author: Matthias Kretschmann date: 2010-12-11 21:19:29+00:00 -wordpress_id: 1889 -categories: -- photos -post_format: -- Image --- Putting stuff under my coffee, iOS style. That's the "Home Set" from [iphoneappscoasters.com](http://iphoneappscoasters.com) diff --git a/_src/_posts/2010-12-29-basically-the-monolith-is-on-my-desk.md b/content/posts/2010-12-29-basically-the-monolith-is-on-my-desk.md similarity index 71% rename from _src/_posts/2010-12-29-basically-the-monolith-is-on-my-desk.md rename to content/posts/2010-12-29-basically-the-monolith-is-on-my-desk.md index 1a1ceb3a..b5f318d4 100644 --- a/_src/_posts/2010-12-29-basically-the-monolith-is-on-my-desk.md +++ b/content/posts/2010-12-29-basically-the-monolith-is-on-my-desk.md @@ -1,16 +1,11 @@ --- -layout: photo +type: photo title: Basically, The Monolith Is On My Desk -image: Basically-The-Monolith-Is-On-My-Desk.jpg +image: ../media/Basically-The-Monolith-Is-On-My-Desk.jpg author: Matthias Kretschmann date: 2010-12-29 15:47:12+00:00 -wordpress_id: 1873 -categories: -- photos -post_format: -- Image --- Be careful: your mind will get blown when you stare at it for too long. TMA-1 Action Figure from [ThinkGeek](http://thinkgeek.com) diff --git a/_src/_posts/2010-12-29-free-monkey-breath-not-soylent-green.md b/content/posts/2010-12-29-free-monkey-breath-not-soylent-green.md similarity index 67% rename from _src/_posts/2010-12-29-free-monkey-breath-not-soylent-green.md rename to content/posts/2010-12-29-free-monkey-breath-not-soylent-green.md index a02bb3c5..75563919 100644 --- a/_src/_posts/2010-12-29-free-monkey-breath-not-soylent-green.md +++ b/content/posts/2010-12-29-free-monkey-breath-not-soylent-green.md @@ -1,16 +1,11 @@ --- -layout: photo +type: photo title: Free Monkey Breath, Not Soylent Green -image: Free-Monkey-Breath-Not-Soylent-Green.jpg +image: ../media/Free-Monkey-Breath-Not-Soylent-Green.jpg author: Matthias Kretschmann date: 2010-12-29 21:16:55+00:00 -wordpress_id: 1886 -categories: -- photos -post_format: -- Image --- Don't know where to start outlining why this is an awesome geeky bag diff --git a/_src/_posts/2011-01-08-enjoying-paper.md b/content/posts/2011-01-08-enjoying-paper.md similarity index 69% rename from _src/_posts/2011-01-08-enjoying-paper.md rename to content/posts/2011-01-08-enjoying-paper.md index e6adaf9d..e0516133 100644 --- a/_src/_posts/2011-01-08-enjoying-paper.md +++ b/content/posts/2011-01-08-enjoying-paper.md @@ -1,16 +1,11 @@ --- -layout: photo +type: photo title: Enjoying Paper -image: Enjoying-Paper.jpg +image: ../media/Enjoying-Paper.jpg author: Matthias Kretschmann date: 2011-01-08 15:43:14+00:00 -wordpress_id: 1867 -categories: -- photos -post_format: -- Image --- Being a kid again and enjoying the package of a present (Thanks Dad!) diff --git a/_src/_posts/2011-01-08-glowing-star-inside.md b/content/posts/2011-01-08-glowing-star-inside.md similarity index 62% rename from _src/_posts/2011-01-08-glowing-star-inside.md rename to content/posts/2011-01-08-glowing-star-inside.md index 91fc38e7..46565b63 100644 --- a/_src/_posts/2011-01-08-glowing-star-inside.md +++ b/content/posts/2011-01-08-glowing-star-inside.md @@ -1,16 +1,11 @@ --- -layout: photo +type: photo title: Glowing Star Inside -image: Glowing-Star-Inside.jpg +image: ../media/Glowing-Star-Inside.jpg author: Matthias Kretschmann date: 2011-01-08 15:45:26+00:00 -wordpress_id: 1870 -categories: -- photos -post_format: -- Image --- Thanks Dad! diff --git a/_src/_posts/2011-01-18-historic-flood-levels.md b/content/posts/2011-01-18-historic-flood-levels.md similarity index 65% rename from _src/_posts/2011-01-18-historic-flood-levels.md rename to content/posts/2011-01-18-historic-flood-levels.md index 76d1ef45..532966d7 100644 --- a/_src/_posts/2011-01-18-historic-flood-levels.md +++ b/content/posts/2011-01-18-historic-flood-levels.md @@ -1,16 +1,11 @@ --- -layout: photo +type: photo title: Historic Flood Levels -image: Historic-Flood-Levels.jpg +image: ../media/Historic-Flood-Levels.jpg author: Matthias Kretschmann date: 2011-01-18 15:40:12+00:00 -wordpress_id: 1864 -categories: -- photos -post_format: -- Image --- dates ranging from 16th - 19th century diff --git a/_src/_posts/2011-10-11-broken-nexus-s-screen.md b/content/posts/2011-10-11-broken-nexus-s-screen.md similarity index 70% rename from _src/_posts/2011-10-11-broken-nexus-s-screen.md rename to content/posts/2011-10-11-broken-nexus-s-screen.md index f873ecaa..3bee25b5 100644 --- a/_src/_posts/2011-10-11-broken-nexus-s-screen.md +++ b/content/posts/2011-10-11-broken-nexus-s-screen.md @@ -1,16 +1,11 @@ --- -layout: photo +type: photo title: Broken Nexus S Screen -image: Broken-Nexus-S-Screen.jpg +image: ../media/Broken-Nexus-S-Screen.jpg author: Matthias Kretschmann date: 2011-10-11 14:37:06+00:00 -wordpress_id: 1861 -categories: -- photos -post_format: -- Image --- The good thing is it looks really cool, the bad thing is I can't use the screen anymore. diff --git a/_src/_posts/2011-12-15-badged.md b/content/posts/2011-12-15-badged.md similarity index 96% rename from _src/_posts/2011-12-15-badged.md rename to content/posts/2011-12-15-badged.md index 7cbe7e96..c04d531f 100644 --- a/_src/_posts/2011-12-15-badged.md +++ b/content/posts/2011-12-15-badged.md @@ -1,17 +1,16 @@ --- -layout: post +type: post title: Badged - iOS Style Notification Badges for WordPress -image: Badged-Teaser-kremalicious@2x.png +image: ../media/Badged-Teaser-kremalicious@2x.png author: Matthias Kretschmann updated: 2014-10-11 07:56:46+00:00 date: 2011-12-15 07:56:46+00:00 -wordpress_id: 1468 -category: goodies tags: - - wordpress +- goodies +- wordpress coinhive: true --- @@ -39,7 +38,7 @@ The plugin is hosted on GitHub and will always be mirrored in the WordPress plug 3. Enjoy 4. (optional) Adjust options under _Settings > Badged_. Upon activation the plugin sets both options by default: -![](/media/badged-settings.png) +![](../media/badged-settings.png) If you find any problems you can [open an issue on GitHub](https://github.com/kremalicious/Badged/issues) or just drop me a line in the comments or on [Twitter](http://twitter.com/kremalicious). diff --git a/_src/_posts/2012-02-26-mk-v2.md b/content/posts/2012-02-26-mk-v2.md similarity index 85% rename from _src/_posts/2012-02-26-mk-v2.md rename to content/posts/2012-02-26-mk-v2.md index 88edbd54..da9ae377 100644 --- a/_src/_posts/2012-02-26-mk-v2.md +++ b/content/posts/2012-02-26-mk-v2.md @@ -1,13 +1,13 @@ --- -layout: post +type: post title: Personal Site v2 -image: mkv2.jpg +image: ../media/mkv2.jpg author: Matthias Kretschmann date: 2012-02-26 21:29:54+00:00 -wordpress_id: 1506 -categories: + +tags: - personal --- @@ -17,13 +17,13 @@ Today I finally launched v2 of my personal site, still following the concept of One goal was to use as less images as possible. Yes, it would have been easier to just use images instead of like 10 box-shadows on one element but this wouldn't have been any fun. And no matter what retina/high dpi devices come up next all interface elements will look just as sharp without any additional work. -![](/media/mkv2-detail.png) +![](../media/mkv2-detail.png) Apart from the colored top background, the logo and the subtle background texture there're no background images in use. All the other visuals were created with a lot of CSS3 & pseudo elements. Pseudo elements were the perfect technology so the markup doesn't get cluttered with dozens of empty divs, spans etc. which would only serve a styling purpose. All icons on the site are coming from an icon font (the wonderful [IcoMoon](http://keyamoon.com/icomoon)) embedded with @font-face. -![](/media/mkv2-balls.jpg) +![](../media/mkv2-balls.jpg) ## Mobile & Modern First @@ -31,7 +31,7 @@ All icons on the site are coming from an icon font (the wonderful [IcoMoon](htt For the front-end development I've followed a mobile devices & modern browsers first approach. Therefore the site should look great on many different devices & screen sizes. As a starting point I used a combination of the [1140grid](http://cssgrid.net) and [320 and up](http://www.stuffandnonsense.co.uk/projects/320andup/). -![](/media/mkv2-responsivelayouts.jpg) +![](../media/mkv2-responsivelayouts.jpg) That's of course all done by media queries with breakpoints at 600px, 768px and 992px. During my testing those rather weird values turned out to work best for this simple layout. The layout only changes at 600px & 768px, the 992px is just used for some different css animations. And yes, I'm aware of the irony targeting fixed values here although everything else uses relative values. @@ -39,20 +39,20 @@ But it's interesting to see how different the rendering of the site is in some m - - * [iOS - Mobile Safari (iPhone 4S)](/media/mkv2-iphone.png) - - * [iOS - Mobile Safari (iPad)](/media/mkv2-ipad.png) + * [iOS - Mobile Safari (iPhone 4S)](../media/mkv2-iphone.png) - - * [Android - Android Browser (Nexus S)](/media/mkv2-android.png) - - * [Android - Chrome beta (Nexus S)](/media/mkv2-android-chrome.png) + * [iOS - Mobile Safari (iPad)](../media/mkv2-ipad.png) - - * [Android - Firefox (Nexus S)](/media/mkv2-android-firefox.png) + + * [Android - Android Browser (Nexus S)](../media/mkv2-android.png) + + + * [Android - Chrome beta (Nexus S)](../media/mkv2-android-chrome.png) + + + * [Android - Firefox (Nexus S)](../media/mkv2-android-firefox.png) Notice the weird banding of the gradients in Firefox. And Android either ignores the min-device-pixel-ratio media query altogether or has just problems with the background-size css property. @@ -73,11 +73,11 @@ If you're interested, here're the non-minified versions of the main [css file]( ## The touch hover problem -![](/media/mkv2-portfolio-overlay.jpg) +![](../media/mkv2-portfolio-overlay.jpg) A common pattern for stuff which can be revealed by hovering over something on desktop devices is to just make everything visible by default on touch devices. But I didn't wanted to clutter the portfolio items by adding buttons/text links or whatever around them. -![](/media/mkv2-ipad-touchindicator.jpg) So this led to a problem for touch users because it isn't immediately obvious how to reveal the overlays housing additional actions for each item. Approximately half of my beta testers found out about tapping a portfolio item to reveal the actions which is obviously not enough. +![](../media/mkv2-ipad-touchindicator.jpg) So this led to a problem for touch users because it isn't immediately obvious how to reveal the overlays housing additional actions for each item. Approximately half of my beta testers found out about tapping a portfolio item to reveal the actions which is obviously not enough. So I incorporated a visual hint for the other half: If a user on a touch device hasn't tapped on an item yet a subtle touch indicator starts pulsating over each item after 30 seconds. diff --git a/content/posts/2012-03-04-relaxing-cat.md b/content/posts/2012-03-04-relaxing-cat.md new file mode 100644 index 00000000..695b77e8 --- /dev/null +++ b/content/posts/2012-03-04-relaxing-cat.md @@ -0,0 +1,14 @@ +--- +type: photo + +title: Relaxing Cat +image: ../media/7f9397a265d811e1b9f1123138140926_7.jpg +author: Matthias Kretschmann + +date: 2012-03-04 08:00:32+00:00 + +tags: +- sitamun +--- + + diff --git a/_src/_posts/2012-04-03-blaue-turme.md b/content/posts/2012-04-03-blaue-turme.md similarity index 68% rename from _src/_posts/2012-04-03-blaue-turme.md rename to content/posts/2012-04-03-blaue-turme.md index 8a78e26b..c5bf1595 100644 --- a/_src/_posts/2012-04-03-blaue-turme.md +++ b/content/posts/2012-04-03-blaue-turme.md @@ -1,16 +1,11 @@ --- -layout: photo +type: photo title: Blaue Türme -image: Blaue-Tuerme-1.jpg +image: ../media/Blaue-Tuerme-1.jpg author: Matthias Kretschmann date: 2012-04-03 12:41:01+00:00 -wordpress_id: 1753 -categories: -- photos -post_format: -- Image --- [Photo on 500px](http://500px.com/photo/6350862) | [Photo on Flickr](http://www.flickr.com/photos/krema/6904523272/in/photostream) diff --git a/content/posts/2012-04-03-skeletor.md b/content/posts/2012-04-03-skeletor.md new file mode 100644 index 00000000..344b8e4e --- /dev/null +++ b/content/posts/2012-04-03-skeletor.md @@ -0,0 +1,11 @@ +--- +type: photo + +title: Skeletor +image: ../media/6313cc1e7db611e180c9123138016265_7.jpg +author: Matthias Kretschmann + +date: 2012-04-03 17:56:49+00:00 +--- + + diff --git a/content/posts/2012-04-03-train-station-leipzig.md b/content/posts/2012-04-03-train-station-leipzig.md new file mode 100644 index 00000000..3e4a0326 --- /dev/null +++ b/content/posts/2012-04-03-train-station-leipzig.md @@ -0,0 +1,11 @@ +--- +type: photo + +title: Train Station Leipzig +image: ../media/de2ac24c7db911e1b9f1123138140926_7.jpg +author: Matthias Kretschmann + +date: 2012-04-03 18:21:44+00:00 +--- + + diff --git a/_src/_posts/2012-04-04-android-tab-conundrum.md b/content/posts/2012-04-04-android-tab-conundrum.md similarity index 94% rename from _src/_posts/2012-04-04-android-tab-conundrum.md rename to content/posts/2012-04-04-android-tab-conundrum.md index 17fcf2fe..d17f1300 100644 --- a/_src/_posts/2012-04-04-android-tab-conundrum.md +++ b/content/posts/2012-04-04-android-tab-conundrum.md @@ -1,18 +1,15 @@ --- -author: Matthias Kretschmann -comments: true -date: 2012-04-04 14:24:30+00:00 -layout: post -slug: android-tab-conundrum +type: post + title: The Android Tab Bar Conundrum. Again. -image: tabs_overview.png +image: ../media/tabs_overview.png -wordpress_id: 1556 +author: Matthias Kretschmann +date: 2012-04-04 14:24:30+00:00 -categories: - - design tags: - - android +- design +- android --- With [Instagram for Android](https://play.google.com/store/apps/details?id=com.instagram.android&hl=en) there's once again an app getting ported to Android from iOS which doesn't follow the platform specific guidelines with a lot of elements. But this time it's a bit complicated, let me explain. @@ -21,43 +18,34 @@ Most obviously in the form of the app's main navigation tabs which Instagram fo ## Problem No. 1: Navigation Controls - -![](/media/android-navigation-buttons.png) +![](../media/android-navigation-buttons.png) The suggested [top placement in the Android Design Guidelines](http://developer.android.com/design/building-blocks/tabs.html) was an answer to a typical Android specific problem: the very bottom of Android apps is reserved for on-screen navigation buttons, originally capacitative off-screen buttons. And those can get triggered accidentally when reaching tabs in a tab bar at the bottom of the screen. Let's dub this problem no. 1. Now I'm usually all for breaking the rules because that's the only way innovation can happen. But this breaking needs to be thoroughly thought through and involves a deep understanding of the rules being broken. While a lot of iOS ports just use the bottom tab bar out of habit and non-thinking, [Tim](https://twitter.com/maxvoltar) and the Instagram guys don't fall in this camp. - ## Problem No. 2: Longer Screens - -![](/media/android-galaxy-note.png) +![](../media/android-galaxy-note.png) The usage of a bottom tab bar in Instagram for Android is an answer to a relatively new problem which isn't incorporated in the Android Design Guidelines: bigger screens, or more precisely longer screens, make it very hard to reach tabs at the top of the screen when holding the device with one hand. When looking at all those new devices it seems clear screen sizes above 4" are now the norm for Android. This is problem no. 2. In my view it all comes down to balancing those 2 problems against each other and, as said on Twitter, Tim decided to value problem 2 over problem 1: - > on the Galaxy Note it's impossible to get to the tabs with one hand if they're on top. — Tim Van Damme ([@maxvoltar](https://twitter.com/maxvoltar)) [April 3, 2012](https://twitter.com/maxvoltar/status/187224604912254976) - And I'm afraid he's right: it's just more important for users to reach the tabs with one hand than preventing them from accidently triggering the OS buttons. When an app has a tab bar it's usually the main element to navigate inside an app so it's crucial to reach those elements very fast. Also problem 1 is less of a problem on devices like the Galaxy Nexus with its on-screen buttons, they just don't get triggered by accident so easily as those off-screen capacitive buttons. - ## A way out - So we really need to rethink this specific guideline but this doesn't have to be just the decision between top or bottom placement of tabs. There's another way out to solve both problems: Combining scrollable & fixed tabs. This is already used by Google in ICS's built-in Phone and People app (thanks Jake!). And Instagram for Android could have used the same fixed tabs on the top of the screen but combine them with a swipe left/right gesture to navigate between those tabs. (Per guideline a swipe view needs to get a corresponding scrollable, text-only tab bar) Here's a quick mockup: - -![](/media/Instagram-Swipe.png) - +![](../media/Instagram-Swipe.png) Users wouldn't have to reach for the tabs to change views and nobody would accidently trigger the OS buttons at the bottom. The active states of the current and new tab item could fade corresponding to the swiping, same goes for the title of the current view in the very top bar. Another way could have been to split action & navigation tabs like [Guenther Beyer did in his mockup](https://plus.google.com/109726284197282147930/posts/5McKooqNnnd). diff --git a/content/posts/2012-04-05-current-sushi-status.md b/content/posts/2012-04-05-current-sushi-status.md new file mode 100644 index 00000000..c48464c0 --- /dev/null +++ b/content/posts/2012-04-05-current-sushi-status.md @@ -0,0 +1,11 @@ +--- +type: photo + +title: Current Sushi Status +image: ../media/aff38e2c7f5311e1b10e123138105d6b_7.jpg +author: Matthias Kretschmann + +date: 2012-04-05 19:15:20+00:00 +--- + + diff --git a/content/posts/2012-04-07-buna.md b/content/posts/2012-04-07-buna.md new file mode 100644 index 00000000..20985a44 --- /dev/null +++ b/content/posts/2012-04-07-buna.md @@ -0,0 +1,11 @@ +--- +type: photo + +title: Buna +image: ../media/44af28f2805b11e18cf91231380fd29b_7.jpg +author: Matthias Kretschmann + +date: 2012-04-07 02:42:08+00:00 +--- + + diff --git a/content/posts/2012-04-07-cat-enjoying-a-good-ipad-game.md b/content/posts/2012-04-07-cat-enjoying-a-good-ipad-game.md new file mode 100644 index 00000000..453bef88 --- /dev/null +++ b/content/posts/2012-04-07-cat-enjoying-a-good-ipad-game.md @@ -0,0 +1,11 @@ +--- +type: photo + +title: Cat enjoying a good iPad game +image: ../media/7838011c80ce11e19e4a12313813ffc0_7.jpg +author: Matthias Kretschmann + +date: 2012-04-07 16:26:46+00:00 +--- + + diff --git a/content/posts/2012-04-07-ipad-porn.md b/content/posts/2012-04-07-ipad-porn.md new file mode 100644 index 00000000..9f51d1b2 --- /dev/null +++ b/content/posts/2012-04-07-ipad-porn.md @@ -0,0 +1,13 @@ +--- +type: photo + +title: iPad Porn +image: ../media/97a44d6080b711e181bd12313817987b_7.jpg +author: Matthias Kretschmann + +date: 2012-04-07 13:43:00+00:00 + +coinhive: true +--- + + diff --git a/content/posts/2012-04-07-opera.md b/content/posts/2012-04-07-opera.md new file mode 100644 index 00000000..7d10d556 --- /dev/null +++ b/content/posts/2012-04-07-opera.md @@ -0,0 +1,11 @@ +--- +type: photo + +title: Opera +image: ../media/5df6e0a280c911e1a87612313804ec91_7.jpg +author: Matthias Kretschmann + +date: 2012-04-07 15:50:15+00:00 +--- + + diff --git a/content/posts/2012-04-08-common-kitchen-decoration.md b/content/posts/2012-04-08-common-kitchen-decoration.md new file mode 100644 index 00000000..8339d7c3 --- /dev/null +++ b/content/posts/2012-04-08-common-kitchen-decoration.md @@ -0,0 +1,11 @@ +--- +type: photo + +title: Common kitchen decoration +image: ../media/2ba6eeba81b111e1989612313815112c_7.jpg +author: Matthias Kretschmann + +date: 2012-04-08 19:29:33+00:00 +--- + + diff --git a/_src/_posts/2012-04-08-graffiti-old-school-style.md b/content/posts/2012-04-08-graffiti-old-school-style.md similarity index 63% rename from _src/_posts/2012-04-08-graffiti-old-school-style.md rename to content/posts/2012-04-08-graffiti-old-school-style.md index a1da2257..89d3fbdf 100644 --- a/_src/_posts/2012-04-08-graffiti-old-school-style.md +++ b/content/posts/2012-04-08-graffiti-old-school-style.md @@ -1,18 +1,11 @@ --- -layout: photo +type: photo title: Graffiti, old school style -image: 7e2b28f881b711e1af7612313813f8e8_7.jpg +image: ../media/7e2b28f881b711e1af7612313813f8e8_7.jpg author: Matthias Kretschmann date: 2012-04-08 20:14:49+00:00 -wordpress_id: 1743 -categories: -- photos -post_format: -- Image -tags: -- instagram --- from [Instagram](http://instagr.am), posted with [Instagrate to WordPress](http://www.polevaultweb.com/plugins/instagrate-to-wordpress/) diff --git a/_src/_posts/2012-04-20-the-origins-of-the-blink-tag.md b/content/posts/2012-04-20-the-origins-of-the-blink-tag.md similarity index 84% rename from _src/_posts/2012-04-20-the-origins-of-the-blink-tag.md rename to content/posts/2012-04-20-the-origins-of-the-blink-tag.md index a183f683..a37ec11f 100644 --- a/_src/_posts/2012-04-20-the-origins-of-the-blink-tag.md +++ b/content/posts/2012-04-20-the-origins-of-the-blink-tag.md @@ -1,17 +1,14 @@ --- -layout: link +type: link -title: The origins of the <blink> tag +title: The origins of the tag linkurl: http://www.montulli.org/theoriginofthe%3Cblink%3Etag author: Matthias Kretschmann date: 2012-04-20 08:48:46+00:00 -wordpress_id: 1712 -categories: -- design -post_format: -- Link + tags: +- design - history --- diff --git a/_src/_posts/2012-04-30-announcing-sketch2.md b/content/posts/2012-04-30-announcing-sketch2.md similarity index 90% rename from _src/_posts/2012-04-30-announcing-sketch2.md rename to content/posts/2012-04-30-announcing-sketch2.md index e00d174b..c31e12ed 100644 --- a/_src/_posts/2012-04-30-announcing-sketch2.md +++ b/content/posts/2012-04-30-announcing-sketch2.md @@ -1,16 +1,14 @@ --- -layout: link +type: link title: Announcing Sketch 2.0 linkurl: http://www.bohemiancoding.com/about/blog/announcing-sketch-2-0/ author: Matthias Kretschmann date: 2012-04-30 12:37:05+00:00 -wordpress_id: 1950 -categories: + +tags: - design -post_format: -- Link --- Remarkable update to Bohemian Coding's [Sketch](http://bohemiancoding.com/sketch) app. It's like Photoshop but with only the UI design related features included: diff --git a/_src/_posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md b/content/posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md similarity index 94% rename from _src/_posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md rename to content/posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md index 57ce1fbe..e876fae1 100644 --- a/_src/_posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md +++ b/content/posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md @@ -1,16 +1,11 @@ --- -layout: link +type: link title: A call for open, free access to academic research linkurl: http://www.guardian.co.uk/commentisfree/2012/may/01/open-free-access-academic-research author: Matthias Kretschmann date: 2012-05-02 03:12:40+00:00 -wordpress_id: 1989 -categories: -- links -post_format: -- Link --- David Willetts, a minister of state for universities and science in the UK, is calling for more open access in academics: diff --git a/_src/_posts/2012-05-03-antique-chrome.md b/content/posts/2012-05-03-antique-chrome.md similarity index 59% rename from _src/_posts/2012-05-03-antique-chrome.md rename to content/posts/2012-05-03-antique-chrome.md index 32b77c1a..e4752aae 100644 --- a/_src/_posts/2012-05-03-antique-chrome.md +++ b/content/posts/2012-05-03-antique-chrome.md @@ -1,19 +1,12 @@ --- -layout: photo +type: photo title: Antique Chrome -image: 5fc688aa953811e180c9123138016265_7.jpg +image: ../media/5fc688aa953811e180c9123138016265_7.jpg author: Matthias Kretschmann date: 2012-05-03 15:55:15+00:00 -wordpress_id: 1996 -categories: -- photos -post_format: -- Image -tags: -- instagram --- -from [Instagram](http://instagr.am), posted with [Instagrate to WordPress](http://www.polevaultweb.com/plugins/instagrate-to-wordpress/) +from [Instagram](http://instagr.am), posted with [Instagrate to WordPress](http://www.polevaultweb.com/plugins/instagrate-to-wordpress/) diff --git a/_src/_posts/2012-05-04-world-press-photo-2012.md b/content/posts/2012-05-04-world-press-photo-2012.md similarity index 85% rename from _src/_posts/2012-05-04-world-press-photo-2012.md rename to content/posts/2012-05-04-world-press-photo-2012.md index 8a6a1534..f622218c 100644 --- a/_src/_posts/2012-05-04-world-press-photo-2012.md +++ b/content/posts/2012-05-04-world-press-photo-2012.md @@ -1,20 +1,17 @@ --- -layout: link +type: link title: World Press Photo 2012 linkurl: http://www.worldpressphoto.org/gallery/2012-world-press-photo author: Matthias Kretschmann date: 2012-05-04 13:12:54+00:00 -wordpress_id: 1997 -categories: -- photography -post_format: -- Link + tags: +- photography - photojournalism --- -The winners of the 2012 contest were announced and the [winner gallery](http://www.worldpressphoto.org/gallery/2012-world-press-photo) is worth checking out. +The winners of the 2012 contest were announced and the [winner gallery](http://www.worldpressphoto.org/gallery/2012-world-press-photo) is worth checking out. This years [winner, dubbed Photo Of The Year 2011](http://www.worldpressphoto.org/photo/world-press-photo-year-2011-0), comes from Spanish photographer [Samuel Aranda](http://www.samuelaranda.net/). diff --git a/_src/_posts/2012-05-09-media-query-asset-downloading-results.md b/content/posts/2012-05-09-media-query-asset-downloading-results.md similarity index 84% rename from _src/_posts/2012-05-09-media-query-asset-downloading-results.md rename to content/posts/2012-05-09-media-query-asset-downloading-results.md index 41544540..35be357e 100644 --- a/_src/_posts/2012-05-09-media-query-asset-downloading-results.md +++ b/content/posts/2012-05-09-media-query-asset-downloading-results.md @@ -1,17 +1,14 @@ --- -layout: link +type: link title: Media Query & Asset Downloading Results linkurl: http://timkadlec.com/2012/04/media-query-asset-downloading-results/ author: Matthias Kretschmann date: 2012-05-09 09:48:19+00:00 -wordpress_id: 2019 -categories: -- design -post_format: -- Link + tags: +- design - responsive - retina --- diff --git a/_src/_posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md b/content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md similarity index 92% rename from _src/_posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md rename to content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md index b7fe5181..38517ebf 100644 --- a/_src/_posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md +++ b/content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md @@ -1,17 +1,14 @@ --- -layout: link +type: link title: Nielsen vs Clark – they're both wrong linkurl: http://netmagazine.com/opinions/nielsen-vs-clark-theyre-both-wrong author: Matthias Kretschmann date: 2012-05-12 13:19:02+00:00 -wordpress_id: 2024 -categories: -- design -post_format: -- Link + tags: +- design - mobile - responsive --- diff --git a/_src/_posts/2012-05-12-which-responsive-images-solution-should-you-use.md b/content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md similarity index 82% rename from _src/_posts/2012-05-12-which-responsive-images-solution-should-you-use.md rename to content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md index 9d680c46..d5aa6f17 100644 --- a/_src/_posts/2012-05-12-which-responsive-images-solution-should-you-use.md +++ b/content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md @@ -1,17 +1,14 @@ --- -layout: link +type: link title: Which responsive images solution should you use? linkurl: http://css-tricks.com/which-responsive-images-solution-should-you-use/ author: Matthias Kretschmann date: 2012-05-12 17:52:53+00:00 -wordpress_id: 2041 -categories: -- design -post_format: -- Link + tags: +- design - mobile - responsive --- diff --git a/_src/_posts/2012-05-14-welcome-to-kremalicious2.md b/content/posts/2012-05-14-welcome-to-kremalicious2.md similarity index 85% rename from _src/_posts/2012-05-14-welcome-to-kremalicious2.md rename to content/posts/2012-05-14-welcome-to-kremalicious2.md index f9fab5be..7ead30f2 100644 --- a/_src/_posts/2012-05-14-welcome-to-kremalicious2.md +++ b/content/posts/2012-05-14-welcome-to-kremalicious2.md @@ -1,17 +1,15 @@ --- -layout: post +type: post title: Welcome to kremalicious2 -image: kremalicious2-teaser.jpg +image: ../media/kremalicious2-teaser.jpg author: Matthias Kretschmann date: 2012-05-14 19:33:22+00:00 -wordpress_id: 1920 -categories: - - personal tags: - - wordpress +- personal +- wordpress --- It finally happened. After so many rejected revisions, so many pauses, so much coffee: kremalicious2 is here. @@ -30,13 +28,13 @@ To make future maintenance a bit easier, I’m using the simple [HS Responsive ## Typography -![](/media/kremalicious2-typography.jpg)After much experimentation, all fonts (that is, those for texts) on this blog are now coming from TypeKit. The body text is set in [Rooney Web](http://www.janfromm.de/typefaces/rooney/overview/) from [Jan Fromm](https://twitter.com/janfromm) which looks just gorgeous on Retina screens. All headings & buttons use Adobe's [Cronos Pro](https://typekit.com/fonts/cronos-pro). +![](../media/kremalicious2-typography.jpg)After much experimentation, all fonts (that is, those for texts) on this blog are now coming from TypeKit. The body text is set in [Rooney Web](http://www.janfromm.de/typefaces/rooney/overview/) from [Jan Fromm](https://twitter.com/janfromm) which looks just gorgeous on Retina screens. All headings & buttons use Adobe's [Cronos Pro](https://typekit.com/fonts/cronos-pro). Sadly, Typekit [only works in webkit based mobile browsers](http://help.typekit.com/customer/portal/articles/6786) which is a real bummer. Sorry Firefox & Opera users on mobile devices. ## Icons -![](/media/kremalicious2-topicicons.jpg)All icons on the site are coming from the awesome icon font [Font Awesome](http://fortawesome.github.com/Font-Awesome/) made by Dave Gandy. But the original font was missing some needed glyphs so I’m using a fork called [Font Awesome More](http://gregoryloucas.github.com/Font-Awesome-More/) from Gregory Loucas ([@gregoryLpaul](https://twitter.com/gregoryLpaul)). This makes things like changing icon colors so much easier but using icon fonts still has the problem of small icons not rendering super crisp, although `font-smoothing: antialiased` helps a bit. +![](../media/kremalicious2-topicicons.jpg)All icons on the site are coming from the awesome icon font [Font Awesome](http://fortawesome.github.com/Font-Awesome/) made by Dave Gandy. But the original font was missing some needed glyphs so I’m using a fork called [Font Awesome More](http://gregoryloucas.github.com/Font-Awesome-More/) from Gregory Loucas ([@gregoryLpaul](https://twitter.com/gregoryLpaul)). This makes things like changing icon colors so much easier but using icon fonts still has the problem of small icons not rendering super crisp, although `font-smoothing: antialiased` helps a bit. ## CSS beats Images @@ -46,7 +44,7 @@ The whole interface is mostly CSS based, only the logo typeface with the cloud a But even those @2x assets are just blurry when the user zooms into the interface. But with most interface elements being css or font based you can zoom in ridiculously without anything becoming blurry. That's actually a scaled down full size screenshot of a zoom in on the 3rd generation iPad: -![](/media/kremaliciouscom-iPad-3.jpg) +![](../media/kremaliciouscom-iPad-3.jpg) Needless to say this introduces new problems, especially for performance on mobile devices. As we know, current mobile devices and their browsers come into memory problems when told to render a lot of css box-shadows or css gradients. This all isn't noticeable on Desktop devices or an iPad 1, but it's quite noticeable in the Android stock browser on a Nexus S for instance. @@ -74,11 +72,11 @@ Link post means a short comment from me to a valuable or interesting resource wh ### Photo posts -![](/media/kremalicious2-photoposts.jpg) +![](../media/kremalicious2-photoposts.jpg) [Photo posts](/photos) are my new favorite: beside selected images from my Flickr and 500px profiles, they include automatic posting of my Instagram images. After being taken, a new Instagram image is posted immediately as a special styled photo post in this blog. -![](/media/kremalicious2-photogrid.jpg)And I didn’t wanted to clutter the blog stream in times when there’re a lot of photo-only posts between text based posts. +![](../media/kremalicious2-photogrid.jpg)And I didn’t wanted to clutter the blog stream in times when there’re a lot of photo-only posts between text based posts. So all photo posts which immediately follow one another are grouped together in a grid, nicely laid out by [jQuery Masonry](http://masonry.desandro.com/). I couldn't figure out a way to make this filtering on the WordPress loop level for now so this grouping is done with jQuery after page load. diff --git a/_src/_posts/2012-05-15-wp-icons-template.md b/content/posts/2012-05-15-wp-icons-template.md similarity index 92% rename from _src/_posts/2012-05-15-wp-icons-template.md rename to content/posts/2012-05-15-wp-icons-template.md index c7cd7932..0de407b0 100644 --- a/_src/_posts/2012-05-15-wp-icons-template.md +++ b/content/posts/2012-05-15-wp-icons-template.md @@ -1,20 +1,18 @@ --- -layout: post +type: post title: WordPress Admin Icons Template -image: kremalicious-Teaser-WP-Icon-Template.png +image: ../media/kremalicious-Teaser-WP-Icon-Template.png author: Matthias Kretschmann date: 2012-05-15 16:00:44+00:00 -wordpress_id: 2043 -categories: - - design - - goodies tags: - - boilerplate - - tutorial - - wordpress +- design +- goodies +- boilerplate +- tutorial +- wordpress coinhive: true @@ -35,7 +33,7 @@ So if you value quality and want pixel perfect icons in your admin area you need ## The Template -![](/media/WordPress-Admin-Icons-Template-Filled.png) +![](../media/WordPress-Admin-Icons-Template-Filled.png) I’ve put the template along with the implementation examples from the next section on [github](https://github.com/kremalicious/wp-icons-template). You can just download the whole package right away: @@ -70,8 +68,8 @@ You can always refer to the inline commented versions of these snippets in the [ WordPress automatically puts an ID around your new menu item which contains the name of your custom post type (the $post_type parameter in `register_post_type()`). Just change this to your own post type name: -{% highlight php %} +```php /images/icon-adminmenu16-sprite_2x.png') !important; + background-image: ../media/url('/images/icon-adminmenu16-sprite_2x.png') !important; -webkit-background-size: 16px 48px; -moz-background-size: 16px 48px; background-size: 16px 48px; } /* Post Screen - 32px @2x */ .icon32-posts-YOUR_POSTTYPE_NAME { - background-image: url('/images/icon-adminpage32_2x.png') !important; + background-image: ../media/url('/images/icon-adminpage32_2x.png') !important; -webkit-background-size: 32px 32px; -moz-background-size: 32px 32px; background-size: 32px 32px; @@ -118,15 +116,16 @@ function custom_post_type_icon() { - -{% endhighlight %} +``` ### Plugin And Theme Options Icons The easiest way is to just use this markup on your option page before the page heading which is the default on all admin pages: -{% highlight html %}
    -

    My cool option page

    {% endhighlight %} +```html +
    +

    My cool option page

    +``` This is the markup being addressed in the snippet block for option page icons. The `icon32` class will make sure everything is aligned consistent to all other pages without redefining everything in css. @@ -136,8 +135,7 @@ Putting your plugin or option page in the top level of the admin menu via `add_m So all this combined leads to this snippet: -{% highlight php %} - +```php /images/icon-adminmenu16-sprite_2x.png') !important; + background-image: ../media/url('/images/icon-adminmenu16-sprite_2x.png') !important; -webkit-background-size: 16px 48px; -moz-background-size: 16px 48px; background-size: 16px 48px; @@ -186,7 +184,7 @@ function option_page_icon() { /* Option Screen - 32px @2x */ #PLUGINNAME.icon32 { - background-image: url('/images/icon-adminpage32_2x.png') !important; + background-image: ../media/url('/images/icon-adminpage32_2x.png') !important; -webkit-background-size: 32px 32px; -moz-background-size: 32px 32px; background-size: 32px 32px; @@ -196,8 +194,7 @@ function option_page_icon() { - -{% endhighlight %} +``` Just replace the bits in the ID selectors with your stuff. If you have problems finding the correct ID selector just inspect element in the admin area. diff --git a/_src/_posts/2012-05-21-why-comic-sans.md b/content/posts/2012-05-21-why-comic-sans.md similarity index 92% rename from _src/_posts/2012-05-21-why-comic-sans.md rename to content/posts/2012-05-21-why-comic-sans.md index f28f219f..2a006b0a 100644 --- a/_src/_posts/2012-05-21-why-comic-sans.md +++ b/content/posts/2012-05-21-why-comic-sans.md @@ -1,17 +1,14 @@ --- -layout: link +type: link title: Why Comic Sans? linkurl: http://www.connare.com/whycomic.htm author: Matthias Kretschmann date: 2012-05-21 21:18:17+00:00 -wordpress_id: 2120 -categories: -- design -post_format: -- Link + tags: +- design - typography --- diff --git a/_src/_posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md b/content/posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md similarity index 92% rename from _src/_posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md rename to content/posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md index 87d46252..26273f0e 100644 --- a/_src/_posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md +++ b/content/posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md @@ -1,16 +1,14 @@ --- -layout: link +type: link title: How Yahoo Killed Flickr and Lost the Internet linkurl: http://gizmodo.com/5910223/how-yahoo-killed-flickr-and-lost-the-internet author: Matthias Kretschmann date: 2012-05-22 01:00:03+00:00 -wordpress_id: 2125 -categories: + +tags: - photography -post_format: -- Link --- Great insight article into what and how exactly Yahoo managed to screw this up. diff --git a/_src/_posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md b/content/posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md similarity index 92% rename from _src/_posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md rename to content/posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md index 2fa3c93d..4d1b03c0 100644 --- a/_src/_posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md +++ b/content/posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md @@ -1,17 +1,14 @@ --- -layout: link +type: link title: Responsive Images and Web Standards at the Turning Point linkurl: http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/ author: Matthias Kretschmann date: 2012-05-22 06:23:26+00:00 -wordpress_id: 2133 -categories: -- design -post_format: -- Link + tags: +- design - mobile - responsive - retina diff --git a/_src/_posts/2012-05-23-like-modern-heating-only-more-badass.md b/content/posts/2012-05-23-like-modern-heating-only-more-badass.md similarity index 63% rename from _src/_posts/2012-05-23-like-modern-heating-only-more-badass.md rename to content/posts/2012-05-23-like-modern-heating-only-more-badass.md index 599a6188..828d4379 100644 --- a/_src/_posts/2012-05-23-like-modern-heating-only-more-badass.md +++ b/content/posts/2012-05-23-like-modern-heating-only-more-badass.md @@ -1,18 +1,11 @@ --- -layout: photo +type: photo title: Like modern heating only more badass -image: 41b5a454a43811e1989612313815112c_7.jpeg +image: ../media/41b5a454a43811e1989612313815112c_7.jpeg author: Matthias Kretschmann date: 2012-05-23 14:23:38+00:00 -wordpress_id: 2142 -categories: -- photos -post_format: -- Image -tags: -- instagram --- @[Ofen- und Keramikmuseum Velten](http://www.ofenmuseum-velten.de/) diff --git a/_src/_posts/2012-05-26-html-for-icon-font-usage.md b/content/posts/2012-05-26-html-for-icon-font-usage.md similarity index 93% rename from _src/_posts/2012-05-26-html-for-icon-font-usage.md rename to content/posts/2012-05-26-html-for-icon-font-usage.md index 934931fb..8723799d 100644 --- a/_src/_posts/2012-05-26-html-for-icon-font-usage.md +++ b/content/posts/2012-05-26-html-for-icon-font-usage.md @@ -1,16 +1,14 @@ --- -layout: link +type: link title: HTML for Icon Font Usage linkurl: http://css-tricks.com/html-for-icon-font-usage/ author: Matthias Kretschmann date: 2012-05-26 05:13:58+00:00 -wordpress_id: 2154 -categories: + +tags: - design -post_format: -- Link --- Chris Coyier on an accessible implementation for icon fonts: diff --git a/_src/_posts/2012-05-27-balloon.md b/content/posts/2012-05-27-balloon.md similarity index 50% rename from _src/_posts/2012-05-27-balloon.md rename to content/posts/2012-05-27-balloon.md index f82a7e4d..d5997b14 100644 --- a/_src/_posts/2012-05-27-balloon.md +++ b/content/posts/2012-05-27-balloon.md @@ -1,18 +1,11 @@ --- -layout: photo +type: photo title: Balloon -image: 690fe368a81911e1b2fe1231380205bf_7.jpg +image: ../media/690fe368a81911e1b2fe1231380205bf_7.jpg author: Matthias Kretschmann date: 2012-05-27 17:16:11+00:00 -wordpress_id: 2167 -categories: -- photos -post_format: -- Image -tags: -- instagram --- [Photo on Instagram](http://instagr.am/p/LIwqMrtSs2/) diff --git a/_src/_posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md b/content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md similarity index 96% rename from _src/_posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md rename to content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md index 063cddde..36710d82 100644 --- a/_src/_posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md +++ b/content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md @@ -1,16 +1,14 @@ --- -layout: link +type: link title: Can We Please Move Past Apple's Silly, Faux-Real UIs? linkurl: http://www.fastcodesign.com/1669879/can-we-please-move-past-apples-silly-faux-real-uis author: Matthias Kretschmann date: 2012-06-05 16:25:56+00:00 -wordpress_id: 2187 -categories: + +tags: - design -post_format: -- Link --- Much has been written about the good and bad of skeuomorphism. Tom Hobbs wrote a [great piece](http://www.fastcodesign.com/1669879/can-we-please-move-past-apples-silly-faux-real-uis) putting everything together. diff --git a/_src/_posts/2012-06-13-retina-icons-in-wordpress-3-4.md b/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md similarity index 69% rename from _src/_posts/2012-06-13-retina-icons-in-wordpress-3-4.md rename to content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md index df46f3a3..5875a20e 100644 --- a/_src/_posts/2012-06-13-retina-icons-in-wordpress-3-4.md +++ b/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md @@ -1,16 +1,14 @@ --- -layout: post +type: post title: Retina icons in WordPress 3.4 author: Matthias Kretschmann date: 2012-06-13 19:01:20+00:00 -wordpress_id: 2195 -categories: - - design tags: - - wordpress +- design +- wordpress coinhive: true --- @@ -19,12 +17,12 @@ Apart from a nicely responsive admin area, WordPress 3.4 now [includes retina as And it looks gorgeous. Here's a detail screenshot of the admin area in 3.4 in full scale, taken on the iPad 3: -![](/media/wp34_retina_icons.png) +![](../media/wp34_retina_icons.png) So if you're a plugin developer you absolutely want to make sure to include retina assets for your plugin, like a double sized admin menu icon. There's just one problem: WordPress doesn't include anything to make this easy for developers. The functions `register_post_type()` and `add_menu_page()` only allow you to define one image as menu icon which then gets inserted as `img` tag. -[![](/media/kremalicious-Teaser-WP-Icon-Template.png)](/wp-icons-template/)If you want to include retina assets, you have to do it via CSS and media queries. Have a look at the code examples in my [WordPress icons template post](/wp-icons-template/) or peek around in the [github repository](https://github.com/kremalicious/wp-icons-template) to see how this can be achieved. +[![](../media/kremalicious-Teaser-WP-Icon-Template.png)](/wp-icons-template/)If you want to include retina assets, you have to do it via CSS and media queries. Have a look at the code examples in my [WordPress icons template post](/wp-icons-template/) or peek around in the [github repository](https://github.com/kremalicious/wp-icons-template) to see how this can be achieved. And no, [SVG for your icons are not the solution](http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html). diff --git a/content/posts/2012-06-27-typography-window.md b/content/posts/2012-06-27-typography-window.md new file mode 100644 index 00000000..56b82c86 --- /dev/null +++ b/content/posts/2012-06-27-typography-window.md @@ -0,0 +1,12 @@ +--- +type: photo + +title: Typography window +image: ../media/80a136dabff711e188131231381b5c25_7.jpg +author: Matthias Kretschmann + +date: 2012-06-27 01:29:13+00:00 +--- + +from Instagram + diff --git a/_src/_posts/2012-06-30-why-files-exist.md b/content/posts/2012-06-30-why-files-exist.md similarity index 97% rename from _src/_posts/2012-06-30-why-files-exist.md rename to content/posts/2012-06-30-why-files-exist.md index b0bc125f..f795f20d 100644 --- a/_src/_posts/2012-06-30-why-files-exist.md +++ b/content/posts/2012-06-30-why-files-exist.md @@ -1,16 +1,14 @@ --- -layout: link +type: link title: Why Files exist linkurl: http://blog.filepicker.io/post/26157006600/why-files-exist author: Matthias Kretschmann date: 2012-06-30 18:17:33+00:00 -wordpress_id: 2219 -categories: + +tags: - design -post_format: -- Link --- [This](http://blog.filepicker.io/post/26157006600/why-files-exist) has been said many times, but it bears repeating: diff --git a/_src/_posts/2012-07-04-newton-reconsidered.md b/content/posts/2012-07-04-newton-reconsidered.md similarity index 87% rename from _src/_posts/2012-07-04-newton-reconsidered.md rename to content/posts/2012-07-04-newton-reconsidered.md index 329aa106..6d094b15 100644 --- a/_src/_posts/2012-07-04-newton-reconsidered.md +++ b/content/posts/2012-07-04-newton-reconsidered.md @@ -1,17 +1,14 @@ --- -layout: link +type: link title: Newton, Reconsidered linkurl: http://techland.time.com/2012/06/01/newton-reconsidered/ author: Matthias Kretschmann date: 2012-07-04 01:19:17+00:00 -wordpress_id: 2239 -categories: -- design -post_format: -- Link + tags: +- design - apple - newton --- @@ -20,6 +17,6 @@ Skeuomorphism on mobile devices has come a long way: > Using a second unit, Steve Capps, one of Newton’s creators, showed how you could use it to order a pizza by moving topping icons onto a pie and then sending out a fax. In 1992, that was show-stopping stuff. -But instead of another Newton history article, this one is an interesting "hands-on assessment" of Apple's first PDA. Almost 20 years after its release, Harry McCracken got himself a fully working MessagePad H1000 over eBay and tested it. +But instead of another Newton history article, this one is an interesting "hands-on assessment" of Apple's first PDA. Almost 20 years after its release, Harry McCracken got himself a fully working MessagePad H1000 over eBay and tested it. Would be interesting to know if the same could be done with an iPhone 4S or Galaxy Nexus in 2032. I doubt it. diff --git a/_src/_posts/2012-07-07-what-makes-twitter-twitter.md b/content/posts/2012-07-07-what-makes-twitter-twitter.md similarity index 89% rename from _src/_posts/2012-07-07-what-makes-twitter-twitter.md rename to content/posts/2012-07-07-what-makes-twitter-twitter.md index 9506353a..063e8afc 100644 --- a/_src/_posts/2012-07-07-what-makes-twitter-twitter.md +++ b/content/posts/2012-07-07-what-makes-twitter-twitter.md @@ -1,16 +1,11 @@ --- -layout: link +type: link title: What makes Twitter Twitter? linkurl: http://alt.adrianshort.co.uk/blog/2012/06/30/what-makes-twitter-twitter/ author: Matthias Kretschmann date: 2012-07-07 08:18:58+00:00 -wordpress_id: 2252 -categories: -- links -post_format: -- Link --- Couldn't agree more: diff --git a/_src/_posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md b/content/posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md similarity index 94% rename from _src/_posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md rename to content/posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md index fce0f311..a669e966 100644 --- a/_src/_posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md +++ b/content/posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md @@ -1,17 +1,14 @@ --- -layout: link +type: link title: 'Crossdressing, Compression and Colliders: The First Photo on the Web' linkurl: http://motherboard.vice.com/2012/7/10/crossdressing-compression-and-colliders-the-first-photo-on-the-web author: Matthias Kretschmann date: 2012-07-11 21:00:07+00:00 -wordpress_id: 2261 -categories: -- photography -post_format: -- Link + tags: +- photography - history --- diff --git a/_src/_posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md b/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md similarity index 90% rename from _src/_posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md rename to content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md index 3fdd81b7..3309dc64 100644 --- a/_src/_posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md +++ b/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md @@ -1,14 +1,14 @@ --- -layout: post +type: post + title: Add your web site to the Windows 8 Metro UI -image: kremalicious-Teaser-Metro-Tile.jpg +image: ../media/kremalicious-Teaser-Metro-Tile.jpg author: Matthias Kretschmann date: 2012-07-15 16:19:55+00:00 -wordpress_id: 2269 -categories: -- design + tags: +- design - icon - windows @@ -28,23 +28,23 @@ While the size is the same as for the iPad 3 homescreen icon, I strongly suggest As an example, I just [pushed](https://github.com/kremalicious/kremalicious2/commit/4c7e215f4abecde4385028767b633be1278f277e) the Metro [tile image](/metro-tile.png) for kremalicious.com with those `meta` tags: -{% highlight html %} +```html -{% endhighlight %} +``` When browsing the site in Windows 8/Internet Explorer 10, users have the choice of pinning it to the start screen: -![](/media/Windows-8-Metro-tile-kremalicious.png) +![](../media/Windows-8-Metro-tile-kremalicious.png) And this is how it looks like on the Windows 8 start screen: -![](/media/Windows-8-Metro-tile-kremalicious-in-action.png) +![](../media/Windows-8-Metro-tile-kremalicious-in-action.png) As you can see, pinned sites always get a smaller, square tile. Sadly, the image somehow still gets resized which makes it really hard to create pixel perfect icons for it. It's also not possible to horizontally center the image within it's tile, placing the logo at the bottom of the image file ended up the same. That's because the title can fill two rows. And the image is only used on the start screen but not on the All apps screen where your site will get the default IE logo, at least with the defined background color: -![](/media/Windows-8-Metro-tile-kremalicious-all-apps.png) +![](../media/Windows-8-Metro-tile-kremalicious-all-apps.png) The described behavior and screenshots are from the Windows 8 Consumer Preview and may change. I will update this article if there's new stuff in the final version. diff --git a/_src/_assets/fonts/Google Android License.txt b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/Google Android License.txt similarity index 100% rename from _src/_assets/fonts/Google Android License.txt rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/Google Android License.txt diff --git a/_src/_assets/fonts/Roboto-Regular-webfont.eot b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.eot similarity index 100% rename from _src/_assets/fonts/Roboto-Regular-webfont.eot rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.eot diff --git a/_src/_assets/fonts/Roboto-Regular-webfont.svg b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.svg similarity index 100% rename from _src/_assets/fonts/Roboto-Regular-webfont.svg rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.svg diff --git a/_src/_assets/fonts/Roboto-Regular-webfont.ttf b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.ttf similarity index 100% rename from _src/_assets/fonts/Roboto-Regular-webfont.ttf rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.ttf diff --git a/_src/_assets/fonts/Roboto-Regular-webfont.woff b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.woff similarity index 100% rename from _src/_assets/fonts/Roboto-Regular-webfont.woff rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.woff diff --git a/_src/_posts/2012-07-16-using-kbd-for-fun-and-profit.md b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md similarity index 73% rename from _src/_posts/2012-07-16-using-kbd-for-fun-and-profit.md rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md index af97aede..8cb443a4 100644 --- a/_src/_posts/2012-07-16-using-kbd-for-fun-and-profit.md +++ b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md @@ -1,18 +1,17 @@ --- -layout: post +type: post -title: Using <kbd> for fun and profit -image: kremalicious-kbdfun-teaser.png -style: post-kbd.min.css +title: Using for fun and profit +image: ./kremalicious-kbdfun-teaser.png +style: ./post-kbd.css author: Matthias Kretschmann featured: true date: 2012-07-16 14:36:58+00:00 -categories: - - design - - goodies + tags: - - css +- design +- css coinhive: true --- @@ -32,7 +31,6 @@ They are completely styled with CSS3 so they're sharp on all screens no matter h ## Usage - ### CSS Just drop in the `kbdftw.css` in your `head`: @@ -43,8 +41,10 @@ Just drop in the `kbdftw.css` in your `head`: If you want to use the Android key style, include roboto.css before: -{% highlight html %} -{% endhighlight %} +```html + + +``` You also need to add all the Roboto font files from assets/fonts to your project. @@ -58,21 +58,45 @@ For the Android style, there's `roboto.less` as include at the end. But the font The default styling are light keys with Lucida Grande as font: -{% highlight html %}Q{% endhighlight %} becomes Q +```html +Q +``` + +becomes Q Add a dark class to get the dark keys: -{% highlight html %}Q{% endhighlight %} becomes Q +```html +Q +``` + +becomes Q Adding an ios or android class gives a replica of those system keys. Android uses three different colors on the default keyboard. -{% highlight html %}Q{% endhighlight %} becomes Q +```html +Q +``` -{% highlight html %}Q{% endhighlight %} becomes Q +becomes Q -{% highlight html %}Q{% endhighlight %} becomes Q +```html +Q +``` -{% highlight html %}Q{% endhighlight %} becomes Q +becomes Q + +```html +Q +``` + +becomes Q + +```html +Q +``` + +becomes Q I've let the default `display: inline` intact so all padding on the `kbd` elements won't affect the line-height of the surrounding text. This leads to problems when you want to use them over multiple lines so just make them `display: inline-block` in this scenario. diff --git a/_src/_media/kremalicious-kbdfun-teaser.png b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/kremalicious-kbdfun-teaser.png similarity index 100% rename from _src/_media/kremalicious-kbdfun-teaser.png rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/kremalicious-kbdfun-teaser.png diff --git a/content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.css b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.css new file mode 100644 index 00000000..d1040bf4 --- /dev/null +++ b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.css @@ -0,0 +1,73 @@ +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('/media/Roboto-Regular-webfont.eot'); + src: url('/media/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('/media/Roboto-Regular-webfont.woff') format('woff'), url('/media/Roboto-Regular-webfont.ttf') format('truetype'), url('/media/Roboto-Regular-webfont.svg#RobotoRegular') format('svg'); + font-weight: normal; + font-style: normal; +} diff --git a/_src/_posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md b/content/posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md similarity index 92% rename from _src/_posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md rename to content/posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md index bbe49753..c1c9ee22 100644 --- a/_src/_posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md +++ b/content/posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md @@ -1,17 +1,14 @@ --- -layout: link +type: link title: First computer generated graphics film from 1963 linkurl: http://techchannel.att.com/play-video.cfm/2012/7/18/AT&T-Archives-First-Computer-Generated-Graphics-Film author: Matthias Kretschmann date: 2012-07-19 12:30:56+00:00 -wordpress_id: 2336 -categories: -- design -post_format: -- Link + tags: +- design - history --- diff --git a/content/posts/2012-07-20-mmmmh-coffee.md b/content/posts/2012-07-20-mmmmh-coffee.md new file mode 100644 index 00000000..b0263330 --- /dev/null +++ b/content/posts/2012-07-20-mmmmh-coffee.md @@ -0,0 +1,12 @@ +--- +type: photo + +title: Mmmmh, Coffee +image: ../media/66a6e0c0d25a11e1a94522000a1e8aaf_7.jpg +author: Matthias Kretschmann + +date: 2012-07-20 11:02:30+00:00 +--- + +from Instagram + diff --git a/_src/_posts/2012-08-07-projectpurple.md b/content/posts/2012-08-07-projectpurple.md similarity index 69% rename from _src/_posts/2012-08-07-projectpurple.md rename to content/posts/2012-08-07-projectpurple.md index 0fa547b8..cd86e98f 100644 --- a/_src/_posts/2012-08-07-projectpurple.md +++ b/content/posts/2012-08-07-projectpurple.md @@ -1,17 +1,18 @@ --- -layout: post +type: post title: Project Purple -image: Teaser-Project-Purple.png -download: project-purple-kremalicious.zip +image: ../media/Teaser-Project-Purple.png +download: ../media/project-purple-kremalicious.zip author: Matthias Kretschmann featured: true date: 2012-08-07 13:15:44+00:00 -category: goodies + tags: - - iphone - - wallpaper +- goodies +- iphone +- wallpaper coinhive: true --- @@ -22,24 +23,24 @@ It [has been revealed](http://www.theverge.com/2012/8/3/3218846/schiller-forstal > Forstall said that "on the front door of the Purple Dorm we put a sign up that said 'Fight Club'... because the first rule of that project was to not talk about it outside those doors." -![](/media/project-purple-nexus-kremalicious.png) +![](../media/project-purple-nexus-kremalicious.png) The full size I designed the wallpaper in is 3200x2048px. I don't know why Apple uses 3200px as width for the default wallpapers in Mountain Lion but it seems a good width for now. And a height of 2048px makes this big size perfectly usable for the iPad 3 too. -![](/media/Project-Purple-Dribbble.png) +![](../media/Project-Purple-Dribbble.png) ## Download Download the whole package with all the sizes included or grab the individual ones from the list, all linked to the image files:

    - Download zip + Download zip

    - * [Desktop/rMBP/iPad 3 (3200x2048)](/media/project-purple-kremalicious.png) - * [Laptop/Nexus 7/Galaxy Nexus (1280x800)](/media/project-purple-nexus-kremalicious.png) - * [iPad (1024x1024)](/media/project-purple-ipad-kremalicious.png) - * [iPhone (640x960)](/media/project-purple-iphone4-kremalicious.png) + * [Desktop/rMBP/iPad 3 (3200x2048)](../media/project-purple-kremalicious.png) + * [Laptop/Nexus 7/Galaxy Nexus (1280x800)](../media/project-purple-nexus-kremalicious.png) + * [iPad (1024x1024)](../media/project-purple-ipad-kremalicious.png) + * [iPhone (640x960)](../media/project-purple-iphone4-kremalicious.png) ## License diff --git a/content/posts/2012-08-08-amazingly-early.md b/content/posts/2012-08-08-amazingly-early.md new file mode 100644 index 00000000..9549f92a --- /dev/null +++ b/content/posts/2012-08-08-amazingly-early.md @@ -0,0 +1,12 @@ +--- +type: photo + +title: Amazingly early +image: ../media/2ca7a094e10f11e1868c12313817a130_7.jpg +author: Matthias Kretschmann + +date: 2012-08-08 04:11:48+00:00 +--- + +from Instagram + diff --git a/_src/_posts/2012-08-20-im-joining-ezeep.md b/content/posts/2012-08-20-im-joining-ezeep.md similarity index 90% rename from _src/_posts/2012-08-20-im-joining-ezeep.md rename to content/posts/2012-08-20-im-joining-ezeep.md index 6c854dae..e54b3216 100644 --- a/_src/_posts/2012-08-20-im-joining-ezeep.md +++ b/content/posts/2012-08-20-im-joining-ezeep.md @@ -1,15 +1,14 @@ --- -layout: post +type: post title: I'm joining ezeep -image: kremalicious-Teaser-ezeep.png +image: ../media/kremalicious-Teaser-ezeep.png author: Matthias Kretschmann date: 2012-08-20 14:12:11+00:00 -wordpress_id: 2387 -categories: -- personal + tags: +- personal - ezeep --- diff --git a/content/posts/2012-08-25-so-much-room.md b/content/posts/2012-08-25-so-much-room.md new file mode 100644 index 00000000..c0719bbe --- /dev/null +++ b/content/posts/2012-08-25-so-much-room.md @@ -0,0 +1,12 @@ +--- +type: photo + +title: So much room +image: ../media/c0c45b6eeea211e1ad8e22000a1cdbb8_7.jpg +author: Matthias Kretschmann + +date: 2012-08-25 10:50:58+00:00 +--- + +from Instagram + diff --git a/content/posts/2012-09-07-huge-station-is-huge.md b/content/posts/2012-09-07-huge-station-is-huge.md new file mode 100644 index 00000000..1960dd76 --- /dev/null +++ b/content/posts/2012-09-07-huge-station-is-huge.md @@ -0,0 +1,12 @@ +--- +type: photo + +title: Huge station is huge +image: ../media/619b3900f92911e1a31922000a1cddf1_7.jpg +author: Matthias Kretschmann + +date: 2012-09-07 20:19:52+00:00 +--- + +from Instagram + diff --git a/content/posts/2012-09-10-subway-firefox.md b/content/posts/2012-09-10-subway-firefox.md new file mode 100644 index 00000000..400b71d6 --- /dev/null +++ b/content/posts/2012-09-10-subway-firefox.md @@ -0,0 +1,12 @@ +--- +type: photo + +title: Subway Firefox +image: ../media/84f9d2c4fb7411e19ca422000a1d0119_7.jpg +author: Matthias Kretschmann + +date: 2012-09-10 18:22:46+00:00 +--- + +from Instagram + diff --git a/content/posts/2012-09-12-sweet-typography.md b/content/posts/2012-09-12-sweet-typography.md new file mode 100644 index 00000000..6b10fdaa --- /dev/null +++ b/content/posts/2012-09-12-sweet-typography.md @@ -0,0 +1,12 @@ +--- +type: photo + +title: Sweet typography +image: ../media/01f8b0b8fcc611e19b5b123138140bce_7.jpg +author: Matthias Kretschmann + +date: 2012-09-12 10:38:36+00:00 +--- + +from Instagram + diff --git a/content/posts/2012-09-14-bvg-dos.md b/content/posts/2012-09-14-bvg-dos.md new file mode 100644 index 00000000..bee20224 --- /dev/null +++ b/content/posts/2012-09-14-bvg-dos.md @@ -0,0 +1,12 @@ +--- +type: photo + +title: BVG DOS +image: ../media/6c4003f2fe9911e1ae9122000a1e9e21_7.jpg +author: Matthias Kretschmann + +date: 2012-09-14 18:24:29+00:00 +--- + +from Instagram + diff --git a/_src/_posts/2012-09-26-designing-with-code.md b/content/posts/2012-09-26-designing-with-code.md similarity index 92% rename from _src/_posts/2012-09-26-designing-with-code.md rename to content/posts/2012-09-26-designing-with-code.md index 3414752f..9662b33a 100644 --- a/_src/_posts/2012-09-26-designing-with-code.md +++ b/content/posts/2012-09-26-designing-with-code.md @@ -1,16 +1,14 @@ --- -layout: link +type: link title: Designing with Code linkurl: http://www.teehanlax.com/blog/designing-with-code/ author: Matthias Kretschmann date: 2012-09-26 11:45:40+00:00 -wordpress_id: 2424 -categories: + +tags: - design -post_format: -- Link --- I try to repeat that at least 2 times a day: diff --git a/_src/_posts/2013-02-17-castle-garden.md b/content/posts/2013-02-17-castle-garden.md similarity index 60% rename from _src/_posts/2013-02-17-castle-garden.md rename to content/posts/2013-02-17-castle-garden.md index aecce5c6..97a70a29 100644 --- a/_src/_posts/2013-02-17-castle-garden.md +++ b/content/posts/2013-02-17-castle-garden.md @@ -1,16 +1,11 @@ --- -layout: photo +type: photo title: Castle Garden -image: 8372983659_da0e88ca79_o.jpg +image: ../media/8372983659_da0e88ca79_o.jpg author: Matthias Kretschmann date: 2013-02-17 11:50:21+00:00 -wordpress_id: 2434 -categories: -- photos -post_format: -- Image --- [Castle Garden | flickr](http://www.flickr.com/photos/krema/8372983659) diff --git a/_src/_posts/2013-02-17-ezeep-android-app-design.md b/content/posts/2013-02-17-ezeep-android-app-design.md similarity index 77% rename from _src/_posts/2013-02-17-ezeep-android-app-design.md rename to content/posts/2013-02-17-ezeep-android-app-design.md index b5cdd33b..3a8f3b74 100644 --- a/_src/_posts/2013-02-17-ezeep-android-app-design.md +++ b/content/posts/2013-02-17-ezeep-android-app-design.md @@ -1,12 +1,10 @@ --- -layout: photo +type: photo title: ezeep Android App Design -image: 8455835942_a9b9100373_o.jpg +image: ../media/8455835942_a9b9100373_o.jpg author: Matthias Kretschmann -categories: -- photos tags: - ezeep --- diff --git a/_src/_posts/2013-02-17-ezeep-office-view.md b/content/posts/2013-02-17-ezeep-office-view.md similarity index 76% rename from _src/_posts/2013-02-17-ezeep-office-view.md rename to content/posts/2013-02-17-ezeep-office-view.md index 1573c23d..f9df3870 100644 --- a/_src/_posts/2013-02-17-ezeep-office-view.md +++ b/content/posts/2013-02-17-ezeep-office-view.md @@ -1,12 +1,10 @@ --- -layout: photo +type: photo title: ezeep office view -image: 8450618380_83c64006c6_o.jpg +image: ../media/8450618380_83c64006c6_o.jpg author: Matthias Kretschmann -categories: -- photos tags: - ezeep --- diff --git a/_src/_posts/2013-05-23-ezeep-birds.md b/content/posts/2013-05-23-ezeep-birds.md similarity index 65% rename from _src/_posts/2013-05-23-ezeep-birds.md rename to content/posts/2013-05-23-ezeep-birds.md index 8a1e2a82..257140b6 100644 --- a/_src/_posts/2013-05-23-ezeep-birds.md +++ b/content/posts/2013-05-23-ezeep-birds.md @@ -1,11 +1,10 @@ --- -layout: photo +type: photo title: ezeep birds -image: 8776417095_43553c88c2_o.jpg +image: ../media/8776417095_43553c88c2_o.jpg author: Matthias Kretschmann -categories: -- photos + tags: - ezeep --- diff --git a/_src/_posts/2013-05-23-ezeep-origami.md b/content/posts/2013-05-23-ezeep-origami.md similarity index 66% rename from _src/_posts/2013-05-23-ezeep-origami.md rename to content/posts/2013-05-23-ezeep-origami.md index 9e44bca8..65d87df9 100644 --- a/_src/_posts/2013-05-23-ezeep-origami.md +++ b/content/posts/2013-05-23-ezeep-origami.md @@ -1,12 +1,10 @@ --- -layout: photo +type: photo title: ezeep origami -image: 8782995066_e90ff6b3ae_o.jpg +image: ../media/8782995066_e90ff6b3ae_o.jpg author: Matthias Kretschmann -categories: -- photos tags: - ezeep --- diff --git a/_src/_posts/2013-07-13-create-differentiate-iterate-10-pro-tips-on-relaunching-your-startup-website.md b/content/posts/2013-07-13-create-differentiate-iterate-10-pro-tips-on-relaunching-your-startup-website.md similarity index 97% rename from _src/_posts/2013-07-13-create-differentiate-iterate-10-pro-tips-on-relaunching-your-startup-website.md rename to content/posts/2013-07-13-create-differentiate-iterate-10-pro-tips-on-relaunching-your-startup-website.md index f5a3f3b5..ac7f6552 100644 --- a/_src/_posts/2013-07-13-create-differentiate-iterate-10-pro-tips-on-relaunching-your-startup-website.md +++ b/content/posts/2013-07-13-create-differentiate-iterate-10-pro-tips-on-relaunching-your-startup-website.md @@ -1,16 +1,15 @@ --- -layout: link +type: link title: Create, differentiate, iterate – 10 pro tips on relaunching your startup website linkurl: http://venturevillage.eu/10-pro-tips-redesign author: Matthias Kretschmann date: 2013-07-13 12:49:39+00:00 -categories: -- design -- personal tags: +- design - ezeep +- personal --- Was one of the people interviewed by Charmaine Li from VentureVillage about relaunching a startup's website where I talk a bit about [ezeep's relaunch](https://www.ezeep.com/blog/hip-hip-have-a-look-at-ezeeps-hot-new-home-page/). diff --git a/_src/_posts/2013-07-13-enterprise-software-sucks.md b/content/posts/2013-07-13-enterprise-software-sucks.md similarity index 96% rename from _src/_posts/2013-07-13-enterprise-software-sucks.md rename to content/posts/2013-07-13-enterprise-software-sucks.md index 770f1e56..66db50a7 100644 --- a/_src/_posts/2013-07-13-enterprise-software-sucks.md +++ b/content/posts/2013-07-13-enterprise-software-sucks.md @@ -1,14 +1,12 @@ --- -layout: post +type: post title: Enterprise Software Sucks author: Matthias Kretschmann date: 2013-07-13 13:19:44+00:00 -categories: -- design -- personal tags: +- design - ezeep --- @@ -40,14 +38,14 @@ Just adding feature after feature out of dubious reasons (“Your competitors ha After finding ezeep’s Buddha nature, the next step was to actually create the various elements of our experience and branding, ranging from typography, color, visual style, writing style, interaction models, user flows and more. -ezeep color scheme +![ezeep color scheme](../media/buddha-colorscheme.png) While being human and friendly sounds like a no-brainer, in the corporate software world, it turns out it isn’t. ezeep’s vivid color scheme, subtle textures, graphics and icons are a visible manifestation of this, tackling the negative perception of printing for our users. Creating this layer of delight on top of the functional layers is especially crucial in printing. Good design helps making users more forgiving about errors no matter who’s responsible for them. Printers – the little autistic beings they are – just tend to not work from time to time, and a failing device immediately reflects back on our service. If that’s the case the least we can do is make the experience beautiful. - +![](../media/buddha-printer.png) Paired with helpful and to-the-point copy, this creates a friendly and unifying atmosphere across the whole product, ranging from the web to native apps on Mac, Windows, iOS and Android. -We acknowledge we don’t have all the answers yet or, more precisely, we know what we don’t know. For us the only way to get those answers is by shipping iteration after iteration and learning from them. Feedback rules. \ No newline at end of file +We acknowledge we don’t have all the answers yet or, more precisely, we know what we don’t know. For us the only way to get those answers is by shipping iteration after iteration and learning from them. Feedback rules. diff --git a/_src/_posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md b/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md similarity index 97% rename from _src/_posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md rename to content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md index 42086f2d..ddc111ad 100644 --- a/_src/_posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md +++ b/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: 'Stealing Time: How Technology Can Hurt or Harm Our Inner State' -image: post-time.png +image: ../media/post-time.png author: Matthias Kretschmann -categories: -- design -- personal + tags: +- design - ezeep --- @@ -34,4 +33,4 @@ At [ezeep](https://www.ezeep.com), reducing the time our customers & users need It doesn’t need you, it should serve you. In truth, we’re pretty obsessed with customer needs, instead of product features. This helps a lot for developing the empathy needed to decide which new features are actually useful. In our research, we always try to determine how our product can be a useful extension of reality instead of forcing features on users just because it’s possible technologically. -Nobody wants to deal with their printers all the time, so another design goal is enabling customers to set up printers once and forget about it. So, hook up that printer to your whole team in 5 minutes, switch off your screens and get out there grabbing some rich emotions. \ No newline at end of file +Nobody wants to deal with their printers all the time, so another design goal is enabling customers to set up printers once and forget about it. So, hook up that printer to your whole team in 5 minutes, switch off your screens and get out there grabbing some rich emotions. diff --git a/_src/_posts/2013-11-06-why-the-worlds-best-photo-startup-is-going-out-of-business.md b/content/posts/2013-11-06-why-the-worlds-best-photo-startup-is-going-out-of-business.md similarity index 94% rename from _src/_posts/2013-11-06-why-the-worlds-best-photo-startup-is-going-out-of-business.md rename to content/posts/2013-11-06-why-the-worlds-best-photo-startup-is-going-out-of-business.md index d74e655b..bb1a3f15 100644 --- a/_src/_posts/2013-11-06-why-the-worlds-best-photo-startup-is-going-out-of-business.md +++ b/content/posts/2013-11-06-why-the-worlds-best-photo-startup-is-going-out-of-business.md @@ -1,10 +1,10 @@ --- -layout: link +type: link title: Why the world's best photo startup is going out of business linkurl: http://www.theverge.com/2013/11/5/5039216/everpix-life-and-death-inside-the-worlds-best-photo-startup -categories: +tags: - photography --- @@ -12,4 +12,4 @@ Really sad, the service was awesome. But good example that building an awesome p > While the team obsessed about perfecting the service, the founders paid less attention to the subject investors care about most: growth. [...] > -> And so at a time when successful photo apps were attracting users by the millions, by March the company had attracted fewer than 19,000 signups. Everpix had spent almost nothing to advertise the service. \ No newline at end of file +> And so at a time when successful photo apps were attracting users by the millions, by March the company had attracted fewer than 19,000 signups. Everpix had spent almost nothing to advertise the service. diff --git a/_src/_posts/2013-11-20-why-we-are-allowed-to-hate-silicon-valley.md b/content/posts/2013-11-20-why-we-are-allowed-to-hate-silicon-valley.md similarity index 95% rename from _src/_posts/2013-11-20-why-we-are-allowed-to-hate-silicon-valley.md rename to content/posts/2013-11-20-why-we-are-allowed-to-hate-silicon-valley.md index ad18e7c4..663e5339 100644 --- a/_src/_posts/2013-11-20-why-we-are-allowed-to-hate-silicon-valley.md +++ b/content/posts/2013-11-20-why-we-are-allowed-to-hate-silicon-valley.md @@ -1,12 +1,10 @@ --- -layout: link +type: link title: Why We Are Allowed to Hate Silicon Valley linkurl: http://www.faz.net/aktuell/feuilleton/debatten/the-internet-ideology-why-we-are-allowed-to-hate-silicon-valley-12658406.html author: Matthias Kretschmann -categories: -- links tags: - 'silicon valley' - google @@ -14,4 +12,4 @@ tags: Don't fully agree with Evgeny Morozov's culture pessimism but he makes some good points in this article: -> It might even help bury some of the myths spun by Silicon Valley. Wouldn’t it be nice if one day, told that Google’s mission is to “organize the world’s information and make it universally accessible and useful,” we would finally read between the lines and discover its true meaning: “to monetize all of the world’s information and make it universally inaccessible and profitable”? With this act of subversive interpretation, we might eventually hit upon the greatest emancipatory insight of all: Letting Google organize all of the world’s information makes as much sense as letting Halliburton organize all of the world’s oil. \ No newline at end of file +> It might even help bury some of the myths spun by Silicon Valley. Wouldn’t it be nice if one day, told that Google’s mission is to “organize the world’s information and make it universally accessible and useful,” we would finally read between the lines and discover its true meaning: “to monetize all of the world’s information and make it universally inaccessible and profitable”? With this act of subversive interpretation, we might eventually hit upon the greatest emancipatory insight of all: Letting Google organize all of the world’s information makes as much sense as letting Halliburton organize all of the world’s oil. diff --git a/_src/_posts/2013-12-11-silicon-valley-isnt-a-meritocracy.md b/content/posts/2013-12-11-silicon-valley-isnt-a-meritocracy.md similarity index 91% rename from _src/_posts/2013-12-11-silicon-valley-isnt-a-meritocracy.md rename to content/posts/2013-12-11-silicon-valley-isnt-a-meritocracy.md index 73dc7dad..a1ac8ed0 100644 --- a/_src/_posts/2013-12-11-silicon-valley-isnt-a-meritocracy.md +++ b/content/posts/2013-12-11-silicon-valley-isnt-a-meritocracy.md @@ -1,16 +1,13 @@ --- -layout: link +type: link title: Silicon Valley Isn't a Meritocracy linkurl: http://www.wired.com/opinion/2013/11/silicon-valley-isnt-a-meritocracy-and-the-cult-of-the-entrepreneur-holds-people-back/ -categories: -- links - tags: - 'silicon valley' --- From [Silicon Valley Isn't a Meritocracy — And It's Dangerous to Hero-Worship Entrepreneurs](http://www.wired.com/opinion/2013/11/silicon-valley-isnt-a-meritocracy-and-the-cult-of-the-entrepreneur-holds-people-back/): -> People in tech repeatedly portray Silicon Valley as places where the smartest, most motivated people from around the globe are changing the world for the better, and this rhetoric has been taken up and repeated often by traditional media outlets. Unlike, say, community activists, public schoolteachers, social workers, or health care providers, technologists are ultimately focused on a small slice of the population, and they are primarily looking for ideas that will prove profitable. These entrepreneurs may have a passion for better audio streaming or e-mail, but to say that such pursuits are world-changing is a bit disingenuous. \ No newline at end of file +> People in tech repeatedly portray Silicon Valley as places where the smartest, most motivated people from around the globe are changing the world for the better, and this rhetoric has been taken up and repeated often by traditional media outlets. Unlike, say, community activists, public schoolteachers, social workers, or health care providers, technologists are ultimately focused on a small slice of the population, and they are primarily looking for ideas that will prove profitable. These entrepreneurs may have a passion for better audio streaming or e-mail, but to say that such pursuits are world-changing is a bit disingenuous. diff --git a/_src/_posts/2014-03-10-just-a-normal-sunday.md b/content/posts/2014-03-10-just-a-normal-sunday.md similarity index 80% rename from _src/_posts/2014-03-10-just-a-normal-sunday.md rename to content/posts/2014-03-10-just-a-normal-sunday.md index e4a5825d..efac0be1 100644 --- a/_src/_posts/2014-03-10-just-a-normal-sunday.md +++ b/content/posts/2014-03-10-just-a-normal-sunday.md @@ -1,9 +1,8 @@ --- -layout: photo +type: photo title: Just a normal Sunday -image: just-a-normal-sunday.jpg +image: ../media/just-a-normal-sunday.jpg author: Matthias Kretschmann -category: photos --- Just a normal Sunday at Botschaft der Russischen Föderation | Embassy of the Russian Federation diff --git a/_src/_posts/2014-03-15-potsdam.md b/content/posts/2014-03-15-potsdam.md similarity index 64% rename from _src/_posts/2014-03-15-potsdam.md rename to content/posts/2014-03-15-potsdam.md index 5ec7df4c..e4367fc4 100644 --- a/_src/_posts/2014-03-15-potsdam.md +++ b/content/posts/2014-03-15-potsdam.md @@ -1,14 +1,12 @@ --- -layout: photo -published: true +type: photo title: Potsdam -image: potsdam.jpg +image: ../media/potsdam.jpg author: Matthias Kretschmann -category: photos --- Potsdam at Potsdamer Stadtschloss [flickr](https://www.flickr.com/photos/krema/13229034343/) | [EyeEm](http://www.eyeem.com/p/32659561) -Processed with VSCOcam with b3 preset \ No newline at end of file +Processed with VSCOcam with b3 preset diff --git a/_src/_posts/2014-03-17-typographic-diamond.md b/content/posts/2014-03-17-typographic-diamond.md similarity index 64% rename from _src/_posts/2014-03-17-typographic-diamond.md rename to content/posts/2014-03-17-typographic-diamond.md index 4b070164..9b2f10c3 100644 --- a/_src/_posts/2014-03-17-typographic-diamond.md +++ b/content/posts/2014-03-17-typographic-diamond.md @@ -1,14 +1,12 @@ --- -layout: photo -published: true +type: photo title: Typographic diamond -image: typographic-diamond.jpg +image: ../media/typographic-diamond.jpg author: Matthias Kretschmann -category: photos --- Typographic diamond at Hobrechtstraße [flickr](https://www.flickr.com/photos/krema/13229327324/) | [EyeEm](http://www.eyeem.com/p/32659836) -Processed with VSCOcam with b5 preset \ No newline at end of file +Processed with VSCOcam with b5 preset diff --git a/_src/_posts/2014-04-26-ai-weiwei-stools.md b/content/posts/2014-04-26-ai-weiwei-stools.md similarity index 80% rename from _src/_posts/2014-04-26-ai-weiwei-stools.md rename to content/posts/2014-04-26-ai-weiwei-stools.md index 2b014438..209c547e 100644 --- a/_src/_posts/2014-04-26-ai-weiwei-stools.md +++ b/content/posts/2014-04-26-ai-weiwei-stools.md @@ -1,9 +1,8 @@ --- -layout: photo +type: photo title: Ai Weiwei, Stools -image: ai-wei-wei-stools.jpg +image: ../media/ai-wei-wei-stools.jpg author: Matthias Kretschmann -category: photos --- Ai Weiwei - Evidence, Stools at Martin Gropius Bau diff --git a/_src/_posts/2014-06-07-airfield-reference-point.md b/content/posts/2014-06-07-airfield-reference-point.md similarity index 80% rename from _src/_posts/2014-06-07-airfield-reference-point.md rename to content/posts/2014-06-07-airfield-reference-point.md index 239c9ec5..05b7f060 100644 --- a/_src/_posts/2014-06-07-airfield-reference-point.md +++ b/content/posts/2014-06-07-airfield-reference-point.md @@ -1,9 +1,8 @@ --- -layout: photo +type: photo title: Airfield Reference Point -image: airfield-reference-point.jpg +image: ../media/airfield-reference-point.jpg author: Matthias Kretschmann -category: photos --- Airfield Reference Point Black And White at Tempelhofer Feld diff --git a/_src/_posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md b/content/posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md similarity index 70% rename from _src/_posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md rename to content/posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md index 043caeb3..b85223fd 100644 --- a/_src/_posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md +++ b/content/posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md @@ -1,9 +1,8 @@ --- -layout: photo +type: photo title: Anton Henning, Heimat schaffen, Simpsons -image: 2015-03-29-anton-henning-heimat-schaffen-simpsons.jpg +image: ../media/2015-03-29-anton-henning-heimat-schaffen-simpsons.jpg author: Matthias Kretschmann -category: photos --- Anton Henning, Heimat schaffen - home is where the heart is (II), Germany, 2015. diff --git a/_src/_posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md b/content/posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md similarity index 59% rename from _src/_posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md rename to content/posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md index 8a477307..3c826cd8 100644 --- a/_src/_posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md +++ b/content/posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md @@ -1,9 +1,8 @@ --- -layout: photo +type: photo title: Thanks for the tip little orange blob -image: 2015-03-29-thanks-for-the-tip-little-orange-blob.jpg +image: ../media/2015-03-29-thanks-for-the-tip-little-orange-blob.jpg author: Matthias Kretschmann -category: photos --- [Instagram](https://instagram.com/p/00qW1wNSm6/) \ No newline at end of file diff --git a/_src/_posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md b/content/posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md similarity index 58% rename from _src/_posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md rename to content/posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md index 75a42040..b4096f4b 100644 --- a/_src/_posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md +++ b/content/posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md @@ -1,9 +1,8 @@ --- -layout: photo +type: photo title: Suddenly... a new Hindu temple appears around the corner -image: 2015-04-17-suddenly-a-new-hindu-temple-appears-around-the-corner.jpg +image: ../media/2015-04-17-suddenly-a-new-hindu-temple-appears-around-the-corner.jpg author: Matthias Kretschmann -category: photos --- [Instagram](https://instagram.com/p/08ngIbtSvs/) \ No newline at end of file diff --git a/_src/_posts/2015-04-09-most-surprising-dog-i-know.md b/content/posts/2015-04-09-most-surprising-dog-i-know.md similarity index 63% rename from _src/_posts/2015-04-09-most-surprising-dog-i-know.md rename to content/posts/2015-04-09-most-surprising-dog-i-know.md index ece4a90e..37ca202c 100644 --- a/_src/_posts/2015-04-09-most-surprising-dog-i-know.md +++ b/content/posts/2015-04-09-most-surprising-dog-i-know.md @@ -1,9 +1,8 @@ --- -layout: photo +type: photo title: Most surprising dog I know -image: most-surprising-dog-i-know.jpg +image: ../media/most-surprising-dog-i-know.jpg author: Matthias Kretschmann -category: photos --- [Instagram](https://instagram.com/p/1Q4td6NSo_/) \ No newline at end of file diff --git a/_src/_posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md b/content/posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md similarity index 61% rename from _src/_posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md rename to content/posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md index 01881682..7fd19ffc 100644 --- a/_src/_posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md +++ b/content/posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md @@ -1,9 +1,8 @@ --- -layout: photo +type: photo title: Obligatory it's summer in Berlin photo -image: obligatory-it-s-summer-in-berlin-photo.jpg +image: ../media/obligatory-it-s-summer-in-berlin-photo.jpg author: Matthias Kretschmann -category: photos --- [Instagram](https://instagram.com/p/1ikG3qtSkG/) \ No newline at end of file diff --git a/_src/_posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md b/content/posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md similarity index 83% rename from _src/_posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md rename to content/posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md index 385eaa1f..86ba8b9e 100644 --- a/_src/_posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md +++ b/content/posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md @@ -1,9 +1,8 @@ --- -layout: photo +type: photo title: That moment when your childhood toys hang painted in a gallery -image: Monstrum_Gameboy_Catherine_Kaleel.jpg +image: ../media/Monstrum_Gameboy_Catherine_Kaleel.jpg author: Matthias Kretschmann -category: photos --- Seen at [SUPERSAMPLE - Pixels at an Exhibition](http://www.supersample.de) 2015 in Berlin. diff --git a/_src/_posts/2015-04-25-tiny-tiny-demons.md b/content/posts/2015-04-25-tiny-tiny-demons.md similarity index 65% rename from _src/_posts/2015-04-25-tiny-tiny-demons.md rename to content/posts/2015-04-25-tiny-tiny-demons.md index d9758bdc..b005faab 100644 --- a/_src/_posts/2015-04-25-tiny-tiny-demons.md +++ b/content/posts/2015-04-25-tiny-tiny-demons.md @@ -1,9 +1,8 @@ --- -layout: photo +type: photo title: Tiny tiny demons -image: tiny_tiny_demons.jpg +image: ../media/tiny_tiny_demons.jpg author: Matthias Kretschmann -category: photos --- [Instagram](https://instagram.com/p/16VfLytShp/) \ No newline at end of file diff --git a/_src/_posts/2015-08-02-simple-tor-setup-on-mac-os-x.md b/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md similarity index 96% rename from _src/_posts/2015-08-02-simple-tor-setup-on-mac-os-x.md rename to content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md index 5d7078c6..d9a5c815 100644 --- a/_src/_posts/2015-08-02-simple-tor-setup-on-mac-os-x.md +++ b/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md @@ -1,18 +1,19 @@ --- -layout: post +type: post title: Simple Tor setup on macOS -image: teaser-tor.png +image: ../media/teaser-tor.png author: Matthias Kretschmann date: 2015-08-02 21:57:30.912218000 +02:00 updated: 2018-07-11 00:52:46+02:00 -category: +featured: true + tags: - - tutorial - - tor - - osx - - macos + - goodies + - tutorial + - tor + - macos coinhive: true --- @@ -33,7 +34,7 @@ I'm using macOS High Sierra (10.13) for the following instructions but it should ## Tor Browser -![Tor Browser](/media/tor-browser.png) +![Tor Browser](../media/tor-browser.png) The most simple way to surf anonymously with Tor is to just grab [Tor Browser](https://www.torproject.org/projects/torbrowser.html.en). It's a modified version of [Firefox Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/organizations/) with Tor and some extensions (Torbutton, TorLauncher, NoScript, and HTTPS-Everywhere) built right in. Upon start, Tor Browser automatically starts the required Tor background processes and routes traffic through the Tor network. That's the way to go if you want the highest level of protection without much further configuration. @@ -76,7 +77,7 @@ You can do this under *System Preferences > Network* by creating a specific Tor - *SOCKS proxy server*: `localhost` - *Port*: `9050` -![Network Settings](/media/tor-osx-proxy.png) +![Network Settings](../media/tor-osx-proxy.png) After hitting *OK* & *Apply* at the initial network screen, you can easily switch to this newly created location from your menu bar under * > Location* whenever you start up Tor. @@ -132,7 +133,7 @@ tor.sh and Tor should run smoothly on your system without additional configuration: -![Tor running in Terminal](/media/tor-osx-terminal.png) +![Tor running in Terminal](../media/tor-osx-terminal.png) Verify you're indeed browsing over the Tor network by going to [check.torproject.org](https://check.torproject.org). diff --git a/_src/_posts/2015-09-13-css-app-store-badges.md b/content/posts/2015-09-13-css-app-store-badges.md similarity index 97% rename from _src/_posts/2015-09-13-css-app-store-badges.md rename to content/posts/2015-09-13-css-app-store-badges.md index b3162296..b8c542e9 100644 --- a/_src/_posts/2015-09-13-css-app-store-badges.md +++ b/content/posts/2015-09-13-css-app-store-badges.md @@ -1,16 +1,16 @@ --- -layout: post +type: post title: CSS App Store Badges -image: teaser-appstorebadges.png +image: ../media/teaser-appstorebadges.png author: Matthias Kretschmann date: 2015-09-13 18:55:18.418548000 +02:00 -category: goodies tags: - - css - - svg +- goodies +- css +- svg coinhive: true --- diff --git a/_src/_posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md b/content/posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md similarity index 73% rename from _src/_posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md rename to content/posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md index 0f636b56..cc88035a 100644 --- a/_src/_posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md +++ b/content/posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: 'Gaudí knows how to impress with a ceiling' -image: sagrada-familia-ceiling.jpg +image: ../media/sagrada-familia-ceiling.jpg author: Matthias Kretschmann date: 2016-02-25 16:52:24.544813000 +01:00 -category: photos --- [Instagram](https://www.instagram.com/p/BCU30S1NSj6/) diff --git a/_src/_posts/2016-02-27-streets-of-el-raval.md b/content/posts/2016-02-27-streets-of-el-raval.md similarity index 72% rename from _src/_posts/2016-02-27-streets-of-el-raval.md rename to content/posts/2016-02-27-streets-of-el-raval.md index ba6b7c4a..0b74a2b8 100644 --- a/_src/_posts/2016-02-27-streets-of-el-raval.md +++ b/content/posts/2016-02-27-streets-of-el-raval.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: Streets of El Raval -image: streets-of-el-raval.jpg +image: ../media/streets-of-el-raval.jpg author: Matthias Kretschmann date: 2016-02-27 17:28:23.878566000 +01:00 -category: photos --- [Instagram](https://www.instagram.com/p/BCXqCY5tSg5/) diff --git a/_src/_posts/2016-03-02-a-storm-is-coming.md b/content/posts/2016-03-02-a-storm-is-coming.md similarity index 71% rename from _src/_posts/2016-03-02-a-storm-is-coming.md rename to content/posts/2016-03-02-a-storm-is-coming.md index 5a3cf4ec..d198c23d 100644 --- a/_src/_posts/2016-03-02-a-storm-is-coming.md +++ b/content/posts/2016-03-02-a-storm-is-coming.md @@ -1,9 +1,8 @@ --- -layout: photo +type: photo title: A storm is coming -image: a-storm-is-coming.jpg +image: ../media/a-storm-is-coming.jpg author: Matthias Kretschmann -category: photos --- @Carrer de la Marina, Barcelona diff --git a/_src/_posts/2017-02-13-keith-haring-vandalizing-a-wall.md b/content/posts/2017-02-13-keith-haring-vandalizing-a-wall.md similarity index 74% rename from _src/_posts/2017-02-13-keith-haring-vandalizing-a-wall.md rename to content/posts/2017-02-13-keith-haring-vandalizing-a-wall.md index b93373b0..31aa7fe5 100644 --- a/_src/_posts/2017-02-13-keith-haring-vandalizing-a-wall.md +++ b/content/posts/2017-02-13-keith-haring-vandalizing-a-wall.md @@ -1,9 +1,8 @@ --- -layout: photo +type: photo title: K. Haring vandalizing a wall -image: keith-haring-vandalizing-a-wall.jpg +image: ../media/keith-haring-vandalizing-a-wall.jpg author: Matthias Kretschmann -category: photos --- Some guy named K. Haring vandalizing a wall. diff --git a/_src/_posts/2017-02-13-streets-of-el-born.md b/content/posts/2017-02-13-streets-of-el-born.md similarity index 71% rename from _src/_posts/2017-02-13-streets-of-el-born.md rename to content/posts/2017-02-13-streets-of-el-born.md index 40b72680..b8121b78 100644 --- a/_src/_posts/2017-02-13-streets-of-el-born.md +++ b/content/posts/2017-02-13-streets-of-el-born.md @@ -1,9 +1,8 @@ --- -layout: photo +type: photo title: Streets of El Born -image: streets-of-el-born.jpg +image: ../media/streets-of-el-born.jpg author: Matthias Kretschmann -category: photos --- 🥃 diff --git a/_src/_posts/2017-02-14-new-passion-facade.md b/content/posts/2017-02-14-new-passion-facade.md similarity index 85% rename from _src/_posts/2017-02-14-new-passion-facade.md rename to content/posts/2017-02-14-new-passion-facade.md index f734543d..32b4e4f9 100644 --- a/_src/_posts/2017-02-14-new-passion-facade.md +++ b/content/posts/2017-02-14-new-passion-facade.md @@ -1,9 +1,8 @@ --- -layout: photo +type: photo title: New Passion Façade -image: new-passion-facade.jpg +image: ../media/new-passion-facade.jpg author: Matthias Kretschmann -category: photos --- The Passion Façade got something new this year. Berlin should handle the BER like that: every generation gets to add their own elements and after 140 years it should be finished. diff --git a/_src/_posts/2017-02-16-coolhaven-rotterdam.md b/content/posts/2017-02-16-coolhaven-rotterdam.md similarity index 69% rename from _src/_posts/2017-02-16-coolhaven-rotterdam.md rename to content/posts/2017-02-16-coolhaven-rotterdam.md index 65fd4788..51237909 100644 --- a/_src/_posts/2017-02-16-coolhaven-rotterdam.md +++ b/content/posts/2017-02-16-coolhaven-rotterdam.md @@ -1,9 +1,8 @@ --- -layout: photo +type: photo title: Coolhaven Rotterdam -image: coolhaven-rotterdam.jpg +image: ../media/coolhaven-rotterdam.jpg author: Matthias Kretschmann -category: photos --- @Coolhaven Rotterdam diff --git a/_src/_posts/2017-02-17-behind-the-art.md b/content/posts/2017-02-17-behind-the-art.md similarity index 79% rename from _src/_posts/2017-02-17-behind-the-art.md rename to content/posts/2017-02-17-behind-the-art.md index 35612707..7cbc215b 100644 --- a/_src/_posts/2017-02-17-behind-the-art.md +++ b/content/posts/2017-02-17-behind-the-art.md @@ -1,9 +1,8 @@ --- -layout: photo +type: photo title: Behind the art -image: behind-the-art.jpg +image: ../media/behind-the-art.jpg author: Matthias Kretschmann -category: photos --- Behind the art. Rotterdam Contemporary Art Fair 2017 diff --git a/_src/_posts/2017-02-19-rotterdam-coats.md b/content/posts/2017-02-19-rotterdam-coats.md similarity index 77% rename from _src/_posts/2017-02-19-rotterdam-coats.md rename to content/posts/2017-02-19-rotterdam-coats.md index 56467acf..4e683cba 100644 --- a/_src/_posts/2017-02-19-rotterdam-coats.md +++ b/content/posts/2017-02-19-rotterdam-coats.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: Rotterdam coats -image: 2017-02-19-rotterdam-coats.jpg +image: ../media/2017-02-19-rotterdam-coats.jpg author: Matthias Kretschmann date: 2017-02-19 21:13:38.626498000 +02:00 -category: photos --- They hang their coats quite differently in Rotterdam. @Museum Boijmans Van Beuningen diff --git a/_src/_posts/2017-02-21-david-chipperfield-staircase.md b/content/posts/2017-02-21-david-chipperfield-staircase.md similarity index 75% rename from _src/_posts/2017-02-21-david-chipperfield-staircase.md rename to content/posts/2017-02-21-david-chipperfield-staircase.md index d0f86ae1..9d8296c1 100644 --- a/_src/_posts/2017-02-21-david-chipperfield-staircase.md +++ b/content/posts/2017-02-21-david-chipperfield-staircase.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: David Chipperfield staircase -image: 2017-02-21-david-chipperfield-staircase.jpg +image: ../media/2017-02-21-david-chipperfield-staircase.jpg author: Matthias Kretschmann date: 2017-02-21 21:18:36.350189000 +02:00 -category: photos --- Home is where David Chipperfield creates the sexy staircases. @Neues Museum, Berlin. diff --git a/_src/_posts/2017-02-26-eu-gotham-city.md b/content/posts/2017-02-26-eu-gotham-city.md similarity index 77% rename from _src/_posts/2017-02-26-eu-gotham-city.md rename to content/posts/2017-02-26-eu-gotham-city.md index 38d52562..611a98f1 100644 --- a/_src/_posts/2017-02-26-eu-gotham-city.md +++ b/content/posts/2017-02-26-eu-gotham-city.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: EU Gotham City -image: 2017-02-26-eu-gotham-city.jpg +image: ../media/2017-02-26-eu-gotham-city.jpg author: Matthias Kretschmann date: 2017-02-26 23:32:50.225380000 +02:00 -category: photos --- Where EU-Gotham City is being built. @Kop van Zuid, Rotterdam, Netherlands diff --git a/_src/_posts/2017-02-27-amsterdam-cliche.md b/content/posts/2017-02-27-amsterdam-cliche.md similarity index 77% rename from _src/_posts/2017-02-27-amsterdam-cliche.md rename to content/posts/2017-02-27-amsterdam-cliche.md index 359009ff..fc8e585e 100644 --- a/_src/_posts/2017-02-27-amsterdam-cliche.md +++ b/content/posts/2017-02-27-amsterdam-cliche.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: Amsterdam cliché -image: 2017-02-27-amsterdam-cliche.jpg +image: ../media/2017-02-27-amsterdam-cliche.jpg author: Matthias Kretschmann date: 2017-02-27 16:21:42.964539000 +02:00 -category: photos --- Amsterdam just being a cliche of itself. @Prinsengracht, Amsterdam, Netherlands diff --git a/_src/_posts/2017-02-27-its-dark-and-i-dont-exist.md b/content/posts/2017-02-27-its-dark-and-i-dont-exist.md similarity index 64% rename from _src/_posts/2017-02-27-its-dark-and-i-dont-exist.md rename to content/posts/2017-02-27-its-dark-and-i-dont-exist.md index d9748115..48ca7389 100644 --- a/_src/_posts/2017-02-27-its-dark-and-i-dont-exist.md +++ b/content/posts/2017-02-27-its-dark-and-i-dont-exist.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: "It's dark and I don't exist" -image: 2017-02-27-its-dark-and-i-dont-exist.jpg +image: ../media/2017-02-27-its-dark-and-i-dont-exist.jpg author: Matthias Kretschmann date: 2017-02-27 17:29:32.626557000 +02:00 -category: photos --- @Amsterdam, Netherlands diff --git a/_src/_posts/2017-02-28-stedelijk-museum.md b/content/posts/2017-02-28-stedelijk-museum.md similarity index 67% rename from _src/_posts/2017-02-28-stedelijk-museum.md rename to content/posts/2017-02-28-stedelijk-museum.md index a60141d7..8babd9c6 100644 --- a/_src/_posts/2017-02-28-stedelijk-museum.md +++ b/content/posts/2017-02-28-stedelijk-museum.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: Stedelijk Museum -image: 2017-02-28-stedelijk-museum.jpg +image: ../media/2017-02-28-stedelijk-museum.jpg author: Matthias Kretschmann date: 2017-02-28 13:48:35.217273000 +02:00 -category: photos --- @Stedelijk Museum, Amsterdam, Netherlands diff --git a/_src/_posts/2017-02-28-temple-guardian-rijksmuseum.md b/content/posts/2017-02-28-temple-guardian-rijksmuseum.md similarity index 77% rename from _src/_posts/2017-02-28-temple-guardian-rijksmuseum.md rename to content/posts/2017-02-28-temple-guardian-rijksmuseum.md index 3a9c014c..b39fff4e 100644 --- a/_src/_posts/2017-02-28-temple-guardian-rijksmuseum.md +++ b/content/posts/2017-02-28-temple-guardian-rijksmuseum.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: Temple Guardian Rijksmuseum -image: 2017-02-28-temple-guardian-rijksmuseum.jpg +image: ../media/2017-02-28-temple-guardian-rijksmuseum.jpg author: Matthias Kretschmann date: 2017-02-28 15:38:28.206431000 +02:00 -category: photos --- One of two temple guardians. Anonymous, wood, c. 1300 - c. 1400, Japan. diff --git a/_src/_posts/2017-02-28-watching-the-night-watch.md b/content/posts/2017-02-28-watching-the-night-watch.md similarity index 74% rename from _src/_posts/2017-02-28-watching-the-night-watch.md rename to content/posts/2017-02-28-watching-the-night-watch.md index b687a61a..359c65c3 100644 --- a/_src/_posts/2017-02-28-watching-the-night-watch.md +++ b/content/posts/2017-02-28-watching-the-night-watch.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: Watching The Night Watch -image: 2017-02-28-watching-the-night-watch.jpg +image: ../media/2017-02-28-watching-the-night-watch.jpg author: Matthias Kretschmann date: 2017-02-28 14:45:08.139508000 +02:00 -category: photos --- Watching The Night Watch. diff --git a/_src/_posts/2017-04-16-hamburgs-elbphilharmonie.md b/content/posts/2017-04-16-hamburgs-elbphilharmonie.md similarity index 72% rename from _src/_posts/2017-04-16-hamburgs-elbphilharmonie.md rename to content/posts/2017-04-16-hamburgs-elbphilharmonie.md index fc8755fb..4bc06b31 100644 --- a/_src/_posts/2017-04-16-hamburgs-elbphilharmonie.md +++ b/content/posts/2017-04-16-hamburgs-elbphilharmonie.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: Hamburg's Elbphilharmonie -image: 2017-04-16-hamburgs-elbphilharmonie.jpg +image: ../media/2017-04-16-hamburgs-elbphilharmonie.jpg author: Matthias Kretschmann date: 2017-04-16 18:26:20.280801000 +02:00 -category: photos --- @Elbphilharmonie, Hamburg, Germany diff --git a/_src/_posts/2017-07-05-kapaleeshwarar-temple-chennai.md b/content/posts/2017-07-05-kapaleeshwarar-temple-chennai.md similarity index 71% rename from _src/_posts/2017-07-05-kapaleeshwarar-temple-chennai.md rename to content/posts/2017-07-05-kapaleeshwarar-temple-chennai.md index 9d515009..61612937 100644 --- a/_src/_posts/2017-07-05-kapaleeshwarar-temple-chennai.md +++ b/content/posts/2017-07-05-kapaleeshwarar-temple-chennai.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: Kapaleeshwarar Temple Chennai -image: 2017-07-05-kapaleeshwarar-temple-chennai.jpg +image: ../media/2017-07-05-kapaleeshwarar-temple-chennai.jpg author: Matthias Kretschmann date: 2017-07-05 21:21:41.413746000 +02:00 -category: photos --- @Kapaleeshwarar Temple, Chennai, India diff --git a/_src/_posts/2017-07-08-kochis-streetart-game-is-strong.md b/content/posts/2017-07-08-kochis-streetart-game-is-strong.md similarity index 74% rename from _src/_posts/2017-07-08-kochis-streetart-game-is-strong.md rename to content/posts/2017-07-08-kochis-streetart-game-is-strong.md index d595f845..6122bca7 100644 --- a/_src/_posts/2017-07-08-kochis-streetart-game-is-strong.md +++ b/content/posts/2017-07-08-kochis-streetart-game-is-strong.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: "Kochi's street art game is strong" -image: 2017-07-14-kochis-streetart-game-is-strong.jpg +image: ../media/2017-07-08-kochis-streetart-game-is-strong.jpg author: Matthias Kretschmann date: 2017-07-08 14:28:19.869188000 +02:00 -category: photos --- Kochi's street art game is strong. diff --git a/_src/_posts/2017-07-09-orphaned-elephant-with-friend.md b/content/posts/2017-07-09-orphaned-elephant-with-friend.md similarity index 73% rename from _src/_posts/2017-07-09-orphaned-elephant-with-friend.md rename to content/posts/2017-07-09-orphaned-elephant-with-friend.md index 286d584e..f2375fe3 100644 --- a/_src/_posts/2017-07-09-orphaned-elephant-with-friend.md +++ b/content/posts/2017-07-09-orphaned-elephant-with-friend.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: Orphaned elephant with friend -image: 2017-07-09-orphaned-elephant-with-friend.jpg +image: ../media/2017-07-09-orphaned-elephant-with-friend.jpg author: Matthias Kretschmann date: 2017-07-09 09:41:37.771378000 +02:00 -category: photos --- @The Elephant Training Centre, Kodanadu, Kerala, India diff --git a/_src/_posts/2017-07-10-kochis-dhobhi-ghat.md b/content/posts/2017-07-10-kochis-dhobhi-ghat.md similarity index 77% rename from _src/_posts/2017-07-10-kochis-dhobhi-ghat.md rename to content/posts/2017-07-10-kochis-dhobhi-ghat.md index fa6f5a21..0e965434 100644 --- a/_src/_posts/2017-07-10-kochis-dhobhi-ghat.md +++ b/content/posts/2017-07-10-kochis-dhobhi-ghat.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: Kochis dhobhi ghat -image: 2017-07-10-kochis-dhobhi-ghat.jpg +image: ../media/2017-07-10-kochis-dhobhi-ghat.jpg author: Matthias Kretschmann date: 2017-07-10 14:28:19.869188000 +02:00 -category: photos --- At Kochi's dhobhi ghat, a human powered outdoor laundry. diff --git a/_src/_posts/2017-07-13-mumbai-hand-painted-typography.md b/content/posts/2017-07-13-mumbai-hand-painted-typography.md similarity index 76% rename from _src/_posts/2017-07-13-mumbai-hand-painted-typography.md rename to content/posts/2017-07-13-mumbai-hand-painted-typography.md index 6796d39e..434c811f 100644 --- a/_src/_posts/2017-07-13-mumbai-hand-painted-typography.md +++ b/content/posts/2017-07-13-mumbai-hand-painted-typography.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: "The art of hand painted typography" -image: 2017-07-13-mumbai-hand-painted-typography.jpg +image: ../media/2017-07-13-mumbai-hand-painted-typography.jpg author: Matthias Kretschmann date: 2017-07-13 16:28:19.869188000 +02:00 -category: photos --- The art of hand painted typography alive and well everywhere. diff --git a/_src/_posts/2017-07-13-obligatory-gate-of-india-photo.md b/content/posts/2017-07-13-obligatory-gate-of-india-photo.md similarity index 71% rename from _src/_posts/2017-07-13-obligatory-gate-of-india-photo.md rename to content/posts/2017-07-13-obligatory-gate-of-india-photo.md index 48881cc7..db4958eb 100644 --- a/_src/_posts/2017-07-13-obligatory-gate-of-india-photo.md +++ b/content/posts/2017-07-13-obligatory-gate-of-india-photo.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: "Obligatory Gateway of India photo" -image: 2017-07-13-obligatory-gate-of-india-photo.jpg +image: ../media/2017-07-13-obligatory-gate-of-india-photo.jpg author: Matthias Kretschmann date: 2017-07-13 14:28:19.869188000 +02:00 -category: photos --- @Gateway of India, Mumbai, India diff --git a/_src/_posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md b/content/posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md similarity index 77% rename from _src/_posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md rename to content/posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md index e8737a19..af90261c 100644 --- a/_src/_posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md +++ b/content/posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: "Chhatrapati Shivaji Maharaj Vastu Sangrahalaya" -image: 2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.jpg +image: ../media/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.jpg author: Matthias Kretschmann date: 2017-07-14 14:28:19.869188000 +02:00 -category: photos --- In front of the CSMVS museum, excellent sculptures and miniature paintings in there diff --git a/_src/_posts/2017-11-10-acropolis-the-erechtheum.md b/content/posts/2017-11-10-acropolis-the-erechtheum.md similarity index 71% rename from _src/_posts/2017-11-10-acropolis-the-erechtheum.md rename to content/posts/2017-11-10-acropolis-the-erechtheum.md index 2de4be67..5268208c 100644 --- a/_src/_posts/2017-11-10-acropolis-the-erechtheum.md +++ b/content/posts/2017-11-10-acropolis-the-erechtheum.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: "The Erechtheum" -image: 2017-11-10-acropolis-the-erechtheum.jpg +image: ../media/2017-11-10-acropolis-the-erechtheum.jpg author: Matthias Kretschmann date: 2017-11-10 14:42:19.869188000 +02:00 -category: photos --- The Erechtheum on top of the Acropolis of Athens. diff --git a/_src/_posts/2017-11-10-acropolis-the-parthenon.md b/content/posts/2017-11-10-acropolis-the-parthenon.md similarity index 71% rename from _src/_posts/2017-11-10-acropolis-the-parthenon.md rename to content/posts/2017-11-10-acropolis-the-parthenon.md index 709646eb..022f88d7 100644 --- a/_src/_posts/2017-11-10-acropolis-the-parthenon.md +++ b/content/posts/2017-11-10-acropolis-the-parthenon.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: "The Parthenon" -image: 2017-11-10-acropolis-the-parthenon.jpg +image: ../media/2017-11-10-acropolis-the-parthenon.jpg author: Matthias Kretschmann date: 2017-11-10 14:37:19.869188000 +02:00 -category: photos --- The Parthenon on top of the Acropolis of Athens. diff --git a/_src/_posts/2017-11-10-acropolis-the-propylaea.md b/content/posts/2017-11-10-acropolis-the-propylaea.md similarity index 72% rename from _src/_posts/2017-11-10-acropolis-the-propylaea.md rename to content/posts/2017-11-10-acropolis-the-propylaea.md index de1af7e2..9c14b7b8 100644 --- a/_src/_posts/2017-11-10-acropolis-the-propylaea.md +++ b/content/posts/2017-11-10-acropolis-the-propylaea.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: "The Propylaea" -image: 2017-11-10-acropolis-the-propylaea.jpg +image: ../media/2017-11-10-acropolis-the-propylaea.jpg author: Matthias Kretschmann date: 2017-11-10 14:32:19.869188000 +02:00 -category: photos --- Part of the Propylaea on top of the Acropolis of Athens. diff --git a/_src/_posts/2017-12-16-sagrada-familia.md b/content/posts/2017-12-16-sagrada-familia.md similarity index 67% rename from _src/_posts/2017-12-16-sagrada-familia.md rename to content/posts/2017-12-16-sagrada-familia.md index f1a2eb6e..d86904c8 100644 --- a/_src/_posts/2017-12-16-sagrada-familia.md +++ b/content/posts/2017-12-16-sagrada-familia.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: "Sagrada Família" -image: 2017-12-16-sagrada-familia.jpg +image: ../media/2017-12-16-sagrada-familia.jpg author: Matthias Kretschmann date: 2017-12-16 13:01:21.869188000 +02:00 -category: photos --- @Sagrada Família, Barcelona, Spain diff --git a/_src/_posts/2017-12-27-sao-paulo-traffic.md b/content/posts/2017-12-27-sao-paulo-traffic.md similarity index 67% rename from _src/_posts/2017-12-27-sao-paulo-traffic.md rename to content/posts/2017-12-27-sao-paulo-traffic.md index 177fe3f8..a287e578 100644 --- a/_src/_posts/2017-12-27-sao-paulo-traffic.md +++ b/content/posts/2017-12-27-sao-paulo-traffic.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: "Traffic of São Paulo" -image: 2017-12-27-sao-paulo-traffic.jpg +image: ../media/2017-12-27-sao-paulo-traffic.jpg author: Matthias Kretschmann date: 2017-12-27 13:03:21.869188000 -02:00 -category: photos --- @Vila Buarque, São Paulo, Brazil diff --git a/_src/_posts/2018-01-04-passagem-literaria-da-consolacao.md b/content/posts/2018-01-04-passagem-literaria-da-consolacao.md similarity index 68% rename from _src/_posts/2018-01-04-passagem-literaria-da-consolacao.md rename to content/posts/2018-01-04-passagem-literaria-da-consolacao.md index 375c71a5..04d0665b 100644 --- a/_src/_posts/2018-01-04-passagem-literaria-da-consolacao.md +++ b/content/posts/2018-01-04-passagem-literaria-da-consolacao.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: "Passagem Literária da Consolação" -image: 2018-01-04-passagem-literaria-da-consolacao.jpg +image: ../media/2018-01-04-passagem-literaria-da-consolacao.jpg author: Matthias Kretschmann date: 2018-01-04 16:02:02.869188000 -02:00 -category: photos --- @Passagem Literária da Consolação, São Paulo, Brazil diff --git a/_src/_posts/2018-01-05-samba-school.md b/content/posts/2018-01-05-samba-school.md similarity index 67% rename from _src/_posts/2018-01-05-samba-school.md rename to content/posts/2018-01-05-samba-school.md index 0ed514d0..b47dc35e 100644 --- a/_src/_posts/2018-01-05-samba-school.md +++ b/content/posts/2018-01-05-samba-school.md @@ -1,10 +1,9 @@ --- -layout: photo +type: photo title: "Escola de Samba" -image: 2018-01-05-samba-school.jpg +image: ../media/2018-01-05-samba-school.jpg author: Matthias Kretschmann date: 2018-01-05 21:56:02.869188000 -02:00 -category: photos --- @Beira Mar, São Paulo, Brazil diff --git a/gatsby-browser.js b/gatsby-browser.js new file mode 100644 index 00000000..80bfcec0 --- /dev/null +++ b/gatsby-browser.js @@ -0,0 +1,6 @@ +import './src/styles/global.scss' + +// IntersectionObserver polyfill for gatsby-image (Safari, IE) +if (typeof window.IntersectionObserver === 'undefined') { + import('intersection-observer') +} diff --git a/gatsby-config.js b/gatsby-config.js new file mode 100644 index 00000000..e6f395a1 --- /dev/null +++ b/gatsby-config.js @@ -0,0 +1,249 @@ +const path = require('path') +const fs = require('fs') +const yaml = require('js-yaml') +const meta = yaml.load(fs.readFileSync('./content/meta.yml', 'utf8')) +const { title, tagline, url, author } = meta + +// required for gatsby-plugin-meta-redirect +require('regenerator-runtime/runtime') + +module.exports = { + siteMetadata: { + title: `${title}`, + description: `${tagline}`, + siteUrl: `${url}`, + author: `${author.name}` + }, + plugins: [ + { + resolve: 'gatsby-source-filesystem', + options: { + name: 'posts', + path: path.join(__dirname, 'content', 'posts') + } + }, + { + resolve: 'gatsby-source-filesystem', + options: { + name: 'media', + path: path.join(__dirname, 'content', 'media') + } + }, + { + resolve: 'gatsby-source-filesystem', + options: { + name: 'posts', + path: path.join(__dirname, 'content') + } + }, + { + resolve: 'gatsby-source-filesystem', + options: { + name: 'images', + path: path.join(__dirname, 'src', 'images') + } + }, + { + resolve: 'gatsby-transformer-remark', + options: { + excerpt_separator: '', + plugins: [ + { + resolve: 'gatsby-remark-images', + options: { + maxWidth: 940, + quality: 80, + withWebp: true, + linkImagesToOriginal: false, + // sizeByPixelDensity: true, + showCaptions: true, + backgroundColor: '#e7eef4' + } + }, + { + resolve: 'gatsby-remark-copy-linked-files', + options: { + destinationDir: 'media' + } + }, + { + resolve: 'gatsby-remark-highlights', + options: { + codeWrap: { + className: 'nord' + } + } + }, + 'gatsby-remark-smartypants', + 'gatsby-remark-autolink-headers' + ] + } + }, + { + resolve: 'gatsby-plugin-sass', + options: { + includePaths: [`${__dirname}/node_modules`, `${__dirname}/src/styles`] + } + }, + { + resolve: 'gatsby-plugin-svgr', + options: { + icon: true + } + }, + { + resolve: 'gatsby-plugin-lunr', + options: { + languages: [ + { + // ISO 639-1 language codes. See https://lunrjs.com/guides/language_support.html for details + name: 'en' + } + ], + // Fields to index. If store === true value will be stored in index file. + // Attributes for custom indexing logic. See https://lunrjs.com/docs/lunr.Builder.html for details + fields: [ + { name: 'title', store: true, attributes: { boost: 20 } }, + { name: 'content' }, + { name: 'excerpt', attributes: { boost: 10 } }, + { name: 'category', store: true, attributes: { boost: 5 } }, + { name: 'tags', store: true }, + { name: 'url', store: true } + ], + // How to resolve each field's value for a supported node type + resolvers: { + // For any node of type MarkdownRemark, list how to resolve the fields' values + MarkdownRemark: { + title: node => node.frontmatter.title, + content: node => node.rawMarkdownBody, + excerpt: node => node.frontmatter.excerpt, + category: node => node.frontmatter.category, + tags: node => node.frontmatter.tags, + url: node => node.fields.slug + } + } + } + }, + { + resolve: 'gatsby-plugin-matomo', + options: { + siteId: '1', + matomoUrl: 'https://analytics.kremalicious.com', + siteUrl: `${url}` + } + }, + { + resolve: 'gatsby-plugin-favicon', + options: { + logo: './src/images/apple-touch-icon.png', + + // WebApp Manifest Configuration + appName: title.toLowerCase(), + appDescription: tagline, + developerName: author.name, + developerURL: author.uri, + dir: 'auto', + lang: 'en-US', + background: '#e7eef4', + theme_color: '#88bec8', + display: 'minimal-ui', + orientation: 'any', + start_url: '/?homescreen=1', + version: '1.0', + + icons: { + android: true, + appleIcon: true, + appleStartup: true, + coast: false, + favicons: true, + firefox: true, + opengraph: false, + twitter: false, + yandex: false, + windows: false + } + } + }, + { + resolve: 'gatsby-plugin-feed', + options: { + query: ` + { + site { + siteMetadata { + title + description + siteUrl + site_url: siteUrl + author + } + } + } + `, + feeds: [ + { + serialize: ({ query: { site, allMarkdownRemark } }) => { + return allMarkdownRemark.edges.map(edge => ({ + title: edge.node.frontmatter.title, + date: edge.node.fields.date, + description: feedContent(edge), + url: site.siteMetadata.siteUrl + edge.node.fields.slug, + categories: edge.node.frontmatter.tags, + author: site.siteMetadata.author, + guid: site.siteMetadata.siteUrl + edge.node.fields.slug + })) + }, + query: ` + { + allMarkdownRemark( + sort: { order: DESC, fields: [fields___date] }, + limit: 20 + ) { + edges { + node { + html + fields { slug, date } + frontmatter { + title + image { + childImageSharp { + resize(width: 940, quality: 85) { + src + } + } + } + } + } + } + } + } + `, + output: '/feed.xml' + } + ] + } + }, + 'gatsby-plugin-react-helmet', + 'gatsby-transformer-yaml', + 'gatsby-plugin-sharp', + 'gatsby-transformer-sharp', + 'gatsby-plugin-sitemap', + 'gatsby-plugin-catch-links', + 'gatsby-redirect-from', + 'gatsby-plugin-meta-redirect', + 'gatsby-plugin-sitemap', + 'gatsby-plugin-offline' + ] +} + +const feedContent = edge => { + const { image } = edge.node.frontmatter + const { html } = edge.node + const footer = + '
    This post was published on kremalicious.com' + + return image + ? `
    ${html}${footer}` + : `${html}${footer}` +} diff --git a/gatsby-node.js b/gatsby-node.js new file mode 100644 index 00000000..82f31a4f --- /dev/null +++ b/gatsby-node.js @@ -0,0 +1,278 @@ +const path = require('path') +const fs = require('fs') +const yaml = require('js-yaml') +const { createFilePath } = require('gatsby-source-filesystem') +const { paginate } = require('gatsby-awesome-pagination') +const fastExif = require('fast-exif') +const Fraction = require('fraction.js') +const dms2dec = require('dms2dec') + +const meta = yaml.load(fs.readFileSync('./content/meta.yml', 'utf8')) +const { itemsPerPage } = meta + +const redirects = [ + { f: '/feed', t: '/feed.xml' }, + { f: '/feed/', t: '/feed.xml' } +] + +exports.onCreateNode = ({ node, actions, getNode }) => { + const { createNodeField } = actions + + // Markdown files + if (node.internal.type === 'MarkdownRemark') { + createMarkdownNodeFields(node, createNodeField, getNode) + } + + // Image files + if (node.internal.mediaType === 'image/jpeg') { + readAndCreateExifFields(node, createNodeField) + } +} + +// Create slug & date for posts from file path values +const createMarkdownNodeFields = (node, createNodeField, getNode) => { + const fileNode = getNode(node.parent) + const parsedFilePath = path.parse(fileNode.relativePath) + const slugOriginal = createFilePath({ node, getNode }) + + // slug + let slug + + if (parsedFilePath.name === 'index') { + slug = `/${parsedFilePath.dir.substring(11)}` // remove date from file dir + } else { + slug = `/${slugOriginal.substring(12)}` // remove first slash & date from file path + } + + createNodeField({ + node, + name: 'slug', + value: slug + }) + + // date + let date + + if (node.frontmatter.date) { + date = `${node.frontmatter.date}` + } else { + date = `${slugOriginal.substring(1, 10)}` // grab date from file path + } + + createNodeField({ + node, + name: 'date', + value: date + }) +} + +const readAndCreateExifFields = (node, createNodeField) => { + fastExif + .read(node.absolutePath, true) + .then(exifData => { + if (!exifData) return + createExifFields(exifData, createNodeField, node) + }) + .catch(() => null) // just silently fail when exif can't be extracted +} + +const createExifFields = (exifData, createNodeField, node) => { + const { Model } = exifData.image + const { + ISO, + FNumber, + ExposureTime, + FocalLength, + ExposureBiasValue + } = exifData.exif + const { + GPSLatitudeRef, + GPSLatitude, + GPSLongitudeRef, + GPSLongitude + } = exifData.gps + + const { n, d } = new Fraction(ExposureTime) + const exposureShortened = parseFloat(ExposureBiasValue.toFixed(2)) + + const model = `${Model}` + const iso = `ISO ${ISO}` + const fstop = `ƒ ${FNumber}` + const shutterspeed = `${n}/${d}s` + const focalLength = `${FocalLength}mm` + + const GPSdec = dms2dec( + GPSLatitude, + GPSLatitudeRef, + GPSLongitude, + GPSLongitudeRef + ) + + const latitude = GPSdec[0] + const longitude = GPSdec[1] + + let exposure + + if (ExposureBiasValue === 0) { + exposure = `+/- ${exposureShortened} ev` + } else if (ExposureBiasValue > 0) { + exposure = `+ ${exposureShortened} ev` + } else { + exposure = `${exposureShortened} ev` + } + + // add exif fields to type File + createNodeField({ + node, + name: 'exif', + value: { + iso, + model, + fstop, + shutterspeed, + focalLength, + exposure, + gps: { + latitude, + longitude + } + } + }) +} + +exports.createPages = ({ graphql, actions }) => { + const { createPage, createRedirect } = actions + + return new Promise((resolve, reject) => { + resolve( + graphql( + ` + { + allMarkdownRemark(sort: { fields: [fields___date], order: DESC }) { + edges { + node { + fields { + slug + date + } + frontmatter { + type + tags + } + } + } + } + } + ` + ).then(result => { + if (result.errors) { + /* eslint no-console: "off" */ + console.log(result.errors) + reject(result.errors) + } + + const posts = result.data.allMarkdownRemark.edges + + // Generate posts & posts index + generateContent(createPage, posts) + + // Generate Tag Pages + generateTagPages(createPage, posts) + + // create manual redirects + redirects.forEach(({ f, t }) => { + createRedirect({ + fromPath: f, + redirectInBrowser: true, + toPath: t + }) + }) + + resolve() + }) + ) + }) +} + +const postsTemplate = path.resolve('src/templates/Posts.jsx') + +const generateContent = (createPage, posts) => { + const postTemplate = path.resolve('src/templates/Post.jsx') + + // Create Post pages + posts.forEach(post => { + createPage({ + path: `${post.node.fields.slug}`, + component: postTemplate, + context: { + slug: post.node.fields.slug + } + }) + }) + + // Create paginated front page + paginate({ + createPage, + items: posts, + itemsPerPage: itemsPerPage, + pathPrefix: '/', + component: postsTemplate + }) +} + +const generateTagPages = (createPage, posts) => { + const tagSet = new Set() + const tagMap = new Map() + + posts.forEach(post => { + if (post.node.frontmatter.tags) { + post.node.frontmatter.tags.forEach(tag => { + tagSet.add(tag) + + const array = tagMap.has(tag) ? tagMap.get(tag) : [] + array.push(post) + tagMap.set(tag, array) + }) + } + }) + + const tagList = Array.from(tagSet) + + tagList.forEach(tag => { + if (tag === 'goodies') return + + // Create tag pages + createPage({ + path: `/tag/${tag}/`, + component: postsTemplate, + context: { tag } + }) + }) + + // Object.keys(posts).forEach(tagName => { + // const pageSize = 5 + // const pagesSum = Math.ceil(posts[tagName].length / pageSize) + + // for (let page = 1; page <= pagesSum; page++) { + // createPage({ + // path: + // page === 1 + // ? `/tag/${tagName.toLowerCase()}` + // : `/tag/${tagName.toLowerCase()}/page/${page}`, + // component: postsTemplate, + // context: { + // posts: paginate(posts[tagName], pageSize, page), + // tag: tagName, + // pagesSum, + // page + // } + // }) + // } + // }) +} + +// function paginate(array, page_size, page_number) { +// return array +// .slice(0) +// .slice((page_number - 1) * page_size, page_number * page_size) +// } diff --git a/gulpfile.babel.js b/gulpfile.babel.js deleted file mode 100644 index 16f1248f..00000000 --- a/gulpfile.babel.js +++ /dev/null @@ -1,470 +0,0 @@ -import fs from 'fs' -import { src, dest, parallel, series, watch } from 'gulp' -import del from 'del' -import parallelize from 'concurrent-transform' -import browser from 'browser-sync' -import autoprefixer from 'autoprefixer' -import cssnano from 'cssnano' -import critical from 'critical' -import request from 'request' - -import yaml from 'js-yaml' -import chalk from 'chalk' -import yargs from 'yargs' - -// Required for mixing old and ES6+ js with ugify-js 3 -import uglifyjs from 'uglify-es' -import composer from 'gulp-uglify/composer' - -// Get all the configs: `pkg` and `site` -import pkg from './package' - -const site = yaml.safeLoad(fs.readFileSync('./_config.yml')) - -// Load plugins -const cp = require('child_process') -const $ = require('gulp-load-plugins')() - -// Custom minify -const minify = composer(uglifyjs, console) - -// Handle errors -const onError = error => { - console.log($.util.colors.red('\nYou fucked up:', error.message, 'on line', error.lineNumber, '\n')) - this.emit('end') -} - -// 'development' is just default, production overrides are triggered -// by adding the production flag to the gulp command e.g. `gulp build --production` -const argv = yargs.parse(process.argv.slice(1)) -const isProduction = argv.production - - -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -// Terminal Banner -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - -console.log('') -console.log(chalk.dim(' <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>')) -console.log('') -console.log(chalk.cyan(' (o) Just what do you think you\'re doing,', process.env.USER, '? ')) -console.log('') -console.log(chalk.dim(' <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>')) -console.log('') - - -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -// Config -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - -// Port to use for the development server. -const PORT = 1337 - -// Paths -const SRC = site.source -const DIST = site.destination - -// Deployment -const S3BUCKET = 'kremalicious.com' -const S3PATH = '/' -const S3REGION = 'eu-central-1' - -// SVG sprite -const SPRITECONFIG = { - dest: DIST + '/assets/img/', - mode: { - symbol: { - dest: './', - sprite: 'sprite.svg' - } - } -} - -// Code banner -const BANNER = [ - '/**', - ' ** <%= pkg.name %> v<%= pkg.version %>', - ' ** <%= pkg.description %>', - ' ** <%= pkg.homepage %>', - ' **', - ' ** <%= pkg.author.name %> <<%= pkg.author.email %>>', - ' **', - ' ** 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 ', - ' ** ', - ' ** <%= pkg.repository.url %> ', - ' **/', - '' -].join('\n') - - -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -// Tasks -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - - -// -// Delete build artifacts -// -export const clean = () => - del([ - DIST + '**/*', - DIST + '.*', // Delete all hidden files - '!' + DIST + '/media' - ]) - - -// -// Jekyll -// -export const jekyll = done => { - browser.notify('Compiling Jekyll') - - let jekyllOptions - - if (isProduction) { - process.env.JEKYLL_ENV = 'production' - jekyllOptions = 'jekyll build --lsi' - } else { - process.env.JEKYLL_ENV = 'development' - jekyllOptions = 'jekyll build --config _config.yml,_config.dev.yml --incremental --drafts --future' - } - - const jekyll = cp.execFile('bundle', ['exec', jekyllOptions], { stdio: 'inherit' }) - - const jekyllLogger = buffer => { - buffer.toString() - .split(/\n/) - .forEach(message => console.log(message)) - } - - jekyll.stdout.on('data', jekyllLogger).on('close', done) -} - - -// -// HTML -// -export const html = () => src(DIST + '/**/*.html') - .pipe($.if(isProduction, $.htmlmin({ - collapseWhitespace: true, - conservativeCollapse: true, - removeComments: true, - useShortDoctype: true, - collapseBooleanAttributes: true, - removeRedundantAttributes: true, - removeEmptyAttributes: true, - minifyJS: true, - minifyCSS: true - }))) - .pipe(dest(DIST)) - - -// -// Styles -// -const plugins = [ - autoprefixer(), - cssnano() -] - -export const css = () => - src([ - SRC + '/_assets/styl/kremalicious3.styl', - SRC + '/_assets/styl/post-*.styl' - ]) - .pipe($.if(!isProduction, $.sourcemaps.init())) - .pipe($.stylus({ 'include css': true })).on('error', onError) - .pipe($.postcss(plugins)).on('error', onError) - .pipe($.if(!isProduction, $.sourcemaps.write())) - .pipe($.if(isProduction, $.header(BANNER, { pkg }))) - .pipe($.rename({ suffix: '.min' })) - .pipe(dest(DIST + '/assets/css/')) - .pipe(browser.stream()) - -// Inline critical-path CSS -export const criticalCss = done => { - if (isProduction) { - critical.generate({ - base: DIST, - src: 'index.html', - dest: 'index.html', - inline: true, - minify: true, - dimensions: [{ - height: 320, - width: 480 - }, { - height: 600, - width: 650 - }, { - height: 700, - width: 960 - }, { - height: 900, - width: 1400 - }] - }) - } - done() -} - - -// -// Scripts -// -export const js = () => - src([ - SRC + '/_assets/js/*.js', - '!' + SRC + '/_assets/js/_*.js' - ]) - .pipe($.sourcemaps.init()) - .pipe($.include({ - includePaths: ['node_modules', SRC + '/_assets/js'] - })).on('error', onError) - .pipe($.if(isProduction, minify())).on('error', onError) - .pipe($.if(!isProduction, $.sourcemaps.write())) - .pipe($.if(isProduction, $.header(BANNER, { pkg }))) - .pipe($.rename({ suffix: '.min' })) - .pipe(dest(DIST + '/assets/js/')) - - -// -// Images -// -const imageminPlugins = [ - $.imagemin.gifsicle({ interlaced: true }), - $.imagemin.jpegtran(), - $.imagemin.optipng({ optimizationLevel: 5 }), - $.imagemin.svgo({ plugins: [{ removeViewBox: false }] }) -] - -// Copy all images -export const images = () => src(SRC + '/_assets/img/**/*') - .pipe($.if(isProduction, $.imagemin(imageminPlugins))) - .pipe(dest(DIST + '/assets/img/')) - -// SVG sprite -export const svg = () => src(SRC + '/_assets/img/**/*.svg') - .pipe($.if(isProduction, $.imagemin(imageminPlugins))) - .pipe($.svgSprite(SPRITECONFIG)) - .pipe(dest(DIST + '/assets/img/')) - - -// -// Copy fonts -// -export const fonts = () => src(SRC + '/_assets/fonts/**/*') - .pipe(dest(DIST + '/assets/fonts/')) - - -// -// Copy media -// -export const media = () => src(SRC + '/_media/**/*') - .pipe(dest(DIST + '/media/')) - - -// -// Revision static assets -// -export const rev = done => { - // Globbing is slow so do everything conditionally for faster dev build - if (isProduction) { - return src(DIST + '/assets/**/*.{css,js,png,jpg,jpeg,svg,eot,ttf,woff,woff2}') - .pipe($.rev()) - .pipe(dest(DIST + '/assets/')) - // Output rev manifest for next replace task - .pipe($.rev.manifest()) - .pipe(dest(DIST + '/assets/')) - } - done() -} - - -// -// Replace all links to assets in files -// from a manifest file -// -export const revReplace = done => { - // Globbing is slow so do everything conditionally for faster dev build - if (isProduction) { - const manifest = src(DIST + '/assets/rev-manifest.json') - - return src(DIST + '/**/*.{html,css,js}') - .pipe($.revReplace({ manifest })) - .pipe(dest(DIST)) - } - done() -} - - -// -// Ping search engines -// -export const seo = done => { - const googleUrl = 'http://www.google.com/webmasters/tools/ping?sitemap=' - const bingUrl = 'http://www.bing.com/webmaster/ping.aspx?siteMap=' - - const response = (error, response) => { - if (error) { - console.log(chalk.red(error)) - } else { - console.log(chalk.dim('Status:', response && response.statusCode)) - - if (response.statusCode === 200) { - console.log(chalk.green('Successfully notified')) - } - } - } - - request(googleUrl + site.url + '/sitemap.xml', response) - request(bingUrl + site.url + '/sitemap.xml', response) - - done() -} - - -// -// Dev Server -// -export const server = done => { - browser.init({ - server: DIST, - port: PORT, - reloadDebounce: 2000 - }) - done() -} - - -// -// Watch for file changes -// -export const watchSrc = () => { - watch(SRC + '/_assets/styl/**/*.styl').on('all', series(css)) - watch(SRC + '/_assets/js/**/*.js').on('all', series(js, browser.reload)) - watch(SRC + '/_assets/img/**/*.{png,jpg,jpeg,gif,webp}').on('all', series(images, browser.reload)) - watch(SRC + '/_assets/img/**/*.{svg}').on('all', series(svg, browser.reload)) - watch(SRC + '/_media/**/*').on('all', series(media, browser.reload)) - watch([SRC + '/**/*.{html,xml,json,txt,md,yml}', './*.yml', SRC + '_includes/svg/*']).on('all', series('build', browser.reload)) -} - - -// -// Build banner -// -export const buildBanner = done => { - console.log(chalk.dim(' ------------------------------------------')) - console.log(chalk.green(' Building ' + (isProduction ? 'production' : 'dev') + ' version...')) - console.log(chalk.dim(' ------------------------------------------')) - - done() -} - - -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -// Collection tasks -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - - -// -// Full build -// -// `gulp build` is the development build -// `gulp build --production` is the production build -// -export const build = series( - buildBanner, - clean, - jekyll, - parallel(html, css, js, svg, images, fonts, media), - rev, - revReplace, - criticalCss -) - - -// -// Build site, run server, and watch for file changes -// -// `gulp dev` -// -export const dev = series(build, server, watchSrc) - -// Set `gulp dev` as default: `gulp` -export default dev - - -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -// Deployment -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - -// create publisher, define config -const publisher = $.awspublish.create({ - params: { - Bucket: S3BUCKET - }, - accessKeyId: process.env.AWS_ACCESS_KEY, - secretAccessKey: process.env.AWS_SECRET_KEY, - region: S3REGION -}) - -export const s3 = () => src(DIST + '/**/*') - .pipe($.awspublishRouter({ - cache: { - // Cache for 5 minutes by default - cacheTime: 300 - }, - routes: { - // All static assets, cached & gzipped - '^assets/(?:.+)\\.(?:js|css|png|jpg|jpeg|gif|ico|svg|ttf|eot|woff|woff2)$': { - cacheTime: 2592000, // Cache for 1 month - gzip: true - }, - - // Every other asset, cached - '^assets/.+$': { - cacheTime: 2592000 // Cache for 1 month - }, - - // All html files, not cached & gzipped - '^.+\\.html': { - cacheTime: 0, - gzip: true - }, - - // Font mime types - '.ttf$': { - key: '$&', - headers: { 'Content-Type': 'application/x-font-ttf' } - }, - '.woff$': { - key: '$&', - headers: { 'Content-Type': 'application/x-font-woff' } - }, - '.woff2$': { - key: '$&', - headers: { 'Content-Type': 'application/x-font-woff2' } - }, - - // Pass-through for anything that wasn't matched by routes above, to be uploaded with default options - '^.+$': '$&' - } - })) - // Make sure everything goes to the root '/' - .pipe($.rename(path => { - path.dirname = S3PATH + path.dirname - })) - .pipe(parallelize(publisher.publish(), 100)) - .pipe(publisher.sync()) // Delete files in bucket that are not in local folder - .pipe($.awspublish.reporter({ - states: ['create', 'update', 'delete'] - })) - -// `gulp deploy` -export const deploy = series(s3) diff --git a/package.json b/package.json index 2966cc9b..75057f07 100644 --- a/package.json +++ b/package.json @@ -1,90 +1,100 @@ { - "name": "kremalicious", - "version": "3.1.0", - "author": { - "name": "Matthias Kretschmann", - "email": "m@kretschmann.io" - }, - "description": "Blog of Matthias Kretschmann", + "name": "@kremalicious/blog", + "version": "4.0.0", + "author": "Matthias Kretschmann ", + "description": "Blog of Designer & Developer Matthias Kretschmann", "homepage": "https://kremalicious.com", "license": "MIT", - "main": "gulpfile.babel.js", + "main": "index.js", "scripts": { - "start": "gulp", - "build": "gulp build --production", - "test": "xo" + "start": "gatsby develop", + "build": "gatsby build", + "format": "prettier --write 'src/**/*.{js,jsx}'", + "format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'", + "lint:js": "eslint ./gatsby-*.js && eslint ./src/**/*.jsx", + "lint:css": "stylelint ./src/**/*.{css,scss}", + "lint:md": "markdownlint ./content/posts/**/*.md && markdownlint ./README.md", + "lint": "npm run lint:md && npm run lint:js && npm run lint:css", + "test": "npm run lint", + "deploy": "./scripts/deploy.sh", + "svg": "./scripts/svg.sh", + "new": "babel-node ./scripts/new.js" }, "browserslist": [ "last 3 versions" ], - "xo": { - "space": 4, - "semicolon": false, - "rules": { - "no-multiple-empty-lines": [ "error", { "max": 2, "maxEOF": 1 }], - "object-curly-spacing": ["error", "always"], - "promise/prefer-await-to-then": 0 - }, - "globals": [ - "window", - "document", - "navigator", - "jQuery", - "$" - ] - }, "dependencies": { - "@webcomponents/webcomponentsjs": "^2.0.2", - "clipboard": "^2.0.1", - "exif-js": "^2.3.0", - "normalize-css": "^2.3.1", - "normalize-opentype.css": "^0.2.4", - "qrious": "^4.0.2", - "simple-jekyll-search": "^1.7.0", - "time-elements": "^1.1.0", - "vex-js": "^4.1.0" + "dms2dec": "^1.1.0", + "fast-exif": "^1.0.1", + "fraction.js": "^4.0.9", + "gatsby": "^2.0.11", + "gatsby-awesome-pagination": "^0.2.1", + "gatsby-image": "^2.0.10", + "gatsby-plugin-catch-links": "^2.0.3", + "gatsby-plugin-favicon": "^3.1.4", + "gatsby-plugin-feed": "^2.0.5", + "gatsby-plugin-lunr": "^1.2.0", + "gatsby-plugin-matomo": "^0.5.0", + "gatsby-plugin-meta-redirect": "^1.1.0", + "gatsby-plugin-offline": "^2.0.5", + "gatsby-plugin-react-helmet": "^3.0.0", + "gatsby-plugin-sass": "^2.0.1", + "gatsby-plugin-sharp": "^2.0.5", + "gatsby-plugin-sitemap": "^2.0.1", + "gatsby-plugin-svgr": "^2.0.0-alpha", + "gatsby-redirect-from": "^0.1.1", + "gatsby-remark-autolink-headers": "^2.0.6", + "gatsby-remark-copy-linked-files": "^2.0.5", + "gatsby-remark-highlights": "^1.3.4", + "gatsby-remark-images": "^2.0.3", + "gatsby-remark-smartypants": "^2.0.5", + "gatsby-source-filesystem": "^2.0.1", + "gatsby-transformer-remark": "^2.1.4", + "gatsby-transformer-sharp": "^2.1.2", + "gatsby-transformer-yaml": "^2.1.1", + "graphql": "^0.13.2", + "intersection-observer": "^0.5.0", + "load-script": "^1.0.0", + "node-sass": "^4.9.3", + "nord": "^0.2.1", + "pigeon-maps": "^0.11.0", + "pigeon-marker": "^0.3.4", + "prismjs": "^1.15.0", + "react": "^16.5.2", + "react-clipboard.js": "^2.0.1", + "react-dom": "^16.5.2", + "react-helmet": "^5.2.0", + "react-modal": "^3.6.1", + "react-pose": "^3.3.4", + "react-qr-svg": "^2.1.0", + "react-time": "^4.3.0", + "react-transition-group": "^2.5.0", + "slugify": "^1.3.1" }, "devDependencies": { - "autoprefixer": "^9.0.0", - "babel-core": "^6.26.3", - "babel-preset-env": "^1.7.0", - "browser-sync": "^2.24.5", - "chalk": "^2.4.1", - "concurrent-transform": "^1.0.0", - "critical": "^1.3.3", - "cssnano": "^4.0.0", - "del": "^3.0.0", - "fs": ">=0.0.2", - "gulp": "^4.0.0", - "gulp-awspublish": "^3.3.3", - "gulp-awspublish-router": "^0.1.5", - "gulp-cli": "^2.0.0", - "gulp-header": "^2.0.5", - "gulp-htmlmin": "^5.0.0", - "gulp-if": "^2.0.2", - "gulp-imagemin": "^4.1.0", - "gulp-include": "^2.3.1", - "gulp-load-plugins": "^1.5.0", - "gulp-postcss": "^8.0.0", - "gulp-rename": "^1.3.0", - "gulp-replace": "^1.0.0", - "gulp-rev": "^8.1.1", - "gulp-rev-replace": "^0.4.4", - "gulp-sourcemaps": "^2.6.4", - "gulp-stylus": "^2.7.0", - "gulp-svg-sprite": "^1.4.0", - "gulp-uglify": "^3.0.0", - "js-yaml": "^3.12.0", - "request": "^2.87.0", - "uglify-es": "^3.3.9", - "xo": "^0.22.0", - "yargs": "^12.0.1" + "@babel/node": "^7.0.0", + "@babel/preset-env": "^7.1.0", + "babel-eslint": "^10.0.1", + "eslint": "^5.6.0", + "eslint-config-prettier": "^3.1.0", + "eslint-loader": "^2.1.1", + "eslint-plugin-graphql": "^2.1.1", + "eslint-plugin-prettier": "^2.7.0", + "eslint-plugin-react": "^7.11.1", + "markdownlint": "^0.11.0", + "markdownlint-cli": "^0.13.0", + "prettier": "^1.14.3", + "prettier-stylelint": "^0.4.2", + "stylelint": "^9.6.0", + "stylelint-config-css-modules": "^1.3.0", + "stylelint-config-standard": "^18.2.0", + "stylelint-scss": "^3.3.1" }, "engines": { - "node": ">=8.0.0" + "node": "^10.0.0" }, "repository": { "type": "git", - "url": "https://github.com/kremalicious/kremalicious3.git" + "url": "https://github.com/kremalicious/blog.git" } } diff --git a/scripts/.babelrc b/scripts/.babelrc new file mode 100644 index 00000000..0ef5ffc2 --- /dev/null +++ b/scripts/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/env"] +} diff --git a/scripts/deploy.sh b/scripts/deploy.sh new file mode 100755 index 00000000..d2d22005 --- /dev/null +++ b/scripts/deploy.sh @@ -0,0 +1,44 @@ +#!/usr/bin/env bash +# +# required environment variables: +# AWS_ACCESS_KEY_ID +# AWS_SECRET_ACCESS_KEY +# AWS_DEFAULT_REGION +AWS_S3_BUCKET="kremalicious.com" +AWS_S3_BUCKET_BETA="beta.kremalicious.com" +# +set -e; + +function s3sync { + aws s3 sync ./public s3://"$1" --exclude "*.html" --exclude "*.js" --cache-control max-age=31536000,public --delete --acl public-read + + aws s3 sync ./public s3://"$1" --exclude "*" --include "*.html" --include "*.js" --cache-control max-age=0,no-cache,no-store,must-revalidate --delete --acl public-read +} + +## +## check for pull request against master +## +if [ "$TRAVIS_PULL_REQUEST" != "false" ] && [ "$TRAVIS_BRANCH" == "master" ]; then + + s3sync $AWS_S3_BUCKET_BETA + +## +## check for master push which is no pull request +## +elif [ "$TRAVIS_BRANCH" == "master" ] && [ "$TRAVIS_PULL_REQUEST" == "false" ] || [ "$TRAVIS" != true ]; then + + s3sync $AWS_S3_BUCKET + + echo "---------------------------------------------" + echo " ✓ done deployment " + echo "---------------------------------------------" + + exit; + +else + + echo "---------------------------------------------" + echo " nothing to deploy " + echo "---------------------------------------------" + +fi diff --git a/scripts/new.js b/scripts/new.js new file mode 100644 index 00000000..3bd4079c --- /dev/null +++ b/scripts/new.js @@ -0,0 +1,30 @@ +import fs from 'fs' +import path from 'path' +import prepend from 'prepend' +import slugify from 'slugify' +import ora from 'ora' + +const templatePath = path.join(__dirname, 'new.md') +const template = fs.readFileSync(templatePath).toString() + +const spinner = ora('Adding new project').start() + +if (!process.argv[2]) { + spinner.fail('Use the format `npm run new -- Title of post`') +} + +const title = process.argv[2] +spinner.text = `Adding '${title}'.` + +const titleSlug = slugify(title, { lower: true }) +const postsPath = path.join(__dirname, 'content', 'posts') +const newContents = template + .split('TITLE') + .join(title) + .split('DATE') + .join(Date.now()) + +// prepend(projects, newContents, error => { +// if (error) spinner.fail(error) +// spinner.succeed(`Added '${title}' to top of projects.yml file.`) +// }) diff --git a/scripts/new.md b/scripts/new.md new file mode 100644 index 00000000..c4d993ed --- /dev/null +++ b/scripts/new.md @@ -0,0 +1,13 @@ +--- +type: post + +title: TITLE +author: Matthias Kretschmann + +date: DATE + +tags: + - tag +--- + +Beep Boop. diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx new file mode 100644 index 00000000..6268e387 --- /dev/null +++ b/src/components/Layout.jsx @@ -0,0 +1,28 @@ +import React, { Fragment } from 'react' +import PropTypes from 'prop-types' +import Container from './atoms/Container' +import Typekit from './atoms/Typekit' +import Header from './organisms/Header' +import Footer from './organisms/Footer' +import styles from './Layout.module.scss' + +const Layout = ({ children }) => ( + + +
    + +
    +
    + {children} +
    +
    + +