1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-23 01:30:01 +01:00

image fixes and post fixes

This commit is contained in:
Matthias Kretschmann 2018-11-17 16:14:37 +01:00
parent 69dfe62264
commit a0da051f36
Signed by: m
GPG Key ID: 606EEEF3C479A91F
11 changed files with 107 additions and 84 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 MiB

After

Width:  |  Height:  |  Size: 2.6 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.7 MiB

View File

@ -11,6 +11,9 @@ coinhive: true
tags:
- goodies
- icon
- macos
- aperture
redirect_from:
- "/new-goodies-aperture-file-types-icons/"
- "/goodie-updated-aperture-file-types-v11/"
@ -18,11 +21,12 @@ redirect_from:
- "/2008/04/aperture-file-types/"
---
These icons are free for your personal use and include icons for all file types Apples Aperture 2.0 can handle (.jpeg, .gif, .tiff, .png, .pdf, .psd, .arw, .cr2, .crw, .mos, .nef, .raf, .raw, .srw, .tif, .oly, .fff, .3fr, .dng, .mrw, .pef, .srf, .orf).
These icons are free for your personal use and include icons for all file types Apples Aperture 2.0 can handle.
- Mac + Win + Linux + iContainer
- Leopard ready (512×512)
- custom 32px and 16px icons
- works for .jpeg, .gif, .tiff, .png, .pdf, .psd, .arw, .cr2, .crw, .mos, .nef, .raf, .raw, .srw, .tif, .oly, .fff, .3fr, .dng, .mrw, .pef, .srf, .orf
Get them and have fun.
@ -30,4 +34,4 @@ Get them and have fun.
<a class="icon-download" href="../media/aperturefiletypes_by_kremalicious.zip">Download</a>
</p>
And don't forget to read my article about [how to change the generic image icons in Mac OS X Leopard](https://kremalicious.com/2008/04/changing-the-image-icons-in-mac-os-x-leopard/).
And don't forget to read my article about [how to change the generic image icons in Mac OS X Leopard](/changing-the-image-icons-in-mac-os-x-leopard/).

View File

@ -8,9 +8,9 @@ author: Matthias Kretschmann
date: 2008-04-04 10:47:23+00:00
tags:
- design
- macos
- icon
- design
- macos
- icon
---
Nice article on Smashing Magazine by Kate England. It's the Human Interface Guidelines for icons in a nutshell: [Mac OS X Leopard: Designers Guide to Icons](http://www.smashingmagazine.com/2008/04/04/mac-os-x-leopard-designers-guide-to-icons):

View File

@ -8,10 +8,13 @@ date: 2008-04-09 13:13:42+00:00
coinhive: true
tags:
- design
- tutorial
- macos
- icon
- design
- tutorial
- macos
- icon
redirect_from:
- /2008/04/changing-the-image-icons-in-mac-os-x-leopard/
---
[![Aperture File Types](../media/aperturefiletypes.png)](../media/aperturefiletypes.png)
@ -20,7 +23,6 @@ After i released my [Aperture File Types icon set](http://www.kremalicious.com/g
<!-- more -->
## Changing Preview.app icons
[![Open with Preview](../media/openwithpreview.png)](../media/openwithpreview.png)Image icons in Mac OS X doesn't really belong to the system icons. Instead they come from [Preview.app](http://www.apple.com/macosx/features/300.html%23preview) which is the factory default application for viewing images on Mac OS X.

View File

@ -26,7 +26,7 @@ This first preserved photograph _View from the Window at Le Gras_ is the one you
Either just download the icons or read the exciting story about the First Photograph.
![](../media/cameraobscura11_all.png)
![Icon Overview](../media/cameraobscura11_all.png)
## The story behind these icons
@ -34,7 +34,7 @@ There's a fascinating story behind these icons which is nothing more than the st
### Nicéphore Niépce and The First Photograph
<img src="../media/nicephore-niepce.jpg" alt="Nicéphore Niépce, ca. 1795" title="Nicéphore Niépce, ca. 1795">
![Nicéphore Niépce, ca. 1795](../media/nicephore-niepce.jpg "Nicéphore Niépce, ca. 1795")
Niépce was a multitasking French inventor who became famous for his experiments trying to preserve the projected image inside of the Camera Obscura. The Camera Obscura uses a well known optical phenomenon which is known to mankind for quite a long time.
@ -46,7 +46,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!
<img src="../media/view_from_the_window_at_le_gras_nicephore_niepce.jpg" alt="View from the Window at Le Gras" title="View from the Window at Le Gras">
![View from the Window at Le Gras](../media/view_from_the_window_at_le_gras_nicephore_niepce.jpg "View from the Window at Le Gras")
By the way, in 2002 another picture made by Niépce was discovered which dates back to 1825. It was made in a process he called Heliogravure and it was an image of an (engraving) image (showing a man leading a horse). But since the scientific definition of the First Photograph is "the world's first permanent photograph from nature", _View from the Window at Le Gras_ remains the first "real" photograph.

View File

@ -37,6 +37,8 @@ module.exports = {
path: path.join(__dirname, 'src', 'images')
}
},
'gatsby-plugin-sharp',
'gatsby-transformer-sharp',
{
resolve: 'gatsby-transformer-remark',
options: {
@ -45,11 +47,11 @@ module.exports = {
{
resolve: 'gatsby-remark-images',
options: {
maxWidth: 940,
maxWidth: 630,
quality: 80,
withWebp: true,
linkImagesToOriginal: false,
// sizeByPixelDensity: true,
sizeByPixelDensity: true,
showCaptions: true,
backgroundColor: '#e7eef4'
}
@ -223,8 +225,6 @@ module.exports = {
},
'gatsby-plugin-webpack-size',
'gatsby-plugin-react-helmet',
'gatsby-plugin-sharp',
'gatsby-transformer-sharp',
'gatsby-plugin-catch-links',
'gatsby-redirect-from',
'gatsby-plugin-meta-redirect',

View File

@ -99,7 +99,8 @@
"stylelint": "^9.8.0",
"stylelint-config-css-modules": "^1.3.0",
"stylelint-config-standard": "^18.2.0",
"stylelint-scss": "^3.4.0"
"stylelint-scss": "^3.4.0",
"why-did-you-update": "^1.0.6"
},
"engines": {
"node": ">=10.0.0"

View File

@ -6,6 +6,11 @@ import Header from './organisms/Header'
import Footer from './organisms/Footer'
import styles from './Layout.module.scss'
// if (process.env.NODE_ENV !== 'production') {
// const { whyDidYouUpdate } = require('why-did-you-update')
// whyDidYouUpdate(React)
// }
const Layout = ({ children }) => (
<>
<Typekit />

View File

@ -1,4 +1,4 @@
import React from 'react'
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import styles from './IconLinks.module.scss'
@ -8,36 +8,45 @@ import { ReactComponent as Facebook } from '../../images/facebook.svg'
import { ReactComponent as Rss } from '../../images/rss.svg'
import { ReactComponent as Jsonfeed } from '../../images/jsonfeed.svg'
const NetworkIcon = ({ link }) => {
let Icon
if (link.includes('twitter')) {
Icon = <Twitter className={styles.twitter} />
} else if (link.includes('github')) {
Icon = <Github className={styles.github} />
} else if (link.includes('facebook')) {
Icon = <Facebook className={styles.facebook} />
} else if (link.includes('feed.xml')) {
Icon = <Rss className={styles.rss} />
} else if (link.includes('feed.json')) {
Icon = <Jsonfeed className={styles.json} />
class NetworkIcon extends PureComponent {
static propTypes = {
link: PropTypes.string.isRequired
}
return Icon
render() {
const { link } = this.props
let Icon
if (link.includes('twitter')) {
Icon = <Twitter className={styles.twitter} />
} else if (link.includes('github')) {
Icon = <Github className={styles.github} />
} else if (link.includes('facebook')) {
Icon = <Facebook className={styles.facebook} />
} else if (link.includes('feed.xml')) {
Icon = <Rss className={styles.rss} />
} else if (link.includes('feed.json')) {
Icon = <Jsonfeed className={styles.json} />
}
return Icon
}
}
const IconLinks = ({ links }) => (
<p>
{links.map(link => (
<a key={link} className={styles.link} href={link} title={link}>
<NetworkIcon link={link} />
</a>
))}
</p>
)
export default class IconLinks extends PureComponent {
static propTypes = {
links: PropTypes.array.isRequired
}
IconLinks.propTypes = {
links: PropTypes.array.isRequired
render() {
return (
<p>
{this.props.links.map(link => (
<a key={link} className={styles.link} href={link} title={link}>
<NetworkIcon link={link} />
</a>
))}
</p>
)
}
}
export default IconLinks

View File

@ -1,4 +1,4 @@
import React from 'react'
import React, { PureComponent } from 'react'
import { StaticQuery, graphql } from 'gatsby'
import Img from 'gatsby-image'
import IconLinks from './IconLinks'
@ -32,42 +32,44 @@ const query = graphql`
}
`
const Vcard = () => (
<StaticQuery
query={query}
render={data => {
const {
twitter,
github,
facebook,
name,
uri
} = data.site.siteMetadata.author
export default class Vcard extends PureComponent {
render() {
return (
<StaticQuery
query={query}
render={data => {
const {
twitter,
github,
facebook,
name,
uri
} = data.site.siteMetadata.author
const avatar = data.avatar.edges[0].node.childImageSharp.fixed
const links = [twitter, github, facebook]
const avatar = data.avatar.edges[0].node.childImageSharp.fixed
const links = [twitter, github, facebook]
return (
<div className="vcard author">
<Img
className={styles.avatar}
fixed={avatar}
alt="avatar"
width="80"
height="80"
/>
<p className={styles.description}>
Blog of designer &amp; developer{' '}
<a className="fn" rel="author" href={uri}>
{name}
</a>
</p>
return (
<div className="vcard author">
<Img
className={styles.avatar}
fixed={avatar}
alt="avatar"
width="80"
height="80"
/>
<p className={styles.description}>
Blog of designer &amp; developer{' '}
<a className="fn" rel="author" href={uri}>
{name}
</a>
</p>
<IconLinks links={links} />
</div>
)
}}
/>
)
export default Vcard
<IconLinks links={links} />
</div>
)
}}
/>
)
}
}