mirror of
https://github.com/kremalicious/blog.git
synced 2024-12-22 17:23:50 +01:00
post fixes
This commit is contained in:
parent
080970313e
commit
fef0c821ca
GPG Key ID:
606EEEF3C479A91F
@ -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
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
15
README.md
15
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
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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
|
||||
```
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
[](../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?
|
||||
|
||||
[](../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
|
||||
|
||||
[](../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.
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
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
|
||||
|
||||
[](../media/apertureimport_automator.png)
|
||||
|
||||
# 2. Save it as a plug-in for Image Capture
|
||||
## 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
|
||||
## 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.
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
[](../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
|
||||
|
||||
[](../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
|
||||
|
||||
[](../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
|
||||
|
||||
[](../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
|
||||
|
||||
[](../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
|
||||
|
||||
[](../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
|
||||
|
||||
[](../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
|
||||
|
||||
[](../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
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
||||
[](../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
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
||||
[](../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
|
||||
|
||||
[](../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
|
||||
|
||||
[](../media/raw20.png)
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ coinhive: true
|
||||
|
||||
<!-- more -->
|
||||
|
||||
# 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
|
||||
|
||||
[](../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
|
||||
|
||||
[](../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.
|
||||
|
||||
|
||||
|
||||
# Kekus LensFix CI
|
||||
## Kekus LensFix CI
|
||||
|
||||
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.
|
||||
|
||||
[](../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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
[](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.
|
||||
|
||||
[](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)
|
||||
|
||||
|
||||
@ -25,5 +25,3 @@ You can get the wallpaper by browsing [my Goodies section](http://www.kremalicio
|
||||
<p class="content-download">
|
||||
<a class="icon-download" href="../media/chives_by_kremalicious.zip">Download Chives Wallpaper</a>
|
||||
</p>
|
||||
|
||||
Beside that, this image is [available for print on deviantArt in various sizes](http://www.deviantart.com/print/3347544/).
|
||||
|
||||
@ -28,11 +28,11 @@ Either just download the icons or read the exciting story about the First Photog
|
||||
|
||||
|
||||
|
||||
# The story behind these icons
|
||||
## The story behind these icons
|
||||
|
||||
There's a fascinating story behind these icons which is nothing more than the story of the invention of photography. Grab yourself a cup of coffee or tea and sit back while reading this story. Of course, if you're bored already just grab the download package further down this page.
|
||||
|
||||
## Nicéphore Niépce and The First Photograph
|
||||
### Nicéphore Niépce and The First Photograph
|
||||
|
||||
<img src="../media/nicephore-niepce.jpg" alt="Nicéphore Niépce, ca. 1795" title="Nicéphore Niépce, ca. 1795">
|
||||
|
||||
@ -62,7 +62,7 @@ Finally let me say that this is just a brief description of Niépce's discoverie
|
||||
|
||||
Now switch back from historical learning to Icon Design.
|
||||
|
||||
## References in the icons
|
||||
### References in the icons
|
||||
|
||||
The Camera Obscura seen in my icon set is a drawing of the replica of Niépce's Camera Obscura which you can find in Chalon-sur-Saône, France in Niépce's house. The Maison Nicéphore Niépce is a museum today, where they try to reproduce Niépce's procedures. And this isn't as easy as it seems with our shiny new 21st century technology.
|
||||
|
||||
@ -70,7 +70,7 @@ The photography you can find in the iPhoto icon is the First Photograph "View fr
|
||||
|
||||
And finally, if you know the Aperture and iPhoto icons then you may have noticed the references to these applications too (just compare the lenses).
|
||||
|
||||
## Sources and more informations on Nicéphore Niépce
|
||||
### Sources and more informations on Nicéphore Niépce
|
||||
|
||||
[Maison Nicéphore Niépce](http://www.niepce.com/)
|
||||
The home of Nicéphore Niépce in Saint-Loup-de-Varennes, France which is a museum today. It houses the replica of Niépce's Camera Obscura which was the inspiration for these icons and it was the view out of this house which became the First Photograph/Heliography.
|
||||
@ -90,7 +90,7 @@ Massive 19th and 20th century text archive of The Daguerreian Society about the
|
||||
[Daguerre and the Invention of Photography](http://www.metmuseum.org/toah/hd/dagu/hd_dagu.htm)
|
||||
Brief description of Daguerres role in the invention of photography process by The Metropolitan Museum of Art
|
||||
|
||||
# Download and enjoy
|
||||
## Download and enjoy
|
||||
|
||||
This icon package was exclusively announced first on [MacThemes](http://macthemes2.net) and you can download it from the [Goodies section on this website](/goodies/) or directly via this link:
|
||||
|
||||
@ -100,7 +100,7 @@ This icon package was exclusively announced first on [MacThemes](http://mactheme
|
||||
|
||||
In addition to these icons you can download the [associated wallpapers for your desktop or your iPhone](http://www.kremalicious.com/2008/06/new-goodie-niepces-camera-obscura-wallpaper-pack/).
|
||||
|
||||
# How to use these icons
|
||||
## How to use these icons
|
||||
|
||||
These desktop icons are free for your personal and non-commercial use. They were intended to be replacement icons for Apple's Aperture and iPhoto applications. Of course, you can use it for every other application instead or use the folder icon for your picture collection.
|
||||
|
||||
@ -108,12 +108,12 @@ The easiest way to change and apply icons in Mac OS X involves the awesome appli
|
||||
|
||||
To replace the icon of either an application, file or folder on Mac OS X simply ctrl + click (or right-click) on the desired application, file or folder and click "Get Info". Leave the Get Info dialog open and browse to an icon from this package inside the Mac folder. There you have three folders with the different icons applied to them. Now simply ctrl + click (or right-click) on the desired folder with the icon applied to it and click "Get Info". Now click on the icon in the upper left corner so it has a subtle shine around it noticing you it's selected. Now copy the icon by hitting command + c or choose Edit > Copy from the menubar. Make the dialog active we have opened in the first step by clicking on it and select the image in the upper left corner and hit command + v or choose Edit > Paste from the menubar. Now the desired icon should have been applied to the new folder.
|
||||
|
||||
# Legal
|
||||
## Legal
|
||||
|
||||
These desktop icons are free for you personal and non-commercial use. All other usage of this copyrighted material [require my written permission](/about/).
|
||||
|
||||
# Final Words
|
||||
## Final Words
|
||||
|
||||
<a href="http://krlc.us/givecoffee"></a>
|
||||
|
||||
Congratulations! You finally arrived at the end of my article. There's a good chance that your coffee or tea cup is now empty. But before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-](https://kremalicious.com/feed/) or <a href="http://krlc.us/givecoffee">buy me my next coffee</a>.
|
||||
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](https://kremalicious.com/feed/) or <a href="http://krlc.us/givecoffee">buy me my next coffee</a>.
|
||||
|
||||
@ -28,6 +28,6 @@ All Wallpapers are using a custom designed background which imitates the look of
|
||||
|
||||
Here are the details:
|
||||
|
||||
* Aperture and iPhoto styled Camera Obscura as it was used by Nicéphore Niépce.
|
||||
* Including one desktop version with the Aperture styled Camera Obscura and one with the iPhoto styled. Both come in 1920x1200 for widescreen displays and 1600x1200 for normal displays
|
||||
* Including 2 different crops for the iPhone (480x320).
|
||||
* Aperture and iPhoto styled Camera Obscura as it was used by Nicéphore Niépce.
|
||||
* Including one desktop version with the Aperture styled Camera Obscura and one with the iPhoto styled. Both come in 1920x1200 for widescreen displays and 1600x1200 for normal displays
|
||||
* Including 2 different crops for the iPhone (480x320).
|
||||
|
||||
@ -48,7 +48,7 @@ Here are the steps involved in setting up your Ubuntu box as a Mac file server:
|
||||
- [8. Downloading and using the Server Display Icons](#8-downloading-and-using-the-server-display-icons)
|
||||
- [9. Translations Of This Article](#9-translations-of-this-article)
|
||||
|
||||
# 1. Modify and install Netatalk
|
||||
## 1. Modify and install Netatalk
|
||||
|
||||
[Netatalk](http://netatalk.sourceforge.net/) is the Open Source implementation of AFP. Mac OS X requires encryption to work properly but the standard package of netatalk provided in the Ubuntu repositories doesn't include this feature. So we have to build our own netatalk package from the sources with the encryption feature enabled.
|
||||
|
||||
@ -93,7 +93,7 @@ echo "netatalk hold" | sudo dpkg --set-selections
|
||||
|
||||
Now you have successfully build and installed your custom Netatalk package which now has support for encrypted logins. Now let's configure the whole thing.
|
||||
|
||||
# 2. Configure Netatalk
|
||||
## 2. Configure Netatalk
|
||||
|
||||
First you should deactivate services provided by Netatalk which are not needed if you just want to use your Ubuntu box for file sharing. This will speed up the response and startup time of Netatalk dramatically. For instance Netatalk starts the old AppleTalk protocol by default which is just needed for pre OS X systems. So we're going to use the graphical editor vi for stopping unneeded services:
|
||||
|
||||
@ -128,7 +128,7 @@ Scroll to the very bottom of the document and add this to the bottom (replace th
|
||||
|
||||
Press Ctrl + S to save the document or choose File > Save.
|
||||
|
||||
# 3. Configure shared Volumes
|
||||
## 3. Configure shared Volumes
|
||||
|
||||
Now we have to tell the afpd daemon what Volumes to share. This is defined in the AppleVolumes.default file inside /etc/netatalk/. The following line will open this file in vim with superuser privileges (required for saving) where we can define our shared volumes:
|
||||
|
||||
@ -166,7 +166,7 @@ sudo /etc/init.d/netatalk restart
|
||||
|
||||
Although we now have a fully configured AFP file server it will not show up in the Finder sidebar on Mac OS X Leopard (but it's reachable via Go > Connect to Server... in the Finder). Macs use a service called [Bonjour](http://www.apple.com/macosx/technology/bonjour.html) for the sidebar thing (and for a lot of other cool stuff) and on the Linux side we can have this functionality with the Open Source implementation of Bonjour, called [Avahi](http://avahi.org/).
|
||||
|
||||
# 4. Install Avahi
|
||||
## 4. Install Avahi
|
||||
|
||||
So the Avahi daemon will advertise all defined services across your network just like Bonjour do. So let's install the avahi daemon and the mDNS library used for imitating the Bonjour service. When fully configured this will cause all Macs in your network to discover your Ubuntu box automatically:
|
||||
|
||||
@ -189,7 +189,7 @@ hosts: files mdns4_minimal [NOTFOUND=return] dns mdns4 mdns
|
||||
|
||||
Press Ctrl + S to save the document or choose File > Save.
|
||||
|
||||
# 5. Configure Avahi and advertise services
|
||||
## 5. Configure Avahi and advertise services
|
||||
|
||||
Next we have to tell Avahi which services it should advertise across the network. In our case we just want to advertise AFP sharing. This is done by creating a xml-file for each service inside /etc/avahi/services/ following a special syntax. Let's create a xml-file for the afpd service with the following line:
|
||||
|
||||
@ -238,7 +238,7 @@ update: If you've followed the revised version of this article your Linux box sh
|
||||
|
||||
|
||||
|
||||
# 6. Configure Time Machine
|
||||
## 6. Configure Time Machine
|
||||
|
||||
**update 07/14/2008:** On the Mac side you have to enable the option to use network volumes as Time Machine drives first. Without it your freshly shared and advertised network volume won't show up in the disk selection dialogue in Time Machine. This is a hidden option not accessible via the graphical user interface so you have to copy & paste this in Terminal (it's one line):
|
||||
|
||||
@ -254,7 +254,7 @@ When your first Time Machine backup is done you can remove all Volumes and the n
|
||||
|
||||
|
||||
|
||||
# 7. Conclusion, Problems and more informations
|
||||
## 7. Conclusion, Problems and more informations
|
||||
|
||||
You see that Linux and Ubuntu can be configured to behave like Macs in your network. But it's sad, that you have to fire up the Terminal to achieve this. I hope especially the Ubuntu team will simplify this in future versions. Another sad thing is that Ubuntu is missing a useful avahi/Bonjour and AFP implementation for Nautilus, the file manager. So there's no way to access your Mac from Ubuntu via AFP in the file manager. In my network I use SSH to access the Macs from Ubuntu or Linux by allowing Remote Login on the Macs in the Sharing preferences. But there's a command line based [AFP client available called afps-ng](http://alexthepuffin.googlepages.com/home) which uses the FUSE system.
|
||||
|
||||
@ -266,7 +266,7 @@ Although I have checked all log files while using file sharing and especially wh
|
||||
|
||||
Finally the only problem remaining is that your Ubuntu or Linux box isn't formatted as journaled HFS+ so some scenarios would fail or make problems. This can include having your iTunes, iPhoto or Aperture library on your Ubuntu server. But the cnid_meta daemon will always try handle that for us. This will cause some hidden folders to show up in Ubuntu which are used to store all the metadata required to almost reproduce a HFS+ file system. But if you ever run into problems you can easily resolve these by creating sparse disk images on your server with the Disk Utility built into Mac OS X. Just create a new sparse disk image on your desktop, copy it to your mounted Ubuntu volume and mount the copied disk image by double clicking it. Now you can put all the files and libraries in it which depends on HFS+
|
||||
|
||||
## Problems with creating the backup disk image
|
||||
### Problems with creating the backup disk image
|
||||
|
||||
If Time Machine says "The backup disk image could not be created" during the first backup attempt you can do the following to avoid this problem and some others (backup fail due to permissions):
|
||||
|
||||
@ -290,7 +290,7 @@ In the field volume name write Backup of computername. Now FIRST chose sparse bu
|
||||
|
||||
Select your Desktop as destination and click create. After the creation is finished drag the created disk image to your mounted Time Machine volume (you can delete the disk image on your desktop when copy is finished). Finally go to Time Machine preferences and start your backup again and everything should work as expected now. After the first backup (this can take a long time depending on your harddrive) you can unmount your Time Machine volume and the next time Time Machine starts it will grab and mount the sparse bundle disk image automatically (with "Backup of computername" as the volume name).
|
||||
|
||||
## Firewall Settings
|
||||
### Firewall Settings
|
||||
|
||||
As [Kevin points out in the comments](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-6431) you would have to adjust any firewall you use. But the standard Ubuntu installation won't use any Firewall.
|
||||
|
||||
@ -335,7 +335,7 @@ Sorry I can't give you any other solutions for that but in most cases it's some
|
||||
|
||||
But for those people still having problems with these error messages: On Mac OS X have a look in the Console app inside your Utilities folder. Click on "All Messages" in the left sidebar, try to connect to your Ubuntu box in Finder and see the messages in Console. These are the "real" error messages which normally will lead you to a solution.
|
||||
|
||||
## -5014 error
|
||||
### -5014 error
|
||||
|
||||
Some people have problems when connecting to an AFP share and get a -5014 error. You have to delete the hidden .AppleDB folders on your Ubuntu box and restart netatalk afterwards:
|
||||
|
||||
@ -343,7 +343,7 @@ Some people have problems when connecting to an AFP share and get a -5014 error.
|
||||
sudo /etc/init.d/netatalk restart
|
||||
```
|
||||
|
||||
## Time Machine Full System Restore
|
||||
### Time Machine Full System Restore
|
||||
|
||||
In case of a full system restore you would have to boot your Mac from the Mac OS X installation DVD (the one delivered with your Mac) by pressing the c key during boot. Your Mac will start with a minimal UI where you have a Utilities section in the top menu bar. There you'll find "Restore from a Time Machine Backup" but it won't find your network share with your Time Machine backup. Luckily [Dmitry Nedospasov found a way to manage this](http://nedos.net/2008/03/29/restore-from-an-unsupported-time-machine-backup-with-the-leopard-dvd/) by simply mounting your Time Machine network share with the Terminal (which you can find under Utilities in the menu bar too) by utilizing the following syntax (shamelessly copied from [Dmitry](http://nedos.net/2008/03/29/restore-from-an-unsupported-time-machine-backup-with-the-leopard-dvd/)):
|
||||
|
||||
@ -361,13 +361,13 @@ which outputs the content of the Volumes folder and you should see your network
|
||||
|
||||
Now you can close the Terminal and select "Restore from Time Machine Backup" from the Utilities entry in the menu bar and select your mounted Time Machine backup and thats it. Oh, needless to say: a gigabit ethernet connection will speed things up dramatically even compared to (draft)n-WLAN.
|
||||
|
||||
## Netatalk backup disk reaching maximum capacity
|
||||
### Netatalk backup disk reaching maximum capacity
|
||||
|
||||
There is some discussion on the net regarding problems with Netatalk and TimeMachine when the backup disk reaches maximum capacity. This is due to missing support for the AFP commands FPSyncDir aka commands 78 and 78 in Netatalk. [As a commenter in an ArsTechnica forum says](http://episteme.arstechnica.com/eve/forums/a/tpc/f/942005082731/m/370002065931?r=782005065931#782005065931): "As soon as your backup volume will reach max capacity, it will self destruct because of it."
|
||||
|
||||
In the forum you'll also find some links to various patches to avoid problems with that. If you have tested such patch please post your experiences in the comments for this article.
|
||||
|
||||
## More Articles
|
||||
### More Articles
|
||||
|
||||
- In case you want to connect your iPhone via AFP: [An AFP Server on your iPhone](http://www.eecs.berkeley.edu/~job/afpd/AFP_File_Server_on_your_iPhone.html). This uses the Netatalk package too
|
||||
- [Netatalk 2.0 manual](http://netatalk.sourceforge.net/2.0/htmldocs/)
|
||||
@ -377,7 +377,7 @@ In the forum you'll also find some links to various patches to avoid problems wi
|
||||
- [How-to: Get files off a Time Machine backup without using your Mac](http://carsonbaker.org/2008/06/23/time-machine-restore/): In case you have to access Time Machine backups from Ubuntu or any other Linux system
|
||||
- [Using NetBSD, with guest account](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-6143): [Johannes](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-6143) laid down the steps to use NetBSD instead of Ubuntu.
|
||||
|
||||
# 8. Downloading and using the Server Display Icons
|
||||
## 8. Downloading and using the Server Display Icons
|
||||
|
||||
I've quickly crafted a custom icon for your Ubuntu server. It's the Apple Cinema Display with the default wallpaper of Ubuntu 8.04 called Hardy Heron. Additionally I've included an icon with the default Leopard and the default Vista wallpaper to represent your Leopard and Windows server too (The default Mac server icon uses the old Tiger wallpaper).
|
||||
|
||||
@ -391,7 +391,7 @@ Because I've just modified Apple's standard icons these icons are just available
|
||||
<a class="icon-download" href="../media/server_displays_by_kremalicious.zip">Download Server Display Icons <span>zip</span></a>
|
||||
</p>
|
||||
|
||||
## 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 <a href="http://krlc.us/givecoffee">buy me my next coffee</a>.
|
||||
|
||||
# 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.
|
||||
|
||||
|
||||
@ -24,9 +24,9 @@ Now it's clear something with my code must be wrong, I thought. For displaying t
|
||||
```php
|
||||
<?php $postslist = get_posts('numberposts=5&order=DESC&orderby;=post_date');
|
||||
foreach ($postslist as $post) : setup_postdata($post); ?>
|
||||
<ul>
|
||||
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span><?php the_date(); ?></span></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span><?php the_date(); ?></span></li>
|
||||
</ul>
|
||||
<?php endforeach; ?>
|
||||
```
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@ -22,55 +22,54 @@ So open your `/wp-admin/index-extra.php` file. It should look like this:
|
||||
|
||||
```php
|
||||
<?php
|
||||
require_once('admin.php');
|
||||
require( 'includes/dashboard.php' );
|
||||
require_once (ABSPATH . WPINC . '/rss.php');
|
||||
@header('Content-Type: ' . get_option('html_type') . '; charset=' . get_option('blog_charset'));
|
||||
switch ( $_GET['jax'] ) {
|
||||
case 'incominglinks' :
|
||||
wp_dashboard_incoming_links_output();
|
||||
break;
|
||||
case 'devnews' :
|
||||
wp_dashboard_rss_output( 'dashboard_primary' );
|
||||
break;
|
||||
case 'planetnews' :
|
||||
wp_dashboard_secondary_output();
|
||||
break;
|
||||
case 'plugins' :
|
||||
wp_dashboard_plugins_output();
|
||||
break;
|
||||
}
|
||||
require_once('admin.php');
|
||||
require( 'includes/dashboard.php' );
|
||||
require_once (ABSPATH . WPINC . '/rss.php');
|
||||
@header('Content-Type: ' . get_option('html_type') . '; charset=' . get_option('blog_charset'));
|
||||
switch ( $_GET['jax'] ) {
|
||||
case 'incominglinks' :
|
||||
wp_dashboard_incoming_links_output();
|
||||
break;
|
||||
case 'devnews' :
|
||||
wp_dashboard_rss_output( 'dashboard_primary' );
|
||||
break;
|
||||
case 'planetnews' :
|
||||
wp_dashboard_secondary_output();
|
||||
break;
|
||||
case 'plugins' :
|
||||
wp_dashboard_plugins_output();
|
||||
break;
|
||||
}
|
||||
?>
|
||||
```
|
||||
|
||||
|
||||
Now just uncomment the lines so it looks like this (every line with two leading // is uncommented and therefore inactive):
|
||||
|
||||
```php
|
||||
<?php
|
||||
require_once('admin.php');
|
||||
require( 'includes/dashboard.php' );
|
||||
// require_once (ABSPATH . WPINC . '/rss.php');
|
||||
@header('Content-Type: ' . get_option('html_type') . '; charset=' . get_option('blog_charset'));
|
||||
// switch ( $_GET['jax'] ) {
|
||||
//
|
||||
// case 'incominglinks' :
|
||||
// wp_dashboard_incoming_links_output();
|
||||
// break;
|
||||
//
|
||||
// case 'devnews' :
|
||||
// wp_dashboard_rss_output( 'dashboard_primary' );
|
||||
// break;
|
||||
//
|
||||
// case 'planetnews' :
|
||||
// wp_dashboard_secondary_output();
|
||||
// break;
|
||||
//
|
||||
// case 'plugins' :
|
||||
// wp_dashboard_plugins_output();
|
||||
// break;
|
||||
//
|
||||
// }
|
||||
require_once('admin.php');
|
||||
require( 'includes/dashboard.php' );
|
||||
// require_once (ABSPATH . WPINC . '/rss.php');
|
||||
@header('Content-Type: ' . get_option('html_type') . '; charset=' . get_option('blog_charset'));
|
||||
// switch ( $_GET['jax'] ) {
|
||||
//
|
||||
// case 'incominglinks' :
|
||||
// wp_dashboard_incoming_links_output();
|
||||
// break;
|
||||
//
|
||||
// case 'devnews' :
|
||||
// wp_dashboard_rss_output( 'dashboard_primary' );
|
||||
// break;
|
||||
//
|
||||
// case 'planetnews' :
|
||||
// wp_dashboard_secondary_output();
|
||||
// break;
|
||||
//
|
||||
// case 'plugins' :
|
||||
// wp_dashboard_plugins_output();
|
||||
// break;
|
||||
//
|
||||
// }
|
||||
?>
|
||||
```
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>#weblogName#: #title#</title>
|
||||
<style>
|
||||
body {margin: 0; background-color: #000;}
|
||||
<title>#weblogName#: #title#</title>
|
||||
<style>
|
||||
body { margin: 0; background-color: #000;}
|
||||
|
||||
a {color: #778caa; text-decoration: none;}
|
||||
a { color: #778caa; text-decoration: none;}
|
||||
|
||||
a:hover {background-color: #778caa; color: #000; text-shadow: 0px 1px 1px #ddd;}
|
||||
a:hover { background-color: #778caa; color: #000; text-shadow: 0px 1px 1px #ddd;}
|
||||
|
||||
#title { color: #778caa; background-color: #333; margin: 0; font: normal 2.1em "HelveticaNeue-UltraLight", Helvetica, sans-serif;}
|
||||
#title { color: #778caa; background-color: #333; margin: 0; font: normal 2.1em "HelveticaNeue-UltraLight", Helvetica, sans-serif;}
|
||||
|
||||
#title a {display: block; position: relative; padding: 10px 20px;}
|
||||
#title a {display: block; position: relative; padding: 10px 20px;}
|
||||
|
||||
#title a:hover {text-shadow: 0px 1px 1px #B3B3B3;}
|
||||
#title a:hover {text-shadow: 0px 1px 1px #B3B3B3;}
|
||||
|
||||
#content {font: 1em "Lucida Grande", Lucida, Verdana, sans-serif; color: #ddd; padding: 10px 20px;}
|
||||
#content {font: 1em "Lucida Grande", Lucida, Verdana, sans-serif; color: #ddd; padding: 10px 20px;}
|
||||
|
||||
#meta {margin-top: 20px; padding: 5px; background-color: #333; -webkit-border-radius: 5px;}
|
||||
#meta {margin-top: 20px; padding: 5px; background-color: #333; -webkit-border-radius: 5px;}
|
||||
|
||||
#credit {font: italic 0.8em/12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; text-align: center; margin-top:20px;}
|
||||
</style>
|
||||
#credit {font: italic 0.8em/12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; text-align: center; margin-top:20px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="title">
|
||||
<a href="#url#">#title#</a>
|
||||
</div>
|
||||
<div id="title">
|
||||
<a href="#url#">#title#</a>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
#body#
|
||||
#extended#
|
||||
<div id="content">
|
||||
#body#
|
||||
#extended#
|
||||
|
||||
<div id="meta">
|
||||
<b>url</b> : <a href="#url#">#url#</a><br />
|
||||
<b>tags</b> : #tags#
|
||||
</div>
|
||||
<div id="credit">
|
||||
The Kremalicious MarsEdit Style<br />
|
||||
<a href="http://www.kremalicious.com">www.kremalicious.com</a>
|
||||
</div>
|
||||
</div> <-- end content -->
|
||||
<div id="meta">
|
||||
<b>url</b> : <a href="#url#">#url#</a><br />
|
||||
<b>tags</b> : #tags#
|
||||
</div>
|
||||
<div id="credit">
|
||||
The Kremalicious MarsEdit Style<br />
|
||||
<a href="http://www.kremalicious.com">www.kremalicious.com</a>
|
||||
</div>
|
||||
</div> <-- end content -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
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.
|
||||
|
||||
@ -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/).
|
||||
|
||||
@ -25,11 +25,8 @@ A bunch of colorful cups of coffee.
|
||||
|
||||
[](http://www.mcdodesign.com/?page_id=22)
|
||||
|
||||
|
||||
|
||||
## CoffeeCon icon by Vegrafik
|
||||
|
||||
|
||||
A hyperrealistic icon from Vegrafik
|
||||
|
||||
[](http://macthemes2.net/forum/viewtopic.php?id=16789993)
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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?).
|
||||
|
||||
@ -26,13 +26,13 @@ Before Wordpress 2.7 I achieved a custom gravatar image on kremalicious.com with
|
||||
|
||||
```php
|
||||
<?php
|
||||
if(function_exists('get_avatar')) {
|
||||
if(function_exists('get_avatar')) {
|
||||
echo get_avatar(
|
||||
$comment,
|
||||
$size = '70',
|
||||
$default = '<?php bloginfo('template_directory'); ?>/images/gravatar.png'
|
||||
);
|
||||
}
|
||||
$comment,
|
||||
$size = '70',
|
||||
$default = '<?php bloginfo('template_directory'); ?>/images/gravatar.png'
|
||||
);
|
||||
}
|
||||
?>
|
||||
```
|
||||
|
||||
@ -42,28 +42,23 @@ But we can use the functions.php file in your template directory and add some li
|
||||
|
||||
```php
|
||||
<?php
|
||||
function my_own_gravatar( $avatar_defaults ) {
|
||||
$myavatar = get_bloginfo('template_directory') . '/images/gravatar.png';
|
||||
$avatar_defaults[$myavatar] = 'GRAVATAR NAME DISPLAYED IN WORDPRESS';
|
||||
return $avatar_defaults;
|
||||
}
|
||||
add_filter( 'avatar_defaults', 'my_own_gravatar' );
|
||||
function my_own_gravatar( $avatar_defaults ) {
|
||||
$myavatar = get_bloginfo('template_directory') . '/images/gravatar.png';
|
||||
$avatar_defaults[$myavatar] = 'GRAVATAR NAME DISPLAYED IN WORDPRESS';
|
||||
return $avatar_defaults;
|
||||
}
|
||||
add_filter( 'avatar_defaults', 'my_own_gravatar' );
|
||||
?>
|
||||
```
|
||||
|
||||
|
||||
|
||||
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:
|
||||
|
||||
|
||||
|
||||
And you can adjust the displayed size of the gravatar image by adding a parameter to `<?php wp_list_comments(); ?>` function in your comments.php file:
|
||||
|
||||
|
||||
```php
|
||||
<?php wp_list_comments(array('avatar_size'=>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.
|
||||
|
||||
@ -23,14 +23,14 @@ Let's start by looking at the code to achieve styling of author comments prior t
|
||||
|
||||
```php
|
||||
<li class="
|
||||
<?php
|
||||
if ($comment->comment_author_url == "http://www.kremalicious.com")
|
||||
echo 'author';
|
||||
else echo $oddcomment;
|
||||
?>
|
||||
item" id="comment-<?php comment_ID() ?>">
|
||||
<em>other comments code</em>
|
||||
</li>
|
||||
<?php
|
||||
if ($comment->comment_author_url == "http://www.kremalicious.com")
|
||||
echo 'author';
|
||||
else echo $oddcomment;
|
||||
?>
|
||||
item" id="comment-<?php comment_ID() ?>">
|
||||
<em>other comments code</em>
|
||||
</li>
|
||||
```
|
||||
|
||||
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 `<li>` tag which we were able to style by adding a li.author to our css file:
|
||||
|
||||
@ -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).
|
||||
|
||||
|
||||
## 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). 
|
||||
|
||||
## 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!
|
||||
|
||||
|
||||
## 1ACV11 Mars University
|
||||
### 1ACV11 Mars University
|
||||
|
||||
The Robot House fraternity is spying at a Macintosh 128k in the girls bed rooms. 
|
||||
|
||||
## 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. 
|
||||
|
||||
## 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. 
|
||||
|
||||
Alcasar submits Leela a video message which is played on Leelas display in a classic Mac OS styled window. 
|
||||
|
||||
## 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. 
|
||||
|
||||
## 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. 
|
||||
|
||||
## 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. 
|
||||
|
||||
## 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. 
|
||||
|
||||
## 3ACV15 I Dated A Robot
|
||||
### 3ACV15 I Dated A Robot
|
||||
|
||||
Sure enough, Prof. Farnsworth's blank robots are Mac formatted.
|
||||
|
||||
|
||||
Billy starring the propaganda movie "I dated a robot!" downloads his Monroe-Bot with a classic Macintosh 128k. 
|
||||
|
||||
## 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). 
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
## 4ACV08 Crimes Of The Hot
|
||||
### 4ACV08 Crimes Of The Hot
|
||||
|
||||
iZac again. 
|
||||
|
||||
## 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. 
|
||||
|
||||
## 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. 
|
||||
|
||||
|
||||
@ -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/).
|
||||
|
||||
@ -9,4 +9,3 @@ date: 2012-06-27 01:29:13+00:00
|
||||
---
|
||||
|
||||
from Instagram
|
||||
|
||||
|
||||
@ -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:
|
||||
|
||||
|
||||
|
||||
|
||||
And this is how it looks like on the Windows 8 start screen:
|
||||
|
||||
|
||||
|
||||
|
||||
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:
|
||||
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
@ -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."
|
||||
|
||||
|
||||
|
||||
|
||||
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
|
||||
<a class="icon-download" href="../media/project-purple-kremalicious.zip">Download <span> zip</span></a>
|
||||
</p>
|
||||
|
||||
* [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
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
<p class="alert alert-info">
|
||||
This article originally appeared in the <a href="https://www.ezeep.com/blog/enterprise-software-sucks-but-its-buddha-nature-can-be-unconvered/">ezeep blog</a>.
|
||||
This article originally appeared in the <a href="https://www.ezeep.com/blog/enterprise-software-sucks-but-its-buddha-nature-can-be-unconvered/">ezeep blog</a>.
|
||||
</p>
|
||||
|
||||
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.”
|
||||
|
||||
@ -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.
|
||||
|
||||
<p class="alert alert-info">
|
||||
This article originally appeared in the <a href="https://www.ezeep.com/blog/stealing-time-how-technology-can-hurt-or-harm-our-quality-of-life/">ezeep blog</a>.
|
||||
This article originally appeared in the <a href="https://www.ezeep.com/blog/stealing-time-how-technology-can-hurt-or-harm-our-quality-of-life/">ezeep blog</a>.
|
||||
</p>
|
||||
|
||||
## Use It All Day, All Night
|
||||
|
||||
@ -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)
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -23,8 +23,7 @@ The badges provided by all app store providers just don't play well together wit
|
||||
<a href="http://codepen.io/kremalicious/details/EVVraP/">Codepen</a>
|
||||
</p>
|
||||
|
||||
|
||||
# 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
|
||||
<link rel="stylesheet" href="https://rawgit.com/kremalicious/appstorebadges/master/dist/appstorebadges.min.css">
|
||||
```
|
||||
|
||||
## 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:
|
||||
|
||||
|
||||
10
package.json
10
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",
|
||||
|
||||
@ -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 (
|
||||
<div
|
||||
className={styles.content}
|
||||
dangerouslySetInnerHTML={{ __html: content }}
|
||||
/>
|
||||
)
|
||||
return <div dangerouslySetInnerHTML={{ __html: content }} />
|
||||
}
|
||||
|
||||
PostContent.propTypes = {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
@ -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(
|
||||
|
||||
8
src/styles/_content.scss
Normal file
8
src/styles/_content.scss
Normal file
@ -0,0 +1,8 @@
|
||||
.gatsby-resp-image-figure,
|
||||
.gatsby-resp-image-wrapper {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
.anchor {
|
||||
margin-top: $spacer / 3;
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user