From fef0c821ca0c024523d35f9ed7ec92e1aab99516 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann
Date: Sat, 29 Sep 2018 02:54:31 +0200
Subject: [PATCH] post fixes
---
.markdownlint.json | 3 +-
.travis.yml | 2 +-
README.md | 15 ++++
...canon-canoscan-lide-500f-for-intel-macs.md | 2 +-
...s-on-a-mac-for-htaccess-protected-sites.md | 2 +-
...lever-text-effects-with-css-text-shadow.md | 14 +--
...anoscan-lide-500f-with-mac-os-x-leopard.md | 10 +--
...can-images-directly-into-apple-aperture.md | 6 +-
...-the-15-best-new-features-of-aperture-2.md | 30 +++----
...perture-adjustment-plugins-have-arrived.md | 20 ++---
...-css-parallax-effect-12-creative-usages.md | 6 +-
content/posts/2008-06-01-chives.md | 2 -
...and-the-history-of-the-first-photograph.md | 18 ++--
...3-niepces-camera-obscura-wallpaper-pack.md | 6 +-
...mac-file-server-and-time-machine-volume.md | 32 +++----
...ack-to-normal-on-kremaliciouscom-almost.md | 6 +-
.../2008-07-11-enjoy-kremaliciousiphone.md | 10 +--
...s-25-get-rid-of-that-sluggish-dashboard.md | 83 +++++++++--------
...reate-a-mobile-encrypted-aperture-vault.md | 9 --
...8-08-22-the-kremalicious-marsedit-style.md | 56 ++++++------
...1-a-new-browser-is-coming-google-chrome.md | 8 --
...most-incredible-coffee-icons-on-the-web.md | 3 -
...e-guide-to-watermarks-in-apple-aperture.md | 44 +--------
...a-custom-gravatar-image-in-wordpress-27.md | 29 +++---
...yling-author-comments-with-wordpress-27.md | 16 ++--
.../posts/2009-01-05-the-mac-in-futurama.md | 32 +++----
content/posts/2009-02-01-portal-thingy.md | 6 --
content/posts/2012-06-27-typography-window.md | 1 -
...your-web-site-to-the-windows-8-metro-ui.md | 12 +--
content/posts/2012-08-07-projectpurple.md | 10 +--
.../posts/2012-09-26-designing-with-code.md | 4 -
.../2013-07-13-enterprise-software-sucks.md | 2 +-
...nology-can-hurt-or-harm-our-inner-state.md | 5 +-
...2015-08-02-simple-tor-setup-on-mac-os-x.md | 10 +--
.../posts/2015-09-13-css-app-store-badges.md | 9 +-
package.json | 10 +--
src/components/atoms/PostContent.jsx | 8 +-
src/components/atoms/PostContent.module.scss | 90 -------------------
src/components/molecules/Featured.module.scss | 29 ++++--
src/styles/_buttons.scss | 2 +-
src/styles/_content.scss | 8 ++
src/styles/_variables.scss | 2 +-
src/styles/global.scss | 63 ++++++++++++-
43 files changed, 328 insertions(+), 407 deletions(-)
delete mode 100644 src/components/atoms/PostContent.module.scss
create mode 100644 src/styles/_content.scss
diff --git a/.markdownlint.json b/.markdownlint.json
index ca4fcadb..cc1ed3b8 100644
--- a/.markdownlint.json
+++ b/.markdownlint.json
@@ -4,5 +4,6 @@
"no-inline-html": false,
"fenced-code-language": false,
"first-line-h1": false,
- "first-heading-h1": false
+ "first-heading-h1": false,
+ "no-bare-urls": false
}
diff --git a/.travis.yml b/.travis.yml
index e35f2dee..edab949d 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -11,7 +11,7 @@ install:
script:
- npm test
- - travis_wait npm run build
+ - travis_wait 60 npm run build
after_success:
- pip install --user awscli
diff --git a/README.md b/README.md
index e076b4af..b3a19230 100644
--- a/README.md
+++ b/README.md
@@ -36,6 +36,10 @@ If you want to know how, have a look at the respective component under [`src/com
Site sends usage statistics to my own [Matomo](https://matomo.org) installation. To make this work in Gatsby, I created and open sourced a plugin, [gatsby-plugin-matomo](https://github.com/kremalicious/gatsby-plugin-matomo), which is in use on this site.
+### gatsby-redirect-from
+
+https://github.com/kremalicious/gatsby-redirect-from
+
### đ Importing SVG assets
All SVG assets under `src/images/` will be converted to React components with the help of [gatsby-plugin-svgr](https://github.com/zabute/gatsby-plugin-svgr). Makes use of [SVGR](https://github.com/smooth-code/svgr) so SVG assets can be imported like so:
@@ -59,6 +63,13 @@ You need to have the following tools installed on your development machine befor
- [Node.js](http://nodejs.org/)
- [npm](https://npmjs.org/)
+Then install dependencies and start everything up:
+
+```bash
+npm i
+npm start
+```
+
### đź Linting
ESlint, Prettier, and Stylelint are setup for all linting purposes:
@@ -76,6 +87,10 @@ npm run format:css
### đ Add a new project
+```bash
+npm run new -- "Hello"
+```
+
...
## đ Deployment
diff --git a/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md b/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md
index ede51b9a..8c7fc6d8 100644
--- a/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md
+++ b/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md
@@ -22,7 +22,7 @@ So there were two choices for using the scanner on an Intel-Mac: installing the
So I called the Canon Support two months ago but they could only say sorry and advertise for their new scanner LiDE 600f which has a new Universal-driver and so on. But it hasn't really any new functions. And spending 100$ or so just for a new driver? So what??! They really wanted me to replace my scanner, which isn't a year old. Damn Canon-Support! So I had to keep on searching on all Canon-websites and finally...
-# The solution...
+## The solution
[Canon Asia](http://www.canon-asia.com/) (Canon South & Southeast-Asia to be precise) was the solution! They really offer a universal-driver for the CanoScan LiDE 500f on their site which is from June 2007! You have to follow this link and choose your desired device:
[http://www.canon-asia.com/index.jsp?fuseaction=supportâ_type=scanner&country;=SG](http://www.canon-asia.com/index.jsp?fuseaction=support&prod_type=scanner&country=SG)
diff --git a/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md b/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md
index ee1b6a0a..97d6d233 100644
--- a/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md
+++ b/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md
@@ -27,7 +27,7 @@ The login data, in detail just the password is stored encrypted in the .htpasswd
Just open Terminal application and type in the following code and replace username and password with your desired data:
-```shell
+```bash
htpasswd -nb username password
```
diff --git a/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md b/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md
index 8a61d857..1161bd1b 100644
--- a/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md
+++ b/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md
@@ -28,13 +28,13 @@ This article describes how text-shadow works, what you can do with it and which
Here's an overview of the headlines in this article. As you can see it's rather complex and long. Be sure to get a delicious fresh cup of coffee or tea before reading on:
-1. What text-shadow is good for
-2. Which browsers support it
-3. Cross-browser compatibility
-4. How does it work and how to use it
-5. Examples with code & demos
-6. Hack: Safari Text Rendering
-7. More articles and resources
+1. What text-shadow is good for
+2. Which browsers support it
+3. Cross-browser compatibility
+4. How does it work and how to use it
+5. Examples with code & demos
+6. Hack: Safari Text Rendering
+7. More articles and resources
## 1. What text-shadow is good for
diff --git a/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md b/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md
index 0c26c46f..12744dc1 100644
--- a/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md
+++ b/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md
@@ -16,7 +16,7 @@ tags:
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
+## 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.
@@ -33,24 +33,24 @@ After the installation is finished you have to restart your Mac (very Mac-unlike
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
+## Using the scanner in Mac OS X Leopard
-## Preview / Image Capture
+### Preview / Image Capture
[![Scan window Preview](../media/scanwindow_preview.png)](../media/scanwindow_preview.png)Leopard included a new version of Preview, the pdf and image-viewing application by Apple and also a new version of Image Capture. To use it with your scanner just plug in the scanner, open Preview and choose File > Import Image or just open the Image Capture application. A new scan window should open doing an automatic overview scan. In the scan window you have some minor options like resolution, scaling etc. You can even make simple but powerful image corrections down at the bottom (set it to manual).
But the best thing with the new Image Capture is the feature of setting the bit depth of the scanner to 16 bits. This was just possible before through the Canon software ScanGear in Photoshop.
-## Scanning right into Apple Aperture?
+### Scanning right into Apple Aperture?
[![Aperture Scanning](../media/aperturescan.png)](../media/aperturescan.png) Wouldn't that be great? Although the scanner is shown as a source in the import dialogue you can't import images with it directly from Aperture. Maybe someone will code a generic scanning plugin for Aperture like VueScan for Aperture or something like that. But I guess this is something just Canon is able to do that and they won't.
But using Preview/Image Capture and Automator you can bypass this limitation. If you want to know how you can do that have a look at my article [Scan images directly into Apple Aperture](http://www.kremalicious.com/2008/05/scan-images-directly-into-apple-aperture/).
-## Adobe Photoshop CS3
+### Adobe Photoshop CS3
[![ScanGear Scan Window](../media/scangearwindow.png)](../media/scangearwindow.png)Just like with Creative Suite 2 you can use Photoshop to import images with your Scanner by using the Canon ScanGear software which indeed is just the scan window in Photoshop. Just chose File > Import > CanoScan LiDE 500F in Photoshop. If you have installed the driver for the first time the scan window in Photoshop defaults to Simple Mode. But if you want it simple you better chose a Preview/Image Capture workflow. So in Photoshop you should head over to Advanced Mode and check the preferences button down at the bottom first.
diff --git a/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md b/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md
index 0087aa5a..40e00a79 100644
--- a/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md
+++ b/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md
@@ -19,7 +19,7 @@ Wouldn't that be great? Hook up your scanner, fire up Aperture, click on Import
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
+## 1. Make an Automator action
![Automator](../media/automator.png)Open up Automator and click on the photos library item. Find the Aperture action "Import Photos" and drag and drop it on the workflow field. Then you can chose your desired project or a new project for the scanned images to appear. I have a project for all new images called @Review so I chose that one as my target project. You can set a referenced import or the deletion of your source images as well. If you want to chose the desired project or any of the other preferences every time you're scanning you have to activate "Show this action when the workflow runs" in the Options of this action.
@@ -27,11 +27,11 @@ To make it a bit cooler we can assign one or more keywords to our scanned images
[![Aperture Import Workflow](../media/apertureimport_automator.png)](../media/apertureimport_automator.png)
-# 2. Save it as a plug-in for Image Capture
+## 2. Save it as a plug-in for Image Capture
[![Aperture Import Workflow2](../media/apertureimportplugin.png)](../media/apertureimportplugin.png)Now we're going to save the whole workflow we clicked together. But instead of saving it as a general workflow chose File > Save as Plug-in. Type in a name like "Import to Aperture" and chose Image Capture from the dropdown menu and click save. Now your workflow has become a freshly new plug-in of the Image Capture application. If you ever want to delete, edit or just backup your Image Capture Plugins you can find them in your user folder library under /Workflows/Applications/Image Capture.
-# 3. Scanning and have fun
+## 3. Scanning and have fun
[![Aperture Import Workflow3](../media/apertureimport_automatic.png)](../media/apertureimport_automatic.png)Plug in your scanner and open up Image Capture. A new scan window should open with your connected scanner as source. Now we have to define our freshly created plug-in as a task which will run after the image was scanned. Just chose your freshly created workflow from the Automatic Task dropdown menu and there you have it. So after you hit the scan button our freshly created workflow will run after the scan.
diff --git a/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md b/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md
index d6971a64..f6888050 100644
--- a/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md
+++ b/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md
@@ -16,7 +16,7 @@ coinhive: true
There are already some lists like this available on the web and they are always very subjective so I thought I should add my subjective list too. While Aperture was released I was coding this website and had not much time for writing about it. So although a bit late here is my absolutely biased list of my favorite 15 new features included in Apple's Aperture since version 2.0. It's in a nice countdown order ending with the best new feature (to me) at the bottom. Just click on the little screenshots to smoothly zoom to the full version of them.
-# 15. The "New" toolbar icon
+## 15. The "New" toolbar icon
[![New toolbar icon](../media/aperture15_1.png)](../media/aperture15_1.png)
@@ -24,31 +24,31 @@ A handy dropdown icon with the most common create tasks you can do in Aperture 2
-# 14. Skimming through your projects
+## 14. Skimming through your projects
[![Skimming](../media/aperture15_2.png)](../media/aperture15_2.png)
The Library item has a new child item: All Photos. Clicking on it displays all your projects like the Event view known from iPhoto 08. By hovering the mouse over the key photo (which you can define for yourself too) you "skim" through the project and quickly see all images contained in this project. Perfect for visually finding that non-keyworded photo you remember you've taken it but don't know where it is.
-# 13. Search for adjustments
+## 13. Search for adjustments
[![Search for adjustments](../media/aperture15_3.png)](../media/aperture15_3.png)
With Aperture 2 you can define a search query based on the adjustments you've made to an image in your library. So you can quickly identify all your images which have the monochrome mixer applied to them or maybe all your images which have _no_ edge sharpening applied and so on.
-# 12. The Retouch tool
+## 12. The Retouch tool
[![Retouch tool](../media/aperture15_4.png)](../media/aperture15_4.png)
No more fiddling around with the poor results of the spot & patch tool when you just want to remove some sensor dust from your image. The repair mode of this tool is just perfect for that kind of task. The clone mode pretty much functions the same way as the clone tool in Photoshop. You define a clone source in your image by pressing option + click in your image and then pasting that source onto the imperfection by clicking on it.
-# 11. Double click behavior
+## 11. Double click behavior
[![Double click behavior](../media/aperture15_5.png)](../media/aperture15_5.png)
The behavior of double clicking on images can now be set in Aperture's preferences. Either you can make Aperture show or hide the Viewer or set it to enter full screen mode with the double clicked image in focus.
-# 10. Book Layout
+## 10. Book Layout
[![Book layout](../media/aperture15_6.png)](../media/aperture15_6.png)
@@ -56,7 +56,7 @@ The photobook layout capabilities of Aperture became much powerful with version
-# 9. The V- and W-cycle
+## 9. The V- and W-cycle
[![HUD](../media/aperture15_8.png)](../media/aperture15_8.png)
@@ -66,49 +66,49 @@ By pressing W on your keyboard you can cycle through the tabbed Inspector on the
-# 8. The tabbed Inspector/HUD
+## 8. The tabbed Inspector/HUD
[![HUD](../media/aperture15_7.png)](../media/aperture15_7.png)
An addition to the W-cycle: The overall inspector get polished by Apple which results in a completely new clean interface. But the best thing is you can access all those inspector tabs in full screen mode too by hitting the H-key. You can cycle through the tabs of the HUD in full screen mode just like you can do in the Aperture window by pressing the W-key. In fact the tabbed HUD will make you never want to leave full screen mode.
-# 7. .Mac Web Gallery
+## 7. .Mac Web Gallery
![Quick Preview](../media/aperture15_8.jpg)
Create easy updatable password protected galleries for different clients in no time. Your clients are even able to download the master files from your good looking .Mac web gallery.
-# 6. Definition adjustment slider
+## 6. Definition adjustment slider
[![Recovery and Black Point sliders](../media/aperture15_11.png)](../media/aperture15_11.png)
It's a bit hard to describe. In short the slider adds more detail to the midtones of your image. But you just have to see it in action. You can get crisp and sharp images without the need of any sharpening tool.
-# 5. Recovery + Black Point sliders
+## 5. Recovery + Black Point sliders
![Recovery and Black Point sliders](../media/aperture15_10.png)
Although the Highlights & Shadow tool already produced reasonable results, the new Recovery and Black Point sliders are much more powerful and can reveal a lot of detail either in your blown out highlights or your underexposed shadows. Tip: While moving either the Recovery or the Black Point slider hold down the command key at the same time to see just an overlay of your hot & cold areas in your image.
-# 4. Quick Preview
+## 4. Quick Preview
![Quick Preview](../media/aperture15_12.png)
Perfect for first selections of your images during import. Aperture uses either a preview embedded by your camera in the RAW-file, the corresponding jpg-file if you shoot RAW+JPG or it uses the previews rendered by Aperture itself.
-# 3. Color Picker
+## 3. Color Picker
[![Color Picker](../media/aperture15_13.png)](../media/aperture15_13.png)
Inside the Color adjustment brick you can now directly pick the color you want to alter from your image by selecting it with the little eye dropper. So you aren't bound to the standard colors when adjusting the colors of your image separately.
-# 2. Spe(eeee)ed
+## 2. Spe(eeee)ed
[![Speed](../media/aperture15_14.jpg)](../media/aperture15_14.jpg)
Now you can "scroll like butter" (I bet you know who said that) through your whole library fro real. I don't know what exactly causes Aperture 2 to be so much more responsive and speedier than previous versions but the development team have done magic with this. In combination with the quick preview mode quickly browsing through thousands of photos even in full screen mode is now a snap.
-# 1. RAW 2.0
+## 1. RAW 2.0
[![RAW power](../media/raw20.png)](../media/raw20.png)
diff --git a/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md b/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md
index 62cd4087..9e46d70a 100644
--- a/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md
+++ b/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md
@@ -17,7 +17,7 @@ coinhive: true
-# Dfx digital filters plugin from Tiffen
+## Dfx digital filters plugin from Tiffen
@@ -29,7 +29,7 @@ Tiffen made the plugin available in May 2008. You can download a [free 15-day tr
A nice in-depth overview of this plugin [gives Dominique James over at Aperture Users Professional Network](http://www.apertureprofessional.com/showthread.php?t=15225).
-# Digital Film Tools Aperture Plugins
+## Digital Film Tools Aperture Plugins
Digital Film Tools [released three plugins](http://www.digitalfilmtools.com/apertureprods.htm) for Aperture 2.1 and above which were also already available for Photoshop:
@@ -48,7 +48,7 @@ Digital Film Tools [released three plugins](http://www.digitalfilmtools.com/aper
All plugins are available now and can be [purchased fom the Digital Film Tools website](http://www.digitalfilmtools.com/buy/home.php?cat=38) as a Super Bundle with all three plugins included for US$ 175 or separately for US$ 50 (Light and Ozone) or US$ 120 (Power Stroke). There are also trial versions for the [Power Stroke](http://www.digitalfilmtools.com/powerstroke/media.htm), [Light](http://www.digitalfilmtools.com/light/media.htm) and [Ozone](http://www.digitalfilmtools.com/ozone/media.htm) plugin available from DFT's website which will watermark the edited images in demo mode.
-# Nik Viveza
+## Nik Viveza
Nik Software [announced the availabilty of Viveza](http://www.niksoftware.com/viveza/usa/entry.php?view=intro/viveza_aperture_announcement.shtml), an image editing plugin based on the cool U-Point technology as known from [Nikon's Capture NX](http://imaging.nikon.com/products/imaging/lineup/software/capturenx/index.htm). You can select areas from your image and adjust them separately from the rest of the picture. It is long available as a plugin for Photoshop and is shipping in May for Aperture 2.1. It will cost US$249.95 but users who already purchased Viveza for Photoshop get it for free!
@@ -56,7 +56,7 @@ On May 7, 2008, Nik finally [shipped Viveza as the first availailabe plugin for
[![Nik Viveza](../media/viveza_aperture_ui.jpg)](../media/viveza_aperture_ui.jpg)
-# dvGarage dpMatte & HDR Toner
+## dvGarage dpMatte & HDR Toner
[DpMatte](http://www.dvgarage.com/prod/prod.php?prod=dpmatte) is a plugin for greenscreen keying for photographers. You can easily composite two images together, like adding another background for a portrait. It is available since April 22 and costs you US$ 69.
@@ -64,7 +64,7 @@ On May 7, 2008, Nik finally [shipped Viveza as the first availailabe plugin for
The folks at dvGarage are also working on an Aperture plugin called HDRToner for high dynamic range images which will cost US$ 69 too and is expected to be available on June 15 2008.
-# Image Trends Aperture plugins
+## Image Trends Aperture plugins
Image Trends announced three plugins coming for Aperture 2.1. First one is the the anti-distortion plugin [Fisheye-Hemi](http://www.imagetrendsinc.com/products/prodpage_hemi.asp) which can remap images taken with fisheye lenses. If you're using a Fisheye lens you will love this plugin. According to Image Trends' Michael K. Conley the plugin should be available on May 19, 2008 and will cost US$ 29.95. But if you already purchased the Photoshop version Image Trends will give you 50% discount.
@@ -78,7 +78,7 @@ And the [ShineOff](http://www.imagetrendsinc.com/products/prodpage_shine.asp) pl
[![ShineOff](../media/imagestrends_shieoff.jpg)](../media/imagestrends_shieoff.jpg)
-# Picturecode Noise Ninja
+## Picturecode Noise Ninja
Well known for it's awesome noise reduction capabilities, Picturecode's [Noise Ninja](http://www.picturecode.com/nn_overview.htm) will be available as an Aperture 2.1 plugin too.
@@ -88,25 +88,25 @@ According to Picturecode we can expect the plugin "sometimes next month" (June)
You can have a first look at an early alpha version of the plugin running in Aperture 2.1 in an [in-depth article by Rob Galbraith](http://www.robgalbraith.com/bins/content_page.asp?cid=7-9308-9356).
-# Creaceed Hydra + HDR Aperture Plugin
+## Creaceed Hydra + HDR Aperture Plugin
[Hydra](http://www.creaceed.com/hydra/) is a neat application for High Dynamic Range (HDR) image processing. With the release of Hydra 1.5, Creaceed made an Aperture plugin available with it too. It has a limited feature set compared to Photomatix or Photoshop but creating HDR images within Aperture is possible right now with this plugin. You can purchase Hydra for US$ 59.95 to get the included plugin or test it out by downloading the trial version (it will expire on July 1, 2008). But remember that the plugin is in beta stage at the moment.
![Hydra](../media/creaceed_hydra.png)
-# Kekus LensFix CI
+## Kekus LensFix CI
![Kekus LensFix CI](../media/lensfix_ci.png)The [LensFix](http://www.kekus.com/software/plugin.html) product from Kekus will help you to correct lens distortion automatically along with it's database of over 500 combinations of camera and lenses. It is also capable of reducing chromatic aberration in your images. Along with a standalone version and a Photoshop plugin the latest version will deliver you a plugin for Aperture in beta stage. The LensFix CI product with the Aperture plugin included will cost you US$ 30.
You can read a first review of the beta plugin for Aperture [over at trick77.com](http://www.trick77.com/2008/05/18/review-lens-correction-plug-in-kekus-lensfix-for-aperture-2/).
-# Human Software ApertureEdit
+## Human Software ApertureEdit
This plugin is a whole bundle of 11 different modules for more than 4000 effects like denoising, lens fixing, framing, light effects and many more. All effects can be applied to one image at a time or to a whole set of images at once. Just head over to the [product page](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) to see all effects and features this plugin bundle is capable of. The whole bundle will cost you US$ 299.95 or US$ 69.95 for each module.
[![Human Software ApertureEdit](../media/apertureedit_interface.jpg)](../media/apertureedit_interface.jpg)
-# More information
+## More information
[Image editing plug-ins the centrepiece of Aperture 2.1 by Rob Galbraith](http://www.robgalbraith.com/bins/content_page.asp?cid=7-9308-9356): In-depth article about the plugin architecture of Aperture 2.1
diff --git a/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md b/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md
index 827df0a3..a741d1c1 100644
--- a/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md
+++ b/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md
@@ -27,7 +27,7 @@ But with the rise of CSS this technique can now be done without the use of flash
So here are the examples. Just start clicking, resizing and goggling!
-# Examples
+## Examples
[Clearleft's Silverback Teaser page](http://www.silverbackapp.com/)
@@ -77,7 +77,7 @@ A russian site with an awesome making-webdesign-in-jungle parallax (thanks [egot
[![cdev.ru](../media/parallax_013.jpg)](http://www.cdev.ru/)
-# More Scripts and Interaction, please
+## More Scripts and Interaction, please
All the showcased sites above need to be resized in the browser to see the effect. This fact makes those effects nice easter eggs but they are rather useless for most users. But with some JavaScript we can bypass this limitation.
@@ -111,7 +111,7 @@ Same graphics as on Silverback too but this Parallax follows your mouse pointer.
[![WeblogR demo](../media/parallax_012.jpg)](http://www.weblogr.fr/demo/09052008/)
-# How-Tos and Tutorials
+## How-Tos and Tutorials
- [How to recreate Silverback's Parallax Effect](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax)
diff --git a/content/posts/2008-06-01-chives.md b/content/posts/2008-06-01-chives.md
index 77daf14d..e7bca7eb 100644
--- a/content/posts/2008-06-01-chives.md
+++ b/content/posts/2008-06-01-chives.md
@@ -25,5 +25,3 @@ You can get the wallpaper by browsing [my Goodies section](http://www.kremalicio
-## How to use the icons
+### How to use the icons
In the avahi configuration part in this article you have assigned the Xserve device info to your afpd.service file. All you have to do is to replace the generic Xserve icon (or whatever model you have assigned in your afpd.service file) with an icon from this icon package. Just rename the Ubuntu Server.icns to com.apple.xserve.icns and navigate to
@@ -417,7 +417,7 @@ update: A solution for the icon problem is here: [Simon Wheatley figured out](ht
Congratulations! You finally arrived at the end of my article. There's a good chance that your coffee or tea cup is now empty. But before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-Feed](/feed/), discuss this article or buy me my next coffee.
-# 9. Translations Of This Article
+## 9. Translations Of This Article
The following articles are direct translations of my article but some of them are slightly modified or simplified. Remember that the authors/translators are responsible for the content.
diff --git a/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md b/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md
index 07be34e0..892a35b8 100644
--- a/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md
+++ b/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md
@@ -24,9 +24,9 @@ Now it's clear something with my code must be wrong, I thought. For displaying t
```php
-
-
-
+
+
+
```
diff --git a/content/posts/2008-07-11-enjoy-kremaliciousiphone.md b/content/posts/2008-07-11-enjoy-kremaliciousiphone.md
index 25013aef..6fb46f99 100644
--- a/content/posts/2008-07-11-enjoy-kremaliciousiphone.md
+++ b/content/posts/2008-07-11-enjoy-kremaliciousiphone.md
@@ -21,7 +21,7 @@ The theme itself makes heavy use of the `-webkit-border-radius` css option to di
Beside that I've used some special html and css properties which are essential for the iPhone:
-# The Viewport
+## The Viewport
While Safari on iPhone will display all websites just fine it can happen that the initial viewport is too big so the text is too small to read. By setting a viewport meta tag you can exactly define the viewable dimensions of your website. Apple has [some nice examples](http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/chapter_4_section_3.html#//apple_ref/doc/uid/TP40006509-SW33) for understanding the importance of setting the Viewport in iPhone optimized websites.
@@ -33,8 +33,7 @@ The viewport can be larger or smaller than the visible area but I wanted my cont
This code will let the user scale the content up to 1.6 times to the default view and the default width of the content is set to the width of the (iPhone) device.
-
-# Tap Color
+## Tap Color
There's neither an active nor a hover state for links on the iPhone which makes sense on a touch interface although it would be much easier to just use a:active for the tap highlighting. Safari on the iPhone uses a special webkit property for that:
@@ -42,7 +41,7 @@ There's neither an active nor a hover state for links on the iPhone which makes
-webkit-tap-highlight-color: rgba(234,234,234, .5);
```
-# Home Screen Icon
+## Home Screen Icon
![image](../media/kremalicious-iconiphone.png)I've used a 147x147px icon so the icon looks crisp and sharp on the iPhone screen (because it's a 160dpi screen). You really should use a bigger size than [Apple's recommendation in their iPhone HIG](https://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/chapter_14_section_2.html). You have to provide a png icon without rounded corners and without the highlight shine since the iPhone will render that automatically on the icon. The icon has to be named apple-touch-icon.png and gets automatically detected when put in the root of your website. Additionally you can tell the iPhone the place where the icon is with this link tag in your head section:
@@ -52,8 +51,7 @@ There's neither an active nor a hover state for links on the iPhone which makes
And finally many thanks to [cschock](http://www.cschock.de) for continuously testing my code voodoo soup even at late hours.
-
-# Resources for you to do the same and even more
+## Resources for you to do the same and even more
* [iWPhone by ContentRobot](http://iwphone.contentrobot.com/): The plug-in I use for kremalicious.iPhone. It detects an iPhone or iPod Touch and switches to another simple theme. You can easily adjust the plugin to point it to your own theme.
diff --git a/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md b/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md
index b687878a..c69436ce 100644
--- a/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md
+++ b/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md
@@ -22,55 +22,54 @@ So open your `/wp-admin/index-extra.php` file. It should look like this:
```php
```
-
Now just uncomment the lines so it looks like this (every line with two leading // is uncommented and therefore inactive):
```php
```
diff --git a/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md b/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md
index eba3204c..f1f9789e 100644
--- a/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md
+++ b/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md
@@ -21,7 +21,6 @@ coinhive: true
So in this quick tutorial I will show you how to create an encrypted Aperture Vault by using Sparse Bundle Disk Images and by utilizing tools built into Mac OS X. All this can be done in two simple steps.
-
## 1. Create an encrypted disk image
First you have to create the encrypted disk image where the Aperture Vault will reside. So fire up Disk Utility from the Utilities folder inside your Applications folder or use Spotlight to open it.
@@ -34,12 +33,8 @@ Finally set the destination where you want to have the disk image created. To ma
Now your newly created sparse bundle disk image ahould be mounted on your desktop which is perfectly fine for the next step.
-
-
## 2. Create the Aperture Vault
-
-
Now go to Aperture, choose the Projects tab and click on the little gear wheel at the bottom of the sidebar and choose "Add Vault" from the opened menu.
![](../media/securevault2.png)
@@ -54,12 +49,8 @@ The new Vault will be added to your Vault list and is now to ready to be updated
Just click the little iSync-style arrow beside your Vault and the Vault be written to your encrypted disk image. When finished you can eject the disk image. It can now be mounted again just with the correct password which is stored in your keychain so won't even recognize the encryption. Of course, when you try to mount this disk image on another mac you have to type in the password or import the entry from your keychain.
-
-
## 3. Conclusion
-
-
You see it's pretty easy to use secure file encryption just for particular uses on a Mac. The disk image method also provides you with the ability to move the disk image file to another volume and mounting it from the new place without adding or changing the Aperture Vault inside Aperture.
Finally you can have more uses for encrypted disk images. As I've said in the introduction, my referenced Master images reside on my mobile hard drive too. And they are encrypted inside a sparse bundle disk image as well. So you get the idea that you can do a lot more with these encrypted disk images to quickly secure sensible data.
diff --git a/content/posts/2008-08-22-the-kremalicious-marsedit-style.md b/content/posts/2008-08-22-the-kremalicious-marsedit-style.md
index ccddae64..31d658d3 100644
--- a/content/posts/2008-08-22-the-kremalicious-marsedit-style.md
+++ b/content/posts/2008-08-22-the-kremalicious-marsedit-style.md
@@ -24,57 +24,55 @@ In MarsEdit main window right-click (or ctrl + click) in the sidebar on the blog
Just copy and paste the following HTML and CSS into your Preview Template editor. If something goes wrong with the source formatting, I've also provided [a txt file with the code](../media/marsedit_kremalicious.txt):
-
```html
- #weblogName#: #title#
-
+ #credit {font: italic 0.8em/12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; text-align: center; margin-top:20px;}
+
-
<-- end content -->
```
-
Now click on Save Changes in the lower right corner of the window and there you have it.
Of course you are free to alter the style provided by me to fit your needs. If you have any additions to my provided code feel free to post them in the comments.
diff --git a/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md b/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md
index d3033c85..0e697037 100644
--- a/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md
+++ b/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md
@@ -33,15 +33,7 @@ Update 3: Google Chrome seems to have problems with some of my transparent PNGs:
Update 4: There are some nice articles about various aspects of Chrome available in the web:
* Matt Cutts tries to prevent paranoia and [explains when Google Chrome talk home](http://www.mattcutts.com/blog/google-chrome-communication/).
-
-
* Gina from lifehacker.com dissects [Google Chrome's Full List of Special about: Pages](http://lifehacker.com/5045164/).
-
-
* Google [explains their priorities regarding different Platforms](http://googlemac.blogspot.com/2008/09/platforms-and-priorities.html).
-
-
* The [Chromium Developer Documentation](http://dev.chromium.org/Home) is available too.
-
-
* And it seems Google [cut out some features of WebKit like text-shadow](http://www.flickr.com/photos/kurafire/2822606444/).
diff --git a/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md b/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md
index 727316a1..9d93a42a 100644
--- a/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md
+++ b/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md
@@ -25,11 +25,8 @@ A bunch of colorful cups of coffee.
[![Coffee Cup icons by Susumo Yoshida](../media/coffee-showcase-susumo.png)](http://www.mcdodesign.com/?page_id=22)
-
-
## CoffeeCon icon by Vegrafik
-
A hyperrealistic icon from Vegrafik
[![CoffeeCon icon by Vegrafik](../media/coffee-showcase-vegrafik.png)](http://macthemes2.net/forum/viewtopic.php?id=16789993)
diff --git a/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md b/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md
index 7c20d088..2cd5ac08 100644
--- a/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md
+++ b/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md
@@ -21,7 +21,6 @@ I received quite a few mails in the last days from Aperture users asking for the
In this article I will lay out every way I've found to add watermarks to your images in an Aperture 2 workflow and will discuss the advantages and disadvantages of each solution. The goal of this article is to give you a brief overview about the various ways you can add watermarks to your images so you can easily choose the best one for different needs. In short these are the possibilities:
-
## 1. The Aperture Way
Aperture has built-in support for watermarking your images on export. But you have to create a watermark image in a bitmap graphic editor like [Photoshop](http://www.adobe.com/products/photoshop/photoshop/), [Pixelmator](http://www.pixelmator.com/) or [Acorn](http://flyingmeat.com/acorn/) before you can start adding watermarks. But I've written a detailed article about how to use this feature of Aperture back in May 2008 named [HowTo: Use high-quality watermarks in your images with Aperture 2.1](http://www.kremalicious.com/2008/05/high-quality-watermarks-with-aperture/). In short, you have to create your watermark image first and then define it in a new export preset. In the end all images exported with this preset will have your defined watermark image on them. If you want to watermark your images the Aperture way be sure to [check out my tutorial](http://www.kremalicious.com/2008/05/high-quality-watermarks-with-aperture/).
@@ -30,53 +29,31 @@ Aperture has built-in support for watermarking your images on export. But you ha
This way is perfect if you want to watermark a lot of images at once or if your copyright info doesn't change often. And this works with Aperture's Web Journal or Web Page feature if you add a watermark image to the export presets for that. Also this works with any other export plug-in in Aperture which utilizes the export presets, like the [FlickrExport](http://connectedflow.com/flickrexport/aperture/) plug-in. You just have to create e.g. a flickr export preset, define your watermark image there and chose it inside of FlickrExport from the export preset dropdown list.
-
-
Update 10/31/2008: Another advantage is the system wide integration of this feature. E.g. you can use Aperture's built-in watermark feature in combination with an [Automator](http://support.apple.com/kb/HT2488?locale=de_DE) workflow. Just create your export preset with a watermark enabled in Aperture. In Automator you can drag the Export Versions action from the Photo section to your workflow and chose the export preset you've created.
But adding some lines of text to just one image or different text to different images can be rather complex cause you have to create lots of different watermark images and export presets.
-
-
-## 1.1 MobileMe Albums
-
-
+### 1.1 MobileMe Albums
For whatever reason Apple decided to not use the export presets for [MobileMe](http://www.me.com/) Albums so you can't watermark your images published through MobileMe Albums with this built-in feature. The only way to achieve this is to add the watermark outside of Aperture and reimport this image or you use an edit plug-in for this where your watermark will be rendered on the image.
But you can still use the Web Export Presets with a watermark defined when publishing an Aperture Web Page or a Web Journal through MobilMe.
-
-
## 2. The External Editor Way
-
-
Because of Aperture's workflow design you're always free to open up your image in your favorite external editor from within Aperture and add your copyright information and more to your image. Just add your favorite image editor in the Aperture preferences under the Export tab and set the file format you want to have.
Now you can just right click or ctrl + click on every image to open the context menu and choose Edit With whereas the first entry will be your external editor set in the preferences. Aperture will automatically render your image creating a new file and opens that up. Just add a new text layer in your external editor, type in your preferred text and save the file from there. Aperture will update with the changes accordingly.
![Aperture Watermark example 5](../media/watermark_5.png)
-
-
Using this method gives you the most flexibility since you can add everything to your image and come back with it in Aperture. And if you use Photoshop and choose to use psd as external editor file format you can easily add all your non-destructive layers in Photoshop an Aperture will live render those layers. Opening the psd file again from within Aperture will give you all the editable layers you created earlier.
-
-
But since Aperture always creates a psd or tiff file for that you will end up with rather large file sizes even if you just add two letters in your external editor.
-
-
## 3. The Plug-In Way
-
-
-
-
-## 3.1 Aperture BorderFX
-
-
+### 3.1 Aperture BorderFX
[Aperture BorderFX](http://web.mac.com/reinharduebel/BorderFX/) is an export plug-in for Aperture written by [Reinhard Uebel](http://web.mac.com/reinharduebel/) which was available long before Aperture 2. This plug-in allows you to add borders but also titles and even more to images as you export them. The plug-in is free but the author asks for donations. In short this plug-in gives you the ability to create your watermark (and also borders) inside of the Aperture environment. You set all your output preferences inside of the plug-in window so it doesn't use the Aperture export presets.
@@ -84,36 +61,24 @@ But it has some powerful features in terms of watermarking: It can read out some
![Aperture BorderFX](../media/aperture_borderfx.png)
-
-
This plug-in gives you a lot of flexibility about your watermark look without firing up a graphical editor like Photoshop. Also you're not leaving a non-destructive workflow with this plug-in since all the changes are just rendered on your exported images. With the combination of using the plug-in presets and the capability of opening several images at once with the plug-in you can have different watermarks on different images very quickly.
-
-
But you can't see your changes made in the plug-in on the images in your library. But Reinhard [stated in his blog](http://web.mac.com/reinharduebel/Site/Aperture_BorderFX_Blog/Entries/2008/8/26_BorderFX_Edit_Plug-in%2C_coming_soon..html) he's working on an edit plug-in based on the new Aperture 2.1 SDK where the changes will be rendered (destructively) in a psd file.
-
-
-## 3.2 Apple's Borders & Titles Plug-In
-
-
+### 3.2 Apple's Borders & Titles Plug-In
With the release of Aperture 2.1 and its Edit Plug-In architecture Apple also released some sample plug-ins which aren't included in Aperture (just the Dodge & Burn plug-in is). But you can easily [download it from Appleâs Developer Connection website without registration](http://developer.apple.com/samplecode/BordersAndTitles/index.html) for free.
![Borders & Titles](../media/aperture_bt.png)
-
-
This is also something I've covered earlier in my blog with a short article:
[Quick Tip: Borders & Titles Plug-In for Aperture](http://www.kremalicious.com/2008/06/quick-tip-borders-titles-plug-in-for-aperture/).
-
-
The functionality of this plug-in is rather rudimentary but it's indeed the quickest way if you just want to add some lines of text to one particular image. But adding the same text on several images can be very frustrating since you can't open more than one image at a time inside the plug-in window.
As with every Edit Plug-In every time you fire up an image with this plug-in Aperture will create a psd file and after hitting save in the plug-in your changes will be rendered destructively on this psd file. So there's no way to go back here without creating a new psd file and starting again.
-## 3.3 Impression For Aperture Plug-In
+### 3.3 Impression For Aperture Plug-In
[Impression](http://www.bluecrowbar.com/software/impressionaperture/) is an Aperture Edit Plug-In from [Blue Crowbar Software](http://www.bluecrowbar.com) released in Sept. 2009. The developer claims it's mainly targeted for those people who want to have a copy of their watermarked image within Aperture. Also there's a nice blog post by the developer lining out [why he thinks this plug-in beats Aperture's builtin watermarks.](http://www.bluecrowbar.com/blog/posts/impression-for-aperture.html)
@@ -121,7 +86,6 @@ As with every Edit Plug-In every time you fire up an image with this plug-in Ape
This plug-in is pretty powerful and probably the best choice for watermarking your images in Aperture through an Edit Plug-In workflow. Watermarking multiple photos at once is also possible and you can use existing PSD or PNG images as a watermark image as well as from a RTF text file. Apart from the functionality it also has a quite beautiful UI with the controls laying over your image.
-
## 4. Conclusion
So you see there are quite a few possibilities for adding watermarks in your Aperture workflow although the most comfortable solution, a brick in the adjustment panel for adding text or watermark images non-destructively isn't there (yet?).
diff --git a/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md b/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md
index 57f1828d..b195d521 100644
--- a/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md
+++ b/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md
@@ -26,13 +26,13 @@ Before Wordpress 2.7 I achieved a custom gravatar image on kremalicious.com with
```php
/images/gravatar.png'
- );
- }
+ $comment,
+ $size = '70',
+ $default = '/images/gravatar.png'
+ );
+ }
?>
```
@@ -42,28 +42,23 @@ But we can use the functions.php file in your template directory and add some li
```php
```
-
-
Just set a name for your custom Gravatar image to show up beside the image in the Wordpress back-end. The code above assumes you have your custom default gravatar image inside a folder called images inside your template directory. Change it to your environment if neccessary. After that a new entry in the Wordpress backend under Settings > Discussions will appear with the custom image specified:
![custom gravatar](../media/custom-gravatar.jpg)
And you can adjust the displayed size of the gravatar image by adding a parameter to `` function in your comments.php file:
-
```php
70, )); ?>
```
-
-
And that's it. As you would guess I pretty much prefer this way to adjust the gravatar image. But you're free to [write your custom comment callback function](http://clarktech.no-ip.com/wordpress/wordpress-27-comment-callback-function) to exactly define the output of the comments. But it's definitely too much if you just want to change the gravatar stuff.
diff --git a/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md b/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md
index 193e3263..78681fd8 100644
--- a/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md
+++ b/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md
@@ -23,14 +23,14 @@ Let's start by looking at the code to achieve styling of author comments prior t
```php
- item" id="comment-">
- other comments code
-
+ comment_author_url == "http://www.kremalicious.com")
+ echo 'author';
+ else echo $oddcomment;
+ ?>
+ item" id="comment-">
+ other comments code
+
```
So with some php stuff we were able to check for the author name or, as I did it, for the URL of the comment author. If one of these were detected Wordpress added a new class 'author' to the `
` tag which we were able to style by adding a li.author to our css file:
diff --git a/content/posts/2009-01-05-the-mac-in-futurama.md b/content/posts/2009-01-05-the-mac-in-futurama.md
index ee6b2f20..91eace8b 100644
--- a/content/posts/2009-01-05-the-mac-in-futurama.md
+++ b/content/posts/2009-01-05-the-mac-in-futurama.md
@@ -25,12 +25,12 @@ _All screens (C) 1999 by Twentieth Century Fox Film Corp._
## Season 1
-## 1ACV02 - The Series Has Landed
+### 1ACV02 - The Series Has Landed
The moon farmer introduces his three robot daughters. One of them is named "Daisy May 128k" as a reference to the first [Macintosh 128k](http://en.wikipedia.org/wiki/Macintosh_128K).
![Daisy May 128k](../media/futurama-mac-01.png)
-## 1ACV05 - Fear Of A Bot Planet
+### 1ACV05 - Fear Of A Bot Planet
Indeed the episode with the most Mac references. The Planet Express crew have to deliver a package to a planet settled by separatist robots. And guess what their favorite OS is?
@@ -45,74 +45,74 @@ But the robots have some cool computer voodoo to get him back judging without th
This one can be just coincidence or no Mac reference at all. The colors of the eyes and the mouths of the robot elders look pretty familiar to the [iMac G3 color flavors](http://www.apple.com/pr/photos/iMac/imaccolors.html) or the [original iBook colors](http://www.theapplecollection.com/iMac/iBook2.html) although there never was a yellow iMac (or iBook). ![Robot elders iBook colors](../media/futurama-mac-05.png)
-## 1ACV10 A Flight to Remember
+### 1ACV10 A Flight to Remember
The robot guy on the bar mixes sad Bender a drink out of JĂ€germeister and some Pennzoil product. He is named iZac as a reference to the Apple iMac or more generally for the "i"-brand. Beside that iZac is written in kind of the same font (variant of [ITC Garamond](http://new.myfonts.com/fonts/itc/garamond/), thanks [Schoschie](http://www.kremalicious.com/2009/01/the-mac-in-futurama/#comment-48831)) as in [Apple's Think Different tagline and campaigns](http://web.archive.org/web/20010228171255/www.apple.com/thinkdifferent/). Furthermore (but non-Mac related) iZac is also a reference to Isaac the bartender from the TV series love boat from 1977, as ["yeah" pointed out in the comments](http://www.kremalicious.com/2009/01/the-mac-in-futurama/#comment-37416). Thanks yeah!
![iZac](../media/futurama-mac-06.png)
-## 1ACV11 Mars University
+### 1ACV11 Mars University
The Robot House fraternity is spying at a Macintosh 128k in the girls bed rooms. ![spying at a Macintosh 128k](../media/futurama-mac-07.png)
-## 1ACV12 - When Aliens Attack
+### 1ACV12 - When Aliens Attack
The crew searches the Internet on a Mac OS system for facts about the TV series Single Female Lawyer. ![Single Female Lawyer](../media/futurama-mac-08.png)
## Season 2
-## 2ACV09 A Bicyclops Built For Two
+### 2ACV09 A Bicyclops Built For Two
Bender choses a disguise while being in the Internet. He does this with a Mac style menu. ![Internet disguise](../media/futurama-mac-09.png)
Alcasar submits Leela a video message which is played on Leelas display in a classic Mac OS styled window. ![Alcasar](../media/futurama-mac-10.png)
-## 2ACV15 The Problem With Popplers
+### 2ACV15 The Problem With Popplers
Hermes finds the name Popplers while searching the Internet on an iBook G3 with a weird antenna on top of it. ![Searching Popplers](../media/futurama-mac-11.png)
-## 2ACV17 War Is The H-Word
+### 2ACV17 War Is The H-Word
Earth attacks the balls on Spheron 1 and a robot surgeon named iHawk operates the injured earthlings with a Martini in his hands. ![iHawk](../media/futurama-mac-12.png)
## Season 3
-## 3ACV04 The Luck Of The Fryrish
+### 3ACV04 The Luck Of The Fryrish
Again the crew searches the Internet with a classic Mac OS interface. ![Internet Mac OS style](../media/futurama-mac-13.png)
-## 3ACV06 Bendless Love
+### 3ACV06 Bendless Love
The Bending School for robots seems to be running on Mac OS because it uses a Mac OS interface progress bar. ![Mac OS Bending School](../media/futurama-mac-14.png)
-## 3ACV15 I Dated A Robot
+### 3ACV15 I Dated A Robot
Sure enough, Prof. Farnsworth's blank robots are Mac formatted.
![Internet Mac OS style](../media/futurama-mac-15.png)
Billy starring the propaganda movie "I dated a robot!" downloads his Monroe-Bot with a classic Macintosh 128k. ![Downloading Monroe-Bot](../media/futurama-mac-16.png)
-## Futurama 3ACV21 Future Stock
+### Futurama 3ACV21 Future Stock
Planet Express is under new management of "that guy" from the 1980s. He shows the crew a new ad which is a parody of [Apple's legendary 1984 ad](http://www.youtube.com/watch?v=R706isyDrqI). ![1984 ad parody](../media/futurama-mac-19.png)
## Season 4
-## 4ACV06 Bender Should Not Be Allowed On TV
+### 4ACV06 Bender Should Not Be Allowed On TV
The president of the TV network (who seems to be just a plain non-Mac laptop), has some sort of QuickTime Player running on him.
![President of Fox](../media/futurama-mac-17.png)
-## 4ACV08 Crimes Of The Hot
+### 4ACV08 Crimes Of The Hot
iZac again. ![iZac on Galapagos Princess](../media/futurama-mac-18.png)
## Season 5
-## 5ACV01 Bender's Big Score Part 1
+### 5ACV01 Bender's Big Score Part 1
Bender is infected by the Scammers' obedience virus called iObey. ![iObey Obedience Virus](../media/futurama-mac-20.png)
-## 5ACV15 Into The Wild Green Yonder Part 4
+### 5ACV15 Into The Wild Green Yonder Part 4
The audience in the violet dwarf star blowup or Encyclopod (or so) birth scene consists of many Futurama characters from all the Futurama series. If you look closely you can spot iZac again (upper left). In this screenshot there's also Matt Groening's head in the audience. ![iZac in audience](../media/futurama-mac-21.png)
diff --git a/content/posts/2009-02-01-portal-thingy.md b/content/posts/2009-02-01-portal-thingy.md
index 784cb3fe..747b37d7 100644
--- a/content/posts/2009-02-01-portal-thingy.md
+++ b/content/posts/2009-02-01-portal-thingy.md
@@ -17,12 +17,8 @@ As you can read in the sliding Colophon at the bottom of the site, it is written
For your learning pleasure I've let my comments in my [jQuery file](http://matthiaskretschmann.com/js/effects.js) intact and you'll also find the sources for code-parts where I didn't wanted to invent the wheel again. Although slightly modified by me, this includes the code for the vCard popup bubble when hovering over the header ([by jqueryfordesigner.com](http://jqueryfordesigners.com/coda-popup-bubbles/)) and the text-resizing function ([from dev-tips.com](http://dev-tips.com/featured/jquery-tip-font-resizing-with-animation-effects)) .
-
-
## Browser Compatibility
-
-
But the sad thing I had to learn was that Internet Explorer 7 and Google Chrome have heavy problems with transparent images (PNG24 with alpha transparency to be exactly) which are faded in or out with JavaScript (or just jQuery?). They look great when just there but during fade they have a big bold border. Once the fade is done the border disappears. Weird!
That's why some eye candy will not be displayed to Internet Explorer users (no big light spot and no hover effect on the header) and I hope Google will fix this soon. And following my own tradition Internet Explorer 6 and below users will get a big warning banner on top of the site.
@@ -31,8 +27,6 @@ For all other modern browsers beside those mentioned above the site should work
If you find a bug or have any additions feel free to [contact me](/contact), post them in the comments or [throw me a note on Twitter](https://twitter.com/kremalicious).
-
-
## Inspiration
With the concept of this little site I've kinda jumped on the bandwagon which obviously was started by [Tim van Damme's excellent small site under timvandamme.com](http://timvandamme.com/).
diff --git a/content/posts/2012-06-27-typography-window.md b/content/posts/2012-06-27-typography-window.md
index 56b82c86..26fa6f7a 100644
--- a/content/posts/2012-06-27-typography-window.md
+++ b/content/posts/2012-06-27-typography-window.md
@@ -9,4 +9,3 @@ date: 2012-06-27 01:29:13+00:00
---
from Instagram
-
diff --git a/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md b/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md
index 3309dc64..ed4fd1df 100644
--- a/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md
+++ b/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md
@@ -20,9 +20,9 @@ Windows 8 and Internet Explorer 10 make it possible to pin your site to the Metr
There was a great [post](https://github.com/h5bp/html5-boilerplate/issues/1136) about that in the H5BP issues section and Microsoft has a [full explanation](https://blogs.msdn.com/b/ie/archive/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8.aspx). It all comes down to this:
- * create a 144x144px image with your logo/icon filling the whole canvas and a transparent background
- * add two `meta` tags in the `head` of your site defining the image path and optionally the tile color
- * as noted in the [issue post](https://github.com/h5bp/html5-boilerplate/issues/1136), the image must be saved as a transparent 32bit PNG ("24bit" in Photoshop's Save For Web dialogue) without running it through image optimisers like [ImageOptim](http://imageoptim.com)
+* create a 144x144px image with your logo/icon filling the whole canvas and a transparent background
+* add two `meta` tags in the `head` of your site defining the image path and optionally the tile color
+* as noted in the [issue post](https://github.com/h5bp/html5-boilerplate/issues/1136), the image must be saved as a transparent 32bit PNG ("24bit" in Photoshop's Save For Web dialogue) without running it through image optimisers like [ImageOptim](http://imageoptim.com)
While the size is the same as for the iPad 3 homescreen icon, I strongly suggest not using the apple-touch-icon for this. In fact, it might be best not using a full color image at all. Using a white monochrome version of your logo or icon will make your site's tile blend in perfectly with the default Metro UI system tiles.
@@ -35,16 +35,16 @@ As an example, I just [pushed](https://github.com/kremalicious/kremalicious2/com
When browsing the site in Windows 8/Internet Explorer 10, users have the choice of pinning it to the start screen:
-![](../media/Windows-8-Metro-tile-kremalicious.png)
+![Windows-8-Metro-tile](../media/Windows-8-Metro-tile-kremalicious.png)
And this is how it looks like on the Windows 8 start screen:
-![](../media/Windows-8-Metro-tile-kremalicious-in-action.png)
+![Windows-8-Metro-tile-kremalicious-in-action](../media/Windows-8-Metro-tile-kremalicious-in-action.png)
As you can see, pinned sites always get a smaller, square tile. Sadly, the image somehow still gets resized which makes it really hard to create pixel perfect icons for it. It's also not possible to horizontally center the image within it's tile, placing the logo at the bottom of the image file ended up the same. That's because the title can fill two rows.
And the image is only used on the start screen but not on the All apps screen where your site will get the default IE logo, at least with the defined background color:
-![](../media/Windows-8-Metro-tile-kremalicious-all-apps.png)
+![Windows-8-Metro-tile-kremalicious-all-apps](../media/Windows-8-Metro-tile-kremalicious-all-apps.png)
The described behavior and screenshots are from the Windows 8 Consumer Preview and may change. I will update this article if there's new stuff in the final version.
diff --git a/content/posts/2012-08-07-projectpurple.md b/content/posts/2012-08-07-projectpurple.md
index cd86e98f..924cc522 100644
--- a/content/posts/2012-08-07-projectpurple.md
+++ b/content/posts/2012-08-07-projectpurple.md
@@ -23,7 +23,7 @@ It [has been revealed](http://www.theverge.com/2012/8/3/3218846/schiller-forstal
> Forstall said that "on the front door of the Purple Dorm we put a sign up that said 'Fight Club'... because the first rule of that project was to not talk about it outside those doors."
-![](../media/project-purple-nexus-kremalicious.png)
+![project purple](../media/project-purple-nexus-kremalicious.png)
The full size I designed the wallpaper in is 3200x2048px. I don't know why Apple uses 3200px as width for the default wallpapers in Mountain Lion but it seems a good width for now. And a height of 2048px makes this big size perfectly usable for the iPad 3 too.
@@ -37,10 +37,10 @@ Download the whole package with all the sizes included or grab the individual on
Download zip
- * [Desktop/rMBP/iPad 3 (3200x2048)](../media/project-purple-kremalicious.png)
- * [Laptop/Nexus 7/Galaxy Nexus (1280x800)](../media/project-purple-nexus-kremalicious.png)
- * [iPad (1024x1024)](../media/project-purple-ipad-kremalicious.png)
- * [iPhone (640x960)](../media/project-purple-iphone4-kremalicious.png)
+* [Desktop/rMBP/iPad 3 (3200x2048)](../media/project-purple-kremalicious.png)
+* [Laptop/Nexus 7/Galaxy Nexus (1280x800)](../media/project-purple-nexus-kremalicious.png)
+* [iPad (1024x1024)](../media/project-purple-ipad-kremalicious.png)
+* [iPhone (640x960)](../media/project-purple-iphone4-kremalicious.png)
## License
diff --git a/content/posts/2012-09-26-designing-with-code.md b/content/posts/2012-09-26-designing-with-code.md
index 9662b33a..b5fea5db 100644
--- a/content/posts/2012-09-26-designing-with-code.md
+++ b/content/posts/2012-09-26-designing-with-code.md
@@ -14,7 +14,3 @@ tags:
I try to repeat that at least 2 times a day:
> The problem with Photoshop is that whatâs being created is actually a fiction. It somewhat resembles what the final product might look like, but itâs not real. Layout and typography decisions are made that often donât translate accurately to HTML. We spend hours designing for a medium thatâs interactive and responsive, but we start by producing mockups that are static and inflexible. If great design is not only aesthetics but also how it works, then itâs time to make development part of the creative process.
-
-
-
-
diff --git a/content/posts/2013-07-13-enterprise-software-sucks.md b/content/posts/2013-07-13-enterprise-software-sucks.md
index 66db50a7..c1da9099 100644
--- a/content/posts/2013-07-13-enterprise-software-sucks.md
+++ b/content/posts/2013-07-13-enterprise-software-sucks.md
@@ -13,7 +13,7 @@ tags:
When asking people about printing thereâs one common ground â namely, that it sucks. This sentiment comes from the experience with connecting printers with the devices to print, and the act of printing itself with a plethora of print settings to chose from.
- This article originally appeared in the ezeep blog.
+ This article originally appeared in the ezeep blog.
As Peter Sikking put it wonderfully in his [8 rules of printing interaction](http://blog.mmiworks.net/2008/07/to-istanbul-via-tokyo.html): printing does not exist. Users donât want to be bothered about the process between thinking of printing and the actual printout. But when they deep dive into the process everyone does something else so âprinting turns out to have as many use cases as there are users.â
diff --git a/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md b/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md
index ddc111ad..61fbfd77 100644
--- a/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md
+++ b/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md
@@ -5,16 +5,17 @@ title: 'Stealing Time: How Technology Can Hurt or Harm Our Inner State'
image: ../media/post-time.png
author: Matthias Kretschmann
+date: 2013-08-07 03:27:25+00:00
+
tags:
- design
- ezeep
---
-
The promise of modern technology has always been: use it and youâll have more time for the important stuff in your life. As it turned out, itâs quite the opposite. Thereâre a lot of socioeconomic reasons for this development but, to some degree, itâs caused by the way digital services today are designed from the very beginning. Those services are stealing time by design, tricking us into thinking the stuff we do on there is somehow important.
- This article originally appeared in the ezeep blog.
+ This article originally appeared in the ezeep blog.
## Use It All Day, All Night
diff --git a/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md b/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md
index d9a5c815..f3f936b3 100644
--- a/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md
+++ b/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md
@@ -24,11 +24,11 @@ I'm using macOS High Sierra (10.13) for the following instructions but it should
## Table of Contents
- - [Tor Browser](#tor-browser)
- - [Install Tor](#install-tor)
- - [Set network proxy settings via System Preferences](#set-network-proxy-settings-via-system-preferences)
- - [All in one go: start Tor & set network proxy settings automatically](#all-in-one-go-start-tor-set-network-proxy-settings-automatically)
- - [Non-standard apps](#non-standard-apps)
+- [Tor Browser](#tor-browser)
+- [Install Tor](#install-tor)
+- [Set network proxy settings via System Preferences](#set-network-proxy-settings-via-system-preferences)
+- [All in one go: start Tor & set network proxy settings automatically](#all-in-one-go-start-tor-set-network-proxy-settings-automatically)
+- [Non-standard apps](#non-standard-apps)
---
diff --git a/content/posts/2015-09-13-css-app-store-badges.md b/content/posts/2015-09-13-css-app-store-badges.md
index b8c542e9..b36b99f4 100644
--- a/content/posts/2015-09-13-css-app-store-badges.md
+++ b/content/posts/2015-09-13-css-app-store-badges.md
@@ -23,8 +23,7 @@ The badges provided by all app store providers just don't play well together wit
Codepen
-
-# Styling
+## Styling
Letâs be honest, Google, Amazon & Microsoft created just slight variations of the badge style established by Appleâs App Store badge. So itâs only natural to unify all badges by leaning more to Appleâs style in terms of typography. Apple uses Myriad Pro in their original badge which isnât available for free web usage.
@@ -40,7 +39,7 @@ The first three values are grabbing the system installed version on OS X & iOS,
Because of varying copy resulting in different badge widths, the only way to make them unified when they are stacked on top of each other, like in a mobile layout, was to make all of them the width of the widest one. This is [defined as a variable in the Stylus source](https://github.com/kremalicious/appstorebadges/blob/master/src/styl/_variables.styl#L12) and set as `min-height` so the badges can grow, like with bigger font sizes or because of localization.
-# Usage
+## Usage
Install with npm:
@@ -60,7 +59,7 @@ Or just directly link to the css file in the [GitHub repo](https://github.com/kr
```
-## HTML Markup
+### HTML Markup
This is the basic markup for all badges:
@@ -76,7 +75,7 @@ Only the icon and the copy change for each badge. To be able to style modify all
For maximum browser compatibility and simplicity, I just inlined the icon assets in all markup blocks. In a production environment you should create a sprite from them, reference them with the SVG `use` element and polyfill with [svg4everybody](https://github.com/jonathantneal/svg4everybody).
-## Size Variations
+### Size Variations
Just drop those modifier classes on the `badge` base element:
diff --git a/package.json b/package.json
index a8a77613..ee4e17cd 100644
--- a/package.json
+++ b/package.json
@@ -27,9 +27,9 @@
"dms2dec": "^1.1.0",
"fast-exif": "^1.0.1",
"fraction.js": "^4.0.9",
- "gatsby": "^2.0.11",
+ "gatsby": "^2.0.12",
"gatsby-awesome-pagination": "^0.3.1",
- "gatsby-image": "^2.0.10",
+ "gatsby-image": "^2.0.12",
"gatsby-plugin-catch-links": "^2.0.3",
"gatsby-plugin-favicon": "^3.1.4",
"gatsby-plugin-feed": "^2.0.5",
@@ -50,7 +50,7 @@
"gatsby-remark-smartypants": "^2.0.5",
"gatsby-source-filesystem": "^2.0.1",
"gatsby-transformer-remark": "^2.1.4",
- "gatsby-transformer-sharp": "^2.1.2",
+ "gatsby-transformer-sharp": "^2.1.3",
"gatsby-transformer-yaml": "^2.1.1",
"graphql": "^0.13.2",
"intersection-observer": "^0.5.0",
@@ -65,7 +65,7 @@
"react-dom": "^16.5.2",
"react-helmet": "^5.2.0",
"react-modal": "^3.6.1",
- "react-pose": "^3.3.4",
+ "react-pose": "^3.3.6",
"react-qr-svg": "^2.1.0",
"react-time": "^4.3.0",
"react-transition-group": "^2.5.0",
@@ -75,7 +75,7 @@
"@babel/node": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"babel-eslint": "^10.0.1",
- "eslint": "^5.6.0",
+ "eslint": "^5.6.1",
"eslint-config-prettier": "^3.1.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-graphql": "^2.1.1",
diff --git a/src/components/atoms/PostContent.jsx b/src/components/atoms/PostContent.jsx
index 79583196..9b3bf3c8 100644
--- a/src/components/atoms/PostContent.jsx
+++ b/src/components/atoms/PostContent.jsx
@@ -1,6 +1,5 @@
import React from 'react'
import PropTypes from 'prop-types'
-import styles from './PostContent.module.scss'
// Remove lead paragraph from content
const PostContent = ({ post }) => {
@@ -18,12 +17,7 @@ const PostContent = ({ post }) => {
}
}
- return (
-
- )
+ return
}
PostContent.propTypes = {
diff --git a/src/components/atoms/PostContent.module.scss b/src/components/atoms/PostContent.module.scss
deleted file mode 100644
index 17c07807..00000000
--- a/src/components/atoms/PostContent.module.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-@import 'variables';
-@import 'mixins';
-
-.content {
- h1,
- h2 {
- @include heading-band();
- }
-
- h1 {
- font-size: $font-size-h2;
- }
-
- h2 {
- font-size: $font-size-h3;
- }
-
- h3 {
- font-size: $font-size-h4;
- }
-
- h4 {
- font-size: $font-size-h5;
- }
-
- p:last-child {
- margin-bottom: 0;
- }
-
- .gatsby-resp-image-figure,
- .gatsby-resp-image-wrapper {
- margin-bottom: $spacer;
- }
-
- figcaption {
- font-size: $font-size-small;
- color: $brand-grey;
- font-style: italic;
- text-align: center;
- margin-top: -$spacer / 2;
- }
-
- .anchor {
- margin-top: $spacer / 3;
- }
-
- // Quotes
- /////////////////////////////////////
-
- q {
- font-style: italic;
- }
-
- cite {
- font-style: normal;
- text-transform: uppercase;
- }
-
- // stylelint-disable no-descending-specificity
- blockquote,
- blockquote > p {
- font-style: italic;
- color: $brand-grey;
- }
- // stylelint-enable no-descending-specificity
-
- blockquote {
- margin: 0 0 $spacer;
- position: relative;
- padding-left: $spacer * 1.5;
-
- // quotation marks
- &::before {
- content: 'â';
- font-size: 300%;
- color: lighten($brand-grey-light, 20%);
- position: absolute;
- left: -10px;
- top: -20px;
-
- @media (min-width: $screen-xs) {
- left: 0;
- }
-
- @media (min-width: $screen-lg) {
- top: -30px;
- }
- }
- }
-}
diff --git a/src/components/molecules/Featured.module.scss b/src/components/molecules/Featured.module.scss
index d77e4241..1d6b8bf6 100644
--- a/src/components/molecules/Featured.module.scss
+++ b/src/components/molecules/Featured.module.scss
@@ -5,17 +5,22 @@
@include breakoutviewport;
@include divider;
- margin-bottom: 0;
display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- margin-top: $spacer * 2;
- padding-bottom: $spacer * 2;
+ margin-top: $spacer * $line-height;
+ padding-left: $spacer / 2;
+ padding-right: $spacer / 2;
+ margin-bottom: -($spacer);
+ padding-bottom: $spacer * 3;
+
+ @media (min-width: $screen-md) {
+ padding-left: 0;
+ padding-right: 0;
+ }
}
.featuredTitle {
transition: .1s ease-out;
- font-size: $font-size-base;
+ font-size: $font-size-mini;
margin: 0;
position: absolute;
top: 25%;
@@ -28,12 +33,20 @@
left: 0;
opacity: 0;
transform: translate3d(0, -20px, 0);
+
+ @media (min-width: $screen-sm) {
+ font-size: $font-size-base;
+ }
}
.featuredItem {
- flex: 0 0 31%;
+ flex: 1;
position: relative;
- margin-bottom: 3%;
+ margin-left: $spacer / 2;
+
+ &:first-child {
+ margin-left: 0;
+ }
a {
> div {
diff --git a/src/styles/_buttons.scss b/src/styles/_buttons.scss
index e41f890e..fc45ff27 100644
--- a/src/styles/_buttons.scss
+++ b/src/styles/_buttons.scss
@@ -12,7 +12,7 @@ a.btn {
background-image: none; // Reset unusual Firefox-on-Android default style
white-space: nowrap;
user-select: none;
- transition: all .2s ease-in-out;
+ transition: .2s ease-in-out;
// Default Button
@include button-size(
diff --git a/src/styles/_content.scss b/src/styles/_content.scss
new file mode 100644
index 00000000..ad0c6cd8
--- /dev/null
+++ b/src/styles/_content.scss
@@ -0,0 +1,8 @@
+.gatsby-resp-image-figure,
+.gatsby-resp-image-wrapper {
+ margin-bottom: $spacer;
+}
+
+.anchor {
+ margin-top: $spacer / 3;
+}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index da5f2a75..f5aebb9b 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -48,7 +48,7 @@ $font-size-mini: .7rem;
$font-size-h1: 2.5rem;
$font-size-h2: 2rem;
-$font-size-h3: 1.75rem;
+$font-size-h3: 1.5rem;
$font-size-h4: $font-size-large;
$font-size-h5: $font-size-base;
$font-size-h6: $font-size-small;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 5b3e04e0..9f5957dc 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -51,6 +51,10 @@ ol {
margin: 0 0 $spacer;
}
+p:last-child {
+ margin-bottom: 0;
+}
+
// Reset fonts for relevant elements
/////////////////////////////////////
@@ -82,7 +86,7 @@ button {
h1,
h2 {
- margin-top: $spacer * 2;
+ margin-top: $spacer * $line-height;
margin-bottom: $spacer * 2;
}
@@ -90,7 +94,7 @@ h3,
h4,
h5,
h6 {
- margin-top: $spacer;
+ margin-top: $spacer * $line-height;
margin-bottom: $spacer;
}
@@ -103,6 +107,8 @@ h1 {
}
h2 {
+ @include heading-band();
+
font-size: $font-size-h3;
@media (min-width: $screen-xs) {
@@ -203,6 +209,14 @@ img {
vertical-align: middle;
}
+figcaption {
+ font-size: $font-size-small;
+ color: $brand-grey;
+ font-style: italic;
+ text-align: center;
+ margin-top: -($spacer / $line-height);
+}
+
// Lists
/////////////////////////////////////
@@ -293,6 +307,50 @@ hr {
@include divider();
}
+// Quotes
+/////////////////////////////////////
+
+q {
+ font-style: italic;
+}
+
+cite {
+ font-style: normal;
+ text-transform: uppercase;
+}
+
+// stylelint-disable no-descending-specificity
+blockquote,
+blockquote > p {
+ font-style: italic;
+ color: $brand-grey;
+}
+// stylelint-enable no-descending-specificity
+
+blockquote {
+ margin: 0 0 $spacer;
+ position: relative;
+ padding-left: $spacer * 1.5;
+
+ // quotation marks
+ &::before {
+ content: 'â';
+ font-size: 300%;
+ color: lighten($brand-grey-light, 20%);
+ position: absolute;
+ left: -10px;
+ top: -20px;
+
+ @media (min-width: $screen-xs) {
+ left: 0;
+ }
+
+ @media (min-width: $screen-lg) {
+ top: -30px;
+ }
+ }
+}
+
// Selection
/////////////////////////////////////
@@ -312,3 +370,4 @@ hr {
@import 'code';
@import 'buttons';
@import 'alerts';
+@import 'content';