mirror of
https://github.com/kremalicious/blog.git
synced 2025-01-05 11:25:07 +01:00
formatting
This commit is contained in:
parent
fc032c8fb2
commit
d6aa7cdb59
GPG Key ID:
606EEEF3C479A91F
@ -2,4 +2,3 @@ node_modules/
|
||||
.cache/
|
||||
static/
|
||||
public/
|
||||
content/
|
||||
|
||||
@ -15,6 +15,6 @@ tags:
|
||||
|
||||
TechSpecs:
|
||||
[support.apple.com/kb/SP409](http://support.apple.com/kb/SP409)
|
||||
[everymac.com/monitors/apple/multiple_scan/specs/multiple_...](http://everymac.com/monitors/apple/multiple_scan/specs/multiple_scan_20.html)
|
||||
[everymac.com/monitors/apple/multiple*scan/specs/multiple*...](http://everymac.com/monitors/apple/multiple_scan/specs/multiple_scan_20.html)
|
||||
|
||||
[Photo on Flickr](http://www.flickr.com/photos/krema/2885095747)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
type: photo
|
||||
title: "Suddenly... a new Hindu temple appears around the corner"
|
||||
title: 'Suddenly... a new Hindu temple appears around the corner'
|
||||
image: 2015-04-17-suddenly-a-new-hindu-temple-appears-around-the-corner.jpg
|
||||
author: Matthias Kretschmann
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
type: photo
|
||||
title: "The art of hand painted typography"
|
||||
title: 'The art of hand painted typography'
|
||||
image: 2017-07-13-mumbai-hand-painted-typography.jpg
|
||||
author: Matthias Kretschmann
|
||||
date: 2017-07-13 16:28:19.869188000 +02:00
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
type: photo
|
||||
title: "Obligatory Gateway of India photo"
|
||||
title: 'Obligatory Gateway of India photo'
|
||||
image: 2017-07-13-obligatory-gate-of-india-photo.jpg
|
||||
author: Matthias Kretschmann
|
||||
date: 2017-07-13 14:28:19.869188000 +02:00
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
type: photo
|
||||
title: "Chhatrapati Shivaji Maharaj Vastu Sangrahalaya"
|
||||
title: 'Chhatrapati Shivaji Maharaj Vastu Sangrahalaya'
|
||||
image: 2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.jpg
|
||||
author: Matthias Kretschmann
|
||||
date: 2017-07-14 14:28:19.869188000 +02:00
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
type: photo
|
||||
title: "The Erechtheum"
|
||||
title: 'The Erechtheum'
|
||||
image: 2017-11-10-acropolis-the-erechtheum.jpg
|
||||
author: Matthias Kretschmann
|
||||
date: 2017-11-10 14:42:19.869188000 +02:00
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
type: photo
|
||||
title: "The Parthenon"
|
||||
title: 'The Parthenon'
|
||||
image: 2017-11-10-acropolis-the-parthenon.jpg
|
||||
author: Matthias Kretschmann
|
||||
date: 2017-11-10 14:37:19.869188000 +02:00
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
type: photo
|
||||
title: "The Propylaea"
|
||||
title: 'The Propylaea'
|
||||
image: 2017-11-10-acropolis-the-propylaea.jpg
|
||||
author: Matthias Kretschmann
|
||||
date: 2017-11-10 14:32:19.869188000 +02:00
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
type: photo
|
||||
date: 2017-12-15T22:28:49.832Z
|
||||
|
||||
title: "El Born Centre de Cultura i Memòria"
|
||||
title: 'El Born Centre de Cultura i Memòria'
|
||||
image: 2017-12-15-el-born-centre-de-cultura-i-memoria.jpg
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
type: photo
|
||||
title: "Sagrada Família"
|
||||
title: 'Sagrada Família'
|
||||
image: 2017-12-16-sagrada-familia.jpg
|
||||
author: Matthias Kretschmann
|
||||
date: 2017-12-16 13:01:21.869188000 +02:00
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
type: photo
|
||||
title: "Traffic of São Paulo"
|
||||
title: 'Traffic of São Paulo'
|
||||
image: 2017-12-27-sao-paulo-traffic.jpg
|
||||
date: 2017-12-27 13:03:21.869188000 -02:00
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
type: photo
|
||||
title: "Passagem Literária da Consolação"
|
||||
title: 'Passagem Literária da Consolação'
|
||||
image: 2018-01-04-passagem-literaria-da-consolacao.jpg
|
||||
date: 2018-01-04 16:02:02.869188000 -02:00
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
type: photo
|
||||
title: "Escola de Samba"
|
||||
title: 'Escola de Samba'
|
||||
image: 2018-01-05-samba-school.jpg
|
||||
date: 2018-01-05 21:56:02.869188000 -02:00
|
||||
---
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
type: photo
|
||||
date: 2018-05-01T00:00:00.000Z
|
||||
|
||||
title: "May Day, Kreuzberg"
|
||||
title: 'May Day, Kreuzberg'
|
||||
image: 2018-05-01-may-day-kreuzberg.jpg
|
||||
---
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
type: photo
|
||||
date: 2018-06-01T00:00:00.000Z
|
||||
|
||||
title: "Roger Waters, Us + Them"
|
||||
title: 'Roger Waters, Us + Them'
|
||||
image: 2018-06-01-roger-waters-us-them.jpg
|
||||
---
|
||||
|
||||
|
||||
@ -19,9 +19,9 @@ At the end of last year I watched out for a new scanner and the CanoScan LiDE 50
|
||||
**UPDATE: I wrote a follow up article describing how to use this scanner with the newest Mac operating system Leopard. Feel free to head over to this article to get the freshest facts about using this scanner with Mac OS X:
|
||||
[Using the CanoScan LiDE 500F scanner with Mac OS X Leopard](/using-the-canoscan-lide-500f-with-mac-os-x-leopard/)**
|
||||
|
||||
So there were two choices for using the scanner on an Intel-Mac: installing the PowerPC-driver and using [VueScan](http://www.hamrick.com/) for scanning. But, man, was that slow! And i couldn't get the 16bit per channel scanning to function, which is an essential function for me. Also they want to have 40$ for this app, which isn't that much but after spending money for the scanner and for Photoshop I didn't want to buy another component for using the scanner. On the other hand you could use the [Preview.app](http://www.apple.com/macosx/features/pdf/) built into MAC OS X with Image > Import Image. But this last solution only offers rudimentary functions for scanning. Good to scan a document but not for scanning photos in high quality and for archive purposes. And nevertheless none of these solutions worked for scanning directly in the new Adobe Photoshop CS3.
|
||||
So there were two choices for using the scanner on an Intel-Mac: installing the PowerPC-driver and using [VueScan](http://www.hamrick.com/) for scanning. But, man, was that slow! And i couldn't get the 16bit per channel scanning to function, which is an essential function for me. Also they want to have 40\$ for this app, which isn't that much but after spending money for the scanner and for Photoshop I didn't want to buy another component for using the scanner. On the other hand you could use the [Preview.app](http://www.apple.com/macosx/features/pdf/) built into MAC OS X with Image > Import Image. But this last solution only offers rudimentary functions for scanning. Good to scan a document but not for scanning photos in high quality and for archive purposes. And nevertheless none of these solutions worked for scanning directly in the new Adobe Photoshop CS3.
|
||||
|
||||
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...
|
||||
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
|
||||
|
||||
|
||||
@ -13,10 +13,10 @@ tags:
|
||||
- aperture
|
||||
|
||||
redirect_from:
|
||||
- "/new-goodies-aperture-file-types-icons/"
|
||||
- "/goodie-updated-aperture-file-types-v11/"
|
||||
- "/aperture-file-types-v12-released/"
|
||||
- "/2008/04/aperture-file-types/"
|
||||
- '/new-goodies-aperture-file-types-icons/'
|
||||
- '/goodie-updated-aperture-file-types-v11/'
|
||||
- '/aperture-file-types-v12-released/'
|
||||
- '/2008/04/aperture-file-types/'
|
||||
---
|
||||
|
||||
These icons are free for your personal use and include icons for all file types Apple’s Aperture 2.0 can handle.
|
||||
|
||||
@ -14,6 +14,6 @@ tags:
|
||||
Two days ago [I posted links to the winning photographers of the Pulitzer Price 2008](http://www.kremalicious.com/2008/04/pulitzer-price-winners-2008-announced-various-photographers-awarded/). Now Adrees Latif, who won in the category Breaking News Photography for his picture of the japanese videographer Kenji Nagai shot down during riots in Myanmar in 2007, [reveales the story behind the picture in the Reuters Blog](http://blogs.reuters.com/photo/2008/04/07/the-story-behind-the-pictures/):
|
||||
|
||||
> Within minutes, the crowd swelled from hundreds to a few thousand. The soldiers threw barbed wire coils across the roads.
|
||||
Knowing that hundreds of people were gunned down in similar circumstances in a 1988 uprising, I climbed an old crosswalk directly overhead, to get to one of the few spots offering a clear view...
|
||||
> Knowing that hundreds of people were gunned down in similar circumstances in a 1988 uprising, I climbed an old crosswalk directly overhead, to get to one of the few spots offering a clear view...
|
||||
|
||||
[Read the whole story on the Reuters Blog](http://blogs.reuters.com/photo/2008/04/07/the-story-behind-the-pictures/)
|
||||
|
||||
@ -34,11 +34,11 @@ Here's an overview of the headlines in this article. As you can see it's rather
|
||||
|
||||
## 1. What text-shadow is good for
|
||||
|
||||
|
||||
|
||||
|
||||
The main goal of this property is to give designers and css coders a tool to make text effects, which could only be done before by rendering text as images with all the side effects. Text rendered as an image isn't searchable and therefore very undelicious for search engines. Another side effect is the fact that images can be way more bigger as one small line of code in terms of file size. As you may know most css-files, which contain the whole layout of a website, are smaller than one image on most websites. So it's really clever to use a css function instead of images for reducing unnecessary traffic.
|
||||
|
||||
|
||||
|
||||
|
||||
Utilizing text-shadow to simulate engraved or stenciled text is widely used on websites. Apple did it everywhere in Mac OS X not just since Leopard (just look at the titlebars). So if you design a website for Mac users you can increase the sexyness of your website, because this particular usage of text-shadow integrates very well with the overall look of Mac OS X. I will explain how to achieve this engraved-text-on-metal effect later on in this article.
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ tags:
|
||||
|
||||
With Viveza photographers are able to select areas from their images and adjust them separately from the rest of the picture by defining so called Color Control Points.
|
||||
|
||||
A 15 day trial is available from the website of the plugin. The whole plugin will cost you US$ 249.
|
||||
A 15 day trial is available from the website of the plugin. The whole plugin will cost you US\$ 249.
|
||||
|
||||
[Nik Software Viveza Website](http://www.niksoftware.com/viveza)
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ The first one is the [Dfx digital filters plug-in from Tiffen](http://www.tiffen
|
||||
|
||||
[](../media/tiffen_aperture.jpg)
|
||||
|
||||
Tiffen made the plugin available in May 2008. You can download a [free 15-day trial](http://www.tiffen.com/dfx_downloads.html) too or you can purchase it from the Tiffen-website for US$299. Also don't forget to have a look [at the user guide](http://www.tiffen.com/userimages/Dfx-v1-Photo-UserGuide.pdf) for this plugin.
|
||||
Tiffen made the plugin available in May 2008. You can download a [free 15-day trial](http://www.tiffen.com/dfx_downloads.html) too or you can purchase it from the Tiffen-website for US\$299. Also don't forget to have a look [at the user guide](http://www.tiffen.com/userimages/Dfx-v1-Photo-UserGuide.pdf) for this plugin.
|
||||
|
||||
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).
|
||||
|
||||
@ -41,11 +41,11 @@ Digital Film Tools [released three plugins](http://www.digitalfilmtools.com/aper
|
||||
|
||||
[](../media/dft-ozone_ui.jpg)
|
||||
|
||||
All plugins are available now and can be [purchased fom the Digital Film Tools website](http://www.digitalfilmtools.com/buy/home.php?cat=38) as a Super Bundle with all three plugins included for US$ 175 or separately for US$ 50 (Light and Ozone) or US$ 120 (Power Stroke). There are also trial versions for the [Power Stroke](http://www.digitalfilmtools.com/powerstroke/media.htm), [Light](http://www.digitalfilmtools.com/light/media.htm) and [Ozone](http://www.digitalfilmtools.com/ozone/media.htm) plugin available from DFT's website which will watermark the edited images in demo mode.
|
||||
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 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!
|
||||
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!
|
||||
|
||||
On May 7, 2008, Nik finally [shipped Viveza as the first availailabe plugin for Aperture 2.1](http://www.kremalicious.com/2008/05/nik-ships-viveza-as-the-first-available-aperture-editing-plugin/). You can grab a [15-day trial version](http://www.niksoftware.com/site/cont_index.php?nav_top=367&cms_child=__demo&productId=257) of the plugin too.
|
||||
|
||||
@ -53,15 +53,15 @@ On May 7, 2008, Nik finally [shipped Viveza as the first availailabe plugin for
|
||||
|
||||
## dvGarage dpMatte & HDR Toner
|
||||
|
||||
[DpMatte](http://www.dvgarage.com/prod/prod.php?prod=dpmatte) is a plugin for greenscreen keying for photographers. You can easily composite two images together, like adding another background for a portrait. It is available since April 22 and costs you US$ 69.
|
||||
[DpMatte](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.
|
||||
|
||||
[](../media/dpmatte_index1.jpg)
|
||||
|
||||
The folks at dvGarage are also working on an Aperture plugin called HDRToner for high dynamic range images which will cost US$ 69 too and is expected to be available on June 15 2008.
|
||||
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 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.
|
||||
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.
|
||||
|
||||
[](../media/imagetrends_hemi_10.jpg)
|
||||
|
||||
@ -85,13 +85,13 @@ You can have a first look at an early alpha version of the plugin running in Ape
|
||||
|
||||
## Creaceed Hydra + HDR Aperture Plugin
|
||||
|
||||
[Hydra](http://www.creaceed.com/hydra/) is a neat application for High Dynamic Range (HDR) image processing. With the release of Hydra 1.5, Creaceed made an Aperture plugin available with it too. It has a limited feature set compared to Photomatix or Photoshop but creating HDR images within Aperture is possible right now with this plugin. You can purchase Hydra for US$ 59.95 to get the included plugin or test it out by downloading the trial version (it will expire on July 1, 2008). But remember that the plugin is in beta stage at the moment.
|
||||
[Hydra](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
|
||||
|
||||
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.
|
||||
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/).
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ From the press release:
|
||||
|
||||
If you're interested in how the plugin works there's [a cool in-depth explanation from the guys at Image Trends on their website](http://www.imagetrendsinc.com/products/specpage_hemi.asp).
|
||||
|
||||
The Fisheye-Hemi plugin is the first plugin from Image Trends coming for Apple's Aperture. Image Trends' president and CEO Dan Sullivan says that the other plugins [PearlyWhite](http://www.imagetrendsinc.com/products/prodpage_pearly.asp) and [ShineOff](http://www.imagetrendsinc.com/products/prodpage_shine.asp) are expected to be released within the next 60 days while some mysterious "other products" will follow them too. The plugin costs US$ 29.95 and if you want the plugin for Aperture and Photoshop you get a 50% discount. There's also a free trial version of the plugin available.
|
||||
The Fisheye-Hemi plugin is the first plugin from Image Trends coming for Apple's Aperture. Image Trends' president and CEO Dan Sullivan says that the other plugins [PearlyWhite](http://www.imagetrendsinc.com/products/prodpage_pearly.asp) and [ShineOff](http://www.imagetrendsinc.com/products/prodpage_shine.asp) are expected to be released within the next 60 days while some mysterious "other products" will follow them too. The plugin costs US\$ 29.95 and if you want the plugin for Aperture and Photoshop you get a 50% discount. There's also a free trial version of the plugin available.
|
||||
|
||||
* [Plugin website](http://www.imagetrendsinc.com/products/prodpage_hemi.asp)
|
||||
* [First overview: Aperture 2.1 adjustment plugins have arrived](http://www.kremalicious.com/2008/05/first-aperture-adjustment-plugins-have-arrived/)
|
||||
- [Plugin website](http://www.imagetrendsinc.com/products/prodpage_hemi.asp)
|
||||
- [First overview: Aperture 2.1 adjustment plugins have arrived](http://www.kremalicious.com/2008/05/first-aperture-adjustment-plugins-have-arrived/)
|
||||
|
||||
@ -31,7 +31,7 @@ There's a fascinating story behind these icons which is nothing more than the st
|
||||
|
||||
### Nicéphore Niépce and The First Photograph
|
||||
|
||||
|
||||
|
||||
|
||||
Niépce was a multitasking French inventor who became famous for his experiments trying to preserve the projected image inside of the Camera Obscura. The Camera Obscura uses a well known optical phenomenon which is known to mankind for quite a long time.
|
||||
|
||||
@ -43,7 +43,7 @@ In 1822 he created a first non-fading negative contact print by utilizing a bitu
|
||||
|
||||
After some more tries and combining other elements in his procedure he was able to produce the famous First Photograph "View from the Window at Le Gras" in 1826 or 1827 by utilizing a bitumen of Judea-coated pewter plate and improved lenses from the Paris optician, Charles Chevalier. He called this procedure Heliography and the bitumen-coated pewter plate needed an exposure of eight or more hours!
|
||||
|
||||
|
||||
|
||||
|
||||
By the way, in 2002 another picture made by Niépce was discovered which dates back to 1825. It was made in a process he called Heliogravure and it was an image of an (engraving) image (showing a man leading a horse). But since the scientific definition of the First Photograph is "the world's first permanent photograph from nature", _View from the Window at Le Gras_ remains the first "real" photograph.
|
||||
|
||||
|
||||
@ -26,6 +26,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).
|
||||
|
||||
@ -14,6 +14,6 @@ tags:
|
||||
|
||||
<!-- more -->
|
||||
|
||||
With this DSLR Canon seems to open up a new class in their EOS system which is somehow below the former entry level cameras (XT/350D, XTi/400D) and the latest entry-level XSi/450D. It's priced 200$ below Canons current or former entry-level DSLR XSi/450D and you can find a nice first review of this new DSLR [over at Digital Photography Review](http://www.dpreview.com/previews/Canon_1000D/).
|
||||
With this DSLR Canon seems to open up a new class in their EOS system which is somehow below the former entry level cameras (XT/350D, XTi/400D) and the latest entry-level XSi/450D. It's priced 200\$ below Canons current or former entry-level DSLR XSi/450D and you can find a nice first review of this new DSLR [over at Digital Photography Review](http://www.dpreview.com/previews/Canon_1000D/).
|
||||
|
||||
[](../media/speedlite430exii.jpg)Canon also introduced the new midrange Speedlite 430EX II, replacing the 430EX flash unit. This new Speedlite is now fully configurable with the Camera's LCD menu and it got now a metal shoe. According to [Canon](http://www.canon.co.uk/press_centre/press_releases/cameras_accessories/speedlite_430ex_ii_press_release.asp) the 430EX II also boasts 20% faster recycling times and is more silent while doing this. In Europe and in the USA the Speedlite should be available from the end of July.
|
||||
|
||||
@ -28,7 +28,7 @@ While Safari on iPhone will display all websites just fine it can happen that th
|
||||
The viewport can be larger or smaller than the visible area but I wanted my content to exactly fit the width of the iPhone and the goal was to make the text legible on first load. So here's what I use for kremalicious{iPhone}:
|
||||
|
||||
```html
|
||||
<meta name="Viewport" content="maximum-scale=1.6,width=device-width" >
|
||||
<meta name="Viewport" content="maximum-scale=1.6,width=device-width" />
|
||||
```
|
||||
|
||||
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.
|
||||
@ -38,7 +38,7 @@ This code will let the user scale the content up to 1.6 times to the default vie
|
||||
There's neither an active nor a hover state for links on the iPhone which makes sense on a touch interface although it would be much easier to just use a:active for the tap highlighting. Safari on the iPhone uses a special webkit property for that:
|
||||
|
||||
```css
|
||||
-webkit-tap-highlight-color: rgba(234,234,234, .5);
|
||||
-webkit-tap-highlight-color: rgba(234, 234, 234, 0.5);
|
||||
```
|
||||
|
||||
## Home Screen Icon
|
||||
@ -53,20 +53,20 @@ And finally many thanks to [cschock](http://www.cschock.de) for continuously tes
|
||||
|
||||
## 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.
|
||||
- [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.
|
||||
|
||||
* [WPTouch - Wordpress iPhonified](http://www.bravenewcode.com/wptouch/): If you don't want to digg into html, css and iPhone specific properties this plug-in will help you. Once activated it automatically switches to an iPhone like theme with lots of eyecandy. You can customize some colors and a lot of different icons all from the Wordpress admin panel
|
||||
- [WPTouch - Wordpress iPhonified](http://www.bravenewcode.com/wptouch/): If you don't want to digg into html, css and iPhone specific properties this plug-in will help you. Once activated it automatically switches to an iPhone like theme with lots of eyecandy. You can customize some colors and a lot of different icons all from the Wordpress admin panel
|
||||
|
||||
* [Tutorial: Building a website for the iPhone](http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/): Amazing tutorial for changing content based on the orientation of the iPhone or iPod Touch. Just browse their website with your iPhone or iPod Touch to see it in action.
|
||||
- [Tutorial: Building a website for the iPhone](http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/): Amazing tutorial for changing content based on the orientation of the iPhone or iPod Touch. Just browse their website with your iPhone or iPod Touch to see it in action.
|
||||
|
||||
* [iPhone Native Looking Skin](http://ajaxian.com/archives/iphone-native-looking-skin): Sort of a template based on css and javascript which simulates the iPhone UI. ([Final look](http://joehewitt.com/files/iphone/navigation.html))
|
||||
- [iPhone Native Looking Skin](http://ajaxian.com/archives/iphone-native-looking-skin): Sort of a template based on css and javascript which simulates the iPhone UI. ([Final look](http://joehewitt.com/files/iphone/navigation.html))
|
||||
|
||||
* [Touching and Gesturing on the iPhone](http://ajaxian.com/archives/iphone-native-looking-skin): Build your websites with some touch gesture features! Here's the javascript code for it.
|
||||
- [Touching and Gesturing on the iPhone](http://ajaxian.com/archives/iphone-native-looking-skin): Build your websites with some touch gesture features! Here's the javascript code for it.
|
||||
|
||||
## THE Apple resources for iPhone & Web Content
|
||||
|
||||
* [Safari Web Content Guide for iPhone](http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/Introduction/chapter_1_section_1.html)
|
||||
- [Safari Web Content Guide for iPhone](http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/Introduction/chapter_1_section_1.html)
|
||||
|
||||
* [iPhone Human Interface Guidelines for Web Applications](http://developer.apple.com/documentation/iPhone/Conceptual/iPhoneHIG/Introduction/chapter_1_section_1.html)
|
||||
- [iPhone Human Interface Guidelines for Web Applications](http://developer.apple.com/documentation/iPhone/Conceptual/iPhoneHIG/Introduction/chapter_1_section_1.html)
|
||||
|
||||
* [iPhone Human Interface Guidelines](https://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/chapter_1_section_1.html) (free developer account required)
|
||||
- [iPhone Human Interface Guidelines](https://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/chapter_1_section_1.html) (free developer account required)
|
||||
|
||||
@ -17,4 +17,4 @@ tags:
|
||||
|
||||
[](../media/nik_silverefex.png)
|
||||
|
||||
You can get a [15-day trial from Nik's website](http://www.niksoftware.com/site/cont_index.php?nav_top=367&cms_child=__demo&productId=262). It can be purchased through Nik's online store for US$199.95.
|
||||
You can get a [15-day trial from Nik's website](http://www.niksoftware.com/site/cont_index.php?nav_top=367&cms_child=__demo&productId=262). It can be purchased through Nik's online store for US\$199.95.
|
||||
|
||||
@ -17,6 +17,6 @@ The results are just as amazing as they are with the Photoshop plug-in. But the
|
||||
|
||||
<!-- more -->
|
||||
|
||||
You can [download a trial version of Noise Ninja for Aperture](http://www.picturecode.com/nn_aperture.htm) (images are watermarked with a grid pattern when you save them) and give it a try. The Noise Ninja plug-in for Aperture is available as a part of the [Pro Bundle (US$ 79.95)](http://www.picturecode.com/purchase.php) which includes the Photoshop and the Aperture plug-in. If you have an existing Pro Bundle license you can [upgrade it for US$ 20](http://www.picturecode.com/upgrade.php) to include the Aperture plug-in license.
|
||||
You can [download a trial version of Noise Ninja for Aperture](http://www.picturecode.com/nn_aperture.htm) (images are watermarked with a grid pattern when you save them) and give it a try. The Noise Ninja plug-in for Aperture is available as a part of the [Pro Bundle (US\$ 79.95)](http://www.picturecode.com/purchase.php) which includes the Photoshop and the Aperture plug-in. If you have an existing Pro Bundle license you can [upgrade it for US\$ 20](http://www.picturecode.com/upgrade.php) to include the Aperture plug-in license.
|
||||
|
||||
Interested in more Aperture plug-ins? Just have a look at my article [First overview: Aperture 2.1 adjustment plugins have arrived](http://www.kremalicious.com/2008/05/first-aperture-adjustment-plugins-have-arrived/) to get an overview about what's available at the moment or [browse my blog by the Aperture plug-in tag](http://www.kremalicious.com/tag/aperture-plug-in/). Additionally you can have a look at the [brand new Apple website for all the Aperture plug-ins and ressources](http://www.apple.com/aperture/resources/plugins.html).
|
||||
|
||||
@ -30,34 +30,66 @@ Just copy and paste the following HTML and CSS into your Preview Template editor
|
||||
<head>
|
||||
<title>#weblogName#: #title#</title>
|
||||
<style>
|
||||
body { margin: 0; background-color: #000;}
|
||||
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;}
|
||||
#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="content">
|
||||
#body#
|
||||
#extended#
|
||||
#body# #extended#
|
||||
|
||||
<div id="meta">
|
||||
<b>url</b> : <a href="#url#">#url#</a><br />
|
||||
@ -67,8 +99,8 @@ Just copy and paste the following HTML and CSS into your Preview Template editor
|
||||
The Kremalicious MarsEdit Style<br />
|
||||
<a href="http://www.kremalicious.com">www.kremalicious.com</a>
|
||||
</div>
|
||||
</div> <-- end content -->
|
||||
|
||||
</div>
|
||||
<-- end content -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -25,9 +25,9 @@ The whole package includes 7 icons either packed in a nice tagged iContainer for
|
||||
<a class="icon-download" href="../media/icybox_by_kremalicious.zip">Download Icy Box Icons <span>zip</span></a>
|
||||
</p>
|
||||
|
||||
* Replacement icons for the silver and black Icy Box external aluminium case with USB interface
|
||||
* Mac + Win + Linux + iContainer
|
||||
* Leopard ready (512x512)
|
||||
* including 7 icons with 2 Time Machine versions
|
||||
- Replacement icons for the silver and black Icy Box external aluminium case with USB interface
|
||||
- Mac + Win + Linux + iContainer
|
||||
- Leopard ready (512x512)
|
||||
- including 7 icons with 2 Time Machine versions
|
||||
|
||||
[](../media/icybox_teaser2.jpg)
|
||||
|
||||
@ -24,6 +24,6 @@ The EOS 50D is prized at US$1399 (1299€) for just the body and it will be avai
|
||||
|
||||
If you're interested in all the details and specifications have a look at [Bob Atkins article about the official announcement of the EOS 50D](http://www.bobatkins.com/photography/digital/canon_eos_50D.html).
|
||||
|
||||
[](../media/efs_18-200.png)Along with the EOS 50D Canon announced the EF-S 18-200 3.5-5.6 IS as a new lens. The lens is intended for use with an APS-C sized sensor and insists of 16 elements (UD-glass and aspherical lenses) arranged in 12 groups. As the name says the EF-S 18-200 3.5-5.6 IS comes with an image stabilizer but somehow misses an USM ring motor which is quite strange for a lens of a prize of US$699 (599€).
|
||||
[](../media/efs_18-200.png)Along with the EOS 50D Canon announced the EF-S 18-200 3.5-5.6 IS as a new lens. The lens is intended for use with an APS-C sized sensor and insists of 16 elements (UD-glass and aspherical lenses) arranged in 12 groups. As the name says the EF-S 18-200 3.5-5.6 IS comes with an image stabilizer but somehow misses an USM ring motor which is quite strange for a lens of a prize of US\$699 (599€).
|
||||
|
||||
All the specifications for this new lens are available in [an article by Bob Atkins](http://www.bobatkins.com/photography/reviews/canon_efs_18-200_is.html) too.
|
||||
|
||||
@ -31,8 +31,8 @@ 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/).
|
||||
- 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/).
|
||||
|
||||
@ -15,11 +15,11 @@ tags:
|
||||
|
||||
I’ve just released my own coffee cup icon, enjoy:
|
||||
|
||||
* Desktop icons showing the fuel of most designers. Originally I've made the coffee cup for the donations button on my website earlier this year and now decided to release it as an icon.
|
||||
* Mac + Win + Linux + iContainer
|
||||
* Leopard ready (512x512)
|
||||
* including 3 icons (Black + White version + obligatory folder icon)
|
||||
* [The Finest Coffee Cups - Most Incredible Coffee Icons On The Web](/the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web/)
|
||||
- Desktop icons showing the fuel of most designers. Originally I've made the coffee cup for the donations button on my website earlier this year and now decided to release it as an icon.
|
||||
- Mac + Win + Linux + iContainer
|
||||
- Leopard ready (512x512)
|
||||
- including 3 icons (Black + White version + obligatory folder icon)
|
||||
- [The Finest Coffee Cups - Most Incredible Coffee Icons On The Web](/the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web/)
|
||||
|
||||
## Download
|
||||
|
||||
|
||||
@ -151,11 +151,11 @@ Not a coffee cup but also very coffee related is this awesome Cappuccino machine
|
||||
|
||||
Finally here're some nice high quality tutorials for you to help you build your own coffee cup.
|
||||
|
||||
* 
|
||||
- 
|
||||
[Using Gradients to Make Light and Shadow - and a Coffee Cup!](http://psdtuts.com/tutorials-effects/using-gradients-to-make-light-and-shadow-and-a-coffee-cup/): Collis from [psdtuts](http://psdtuts.com) made a nice tutorial with a similar perspective as found in [my Coffee Cup Icon](http://www.kremalicious.com/goodies/).
|
||||
* 
|
||||
- 
|
||||
[Design A Coffee Mug Icon](http://www.myinkblog.com/2008/08/02/design-a-coffee-mug-icon/): Photoshop tutorial by Andrew Houle for creating a coffee cup icon.
|
||||
* 
|
||||
- 
|
||||
[Creating a Coffee Cup with Inkscape](http://vectortuts.com/illustration/creating-a-coffee-cup-with-inkscape/): Peter Anglea with a nice vector tutorial using the open source vector app Inkscape.
|
||||
* 
|
||||
- 
|
||||
[Amazing Photoshop Light Effect In 10 Steps](http://abduzeedo.com/amazing-photoshop-light-effect-10-steps): Not an icon tutorial but Fabio Sasso achieves some awesome light effects combined with the coffee cup from the [Office Space icon set](http://www.visualpharm.com/office_space.html).
|
||||
|
||||
@ -34,7 +34,9 @@ Let's start by looking at the code to achieve styling of author comments prior t
|
||||
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:
|
||||
|
||||
```css
|
||||
li.author { /* css comes in here */ }
|
||||
li.author {
|
||||
/* css comes in here */
|
||||
}
|
||||
```
|
||||
|
||||
But with Wordpress 2.7 these steps are needless because of the [new function `<?php wp_list_comments(); ?>`](http://codex.wordpress.org/Template_Tags/wp_list_comments) which adds a class on author comments for itself!
|
||||
@ -42,7 +44,9 @@ But with Wordpress 2.7 these steps are needless because of the [new function `<?
|
||||
If a comment from the author of an article is posted under this article, **Wordpress automatically adds the class 'bypostauthor' to the surrounding `<li>` tag.** So all you have to do is adding a css style of `li.bypostauthor` to your css file or just renaming your old `li.author` class or whatever you used for this:
|
||||
|
||||
```css
|
||||
li.bypostauthor { /* css comes in here */ }
|
||||
li.bypostauthor {
|
||||
/* css comes in here */
|
||||
}
|
||||
```
|
||||
|
||||
And that's it for adding a different style to comments from the article author. Just add some css and there you go. Wonderful!
|
||||
@ -52,7 +56,9 @@ And that's it for adding a different style to comments from the article author.
|
||||
Wordpress also has a special class for registered users of your site so you're able to style their comments as well. For this just use the class 'byuser':
|
||||
|
||||
```css
|
||||
li.byuser { /* css comes in here */ }
|
||||
li.byuser {
|
||||
/* css comes in here */
|
||||
}
|
||||
```
|
||||
|
||||
All the various classes Wordpress adds to comments are listed [in the Codex page for enhanced comments display](http://codex.wordpress.org/Migrating_Plugins_and_Themes_to_2.7/Enhanced_Comment_Display#CSS_Styling). And [here's a very nice grahical overview about everything Wordpress 2.7 adds to comments](http://www.wp-fun.co.uk/2008/12/10/27-comment-classes/).
|
||||
|
||||
@ -20,11 +20,11 @@ Simple, high-resolution Futurama tribute wallpaper pack inspired by the latest F
|
||||
|
||||
Here're the details for the whole pack:
|
||||
|
||||
* 2 high-rez widescreen desktop versions with empty and full whale oil indicator (2560x1600)
|
||||
* 2 iPhone versions with empty and full whale oil indicator (320x480)
|
||||
* 2 Feminista versions high-rez widescreen desktop versions with empty and full whale oil indicator (2560x1600)
|
||||
* 2 Feminista iPhone versions with empty and full whale oil indicator (320x480)
|
||||
* Icon folder files for this wallpaper release
|
||||
- 2 high-rez widescreen desktop versions with empty and full whale oil indicator (2560x1600)
|
||||
- 2 iPhone versions with empty and full whale oil indicator (320x480)
|
||||
- 2 Feminista versions high-rez widescreen desktop versions with empty and full whale oil indicator (2560x1600)
|
||||
- 2 Feminista iPhone versions with empty and full whale oil indicator (320x480)
|
||||
- Icon folder files for this wallpaper release
|
||||
|
||||
[](http://www.kremalicious.com/goodies/#wall)
|
||||
|
||||
|
||||
@ -51,7 +51,9 @@ If you download the above Coda Clip files this icon is already applied on the cl
|
||||
That's because both collections have their placeholder selection (the ) located where the link text would be:
|
||||
|
||||
```html
|
||||
<a href="" title=""></a>
|
||||
<a href="" title=""
|
||||
></a
|
||||
>
|
||||
```
|
||||
|
||||
As you can see I've also included the link title value usually with the name of the specific social site. Also I've already encoded all the entities so there shouldn't be any (X)HTML validation errors when using these links in your projects.
|
||||
@ -74,9 +76,9 @@ Apart from that some sites allow you to add and submit more informations than ju
|
||||
|
||||
The Wordpress edition of these share link collection includes some Wordpress php bits for dynamically creating the whole submit URL so there's no need to manually edit most of the links. The Wordpress template tags used are:
|
||||
|
||||
* `<?php the_permalink();?>` to create the URL dynamically depending on the article under which you have included the share and submit links.
|
||||
- `<?php the_permalink();?>` to create the URL dynamically depending on the article under which you have included the share and submit links.
|
||||
|
||||
* `<?php the_title(); ?>` to dynamically create the title which is used when your content gets submitted to one of the sites.
|
||||
- `<?php the_title(); ?>` to dynamically create the title which is used when your content gets submitted to one of the sites.
|
||||
|
||||
Anyway, as I've said above some sites allow more to submit here and you'll find this also in capital letters. You have to adjust them manually too.
|
||||
|
||||
@ -89,13 +91,21 @@ Anyway, as I've said above some sites allow more to submit here and you'll find
|
||||
Just include an img element wrapped inside the link tag, like so:
|
||||
|
||||
```html
|
||||
<a href="http://del.icio.us/post?url=http://YOUR URL&title=YOUR TITLE&notes=YOUR NOTES" title="Save To Delicious"><img src="delicious.png" /> Delicious</a>
|
||||
<a
|
||||
href="http://del.icio.us/post?url=http://YOUR URL&title=YOUR TITLE&notes=YOUR NOTES"
|
||||
title="Save To Delicious"
|
||||
><img src="delicious.png" /> Delicious</a
|
||||
>
|
||||
```
|
||||
|
||||
And if you want to just use an icon with no text use just an img element without providing any link text:
|
||||
|
||||
```html
|
||||
<a href="http://del.icio.us/post?url=http://YOUR URL&title=YOUR TITLE&notes=YOUR NOTES" title="Save To Delicious"><img src="delicious.png" /></a>
|
||||
<a
|
||||
href="http://del.icio.us/post?url=http://YOUR URL&title=YOUR TITLE&notes=YOUR NOTES"
|
||||
title="Save To Delicious"
|
||||
><img src="delicious.png"
|
||||
/></a>
|
||||
```
|
||||
|
||||
## 3.2 Use CSS Background Images
|
||||
@ -103,7 +113,12 @@ And if you want to just use an icon with no text use just an img element without
|
||||
To me a more cleaner solution is to use the css background-image property to include the icon images. Just add a class or an id to every share link like so:
|
||||
|
||||
```html
|
||||
<a class="delicious" href="http://del.icio.us/post?url=http://YOUR URL&title=YOUR TITLE&notes=YOUR NOTES" title="Save To Delicious">Delicious</a>
|
||||
<a
|
||||
class="delicious"
|
||||
href="http://del.icio.us/post?url=http://YOUR URL&title=YOUR TITLE&notes=YOUR NOTES"
|
||||
title="Save To Delicious"
|
||||
>Delicious</a
|
||||
>
|
||||
```
|
||||
|
||||
And in your CSS select this class and style it with a background image. Assuming you want the site icon to appear left beside the link text you would also have to add some padding so the text won't overlap the icons:
|
||||
@ -175,7 +190,8 @@ Just click the Toggle All Links button to reveal them and click it again to hide
|
||||
### Plain
|
||||
|
||||
```html
|
||||
<code class="html"><!-- Digg This Link
|
||||
<code class="html"
|
||||
><!-- Digg This Link
|
||||
|
||||
Usage:
|
||||
--------------------------------------------------
|
||||
@ -190,11 +206,16 @@ Just click the Toggle All Links button to reveal them and click it again to hide
|
||||
media: default is news, choices are news, video or image
|
||||
topic: only one category
|
||||
-->
|
||||
<a href="http://digg.com/submit?url=YOUR URL&
|
||||
<a
|
||||
href="http://digg.com/submit?url=YOUR URL&
|
||||
title=YOUR TITLE&
|
||||
bodytext=YOUR DESCRIPTION&
|
||||
media=NEWS, VIDEO or IMAGES&
|
||||
topic=TOPIC&thumbnails=1" title="Digg This">Digg</a></code>
|
||||
topic=TOPIC&thumbnails=1"
|
||||
title="Digg This"
|
||||
>Digg</a
|
||||
></code
|
||||
>
|
||||
```
|
||||
|
||||
**Wordpress**
|
||||
|
||||
@ -151,12 +151,12 @@ This first checks if the feature exists and if a post thumbnail was addd with th
|
||||
|
||||
## 5. Resources And More Information
|
||||
|
||||
* WP Engineer: [About WordPress Post Thumbnail](http://wpengineer.com/about-wordpress-post-thumbnail/)
|
||||
* WP Engineer: [The Ultimative Guide For the_post_thumbnail In WordPress 2.9](http://wpengineer.com/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/)
|
||||
* WP Recipes: [WordPress 2.9 : Display post image with backward compatibility](http://www.wprecipes.com/wordpress-2-9-display-post-image-with-backward-compatibility)
|
||||
* Justin Tadlock: [Everything you need to know about WordPress 2.9’s post image feature](http://justintadlock.com/archives/2009/11/16/everything-you-need-to-know-about-wordpress-2-9s-post-image-feature)
|
||||
* Chris Harrison: [Post Thumbnails in RSS Feeds](http://cdharrison.com/2009/12/the_post_thumbnail-for-rss-feeds/)
|
||||
* Technosailor: [10 Things You Need to Know About WordPress 2.9](http://technosailor.com/2009/11/11/10-things-you-need-to-know-about-wordpress-2-9/)
|
||||
- WP Engineer: [About WordPress Post Thumbnail](http://wpengineer.com/about-wordpress-post-thumbnail/)
|
||||
- WP Engineer: [The Ultimative Guide For the_post_thumbnail In WordPress 2.9](http://wpengineer.com/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/)
|
||||
- WP Recipes: [WordPress 2.9 : Display post image with backward compatibility](http://www.wprecipes.com/wordpress-2-9-display-post-image-with-backward-compatibility)
|
||||
- Justin Tadlock: [Everything you need to know about WordPress 2.9’s post image feature](http://justintadlock.com/archives/2009/11/16/everything-you-need-to-know-about-wordpress-2-9s-post-image-feature)
|
||||
- Chris Harrison: [Post Thumbnails in RSS Feeds](http://cdharrison.com/2009/12/the_post_thumbnail-for-rss-feeds/)
|
||||
- Technosailor: [10 Things You Need to Know About WordPress 2.9](http://technosailor.com/2009/11/11/10-things-you-need-to-know-about-wordpress-2-9/)
|
||||
|
||||
Well and that's it. I would love to link to some smart WordPress Codex pages for these new template tags but at the time of this writing there simply isn't anything in the Codex about this.
|
||||
|
||||
|
||||
@ -44,53 +44,53 @@ If you find any problems you can [open an issue on GitHub](https://github.com/kr
|
||||
|
||||
### v1.0.1
|
||||
|
||||
* tested for WP 4.0
|
||||
* Spanish translation, muchas gracias to Andrew Kurtis from [webhostinghub.com](http://www.webhostinghub.com)
|
||||
* don't style comments badge with 0 comments
|
||||
* improved styles
|
||||
* admin settings page fixes
|
||||
* plugin icon and updated banner & screenshots
|
||||
- tested for WP 4.0
|
||||
- Spanish translation, muchas gracias to Andrew Kurtis from [webhostinghub.com](http://www.webhostinghub.com)
|
||||
- don't style comments badge with 0 comments
|
||||
- improved styles
|
||||
- admin settings page fixes
|
||||
- plugin icon and updated banner & screenshots
|
||||
|
||||
### v1.0.0
|
||||
|
||||
* new default style based on iOS 7
|
||||
* new setting to switch back to pre-iOS 7 style
|
||||
* rewritten from the ground up based on Tom McFarlin’s excellent WordPress Plugin Boilerplate
|
||||
* settings through WordPress Settings API
|
||||
* Retina banner for WordPress plugin repository listing
|
||||
* drop IE 8 support (still present in pre-iOS 7 style)
|
||||
* using Grunt for optimized images and minified css
|
||||
* confusing and ridiculous version number jump
|
||||
- new default style based on iOS 7
|
||||
- new setting to switch back to pre-iOS 7 style
|
||||
- rewritten from the ground up based on Tom McFarlin’s excellent WordPress Plugin Boilerplate
|
||||
- settings through WordPress Settings API
|
||||
- Retina banner for WordPress plugin repository listing
|
||||
- drop IE 8 support (still present in pre-iOS 7 style)
|
||||
- using Grunt for optimized images and minified css
|
||||
- confusing and ridiculous version number jump
|
||||
|
||||
### v0.3.6
|
||||
|
||||
* tested for WP 3.4
|
||||
* settings page: Retina ready icon for high dpi devices, css only submit button
|
||||
* updated german translation
|
||||
- tested for WP 3.4
|
||||
- settings page: Retina ready icon for high dpi devices, css only submit button
|
||||
- updated german translation
|
||||
|
||||
### v0.3.5
|
||||
|
||||
* IE 8 improvements: box shadow, light gradient through DXImageTransform filters (but no rounded corners, sorry)
|
||||
* current versions of IE & Opera are now among the tested browsers
|
||||
* updated settings page links
|
||||
- IE 8 improvements: box shadow, light gradient through DXImageTransform filters (but no rounded corners, sorry)
|
||||
- current versions of IE & Opera are now among the tested browsers
|
||||
- updated settings page links
|
||||
|
||||
### v0.3.4
|
||||
|
||||
* more descriptive readme and settings footer with links to blog post & github page
|
||||
* updated translation
|
||||
- more descriptive readme and settings footer with links to blog post & github page
|
||||
- updated translation
|
||||
|
||||
### v0.3.2
|
||||
|
||||
* Make the plugin work if symlinked
|
||||
- Make the plugin work if symlinked
|
||||
|
||||
### v0.3
|
||||
|
||||
* initial beta release
|
||||
- initial beta release
|
||||
|
||||
### v0.2
|
||||
|
||||
* added options to control whether the badges show up in admin menu or toolbar (default is both)
|
||||
- added options to control whether the badges show up in admin menu or toolbar (default is both)
|
||||
|
||||
### v0.1
|
||||
|
||||
* initial alpha release
|
||||
- initial alpha release
|
||||
|
||||
@ -34,11 +34,11 @@ That's of course all done by media queries with breakpoints at 600px, 768px and
|
||||
|
||||
But it's interesting to see how different the rendering of the site is in some mobile browsers. Here're some unmodified screenshots of the site in various mobile browsers on iOS 5 & Android 4:
|
||||
|
||||
* [iOS - Mobile Safari (iPhone 4S)](../media/mkv2-iphone.png)
|
||||
* [iOS - Mobile Safari (iPad)](../media/mkv2-ipad.png)
|
||||
* [Android - Android Browser (Nexus S)](../media/mkv2-android.png)
|
||||
* [Android - Chrome beta (Nexus S)](../media/mkv2-android-chrome.png)
|
||||
* [Android - Firefox (Nexus S)](../media/mkv2-android-firefox.png)
|
||||
- [iOS - Mobile Safari (iPhone 4S)](../media/mkv2-iphone.png)
|
||||
- [iOS - Mobile Safari (iPad)](../media/mkv2-ipad.png)
|
||||
- [Android - Android Browser (Nexus S)](../media/mkv2-android.png)
|
||||
- [Android - Chrome beta (Nexus S)](../media/mkv2-android-chrome.png)
|
||||
- [Android - Firefox (Nexus S)](../media/mkv2-android-firefox.png)
|
||||
|
||||
Notice the weird banding of the gradients in Firefox. And Android either ignores the min-device-pixel-ratio media query altogether or has just problems with the background-size css property.
|
||||
|
||||
|
||||
@ -21,8 +21,8 @@ Here’s a template for designing your own icons for the admin area of WordPress
|
||||
|
||||
There are basically two scenarios where you really need custom icons for WordPress’ admin area: when creating custom post types and when creating option pages for a plugin/theme. No matter what case, at least 3 icons are needed if you want to get it right:
|
||||
|
||||
* two 16px icons for the admin menu, one non-colored and one colored icon for the hover state
|
||||
* one 32px icon for the actual screen
|
||||
- two 16px icons for the admin menu, one non-colored and one colored icon for the hover state
|
||||
- one 32px icon for the actual screen
|
||||
|
||||
And since the admin area gets constantly optimized for devices which happen to have high-dpi screens (like 3rd generation iPad’s Retina screen) it’s a very good idea to include double sized @2x assets for all the icons mentioned above.
|
||||
|
||||
@ -54,8 +54,8 @@ While `register_post_type()` and `add_menu_page()` let you define a URL for an i
|
||||
|
||||
So when using this template with all those icons, I suggest you use the following snippets in your functions.php instead. Yes, I’m telling you to ignore the codex. But this is the only way to get what we want:
|
||||
|
||||
* hover state consistent to WordPress default menu behavior
|
||||
* control the display of the various image sizes for high-dpi devices with css media queries
|
||||
- hover state consistent to WordPress default menu behavior
|
||||
- control the display of the various image sizes for high-dpi devices with css media queries
|
||||
|
||||
So the following code just injects a stylesheet snippet into the `<head>` of all admin pages. This is a modification of [Randy Jensen’s code idea](http://randyjensenonline.com/thoughts/wordpress-custom-post-type-fugue-icons/).
|
||||
|
||||
@ -63,7 +63,7 @@ You can always refer to the inline commented versions of these snippets in the [
|
||||
|
||||
### Custom Post Type Icons
|
||||
|
||||
WordPress automatically puts an ID around your new menu item which contains the name of your custom post type (the $post_type parameter in `register_post_type()`). Just change this to your own post type name:
|
||||
WordPress automatically puts an ID around your new menu item which contains the name of your custom post type (the \$post_type parameter in `register_post_type()`). Just change this to your own post type name:
|
||||
|
||||
```php
|
||||
<?php
|
||||
@ -193,15 +193,15 @@ function option_page_icon() {
|
||||
|
||||
Just replace the bits in the ID selectors with your stuff. If you have problems finding the correct ID selector just inspect element in the admin area.
|
||||
|
||||
* * *
|
||||
---
|
||||
|
||||
Please note these snippets are just suggestions. I tried to make them as much universal as possible and tested them but depending on your project this could need adjustments. And obviously the css rules for high-dpi assets depend on a browser capable of CSS media queries but I guess all devices with such screens have modern browsers handling this.
|
||||
|
||||
But there are a lot of ways to improve on that:
|
||||
|
||||
* add these css rules to your own stylesheet if you’re using a custom admin area css file for your theme or plugin
|
||||
* enqueue the snippets with `wp_enqueue_style()` and the `admin_enqueue_scripts()` action hook
|
||||
* better yet, put them in a single stylesheet and enqueue them only on pages where they’re actually needed
|
||||
- add these css rules to your own stylesheet if you’re using a custom admin area css file for your theme or plugin
|
||||
- enqueue the snippets with `wp_enqueue_style()` and the `admin_enqueue_scripts()` action hook
|
||||
- better yet, put them in a single stylesheet and enqueue them only on pages where they’re actually needed
|
||||
|
||||
## License
|
||||
|
||||
|
||||
@ -23,6 +23,6 @@ But the solution can't be throwing a full file system at the user:
|
||||
|
||||
Just applying the PC concept of a file system to post-PC devices, like Android and Dropbox did, makes only geeks happy but not the majority of users. While useful it's still too abstract for most users. That's why even Android kind of hides the file system, there's no built in app to browse it directly. But at least Android has [Intents](http://developer.android.com/guide/components/intents-filters.html), allowing users to send any data between different apps.
|
||||
|
||||
Apple already solved the problem of a file system being too abstract for users a long time ago, but without any app lock in. The [Newton OS on MessagePads](http://en.wikipedia.org/wiki/Newton_(platform)) stored everything in object-oriented databases called [soups](http://www.canicula.com/newton/prog/soups.htm). The "union soup" could be accessed by any app ("packages" to be exactly) on the system. Today, this is happening only rudimentarily on iOS, like when you start typing a recipient in Mail and it gets auto-completed from the Address Book data which obviously is only possible with Apple's apps.
|
||||
Apple already solved the problem of a file system being too abstract for users a long time ago, but without any app lock in. The [Newton OS on MessagePads](<http://en.wikipedia.org/wiki/Newton_(platform)>) stored everything in object-oriented databases called [soups](http://www.canicula.com/newton/prog/soups.htm). The "union soup" could be accessed by any app ("packages" to be exactly) on the system. Today, this is happening only rudimentarily on iOS, like when you start typing a recipient in Mail and it gets auto-completed from the Address Book data which obviously is only possible with Apple's apps.
|
||||
|
||||
Soups took away the need of manual file management without cutting access to the content. iCloud needs to be the new soup.
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -33,14 +33,14 @@ They are completely styled with CSS3 so they're sharp on all screens no matter h
|
||||
Just drop in the `kbdftw.css` in your `head`:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="kbdfun.css">
|
||||
<link rel="stylesheet" href="kbdfun.css" />
|
||||
```
|
||||
|
||||
If you want to use the Android key style, include roboto.css before:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="roboto.css">
|
||||
<link rel="stylesheet" href="kbdfun.css">
|
||||
<link rel="stylesheet" href="roboto.css" />
|
||||
<link rel="stylesheet" href="kbdfun.css" />
|
||||
```
|
||||
|
||||
You also need to add all the Roboto font files from assets/fonts to your project.
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
kbd {
|
||||
font-size: 18px;
|
||||
color: #444444;
|
||||
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
|
||||
color: #444;
|
||||
font-family: 'Lucida Grande', Lucida, Verdana, sans-serif;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
@ -13,61 +13,76 @@ kbd {
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #bbb;
|
||||
background-color: #f7f7f7;
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, .1),
|
||||
rgba(0, 0, 0, 0)
|
||||
);
|
||||
background-repeat: repeat-x;
|
||||
box-shadow: 0px 2px 0 #bbbbbb, 0 3px 1px #999999, 0 3px 0 #bbbbbb, inset 0 1px 1px #ffffff, inset 0 -1px 3px #cccccc;
|
||||
box-shadow: 0 2px 0 #bbb, 0 3px 1px #999, 0 3px 0 #bbb, inset 0 1px 1px #fff,
|
||||
inset 0 -1px 3px #ccc;
|
||||
}
|
||||
|
||||
kbd.dark {
|
||||
color: #eeeeee;
|
||||
text-shadow: 0 -1px 0 #000000;
|
||||
color: #eee;
|
||||
text-shadow: 0 -1px 0 #000;
|
||||
border-color: #000;
|
||||
background-color: #4d4c4c;
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
|
||||
background-image: linear-gradient(
|
||||
rgba(0, 0, 0, .5),
|
||||
rgba(0, 0, 0, 0) 80%,
|
||||
rgba(0, 0, 0, 0)
|
||||
);
|
||||
background-repeat: no-repeat;
|
||||
box-shadow: 0px 2px 0 #000000, 0 3px 1px #999999, inset 0 1px 1px #aaaaaa, inset 0 -1px 3px #272727;
|
||||
box-shadow: 0 2px 0 #000, 0 3px 1px #999, inset 0 1px 1px #aaa,
|
||||
inset 0 -1px 3px #272727;
|
||||
}
|
||||
|
||||
|
||||
kbd.ios {
|
||||
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
|
||||
font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
|
||||
color: #000;
|
||||
border-color: rgba(0, 0, 0, 0.6);
|
||||
border-top-color: rgba(0, 0, 0, 0.4);
|
||||
border-color: rgba(0, 0, 0, .6);
|
||||
border-top-color: rgba(0, 0, 0, .4);
|
||||
background-color: #b7b7bc;
|
||||
background-image: linear-gradient(to bottom, #efeff0, #b7b7bc);
|
||||
background-repeat: repeat-x;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 #ffffff;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 2px 3px rgba(0, 0, 0, .1),
|
||||
inset 0 1px 0 #fff;
|
||||
}
|
||||
|
||||
|
||||
kbd.android {
|
||||
font-family: 'RobotoRegular', "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: #ffffff;
|
||||
font-family: 'RobotoRegular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
color: #fff;
|
||||
text-shadow: none;
|
||||
padding: .3em;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid rgba(0, 0, 0, .05);
|
||||
border-radius: 3px;
|
||||
background-clip: padding-box;
|
||||
background: #5e5e5e;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #444444, inset 0 1px 0 #868686;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, .3), 0 1px 0 #444,
|
||||
inset 0 1px 0 #868686;
|
||||
}
|
||||
|
||||
|
||||
kbd.android.dark {
|
||||
background: #222222;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #505050;
|
||||
background: #222;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, .7), 0 1px 0 #444,
|
||||
inset 0 1px 0 #505050;
|
||||
}
|
||||
|
||||
kbd.android.color {
|
||||
background: #083c5b;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #36647b;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, .7), 0 1px 0 #444,
|
||||
inset 0 1px 0 #36647b;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'RobotoRegular';
|
||||
src: url('/media/Roboto-Regular-webfont.eot');
|
||||
src: url('/media/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('/media/Roboto-Regular-webfont.woff') format('woff'), url('/media/Roboto-Regular-webfont.ttf') format('truetype'), url('/media/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
|
||||
src: url('/media/Roboto-Regular-webfont.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('/media/Roboto-Regular-webfont.woff') format('woff'),
|
||||
url('/media/Roboto-Regular-webfont.ttf') format('truetype'),
|
||||
url('/media/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@ -35,10 +35,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
|
||||
|
||||
|
||||
@ -64,18 +64,18 @@ In order for all your system traffic being routed through Tor you need to adjust
|
||||
|
||||
## Set network proxy settings via System Preferences
|
||||
|
||||
You can do this under *System Preferences > Network* by creating a specific Tor network location for it:
|
||||
You can do this under _System Preferences > Network_ by creating a specific Tor network location for it:
|
||||
|
||||
1. From Location dropdown at the top, select *Edit Locations...*
|
||||
2. Create a new location by hitting the plus button and name it *Tor*. Hitting Done will select the new location which is now ready to be configured.
|
||||
3. Go to *Advanced > Proxies* and activate *SOCKS Proxy* and add those values:
|
||||
1. From Location dropdown at the top, select _Edit Locations..._
|
||||
2. Create a new location by hitting the plus button and name it _Tor_. Hitting Done will select the new location which is now ready to be configured.
|
||||
3. Go to _Advanced > Proxies_ and activate _SOCKS Proxy_ and add those values:
|
||||
|
||||
- *SOCKS proxy server*: `localhost`
|
||||
- *Port*: `9050`
|
||||
- _SOCKS proxy server_: `localhost`
|
||||
- _Port_: `9050`
|
||||
|
||||
|
||||
|
||||
After hitting *OK* & *Apply* at the initial network screen, you can easily switch to this newly created location from your menu bar under * > Location* whenever you start up Tor.
|
||||
After hitting _OK_ & _Apply_ at the initial network screen, you can easily switch to this newly created location from your menu bar under _ > Location_ whenever you start up Tor.
|
||||
|
||||
Switching to the Tor location routes all network traffic on your system through Tor. Note that you have to repeat those steps for every other network interface if you use, say, Wi-Fi and Ethernet interchangeably.
|
||||
|
||||
@ -143,5 +143,5 @@ But the most recent Chrome version automatically picks up macOS's native proxy s
|
||||
|
||||
Always [check](https://check.torproject.org) your Tor connection with whatever app you're using and if needed set the proxy preferences manually in the respective app with:
|
||||
|
||||
- *SOCKS proxy server*: `localhost`
|
||||
- *Port*: `9050`
|
||||
- _SOCKS proxy server_: `localhost`
|
||||
- _Port_: `9050`
|
||||
|
||||
@ -29,7 +29,8 @@ So all buttons are just set in Apple’s San Francisco UI font with this funky f
|
||||
|
||||
```css
|
||||
.badge {
|
||||
font-family: system, -apple-system, '.SFNSDisplay-Regular', 'San Francisco', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
||||
font-family: system, -apple-system, '.SFNSDisplay-Regular', 'San Francisco', 'Helvetica Neue',
|
||||
'Helvetica', 'Arial', sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
@ -54,7 +55,10 @@ bower install appstorebadges --save
|
||||
Or just directly link to the css file in the [GitHub repo](https://github.com/kremalicious/appstorebadges):
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://rawgit.com/kremalicious/appstorebadges/master/dist/appstorebadges.min.css">
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://rawgit.com/kremalicious/appstorebadges/master/dist/appstorebadges.min.css"
|
||||
/>
|
||||
```
|
||||
|
||||
### HTML Markup
|
||||
|
||||
@ -26,9 +26,7 @@ If you use Hyper along with those apps, this theme is for you. It is purely a ta
|
||||
Install by adding `hyper-mac-pro` to the plugins property in your `~/.hyper.js`:
|
||||
|
||||
```js
|
||||
plugins: [
|
||||
'hyper-mac-pro'
|
||||
]
|
||||
plugins: ['hyper-mac-pro']
|
||||
```
|
||||
|
||||
If you're using `hpm`, from the command line:
|
||||
|
||||
@ -16,16 +16,16 @@ Plugin for [Gatsby](https://www.gatsbyjs.org) to add tracking with the open-sour
|
||||
|
||||
## Features
|
||||
|
||||
* include tracking code in all server-side rendered routes
|
||||
* track all route views as custom events
|
||||
* load tracking scripts at end of body tag
|
||||
* use image tracking fallback for `<noscript>`
|
||||
* don't load anything when visitor has Do Not Track enabled
|
||||
* don't load anything in non-production environments
|
||||
* consent mode for privacy
|
||||
* allow loading tracking script locally
|
||||
* define paths to be excluded from tracking
|
||||
* dev mode for local development
|
||||
- include tracking code in all server-side rendered routes
|
||||
- track all route views as custom events
|
||||
- load tracking scripts at end of body tag
|
||||
- use image tracking fallback for `<noscript>`
|
||||
- don't load anything when visitor has Do Not Track enabled
|
||||
- don't load anything in non-production environments
|
||||
- consent mode for privacy
|
||||
- allow loading tracking script locally
|
||||
- define paths to be excluded from tracking
|
||||
- dev mode for local development
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@ -37,7 +37,6 @@ module.exports = {
|
||||
quality: 80,
|
||||
withWebp: true,
|
||||
linkImagesToOriginal: true,
|
||||
sizeByPixelDensity: true,
|
||||
showCaptions: true,
|
||||
backgroundColor: '#e7eef4'
|
||||
}
|
||||
|
||||
28
package.json
28
package.json
@ -12,16 +12,14 @@
|
||||
"ssr": "npm run build && serve -s public/",
|
||||
"rename:scrypt": "sed -i -e 's|./build/Release/scrypt|scrypt|g' node_modules/scrypt/index.js",
|
||||
"copy": "cp -R content/media/ public",
|
||||
"format": "run-p format:js format:css format:md format:yaml",
|
||||
"format:js": "prettier --write '**/*.{js,jsx}'",
|
||||
"format": "run-p 'prettier -- --write' format:css",
|
||||
"format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'",
|
||||
"format:md": "prettier --write '**/*.md'",
|
||||
"format:yaml": "prettier --write \"**/*.y?(a)ml\"",
|
||||
"lint": "run-p --continue-on-error lint:js lint:css lint:yaml lint:md",
|
||||
"lint:js": "eslint --ignore-path .gitignore --ignore-path .prettierignore --ext .js,.jsx .",
|
||||
"lint:css": "stylelint ./src/**/*.{css,scss}",
|
||||
"lint:css": "prettier-stylelint --quiet 'src/**/*.{css,scss}'",
|
||||
"lint:md": "markdownlint './**/*.{md,markdown}' --ignore './{node_modules,public,.cache,.git}/**/*'",
|
||||
"lint:yaml": "prettier '**/*.{yml,yaml}' --list-different",
|
||||
"lint": "run-p --continue-on-error lint:js lint:css lint:yaml lint:md",
|
||||
"prettier": "prettier '**/*.{js,jsx,yml,yaml,md}'",
|
||||
"test": "npm run lint && jest --coverage",
|
||||
"test:watch": "npm run lint && jest --coverage --watch",
|
||||
"deploy": "./scripts/deploy.sh",
|
||||
@ -34,7 +32,7 @@
|
||||
"dms2dec": "^1.1.0",
|
||||
"fast-exif": "^1.0.1",
|
||||
"fraction.js": "^4.0.12",
|
||||
"gatsby": "^2.4.2",
|
||||
"gatsby": "^2.4.3",
|
||||
"gatsby-image": "^2.0.41",
|
||||
"gatsby-plugin-catch-links": "^2.0.13",
|
||||
"gatsby-plugin-favicon": "^3.1.6",
|
||||
@ -45,7 +43,7 @@
|
||||
"gatsby-plugin-offline": "^2.1.0",
|
||||
"gatsby-plugin-react-helmet": "^3.0.12",
|
||||
"gatsby-plugin-sass": "^2.0.11",
|
||||
"gatsby-plugin-sharp": "^2.0.36",
|
||||
"gatsby-plugin-sharp": "^2.0.37",
|
||||
"gatsby-plugin-sitemap": "^2.1.0",
|
||||
"gatsby-plugin-svgr": "^2.0.2",
|
||||
"gatsby-plugin-webpack-size": "^0.0.3",
|
||||
@ -59,7 +57,7 @@
|
||||
"gatsby-source-graphql": "^2.0.18",
|
||||
"gatsby-transformer-remark": "^2.3.12",
|
||||
"gatsby-transformer-sharp": "^2.1.19",
|
||||
"graphql": "^14.2.1",
|
||||
"graphql": "^14.3.0",
|
||||
"intersection-observer": "^0.7.0",
|
||||
"js-scrypt": "^0.2.0",
|
||||
"load-script": "^1.0.0",
|
||||
@ -76,30 +74,30 @@
|
||||
"react-pose": "^4.0.8",
|
||||
"react-qr-svg": "^2.2.1",
|
||||
"react-time": "^4.3.0",
|
||||
"react-transition-group": "^4.0.0",
|
||||
"react-transition-group": "^4.0.1",
|
||||
"remark": "^10.0.1",
|
||||
"remark-react": "^5.0.1",
|
||||
"slugify": "^1.3.4",
|
||||
"terser": "^3.17.0",
|
||||
"web3": "^1.0.0-beta.54"
|
||||
"web3": "^1.0.0-beta.55"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/node": "^7.2.2",
|
||||
"@babel/preset-env": "^7.4.4",
|
||||
"@svgr/webpack": "^4.2.0",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"babel-jest": "^24.7.1",
|
||||
"babel-jest": "^24.8.0",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-config-prettier": "^4.2.0",
|
||||
"eslint-loader": "^2.1.2",
|
||||
"eslint-plugin-graphql": "^3.0.3",
|
||||
"eslint-plugin-jsx-a11y": "^6.2.1",
|
||||
"eslint-plugin-prettier": "^3.0.1",
|
||||
"eslint-plugin-prettier": "^3.1.0",
|
||||
"eslint-plugin-react": "^7.13.0",
|
||||
"fs-extra": "^8.0.0",
|
||||
"identity-obj-proxy": "^3.0.0",
|
||||
"jest": "^24.7.1",
|
||||
"jest-dom": "^3.1.4",
|
||||
"jest": "^24.8.0",
|
||||
"jest-dom": "^3.2.2",
|
||||
"markdownlint-cli": "^0.16.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"ora": "^3.4.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user