From d134cef26701ce9e500ced703d4ec2c056132179 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 11 Jul 2018 17:56:13 +0200 Subject: [PATCH 001/100] start refactor --- .babelrc | 3 - .editorconfig | 7 +- .eslintrc | 27 + .gitignore | 6 +- .prettierignore | 4 + .prettierrc | 5 + .stylelintrc | 12 + .travis.yml | 40 +- Gemfile | 20 - README.md | 23 +- Rakefile | 93 ---- _ci/build.sh | 11 - _ci/deploy.sh | 17 - _ci/setup.sh | 19 - _config.dev.yml | 3 - _config.yml | 76 --- _src/_plugins/octopress_filters.rb | 96 ---- _src/_plugins/titlecase.rb | 36 -- .../01f8b0b8fcc611e19b5b123138140bce_7.jpg | Bin ...anton-henning-heimat-schaffen-simpsons.jpg | Bin ...-thanks-for-the-tip-little-orange-blob.jpg | Bin ...hindu-temple-appears-around-the-corner.jpg | Bin .../media}/2017-02-19-rotterdam-coats.jpg | Bin ...017-02-21-david-chipperfield-staircase.jpg | Bin .../media}/2017-02-26-eu-gotham-city.jpg | Bin .../media}/2017-02-27-amsterdam-cliche.jpg | Bin .../2017-02-27-its-dark-and-i-dont-exist.jpg | Bin .../media}/2017-02-28-stedelijk-museum.jpg | Bin ...2017-02-28-temple-guardian-rijksmuseum.jpg | Bin .../2017-02-28-watching-the-night-watch.jpg | Bin .../2017-04-16-hamburgs-elbphilharmonie.jpg | Bin ...17-07-05-kapaleeshwarar-temple-chennai.jpg | Bin ...-07-08-kochis-streetart-game-is-strong.jpg | Bin ...17-07-09-orphaned-elephant-with-friend.jpg | Bin .../media}/2017-07-10-kochis-dhobhi-ghat.jpg | Bin ...7-07-13-mumbai-hand-painted-typography.jpg | Bin ...7-07-13-obligatory-gate-of-india-photo.jpg | Bin ...ati-shivaji-maharaj-vastu-sangrahalaya.jpg | Bin .../2017-11-10-acropolis-the-erechtheum.jpg | Bin .../2017-11-10-acropolis-the-parthenon.jpg | Bin .../2017-11-10-acropolis-the-propylaea.jpg | Bin .../media}/2017-12-16-sagrada-familia.jpg | Bin .../media}/2017-12-27-sao-paulo-traffic.jpg | Bin ...01-04-passagem-literaria-da-consolacao.jpg | Bin .../media}/2018-01-05-samba-school.jpg | Bin .../2ba6eeba81b111e1989612313815112c_7.jpg | Bin .../2ca7a094e10f11e1868c12313817a130_7.jpg | Bin .../41b5a454a43811e1989612313815112c_7.jpeg | Bin .../44af28f2805b11e18cf91231380fd29b_7.jpg | Bin .../5df6e0a280c911e1a87612313804ec91_7.jpg | Bin .../5fc688aa953811e180c9123138016265_7.jpg | Bin .../619b3900f92911e1a31922000a1cddf1_7.jpg | Bin .../6313cc1e7db611e180c9123138016265_7.jpg | Bin .../66a6e0c0d25a11e1a94522000a1e8aaf_7.jpg | Bin .../690fe368a81911e1b2fe1231380205bf_7.jpg | Bin .../6c4003f2fe9911e1ae9122000a1e9e21_7.jpg | Bin .../7838011c80ce11e19e4a12313813ffc0_7.jpg | Bin .../7e2b28f881b711e1af7612313813f8e8_7.jpg | Bin .../7f9397a265d811e1b9f1123138140926_7.jpg | Bin .../80a136dabff711e188131231381b5c25_7.jpg | Bin .../media}/8372983659_da0e88ca79_o.jpg | Bin .../media}/8450618380_83c64006c6_o.jpg | Bin .../media}/8455835942_a9b9100373_o.jpg | Bin .../84f9d2c4fb7411e19ca422000a1d0119_7.jpg | Bin .../media}/8776417095_43553c88c2_o.jpg | Bin .../media}/8782995066_e90ff6b3ae_o.jpg | Bin .../97a44d6080b711e181bd12313817987b_7.jpg | Bin .../media}/A-Long-Time-Ago.jpg | Bin .../media}/Adiumeetie-Dock-Preview.png | Bin .../media}/Adiumeetie-Teaser-AdiumIcon.png | Bin .../media}/Adiumeetie-Teaser.jpg | Bin .../media}/Badged-Teaser-kremalicious.png | Bin .../media}/Badged-Teaser-kremalicious@2x.png | Bin .../Basically-The-Monolith-Is-On-My-Desk.jpg | Bin .../media}/Blaue-Tuerme-1.jpg | Bin .../media}/Bonsai-5-Version-2.jpg | Bin .../media}/Broken-Nexus-S-Screen.jpg | Bin .../media}/Delibar-Icons-Teaser.jpg | Bin .../media}/Delibar-Icons-Teaser2.png | Bin .../media}/Enjoying-Paper.jpg | Bin .../Free-Monkey-Breath-Not-Soylent-Green.jpg | Bin .../media}/GDR-Helvetica.jpg | Bin .../media}/Glowing-Star-Inside.jpg | Bin .../media}/Historic-Flood-Levels.jpg | Bin .../media}/Instagram-Swipe.png | Bin .../media}/MG_1735-Version-2.jpg | Bin {_src/_media => content/media}/MG_1920.jpg | Bin .../media}/MG_5885_2006-7-23.jpg | Bin .../media}/MG_9313_2007-02-10.jpg | Bin .../media}/MomCorp-Walls-Overview.png | Bin .../Monstrum_Gameboy_Catherine_Kaleel.jpg | Bin .../_media => content/media}/Office-Desk.jpg | Bin .../media}/PS_CR2FileIcon.png | Bin .../media}/Project-Purple-Dribbble.png | Bin .../media}/Teaser-Adiumeetie.jpg | Bin .../media}/Teaser-Aperture-File-Types.jpg | Bin .../media}/Teaser-Camera-Obscura-Icons.jpg | Bin .../media}/Teaser-Camera-Obscura-Walls.jpg | Bin .../media}/Teaser-Chives.jpg | Bin .../media}/Teaser-Coffee-Cup-Icon.jpg | Bin .../media}/Teaser-Delibar-Icons.jpg | Bin .../media}/Teaser-Icy-Box.jpg | Bin .../media}/Teaser-Mars-U.jpg | Bin .../media}/Teaser-MomCorp-Wall.png | Bin .../media}/Teaser-Out-Of-Whale-Oil.jpg | Bin .../media}/Teaser-Project-Purple.png | Bin .../media}/Teaser-Twitter-Crisp.jpg | Bin .../media}/Teaser-iPixelPad.png | Bin .../media}/Twitter-Crisp-16.png | Bin .../media}/Typeface-condoms.jpg | Bin .../View-from-the-Window-at-Le-Gras.png | Bin ...ows-8-Metro-tile-kremalicious-all-apps.png | Bin ...ws-8-Metro-tile-kremalicious-in-action.png | Bin .../Windows-8-Metro-tile-kremalicious.png | Bin .../WordPress-Admin-Icons-Template-Filled.png | Bin .../media}/a-storm-is-coming.jpg | Bin .../media}/adiumeetie-by-kremalicious.zip | Bin .../media}/adiumeetie-goodies-teaser.png | Bin .../aff38e2c7f5311e1b10e123138105d6b_7.jpg | Bin .../media}/ai-wei-wei-stools.jpg | Bin .../media}/airfield-reference-point.jpg | Bin .../media}/android-galaxy-note.png | Bin .../media}/android-navigation-buttons.png | Bin {_src/_media => content/media}/apassis.png | Bin .../media}/aperture-impression.png | Bin .../media}/aperture-plugin128.png | Bin .../_media => content/media}/aperture128.png | Bin .../_media => content/media}/aperture15_1.png | Bin .../media}/aperture15_10.png | Bin .../media}/aperture15_11.png | Bin .../media}/aperture15_12.png | Bin .../media}/aperture15_13.png | Bin .../media}/aperture15_14.jpg | Bin .../media}/aperture15_15.png | Bin .../_media => content/media}/aperture15_2.png | Bin .../_media => content/media}/aperture15_3.png | Bin .../_media => content/media}/aperture15_4.png | Bin .../_media => content/media}/aperture15_5.png | Bin .../_media => content/media}/aperture15_6.png | Bin .../_media => content/media}/aperture15_7.png | Bin .../_media => content/media}/aperture15_8.jpg | Bin .../_media => content/media}/aperture15_8.png | Bin {_src/_media => content/media}/aperture72.png | Bin {_src/_media => content/media}/aperture97.png | Bin .../media}/aperture_borderfx.png | Bin .../_media => content/media}/aperture_bt.png | Bin .../media}/apertureedit_interface.jpg | Bin .../media}/apertureedit_logo.png | Bin .../media}/apertureedit_logo2.png | Bin .../media}/aperturefiletypes.png | Bin .../aperturefiletypes_by_kremalicious.zip | Bin .../media}/apertureimport_automatic.png | Bin .../media}/apertureimport_automator.png | Bin .../media}/apertureimportplugin.png | Bin .../_media => content/media}/aperturescan.png | Bin .../media}/architect-icon.jpg | Bin .../_media => content/media}/architect-ui.png | Bin {_src/_media => content/media}/automator.png | Bin .../media}/badged-settings.png | Bin .../media}/behind-the-art.jpg | Bin .../media}/berliner_bruecke1-HDR-16bit.jpg | Bin {_src/_media => content/media}/bonjour97.png | Bin .../_media => content/media}/box_download.png | Bin .../media}/buddha-colorscheme.png | Bin .../media}/buddha-printer.png | Bin ...ramt_01_HDR_tonemapped_16bit-Version-2.jpg | Bin .../c0c45b6eeea211e1ad8e22000a1cdbb8_7.jpg | Bin .../media}/camera_obscura_wall_teaser.png | Bin .../media}/cameraobscura11_all.png | Bin .../media}/cameraobscura11_all_thumb.png | Bin .../media}/cameraobscura_aperture_128.png | Bin .../media}/cameraobscura_inuse.png | Bin .../media}/cameraobscura_teaser1.png | Bin {_src/_media => content/media}/canon1.png | Bin {_src/_media => content/media}/canon1000d.png | Bin {_src/_media => content/media}/canon2.png | Bin {_src/_media => content/media}/canon3.png | Bin {_src/_media => content/media}/canon4.png | Bin .../media}/canondrivercontents.png | Bin .../media}/canoscanlide500f.jpg | Bin .../ce2d29f40df411e2ad5812313817873b_7.jpg | Bin .../media}/chives_by_kremalicious.zip | Bin .../media}/chives_wallpaper_teaser.png | Bin {_src/_media => content/media}/chrome-ui.png | Bin .../media}/coda-clips-icon-files.zip | Bin .../media}/codaclips-hud.png | Bin .../media}/codaclips-icon128.png | Bin .../media}/codaclips-icon48.png | Bin .../media}/codaclips-placeholder.png | Bin .../media}/codaclips-teaser.png | Bin .../media}/coffee-cup-empty.png | Bin .../media}/coffee-cup-icon-kremalicious.png | Bin .../media}/coffee-cup-icon-teaser.png | Bin .../media}/coffee-showcase-apple.png | Bin .../media}/coffee-showcase-baumann.png | Bin .../media}/coffee-showcase-benedik.png | Bin .../media}/coffee-showcase-brasgalla.png | Bin .../media}/coffee-showcase-brasgalla2.png | Bin .../media}/coffee-showcase-cappuccinosofa.png | Bin .../media}/coffee-showcase-england.png | Bin .../media}/coffee-showcase-flarup.png | Bin .../media}/coffee-showcase-jaeppinen.png | Bin .../media}/coffee-showcase-kaycaffeine.png | Bin .../media}/coffee-showcase-kretschmann.png | Bin .../media}/coffee-showcase-lanham.png | Bin .../media}/coffee-showcase-lopezruiz.png | Bin .../media}/coffee-showcase-lovecappu.png | Bin .../media}/coffee-showcase-macrabbit.png | Bin .../media}/coffee-showcase-matu.png | Bin .../media}/coffee-showcase-rask1.png | Bin .../media}/coffee-showcase-rask2.png | Bin .../media}/coffee-showcase-susumo.png | Bin .../media}/coffee-showcase-times.png | Bin .../media}/coffee-showcase-tut-abduzeedo.png | Bin .../media}/coffee-showcase-tut-houle.png | Bin .../media}/coffee-showcase-tut-psdtuts.png | Bin .../media}/coffee-showcase-tut-vectuts.png | Bin .../media}/coffee-showcase-vegrafik.png | Bin .../media}/coffee-showcase-visualpharm.png | Bin .../media}/coffee_cup_by_kremalicious.zip | Bin .../media}/coolhaven-rotterdam.jpg | Bin .../media}/creaceed_hydra.png | Bin {_src/_media => content/media}/css.png | Bin .../media}/custom-gravatar.jpg | Bin .../de2ac24c7db911e1b9f1123138140926_7.jpg | Bin .../media}/delibar-by-kremalicious.zip | Bin .../media}/delibar-website.png | Bin .../media}/deliciouslinks.png | Bin .../_media => content/media}/dft-light_ui.jpg | Bin .../_media => content/media}/dft-ozone_ui.jpg | Bin .../media}/dft-powerstroke_uis.jpg | Bin .../_media => content/media}/diskimage98.png | Bin .../media}/dpmatte_index1.jpg | Bin {_src/_media => content/media}/efs_18-200.png | Bin .../media}/efs_18-200_thumb.png | Bin .../media}/elegancesociale_smashingteaser.png | Bin .../media}/encryption_certificate.png | Bin .../media}/encryption_mail2.png | Bin .../_media => content/media}/eos_50D_back.png | Bin .../media}/eos_50D_back_thumb.png | Bin .../media}/eos_50D_front.png | Bin .../media}/eos_50D_front_thumb.png | Bin .../_media => content/media}/filevault98.png | Bin .../_media => content/media}/firefox-icon.png | Bin .../media}/firefox3promo.png | Bin .../media}/floating-sky-1.jpg | Bin {_src/_media => content/media}/free-pdf.png | Bin .../media}/fry-2009-kremalicious.png | Bin .../media}/futurama-mac-01.png | Bin .../media}/futurama-mac-02.png | Bin .../media}/futurama-mac-03.png | Bin .../media}/futurama-mac-04.png | Bin .../media}/futurama-mac-05.png | Bin .../media}/futurama-mac-06.png | Bin .../media}/futurama-mac-07.png | Bin .../media}/futurama-mac-08.png | Bin .../media}/futurama-mac-09.png | Bin .../media}/futurama-mac-10.png | Bin .../media}/futurama-mac-11.png | Bin .../media}/futurama-mac-12.png | Bin .../media}/futurama-mac-13.png | Bin .../media}/futurama-mac-14.png | Bin .../media}/futurama-mac-15.png | Bin .../media}/futurama-mac-16.png | Bin .../media}/futurama-mac-17.png | Bin .../media}/futurama-mac-18.png | Bin .../media}/futurama-mac-19.png | Bin .../media}/futurama-mac-20.png | Bin .../media}/futurama-mac-21.png | Bin .../media}/futurama-mac-teaser.png | Bin .../media}/futurama_gedeon.png | Bin .../media}/futurama_hawkins1.png | Bin .../media}/futurama_hawkins2.png | Bin .../media}/futurama_kremalicious.png | Bin .../media}/futurama_rawpixels.png | Bin .../_media => content/media}/googlechrome.png | Bin .../media}/hastuzeit-kremalicious2.jpg | Bin .../media}/html-document-icon48.png | Bin .../media}/iPhone-Coasters-1-Version-2.jpg | Bin .../media}/iPixelPad-Teaser-kremalicious2.jpg | Bin .../media}/iPixelPad-Teaser1.png | Bin .../media}/icon-Facebook.png | Bin .../media}/icon-Twitter2.png | Bin .../media}/icon-deviantART.png | Bin .../media}/icybox_by_kremalicious.zip | Bin .../media}/icybox_teaser1.png | Bin .../media}/icybox_teaser2.jpg | Bin .../media}/icybox_teaser2_small.png | Bin .../media}/imagestrends_shieoff.jpg | Bin .../media}/imagetrends_hemi_10.jpg | Bin .../media}/imagetrends_pearlywhite.png | Bin .../media}/img_1820-Version-4.jpg | Bin .../media}/indianajones_dock.png | Bin .../media}/indianajones_first.png | Bin .../media}/ipixelpad-homescreen-zoom.png | Bin .../media}/ipixelpad_by_kremalicious.zip | Bin {_src/_media => content/media}/jade_ui.png | Bin .../media}/jade_ui_thumb.jpg | Bin .../media}/jingjing_chacha_kremalicious.jpg | Bin .../media}/just-a-normal-sunday.jpg | Bin .../keith-haring-vandalizing-a-wall.jpg | Bin .../media}/kremalicious-Teaser-Metro-Tile.jpg | Bin .../kremalicious-Teaser-WP-Icon-Template.png | Bin .../media}/kremalicious-Teaser-ezeep.png | Bin .../media}/kremalicious-iconiphone-80.png | Bin .../media}/kremalicious-iconiphone.png | Bin .../media}/kremalicious-kbdfun-teaser.png | Bin .../media}/kremalicious2-photogrid.jpg | Bin .../media}/kremalicious2-photoposts.jpg | Bin .../media}/kremalicious2-teaser.jpg | Bin .../media}/kremalicious2-topicicons.jpg | Bin .../media}/kremalicious2-typography.jpg | Bin .../media}/kremalicious_nav.txt | 0 .../media}/kremaliciouscom-iPad-3.jpg | Bin .../media}/kremaliciousiphone.png | Bin .../media}/kremaliciousiphone_thumb.png | Bin {_src/_media => content/media}/lens.png | Bin {_src/_media => content/media}/lensfix_ci.png | Bin .../_media => content/media}/londonpolice.jpg | Bin .../media}/magnifique-ui.png | Bin .../media}/mars-u-teaser.png | Bin .../media}/mars-u-wall-by-kremalicious.zip | Bin .../media}/marsedit_kremalicious.png | Bin .../media}/marsedit_kremalicious.txt | 0 .../media}/marsedit_kremalicious_big.png | Bin .../media}/mediaMomCorpTeaser.png | Bin .../media}/mkv2-android-chrome.png | Bin .../media}/mkv2-android-firefox.png | Bin .../_media => content/media}/mkv2-android.png | Bin {_src/_media => content/media}/mkv2-balls.jpg | Bin .../_media => content/media}/mkv2-detail.png | Bin .../media}/mkv2-ipad-touchindicator.jpg | Bin {_src/_media => content/media}/mkv2-ipad.png | Bin .../_media => content/media}/mkv2-iphone.png | Bin .../media}/mkv2-portfolio-overlay.jpg | Bin .../media}/mkv2-responsivelayouts.jpg | Bin .../media}/mkv2-teaser-450x250.jpg | Bin .../media}/mkv2-teaser-500x277.jpg | Bin .../media}/mkv2-teaser-540x288.jpg | Bin {_src/_media => content/media}/mkv2.jpg | Bin .../media}/momcorp_wall_by_kremalicious.zip | Bin .../media}/most-surprising-dog-i-know.jpg | Bin ...muehle_suhlendorf_HDR_Tonemapped_16bit.jpg | Bin .../media}/navbar-kremalicious.png | Bin {_src/_media => content/media}/netatalk.png | Bin .../media}/new-passion-facade.jpg | Bin .../media}/nicephore-niepce.jpg | Bin .../media}/niepce_portrait.png | Bin .../media}/niepces_aperture_vault256.png | Bin ...niepces_camera_obscura_by_kremalicious.zip | Bin ...obscura_wallpaper_pack_by_kremalicious.zip | Bin .../media}/nik_silverefex.png | Bin .../media}/nik_silverefex_thumb.png | Bin {_src/_media => content/media}/noiseninja.png | Bin ...obligatory-it-s-summer-in-berlin-photo.jpg | Bin .../media}/openwithpreview.png | Bin {_src/_media => content/media}/opera-icon.png | Bin .../media}/out-of-whale-oil-overview.png | Bin .../out-of-whale-oil-wall-by-kremalicious.zip | Bin .../media}/out_of_whale_oil_detail.png | Bin .../media}/parallax-visualization.png | Bin .../media}/parallax-visualization_big.png | Bin {_src/_media => content/media}/parallax.png | Bin .../_media => content/media}/parallax_001.jpg | Bin .../_media => content/media}/parallax_002.jpg | Bin .../_media => content/media}/parallax_003.jpg | Bin .../_media => content/media}/parallax_004.jpg | Bin .../_media => content/media}/parallax_005.jpg | Bin .../_media => content/media}/parallax_006.jpg | Bin .../_media => content/media}/parallax_007.jpg | Bin .../_media => content/media}/parallax_008.jpg | Bin .../_media => content/media}/parallax_009.jpg | Bin .../_media => content/media}/parallax_010.jpg | Bin .../_media => content/media}/parallax_011.jpg | Bin .../_media => content/media}/parallax_012.jpg | Bin .../_media => content/media}/parallax_013.jpg | Bin .../_media => content/media}/parallax_014.png | Bin .../_media => content/media}/parallax_015.png | Bin .../_media => content/media}/parallax_016.jpg | Bin .../_media => content/media}/parallax_017.jpg | Bin .../media}/parallax_illusion_css.png | Bin .../media}/pathphotoshop.png | Bin .../_media => content/media}/pathpreview.png | Bin .../_media => content/media}/paypal-logo.jpg | Bin {_src/_media => content/media}/post-time.png | Bin {_src/_media => content/media}/potsdam.jpg | Bin .../project-purple-ipad-kremalicious.png | Bin .../project-purple-iphone4-kremalicious.png | Bin .../media}/project-purple-kremalicious.png | Bin .../media}/project-purple-kremalicious.zip | Bin .../project-purple-nexus-kremalicious.png | Bin {_src/_media => content/media}/ptlens_ui.png | Bin .../media}/ptlens_ui_thumb.jpg | Bin {_src/_media => content/media}/pulitzer.png | Bin {_src/_media => content/media}/raw.png | Bin {_src/_media => content/media}/raw20.png | Bin .../media}/republica-banner-125x160_black.png | Bin .../media}/republica10_kremaliciousbanner.png | Bin .../_media => content/media}/safari-logo.png | Bin .../_media => content/media}/safari4_zoom.png | Bin .../media}/safari4_zoom_thumb.png | Bin .../media}/safari_4_tabs.png | Bin .../media}/sagrada-familia-ceiling.jpg | Bin .../media}/scangear16bit.png | Bin .../media}/scangear48bit.png | Bin .../media}/scangear_color.png | Bin .../media}/scangearwindow.png | Bin .../media}/scanwindow_preview.png | Bin .../media}/schnecke_blatt.jpg | Bin .../_media => content/media}/securevault1.png | Bin .../_media => content/media}/securevault2.png | Bin .../_media => content/media}/securevault3.png | Bin .../_media => content/media}/securevault4.png | Bin .../_media => content/media}/securevault5.png | Bin .../server_displays_by_kremalicious.zip | Bin .../media}/serverdisplays.jpg | Bin .../media}/share-link-bonanza-coda-clips.zip | Bin .../media}/share-link-bonanza-html.zip | Bin {_src/_media => content/media}/snippet.png | Bin .../media}/softwareupdate.png | Bin .../media}/softwareupdate_photo200.png | Bin .../media}/speedlite430exii.jpg | Bin {_src/_media => content/media}/stonehead.jpg | Bin .../media}/streets-of-el-born.jpg | Bin .../media}/streets-of-el-raval.jpg | Bin .../media}/tabs_overview.png | Bin .../media}/teaser-appstorebadges.png | Bin .../media}/teaser-out-of-whale-oil.png | Bin {_src/_media => content/media}/teaser-tor.png | Bin .../media}/teaser_elegance-sociale.png | Bin .../media}/text-shadow-1.png | Bin .../media}/text-shadow-10.png | Bin .../media}/text-shadow-11.png | Bin .../media}/text-shadow-12.png | Bin .../media}/text-shadow-13.png | Bin .../media}/text-shadow-14.png | Bin .../media}/text-shadow-15.png | Bin .../media}/text-shadow-2.png | Bin .../media}/text-shadow-3.png | Bin .../media}/text-shadow-4.png | Bin .../media}/text-shadow-5.png | Bin .../media}/text-shadow-6.png | Bin .../media}/text-shadow-7.png | Bin .../media}/text-shadow-8.png | Bin .../media}/text-shadow-9.png | Bin .../media}/text-shadow-hack.png | Bin .../media}/textshadow-apple.png | Bin .../media}/tiffen_aperture.jpg | Bin .../media}/timemachine97.png | Bin .../media}/timemachinedisk97.png | Bin .../media}/tiny_tiny_demons.jpg | Bin .../media}/tm-sparsebundle.png | Bin .../_media => content/media}/tor-browser.png | Bin .../media}/tor-osx-proxy.png | Bin .../media}/tor-osx-terminal.png | Bin .../media}/tutorial-icon.png | Bin .../media}/tweetie_select_bubbles.zip | Bin .../media}/twitter-bird-kremalicious.png | Bin .../media}/twitter-crisp-by-kremalicious.zip | Bin .../media}/twitter-crisp-teaser.jpg | Bin .../media}/twitter-crisp-teaser2.png | Bin {_src/_media => content/media}/twitter.png | Bin .../media}/typographic-diamond.jpg | Bin .../media}/ubuntu_mac_feature.jpg | Bin .../media}/ubuntuserver1.png | Bin .../media}/ubuntuserver2.png | Bin .../media}/ubuntuserver3.png | Bin .../media}/ubuntuserver4.png | Bin .../media}/ubuntuserver4a.png | Bin .../media}/ubuntuserver5.png | Bin .../media}/ubuntuserver97.png | Bin .../media}/vcardsite-arefjdey.png | Bin .../media}/vcardsite-laurent.png | Bin .../media}/vcardsite-maximilian.png | Bin .../_media => content/media}/vcardsite-mk.png | Bin .../media}/vcardsite-rogie.png | Bin .../media}/vcardsite-tim.png | Bin ...the_window_at_le_gras_nicephore_niepce.jpg | Bin {_src/_media => content/media}/viveza.png | Bin .../media}/viveza_aperture_ui.jpg | Bin .../_media => content/media}/watermark_1.png | Bin .../_media => content/media}/watermark_2.png | Bin .../_media => content/media}/watermark_3.png | Bin .../_media => content/media}/watermark_4.png | Bin .../_media => content/media}/watermark_5.png | Bin .../_media => content/media}/watermark_6.png | Bin .../_media => content/media}/watermark_7.png | Bin .../_media => content/media}/watermark_8.png | Bin .../_media => content/media}/watermark_9.png | Bin .../media}/watermark_aperture.jpg | Bin .../watermark_example_by_kremalicious.zip | Bin .../media}/watermarkexample_final.jpg | Bin .../media}/watermarkexample_v2.jpg | Bin .../media}/watermarkexample_v3.jpg | Bin .../media}/watermarkexample_v4.jpg | Bin .../media}/webinspector_1.png | Bin .../media}/webinspector_2.png | Bin .../media}/webinspector_3.png | Bin {_src/_media => content/media}/webkit.png | Bin .../media}/wordpress-logo.png | Bin .../media}/wordpress-thumbnail-1.png | Bin .../media}/wordpress-thumbnail-2.png | Bin .../media}/wordpress-thumbnail-3.png | Bin .../media}/wordpress-thumbnail-4.png | Bin .../media}/wordpress-thumbnail-5.png | Bin .../media}/wp34_retina_icons.png | Bin .../media}/xserve_screwed.png | Bin content/meta.yml | 31 ++ {_src => content/pages}/404.md | 0 {_src => content/pages}/styleguide.md | 0 .../posts}/2005-07-26-beaucarnea-leafs.md | 0 .../posts}/2005-08-02-snail-on-a-leaf.md | 0 .../posts}/2006-07-23-electricity.md | 0 .../posts}/2006-07-23-floating-sky.md | 0 .../posts}/2006-08-21-new-berlin-bridge.md | 0 .../posts}/2006-09-16-wooden-windmill.md | 0 .../posts}/2006-10-22-german-chancellery.md | 0 .../posts}/2007-02-10-macbook-abstract.md | 0 ...-adjustment-tool-guide-for-aperture-152.md | 0 ...canon-canoscan-lide-500f-for-intel-macs.md | 0 ...s-on-a-mac-for-htaccess-protected-sites.md | 0 .../2008-03-30-launch-of-kremaliciouscom.md | 0 .../posts}/2008-03-31-love-the-parallax.md | 0 ...-web-design-tips-from-leonardo-da-vinci.md | 0 .../posts}/2008-04-04-aperture-file-types.md | 0 ...4-london-police-afraid-of-photographers.md | 0 ...guide-to-icons-how-to-smashing-magazine.md | 0 ...4-05-first-principles-for-choosing-type.md | 0 ...own-safari-features-worth-switching-for.md | 0 ...announced-various-photographers-awarded.md | 0 ...ing-the-image-icons-in-mac-os-x-leopard.md | 0 ...2008-04-09-measuring-the-color-of-light.md | 0 ...0-the-story-behind-the-pulitzer-picture.md | 0 ...8-04-11-photographers-strike-back-in-uk.md | 0 ...ion-helper-for-apples-aperture-released.md | 0 ...kit-team-introduced-css-based-gradients.md | 0 ...lever-text-effects-with-css-text-shadow.md | 0 ...4-22-apple-releases-sdk-for-aperture-21.md | 0 ...someness-from-the-webkit-team-css-masks.md | 0 ...anoscan-lide-500f-with-mac-os-x-leopard.md | 0 ...can-images-directly-into-apple-aperture.md | 0 ...7-high-quality-watermarks-with-aperture.md | 0 ...first-available-aperture-editing-plugin.md | 0 ...-the-15-best-new-features-of-aperture-2.md | 0 ...s-beautiful-indiana-jones-desktop-icons.md | 0 ...tographic-software-to-work-with-leopard.md | 0 ...perture-adjustment-plugins-have-arrived.md | 0 ...eases-fisheye-hemi-plug-in-for-aperture.md | 0 ...05-21-awesome-parallax-optical-illusion.md | 0 ...-css-parallax-effect-12-creative-usages.md | 0 ...ew-all-in-one-aperture-plug-in-released.md | 0 .../posts}/2008-06-01-chives.md | 0 .../2008-06-02-tweet-im-on-twitter-now.md | 0 ...and-the-history-of-the-first-photograph.md | 0 ...3-niepces-camera-obscura-wallpaper-pack.md | 0 .../2008-06-04-helvetica-typewriter-keys.md | 0 .../2008-06-11-safari-4-developer-preview.md | 0 ...tip-borders-titles-plug-in-for-aperture.md | 0 ...mac-file-server-and-time-machine-volume.md | 0 ...-is-edit-for-aperture-now-updated-to-12.md | 0 ...25-new-canon-stuff-xs-eos-1000-430ex-ii.md | 0 .../posts}/2008-06-30-stone-head.md | 0 ...ack-to-normal-on-kremaliciouscom-almost.md | 0 ...8-new-aperture-plug-ins-jade-and-ptlens.md | 0 .../2008-07-11-enjoy-kremaliciousiphone.md | 0 ...e-plug-in-nik-announces-silver-efex-pro.md | 0 ...s-25-get-rid-of-that-sluggish-dashboard.md | 0 .../posts}/2008-07-23-leaf-life.md | 0 ...ps-for-journalists-reporting-from-china.md | 0 ...reate-a-mobile-encrypted-aperture-vault.md | 0 ...ja-finally-available-for-apple-aperture.md | 0 ...8-08-22-the-kremalicious-marsedit-style.md | 0 .../posts}/2008-08-26-icy-box-icons.md | 0 ...rchitect-and-facade-theming-for-leopard.md | 0 ...-08-28-canon-eos-50d-new-lens-announced.md | 0 ...1-a-new-browser-is-coming-google-chrome.md | 0 .../posts}/2008-09-23-a-long-time-ago.md | 0 ...9-23-futurama-mars-university-wallpaper.md | 0 .../posts}/2008-10-23-coffee-cup-icon.md | 0 ...most-incredible-coffee-icons-on-the-web.md | 0 ...e-guide-to-watermarks-in-apple-aperture.md | 0 ...a-custom-gravatar-image-in-wordpress-27.md | 0 ...yling-author-comments-with-wordpress-27.md | 0 .../posts}/2009-01-05-the-mac-in-futurama.md | 0 .../posts}/2009-02-01-portal-thingy.md | 0 .../posts}/2009-02-17-out-of-whale-oil.md | 0 ...imate-coda-wordpress-share-link-bonanza.md | 0 .../posts}/2009-06-04-twitter-crisp.md | 0 .../posts}/2009-06-24-adiumeetie.md | 0 .../posts}/2009-09-05-delibar.md | 0 .../2009-12-17-wordpress-post-thumbnails.md | 0 .../posts}/2010-02-04-ipixelpad.md | 0 .../posts}/2010-03-27-office-desk.md | 0 .../posts}/2010-07-03-momcorp.md | 0 .../posts}/2010-07-18-typeface-condoms.md | 0 .../posts}/2010-08-07-bonsai.md | 0 .../posts}/2010-09-01-gdr-helvetica.md | 0 .../posts}/2010-12-11-iphone-coasters.md | 0 ...29-basically-the-monolith-is-on-my-desk.md | 0 ...29-free-monkey-breath-not-soylent-green.md | 0 .../posts}/2011-01-08-enjoying-paper.md | 0 .../posts}/2011-01-08-glowing-star-inside.md | 0 .../2011-01-18-historic-flood-levels.md | 0 .../2011-10-11-broken-nexus-s-screen.md | 0 .../posts}/2011-12-15-badged.md | 0 .../posts}/2012-02-26-mk-v2.md | 0 .../posts}/2012-03-04-relaxing-cat.md | 0 .../posts}/2012-04-03-blaue-turme.md | 0 .../posts}/2012-04-03-skeletor.md | 0 .../2012-04-03-train-station-leipzig.md | 0 .../2012-04-04-android-tab-conundrum.md | 0 .../posts}/2012-04-05-current-sushi-status.md | 0 .../posts}/2012-04-07-buna.md | 0 ...012-04-07-cat-enjoying-a-good-ipad-game.md | 0 .../posts}/2012-04-07-ipad-porn.md | 0 .../posts}/2012-04-07-opera.md | 0 .../2012-04-08-common-kitchen-decoration.md | 0 .../2012-04-08-graffiti-old-school-style.md | 0 ...2012-04-20-the-origins-of-the-blink-tag.md | 0 .../posts}/2012-04-30-announcing-sketch2.md | 0 ...oropen-free-access-to-academic-research.md | 0 .../posts}/2012-05-03-antique-chrome.md | 0 .../2012-05-04-world-press-photo-2012.md | 0 ...9-media-query-asset-downloading-results.md | 0 ...5-12-nielsen-vs-clark-theyre-both-wrong.md | 0 ...sponsive-images-solution-should-you-use.md | 0 .../2012-05-14-welcome-to-kremalicious2.md | 0 .../posts}/2012-05-15-wp-icons-template.md | 0 .../posts}/2012-05-21-why-comic-sans.md | 0 ...hoo-killed-flickr-and-lost-the-internet.md | 0 ...-and-web-standards-at-the-turning-point.md | 0 ...23-like-modern-heating-only-more-badass.md | 0 .../2012-05-26-html-for-icon-font-usage.md | 0 .../posts}/2012-05-27-balloon.md | 0 ...se-move-past-apples-silly-faux-real-uis.md | 0 ...012-06-13-retina-icons-in-wordpress-3-4.md | 0 .../posts}/2012-06-27-typography-window.md | 0 .../posts}/2012-06-30-why-files-exist.md | 0 .../posts}/2012-07-04-newton-reconsidered.md | 0 .../2012-07-07-what-makes-twitter-twitter.md | 0 ...nd-colliders-the-first-photo-on-the-web.md | 0 ...your-web-site-to-the-windows-8-metro-ui.md | 0 ...2012-07-16-using-kbd-for-fun-and-profit.md | 0 ...puter-generated-graphics-film-from-1963.md | 0 .../posts}/2012-07-20-mmmmh-coffee.md | 0 .../posts}/2012-08-07-projectpurple.md | 0 .../posts}/2012-08-08-amazingly-early.md | 0 .../posts}/2012-08-20-im-joining-ezeep.md | 0 .../posts}/2012-08-25-so-much-room.md | 0 .../posts}/2012-09-07-huge-station-is-huge.md | 0 .../posts}/2012-09-10-subway-firefox.md | 0 .../posts}/2012-09-12-sweet-typography.md | 0 .../posts}/2012-09-14-bvg-dos.md | 0 .../posts}/2012-09-26-designing-with-code.md | 0 .../posts}/2013-02-17-castle-garden.md | 0 .../2013-02-17-ezeep-android-app-design.md | 0 .../posts}/2013-02-17-ezeep-office-view.md | 0 .../posts}/2013-05-23-ezeep-birds.md | 0 .../posts}/2013-05-23-ezeep-origami.md | 0 ...ips-on-relaunching-your-startup-website.md | 0 .../2013-07-13-enterprise-software-sucks.md | 0 ...nology-can-hurt-or-harm-our-inner-state.md | 0 ...-photo-startup-is-going-out-of-business.md | 0 ...y-we-are-allowed-to-hate-silicon-valley.md | 0 ...12-11-silicon-valley-isnt-a-meritocracy.md | 0 .../posts}/2014-03-10-just-a-normal-sunday.md | 0 .../posts}/2014-03-15-potsdam.md | 0 .../posts}/2014-03-17-typographic-diamond.md | 0 .../posts}/2014-04-26-ai-weiwei-stools.md | 0 .../2014-06-07-airfield-reference-point.md | 0 ...-anton-henning-heimat-schaffen-simpsons.md | 0 ...9-thanks-for-the-tip-little-orange-blob.md | 0 ...-hindu-temple-appears-around-the-corner.md | 0 .../2015-04-09-most-surprising-dog-i-know.md | 0 ...-obligatory-it-s-summer-in-berlin-photo.md | 0 ...hildhood-toys-hang-painted-in-a-gallery.md | 0 .../posts}/2015-04-25-tiny-tiny-demons.md | 0 ...2015-08-02-simple-tor-setup-on-mac-os-x.md | 0 .../posts}/2015-09-13-css-app-store-badges.md | 0 ...udi-knows-how-to-impress-with-a-ceiling.md | 0 .../posts}/2016-02-27-streets-of-el-raval.md | 0 .../posts}/2016-03-02-a-storm-is-coming.md | 0 ...7-02-13-keith-haring-vandalizing-a-wall.md | 0 .../posts}/2017-02-13-streets-of-el-born.md | 0 .../posts}/2017-02-14-new-passion-facade.md | 0 .../posts}/2017-02-16-coolhaven-rotterdam.md | 0 .../posts}/2017-02-17-behind-the-art.md | 0 .../posts}/2017-02-19-rotterdam-coats.md | 0 ...2017-02-21-david-chipperfield-staircase.md | 0 .../posts}/2017-02-26-eu-gotham-city.md | 0 .../posts}/2017-02-27-amsterdam-cliche.md | 0 .../2017-02-27-its-dark-and-i-dont-exist.md | 0 .../posts}/2017-02-28-stedelijk-museum.md | 0 .../2017-02-28-temple-guardian-rijksmuseum.md | 0 .../2017-02-28-watching-the-night-watch.md | 0 .../2017-04-16-hamburgs-elbphilharmonie.md | 0 ...017-07-05-kapaleeshwarar-temple-chennai.md | 0 ...7-07-08-kochis-streetart-game-is-strong.md | 0 ...017-07-09-orphaned-elephant-with-friend.md | 0 .../posts}/2017-07-10-kochis-dhobhi-ghat.md | 0 ...17-07-13-mumbai-hand-painted-typography.md | 0 ...17-07-13-obligatory-gate-of-india-photo.md | 0 ...pati-shivaji-maharaj-vastu-sangrahalaya.md | 0 .../2017-11-10-acropolis-the-erechtheum.md | 0 .../2017-11-10-acropolis-the-parthenon.md | 0 .../2017-11-10-acropolis-the-propylaea.md | 0 .../posts}/2017-12-16-sagrada-familia.md | 0 .../posts}/2017-12-27-sao-paulo-traffic.md | 0 ...-01-04-passagem-literaria-da-consolacao.md | 0 .../posts}/2018-01-05-samba-school.md | 0 gatsby-config.js | 52 ++ gatsby-node.js | 0 gulpfile.babel.js | 470 ------------------ package.json | 108 ++-- scripts/deploy.sh | 44 ++ {_src => static}/favicon.ico | Bin {_src => static}/robots.txt | 0 717 files changed, 244 insertions(+), 959 deletions(-) delete mode 100644 .babelrc create mode 100644 .eslintrc create mode 100644 .prettierignore create mode 100644 .prettierrc create mode 100644 .stylelintrc delete mode 100644 Gemfile delete mode 100644 Rakefile delete mode 100755 _ci/build.sh delete mode 100755 _ci/deploy.sh delete mode 100755 _ci/setup.sh delete mode 100644 _config.dev.yml delete mode 100644 _config.yml delete mode 100644 _src/_plugins/octopress_filters.rb delete mode 100644 _src/_plugins/titlecase.rb rename {_src/_media => content/media}/01f8b0b8fcc611e19b5b123138140bce_7.jpg (100%) rename {_src/_media => content/media}/2015-03-29-anton-henning-heimat-schaffen-simpsons.jpg (100%) rename {_src/_media => content/media}/2015-03-29-thanks-for-the-tip-little-orange-blob.jpg (100%) rename {_src/_media => content/media}/2015-04-17-suddenly-a-new-hindu-temple-appears-around-the-corner.jpg (100%) rename {_src/_media => content/media}/2017-02-19-rotterdam-coats.jpg (100%) rename {_src/_media => content/media}/2017-02-21-david-chipperfield-staircase.jpg (100%) rename {_src/_media => content/media}/2017-02-26-eu-gotham-city.jpg (100%) rename {_src/_media => content/media}/2017-02-27-amsterdam-cliche.jpg (100%) rename {_src/_media => content/media}/2017-02-27-its-dark-and-i-dont-exist.jpg (100%) rename {_src/_media => content/media}/2017-02-28-stedelijk-museum.jpg (100%) rename {_src/_media => content/media}/2017-02-28-temple-guardian-rijksmuseum.jpg (100%) rename {_src/_media => content/media}/2017-02-28-watching-the-night-watch.jpg (100%) rename {_src/_media => content/media}/2017-04-16-hamburgs-elbphilharmonie.jpg (100%) rename {_src/_media => content/media}/2017-07-05-kapaleeshwarar-temple-chennai.jpg (100%) rename {_src/_media => content/media}/2017-07-08-kochis-streetart-game-is-strong.jpg (100%) rename {_src/_media => content/media}/2017-07-09-orphaned-elephant-with-friend.jpg (100%) rename {_src/_media => content/media}/2017-07-10-kochis-dhobhi-ghat.jpg (100%) rename {_src/_media => content/media}/2017-07-13-mumbai-hand-painted-typography.jpg (100%) rename {_src/_media => content/media}/2017-07-13-obligatory-gate-of-india-photo.jpg (100%) rename {_src/_media => content/media}/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.jpg (100%) rename {_src/_media => content/media}/2017-11-10-acropolis-the-erechtheum.jpg (100%) rename {_src/_media => content/media}/2017-11-10-acropolis-the-parthenon.jpg (100%) rename {_src/_media => content/media}/2017-11-10-acropolis-the-propylaea.jpg (100%) rename {_src/_media => content/media}/2017-12-16-sagrada-familia.jpg (100%) rename {_src/_media => content/media}/2017-12-27-sao-paulo-traffic.jpg (100%) rename {_src/_media => content/media}/2018-01-04-passagem-literaria-da-consolacao.jpg (100%) rename {_src/_media => content/media}/2018-01-05-samba-school.jpg (100%) rename {_src/_media => content/media}/2ba6eeba81b111e1989612313815112c_7.jpg (100%) rename {_src/_media => content/media}/2ca7a094e10f11e1868c12313817a130_7.jpg (100%) rename {_src/_media => content/media}/41b5a454a43811e1989612313815112c_7.jpeg (100%) rename {_src/_media => content/media}/44af28f2805b11e18cf91231380fd29b_7.jpg (100%) rename {_src/_media => content/media}/5df6e0a280c911e1a87612313804ec91_7.jpg (100%) rename {_src/_media => content/media}/5fc688aa953811e180c9123138016265_7.jpg (100%) rename {_src/_media => content/media}/619b3900f92911e1a31922000a1cddf1_7.jpg (100%) rename {_src/_media => content/media}/6313cc1e7db611e180c9123138016265_7.jpg (100%) rename {_src/_media => content/media}/66a6e0c0d25a11e1a94522000a1e8aaf_7.jpg (100%) rename {_src/_media => content/media}/690fe368a81911e1b2fe1231380205bf_7.jpg (100%) rename {_src/_media => content/media}/6c4003f2fe9911e1ae9122000a1e9e21_7.jpg (100%) rename {_src/_media => content/media}/7838011c80ce11e19e4a12313813ffc0_7.jpg (100%) rename {_src/_media => content/media}/7e2b28f881b711e1af7612313813f8e8_7.jpg (100%) rename {_src/_media => content/media}/7f9397a265d811e1b9f1123138140926_7.jpg (100%) rename {_src/_media => content/media}/80a136dabff711e188131231381b5c25_7.jpg (100%) rename {_src/_media => content/media}/8372983659_da0e88ca79_o.jpg (100%) rename {_src/_media => content/media}/8450618380_83c64006c6_o.jpg (100%) rename {_src/_media => content/media}/8455835942_a9b9100373_o.jpg (100%) rename {_src/_media => content/media}/84f9d2c4fb7411e19ca422000a1d0119_7.jpg (100%) rename {_src/_media => content/media}/8776417095_43553c88c2_o.jpg (100%) rename {_src/_media => content/media}/8782995066_e90ff6b3ae_o.jpg (100%) rename {_src/_media => content/media}/97a44d6080b711e181bd12313817987b_7.jpg (100%) rename {_src/_media => content/media}/A-Long-Time-Ago.jpg (100%) rename {_src/_media => content/media}/Adiumeetie-Dock-Preview.png (100%) rename {_src/_media => content/media}/Adiumeetie-Teaser-AdiumIcon.png (100%) rename {_src/_media => content/media}/Adiumeetie-Teaser.jpg (100%) rename {_src/_media => content/media}/Badged-Teaser-kremalicious.png (100%) rename {_src/_media => content/media}/Badged-Teaser-kremalicious@2x.png (100%) rename {_src/_media => content/media}/Basically-The-Monolith-Is-On-My-Desk.jpg (100%) rename {_src/_media => content/media}/Blaue-Tuerme-1.jpg (100%) rename {_src/_media => content/media}/Bonsai-5-Version-2.jpg (100%) rename {_src/_media => content/media}/Broken-Nexus-S-Screen.jpg (100%) rename {_src/_media => content/media}/Delibar-Icons-Teaser.jpg (100%) rename {_src/_media => content/media}/Delibar-Icons-Teaser2.png (100%) rename {_src/_media => content/media}/Enjoying-Paper.jpg (100%) rename {_src/_media => content/media}/Free-Monkey-Breath-Not-Soylent-Green.jpg (100%) rename {_src/_media => content/media}/GDR-Helvetica.jpg (100%) rename {_src/_media => content/media}/Glowing-Star-Inside.jpg (100%) rename {_src/_media => content/media}/Historic-Flood-Levels.jpg (100%) rename {_src/_media => content/media}/Instagram-Swipe.png (100%) rename {_src/_media => content/media}/MG_1735-Version-2.jpg (100%) rename {_src/_media => content/media}/MG_1920.jpg (100%) rename {_src/_media => content/media}/MG_5885_2006-7-23.jpg (100%) rename {_src/_media => content/media}/MG_9313_2007-02-10.jpg (100%) rename {_src/_media => content/media}/MomCorp-Walls-Overview.png (100%) rename {_src/_media => content/media}/Monstrum_Gameboy_Catherine_Kaleel.jpg (100%) rename {_src/_media => content/media}/Office-Desk.jpg (100%) rename {_src/_media => content/media}/PS_CR2FileIcon.png (100%) rename {_src/_media => content/media}/Project-Purple-Dribbble.png (100%) rename {_src/_media => content/media}/Teaser-Adiumeetie.jpg (100%) rename {_src/_media => content/media}/Teaser-Aperture-File-Types.jpg (100%) rename {_src/_media => content/media}/Teaser-Camera-Obscura-Icons.jpg (100%) rename {_src/_media => content/media}/Teaser-Camera-Obscura-Walls.jpg (100%) rename {_src/_media => content/media}/Teaser-Chives.jpg (100%) rename {_src/_media => content/media}/Teaser-Coffee-Cup-Icon.jpg (100%) rename {_src/_media => content/media}/Teaser-Delibar-Icons.jpg (100%) rename {_src/_media => content/media}/Teaser-Icy-Box.jpg (100%) rename {_src/_media => content/media}/Teaser-Mars-U.jpg (100%) rename {_src/_media => content/media}/Teaser-MomCorp-Wall.png (100%) rename {_src/_media => content/media}/Teaser-Out-Of-Whale-Oil.jpg (100%) rename {_src/_media => content/media}/Teaser-Project-Purple.png (100%) rename {_src/_media => content/media}/Teaser-Twitter-Crisp.jpg (100%) rename {_src/_media => content/media}/Teaser-iPixelPad.png (100%) rename {_src/_media => content/media}/Twitter-Crisp-16.png (100%) rename {_src/_media => content/media}/Typeface-condoms.jpg (100%) rename {_src/_media => content/media}/View-from-the-Window-at-Le-Gras.png (100%) rename {_src/_media => content/media}/Windows-8-Metro-tile-kremalicious-all-apps.png (100%) rename {_src/_media => content/media}/Windows-8-Metro-tile-kremalicious-in-action.png (100%) rename {_src/_media => content/media}/Windows-8-Metro-tile-kremalicious.png (100%) rename {_src/_media => content/media}/WordPress-Admin-Icons-Template-Filled.png (100%) rename {_src/_media => content/media}/a-storm-is-coming.jpg (100%) rename {_src/_media => content/media}/adiumeetie-by-kremalicious.zip (100%) rename {_src/_media => content/media}/adiumeetie-goodies-teaser.png (100%) rename {_src/_media => content/media}/aff38e2c7f5311e1b10e123138105d6b_7.jpg (100%) rename {_src/_media => content/media}/ai-wei-wei-stools.jpg (100%) rename {_src/_media => content/media}/airfield-reference-point.jpg (100%) rename {_src/_media => content/media}/android-galaxy-note.png (100%) rename {_src/_media => content/media}/android-navigation-buttons.png (100%) rename {_src/_media => content/media}/apassis.png (100%) rename {_src/_media => content/media}/aperture-impression.png (100%) rename {_src/_media => content/media}/aperture-plugin128.png (100%) rename {_src/_media => content/media}/aperture128.png (100%) rename {_src/_media => content/media}/aperture15_1.png (100%) rename {_src/_media => content/media}/aperture15_10.png (100%) rename {_src/_media => content/media}/aperture15_11.png (100%) rename {_src/_media => content/media}/aperture15_12.png (100%) rename {_src/_media => content/media}/aperture15_13.png (100%) rename {_src/_media => content/media}/aperture15_14.jpg (100%) rename {_src/_media => content/media}/aperture15_15.png (100%) rename {_src/_media => content/media}/aperture15_2.png (100%) rename {_src/_media => content/media}/aperture15_3.png (100%) rename {_src/_media => content/media}/aperture15_4.png (100%) rename {_src/_media => content/media}/aperture15_5.png (100%) rename {_src/_media => content/media}/aperture15_6.png (100%) rename {_src/_media => content/media}/aperture15_7.png (100%) rename {_src/_media => content/media}/aperture15_8.jpg (100%) rename {_src/_media => content/media}/aperture15_8.png (100%) rename {_src/_media => content/media}/aperture72.png (100%) rename {_src/_media => content/media}/aperture97.png (100%) rename {_src/_media => content/media}/aperture_borderfx.png (100%) rename {_src/_media => content/media}/aperture_bt.png (100%) rename {_src/_media => content/media}/apertureedit_interface.jpg (100%) rename {_src/_media => content/media}/apertureedit_logo.png (100%) rename {_src/_media => content/media}/apertureedit_logo2.png (100%) rename {_src/_media => content/media}/aperturefiletypes.png (100%) rename {_src/_media => content/media}/aperturefiletypes_by_kremalicious.zip (100%) rename {_src/_media => content/media}/apertureimport_automatic.png (100%) rename {_src/_media => content/media}/apertureimport_automator.png (100%) rename {_src/_media => content/media}/apertureimportplugin.png (100%) rename {_src/_media => content/media}/aperturescan.png (100%) rename {_src/_media => content/media}/architect-icon.jpg (100%) rename {_src/_media => content/media}/architect-ui.png (100%) rename {_src/_media => content/media}/automator.png (100%) rename {_src/_media => content/media}/badged-settings.png (100%) rename {_src/_media => content/media}/behind-the-art.jpg (100%) rename {_src/_media => content/media}/berliner_bruecke1-HDR-16bit.jpg (100%) rename {_src/_media => content/media}/bonjour97.png (100%) rename {_src/_media => content/media}/box_download.png (100%) rename {_src/_media => content/media}/buddha-colorscheme.png (100%) rename {_src/_media => content/media}/buddha-printer.png (100%) rename {_src/_media => content/media}/bundeskanzleramt_01_HDR_tonemapped_16bit-Version-2.jpg (100%) rename {_src/_media => content/media}/c0c45b6eeea211e1ad8e22000a1cdbb8_7.jpg (100%) rename {_src/_media => content/media}/camera_obscura_wall_teaser.png (100%) rename {_src/_media => content/media}/cameraobscura11_all.png (100%) rename {_src/_media => content/media}/cameraobscura11_all_thumb.png (100%) rename {_src/_media => content/media}/cameraobscura_aperture_128.png (100%) rename {_src/_media => content/media}/cameraobscura_inuse.png (100%) rename {_src/_media => content/media}/cameraobscura_teaser1.png (100%) rename {_src/_media => content/media}/canon1.png (100%) rename {_src/_media => content/media}/canon1000d.png (100%) rename {_src/_media => content/media}/canon2.png (100%) rename {_src/_media => content/media}/canon3.png (100%) rename {_src/_media => content/media}/canon4.png (100%) rename {_src/_media => content/media}/canondrivercontents.png (100%) rename {_src/_media => content/media}/canoscanlide500f.jpg (100%) rename {_src/_media => content/media}/ce2d29f40df411e2ad5812313817873b_7.jpg (100%) rename {_src/_media => content/media}/chives_by_kremalicious.zip (100%) rename {_src/_media => content/media}/chives_wallpaper_teaser.png (100%) rename {_src/_media => content/media}/chrome-ui.png (100%) rename {_src/_media => content/media}/coda-clips-icon-files.zip (100%) rename {_src/_media => content/media}/codaclips-hud.png (100%) rename {_src/_media => content/media}/codaclips-icon128.png (100%) rename {_src/_media => content/media}/codaclips-icon48.png (100%) rename {_src/_media => content/media}/codaclips-placeholder.png (100%) rename {_src/_media => content/media}/codaclips-teaser.png (100%) rename {_src/_media => content/media}/coffee-cup-empty.png (100%) rename {_src/_media => content/media}/coffee-cup-icon-kremalicious.png (100%) rename {_src/_media => content/media}/coffee-cup-icon-teaser.png (100%) rename {_src/_media => content/media}/coffee-showcase-apple.png (100%) rename {_src/_media => content/media}/coffee-showcase-baumann.png (100%) rename {_src/_media => content/media}/coffee-showcase-benedik.png (100%) rename {_src/_media => content/media}/coffee-showcase-brasgalla.png (100%) rename {_src/_media => content/media}/coffee-showcase-brasgalla2.png (100%) rename {_src/_media => content/media}/coffee-showcase-cappuccinosofa.png (100%) rename {_src/_media => content/media}/coffee-showcase-england.png (100%) rename {_src/_media => content/media}/coffee-showcase-flarup.png (100%) rename {_src/_media => content/media}/coffee-showcase-jaeppinen.png (100%) rename {_src/_media => content/media}/coffee-showcase-kaycaffeine.png (100%) rename {_src/_media => content/media}/coffee-showcase-kretschmann.png (100%) rename {_src/_media => content/media}/coffee-showcase-lanham.png (100%) rename {_src/_media => content/media}/coffee-showcase-lopezruiz.png (100%) rename {_src/_media => content/media}/coffee-showcase-lovecappu.png (100%) rename {_src/_media => content/media}/coffee-showcase-macrabbit.png (100%) rename {_src/_media => content/media}/coffee-showcase-matu.png (100%) rename {_src/_media => content/media}/coffee-showcase-rask1.png (100%) rename {_src/_media => content/media}/coffee-showcase-rask2.png (100%) rename {_src/_media => content/media}/coffee-showcase-susumo.png (100%) rename {_src/_media => content/media}/coffee-showcase-times.png (100%) rename {_src/_media => content/media}/coffee-showcase-tut-abduzeedo.png (100%) rename {_src/_media => content/media}/coffee-showcase-tut-houle.png (100%) rename {_src/_media => content/media}/coffee-showcase-tut-psdtuts.png (100%) rename {_src/_media => content/media}/coffee-showcase-tut-vectuts.png (100%) rename {_src/_media => content/media}/coffee-showcase-vegrafik.png (100%) rename {_src/_media => content/media}/coffee-showcase-visualpharm.png (100%) rename {_src/_media => content/media}/coffee_cup_by_kremalicious.zip (100%) rename {_src/_media => content/media}/coolhaven-rotterdam.jpg (100%) rename {_src/_media => content/media}/creaceed_hydra.png (100%) rename {_src/_media => content/media}/css.png (100%) rename {_src/_media => content/media}/custom-gravatar.jpg (100%) rename {_src/_media => content/media}/de2ac24c7db911e1b9f1123138140926_7.jpg (100%) rename {_src/_media => content/media}/delibar-by-kremalicious.zip (100%) rename {_src/_media => content/media}/delibar-website.png (100%) rename {_src/_media => content/media}/deliciouslinks.png (100%) rename {_src/_media => content/media}/dft-light_ui.jpg (100%) rename {_src/_media => content/media}/dft-ozone_ui.jpg (100%) rename {_src/_media => content/media}/dft-powerstroke_uis.jpg (100%) rename {_src/_media => content/media}/diskimage98.png (100%) rename {_src/_media => content/media}/dpmatte_index1.jpg (100%) rename {_src/_media => content/media}/efs_18-200.png (100%) rename {_src/_media => content/media}/efs_18-200_thumb.png (100%) rename {_src/_media => content/media}/elegancesociale_smashingteaser.png (100%) rename {_src/_media => content/media}/encryption_certificate.png (100%) rename {_src/_media => content/media}/encryption_mail2.png (100%) rename {_src/_media => content/media}/eos_50D_back.png (100%) rename {_src/_media => content/media}/eos_50D_back_thumb.png (100%) rename {_src/_media => content/media}/eos_50D_front.png (100%) rename {_src/_media => content/media}/eos_50D_front_thumb.png (100%) rename {_src/_media => content/media}/filevault98.png (100%) rename {_src/_media => content/media}/firefox-icon.png (100%) rename {_src/_media => content/media}/firefox3promo.png (100%) rename {_src/_media => content/media}/floating-sky-1.jpg (100%) rename {_src/_media => content/media}/free-pdf.png (100%) rename {_src/_media => content/media}/fry-2009-kremalicious.png (100%) rename {_src/_media => content/media}/futurama-mac-01.png (100%) rename {_src/_media => content/media}/futurama-mac-02.png (100%) rename {_src/_media => content/media}/futurama-mac-03.png (100%) rename {_src/_media => content/media}/futurama-mac-04.png (100%) rename {_src/_media => content/media}/futurama-mac-05.png (100%) rename {_src/_media => content/media}/futurama-mac-06.png (100%) rename {_src/_media => content/media}/futurama-mac-07.png (100%) rename {_src/_media => content/media}/futurama-mac-08.png (100%) rename {_src/_media => content/media}/futurama-mac-09.png (100%) rename {_src/_media => content/media}/futurama-mac-10.png (100%) rename {_src/_media => content/media}/futurama-mac-11.png (100%) rename {_src/_media => content/media}/futurama-mac-12.png (100%) rename {_src/_media => content/media}/futurama-mac-13.png (100%) rename {_src/_media => content/media}/futurama-mac-14.png (100%) rename {_src/_media => content/media}/futurama-mac-15.png (100%) rename {_src/_media => content/media}/futurama-mac-16.png (100%) rename {_src/_media => content/media}/futurama-mac-17.png (100%) rename {_src/_media => content/media}/futurama-mac-18.png (100%) rename {_src/_media => content/media}/futurama-mac-19.png (100%) rename {_src/_media => content/media}/futurama-mac-20.png (100%) rename {_src/_media => content/media}/futurama-mac-21.png (100%) rename {_src/_media => content/media}/futurama-mac-teaser.png (100%) rename {_src/_media => content/media}/futurama_gedeon.png (100%) rename {_src/_media => content/media}/futurama_hawkins1.png (100%) rename {_src/_media => content/media}/futurama_hawkins2.png (100%) rename {_src/_media => content/media}/futurama_kremalicious.png (100%) rename {_src/_media => content/media}/futurama_rawpixels.png (100%) rename {_src/_media => content/media}/googlechrome.png (100%) rename {_src/_media => content/media}/hastuzeit-kremalicious2.jpg (100%) rename {_src/_media => content/media}/html-document-icon48.png (100%) rename {_src/_media => content/media}/iPhone-Coasters-1-Version-2.jpg (100%) rename {_src/_media => content/media}/iPixelPad-Teaser-kremalicious2.jpg (100%) rename {_src/_media => content/media}/iPixelPad-Teaser1.png (100%) rename {_src/_media => content/media}/icon-Facebook.png (100%) rename {_src/_media => content/media}/icon-Twitter2.png (100%) rename {_src/_media => content/media}/icon-deviantART.png (100%) rename {_src/_media => content/media}/icybox_by_kremalicious.zip (100%) rename {_src/_media => content/media}/icybox_teaser1.png (100%) rename {_src/_media => content/media}/icybox_teaser2.jpg (100%) rename {_src/_media => content/media}/icybox_teaser2_small.png (100%) rename {_src/_media => content/media}/imagestrends_shieoff.jpg (100%) rename {_src/_media => content/media}/imagetrends_hemi_10.jpg (100%) rename {_src/_media => content/media}/imagetrends_pearlywhite.png (100%) rename {_src/_media => content/media}/img_1820-Version-4.jpg (100%) rename {_src/_media => content/media}/indianajones_dock.png (100%) rename {_src/_media => content/media}/indianajones_first.png (100%) rename {_src/_media => content/media}/ipixelpad-homescreen-zoom.png (100%) rename {_src/_media => content/media}/ipixelpad_by_kremalicious.zip (100%) rename {_src/_media => content/media}/jade_ui.png (100%) rename {_src/_media => content/media}/jade_ui_thumb.jpg (100%) rename {_src/_media => content/media}/jingjing_chacha_kremalicious.jpg (100%) rename {_src/_media => content/media}/just-a-normal-sunday.jpg (100%) rename {_src/_media => content/media}/keith-haring-vandalizing-a-wall.jpg (100%) rename {_src/_media => content/media}/kremalicious-Teaser-Metro-Tile.jpg (100%) rename {_src/_media => content/media}/kremalicious-Teaser-WP-Icon-Template.png (100%) rename {_src/_media => content/media}/kremalicious-Teaser-ezeep.png (100%) rename {_src/_media => content/media}/kremalicious-iconiphone-80.png (100%) rename {_src/_media => content/media}/kremalicious-iconiphone.png (100%) rename {_src/_media => content/media}/kremalicious-kbdfun-teaser.png (100%) rename {_src/_media => content/media}/kremalicious2-photogrid.jpg (100%) rename {_src/_media => content/media}/kremalicious2-photoposts.jpg (100%) rename {_src/_media => content/media}/kremalicious2-teaser.jpg (100%) rename {_src/_media => content/media}/kremalicious2-topicicons.jpg (100%) rename {_src/_media => content/media}/kremalicious2-typography.jpg (100%) rename {_src/_media => content/media}/kremalicious_nav.txt (100%) rename {_src/_media => content/media}/kremaliciouscom-iPad-3.jpg (100%) rename {_src/_media => content/media}/kremaliciousiphone.png (100%) rename {_src/_media => content/media}/kremaliciousiphone_thumb.png (100%) rename {_src/_media => content/media}/lens.png (100%) rename {_src/_media => content/media}/lensfix_ci.png (100%) rename {_src/_media => content/media}/londonpolice.jpg (100%) rename {_src/_media => content/media}/magnifique-ui.png (100%) rename {_src/_media => content/media}/mars-u-teaser.png (100%) rename {_src/_media => content/media}/mars-u-wall-by-kremalicious.zip (100%) rename {_src/_media => content/media}/marsedit_kremalicious.png (100%) rename {_src/_media => content/media}/marsedit_kremalicious.txt (100%) rename {_src/_media => content/media}/marsedit_kremalicious_big.png (100%) rename {_src/_media => content/media}/mediaMomCorpTeaser.png (100%) rename {_src/_media => content/media}/mkv2-android-chrome.png (100%) rename {_src/_media => content/media}/mkv2-android-firefox.png (100%) rename {_src/_media => content/media}/mkv2-android.png (100%) rename {_src/_media => content/media}/mkv2-balls.jpg (100%) rename {_src/_media => content/media}/mkv2-detail.png (100%) rename {_src/_media => content/media}/mkv2-ipad-touchindicator.jpg (100%) rename {_src/_media => content/media}/mkv2-ipad.png (100%) rename {_src/_media => content/media}/mkv2-iphone.png (100%) rename {_src/_media => content/media}/mkv2-portfolio-overlay.jpg (100%) rename {_src/_media => content/media}/mkv2-responsivelayouts.jpg (100%) rename {_src/_media => content/media}/mkv2-teaser-450x250.jpg (100%) rename {_src/_media => content/media}/mkv2-teaser-500x277.jpg (100%) rename {_src/_media => content/media}/mkv2-teaser-540x288.jpg (100%) rename {_src/_media => content/media}/mkv2.jpg (100%) rename {_src/_media => content/media}/momcorp_wall_by_kremalicious.zip (100%) rename {_src/_media => content/media}/most-surprising-dog-i-know.jpg (100%) rename {_src/_media => content/media}/muehle_suhlendorf_HDR_Tonemapped_16bit.jpg (100%) rename {_src/_media => content/media}/navbar-kremalicious.png (100%) rename {_src/_media => content/media}/netatalk.png (100%) rename {_src/_media => content/media}/new-passion-facade.jpg (100%) rename {_src/_media => content/media}/nicephore-niepce.jpg (100%) rename {_src/_media => content/media}/niepce_portrait.png (100%) rename {_src/_media => content/media}/niepces_aperture_vault256.png (100%) rename {_src/_media => content/media}/niepces_camera_obscura_by_kremalicious.zip (100%) rename {_src/_media => content/media}/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip (100%) rename {_src/_media => content/media}/nik_silverefex.png (100%) rename {_src/_media => content/media}/nik_silverefex_thumb.png (100%) rename {_src/_media => content/media}/noiseninja.png (100%) rename {_src/_media => content/media}/obligatory-it-s-summer-in-berlin-photo.jpg (100%) rename {_src/_media => content/media}/openwithpreview.png (100%) rename {_src/_media => content/media}/opera-icon.png (100%) rename {_src/_media => content/media}/out-of-whale-oil-overview.png (100%) rename {_src/_media => content/media}/out-of-whale-oil-wall-by-kremalicious.zip (100%) rename {_src/_media => content/media}/out_of_whale_oil_detail.png (100%) rename {_src/_media => content/media}/parallax-visualization.png (100%) rename {_src/_media => content/media}/parallax-visualization_big.png (100%) rename {_src/_media => content/media}/parallax.png (100%) rename {_src/_media => content/media}/parallax_001.jpg (100%) rename {_src/_media => content/media}/parallax_002.jpg (100%) rename {_src/_media => content/media}/parallax_003.jpg (100%) rename {_src/_media => content/media}/parallax_004.jpg (100%) rename {_src/_media => content/media}/parallax_005.jpg (100%) rename {_src/_media => content/media}/parallax_006.jpg (100%) rename {_src/_media => content/media}/parallax_007.jpg (100%) rename {_src/_media => content/media}/parallax_008.jpg (100%) rename {_src/_media => content/media}/parallax_009.jpg (100%) rename {_src/_media => content/media}/parallax_010.jpg (100%) rename {_src/_media => content/media}/parallax_011.jpg (100%) rename {_src/_media => content/media}/parallax_012.jpg (100%) rename {_src/_media => content/media}/parallax_013.jpg (100%) rename {_src/_media => content/media}/parallax_014.png (100%) rename {_src/_media => content/media}/parallax_015.png (100%) rename {_src/_media => content/media}/parallax_016.jpg (100%) rename {_src/_media => content/media}/parallax_017.jpg (100%) rename {_src/_media => content/media}/parallax_illusion_css.png (100%) rename {_src/_media => content/media}/pathphotoshop.png (100%) rename {_src/_media => content/media}/pathpreview.png (100%) rename {_src/_media => content/media}/paypal-logo.jpg (100%) rename {_src/_media => content/media}/post-time.png (100%) rename {_src/_media => content/media}/potsdam.jpg (100%) rename {_src/_media => content/media}/project-purple-ipad-kremalicious.png (100%) rename {_src/_media => content/media}/project-purple-iphone4-kremalicious.png (100%) rename {_src/_media => content/media}/project-purple-kremalicious.png (100%) rename {_src/_media => content/media}/project-purple-kremalicious.zip (100%) rename {_src/_media => content/media}/project-purple-nexus-kremalicious.png (100%) rename {_src/_media => content/media}/ptlens_ui.png (100%) rename {_src/_media => content/media}/ptlens_ui_thumb.jpg (100%) rename {_src/_media => content/media}/pulitzer.png (100%) rename {_src/_media => content/media}/raw.png (100%) rename {_src/_media => content/media}/raw20.png (100%) rename {_src/_media => content/media}/republica-banner-125x160_black.png (100%) rename {_src/_media => content/media}/republica10_kremaliciousbanner.png (100%) rename {_src/_media => content/media}/safari-logo.png (100%) rename {_src/_media => content/media}/safari4_zoom.png (100%) rename {_src/_media => content/media}/safari4_zoom_thumb.png (100%) rename {_src/_media => content/media}/safari_4_tabs.png (100%) rename {_src/_media => content/media}/sagrada-familia-ceiling.jpg (100%) rename {_src/_media => content/media}/scangear16bit.png (100%) rename {_src/_media => content/media}/scangear48bit.png (100%) rename {_src/_media => content/media}/scangear_color.png (100%) rename {_src/_media => content/media}/scangearwindow.png (100%) rename {_src/_media => content/media}/scanwindow_preview.png (100%) rename {_src/_media => content/media}/schnecke_blatt.jpg (100%) rename {_src/_media => content/media}/securevault1.png (100%) rename {_src/_media => content/media}/securevault2.png (100%) rename {_src/_media => content/media}/securevault3.png (100%) rename {_src/_media => content/media}/securevault4.png (100%) rename {_src/_media => content/media}/securevault5.png (100%) rename {_src/_media => content/media}/server_displays_by_kremalicious.zip (100%) rename {_src/_media => content/media}/serverdisplays.jpg (100%) rename {_src/_media => content/media}/share-link-bonanza-coda-clips.zip (100%) rename {_src/_media => content/media}/share-link-bonanza-html.zip (100%) rename {_src/_media => content/media}/snippet.png (100%) rename {_src/_media => content/media}/softwareupdate.png (100%) rename {_src/_media => content/media}/softwareupdate_photo200.png (100%) rename {_src/_media => content/media}/speedlite430exii.jpg (100%) rename {_src/_media => content/media}/stonehead.jpg (100%) rename {_src/_media => content/media}/streets-of-el-born.jpg (100%) rename {_src/_media => content/media}/streets-of-el-raval.jpg (100%) rename {_src/_media => content/media}/tabs_overview.png (100%) rename {_src/_media => content/media}/teaser-appstorebadges.png (100%) rename {_src/_media => content/media}/teaser-out-of-whale-oil.png (100%) rename {_src/_media => content/media}/teaser-tor.png (100%) rename {_src/_media => content/media}/teaser_elegance-sociale.png (100%) rename {_src/_media => content/media}/text-shadow-1.png (100%) rename {_src/_media => content/media}/text-shadow-10.png (100%) rename {_src/_media => content/media}/text-shadow-11.png (100%) rename {_src/_media => content/media}/text-shadow-12.png (100%) rename {_src/_media => content/media}/text-shadow-13.png (100%) rename {_src/_media => content/media}/text-shadow-14.png (100%) rename {_src/_media => content/media}/text-shadow-15.png (100%) rename {_src/_media => content/media}/text-shadow-2.png (100%) rename {_src/_media => content/media}/text-shadow-3.png (100%) rename {_src/_media => content/media}/text-shadow-4.png (100%) rename {_src/_media => content/media}/text-shadow-5.png (100%) rename {_src/_media => content/media}/text-shadow-6.png (100%) rename {_src/_media => content/media}/text-shadow-7.png (100%) rename {_src/_media => content/media}/text-shadow-8.png (100%) rename {_src/_media => content/media}/text-shadow-9.png (100%) rename {_src/_media => content/media}/text-shadow-hack.png (100%) rename {_src/_media => content/media}/textshadow-apple.png (100%) rename {_src/_media => content/media}/tiffen_aperture.jpg (100%) rename {_src/_media => content/media}/timemachine97.png (100%) rename {_src/_media => content/media}/timemachinedisk97.png (100%) rename {_src/_media => content/media}/tiny_tiny_demons.jpg (100%) rename {_src/_media => content/media}/tm-sparsebundle.png (100%) rename {_src/_media => content/media}/tor-browser.png (100%) rename {_src/_media => content/media}/tor-osx-proxy.png (100%) rename {_src/_media => content/media}/tor-osx-terminal.png (100%) rename {_src/_media => content/media}/tutorial-icon.png (100%) rename {_src/_media => content/media}/tweetie_select_bubbles.zip (100%) rename {_src/_media => content/media}/twitter-bird-kremalicious.png (100%) rename {_src/_media => content/media}/twitter-crisp-by-kremalicious.zip (100%) rename {_src/_media => content/media}/twitter-crisp-teaser.jpg (100%) rename {_src/_media => content/media}/twitter-crisp-teaser2.png (100%) rename {_src/_media => content/media}/twitter.png (100%) rename {_src/_media => content/media}/typographic-diamond.jpg (100%) rename {_src/_media => content/media}/ubuntu_mac_feature.jpg (100%) rename {_src/_media => content/media}/ubuntuserver1.png (100%) rename {_src/_media => content/media}/ubuntuserver2.png (100%) rename {_src/_media => content/media}/ubuntuserver3.png (100%) rename {_src/_media => content/media}/ubuntuserver4.png (100%) rename {_src/_media => content/media}/ubuntuserver4a.png (100%) rename {_src/_media => content/media}/ubuntuserver5.png (100%) rename {_src/_media => content/media}/ubuntuserver97.png (100%) rename {_src/_media => content/media}/vcardsite-arefjdey.png (100%) rename {_src/_media => content/media}/vcardsite-laurent.png (100%) rename {_src/_media => content/media}/vcardsite-maximilian.png (100%) rename {_src/_media => content/media}/vcardsite-mk.png (100%) rename {_src/_media => content/media}/vcardsite-rogie.png (100%) rename {_src/_media => content/media}/vcardsite-tim.png (100%) rename {_src/_media => content/media}/view_from_the_window_at_le_gras_nicephore_niepce.jpg (100%) rename {_src/_media => content/media}/viveza.png (100%) rename {_src/_media => content/media}/viveza_aperture_ui.jpg (100%) rename {_src/_media => content/media}/watermark_1.png (100%) rename {_src/_media => content/media}/watermark_2.png (100%) rename {_src/_media => content/media}/watermark_3.png (100%) rename {_src/_media => content/media}/watermark_4.png (100%) rename {_src/_media => content/media}/watermark_5.png (100%) rename {_src/_media => content/media}/watermark_6.png (100%) rename {_src/_media => content/media}/watermark_7.png (100%) rename {_src/_media => content/media}/watermark_8.png (100%) rename {_src/_media => content/media}/watermark_9.png (100%) rename {_src/_media => content/media}/watermark_aperture.jpg (100%) rename {_src/_media => content/media}/watermark_example_by_kremalicious.zip (100%) rename {_src/_media => content/media}/watermarkexample_final.jpg (100%) rename {_src/_media => content/media}/watermarkexample_v2.jpg (100%) rename {_src/_media => content/media}/watermarkexample_v3.jpg (100%) rename {_src/_media => content/media}/watermarkexample_v4.jpg (100%) rename {_src/_media => content/media}/webinspector_1.png (100%) rename {_src/_media => content/media}/webinspector_2.png (100%) rename {_src/_media => content/media}/webinspector_3.png (100%) rename {_src/_media => content/media}/webkit.png (100%) rename {_src/_media => content/media}/wordpress-logo.png (100%) rename {_src/_media => content/media}/wordpress-thumbnail-1.png (100%) rename {_src/_media => content/media}/wordpress-thumbnail-2.png (100%) rename {_src/_media => content/media}/wordpress-thumbnail-3.png (100%) rename {_src/_media => content/media}/wordpress-thumbnail-4.png (100%) rename {_src/_media => content/media}/wordpress-thumbnail-5.png (100%) rename {_src/_media => content/media}/wp34_retina_icons.png (100%) rename {_src/_media => content/media}/xserve_screwed.png (100%) create mode 100644 content/meta.yml rename {_src => content/pages}/404.md (100%) rename {_src => content/pages}/styleguide.md (100%) rename {_src/_posts => content/posts}/2005-07-26-beaucarnea-leafs.md (100%) rename {_src/_posts => content/posts}/2005-08-02-snail-on-a-leaf.md (100%) rename {_src/_posts => content/posts}/2006-07-23-electricity.md (100%) rename {_src/_posts => content/posts}/2006-07-23-floating-sky.md (100%) rename {_src/_posts => content/posts}/2006-08-21-new-berlin-bridge.md (100%) rename {_src/_posts => content/posts}/2006-09-16-wooden-windmill.md (100%) rename {_src/_posts => content/posts}/2006-10-22-german-chancellery.md (100%) rename {_src/_posts => content/posts}/2007-02-10-macbook-abstract.md (100%) rename {_src/_posts => content/posts}/2007-03-01-adjustment-tool-guide-for-aperture-152.md (100%) rename {_src/_posts => content/posts}/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md (100%) rename {_src/_posts => content/posts}/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md (100%) rename {_src/_posts => content/posts}/2008-03-30-launch-of-kremaliciouscom.md (100%) rename {_src/_posts => content/posts}/2008-03-31-love-the-parallax.md (100%) rename {_src/_posts => content/posts}/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md (100%) rename {_src/_posts => content/posts}/2008-04-04-aperture-file-types.md (100%) rename {_src/_posts => content/posts}/2008-04-04-london-police-afraid-of-photographers.md (100%) rename {_src/_posts => content/posts}/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md (100%) rename {_src/_posts => content/posts}/2008-04-05-first-principles-for-choosing-type.md (100%) rename {_src/_posts => content/posts}/2008-04-06-9-lesser-known-safari-features-worth-switching-for.md (100%) rename {_src/_posts => content/posts}/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md (100%) rename {_src/_posts => content/posts}/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md (100%) rename {_src/_posts => content/posts}/2008-04-09-measuring-the-color-of-light.md (100%) rename {_src/_posts => content/posts}/2008-04-10-the-story-behind-the-pulitzer-picture.md (100%) rename {_src/_posts => content/posts}/2008-04-11-photographers-strike-back-in-uk.md (100%) rename {_src/_posts => content/posts}/2008-04-14-new-automation-helper-for-apples-aperture-released.md (100%) rename {_src/_posts => content/posts}/2008-04-15-webkit-team-introduced-css-based-gradients.md (100%) rename {_src/_posts => content/posts}/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md (100%) rename {_src/_posts => content/posts}/2008-04-22-apple-releases-sdk-for-aperture-21.md (100%) rename {_src/_posts => content/posts}/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md (100%) rename {_src/_posts => content/posts}/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md (100%) rename {_src/_posts => content/posts}/2008-05-05-scan-images-directly-into-apple-aperture.md (100%) rename {_src/_posts => content/posts}/2008-05-07-high-quality-watermarks-with-aperture.md (100%) rename {_src/_posts => content/posts}/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md (100%) rename {_src/_posts => content/posts}/2008-05-07-the-15-best-new-features-of-aperture-2.md (100%) rename {_src/_posts => content/posts}/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md (100%) rename {_src/_posts => content/posts}/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md (100%) rename {_src/_posts => content/posts}/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md (100%) rename {_src/_posts => content/posts}/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md (100%) rename {_src/_posts => content/posts}/2008-05-21-awesome-parallax-optical-illusion.md (100%) rename {_src/_posts => content/posts}/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md (100%) rename {_src/_posts => content/posts}/2008-05-28-new-all-in-one-aperture-plug-in-released.md (100%) rename {_src/_posts => content/posts}/2008-06-01-chives.md (100%) rename {_src/_posts => content/posts}/2008-06-02-tweet-im-on-twitter-now.md (100%) rename {_src/_posts => content/posts}/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md (100%) rename {_src/_posts => content/posts}/2008-06-03-niepces-camera-obscura-wallpaper-pack.md (100%) rename {_src/_posts => content/posts}/2008-06-04-helvetica-typewriter-keys.md (100%) rename {_src/_posts => content/posts}/2008-06-11-safari-4-developer-preview.md (100%) rename {_src/_posts => content/posts}/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md (100%) rename {_src/_posts => content/posts}/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md (100%) rename {_src/_posts => content/posts}/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md (100%) rename {_src/_posts => content/posts}/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md (100%) rename {_src/_posts => content/posts}/2008-06-30-stone-head.md (100%) rename {_src/_posts => content/posts}/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md (100%) rename {_src/_posts => content/posts}/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md (100%) rename {_src/_posts => content/posts}/2008-07-11-enjoy-kremaliciousiphone.md (100%) rename {_src/_posts => content/posts}/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md (100%) rename {_src/_posts => content/posts}/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md (100%) rename {_src/_posts => content/posts}/2008-07-23-leaf-life.md (100%) rename {_src/_posts => content/posts}/2008-08-03-tips-for-journalists-reporting-from-china.md (100%) rename {_src/_posts => content/posts}/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md (100%) rename {_src/_posts => content/posts}/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md (100%) rename {_src/_posts => content/posts}/2008-08-22-the-kremalicious-marsedit-style.md (100%) rename {_src/_posts => content/posts}/2008-08-26-icy-box-icons.md (100%) rename {_src/_posts => content/posts}/2008-08-28-architect-and-facade-theming-for-leopard.md (100%) rename {_src/_posts => content/posts}/2008-08-28-canon-eos-50d-new-lens-announced.md (100%) rename {_src/_posts => content/posts}/2008-09-01-a-new-browser-is-coming-google-chrome.md (100%) rename {_src/_posts => content/posts}/2008-09-23-a-long-time-ago.md (100%) rename {_src/_posts => content/posts}/2008-09-23-futurama-mars-university-wallpaper.md (100%) rename {_src/_posts => content/posts}/2008-10-23-coffee-cup-icon.md (100%) rename {_src/_posts => content/posts}/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md (100%) rename {_src/_posts => content/posts}/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md (100%) rename {_src/_posts => content/posts}/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md (100%) rename {_src/_posts => content/posts}/2008-12-13-howto-styling-author-comments-with-wordpress-27.md (100%) rename {_src/_posts => content/posts}/2009-01-05-the-mac-in-futurama.md (100%) rename {_src/_posts => content/posts}/2009-02-01-portal-thingy.md (100%) rename {_src/_posts => content/posts}/2009-02-17-out-of-whale-oil.md (100%) rename {_src/_posts => content/posts}/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md (100%) rename {_src/_posts => content/posts}/2009-06-04-twitter-crisp.md (100%) rename {_src/_posts => content/posts}/2009-06-24-adiumeetie.md (100%) rename {_src/_posts => content/posts}/2009-09-05-delibar.md (100%) rename {_src/_posts => content/posts}/2009-12-17-wordpress-post-thumbnails.md (100%) rename {_src/_posts => content/posts}/2010-02-04-ipixelpad.md (100%) rename {_src/_posts => content/posts}/2010-03-27-office-desk.md (100%) rename {_src/_posts => content/posts}/2010-07-03-momcorp.md (100%) rename {_src/_posts => content/posts}/2010-07-18-typeface-condoms.md (100%) rename {_src/_posts => content/posts}/2010-08-07-bonsai.md (100%) rename {_src/_posts => content/posts}/2010-09-01-gdr-helvetica.md (100%) rename {_src/_posts => content/posts}/2010-12-11-iphone-coasters.md (100%) rename {_src/_posts => content/posts}/2010-12-29-basically-the-monolith-is-on-my-desk.md (100%) rename {_src/_posts => content/posts}/2010-12-29-free-monkey-breath-not-soylent-green.md (100%) rename {_src/_posts => content/posts}/2011-01-08-enjoying-paper.md (100%) rename {_src/_posts => content/posts}/2011-01-08-glowing-star-inside.md (100%) rename {_src/_posts => content/posts}/2011-01-18-historic-flood-levels.md (100%) rename {_src/_posts => content/posts}/2011-10-11-broken-nexus-s-screen.md (100%) rename {_src/_posts => content/posts}/2011-12-15-badged.md (100%) rename {_src/_posts => content/posts}/2012-02-26-mk-v2.md (100%) rename {_src/_posts => content/posts}/2012-03-04-relaxing-cat.md (100%) rename {_src/_posts => content/posts}/2012-04-03-blaue-turme.md (100%) rename {_src/_posts => content/posts}/2012-04-03-skeletor.md (100%) rename {_src/_posts => content/posts}/2012-04-03-train-station-leipzig.md (100%) rename {_src/_posts => content/posts}/2012-04-04-android-tab-conundrum.md (100%) rename {_src/_posts => content/posts}/2012-04-05-current-sushi-status.md (100%) rename {_src/_posts => content/posts}/2012-04-07-buna.md (100%) rename {_src/_posts => content/posts}/2012-04-07-cat-enjoying-a-good-ipad-game.md (100%) rename {_src/_posts => content/posts}/2012-04-07-ipad-porn.md (100%) rename {_src/_posts => content/posts}/2012-04-07-opera.md (100%) rename {_src/_posts => content/posts}/2012-04-08-common-kitchen-decoration.md (100%) rename {_src/_posts => content/posts}/2012-04-08-graffiti-old-school-style.md (100%) rename {_src/_posts => content/posts}/2012-04-20-the-origins-of-the-blink-tag.md (100%) rename {_src/_posts => content/posts}/2012-04-30-announcing-sketch2.md (100%) rename {_src/_posts => content/posts}/2012-05-02-a-call-foropen-free-access-to-academic-research.md (100%) rename {_src/_posts => content/posts}/2012-05-03-antique-chrome.md (100%) rename {_src/_posts => content/posts}/2012-05-04-world-press-photo-2012.md (100%) rename {_src/_posts => content/posts}/2012-05-09-media-query-asset-downloading-results.md (100%) rename {_src/_posts => content/posts}/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md (100%) rename {_src/_posts => content/posts}/2012-05-12-which-responsive-images-solution-should-you-use.md (100%) rename {_src/_posts => content/posts}/2012-05-14-welcome-to-kremalicious2.md (100%) rename {_src/_posts => content/posts}/2012-05-15-wp-icons-template.md (100%) rename {_src/_posts => content/posts}/2012-05-21-why-comic-sans.md (100%) rename {_src/_posts => content/posts}/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md (100%) rename {_src/_posts => content/posts}/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md (100%) rename {_src/_posts => content/posts}/2012-05-23-like-modern-heating-only-more-badass.md (100%) rename {_src/_posts => content/posts}/2012-05-26-html-for-icon-font-usage.md (100%) rename {_src/_posts => content/posts}/2012-05-27-balloon.md (100%) rename {_src/_posts => content/posts}/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md (100%) rename {_src/_posts => content/posts}/2012-06-13-retina-icons-in-wordpress-3-4.md (100%) rename {_src/_posts => content/posts}/2012-06-27-typography-window.md (100%) rename {_src/_posts => content/posts}/2012-06-30-why-files-exist.md (100%) rename {_src/_posts => content/posts}/2012-07-04-newton-reconsidered.md (100%) rename {_src/_posts => content/posts}/2012-07-07-what-makes-twitter-twitter.md (100%) rename {_src/_posts => content/posts}/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md (100%) rename {_src/_posts => content/posts}/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md (100%) rename {_src/_posts => content/posts}/2012-07-16-using-kbd-for-fun-and-profit.md (100%) rename {_src/_posts => content/posts}/2012-07-19-first-computer-generated-graphics-film-from-1963.md (100%) rename {_src/_posts => content/posts}/2012-07-20-mmmmh-coffee.md (100%) rename {_src/_posts => content/posts}/2012-08-07-projectpurple.md (100%) rename {_src/_posts => content/posts}/2012-08-08-amazingly-early.md (100%) rename {_src/_posts => content/posts}/2012-08-20-im-joining-ezeep.md (100%) rename {_src/_posts => content/posts}/2012-08-25-so-much-room.md (100%) rename {_src/_posts => content/posts}/2012-09-07-huge-station-is-huge.md (100%) rename {_src/_posts => content/posts}/2012-09-10-subway-firefox.md (100%) rename {_src/_posts => content/posts}/2012-09-12-sweet-typography.md (100%) rename {_src/_posts => content/posts}/2012-09-14-bvg-dos.md (100%) rename {_src/_posts => content/posts}/2012-09-26-designing-with-code.md (100%) rename {_src/_posts => content/posts}/2013-02-17-castle-garden.md (100%) rename {_src/_posts => content/posts}/2013-02-17-ezeep-android-app-design.md (100%) rename {_src/_posts => content/posts}/2013-02-17-ezeep-office-view.md (100%) rename {_src/_posts => content/posts}/2013-05-23-ezeep-birds.md (100%) rename {_src/_posts => content/posts}/2013-05-23-ezeep-origami.md (100%) rename {_src/_posts => content/posts}/2013-07-13-create-differentiate-iterate-10-pro-tips-on-relaunching-your-startup-website.md (100%) rename {_src/_posts => content/posts}/2013-07-13-enterprise-software-sucks.md (100%) rename {_src/_posts => content/posts}/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md (100%) rename {_src/_posts => content/posts}/2013-11-06-why-the-worlds-best-photo-startup-is-going-out-of-business.md (100%) rename {_src/_posts => content/posts}/2013-11-20-why-we-are-allowed-to-hate-silicon-valley.md (100%) rename {_src/_posts => content/posts}/2013-12-11-silicon-valley-isnt-a-meritocracy.md (100%) rename {_src/_posts => content/posts}/2014-03-10-just-a-normal-sunday.md (100%) rename {_src/_posts => content/posts}/2014-03-15-potsdam.md (100%) rename {_src/_posts => content/posts}/2014-03-17-typographic-diamond.md (100%) rename {_src/_posts => content/posts}/2014-04-26-ai-weiwei-stools.md (100%) rename {_src/_posts => content/posts}/2014-06-07-airfield-reference-point.md (100%) rename {_src/_posts => content/posts}/2015-03-29-anton-henning-heimat-schaffen-simpsons.md (100%) rename {_src/_posts => content/posts}/2015-03-29-thanks-for-the-tip-little-orange-blob.md (100%) rename {_src/_posts => content/posts}/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md (100%) rename {_src/_posts => content/posts}/2015-04-09-most-surprising-dog-i-know.md (100%) rename {_src/_posts => content/posts}/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md (100%) rename {_src/_posts => content/posts}/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md (100%) rename {_src/_posts => content/posts}/2015-04-25-tiny-tiny-demons.md (100%) rename {_src/_posts => content/posts}/2015-08-02-simple-tor-setup-on-mac-os-x.md (100%) rename {_src/_posts => content/posts}/2015-09-13-css-app-store-badges.md (100%) rename {_src/_posts => content/posts}/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md (100%) rename {_src/_posts => content/posts}/2016-02-27-streets-of-el-raval.md (100%) rename {_src/_posts => content/posts}/2016-03-02-a-storm-is-coming.md (100%) rename {_src/_posts => content/posts}/2017-02-13-keith-haring-vandalizing-a-wall.md (100%) rename {_src/_posts => content/posts}/2017-02-13-streets-of-el-born.md (100%) rename {_src/_posts => content/posts}/2017-02-14-new-passion-facade.md (100%) rename {_src/_posts => content/posts}/2017-02-16-coolhaven-rotterdam.md (100%) rename {_src/_posts => content/posts}/2017-02-17-behind-the-art.md (100%) rename {_src/_posts => content/posts}/2017-02-19-rotterdam-coats.md (100%) rename {_src/_posts => content/posts}/2017-02-21-david-chipperfield-staircase.md (100%) rename {_src/_posts => content/posts}/2017-02-26-eu-gotham-city.md (100%) rename {_src/_posts => content/posts}/2017-02-27-amsterdam-cliche.md (100%) rename {_src/_posts => content/posts}/2017-02-27-its-dark-and-i-dont-exist.md (100%) rename {_src/_posts => content/posts}/2017-02-28-stedelijk-museum.md (100%) rename {_src/_posts => content/posts}/2017-02-28-temple-guardian-rijksmuseum.md (100%) rename {_src/_posts => content/posts}/2017-02-28-watching-the-night-watch.md (100%) rename {_src/_posts => content/posts}/2017-04-16-hamburgs-elbphilharmonie.md (100%) rename {_src/_posts => content/posts}/2017-07-05-kapaleeshwarar-temple-chennai.md (100%) rename {_src/_posts => content/posts}/2017-07-08-kochis-streetart-game-is-strong.md (100%) rename {_src/_posts => content/posts}/2017-07-09-orphaned-elephant-with-friend.md (100%) rename {_src/_posts => content/posts}/2017-07-10-kochis-dhobhi-ghat.md (100%) rename {_src/_posts => content/posts}/2017-07-13-mumbai-hand-painted-typography.md (100%) rename {_src/_posts => content/posts}/2017-07-13-obligatory-gate-of-india-photo.md (100%) rename {_src/_posts => content/posts}/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md (100%) rename {_src/_posts => content/posts}/2017-11-10-acropolis-the-erechtheum.md (100%) rename {_src/_posts => content/posts}/2017-11-10-acropolis-the-parthenon.md (100%) rename {_src/_posts => content/posts}/2017-11-10-acropolis-the-propylaea.md (100%) rename {_src/_posts => content/posts}/2017-12-16-sagrada-familia.md (100%) rename {_src/_posts => content/posts}/2017-12-27-sao-paulo-traffic.md (100%) rename {_src/_posts => content/posts}/2018-01-04-passagem-literaria-da-consolacao.md (100%) rename {_src/_posts => content/posts}/2018-01-05-samba-school.md (100%) create mode 100644 gatsby-config.js create mode 100644 gatsby-node.js delete mode 100644 gulpfile.babel.js create mode 100755 scripts/deploy.sh rename {_src => static}/favicon.ico (100%) rename {_src => static}/robots.txt (100%) diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 002b4aa0..00000000 --- a/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["env"] -} diff --git a/.editorconfig b/.editorconfig index b64e0cd9..b444fcfc 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,13 +1,14 @@ # EditorConfig is awesome: http://EditorConfig.org +root = true [*] indent_style = space -indent_size = 4 +indent_size = 2 end_of_line = lf insert_final_newline = true charset = utf-8 trim_trailing_whitespace = true -[*.json] -indent_size = 2 +[*.scss] +indent_size = 4 diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 00000000..bcf8949d --- /dev/null +++ b/.eslintrc @@ -0,0 +1,27 @@ +{ + "parser": "babel-eslint", + "extends": [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:prettier/recommended" + ], + "plugins": ["react", "graphql", "prettier"], + "parserOptions": { + "sourceType": "module", + "ecmaFeatures": { + "jsx": true, + "modules": true + } + }, + "env": { + "browser": true, + "node": true, + "es6": true + }, + "rules": { + "quotes": ["error", "single"], + "semi": ["error", "never"], + "object-curly-spacing": ["error", "always"], + "prettier/prettier": "error" + } +} diff --git a/.gitignore b/.gitignore index a1bcc205..e4471032 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,6 @@ node_modules -_site -_build -Gemfile.lock -_src/.jekyll-metadata yarn.lock .yarnclean package-lock.json +public +.cache diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..2667b906 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +node_modules/ +.cache/ +static/ +public/ diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..21137834 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "semi": false, + "singleQuote": true, + "trailingComma": "none" + } diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 00000000..54edb733 --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,12 @@ +{ + "extends": [ + "stylelint-config-standard", + "stylelint-config-css-modules", + "./node_modules/prettier-stylelint/config.js" + ], + "syntax": "scss", + "rules": { + "indentation": 4, + "number-leading-zero": "never" + } +} diff --git a/.travis.yml b/.travis.yml index 5b7e468c..8e4ab80b 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,36 +1,22 @@ -language: ruby -rvm: - - 2.5 +language: node_js +node_js: node cache: - bundler: true directories: - - $TRAVIS_BUILD_DIR/node_modules - - $TRAVIS_BUILD_DIR/_site/media + - node_modules + - public -addons: - artifacts: - paths: - - $TRAVIS_BUILD_DIR/_site/media - apt: - update: true - packages: - - libgsl0ldbl - - libgsl0-dev +install: + - npm i -before_install: - - nvm install 10 - -before_script: "_ci/setup.sh" -script: "_ci/build.sh" - -deploy: - skip_cleanup: true - provider: script - script: "_ci/deploy.sh" - on: - branch: master +script: + - npm test + - npm run build +after_success: + - pip install --user awscli + - export PATH=$PATH:$HOME/.local/bin + - npm run deploy notifications: email: false diff --git a/Gemfile b/Gemfile deleted file mode 100644 index c304a1e6..00000000 --- a/Gemfile +++ /dev/null @@ -1,20 +0,0 @@ -# A sample Gemfile -source "https://rubygems.org" - -group :jekyll do - gem 'jekyll' - gem 'jekyll-sitemap' - gem 'jekyll-redirect-from' - gem 'jekyll-archives' - gem 'jekyll-paginate' -end - -group :development do - gem 'redcarpet' -end - -group :lsi do - gem 'narray' - gem 'gsl' - gem 'classifier-reborn' -end diff --git a/README.md b/README.md index e8103932..a12575d2 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ -kremalicious3 +blog ================== -> [kremalicious.com](http://kremalicious.com) based on [Jekyll](http://jekyllrb.com). Neat. +> [kremalicious.com](http://kremalicious.com) built with [Gatsby](http://gatsbyjs.org). Neat. [![Build Status](https://travis-ci.com/kremalicious/kremalicious3.svg?branch=master)](https://travis-ci.com/kremalicious/kremalicious3) [![Greenkeeper badge](https://badges.greenkeeper.io/kremalicious/kremalicious3.svg)](https://greenkeeper.io/) @@ -13,19 +13,6 @@ Requirements You need to have the following tools installed on your development machine before moving on: - [node.js](http://nodejs.org/) & [npm](https://npmjs.org/) -- [Ruby](https://www.ruby-lang.org) (for sanity, install with [rvm](https://rvm.io/)) and [Bundler](http://bundler.io/) - - -Content Creation ------------------- - -Some handy rake tasks creating the correct front matter for each content type: - -New Content | Command ------------ | ----------- -Post | `rake post -- Title` -Photo | `rake photo -- Title` -Link | `rake link -- Title` Get up and running @@ -37,7 +24,7 @@ Get up and running Run the following command from the repository's root folder to install all dependencies. ```bash -npm install && bundle install +npm install ``` ### Development server @@ -45,13 +32,13 @@ npm install && bundle install This generates the site with the dev build task `gulp build` and starts a local dev server combined with a livereloading watch task under `http://localhost:1337`. ```bash -gulp +npm start ``` ### Production build ```bash -gulp build --production +npm run build ``` diff --git a/Rakefile b/Rakefile deleted file mode 100644 index 67ec86db..00000000 --- a/Rakefile +++ /dev/null @@ -1,93 +0,0 @@ -require 'rubygems' -require 'optparse' -require 'yaml' - -# -# Create New Post -# rake post -- Title -# -task :post do - OptionParser.new.parse! - ARGV.shift - title = ARGV.join(' ') - - path = "_src/_drafts/#{Date.today}-#{title.downcase.gsub(/[^[:alnum:]]+/, '-')}.md" - - if File.exist?(path) - puts "Dude, file exists - skipping create" - else - File.open(path, "w") do |file| - file.puts YAML.dump({ - 'layout' => 'post', - 'title' => title, - 'image' => 'REPLACEME.jpg', - 'author' => 'Matthias Kretschmann', - 'date' => Time.now - }) - file.puts "---" - end - end - `atom #{path}` - - exit 1 -end - -# -# Create New Photo Post -# rake photo -- Title -# -task :photo do - OptionParser.new.parse! - ARGV.shift - title = ARGV.join(' ') - - path = "_src/_drafts/#{Date.today}-#{title.downcase.gsub(/[^[:alnum:]]+/, '-')}.md" - - if File.exist?(path) - puts "Dude, file exists - skipping create" - else - File.open(path, "w") do |file| - file.puts YAML.dump({ - 'layout' => 'photo', - 'title' => title, - 'image' => 'REPLACEME.jpg', - 'author' => 'Matthias Kretschmann', - 'date' => Time.now, - 'category' => 'photos' - }) - file.puts "---" - end - end - `atom-beta #{path}` - - exit 1 -end - -# -# Create New Link Post -# rake link -- Title -# -task :photo do - OptionParser.new.parse! - ARGV.shift - title = ARGV.join(' ') - - path = "_src/_drafts/#{Date.today}-#{title.downcase.gsub(/[^[:alnum:]]+/, '-')}.md" - - if File.exist?(path) - puts "Dude, file exists - skipping create" - else - File.open(path, "w") do |file| - file.puts YAML.dump({ - 'layout' => 'link', - 'title' => title, - 'author' => 'Matthias Kretschmann', - 'date' => Time.now - }) - file.puts "---" - end - end - `atom #{path}` - - exit 1 -end diff --git a/_ci/build.sh b/_ci/build.sh deleted file mode 100755 index 15f86b64..00000000 --- a/_ci/build.sh +++ /dev/null @@ -1,11 +0,0 @@ -#!/usr/bin/env bash - -npm test && - -if [ "$TRAVIS_BRANCH" == "master" ]; then - gulp build --production -else - gulp build -fi; - -exit; diff --git a/_ci/deploy.sh b/_ci/deploy.sh deleted file mode 100755 index 8b267cf7..00000000 --- a/_ci/deploy.sh +++ /dev/null @@ -1,17 +0,0 @@ -#!/usr/bin/env bash - -set -e; - -echo "$(tput setaf 136)" -echo " Starting S3 deployment " -echo "=============================================" -echo "$(tput sgr0)" # reset - -gulp deploy - -gulp seo - -echo "$(tput setaf 64)" # green -echo "---------------------------------------------" -echo " ✓ done S3 deployment " -echo "$(tput sgr0)" # reset diff --git a/_ci/setup.sh b/_ci/setup.sh deleted file mode 100755 index 42fc7413..00000000 --- a/_ci/setup.sh +++ /dev/null @@ -1,19 +0,0 @@ -#!/usr/bin/env bash - -set -e; - -echo "$(tput setaf 136)" -echo " Installing dependencies " -echo "=============================================" -echo "$(tput sgr0)" # reset - -npm install gulp-cli -g -npm install - -# Travis does that automatically after selecting ruby -#bundle install - -echo "$(tput setaf 64)" # green -echo "---------------------------------------------" -echo " ✓ done installing dependencies" -echo "$(tput sgr0)" # reset diff --git a/_config.dev.yml b/_config.dev.yml deleted file mode 100644 index 3742e2ff..00000000 --- a/_config.dev.yml +++ /dev/null @@ -1,3 +0,0 @@ - -# fix for jekyll-picture-tag always prepending site.url -url: http://localhost:1337 diff --git a/_config.yml b/_config.yml deleted file mode 100644 index 998aa3d0..00000000 --- a/_config.yml +++ /dev/null @@ -1,76 +0,0 @@ -# -# Home: / -# Archive Page: /archive/ -# Pagination: /page/N/ -# Post: /post-slug/ -# RSS Feed: /feed/ -# - -# Basics -# -------------------- - -name: kremalicious -description: 'Blog of designer & developer Matthias Kretschmann' -url: https://kremalicious.com -author: - name: Matthias Kretschmann - email: m@kretschmann.io - uri: https://matthiaskretschmann.com - twitter: kremalicious - github: kremalicious - facebook: matthiaskretschmann - googleplus: +MatthiasKretschmann - bitcoin: 171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V - ether: "0x339dbC44d39bf1961E385ed0Ae88FC6069b87Ea1" - - -# Urls -# -------------------- - -permalink: /:title/ -paginate: 15 -paginate_path: "/page/:num" -category_dir: "/" -category_title_prefix: "" -media_url: "https://res.cloudinary.com/kremalicious" - - -# Content Parsing -# -------------------- - -future: false -markdown: redcarpet - -redcarpet: - extensions: ['no_intra_emphasis', 'autolink', 'tables', 'smart', 'hard_wrap', 'fenced_code_blocks', 'strikethrough', 'highlight', 'quote', 'footnotes', 'with_toc_data', 'space_after_headers', 'superscript', 'lax_spacing'] - - -# Generator -# -------------------- - -source: ./_src -destination: ./_site -keep_files: ['media'] - - -# Plugins -# -------------------- - -plugins: - - jekyll-sitemap - - jekyll-redirect-from - - jekyll-paginate - - jekyll-archives - - -# jekyll-archives -# -------------------- - -jekyll-archives: - enabled: - - categories - - tags - layout: 'archive' - permalinks: - tag: '/tag/:name/' - category: '/:name/' diff --git a/_src/_plugins/octopress_filters.rb b/_src/_plugins/octopress_filters.rb deleted file mode 100644 index 2abdc629..00000000 --- a/_src/_plugins/octopress_filters.rb +++ /dev/null @@ -1,96 +0,0 @@ -#custom filters for Octopress - -module OctopressLiquidFilters - - # Used on the blog index to split posts on the marker - def excerpt(input) - if input.index(//i) - input.split(//i)[0] - else - input - end - end - - # Checks for excerpts (helpful for template conditionals) - def has_excerpt(input) - input =~ //i ? true : false - end - - # Summary is used on the Archive pages to return the first block of content from a post. - def summary(input) - if input.index(/\n\n/) - input.split(/\n\n/)[0] - else - input - end - end - - # Extracts raw content DIV from template, used for page description as {{ content }} - # contains complete sub-template code on main page level - def raw_content(input) - /
(?[\s\S]*?)<\/div>\s*<(footer|\/article)>/ =~ input - return (content.nil?) ? input : content - end - - # Escapes CDATA sections in post content - def cdata_escape(input) - input.gsub(//, ']]>') - end - - # Replaces relative urls with full urls - def expand_urls(input, url='') - url ||= '/' - input.gsub /(\s+(href|src)\s*=\s*["|']{1})(\/[^\"'>]*)/ do - $1+url+$3 - end - end - - # Improved version of Liquid's truncate: - # - Doesn't cut in the middle of a word. - # - Uses typographically correct ellipsis (…) insted of '...' - def truncate(input, length) - if input.length > length && input[0..(length-1)] =~ /(.+)\b.+$/im - $1.strip + ' …' - else - input - end - end - - # Improved version of Liquid's truncatewords: - # - Uses typographically correct ellipsis (…) insted of '...' - def truncatewords(input, length) - truncate = input.split(' ') - if truncate.length > length - truncate[0..length-1].join(' ').strip + ' …' - else - input - end - end - - # Condenses multiple spaces and tabs into a single space - def condense_spaces(input) - input.gsub(/\s{2,}/, ' ') - end - - # Removes trailing forward slash from a string for easily appending url segments - def strip_slash(input) - if input =~ /(.+)\/$|^\/$/ - input = $1 - end - input - end - - # Returns a url without the protocol (http://) - def shorthand_url(input) - input.gsub /(https?:\/\/)(\S+)/ do - $2 - end - end - - # Returns a title cased string based on John Gruber's title case http://daringfireball.net/2008/08/title_case_update - def titlecase(input) - input.titlecase - end - -end -Liquid::Template.register_filter OctopressLiquidFilters \ No newline at end of file diff --git a/_src/_plugins/titlecase.rb b/_src/_plugins/titlecase.rb deleted file mode 100644 index 5fc9c3c8..00000000 --- a/_src/_plugins/titlecase.rb +++ /dev/null @@ -1,36 +0,0 @@ -class String - def titlecase - small_words = %w(a an and as at but by en for if in of on or the to v v. via vs vs. ezeep) - - x = split(" ").map do |word| - # note: word could contain non-word characters! - # downcase all small_words, capitalize the rest - small_words.include?(word.gsub(/\W/, "").downcase) ? word.downcase! : word.smart_capitalize! - word - end - # capitalize first and last words - x.first.to_s.smart_capitalize! - x.last.to_s.smart_capitalize! - # small words are capitalized after colon, period, exclamation mark, question mark - x.join(" ").gsub(/(:|\.|!|\?)\s?(\W*#{small_words.join("|")}\W*)\s/) { "#{$1} #{$2.smart_capitalize} " } - end - - def titlecase! - replace(titlecase) - end - - def smart_capitalize - # ignore any leading crazy characters and capitalize the first real character - if self =~ /^['"\(\[']*([a-z])/ - i = index($1) - x = self[i,self.length] - # word with capitals and periods mid-word are left alone - self[i,1] = self[i,1].upcase unless x =~ /[A-Z]/ or x =~ /\.\w+/ - end - self - end - - def smart_capitalize! - replace(smart_capitalize) - end -end \ No newline at end of file diff --git a/_src/_media/01f8b0b8fcc611e19b5b123138140bce_7.jpg b/content/media/01f8b0b8fcc611e19b5b123138140bce_7.jpg similarity index 100% rename from _src/_media/01f8b0b8fcc611e19b5b123138140bce_7.jpg rename to content/media/01f8b0b8fcc611e19b5b123138140bce_7.jpg diff --git a/_src/_media/2015-03-29-anton-henning-heimat-schaffen-simpsons.jpg b/content/media/2015-03-29-anton-henning-heimat-schaffen-simpsons.jpg similarity index 100% rename from _src/_media/2015-03-29-anton-henning-heimat-schaffen-simpsons.jpg rename to content/media/2015-03-29-anton-henning-heimat-schaffen-simpsons.jpg diff --git a/_src/_media/2015-03-29-thanks-for-the-tip-little-orange-blob.jpg b/content/media/2015-03-29-thanks-for-the-tip-little-orange-blob.jpg similarity index 100% rename from _src/_media/2015-03-29-thanks-for-the-tip-little-orange-blob.jpg rename to content/media/2015-03-29-thanks-for-the-tip-little-orange-blob.jpg diff --git a/_src/_media/2015-04-17-suddenly-a-new-hindu-temple-appears-around-the-corner.jpg b/content/media/2015-04-17-suddenly-a-new-hindu-temple-appears-around-the-corner.jpg similarity index 100% rename from _src/_media/2015-04-17-suddenly-a-new-hindu-temple-appears-around-the-corner.jpg rename to content/media/2015-04-17-suddenly-a-new-hindu-temple-appears-around-the-corner.jpg diff --git a/_src/_media/2017-02-19-rotterdam-coats.jpg b/content/media/2017-02-19-rotterdam-coats.jpg similarity index 100% rename from _src/_media/2017-02-19-rotterdam-coats.jpg rename to content/media/2017-02-19-rotterdam-coats.jpg diff --git a/_src/_media/2017-02-21-david-chipperfield-staircase.jpg b/content/media/2017-02-21-david-chipperfield-staircase.jpg similarity index 100% rename from _src/_media/2017-02-21-david-chipperfield-staircase.jpg rename to content/media/2017-02-21-david-chipperfield-staircase.jpg diff --git a/_src/_media/2017-02-26-eu-gotham-city.jpg b/content/media/2017-02-26-eu-gotham-city.jpg similarity index 100% rename from _src/_media/2017-02-26-eu-gotham-city.jpg rename to content/media/2017-02-26-eu-gotham-city.jpg diff --git a/_src/_media/2017-02-27-amsterdam-cliche.jpg b/content/media/2017-02-27-amsterdam-cliche.jpg similarity index 100% rename from _src/_media/2017-02-27-amsterdam-cliche.jpg rename to content/media/2017-02-27-amsterdam-cliche.jpg diff --git a/_src/_media/2017-02-27-its-dark-and-i-dont-exist.jpg b/content/media/2017-02-27-its-dark-and-i-dont-exist.jpg similarity index 100% rename from _src/_media/2017-02-27-its-dark-and-i-dont-exist.jpg rename to content/media/2017-02-27-its-dark-and-i-dont-exist.jpg diff --git a/_src/_media/2017-02-28-stedelijk-museum.jpg b/content/media/2017-02-28-stedelijk-museum.jpg similarity index 100% rename from _src/_media/2017-02-28-stedelijk-museum.jpg rename to content/media/2017-02-28-stedelijk-museum.jpg diff --git a/_src/_media/2017-02-28-temple-guardian-rijksmuseum.jpg b/content/media/2017-02-28-temple-guardian-rijksmuseum.jpg similarity index 100% rename from _src/_media/2017-02-28-temple-guardian-rijksmuseum.jpg rename to content/media/2017-02-28-temple-guardian-rijksmuseum.jpg diff --git a/_src/_media/2017-02-28-watching-the-night-watch.jpg b/content/media/2017-02-28-watching-the-night-watch.jpg similarity index 100% rename from _src/_media/2017-02-28-watching-the-night-watch.jpg rename to content/media/2017-02-28-watching-the-night-watch.jpg diff --git a/_src/_media/2017-04-16-hamburgs-elbphilharmonie.jpg b/content/media/2017-04-16-hamburgs-elbphilharmonie.jpg similarity index 100% rename from _src/_media/2017-04-16-hamburgs-elbphilharmonie.jpg rename to content/media/2017-04-16-hamburgs-elbphilharmonie.jpg diff --git a/_src/_media/2017-07-05-kapaleeshwarar-temple-chennai.jpg b/content/media/2017-07-05-kapaleeshwarar-temple-chennai.jpg similarity index 100% rename from _src/_media/2017-07-05-kapaleeshwarar-temple-chennai.jpg rename to content/media/2017-07-05-kapaleeshwarar-temple-chennai.jpg diff --git a/_src/_media/2017-07-08-kochis-streetart-game-is-strong.jpg b/content/media/2017-07-08-kochis-streetart-game-is-strong.jpg similarity index 100% rename from _src/_media/2017-07-08-kochis-streetart-game-is-strong.jpg rename to content/media/2017-07-08-kochis-streetart-game-is-strong.jpg diff --git a/_src/_media/2017-07-09-orphaned-elephant-with-friend.jpg b/content/media/2017-07-09-orphaned-elephant-with-friend.jpg similarity index 100% rename from _src/_media/2017-07-09-orphaned-elephant-with-friend.jpg rename to content/media/2017-07-09-orphaned-elephant-with-friend.jpg diff --git a/_src/_media/2017-07-10-kochis-dhobhi-ghat.jpg b/content/media/2017-07-10-kochis-dhobhi-ghat.jpg similarity index 100% rename from _src/_media/2017-07-10-kochis-dhobhi-ghat.jpg rename to content/media/2017-07-10-kochis-dhobhi-ghat.jpg diff --git a/_src/_media/2017-07-13-mumbai-hand-painted-typography.jpg b/content/media/2017-07-13-mumbai-hand-painted-typography.jpg similarity index 100% rename from _src/_media/2017-07-13-mumbai-hand-painted-typography.jpg rename to content/media/2017-07-13-mumbai-hand-painted-typography.jpg diff --git a/_src/_media/2017-07-13-obligatory-gate-of-india-photo.jpg b/content/media/2017-07-13-obligatory-gate-of-india-photo.jpg similarity index 100% rename from _src/_media/2017-07-13-obligatory-gate-of-india-photo.jpg rename to content/media/2017-07-13-obligatory-gate-of-india-photo.jpg diff --git a/_src/_media/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.jpg b/content/media/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.jpg similarity index 100% rename from _src/_media/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.jpg rename to content/media/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.jpg diff --git a/_src/_media/2017-11-10-acropolis-the-erechtheum.jpg b/content/media/2017-11-10-acropolis-the-erechtheum.jpg similarity index 100% rename from _src/_media/2017-11-10-acropolis-the-erechtheum.jpg rename to content/media/2017-11-10-acropolis-the-erechtheum.jpg diff --git a/_src/_media/2017-11-10-acropolis-the-parthenon.jpg b/content/media/2017-11-10-acropolis-the-parthenon.jpg similarity index 100% rename from _src/_media/2017-11-10-acropolis-the-parthenon.jpg rename to content/media/2017-11-10-acropolis-the-parthenon.jpg diff --git a/_src/_media/2017-11-10-acropolis-the-propylaea.jpg b/content/media/2017-11-10-acropolis-the-propylaea.jpg similarity index 100% rename from _src/_media/2017-11-10-acropolis-the-propylaea.jpg rename to content/media/2017-11-10-acropolis-the-propylaea.jpg diff --git a/_src/_media/2017-12-16-sagrada-familia.jpg b/content/media/2017-12-16-sagrada-familia.jpg similarity index 100% rename from _src/_media/2017-12-16-sagrada-familia.jpg rename to content/media/2017-12-16-sagrada-familia.jpg diff --git a/_src/_media/2017-12-27-sao-paulo-traffic.jpg b/content/media/2017-12-27-sao-paulo-traffic.jpg similarity index 100% rename from _src/_media/2017-12-27-sao-paulo-traffic.jpg rename to content/media/2017-12-27-sao-paulo-traffic.jpg diff --git a/_src/_media/2018-01-04-passagem-literaria-da-consolacao.jpg b/content/media/2018-01-04-passagem-literaria-da-consolacao.jpg similarity index 100% rename from _src/_media/2018-01-04-passagem-literaria-da-consolacao.jpg rename to content/media/2018-01-04-passagem-literaria-da-consolacao.jpg diff --git a/_src/_media/2018-01-05-samba-school.jpg b/content/media/2018-01-05-samba-school.jpg similarity index 100% rename from _src/_media/2018-01-05-samba-school.jpg rename to content/media/2018-01-05-samba-school.jpg diff --git a/_src/_media/2ba6eeba81b111e1989612313815112c_7.jpg b/content/media/2ba6eeba81b111e1989612313815112c_7.jpg similarity index 100% rename from _src/_media/2ba6eeba81b111e1989612313815112c_7.jpg rename to content/media/2ba6eeba81b111e1989612313815112c_7.jpg diff --git a/_src/_media/2ca7a094e10f11e1868c12313817a130_7.jpg b/content/media/2ca7a094e10f11e1868c12313817a130_7.jpg similarity index 100% rename from _src/_media/2ca7a094e10f11e1868c12313817a130_7.jpg rename to content/media/2ca7a094e10f11e1868c12313817a130_7.jpg diff --git a/_src/_media/41b5a454a43811e1989612313815112c_7.jpeg b/content/media/41b5a454a43811e1989612313815112c_7.jpeg similarity index 100% rename from _src/_media/41b5a454a43811e1989612313815112c_7.jpeg rename to content/media/41b5a454a43811e1989612313815112c_7.jpeg diff --git a/_src/_media/44af28f2805b11e18cf91231380fd29b_7.jpg b/content/media/44af28f2805b11e18cf91231380fd29b_7.jpg similarity index 100% rename from _src/_media/44af28f2805b11e18cf91231380fd29b_7.jpg rename to content/media/44af28f2805b11e18cf91231380fd29b_7.jpg diff --git a/_src/_media/5df6e0a280c911e1a87612313804ec91_7.jpg b/content/media/5df6e0a280c911e1a87612313804ec91_7.jpg similarity index 100% rename from _src/_media/5df6e0a280c911e1a87612313804ec91_7.jpg rename to content/media/5df6e0a280c911e1a87612313804ec91_7.jpg diff --git a/_src/_media/5fc688aa953811e180c9123138016265_7.jpg b/content/media/5fc688aa953811e180c9123138016265_7.jpg similarity index 100% rename from _src/_media/5fc688aa953811e180c9123138016265_7.jpg rename to content/media/5fc688aa953811e180c9123138016265_7.jpg diff --git a/_src/_media/619b3900f92911e1a31922000a1cddf1_7.jpg b/content/media/619b3900f92911e1a31922000a1cddf1_7.jpg similarity index 100% rename from _src/_media/619b3900f92911e1a31922000a1cddf1_7.jpg rename to content/media/619b3900f92911e1a31922000a1cddf1_7.jpg diff --git a/_src/_media/6313cc1e7db611e180c9123138016265_7.jpg b/content/media/6313cc1e7db611e180c9123138016265_7.jpg similarity index 100% rename from _src/_media/6313cc1e7db611e180c9123138016265_7.jpg rename to content/media/6313cc1e7db611e180c9123138016265_7.jpg diff --git a/_src/_media/66a6e0c0d25a11e1a94522000a1e8aaf_7.jpg b/content/media/66a6e0c0d25a11e1a94522000a1e8aaf_7.jpg similarity index 100% rename from _src/_media/66a6e0c0d25a11e1a94522000a1e8aaf_7.jpg rename to content/media/66a6e0c0d25a11e1a94522000a1e8aaf_7.jpg diff --git a/_src/_media/690fe368a81911e1b2fe1231380205bf_7.jpg b/content/media/690fe368a81911e1b2fe1231380205bf_7.jpg similarity index 100% rename from _src/_media/690fe368a81911e1b2fe1231380205bf_7.jpg rename to content/media/690fe368a81911e1b2fe1231380205bf_7.jpg diff --git a/_src/_media/6c4003f2fe9911e1ae9122000a1e9e21_7.jpg b/content/media/6c4003f2fe9911e1ae9122000a1e9e21_7.jpg similarity index 100% rename from _src/_media/6c4003f2fe9911e1ae9122000a1e9e21_7.jpg rename to content/media/6c4003f2fe9911e1ae9122000a1e9e21_7.jpg diff --git a/_src/_media/7838011c80ce11e19e4a12313813ffc0_7.jpg b/content/media/7838011c80ce11e19e4a12313813ffc0_7.jpg similarity index 100% rename from _src/_media/7838011c80ce11e19e4a12313813ffc0_7.jpg rename to content/media/7838011c80ce11e19e4a12313813ffc0_7.jpg diff --git a/_src/_media/7e2b28f881b711e1af7612313813f8e8_7.jpg b/content/media/7e2b28f881b711e1af7612313813f8e8_7.jpg similarity index 100% rename from _src/_media/7e2b28f881b711e1af7612313813f8e8_7.jpg rename to content/media/7e2b28f881b711e1af7612313813f8e8_7.jpg diff --git a/_src/_media/7f9397a265d811e1b9f1123138140926_7.jpg b/content/media/7f9397a265d811e1b9f1123138140926_7.jpg similarity index 100% rename from _src/_media/7f9397a265d811e1b9f1123138140926_7.jpg rename to content/media/7f9397a265d811e1b9f1123138140926_7.jpg diff --git a/_src/_media/80a136dabff711e188131231381b5c25_7.jpg b/content/media/80a136dabff711e188131231381b5c25_7.jpg similarity index 100% rename from _src/_media/80a136dabff711e188131231381b5c25_7.jpg rename to content/media/80a136dabff711e188131231381b5c25_7.jpg diff --git a/_src/_media/8372983659_da0e88ca79_o.jpg b/content/media/8372983659_da0e88ca79_o.jpg similarity index 100% rename from _src/_media/8372983659_da0e88ca79_o.jpg rename to content/media/8372983659_da0e88ca79_o.jpg diff --git a/_src/_media/8450618380_83c64006c6_o.jpg b/content/media/8450618380_83c64006c6_o.jpg similarity index 100% rename from _src/_media/8450618380_83c64006c6_o.jpg rename to content/media/8450618380_83c64006c6_o.jpg diff --git a/_src/_media/8455835942_a9b9100373_o.jpg b/content/media/8455835942_a9b9100373_o.jpg similarity index 100% rename from _src/_media/8455835942_a9b9100373_o.jpg rename to content/media/8455835942_a9b9100373_o.jpg diff --git a/_src/_media/84f9d2c4fb7411e19ca422000a1d0119_7.jpg b/content/media/84f9d2c4fb7411e19ca422000a1d0119_7.jpg similarity index 100% rename from _src/_media/84f9d2c4fb7411e19ca422000a1d0119_7.jpg rename to content/media/84f9d2c4fb7411e19ca422000a1d0119_7.jpg diff --git a/_src/_media/8776417095_43553c88c2_o.jpg b/content/media/8776417095_43553c88c2_o.jpg similarity index 100% rename from _src/_media/8776417095_43553c88c2_o.jpg rename to content/media/8776417095_43553c88c2_o.jpg diff --git a/_src/_media/8782995066_e90ff6b3ae_o.jpg b/content/media/8782995066_e90ff6b3ae_o.jpg similarity index 100% rename from _src/_media/8782995066_e90ff6b3ae_o.jpg rename to content/media/8782995066_e90ff6b3ae_o.jpg diff --git a/_src/_media/97a44d6080b711e181bd12313817987b_7.jpg b/content/media/97a44d6080b711e181bd12313817987b_7.jpg similarity index 100% rename from _src/_media/97a44d6080b711e181bd12313817987b_7.jpg rename to content/media/97a44d6080b711e181bd12313817987b_7.jpg diff --git a/_src/_media/A-Long-Time-Ago.jpg b/content/media/A-Long-Time-Ago.jpg similarity index 100% rename from _src/_media/A-Long-Time-Ago.jpg rename to content/media/A-Long-Time-Ago.jpg diff --git a/_src/_media/Adiumeetie-Dock-Preview.png b/content/media/Adiumeetie-Dock-Preview.png similarity index 100% rename from _src/_media/Adiumeetie-Dock-Preview.png rename to content/media/Adiumeetie-Dock-Preview.png diff --git a/_src/_media/Adiumeetie-Teaser-AdiumIcon.png b/content/media/Adiumeetie-Teaser-AdiumIcon.png similarity index 100% rename from _src/_media/Adiumeetie-Teaser-AdiumIcon.png rename to content/media/Adiumeetie-Teaser-AdiumIcon.png diff --git a/_src/_media/Adiumeetie-Teaser.jpg b/content/media/Adiumeetie-Teaser.jpg similarity index 100% rename from _src/_media/Adiumeetie-Teaser.jpg rename to content/media/Adiumeetie-Teaser.jpg diff --git a/_src/_media/Badged-Teaser-kremalicious.png b/content/media/Badged-Teaser-kremalicious.png similarity index 100% rename from _src/_media/Badged-Teaser-kremalicious.png rename to content/media/Badged-Teaser-kremalicious.png diff --git a/_src/_media/Badged-Teaser-kremalicious@2x.png b/content/media/Badged-Teaser-kremalicious@2x.png similarity index 100% rename from _src/_media/Badged-Teaser-kremalicious@2x.png rename to content/media/Badged-Teaser-kremalicious@2x.png diff --git a/_src/_media/Basically-The-Monolith-Is-On-My-Desk.jpg b/content/media/Basically-The-Monolith-Is-On-My-Desk.jpg similarity index 100% rename from _src/_media/Basically-The-Monolith-Is-On-My-Desk.jpg rename to content/media/Basically-The-Monolith-Is-On-My-Desk.jpg diff --git a/_src/_media/Blaue-Tuerme-1.jpg b/content/media/Blaue-Tuerme-1.jpg similarity index 100% rename from _src/_media/Blaue-Tuerme-1.jpg rename to content/media/Blaue-Tuerme-1.jpg diff --git a/_src/_media/Bonsai-5-Version-2.jpg b/content/media/Bonsai-5-Version-2.jpg similarity index 100% rename from _src/_media/Bonsai-5-Version-2.jpg rename to content/media/Bonsai-5-Version-2.jpg diff --git a/_src/_media/Broken-Nexus-S-Screen.jpg b/content/media/Broken-Nexus-S-Screen.jpg similarity index 100% rename from _src/_media/Broken-Nexus-S-Screen.jpg rename to content/media/Broken-Nexus-S-Screen.jpg diff --git a/_src/_media/Delibar-Icons-Teaser.jpg b/content/media/Delibar-Icons-Teaser.jpg similarity index 100% rename from _src/_media/Delibar-Icons-Teaser.jpg rename to content/media/Delibar-Icons-Teaser.jpg diff --git a/_src/_media/Delibar-Icons-Teaser2.png b/content/media/Delibar-Icons-Teaser2.png similarity index 100% rename from _src/_media/Delibar-Icons-Teaser2.png rename to content/media/Delibar-Icons-Teaser2.png diff --git a/_src/_media/Enjoying-Paper.jpg b/content/media/Enjoying-Paper.jpg similarity index 100% rename from _src/_media/Enjoying-Paper.jpg rename to content/media/Enjoying-Paper.jpg diff --git a/_src/_media/Free-Monkey-Breath-Not-Soylent-Green.jpg b/content/media/Free-Monkey-Breath-Not-Soylent-Green.jpg similarity index 100% rename from _src/_media/Free-Monkey-Breath-Not-Soylent-Green.jpg rename to content/media/Free-Monkey-Breath-Not-Soylent-Green.jpg diff --git a/_src/_media/GDR-Helvetica.jpg b/content/media/GDR-Helvetica.jpg similarity index 100% rename from _src/_media/GDR-Helvetica.jpg rename to content/media/GDR-Helvetica.jpg diff --git a/_src/_media/Glowing-Star-Inside.jpg b/content/media/Glowing-Star-Inside.jpg similarity index 100% rename from _src/_media/Glowing-Star-Inside.jpg rename to content/media/Glowing-Star-Inside.jpg diff --git a/_src/_media/Historic-Flood-Levels.jpg b/content/media/Historic-Flood-Levels.jpg similarity index 100% rename from _src/_media/Historic-Flood-Levels.jpg rename to content/media/Historic-Flood-Levels.jpg diff --git a/_src/_media/Instagram-Swipe.png b/content/media/Instagram-Swipe.png similarity index 100% rename from _src/_media/Instagram-Swipe.png rename to content/media/Instagram-Swipe.png diff --git a/_src/_media/MG_1735-Version-2.jpg b/content/media/MG_1735-Version-2.jpg similarity index 100% rename from _src/_media/MG_1735-Version-2.jpg rename to content/media/MG_1735-Version-2.jpg diff --git a/_src/_media/MG_1920.jpg b/content/media/MG_1920.jpg similarity index 100% rename from _src/_media/MG_1920.jpg rename to content/media/MG_1920.jpg diff --git a/_src/_media/MG_5885_2006-7-23.jpg b/content/media/MG_5885_2006-7-23.jpg similarity index 100% rename from _src/_media/MG_5885_2006-7-23.jpg rename to content/media/MG_5885_2006-7-23.jpg diff --git a/_src/_media/MG_9313_2007-02-10.jpg b/content/media/MG_9313_2007-02-10.jpg similarity index 100% rename from _src/_media/MG_9313_2007-02-10.jpg rename to content/media/MG_9313_2007-02-10.jpg diff --git a/_src/_media/MomCorp-Walls-Overview.png b/content/media/MomCorp-Walls-Overview.png similarity index 100% rename from _src/_media/MomCorp-Walls-Overview.png rename to content/media/MomCorp-Walls-Overview.png diff --git a/_src/_media/Monstrum_Gameboy_Catherine_Kaleel.jpg b/content/media/Monstrum_Gameboy_Catherine_Kaleel.jpg similarity index 100% rename from _src/_media/Monstrum_Gameboy_Catherine_Kaleel.jpg rename to content/media/Monstrum_Gameboy_Catherine_Kaleel.jpg diff --git a/_src/_media/Office-Desk.jpg b/content/media/Office-Desk.jpg similarity index 100% rename from _src/_media/Office-Desk.jpg rename to content/media/Office-Desk.jpg diff --git a/_src/_media/PS_CR2FileIcon.png b/content/media/PS_CR2FileIcon.png similarity index 100% rename from _src/_media/PS_CR2FileIcon.png rename to content/media/PS_CR2FileIcon.png diff --git a/_src/_media/Project-Purple-Dribbble.png b/content/media/Project-Purple-Dribbble.png similarity index 100% rename from _src/_media/Project-Purple-Dribbble.png rename to content/media/Project-Purple-Dribbble.png diff --git a/_src/_media/Teaser-Adiumeetie.jpg b/content/media/Teaser-Adiumeetie.jpg similarity index 100% rename from _src/_media/Teaser-Adiumeetie.jpg rename to content/media/Teaser-Adiumeetie.jpg diff --git a/_src/_media/Teaser-Aperture-File-Types.jpg b/content/media/Teaser-Aperture-File-Types.jpg similarity index 100% rename from _src/_media/Teaser-Aperture-File-Types.jpg rename to content/media/Teaser-Aperture-File-Types.jpg diff --git a/_src/_media/Teaser-Camera-Obscura-Icons.jpg b/content/media/Teaser-Camera-Obscura-Icons.jpg similarity index 100% rename from _src/_media/Teaser-Camera-Obscura-Icons.jpg rename to content/media/Teaser-Camera-Obscura-Icons.jpg diff --git a/_src/_media/Teaser-Camera-Obscura-Walls.jpg b/content/media/Teaser-Camera-Obscura-Walls.jpg similarity index 100% rename from _src/_media/Teaser-Camera-Obscura-Walls.jpg rename to content/media/Teaser-Camera-Obscura-Walls.jpg diff --git a/_src/_media/Teaser-Chives.jpg b/content/media/Teaser-Chives.jpg similarity index 100% rename from _src/_media/Teaser-Chives.jpg rename to content/media/Teaser-Chives.jpg diff --git a/_src/_media/Teaser-Coffee-Cup-Icon.jpg b/content/media/Teaser-Coffee-Cup-Icon.jpg similarity index 100% rename from _src/_media/Teaser-Coffee-Cup-Icon.jpg rename to content/media/Teaser-Coffee-Cup-Icon.jpg diff --git a/_src/_media/Teaser-Delibar-Icons.jpg b/content/media/Teaser-Delibar-Icons.jpg similarity index 100% rename from _src/_media/Teaser-Delibar-Icons.jpg rename to content/media/Teaser-Delibar-Icons.jpg diff --git a/_src/_media/Teaser-Icy-Box.jpg b/content/media/Teaser-Icy-Box.jpg similarity index 100% rename from _src/_media/Teaser-Icy-Box.jpg rename to content/media/Teaser-Icy-Box.jpg diff --git a/_src/_media/Teaser-Mars-U.jpg b/content/media/Teaser-Mars-U.jpg similarity index 100% rename from _src/_media/Teaser-Mars-U.jpg rename to content/media/Teaser-Mars-U.jpg diff --git a/_src/_media/Teaser-MomCorp-Wall.png b/content/media/Teaser-MomCorp-Wall.png similarity index 100% rename from _src/_media/Teaser-MomCorp-Wall.png rename to content/media/Teaser-MomCorp-Wall.png diff --git a/_src/_media/Teaser-Out-Of-Whale-Oil.jpg b/content/media/Teaser-Out-Of-Whale-Oil.jpg similarity index 100% rename from _src/_media/Teaser-Out-Of-Whale-Oil.jpg rename to content/media/Teaser-Out-Of-Whale-Oil.jpg diff --git a/_src/_media/Teaser-Project-Purple.png b/content/media/Teaser-Project-Purple.png similarity index 100% rename from _src/_media/Teaser-Project-Purple.png rename to content/media/Teaser-Project-Purple.png diff --git a/_src/_media/Teaser-Twitter-Crisp.jpg b/content/media/Teaser-Twitter-Crisp.jpg similarity index 100% rename from _src/_media/Teaser-Twitter-Crisp.jpg rename to content/media/Teaser-Twitter-Crisp.jpg diff --git a/_src/_media/Teaser-iPixelPad.png b/content/media/Teaser-iPixelPad.png similarity index 100% rename from _src/_media/Teaser-iPixelPad.png rename to content/media/Teaser-iPixelPad.png diff --git a/_src/_media/Twitter-Crisp-16.png b/content/media/Twitter-Crisp-16.png similarity index 100% rename from _src/_media/Twitter-Crisp-16.png rename to content/media/Twitter-Crisp-16.png diff --git a/_src/_media/Typeface-condoms.jpg b/content/media/Typeface-condoms.jpg similarity index 100% rename from _src/_media/Typeface-condoms.jpg rename to content/media/Typeface-condoms.jpg diff --git a/_src/_media/View-from-the-Window-at-Le-Gras.png b/content/media/View-from-the-Window-at-Le-Gras.png similarity index 100% rename from _src/_media/View-from-the-Window-at-Le-Gras.png rename to content/media/View-from-the-Window-at-Le-Gras.png diff --git a/_src/_media/Windows-8-Metro-tile-kremalicious-all-apps.png b/content/media/Windows-8-Metro-tile-kremalicious-all-apps.png similarity index 100% rename from _src/_media/Windows-8-Metro-tile-kremalicious-all-apps.png rename to content/media/Windows-8-Metro-tile-kremalicious-all-apps.png diff --git a/_src/_media/Windows-8-Metro-tile-kremalicious-in-action.png b/content/media/Windows-8-Metro-tile-kremalicious-in-action.png similarity index 100% rename from _src/_media/Windows-8-Metro-tile-kremalicious-in-action.png rename to content/media/Windows-8-Metro-tile-kremalicious-in-action.png diff --git a/_src/_media/Windows-8-Metro-tile-kremalicious.png b/content/media/Windows-8-Metro-tile-kremalicious.png similarity index 100% rename from _src/_media/Windows-8-Metro-tile-kremalicious.png rename to content/media/Windows-8-Metro-tile-kremalicious.png diff --git a/_src/_media/WordPress-Admin-Icons-Template-Filled.png b/content/media/WordPress-Admin-Icons-Template-Filled.png similarity index 100% rename from _src/_media/WordPress-Admin-Icons-Template-Filled.png rename to content/media/WordPress-Admin-Icons-Template-Filled.png diff --git a/_src/_media/a-storm-is-coming.jpg b/content/media/a-storm-is-coming.jpg similarity index 100% rename from _src/_media/a-storm-is-coming.jpg rename to content/media/a-storm-is-coming.jpg diff --git a/_src/_media/adiumeetie-by-kremalicious.zip b/content/media/adiumeetie-by-kremalicious.zip similarity index 100% rename from _src/_media/adiumeetie-by-kremalicious.zip rename to content/media/adiumeetie-by-kremalicious.zip diff --git a/_src/_media/adiumeetie-goodies-teaser.png b/content/media/adiumeetie-goodies-teaser.png similarity index 100% rename from _src/_media/adiumeetie-goodies-teaser.png rename to content/media/adiumeetie-goodies-teaser.png diff --git a/_src/_media/aff38e2c7f5311e1b10e123138105d6b_7.jpg b/content/media/aff38e2c7f5311e1b10e123138105d6b_7.jpg similarity index 100% rename from _src/_media/aff38e2c7f5311e1b10e123138105d6b_7.jpg rename to content/media/aff38e2c7f5311e1b10e123138105d6b_7.jpg diff --git a/_src/_media/ai-wei-wei-stools.jpg b/content/media/ai-wei-wei-stools.jpg similarity index 100% rename from _src/_media/ai-wei-wei-stools.jpg rename to content/media/ai-wei-wei-stools.jpg diff --git a/_src/_media/airfield-reference-point.jpg b/content/media/airfield-reference-point.jpg similarity index 100% rename from _src/_media/airfield-reference-point.jpg rename to content/media/airfield-reference-point.jpg diff --git a/_src/_media/android-galaxy-note.png b/content/media/android-galaxy-note.png similarity index 100% rename from _src/_media/android-galaxy-note.png rename to content/media/android-galaxy-note.png diff --git a/_src/_media/android-navigation-buttons.png b/content/media/android-navigation-buttons.png similarity index 100% rename from _src/_media/android-navigation-buttons.png rename to content/media/android-navigation-buttons.png diff --git a/_src/_media/apassis.png b/content/media/apassis.png similarity index 100% rename from _src/_media/apassis.png rename to content/media/apassis.png diff --git a/_src/_media/aperture-impression.png b/content/media/aperture-impression.png similarity index 100% rename from _src/_media/aperture-impression.png rename to content/media/aperture-impression.png diff --git a/_src/_media/aperture-plugin128.png b/content/media/aperture-plugin128.png similarity index 100% rename from _src/_media/aperture-plugin128.png rename to content/media/aperture-plugin128.png diff --git a/_src/_media/aperture128.png b/content/media/aperture128.png similarity index 100% rename from _src/_media/aperture128.png rename to content/media/aperture128.png diff --git a/_src/_media/aperture15_1.png b/content/media/aperture15_1.png similarity index 100% rename from _src/_media/aperture15_1.png rename to content/media/aperture15_1.png diff --git a/_src/_media/aperture15_10.png b/content/media/aperture15_10.png similarity index 100% rename from _src/_media/aperture15_10.png rename to content/media/aperture15_10.png diff --git a/_src/_media/aperture15_11.png b/content/media/aperture15_11.png similarity index 100% rename from _src/_media/aperture15_11.png rename to content/media/aperture15_11.png diff --git a/_src/_media/aperture15_12.png b/content/media/aperture15_12.png similarity index 100% rename from _src/_media/aperture15_12.png rename to content/media/aperture15_12.png diff --git a/_src/_media/aperture15_13.png b/content/media/aperture15_13.png similarity index 100% rename from _src/_media/aperture15_13.png rename to content/media/aperture15_13.png diff --git a/_src/_media/aperture15_14.jpg b/content/media/aperture15_14.jpg similarity index 100% rename from _src/_media/aperture15_14.jpg rename to content/media/aperture15_14.jpg diff --git a/_src/_media/aperture15_15.png b/content/media/aperture15_15.png similarity index 100% rename from _src/_media/aperture15_15.png rename to content/media/aperture15_15.png diff --git a/_src/_media/aperture15_2.png b/content/media/aperture15_2.png similarity index 100% rename from _src/_media/aperture15_2.png rename to content/media/aperture15_2.png diff --git a/_src/_media/aperture15_3.png b/content/media/aperture15_3.png similarity index 100% rename from _src/_media/aperture15_3.png rename to content/media/aperture15_3.png diff --git a/_src/_media/aperture15_4.png b/content/media/aperture15_4.png similarity index 100% rename from _src/_media/aperture15_4.png rename to content/media/aperture15_4.png diff --git a/_src/_media/aperture15_5.png b/content/media/aperture15_5.png similarity index 100% rename from _src/_media/aperture15_5.png rename to content/media/aperture15_5.png diff --git a/_src/_media/aperture15_6.png b/content/media/aperture15_6.png similarity index 100% rename from _src/_media/aperture15_6.png rename to content/media/aperture15_6.png diff --git a/_src/_media/aperture15_7.png b/content/media/aperture15_7.png similarity index 100% rename from _src/_media/aperture15_7.png rename to content/media/aperture15_7.png diff --git a/_src/_media/aperture15_8.jpg b/content/media/aperture15_8.jpg similarity index 100% rename from _src/_media/aperture15_8.jpg rename to content/media/aperture15_8.jpg diff --git a/_src/_media/aperture15_8.png b/content/media/aperture15_8.png similarity index 100% rename from _src/_media/aperture15_8.png rename to content/media/aperture15_8.png diff --git a/_src/_media/aperture72.png b/content/media/aperture72.png similarity index 100% rename from _src/_media/aperture72.png rename to content/media/aperture72.png diff --git a/_src/_media/aperture97.png b/content/media/aperture97.png similarity index 100% rename from _src/_media/aperture97.png rename to content/media/aperture97.png diff --git a/_src/_media/aperture_borderfx.png b/content/media/aperture_borderfx.png similarity index 100% rename from _src/_media/aperture_borderfx.png rename to content/media/aperture_borderfx.png diff --git a/_src/_media/aperture_bt.png b/content/media/aperture_bt.png similarity index 100% rename from _src/_media/aperture_bt.png rename to content/media/aperture_bt.png diff --git a/_src/_media/apertureedit_interface.jpg b/content/media/apertureedit_interface.jpg similarity index 100% rename from _src/_media/apertureedit_interface.jpg rename to content/media/apertureedit_interface.jpg diff --git a/_src/_media/apertureedit_logo.png b/content/media/apertureedit_logo.png similarity index 100% rename from _src/_media/apertureedit_logo.png rename to content/media/apertureedit_logo.png diff --git a/_src/_media/apertureedit_logo2.png b/content/media/apertureedit_logo2.png similarity index 100% rename from _src/_media/apertureedit_logo2.png rename to content/media/apertureedit_logo2.png diff --git a/_src/_media/aperturefiletypes.png b/content/media/aperturefiletypes.png similarity index 100% rename from _src/_media/aperturefiletypes.png rename to content/media/aperturefiletypes.png diff --git a/_src/_media/aperturefiletypes_by_kremalicious.zip b/content/media/aperturefiletypes_by_kremalicious.zip similarity index 100% rename from _src/_media/aperturefiletypes_by_kremalicious.zip rename to content/media/aperturefiletypes_by_kremalicious.zip diff --git a/_src/_media/apertureimport_automatic.png b/content/media/apertureimport_automatic.png similarity index 100% rename from _src/_media/apertureimport_automatic.png rename to content/media/apertureimport_automatic.png diff --git a/_src/_media/apertureimport_automator.png b/content/media/apertureimport_automator.png similarity index 100% rename from _src/_media/apertureimport_automator.png rename to content/media/apertureimport_automator.png diff --git a/_src/_media/apertureimportplugin.png b/content/media/apertureimportplugin.png similarity index 100% rename from _src/_media/apertureimportplugin.png rename to content/media/apertureimportplugin.png diff --git a/_src/_media/aperturescan.png b/content/media/aperturescan.png similarity index 100% rename from _src/_media/aperturescan.png rename to content/media/aperturescan.png diff --git a/_src/_media/architect-icon.jpg b/content/media/architect-icon.jpg similarity index 100% rename from _src/_media/architect-icon.jpg rename to content/media/architect-icon.jpg diff --git a/_src/_media/architect-ui.png b/content/media/architect-ui.png similarity index 100% rename from _src/_media/architect-ui.png rename to content/media/architect-ui.png diff --git a/_src/_media/automator.png b/content/media/automator.png similarity index 100% rename from _src/_media/automator.png rename to content/media/automator.png diff --git a/_src/_media/badged-settings.png b/content/media/badged-settings.png similarity index 100% rename from _src/_media/badged-settings.png rename to content/media/badged-settings.png diff --git a/_src/_media/behind-the-art.jpg b/content/media/behind-the-art.jpg similarity index 100% rename from _src/_media/behind-the-art.jpg rename to content/media/behind-the-art.jpg diff --git a/_src/_media/berliner_bruecke1-HDR-16bit.jpg b/content/media/berliner_bruecke1-HDR-16bit.jpg similarity index 100% rename from _src/_media/berliner_bruecke1-HDR-16bit.jpg rename to content/media/berliner_bruecke1-HDR-16bit.jpg diff --git a/_src/_media/bonjour97.png b/content/media/bonjour97.png similarity index 100% rename from _src/_media/bonjour97.png rename to content/media/bonjour97.png diff --git a/_src/_media/box_download.png b/content/media/box_download.png similarity index 100% rename from _src/_media/box_download.png rename to content/media/box_download.png diff --git a/_src/_media/buddha-colorscheme.png b/content/media/buddha-colorscheme.png similarity index 100% rename from _src/_media/buddha-colorscheme.png rename to content/media/buddha-colorscheme.png diff --git a/_src/_media/buddha-printer.png b/content/media/buddha-printer.png similarity index 100% rename from _src/_media/buddha-printer.png rename to content/media/buddha-printer.png diff --git a/_src/_media/bundeskanzleramt_01_HDR_tonemapped_16bit-Version-2.jpg b/content/media/bundeskanzleramt_01_HDR_tonemapped_16bit-Version-2.jpg similarity index 100% rename from _src/_media/bundeskanzleramt_01_HDR_tonemapped_16bit-Version-2.jpg rename to content/media/bundeskanzleramt_01_HDR_tonemapped_16bit-Version-2.jpg diff --git a/_src/_media/c0c45b6eeea211e1ad8e22000a1cdbb8_7.jpg b/content/media/c0c45b6eeea211e1ad8e22000a1cdbb8_7.jpg similarity index 100% rename from _src/_media/c0c45b6eeea211e1ad8e22000a1cdbb8_7.jpg rename to content/media/c0c45b6eeea211e1ad8e22000a1cdbb8_7.jpg diff --git a/_src/_media/camera_obscura_wall_teaser.png b/content/media/camera_obscura_wall_teaser.png similarity index 100% rename from _src/_media/camera_obscura_wall_teaser.png rename to content/media/camera_obscura_wall_teaser.png diff --git a/_src/_media/cameraobscura11_all.png b/content/media/cameraobscura11_all.png similarity index 100% rename from _src/_media/cameraobscura11_all.png rename to content/media/cameraobscura11_all.png diff --git a/_src/_media/cameraobscura11_all_thumb.png b/content/media/cameraobscura11_all_thumb.png similarity index 100% rename from _src/_media/cameraobscura11_all_thumb.png rename to content/media/cameraobscura11_all_thumb.png diff --git a/_src/_media/cameraobscura_aperture_128.png b/content/media/cameraobscura_aperture_128.png similarity index 100% rename from _src/_media/cameraobscura_aperture_128.png rename to content/media/cameraobscura_aperture_128.png diff --git a/_src/_media/cameraobscura_inuse.png b/content/media/cameraobscura_inuse.png similarity index 100% rename from _src/_media/cameraobscura_inuse.png rename to content/media/cameraobscura_inuse.png diff --git a/_src/_media/cameraobscura_teaser1.png b/content/media/cameraobscura_teaser1.png similarity index 100% rename from _src/_media/cameraobscura_teaser1.png rename to content/media/cameraobscura_teaser1.png diff --git a/_src/_media/canon1.png b/content/media/canon1.png similarity index 100% rename from _src/_media/canon1.png rename to content/media/canon1.png diff --git a/_src/_media/canon1000d.png b/content/media/canon1000d.png similarity index 100% rename from _src/_media/canon1000d.png rename to content/media/canon1000d.png diff --git a/_src/_media/canon2.png b/content/media/canon2.png similarity index 100% rename from _src/_media/canon2.png rename to content/media/canon2.png diff --git a/_src/_media/canon3.png b/content/media/canon3.png similarity index 100% rename from _src/_media/canon3.png rename to content/media/canon3.png diff --git a/_src/_media/canon4.png b/content/media/canon4.png similarity index 100% rename from _src/_media/canon4.png rename to content/media/canon4.png diff --git a/_src/_media/canondrivercontents.png b/content/media/canondrivercontents.png similarity index 100% rename from _src/_media/canondrivercontents.png rename to content/media/canondrivercontents.png diff --git a/_src/_media/canoscanlide500f.jpg b/content/media/canoscanlide500f.jpg similarity index 100% rename from _src/_media/canoscanlide500f.jpg rename to content/media/canoscanlide500f.jpg diff --git a/_src/_media/ce2d29f40df411e2ad5812313817873b_7.jpg b/content/media/ce2d29f40df411e2ad5812313817873b_7.jpg similarity index 100% rename from _src/_media/ce2d29f40df411e2ad5812313817873b_7.jpg rename to content/media/ce2d29f40df411e2ad5812313817873b_7.jpg diff --git a/_src/_media/chives_by_kremalicious.zip b/content/media/chives_by_kremalicious.zip similarity index 100% rename from _src/_media/chives_by_kremalicious.zip rename to content/media/chives_by_kremalicious.zip diff --git a/_src/_media/chives_wallpaper_teaser.png b/content/media/chives_wallpaper_teaser.png similarity index 100% rename from _src/_media/chives_wallpaper_teaser.png rename to content/media/chives_wallpaper_teaser.png diff --git a/_src/_media/chrome-ui.png b/content/media/chrome-ui.png similarity index 100% rename from _src/_media/chrome-ui.png rename to content/media/chrome-ui.png diff --git a/_src/_media/coda-clips-icon-files.zip b/content/media/coda-clips-icon-files.zip similarity index 100% rename from _src/_media/coda-clips-icon-files.zip rename to content/media/coda-clips-icon-files.zip diff --git a/_src/_media/codaclips-hud.png b/content/media/codaclips-hud.png similarity index 100% rename from _src/_media/codaclips-hud.png rename to content/media/codaclips-hud.png diff --git a/_src/_media/codaclips-icon128.png b/content/media/codaclips-icon128.png similarity index 100% rename from _src/_media/codaclips-icon128.png rename to content/media/codaclips-icon128.png diff --git a/_src/_media/codaclips-icon48.png b/content/media/codaclips-icon48.png similarity index 100% rename from _src/_media/codaclips-icon48.png rename to content/media/codaclips-icon48.png diff --git a/_src/_media/codaclips-placeholder.png b/content/media/codaclips-placeholder.png similarity index 100% rename from _src/_media/codaclips-placeholder.png rename to content/media/codaclips-placeholder.png diff --git a/_src/_media/codaclips-teaser.png b/content/media/codaclips-teaser.png similarity index 100% rename from _src/_media/codaclips-teaser.png rename to content/media/codaclips-teaser.png diff --git a/_src/_media/coffee-cup-empty.png b/content/media/coffee-cup-empty.png similarity index 100% rename from _src/_media/coffee-cup-empty.png rename to content/media/coffee-cup-empty.png diff --git a/_src/_media/coffee-cup-icon-kremalicious.png b/content/media/coffee-cup-icon-kremalicious.png similarity index 100% rename from _src/_media/coffee-cup-icon-kremalicious.png rename to content/media/coffee-cup-icon-kremalicious.png diff --git a/_src/_media/coffee-cup-icon-teaser.png b/content/media/coffee-cup-icon-teaser.png similarity index 100% rename from _src/_media/coffee-cup-icon-teaser.png rename to content/media/coffee-cup-icon-teaser.png diff --git a/_src/_media/coffee-showcase-apple.png b/content/media/coffee-showcase-apple.png similarity index 100% rename from _src/_media/coffee-showcase-apple.png rename to content/media/coffee-showcase-apple.png diff --git a/_src/_media/coffee-showcase-baumann.png b/content/media/coffee-showcase-baumann.png similarity index 100% rename from _src/_media/coffee-showcase-baumann.png rename to content/media/coffee-showcase-baumann.png diff --git a/_src/_media/coffee-showcase-benedik.png b/content/media/coffee-showcase-benedik.png similarity index 100% rename from _src/_media/coffee-showcase-benedik.png rename to content/media/coffee-showcase-benedik.png diff --git a/_src/_media/coffee-showcase-brasgalla.png b/content/media/coffee-showcase-brasgalla.png similarity index 100% rename from _src/_media/coffee-showcase-brasgalla.png rename to content/media/coffee-showcase-brasgalla.png diff --git a/_src/_media/coffee-showcase-brasgalla2.png b/content/media/coffee-showcase-brasgalla2.png similarity index 100% rename from _src/_media/coffee-showcase-brasgalla2.png rename to content/media/coffee-showcase-brasgalla2.png diff --git a/_src/_media/coffee-showcase-cappuccinosofa.png b/content/media/coffee-showcase-cappuccinosofa.png similarity index 100% rename from _src/_media/coffee-showcase-cappuccinosofa.png rename to content/media/coffee-showcase-cappuccinosofa.png diff --git a/_src/_media/coffee-showcase-england.png b/content/media/coffee-showcase-england.png similarity index 100% rename from _src/_media/coffee-showcase-england.png rename to content/media/coffee-showcase-england.png diff --git a/_src/_media/coffee-showcase-flarup.png b/content/media/coffee-showcase-flarup.png similarity index 100% rename from _src/_media/coffee-showcase-flarup.png rename to content/media/coffee-showcase-flarup.png diff --git a/_src/_media/coffee-showcase-jaeppinen.png b/content/media/coffee-showcase-jaeppinen.png similarity index 100% rename from _src/_media/coffee-showcase-jaeppinen.png rename to content/media/coffee-showcase-jaeppinen.png diff --git a/_src/_media/coffee-showcase-kaycaffeine.png b/content/media/coffee-showcase-kaycaffeine.png similarity index 100% rename from _src/_media/coffee-showcase-kaycaffeine.png rename to content/media/coffee-showcase-kaycaffeine.png diff --git a/_src/_media/coffee-showcase-kretschmann.png b/content/media/coffee-showcase-kretschmann.png similarity index 100% rename from _src/_media/coffee-showcase-kretschmann.png rename to content/media/coffee-showcase-kretschmann.png diff --git a/_src/_media/coffee-showcase-lanham.png b/content/media/coffee-showcase-lanham.png similarity index 100% rename from _src/_media/coffee-showcase-lanham.png rename to content/media/coffee-showcase-lanham.png diff --git a/_src/_media/coffee-showcase-lopezruiz.png b/content/media/coffee-showcase-lopezruiz.png similarity index 100% rename from _src/_media/coffee-showcase-lopezruiz.png rename to content/media/coffee-showcase-lopezruiz.png diff --git a/_src/_media/coffee-showcase-lovecappu.png b/content/media/coffee-showcase-lovecappu.png similarity index 100% rename from _src/_media/coffee-showcase-lovecappu.png rename to content/media/coffee-showcase-lovecappu.png diff --git a/_src/_media/coffee-showcase-macrabbit.png b/content/media/coffee-showcase-macrabbit.png similarity index 100% rename from _src/_media/coffee-showcase-macrabbit.png rename to content/media/coffee-showcase-macrabbit.png diff --git a/_src/_media/coffee-showcase-matu.png b/content/media/coffee-showcase-matu.png similarity index 100% rename from _src/_media/coffee-showcase-matu.png rename to content/media/coffee-showcase-matu.png diff --git a/_src/_media/coffee-showcase-rask1.png b/content/media/coffee-showcase-rask1.png similarity index 100% rename from _src/_media/coffee-showcase-rask1.png rename to content/media/coffee-showcase-rask1.png diff --git a/_src/_media/coffee-showcase-rask2.png b/content/media/coffee-showcase-rask2.png similarity index 100% rename from _src/_media/coffee-showcase-rask2.png rename to content/media/coffee-showcase-rask2.png diff --git a/_src/_media/coffee-showcase-susumo.png b/content/media/coffee-showcase-susumo.png similarity index 100% rename from _src/_media/coffee-showcase-susumo.png rename to content/media/coffee-showcase-susumo.png diff --git a/_src/_media/coffee-showcase-times.png b/content/media/coffee-showcase-times.png similarity index 100% rename from _src/_media/coffee-showcase-times.png rename to content/media/coffee-showcase-times.png diff --git a/_src/_media/coffee-showcase-tut-abduzeedo.png b/content/media/coffee-showcase-tut-abduzeedo.png similarity index 100% rename from _src/_media/coffee-showcase-tut-abduzeedo.png rename to content/media/coffee-showcase-tut-abduzeedo.png diff --git a/_src/_media/coffee-showcase-tut-houle.png b/content/media/coffee-showcase-tut-houle.png similarity index 100% rename from _src/_media/coffee-showcase-tut-houle.png rename to content/media/coffee-showcase-tut-houle.png diff --git a/_src/_media/coffee-showcase-tut-psdtuts.png b/content/media/coffee-showcase-tut-psdtuts.png similarity index 100% rename from _src/_media/coffee-showcase-tut-psdtuts.png rename to content/media/coffee-showcase-tut-psdtuts.png diff --git a/_src/_media/coffee-showcase-tut-vectuts.png b/content/media/coffee-showcase-tut-vectuts.png similarity index 100% rename from _src/_media/coffee-showcase-tut-vectuts.png rename to content/media/coffee-showcase-tut-vectuts.png diff --git a/_src/_media/coffee-showcase-vegrafik.png b/content/media/coffee-showcase-vegrafik.png similarity index 100% rename from _src/_media/coffee-showcase-vegrafik.png rename to content/media/coffee-showcase-vegrafik.png diff --git a/_src/_media/coffee-showcase-visualpharm.png b/content/media/coffee-showcase-visualpharm.png similarity index 100% rename from _src/_media/coffee-showcase-visualpharm.png rename to content/media/coffee-showcase-visualpharm.png diff --git a/_src/_media/coffee_cup_by_kremalicious.zip b/content/media/coffee_cup_by_kremalicious.zip similarity index 100% rename from _src/_media/coffee_cup_by_kremalicious.zip rename to content/media/coffee_cup_by_kremalicious.zip diff --git a/_src/_media/coolhaven-rotterdam.jpg b/content/media/coolhaven-rotterdam.jpg similarity index 100% rename from _src/_media/coolhaven-rotterdam.jpg rename to content/media/coolhaven-rotterdam.jpg diff --git a/_src/_media/creaceed_hydra.png b/content/media/creaceed_hydra.png similarity index 100% rename from _src/_media/creaceed_hydra.png rename to content/media/creaceed_hydra.png diff --git a/_src/_media/css.png b/content/media/css.png similarity index 100% rename from _src/_media/css.png rename to content/media/css.png diff --git a/_src/_media/custom-gravatar.jpg b/content/media/custom-gravatar.jpg similarity index 100% rename from _src/_media/custom-gravatar.jpg rename to content/media/custom-gravatar.jpg diff --git a/_src/_media/de2ac24c7db911e1b9f1123138140926_7.jpg b/content/media/de2ac24c7db911e1b9f1123138140926_7.jpg similarity index 100% rename from _src/_media/de2ac24c7db911e1b9f1123138140926_7.jpg rename to content/media/de2ac24c7db911e1b9f1123138140926_7.jpg diff --git a/_src/_media/delibar-by-kremalicious.zip b/content/media/delibar-by-kremalicious.zip similarity index 100% rename from _src/_media/delibar-by-kremalicious.zip rename to content/media/delibar-by-kremalicious.zip diff --git a/_src/_media/delibar-website.png b/content/media/delibar-website.png similarity index 100% rename from _src/_media/delibar-website.png rename to content/media/delibar-website.png diff --git a/_src/_media/deliciouslinks.png b/content/media/deliciouslinks.png similarity index 100% rename from _src/_media/deliciouslinks.png rename to content/media/deliciouslinks.png diff --git a/_src/_media/dft-light_ui.jpg b/content/media/dft-light_ui.jpg similarity index 100% rename from _src/_media/dft-light_ui.jpg rename to content/media/dft-light_ui.jpg diff --git a/_src/_media/dft-ozone_ui.jpg b/content/media/dft-ozone_ui.jpg similarity index 100% rename from _src/_media/dft-ozone_ui.jpg rename to content/media/dft-ozone_ui.jpg diff --git a/_src/_media/dft-powerstroke_uis.jpg b/content/media/dft-powerstroke_uis.jpg similarity index 100% rename from _src/_media/dft-powerstroke_uis.jpg rename to content/media/dft-powerstroke_uis.jpg diff --git a/_src/_media/diskimage98.png b/content/media/diskimage98.png similarity index 100% rename from _src/_media/diskimage98.png rename to content/media/diskimage98.png diff --git a/_src/_media/dpmatte_index1.jpg b/content/media/dpmatte_index1.jpg similarity index 100% rename from _src/_media/dpmatte_index1.jpg rename to content/media/dpmatte_index1.jpg diff --git a/_src/_media/efs_18-200.png b/content/media/efs_18-200.png similarity index 100% rename from _src/_media/efs_18-200.png rename to content/media/efs_18-200.png diff --git a/_src/_media/efs_18-200_thumb.png b/content/media/efs_18-200_thumb.png similarity index 100% rename from _src/_media/efs_18-200_thumb.png rename to content/media/efs_18-200_thumb.png diff --git a/_src/_media/elegancesociale_smashingteaser.png b/content/media/elegancesociale_smashingteaser.png similarity index 100% rename from _src/_media/elegancesociale_smashingteaser.png rename to content/media/elegancesociale_smashingteaser.png diff --git a/_src/_media/encryption_certificate.png b/content/media/encryption_certificate.png similarity index 100% rename from _src/_media/encryption_certificate.png rename to content/media/encryption_certificate.png diff --git a/_src/_media/encryption_mail2.png b/content/media/encryption_mail2.png similarity index 100% rename from _src/_media/encryption_mail2.png rename to content/media/encryption_mail2.png diff --git a/_src/_media/eos_50D_back.png b/content/media/eos_50D_back.png similarity index 100% rename from _src/_media/eos_50D_back.png rename to content/media/eos_50D_back.png diff --git a/_src/_media/eos_50D_back_thumb.png b/content/media/eos_50D_back_thumb.png similarity index 100% rename from _src/_media/eos_50D_back_thumb.png rename to content/media/eos_50D_back_thumb.png diff --git a/_src/_media/eos_50D_front.png b/content/media/eos_50D_front.png similarity index 100% rename from _src/_media/eos_50D_front.png rename to content/media/eos_50D_front.png diff --git a/_src/_media/eos_50D_front_thumb.png b/content/media/eos_50D_front_thumb.png similarity index 100% rename from _src/_media/eos_50D_front_thumb.png rename to content/media/eos_50D_front_thumb.png diff --git a/_src/_media/filevault98.png b/content/media/filevault98.png similarity index 100% rename from _src/_media/filevault98.png rename to content/media/filevault98.png diff --git a/_src/_media/firefox-icon.png b/content/media/firefox-icon.png similarity index 100% rename from _src/_media/firefox-icon.png rename to content/media/firefox-icon.png diff --git a/_src/_media/firefox3promo.png b/content/media/firefox3promo.png similarity index 100% rename from _src/_media/firefox3promo.png rename to content/media/firefox3promo.png diff --git a/_src/_media/floating-sky-1.jpg b/content/media/floating-sky-1.jpg similarity index 100% rename from _src/_media/floating-sky-1.jpg rename to content/media/floating-sky-1.jpg diff --git a/_src/_media/free-pdf.png b/content/media/free-pdf.png similarity index 100% rename from _src/_media/free-pdf.png rename to content/media/free-pdf.png diff --git a/_src/_media/fry-2009-kremalicious.png b/content/media/fry-2009-kremalicious.png similarity index 100% rename from _src/_media/fry-2009-kremalicious.png rename to content/media/fry-2009-kremalicious.png diff --git a/_src/_media/futurama-mac-01.png b/content/media/futurama-mac-01.png similarity index 100% rename from _src/_media/futurama-mac-01.png rename to content/media/futurama-mac-01.png diff --git a/_src/_media/futurama-mac-02.png b/content/media/futurama-mac-02.png similarity index 100% rename from _src/_media/futurama-mac-02.png rename to content/media/futurama-mac-02.png diff --git a/_src/_media/futurama-mac-03.png b/content/media/futurama-mac-03.png similarity index 100% rename from _src/_media/futurama-mac-03.png rename to content/media/futurama-mac-03.png diff --git a/_src/_media/futurama-mac-04.png b/content/media/futurama-mac-04.png similarity index 100% rename from _src/_media/futurama-mac-04.png rename to content/media/futurama-mac-04.png diff --git a/_src/_media/futurama-mac-05.png b/content/media/futurama-mac-05.png similarity index 100% rename from _src/_media/futurama-mac-05.png rename to content/media/futurama-mac-05.png diff --git a/_src/_media/futurama-mac-06.png b/content/media/futurama-mac-06.png similarity index 100% rename from _src/_media/futurama-mac-06.png rename to content/media/futurama-mac-06.png diff --git a/_src/_media/futurama-mac-07.png b/content/media/futurama-mac-07.png similarity index 100% rename from _src/_media/futurama-mac-07.png rename to content/media/futurama-mac-07.png diff --git a/_src/_media/futurama-mac-08.png b/content/media/futurama-mac-08.png similarity index 100% rename from _src/_media/futurama-mac-08.png rename to content/media/futurama-mac-08.png diff --git a/_src/_media/futurama-mac-09.png b/content/media/futurama-mac-09.png similarity index 100% rename from _src/_media/futurama-mac-09.png rename to content/media/futurama-mac-09.png diff --git a/_src/_media/futurama-mac-10.png b/content/media/futurama-mac-10.png similarity index 100% rename from _src/_media/futurama-mac-10.png rename to content/media/futurama-mac-10.png diff --git a/_src/_media/futurama-mac-11.png b/content/media/futurama-mac-11.png similarity index 100% rename from _src/_media/futurama-mac-11.png rename to content/media/futurama-mac-11.png diff --git a/_src/_media/futurama-mac-12.png b/content/media/futurama-mac-12.png similarity index 100% rename from _src/_media/futurama-mac-12.png rename to content/media/futurama-mac-12.png diff --git a/_src/_media/futurama-mac-13.png b/content/media/futurama-mac-13.png similarity index 100% rename from _src/_media/futurama-mac-13.png rename to content/media/futurama-mac-13.png diff --git a/_src/_media/futurama-mac-14.png b/content/media/futurama-mac-14.png similarity index 100% rename from _src/_media/futurama-mac-14.png rename to content/media/futurama-mac-14.png diff --git a/_src/_media/futurama-mac-15.png b/content/media/futurama-mac-15.png similarity index 100% rename from _src/_media/futurama-mac-15.png rename to content/media/futurama-mac-15.png diff --git a/_src/_media/futurama-mac-16.png b/content/media/futurama-mac-16.png similarity index 100% rename from _src/_media/futurama-mac-16.png rename to content/media/futurama-mac-16.png diff --git a/_src/_media/futurama-mac-17.png b/content/media/futurama-mac-17.png similarity index 100% rename from _src/_media/futurama-mac-17.png rename to content/media/futurama-mac-17.png diff --git a/_src/_media/futurama-mac-18.png b/content/media/futurama-mac-18.png similarity index 100% rename from _src/_media/futurama-mac-18.png rename to content/media/futurama-mac-18.png diff --git a/_src/_media/futurama-mac-19.png b/content/media/futurama-mac-19.png similarity index 100% rename from _src/_media/futurama-mac-19.png rename to content/media/futurama-mac-19.png diff --git a/_src/_media/futurama-mac-20.png b/content/media/futurama-mac-20.png similarity index 100% rename from _src/_media/futurama-mac-20.png rename to content/media/futurama-mac-20.png diff --git a/_src/_media/futurama-mac-21.png b/content/media/futurama-mac-21.png similarity index 100% rename from _src/_media/futurama-mac-21.png rename to content/media/futurama-mac-21.png diff --git a/_src/_media/futurama-mac-teaser.png b/content/media/futurama-mac-teaser.png similarity index 100% rename from _src/_media/futurama-mac-teaser.png rename to content/media/futurama-mac-teaser.png diff --git a/_src/_media/futurama_gedeon.png b/content/media/futurama_gedeon.png similarity index 100% rename from _src/_media/futurama_gedeon.png rename to content/media/futurama_gedeon.png diff --git a/_src/_media/futurama_hawkins1.png b/content/media/futurama_hawkins1.png similarity index 100% rename from _src/_media/futurama_hawkins1.png rename to content/media/futurama_hawkins1.png diff --git a/_src/_media/futurama_hawkins2.png b/content/media/futurama_hawkins2.png similarity index 100% rename from _src/_media/futurama_hawkins2.png rename to content/media/futurama_hawkins2.png diff --git a/_src/_media/futurama_kremalicious.png b/content/media/futurama_kremalicious.png similarity index 100% rename from _src/_media/futurama_kremalicious.png rename to content/media/futurama_kremalicious.png diff --git a/_src/_media/futurama_rawpixels.png b/content/media/futurama_rawpixels.png similarity index 100% rename from _src/_media/futurama_rawpixels.png rename to content/media/futurama_rawpixels.png diff --git a/_src/_media/googlechrome.png b/content/media/googlechrome.png similarity index 100% rename from _src/_media/googlechrome.png rename to content/media/googlechrome.png diff --git a/_src/_media/hastuzeit-kremalicious2.jpg b/content/media/hastuzeit-kremalicious2.jpg similarity index 100% rename from _src/_media/hastuzeit-kremalicious2.jpg rename to content/media/hastuzeit-kremalicious2.jpg diff --git a/_src/_media/html-document-icon48.png b/content/media/html-document-icon48.png similarity index 100% rename from _src/_media/html-document-icon48.png rename to content/media/html-document-icon48.png diff --git a/_src/_media/iPhone-Coasters-1-Version-2.jpg b/content/media/iPhone-Coasters-1-Version-2.jpg similarity index 100% rename from _src/_media/iPhone-Coasters-1-Version-2.jpg rename to content/media/iPhone-Coasters-1-Version-2.jpg diff --git a/_src/_media/iPixelPad-Teaser-kremalicious2.jpg b/content/media/iPixelPad-Teaser-kremalicious2.jpg similarity index 100% rename from _src/_media/iPixelPad-Teaser-kremalicious2.jpg rename to content/media/iPixelPad-Teaser-kremalicious2.jpg diff --git a/_src/_media/iPixelPad-Teaser1.png b/content/media/iPixelPad-Teaser1.png similarity index 100% rename from _src/_media/iPixelPad-Teaser1.png rename to content/media/iPixelPad-Teaser1.png diff --git a/_src/_media/icon-Facebook.png b/content/media/icon-Facebook.png similarity index 100% rename from _src/_media/icon-Facebook.png rename to content/media/icon-Facebook.png diff --git a/_src/_media/icon-Twitter2.png b/content/media/icon-Twitter2.png similarity index 100% rename from _src/_media/icon-Twitter2.png rename to content/media/icon-Twitter2.png diff --git a/_src/_media/icon-deviantART.png b/content/media/icon-deviantART.png similarity index 100% rename from _src/_media/icon-deviantART.png rename to content/media/icon-deviantART.png diff --git a/_src/_media/icybox_by_kremalicious.zip b/content/media/icybox_by_kremalicious.zip similarity index 100% rename from _src/_media/icybox_by_kremalicious.zip rename to content/media/icybox_by_kremalicious.zip diff --git a/_src/_media/icybox_teaser1.png b/content/media/icybox_teaser1.png similarity index 100% rename from _src/_media/icybox_teaser1.png rename to content/media/icybox_teaser1.png diff --git a/_src/_media/icybox_teaser2.jpg b/content/media/icybox_teaser2.jpg similarity index 100% rename from _src/_media/icybox_teaser2.jpg rename to content/media/icybox_teaser2.jpg diff --git a/_src/_media/icybox_teaser2_small.png b/content/media/icybox_teaser2_small.png similarity index 100% rename from _src/_media/icybox_teaser2_small.png rename to content/media/icybox_teaser2_small.png diff --git a/_src/_media/imagestrends_shieoff.jpg b/content/media/imagestrends_shieoff.jpg similarity index 100% rename from _src/_media/imagestrends_shieoff.jpg rename to content/media/imagestrends_shieoff.jpg diff --git a/_src/_media/imagetrends_hemi_10.jpg b/content/media/imagetrends_hemi_10.jpg similarity index 100% rename from _src/_media/imagetrends_hemi_10.jpg rename to content/media/imagetrends_hemi_10.jpg diff --git a/_src/_media/imagetrends_pearlywhite.png b/content/media/imagetrends_pearlywhite.png similarity index 100% rename from _src/_media/imagetrends_pearlywhite.png rename to content/media/imagetrends_pearlywhite.png diff --git a/_src/_media/img_1820-Version-4.jpg b/content/media/img_1820-Version-4.jpg similarity index 100% rename from _src/_media/img_1820-Version-4.jpg rename to content/media/img_1820-Version-4.jpg diff --git a/_src/_media/indianajones_dock.png b/content/media/indianajones_dock.png similarity index 100% rename from _src/_media/indianajones_dock.png rename to content/media/indianajones_dock.png diff --git a/_src/_media/indianajones_first.png b/content/media/indianajones_first.png similarity index 100% rename from _src/_media/indianajones_first.png rename to content/media/indianajones_first.png diff --git a/_src/_media/ipixelpad-homescreen-zoom.png b/content/media/ipixelpad-homescreen-zoom.png similarity index 100% rename from _src/_media/ipixelpad-homescreen-zoom.png rename to content/media/ipixelpad-homescreen-zoom.png diff --git a/_src/_media/ipixelpad_by_kremalicious.zip b/content/media/ipixelpad_by_kremalicious.zip similarity index 100% rename from _src/_media/ipixelpad_by_kremalicious.zip rename to content/media/ipixelpad_by_kremalicious.zip diff --git a/_src/_media/jade_ui.png b/content/media/jade_ui.png similarity index 100% rename from _src/_media/jade_ui.png rename to content/media/jade_ui.png diff --git a/_src/_media/jade_ui_thumb.jpg b/content/media/jade_ui_thumb.jpg similarity index 100% rename from _src/_media/jade_ui_thumb.jpg rename to content/media/jade_ui_thumb.jpg diff --git a/_src/_media/jingjing_chacha_kremalicious.jpg b/content/media/jingjing_chacha_kremalicious.jpg similarity index 100% rename from _src/_media/jingjing_chacha_kremalicious.jpg rename to content/media/jingjing_chacha_kremalicious.jpg diff --git a/_src/_media/just-a-normal-sunday.jpg b/content/media/just-a-normal-sunday.jpg similarity index 100% rename from _src/_media/just-a-normal-sunday.jpg rename to content/media/just-a-normal-sunday.jpg diff --git a/_src/_media/keith-haring-vandalizing-a-wall.jpg b/content/media/keith-haring-vandalizing-a-wall.jpg similarity index 100% rename from _src/_media/keith-haring-vandalizing-a-wall.jpg rename to content/media/keith-haring-vandalizing-a-wall.jpg diff --git a/_src/_media/kremalicious-Teaser-Metro-Tile.jpg b/content/media/kremalicious-Teaser-Metro-Tile.jpg similarity index 100% rename from _src/_media/kremalicious-Teaser-Metro-Tile.jpg rename to content/media/kremalicious-Teaser-Metro-Tile.jpg diff --git a/_src/_media/kremalicious-Teaser-WP-Icon-Template.png b/content/media/kremalicious-Teaser-WP-Icon-Template.png similarity index 100% rename from _src/_media/kremalicious-Teaser-WP-Icon-Template.png rename to content/media/kremalicious-Teaser-WP-Icon-Template.png diff --git a/_src/_media/kremalicious-Teaser-ezeep.png b/content/media/kremalicious-Teaser-ezeep.png similarity index 100% rename from _src/_media/kremalicious-Teaser-ezeep.png rename to content/media/kremalicious-Teaser-ezeep.png diff --git a/_src/_media/kremalicious-iconiphone-80.png b/content/media/kremalicious-iconiphone-80.png similarity index 100% rename from _src/_media/kremalicious-iconiphone-80.png rename to content/media/kremalicious-iconiphone-80.png diff --git a/_src/_media/kremalicious-iconiphone.png b/content/media/kremalicious-iconiphone.png similarity index 100% rename from _src/_media/kremalicious-iconiphone.png rename to content/media/kremalicious-iconiphone.png diff --git a/_src/_media/kremalicious-kbdfun-teaser.png b/content/media/kremalicious-kbdfun-teaser.png similarity index 100% rename from _src/_media/kremalicious-kbdfun-teaser.png rename to content/media/kremalicious-kbdfun-teaser.png diff --git a/_src/_media/kremalicious2-photogrid.jpg b/content/media/kremalicious2-photogrid.jpg similarity index 100% rename from _src/_media/kremalicious2-photogrid.jpg rename to content/media/kremalicious2-photogrid.jpg diff --git a/_src/_media/kremalicious2-photoposts.jpg b/content/media/kremalicious2-photoposts.jpg similarity index 100% rename from _src/_media/kremalicious2-photoposts.jpg rename to content/media/kremalicious2-photoposts.jpg diff --git a/_src/_media/kremalicious2-teaser.jpg b/content/media/kremalicious2-teaser.jpg similarity index 100% rename from _src/_media/kremalicious2-teaser.jpg rename to content/media/kremalicious2-teaser.jpg diff --git a/_src/_media/kremalicious2-topicicons.jpg b/content/media/kremalicious2-topicicons.jpg similarity index 100% rename from _src/_media/kremalicious2-topicicons.jpg rename to content/media/kremalicious2-topicicons.jpg diff --git a/_src/_media/kremalicious2-typography.jpg b/content/media/kremalicious2-typography.jpg similarity index 100% rename from _src/_media/kremalicious2-typography.jpg rename to content/media/kremalicious2-typography.jpg diff --git a/_src/_media/kremalicious_nav.txt b/content/media/kremalicious_nav.txt similarity index 100% rename from _src/_media/kremalicious_nav.txt rename to content/media/kremalicious_nav.txt diff --git a/_src/_media/kremaliciouscom-iPad-3.jpg b/content/media/kremaliciouscom-iPad-3.jpg similarity index 100% rename from _src/_media/kremaliciouscom-iPad-3.jpg rename to content/media/kremaliciouscom-iPad-3.jpg diff --git a/_src/_media/kremaliciousiphone.png b/content/media/kremaliciousiphone.png similarity index 100% rename from _src/_media/kremaliciousiphone.png rename to content/media/kremaliciousiphone.png diff --git a/_src/_media/kremaliciousiphone_thumb.png b/content/media/kremaliciousiphone_thumb.png similarity index 100% rename from _src/_media/kremaliciousiphone_thumb.png rename to content/media/kremaliciousiphone_thumb.png diff --git a/_src/_media/lens.png b/content/media/lens.png similarity index 100% rename from _src/_media/lens.png rename to content/media/lens.png diff --git a/_src/_media/lensfix_ci.png b/content/media/lensfix_ci.png similarity index 100% rename from _src/_media/lensfix_ci.png rename to content/media/lensfix_ci.png diff --git a/_src/_media/londonpolice.jpg b/content/media/londonpolice.jpg similarity index 100% rename from _src/_media/londonpolice.jpg rename to content/media/londonpolice.jpg diff --git a/_src/_media/magnifique-ui.png b/content/media/magnifique-ui.png similarity index 100% rename from _src/_media/magnifique-ui.png rename to content/media/magnifique-ui.png diff --git a/_src/_media/mars-u-teaser.png b/content/media/mars-u-teaser.png similarity index 100% rename from _src/_media/mars-u-teaser.png rename to content/media/mars-u-teaser.png diff --git a/_src/_media/mars-u-wall-by-kremalicious.zip b/content/media/mars-u-wall-by-kremalicious.zip similarity index 100% rename from _src/_media/mars-u-wall-by-kremalicious.zip rename to content/media/mars-u-wall-by-kremalicious.zip diff --git a/_src/_media/marsedit_kremalicious.png b/content/media/marsedit_kremalicious.png similarity index 100% rename from _src/_media/marsedit_kremalicious.png rename to content/media/marsedit_kremalicious.png diff --git a/_src/_media/marsedit_kremalicious.txt b/content/media/marsedit_kremalicious.txt similarity index 100% rename from _src/_media/marsedit_kremalicious.txt rename to content/media/marsedit_kremalicious.txt diff --git a/_src/_media/marsedit_kremalicious_big.png b/content/media/marsedit_kremalicious_big.png similarity index 100% rename from _src/_media/marsedit_kremalicious_big.png rename to content/media/marsedit_kremalicious_big.png diff --git a/_src/_media/mediaMomCorpTeaser.png b/content/media/mediaMomCorpTeaser.png similarity index 100% rename from _src/_media/mediaMomCorpTeaser.png rename to content/media/mediaMomCorpTeaser.png diff --git a/_src/_media/mkv2-android-chrome.png b/content/media/mkv2-android-chrome.png similarity index 100% rename from _src/_media/mkv2-android-chrome.png rename to content/media/mkv2-android-chrome.png diff --git a/_src/_media/mkv2-android-firefox.png b/content/media/mkv2-android-firefox.png similarity index 100% rename from _src/_media/mkv2-android-firefox.png rename to content/media/mkv2-android-firefox.png diff --git a/_src/_media/mkv2-android.png b/content/media/mkv2-android.png similarity index 100% rename from _src/_media/mkv2-android.png rename to content/media/mkv2-android.png diff --git a/_src/_media/mkv2-balls.jpg b/content/media/mkv2-balls.jpg similarity index 100% rename from _src/_media/mkv2-balls.jpg rename to content/media/mkv2-balls.jpg diff --git a/_src/_media/mkv2-detail.png b/content/media/mkv2-detail.png similarity index 100% rename from _src/_media/mkv2-detail.png rename to content/media/mkv2-detail.png diff --git a/_src/_media/mkv2-ipad-touchindicator.jpg b/content/media/mkv2-ipad-touchindicator.jpg similarity index 100% rename from _src/_media/mkv2-ipad-touchindicator.jpg rename to content/media/mkv2-ipad-touchindicator.jpg diff --git a/_src/_media/mkv2-ipad.png b/content/media/mkv2-ipad.png similarity index 100% rename from _src/_media/mkv2-ipad.png rename to content/media/mkv2-ipad.png diff --git a/_src/_media/mkv2-iphone.png b/content/media/mkv2-iphone.png similarity index 100% rename from _src/_media/mkv2-iphone.png rename to content/media/mkv2-iphone.png diff --git a/_src/_media/mkv2-portfolio-overlay.jpg b/content/media/mkv2-portfolio-overlay.jpg similarity index 100% rename from _src/_media/mkv2-portfolio-overlay.jpg rename to content/media/mkv2-portfolio-overlay.jpg diff --git a/_src/_media/mkv2-responsivelayouts.jpg b/content/media/mkv2-responsivelayouts.jpg similarity index 100% rename from _src/_media/mkv2-responsivelayouts.jpg rename to content/media/mkv2-responsivelayouts.jpg diff --git a/_src/_media/mkv2-teaser-450x250.jpg b/content/media/mkv2-teaser-450x250.jpg similarity index 100% rename from _src/_media/mkv2-teaser-450x250.jpg rename to content/media/mkv2-teaser-450x250.jpg diff --git a/_src/_media/mkv2-teaser-500x277.jpg b/content/media/mkv2-teaser-500x277.jpg similarity index 100% rename from _src/_media/mkv2-teaser-500x277.jpg rename to content/media/mkv2-teaser-500x277.jpg diff --git a/_src/_media/mkv2-teaser-540x288.jpg b/content/media/mkv2-teaser-540x288.jpg similarity index 100% rename from _src/_media/mkv2-teaser-540x288.jpg rename to content/media/mkv2-teaser-540x288.jpg diff --git a/_src/_media/mkv2.jpg b/content/media/mkv2.jpg similarity index 100% rename from _src/_media/mkv2.jpg rename to content/media/mkv2.jpg diff --git a/_src/_media/momcorp_wall_by_kremalicious.zip b/content/media/momcorp_wall_by_kremalicious.zip similarity index 100% rename from _src/_media/momcorp_wall_by_kremalicious.zip rename to content/media/momcorp_wall_by_kremalicious.zip diff --git a/_src/_media/most-surprising-dog-i-know.jpg b/content/media/most-surprising-dog-i-know.jpg similarity index 100% rename from _src/_media/most-surprising-dog-i-know.jpg rename to content/media/most-surprising-dog-i-know.jpg diff --git a/_src/_media/muehle_suhlendorf_HDR_Tonemapped_16bit.jpg b/content/media/muehle_suhlendorf_HDR_Tonemapped_16bit.jpg similarity index 100% rename from _src/_media/muehle_suhlendorf_HDR_Tonemapped_16bit.jpg rename to content/media/muehle_suhlendorf_HDR_Tonemapped_16bit.jpg diff --git a/_src/_media/navbar-kremalicious.png b/content/media/navbar-kremalicious.png similarity index 100% rename from _src/_media/navbar-kremalicious.png rename to content/media/navbar-kremalicious.png diff --git a/_src/_media/netatalk.png b/content/media/netatalk.png similarity index 100% rename from _src/_media/netatalk.png rename to content/media/netatalk.png diff --git a/_src/_media/new-passion-facade.jpg b/content/media/new-passion-facade.jpg similarity index 100% rename from _src/_media/new-passion-facade.jpg rename to content/media/new-passion-facade.jpg diff --git a/_src/_media/nicephore-niepce.jpg b/content/media/nicephore-niepce.jpg similarity index 100% rename from _src/_media/nicephore-niepce.jpg rename to content/media/nicephore-niepce.jpg diff --git a/_src/_media/niepce_portrait.png b/content/media/niepce_portrait.png similarity index 100% rename from _src/_media/niepce_portrait.png rename to content/media/niepce_portrait.png diff --git a/_src/_media/niepces_aperture_vault256.png b/content/media/niepces_aperture_vault256.png similarity index 100% rename from _src/_media/niepces_aperture_vault256.png rename to content/media/niepces_aperture_vault256.png diff --git a/_src/_media/niepces_camera_obscura_by_kremalicious.zip b/content/media/niepces_camera_obscura_by_kremalicious.zip similarity index 100% rename from _src/_media/niepces_camera_obscura_by_kremalicious.zip rename to content/media/niepces_camera_obscura_by_kremalicious.zip diff --git a/_src/_media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip b/content/media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip similarity index 100% rename from _src/_media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip rename to content/media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip diff --git a/_src/_media/nik_silverefex.png b/content/media/nik_silverefex.png similarity index 100% rename from _src/_media/nik_silverefex.png rename to content/media/nik_silverefex.png diff --git a/_src/_media/nik_silverefex_thumb.png b/content/media/nik_silverefex_thumb.png similarity index 100% rename from _src/_media/nik_silverefex_thumb.png rename to content/media/nik_silverefex_thumb.png diff --git a/_src/_media/noiseninja.png b/content/media/noiseninja.png similarity index 100% rename from _src/_media/noiseninja.png rename to content/media/noiseninja.png diff --git a/_src/_media/obligatory-it-s-summer-in-berlin-photo.jpg b/content/media/obligatory-it-s-summer-in-berlin-photo.jpg similarity index 100% rename from _src/_media/obligatory-it-s-summer-in-berlin-photo.jpg rename to content/media/obligatory-it-s-summer-in-berlin-photo.jpg diff --git a/_src/_media/openwithpreview.png b/content/media/openwithpreview.png similarity index 100% rename from _src/_media/openwithpreview.png rename to content/media/openwithpreview.png diff --git a/_src/_media/opera-icon.png b/content/media/opera-icon.png similarity index 100% rename from _src/_media/opera-icon.png rename to content/media/opera-icon.png diff --git a/_src/_media/out-of-whale-oil-overview.png b/content/media/out-of-whale-oil-overview.png similarity index 100% rename from _src/_media/out-of-whale-oil-overview.png rename to content/media/out-of-whale-oil-overview.png diff --git a/_src/_media/out-of-whale-oil-wall-by-kremalicious.zip b/content/media/out-of-whale-oil-wall-by-kremalicious.zip similarity index 100% rename from _src/_media/out-of-whale-oil-wall-by-kremalicious.zip rename to content/media/out-of-whale-oil-wall-by-kremalicious.zip diff --git a/_src/_media/out_of_whale_oil_detail.png b/content/media/out_of_whale_oil_detail.png similarity index 100% rename from _src/_media/out_of_whale_oil_detail.png rename to content/media/out_of_whale_oil_detail.png diff --git a/_src/_media/parallax-visualization.png b/content/media/parallax-visualization.png similarity index 100% rename from _src/_media/parallax-visualization.png rename to content/media/parallax-visualization.png diff --git a/_src/_media/parallax-visualization_big.png b/content/media/parallax-visualization_big.png similarity index 100% rename from _src/_media/parallax-visualization_big.png rename to content/media/parallax-visualization_big.png diff --git a/_src/_media/parallax.png b/content/media/parallax.png similarity index 100% rename from _src/_media/parallax.png rename to content/media/parallax.png diff --git a/_src/_media/parallax_001.jpg b/content/media/parallax_001.jpg similarity index 100% rename from _src/_media/parallax_001.jpg rename to content/media/parallax_001.jpg diff --git a/_src/_media/parallax_002.jpg b/content/media/parallax_002.jpg similarity index 100% rename from _src/_media/parallax_002.jpg rename to content/media/parallax_002.jpg diff --git a/_src/_media/parallax_003.jpg b/content/media/parallax_003.jpg similarity index 100% rename from _src/_media/parallax_003.jpg rename to content/media/parallax_003.jpg diff --git a/_src/_media/parallax_004.jpg b/content/media/parallax_004.jpg similarity index 100% rename from _src/_media/parallax_004.jpg rename to content/media/parallax_004.jpg diff --git a/_src/_media/parallax_005.jpg b/content/media/parallax_005.jpg similarity index 100% rename from _src/_media/parallax_005.jpg rename to content/media/parallax_005.jpg diff --git a/_src/_media/parallax_006.jpg b/content/media/parallax_006.jpg similarity index 100% rename from _src/_media/parallax_006.jpg rename to content/media/parallax_006.jpg diff --git a/_src/_media/parallax_007.jpg b/content/media/parallax_007.jpg similarity index 100% rename from _src/_media/parallax_007.jpg rename to content/media/parallax_007.jpg diff --git a/_src/_media/parallax_008.jpg b/content/media/parallax_008.jpg similarity index 100% rename from _src/_media/parallax_008.jpg rename to content/media/parallax_008.jpg diff --git a/_src/_media/parallax_009.jpg b/content/media/parallax_009.jpg similarity index 100% rename from _src/_media/parallax_009.jpg rename to content/media/parallax_009.jpg diff --git a/_src/_media/parallax_010.jpg b/content/media/parallax_010.jpg similarity index 100% rename from _src/_media/parallax_010.jpg rename to content/media/parallax_010.jpg diff --git a/_src/_media/parallax_011.jpg b/content/media/parallax_011.jpg similarity index 100% rename from _src/_media/parallax_011.jpg rename to content/media/parallax_011.jpg diff --git a/_src/_media/parallax_012.jpg b/content/media/parallax_012.jpg similarity index 100% rename from _src/_media/parallax_012.jpg rename to content/media/parallax_012.jpg diff --git a/_src/_media/parallax_013.jpg b/content/media/parallax_013.jpg similarity index 100% rename from _src/_media/parallax_013.jpg rename to content/media/parallax_013.jpg diff --git a/_src/_media/parallax_014.png b/content/media/parallax_014.png similarity index 100% rename from _src/_media/parallax_014.png rename to content/media/parallax_014.png diff --git a/_src/_media/parallax_015.png b/content/media/parallax_015.png similarity index 100% rename from _src/_media/parallax_015.png rename to content/media/parallax_015.png diff --git a/_src/_media/parallax_016.jpg b/content/media/parallax_016.jpg similarity index 100% rename from _src/_media/parallax_016.jpg rename to content/media/parallax_016.jpg diff --git a/_src/_media/parallax_017.jpg b/content/media/parallax_017.jpg similarity index 100% rename from _src/_media/parallax_017.jpg rename to content/media/parallax_017.jpg diff --git a/_src/_media/parallax_illusion_css.png b/content/media/parallax_illusion_css.png similarity index 100% rename from _src/_media/parallax_illusion_css.png rename to content/media/parallax_illusion_css.png diff --git a/_src/_media/pathphotoshop.png b/content/media/pathphotoshop.png similarity index 100% rename from _src/_media/pathphotoshop.png rename to content/media/pathphotoshop.png diff --git a/_src/_media/pathpreview.png b/content/media/pathpreview.png similarity index 100% rename from _src/_media/pathpreview.png rename to content/media/pathpreview.png diff --git a/_src/_media/paypal-logo.jpg b/content/media/paypal-logo.jpg similarity index 100% rename from _src/_media/paypal-logo.jpg rename to content/media/paypal-logo.jpg diff --git a/_src/_media/post-time.png b/content/media/post-time.png similarity index 100% rename from _src/_media/post-time.png rename to content/media/post-time.png diff --git a/_src/_media/potsdam.jpg b/content/media/potsdam.jpg similarity index 100% rename from _src/_media/potsdam.jpg rename to content/media/potsdam.jpg diff --git a/_src/_media/project-purple-ipad-kremalicious.png b/content/media/project-purple-ipad-kremalicious.png similarity index 100% rename from _src/_media/project-purple-ipad-kremalicious.png rename to content/media/project-purple-ipad-kremalicious.png diff --git a/_src/_media/project-purple-iphone4-kremalicious.png b/content/media/project-purple-iphone4-kremalicious.png similarity index 100% rename from _src/_media/project-purple-iphone4-kremalicious.png rename to content/media/project-purple-iphone4-kremalicious.png diff --git a/_src/_media/project-purple-kremalicious.png b/content/media/project-purple-kremalicious.png similarity index 100% rename from _src/_media/project-purple-kremalicious.png rename to content/media/project-purple-kremalicious.png diff --git a/_src/_media/project-purple-kremalicious.zip b/content/media/project-purple-kremalicious.zip similarity index 100% rename from _src/_media/project-purple-kremalicious.zip rename to content/media/project-purple-kremalicious.zip diff --git a/_src/_media/project-purple-nexus-kremalicious.png b/content/media/project-purple-nexus-kremalicious.png similarity index 100% rename from _src/_media/project-purple-nexus-kremalicious.png rename to content/media/project-purple-nexus-kremalicious.png diff --git a/_src/_media/ptlens_ui.png b/content/media/ptlens_ui.png similarity index 100% rename from _src/_media/ptlens_ui.png rename to content/media/ptlens_ui.png diff --git a/_src/_media/ptlens_ui_thumb.jpg b/content/media/ptlens_ui_thumb.jpg similarity index 100% rename from _src/_media/ptlens_ui_thumb.jpg rename to content/media/ptlens_ui_thumb.jpg diff --git a/_src/_media/pulitzer.png b/content/media/pulitzer.png similarity index 100% rename from _src/_media/pulitzer.png rename to content/media/pulitzer.png diff --git a/_src/_media/raw.png b/content/media/raw.png similarity index 100% rename from _src/_media/raw.png rename to content/media/raw.png diff --git a/_src/_media/raw20.png b/content/media/raw20.png similarity index 100% rename from _src/_media/raw20.png rename to content/media/raw20.png diff --git a/_src/_media/republica-banner-125x160_black.png b/content/media/republica-banner-125x160_black.png similarity index 100% rename from _src/_media/republica-banner-125x160_black.png rename to content/media/republica-banner-125x160_black.png diff --git a/_src/_media/republica10_kremaliciousbanner.png b/content/media/republica10_kremaliciousbanner.png similarity index 100% rename from _src/_media/republica10_kremaliciousbanner.png rename to content/media/republica10_kremaliciousbanner.png diff --git a/_src/_media/safari-logo.png b/content/media/safari-logo.png similarity index 100% rename from _src/_media/safari-logo.png rename to content/media/safari-logo.png diff --git a/_src/_media/safari4_zoom.png b/content/media/safari4_zoom.png similarity index 100% rename from _src/_media/safari4_zoom.png rename to content/media/safari4_zoom.png diff --git a/_src/_media/safari4_zoom_thumb.png b/content/media/safari4_zoom_thumb.png similarity index 100% rename from _src/_media/safari4_zoom_thumb.png rename to content/media/safari4_zoom_thumb.png diff --git a/_src/_media/safari_4_tabs.png b/content/media/safari_4_tabs.png similarity index 100% rename from _src/_media/safari_4_tabs.png rename to content/media/safari_4_tabs.png diff --git a/_src/_media/sagrada-familia-ceiling.jpg b/content/media/sagrada-familia-ceiling.jpg similarity index 100% rename from _src/_media/sagrada-familia-ceiling.jpg rename to content/media/sagrada-familia-ceiling.jpg diff --git a/_src/_media/scangear16bit.png b/content/media/scangear16bit.png similarity index 100% rename from _src/_media/scangear16bit.png rename to content/media/scangear16bit.png diff --git a/_src/_media/scangear48bit.png b/content/media/scangear48bit.png similarity index 100% rename from _src/_media/scangear48bit.png rename to content/media/scangear48bit.png diff --git a/_src/_media/scangear_color.png b/content/media/scangear_color.png similarity index 100% rename from _src/_media/scangear_color.png rename to content/media/scangear_color.png diff --git a/_src/_media/scangearwindow.png b/content/media/scangearwindow.png similarity index 100% rename from _src/_media/scangearwindow.png rename to content/media/scangearwindow.png diff --git a/_src/_media/scanwindow_preview.png b/content/media/scanwindow_preview.png similarity index 100% rename from _src/_media/scanwindow_preview.png rename to content/media/scanwindow_preview.png diff --git a/_src/_media/schnecke_blatt.jpg b/content/media/schnecke_blatt.jpg similarity index 100% rename from _src/_media/schnecke_blatt.jpg rename to content/media/schnecke_blatt.jpg diff --git a/_src/_media/securevault1.png b/content/media/securevault1.png similarity index 100% rename from _src/_media/securevault1.png rename to content/media/securevault1.png diff --git a/_src/_media/securevault2.png b/content/media/securevault2.png similarity index 100% rename from _src/_media/securevault2.png rename to content/media/securevault2.png diff --git a/_src/_media/securevault3.png b/content/media/securevault3.png similarity index 100% rename from _src/_media/securevault3.png rename to content/media/securevault3.png diff --git a/_src/_media/securevault4.png b/content/media/securevault4.png similarity index 100% rename from _src/_media/securevault4.png rename to content/media/securevault4.png diff --git a/_src/_media/securevault5.png b/content/media/securevault5.png similarity index 100% rename from _src/_media/securevault5.png rename to content/media/securevault5.png diff --git a/_src/_media/server_displays_by_kremalicious.zip b/content/media/server_displays_by_kremalicious.zip similarity index 100% rename from _src/_media/server_displays_by_kremalicious.zip rename to content/media/server_displays_by_kremalicious.zip diff --git a/_src/_media/serverdisplays.jpg b/content/media/serverdisplays.jpg similarity index 100% rename from _src/_media/serverdisplays.jpg rename to content/media/serverdisplays.jpg diff --git a/_src/_media/share-link-bonanza-coda-clips.zip b/content/media/share-link-bonanza-coda-clips.zip similarity index 100% rename from _src/_media/share-link-bonanza-coda-clips.zip rename to content/media/share-link-bonanza-coda-clips.zip diff --git a/_src/_media/share-link-bonanza-html.zip b/content/media/share-link-bonanza-html.zip similarity index 100% rename from _src/_media/share-link-bonanza-html.zip rename to content/media/share-link-bonanza-html.zip diff --git a/_src/_media/snippet.png b/content/media/snippet.png similarity index 100% rename from _src/_media/snippet.png rename to content/media/snippet.png diff --git a/_src/_media/softwareupdate.png b/content/media/softwareupdate.png similarity index 100% rename from _src/_media/softwareupdate.png rename to content/media/softwareupdate.png diff --git a/_src/_media/softwareupdate_photo200.png b/content/media/softwareupdate_photo200.png similarity index 100% rename from _src/_media/softwareupdate_photo200.png rename to content/media/softwareupdate_photo200.png diff --git a/_src/_media/speedlite430exii.jpg b/content/media/speedlite430exii.jpg similarity index 100% rename from _src/_media/speedlite430exii.jpg rename to content/media/speedlite430exii.jpg diff --git a/_src/_media/stonehead.jpg b/content/media/stonehead.jpg similarity index 100% rename from _src/_media/stonehead.jpg rename to content/media/stonehead.jpg diff --git a/_src/_media/streets-of-el-born.jpg b/content/media/streets-of-el-born.jpg similarity index 100% rename from _src/_media/streets-of-el-born.jpg rename to content/media/streets-of-el-born.jpg diff --git a/_src/_media/streets-of-el-raval.jpg b/content/media/streets-of-el-raval.jpg similarity index 100% rename from _src/_media/streets-of-el-raval.jpg rename to content/media/streets-of-el-raval.jpg diff --git a/_src/_media/tabs_overview.png b/content/media/tabs_overview.png similarity index 100% rename from _src/_media/tabs_overview.png rename to content/media/tabs_overview.png diff --git a/_src/_media/teaser-appstorebadges.png b/content/media/teaser-appstorebadges.png similarity index 100% rename from _src/_media/teaser-appstorebadges.png rename to content/media/teaser-appstorebadges.png diff --git a/_src/_media/teaser-out-of-whale-oil.png b/content/media/teaser-out-of-whale-oil.png similarity index 100% rename from _src/_media/teaser-out-of-whale-oil.png rename to content/media/teaser-out-of-whale-oil.png diff --git a/_src/_media/teaser-tor.png b/content/media/teaser-tor.png similarity index 100% rename from _src/_media/teaser-tor.png rename to content/media/teaser-tor.png diff --git a/_src/_media/teaser_elegance-sociale.png b/content/media/teaser_elegance-sociale.png similarity index 100% rename from _src/_media/teaser_elegance-sociale.png rename to content/media/teaser_elegance-sociale.png diff --git a/_src/_media/text-shadow-1.png b/content/media/text-shadow-1.png similarity index 100% rename from _src/_media/text-shadow-1.png rename to content/media/text-shadow-1.png diff --git a/_src/_media/text-shadow-10.png b/content/media/text-shadow-10.png similarity index 100% rename from _src/_media/text-shadow-10.png rename to content/media/text-shadow-10.png diff --git a/_src/_media/text-shadow-11.png b/content/media/text-shadow-11.png similarity index 100% rename from _src/_media/text-shadow-11.png rename to content/media/text-shadow-11.png diff --git a/_src/_media/text-shadow-12.png b/content/media/text-shadow-12.png similarity index 100% rename from _src/_media/text-shadow-12.png rename to content/media/text-shadow-12.png diff --git a/_src/_media/text-shadow-13.png b/content/media/text-shadow-13.png similarity index 100% rename from _src/_media/text-shadow-13.png rename to content/media/text-shadow-13.png diff --git a/_src/_media/text-shadow-14.png b/content/media/text-shadow-14.png similarity index 100% rename from _src/_media/text-shadow-14.png rename to content/media/text-shadow-14.png diff --git a/_src/_media/text-shadow-15.png b/content/media/text-shadow-15.png similarity index 100% rename from _src/_media/text-shadow-15.png rename to content/media/text-shadow-15.png diff --git a/_src/_media/text-shadow-2.png b/content/media/text-shadow-2.png similarity index 100% rename from _src/_media/text-shadow-2.png rename to content/media/text-shadow-2.png diff --git a/_src/_media/text-shadow-3.png b/content/media/text-shadow-3.png similarity index 100% rename from _src/_media/text-shadow-3.png rename to content/media/text-shadow-3.png diff --git a/_src/_media/text-shadow-4.png b/content/media/text-shadow-4.png similarity index 100% rename from _src/_media/text-shadow-4.png rename to content/media/text-shadow-4.png diff --git a/_src/_media/text-shadow-5.png b/content/media/text-shadow-5.png similarity index 100% rename from _src/_media/text-shadow-5.png rename to content/media/text-shadow-5.png diff --git a/_src/_media/text-shadow-6.png b/content/media/text-shadow-6.png similarity index 100% rename from _src/_media/text-shadow-6.png rename to content/media/text-shadow-6.png diff --git a/_src/_media/text-shadow-7.png b/content/media/text-shadow-7.png similarity index 100% rename from _src/_media/text-shadow-7.png rename to content/media/text-shadow-7.png diff --git a/_src/_media/text-shadow-8.png b/content/media/text-shadow-8.png similarity index 100% rename from _src/_media/text-shadow-8.png rename to content/media/text-shadow-8.png diff --git a/_src/_media/text-shadow-9.png b/content/media/text-shadow-9.png similarity index 100% rename from _src/_media/text-shadow-9.png rename to content/media/text-shadow-9.png diff --git a/_src/_media/text-shadow-hack.png b/content/media/text-shadow-hack.png similarity index 100% rename from _src/_media/text-shadow-hack.png rename to content/media/text-shadow-hack.png diff --git a/_src/_media/textshadow-apple.png b/content/media/textshadow-apple.png similarity index 100% rename from _src/_media/textshadow-apple.png rename to content/media/textshadow-apple.png diff --git a/_src/_media/tiffen_aperture.jpg b/content/media/tiffen_aperture.jpg similarity index 100% rename from _src/_media/tiffen_aperture.jpg rename to content/media/tiffen_aperture.jpg diff --git a/_src/_media/timemachine97.png b/content/media/timemachine97.png similarity index 100% rename from _src/_media/timemachine97.png rename to content/media/timemachine97.png diff --git a/_src/_media/timemachinedisk97.png b/content/media/timemachinedisk97.png similarity index 100% rename from _src/_media/timemachinedisk97.png rename to content/media/timemachinedisk97.png diff --git a/_src/_media/tiny_tiny_demons.jpg b/content/media/tiny_tiny_demons.jpg similarity index 100% rename from _src/_media/tiny_tiny_demons.jpg rename to content/media/tiny_tiny_demons.jpg diff --git a/_src/_media/tm-sparsebundle.png b/content/media/tm-sparsebundle.png similarity index 100% rename from _src/_media/tm-sparsebundle.png rename to content/media/tm-sparsebundle.png diff --git a/_src/_media/tor-browser.png b/content/media/tor-browser.png similarity index 100% rename from _src/_media/tor-browser.png rename to content/media/tor-browser.png diff --git a/_src/_media/tor-osx-proxy.png b/content/media/tor-osx-proxy.png similarity index 100% rename from _src/_media/tor-osx-proxy.png rename to content/media/tor-osx-proxy.png diff --git a/_src/_media/tor-osx-terminal.png b/content/media/tor-osx-terminal.png similarity index 100% rename from _src/_media/tor-osx-terminal.png rename to content/media/tor-osx-terminal.png diff --git a/_src/_media/tutorial-icon.png b/content/media/tutorial-icon.png similarity index 100% rename from _src/_media/tutorial-icon.png rename to content/media/tutorial-icon.png diff --git a/_src/_media/tweetie_select_bubbles.zip b/content/media/tweetie_select_bubbles.zip similarity index 100% rename from _src/_media/tweetie_select_bubbles.zip rename to content/media/tweetie_select_bubbles.zip diff --git a/_src/_media/twitter-bird-kremalicious.png b/content/media/twitter-bird-kremalicious.png similarity index 100% rename from _src/_media/twitter-bird-kremalicious.png rename to content/media/twitter-bird-kremalicious.png diff --git a/_src/_media/twitter-crisp-by-kremalicious.zip b/content/media/twitter-crisp-by-kremalicious.zip similarity index 100% rename from _src/_media/twitter-crisp-by-kremalicious.zip rename to content/media/twitter-crisp-by-kremalicious.zip diff --git a/_src/_media/twitter-crisp-teaser.jpg b/content/media/twitter-crisp-teaser.jpg similarity index 100% rename from _src/_media/twitter-crisp-teaser.jpg rename to content/media/twitter-crisp-teaser.jpg diff --git a/_src/_media/twitter-crisp-teaser2.png b/content/media/twitter-crisp-teaser2.png similarity index 100% rename from _src/_media/twitter-crisp-teaser2.png rename to content/media/twitter-crisp-teaser2.png diff --git a/_src/_media/twitter.png b/content/media/twitter.png similarity index 100% rename from _src/_media/twitter.png rename to content/media/twitter.png diff --git a/_src/_media/typographic-diamond.jpg b/content/media/typographic-diamond.jpg similarity index 100% rename from _src/_media/typographic-diamond.jpg rename to content/media/typographic-diamond.jpg diff --git a/_src/_media/ubuntu_mac_feature.jpg b/content/media/ubuntu_mac_feature.jpg similarity index 100% rename from _src/_media/ubuntu_mac_feature.jpg rename to content/media/ubuntu_mac_feature.jpg diff --git a/_src/_media/ubuntuserver1.png b/content/media/ubuntuserver1.png similarity index 100% rename from _src/_media/ubuntuserver1.png rename to content/media/ubuntuserver1.png diff --git a/_src/_media/ubuntuserver2.png b/content/media/ubuntuserver2.png similarity index 100% rename from _src/_media/ubuntuserver2.png rename to content/media/ubuntuserver2.png diff --git a/_src/_media/ubuntuserver3.png b/content/media/ubuntuserver3.png similarity index 100% rename from _src/_media/ubuntuserver3.png rename to content/media/ubuntuserver3.png diff --git a/_src/_media/ubuntuserver4.png b/content/media/ubuntuserver4.png similarity index 100% rename from _src/_media/ubuntuserver4.png rename to content/media/ubuntuserver4.png diff --git a/_src/_media/ubuntuserver4a.png b/content/media/ubuntuserver4a.png similarity index 100% rename from _src/_media/ubuntuserver4a.png rename to content/media/ubuntuserver4a.png diff --git a/_src/_media/ubuntuserver5.png b/content/media/ubuntuserver5.png similarity index 100% rename from _src/_media/ubuntuserver5.png rename to content/media/ubuntuserver5.png diff --git a/_src/_media/ubuntuserver97.png b/content/media/ubuntuserver97.png similarity index 100% rename from _src/_media/ubuntuserver97.png rename to content/media/ubuntuserver97.png diff --git a/_src/_media/vcardsite-arefjdey.png b/content/media/vcardsite-arefjdey.png similarity index 100% rename from _src/_media/vcardsite-arefjdey.png rename to content/media/vcardsite-arefjdey.png diff --git a/_src/_media/vcardsite-laurent.png b/content/media/vcardsite-laurent.png similarity index 100% rename from _src/_media/vcardsite-laurent.png rename to content/media/vcardsite-laurent.png diff --git a/_src/_media/vcardsite-maximilian.png b/content/media/vcardsite-maximilian.png similarity index 100% rename from _src/_media/vcardsite-maximilian.png rename to content/media/vcardsite-maximilian.png diff --git a/_src/_media/vcardsite-mk.png b/content/media/vcardsite-mk.png similarity index 100% rename from _src/_media/vcardsite-mk.png rename to content/media/vcardsite-mk.png diff --git a/_src/_media/vcardsite-rogie.png b/content/media/vcardsite-rogie.png similarity index 100% rename from _src/_media/vcardsite-rogie.png rename to content/media/vcardsite-rogie.png diff --git a/_src/_media/vcardsite-tim.png b/content/media/vcardsite-tim.png similarity index 100% rename from _src/_media/vcardsite-tim.png rename to content/media/vcardsite-tim.png diff --git a/_src/_media/view_from_the_window_at_le_gras_nicephore_niepce.jpg b/content/media/view_from_the_window_at_le_gras_nicephore_niepce.jpg similarity index 100% rename from _src/_media/view_from_the_window_at_le_gras_nicephore_niepce.jpg rename to content/media/view_from_the_window_at_le_gras_nicephore_niepce.jpg diff --git a/_src/_media/viveza.png b/content/media/viveza.png similarity index 100% rename from _src/_media/viveza.png rename to content/media/viveza.png diff --git a/_src/_media/viveza_aperture_ui.jpg b/content/media/viveza_aperture_ui.jpg similarity index 100% rename from _src/_media/viveza_aperture_ui.jpg rename to content/media/viveza_aperture_ui.jpg diff --git a/_src/_media/watermark_1.png b/content/media/watermark_1.png similarity index 100% rename from _src/_media/watermark_1.png rename to content/media/watermark_1.png diff --git a/_src/_media/watermark_2.png b/content/media/watermark_2.png similarity index 100% rename from _src/_media/watermark_2.png rename to content/media/watermark_2.png diff --git a/_src/_media/watermark_3.png b/content/media/watermark_3.png similarity index 100% rename from _src/_media/watermark_3.png rename to content/media/watermark_3.png diff --git a/_src/_media/watermark_4.png b/content/media/watermark_4.png similarity index 100% rename from _src/_media/watermark_4.png rename to content/media/watermark_4.png diff --git a/_src/_media/watermark_5.png b/content/media/watermark_5.png similarity index 100% rename from _src/_media/watermark_5.png rename to content/media/watermark_5.png diff --git a/_src/_media/watermark_6.png b/content/media/watermark_6.png similarity index 100% rename from _src/_media/watermark_6.png rename to content/media/watermark_6.png diff --git a/_src/_media/watermark_7.png b/content/media/watermark_7.png similarity index 100% rename from _src/_media/watermark_7.png rename to content/media/watermark_7.png diff --git a/_src/_media/watermark_8.png b/content/media/watermark_8.png similarity index 100% rename from _src/_media/watermark_8.png rename to content/media/watermark_8.png diff --git a/_src/_media/watermark_9.png b/content/media/watermark_9.png similarity index 100% rename from _src/_media/watermark_9.png rename to content/media/watermark_9.png diff --git a/_src/_media/watermark_aperture.jpg b/content/media/watermark_aperture.jpg similarity index 100% rename from _src/_media/watermark_aperture.jpg rename to content/media/watermark_aperture.jpg diff --git a/_src/_media/watermark_example_by_kremalicious.zip b/content/media/watermark_example_by_kremalicious.zip similarity index 100% rename from _src/_media/watermark_example_by_kremalicious.zip rename to content/media/watermark_example_by_kremalicious.zip diff --git a/_src/_media/watermarkexample_final.jpg b/content/media/watermarkexample_final.jpg similarity index 100% rename from _src/_media/watermarkexample_final.jpg rename to content/media/watermarkexample_final.jpg diff --git a/_src/_media/watermarkexample_v2.jpg b/content/media/watermarkexample_v2.jpg similarity index 100% rename from _src/_media/watermarkexample_v2.jpg rename to content/media/watermarkexample_v2.jpg diff --git a/_src/_media/watermarkexample_v3.jpg b/content/media/watermarkexample_v3.jpg similarity index 100% rename from _src/_media/watermarkexample_v3.jpg rename to content/media/watermarkexample_v3.jpg diff --git a/_src/_media/watermarkexample_v4.jpg b/content/media/watermarkexample_v4.jpg similarity index 100% rename from _src/_media/watermarkexample_v4.jpg rename to content/media/watermarkexample_v4.jpg diff --git a/_src/_media/webinspector_1.png b/content/media/webinspector_1.png similarity index 100% rename from _src/_media/webinspector_1.png rename to content/media/webinspector_1.png diff --git a/_src/_media/webinspector_2.png b/content/media/webinspector_2.png similarity index 100% rename from _src/_media/webinspector_2.png rename to content/media/webinspector_2.png diff --git a/_src/_media/webinspector_3.png b/content/media/webinspector_3.png similarity index 100% rename from _src/_media/webinspector_3.png rename to content/media/webinspector_3.png diff --git a/_src/_media/webkit.png b/content/media/webkit.png similarity index 100% rename from _src/_media/webkit.png rename to content/media/webkit.png diff --git a/_src/_media/wordpress-logo.png b/content/media/wordpress-logo.png similarity index 100% rename from _src/_media/wordpress-logo.png rename to content/media/wordpress-logo.png diff --git a/_src/_media/wordpress-thumbnail-1.png b/content/media/wordpress-thumbnail-1.png similarity index 100% rename from _src/_media/wordpress-thumbnail-1.png rename to content/media/wordpress-thumbnail-1.png diff --git a/_src/_media/wordpress-thumbnail-2.png b/content/media/wordpress-thumbnail-2.png similarity index 100% rename from _src/_media/wordpress-thumbnail-2.png rename to content/media/wordpress-thumbnail-2.png diff --git a/_src/_media/wordpress-thumbnail-3.png b/content/media/wordpress-thumbnail-3.png similarity index 100% rename from _src/_media/wordpress-thumbnail-3.png rename to content/media/wordpress-thumbnail-3.png diff --git a/_src/_media/wordpress-thumbnail-4.png b/content/media/wordpress-thumbnail-4.png similarity index 100% rename from _src/_media/wordpress-thumbnail-4.png rename to content/media/wordpress-thumbnail-4.png diff --git a/_src/_media/wordpress-thumbnail-5.png b/content/media/wordpress-thumbnail-5.png similarity index 100% rename from _src/_media/wordpress-thumbnail-5.png rename to content/media/wordpress-thumbnail-5.png diff --git a/_src/_media/wp34_retina_icons.png b/content/media/wp34_retina_icons.png similarity index 100% rename from _src/_media/wp34_retina_icons.png rename to content/media/wp34_retina_icons.png diff --git a/_src/_media/xserve_screwed.png b/content/media/xserve_screwed.png similarity index 100% rename from _src/_media/xserve_screwed.png rename to content/media/xserve_screwed.png diff --git a/content/meta.yml b/content/meta.yml new file mode 100644 index 00000000..d3d2462d --- /dev/null +++ b/content/meta.yml @@ -0,0 +1,31 @@ +# +# Home: / +# Archive Page: /archive/ +# Pagination: /page/N/ +# Post: /post-slug/ +# RSS Feed: /feed/ +# + +# Basics +# -------------------- + +name: kremalicious +description: 'Blog of designer & developer Matthias Kretschmann' +url: https://kremalicious.com +author: + name: Matthias Kretschmann + email: m@kretschmann.io + uri: https://matthiaskretschmann.com + twitter: kremalicious + github: kremalicious + facebook: matthiaskretschmann + googleplus: +MatthiasKretschmann + bitcoin: 171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V + ether: "0x339dbC44d39bf1961E385ed0Ae88FC6069b87Ea1" + + +# Urls +# -------------------- + +media_url: "https://res.cloudinary.com/kremalicious" + diff --git a/_src/404.md b/content/pages/404.md similarity index 100% rename from _src/404.md rename to content/pages/404.md diff --git a/_src/styleguide.md b/content/pages/styleguide.md similarity index 100% rename from _src/styleguide.md rename to content/pages/styleguide.md diff --git a/_src/_posts/2005-07-26-beaucarnea-leafs.md b/content/posts/2005-07-26-beaucarnea-leafs.md similarity index 100% rename from _src/_posts/2005-07-26-beaucarnea-leafs.md rename to content/posts/2005-07-26-beaucarnea-leafs.md diff --git a/_src/_posts/2005-08-02-snail-on-a-leaf.md b/content/posts/2005-08-02-snail-on-a-leaf.md similarity index 100% rename from _src/_posts/2005-08-02-snail-on-a-leaf.md rename to content/posts/2005-08-02-snail-on-a-leaf.md diff --git a/_src/_posts/2006-07-23-electricity.md b/content/posts/2006-07-23-electricity.md similarity index 100% rename from _src/_posts/2006-07-23-electricity.md rename to content/posts/2006-07-23-electricity.md diff --git a/_src/_posts/2006-07-23-floating-sky.md b/content/posts/2006-07-23-floating-sky.md similarity index 100% rename from _src/_posts/2006-07-23-floating-sky.md rename to content/posts/2006-07-23-floating-sky.md diff --git a/_src/_posts/2006-08-21-new-berlin-bridge.md b/content/posts/2006-08-21-new-berlin-bridge.md similarity index 100% rename from _src/_posts/2006-08-21-new-berlin-bridge.md rename to content/posts/2006-08-21-new-berlin-bridge.md diff --git a/_src/_posts/2006-09-16-wooden-windmill.md b/content/posts/2006-09-16-wooden-windmill.md similarity index 100% rename from _src/_posts/2006-09-16-wooden-windmill.md rename to content/posts/2006-09-16-wooden-windmill.md diff --git a/_src/_posts/2006-10-22-german-chancellery.md b/content/posts/2006-10-22-german-chancellery.md similarity index 100% rename from _src/_posts/2006-10-22-german-chancellery.md rename to content/posts/2006-10-22-german-chancellery.md diff --git a/_src/_posts/2007-02-10-macbook-abstract.md b/content/posts/2007-02-10-macbook-abstract.md similarity index 100% rename from _src/_posts/2007-02-10-macbook-abstract.md rename to content/posts/2007-02-10-macbook-abstract.md diff --git a/_src/_posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md b/content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md similarity index 100% rename from _src/_posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md rename to content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md diff --git a/_src/_posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md b/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md similarity index 100% rename from _src/_posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md rename to content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md diff --git a/_src/_posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md b/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md similarity index 100% rename from _src/_posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md rename to content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md diff --git a/_src/_posts/2008-03-30-launch-of-kremaliciouscom.md b/content/posts/2008-03-30-launch-of-kremaliciouscom.md similarity index 100% rename from _src/_posts/2008-03-30-launch-of-kremaliciouscom.md rename to content/posts/2008-03-30-launch-of-kremaliciouscom.md diff --git a/_src/_posts/2008-03-31-love-the-parallax.md b/content/posts/2008-03-31-love-the-parallax.md similarity index 100% rename from _src/_posts/2008-03-31-love-the-parallax.md rename to content/posts/2008-03-31-love-the-parallax.md diff --git a/_src/_posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md b/content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md similarity index 100% rename from _src/_posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md rename to content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md diff --git a/_src/_posts/2008-04-04-aperture-file-types.md b/content/posts/2008-04-04-aperture-file-types.md similarity index 100% rename from _src/_posts/2008-04-04-aperture-file-types.md rename to content/posts/2008-04-04-aperture-file-types.md diff --git a/_src/_posts/2008-04-04-london-police-afraid-of-photographers.md b/content/posts/2008-04-04-london-police-afraid-of-photographers.md similarity index 100% rename from _src/_posts/2008-04-04-london-police-afraid-of-photographers.md rename to content/posts/2008-04-04-london-police-afraid-of-photographers.md diff --git a/_src/_posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md b/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md similarity index 100% rename from _src/_posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md rename to content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md diff --git a/_src/_posts/2008-04-05-first-principles-for-choosing-type.md b/content/posts/2008-04-05-first-principles-for-choosing-type.md similarity index 100% rename from _src/_posts/2008-04-05-first-principles-for-choosing-type.md rename to content/posts/2008-04-05-first-principles-for-choosing-type.md diff --git a/_src/_posts/2008-04-06-9-lesser-known-safari-features-worth-switching-for.md b/content/posts/2008-04-06-9-lesser-known-safari-features-worth-switching-for.md similarity index 100% rename from _src/_posts/2008-04-06-9-lesser-known-safari-features-worth-switching-for.md rename to content/posts/2008-04-06-9-lesser-known-safari-features-worth-switching-for.md diff --git a/_src/_posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md b/content/posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md similarity index 100% rename from _src/_posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md rename to content/posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md diff --git a/_src/_posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md b/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md similarity index 100% rename from _src/_posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md rename to content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md diff --git a/_src/_posts/2008-04-09-measuring-the-color-of-light.md b/content/posts/2008-04-09-measuring-the-color-of-light.md similarity index 100% rename from _src/_posts/2008-04-09-measuring-the-color-of-light.md rename to content/posts/2008-04-09-measuring-the-color-of-light.md diff --git a/_src/_posts/2008-04-10-the-story-behind-the-pulitzer-picture.md b/content/posts/2008-04-10-the-story-behind-the-pulitzer-picture.md similarity index 100% rename from _src/_posts/2008-04-10-the-story-behind-the-pulitzer-picture.md rename to content/posts/2008-04-10-the-story-behind-the-pulitzer-picture.md diff --git a/_src/_posts/2008-04-11-photographers-strike-back-in-uk.md b/content/posts/2008-04-11-photographers-strike-back-in-uk.md similarity index 100% rename from _src/_posts/2008-04-11-photographers-strike-back-in-uk.md rename to content/posts/2008-04-11-photographers-strike-back-in-uk.md diff --git a/_src/_posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md b/content/posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md similarity index 100% rename from _src/_posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md rename to content/posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md diff --git a/_src/_posts/2008-04-15-webkit-team-introduced-css-based-gradients.md b/content/posts/2008-04-15-webkit-team-introduced-css-based-gradients.md similarity index 100% rename from _src/_posts/2008-04-15-webkit-team-introduced-css-based-gradients.md rename to content/posts/2008-04-15-webkit-team-introduced-css-based-gradients.md diff --git a/_src/_posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md b/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md similarity index 100% rename from _src/_posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md rename to content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md diff --git a/_src/_posts/2008-04-22-apple-releases-sdk-for-aperture-21.md b/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md similarity index 100% rename from _src/_posts/2008-04-22-apple-releases-sdk-for-aperture-21.md rename to content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md diff --git a/_src/_posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md b/content/posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md similarity index 100% rename from _src/_posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md rename to content/posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md diff --git a/_src/_posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md b/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md similarity index 100% rename from _src/_posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md rename to content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md diff --git a/_src/_posts/2008-05-05-scan-images-directly-into-apple-aperture.md b/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md similarity index 100% rename from _src/_posts/2008-05-05-scan-images-directly-into-apple-aperture.md rename to content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md diff --git a/_src/_posts/2008-05-07-high-quality-watermarks-with-aperture.md b/content/posts/2008-05-07-high-quality-watermarks-with-aperture.md similarity index 100% rename from _src/_posts/2008-05-07-high-quality-watermarks-with-aperture.md rename to content/posts/2008-05-07-high-quality-watermarks-with-aperture.md diff --git a/_src/_posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md b/content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md similarity index 100% rename from _src/_posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md rename to content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md diff --git a/_src/_posts/2008-05-07-the-15-best-new-features-of-aperture-2.md b/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md similarity index 100% rename from _src/_posts/2008-05-07-the-15-best-new-features-of-aperture-2.md rename to content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md diff --git a/_src/_posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md b/content/posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md similarity index 100% rename from _src/_posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md rename to content/posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md diff --git a/_src/_posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md b/content/posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md similarity index 100% rename from _src/_posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md rename to content/posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md diff --git a/_src/_posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md b/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md similarity index 100% rename from _src/_posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md rename to content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md diff --git a/_src/_posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md b/content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md similarity index 100% rename from _src/_posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md rename to content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md diff --git a/_src/_posts/2008-05-21-awesome-parallax-optical-illusion.md b/content/posts/2008-05-21-awesome-parallax-optical-illusion.md similarity index 100% rename from _src/_posts/2008-05-21-awesome-parallax-optical-illusion.md rename to content/posts/2008-05-21-awesome-parallax-optical-illusion.md diff --git a/_src/_posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md b/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md similarity index 100% rename from _src/_posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md rename to content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md diff --git a/_src/_posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md b/content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md similarity index 100% rename from _src/_posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md rename to content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md diff --git a/_src/_posts/2008-06-01-chives.md b/content/posts/2008-06-01-chives.md similarity index 100% rename from _src/_posts/2008-06-01-chives.md rename to content/posts/2008-06-01-chives.md diff --git a/_src/_posts/2008-06-02-tweet-im-on-twitter-now.md b/content/posts/2008-06-02-tweet-im-on-twitter-now.md similarity index 100% rename from _src/_posts/2008-06-02-tweet-im-on-twitter-now.md rename to content/posts/2008-06-02-tweet-im-on-twitter-now.md diff --git a/_src/_posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md b/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md similarity index 100% rename from _src/_posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md rename to content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md diff --git a/_src/_posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md b/content/posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md similarity index 100% rename from _src/_posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md rename to content/posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md diff --git a/_src/_posts/2008-06-04-helvetica-typewriter-keys.md b/content/posts/2008-06-04-helvetica-typewriter-keys.md similarity index 100% rename from _src/_posts/2008-06-04-helvetica-typewriter-keys.md rename to content/posts/2008-06-04-helvetica-typewriter-keys.md diff --git a/_src/_posts/2008-06-11-safari-4-developer-preview.md b/content/posts/2008-06-11-safari-4-developer-preview.md similarity index 100% rename from _src/_posts/2008-06-11-safari-4-developer-preview.md rename to content/posts/2008-06-11-safari-4-developer-preview.md diff --git a/_src/_posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md b/content/posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md similarity index 100% rename from _src/_posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md rename to content/posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md diff --git a/_src/_posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md b/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md similarity index 100% rename from _src/_posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md rename to content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md diff --git a/_src/_posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md b/content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md similarity index 100% rename from _src/_posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md rename to content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md diff --git a/_src/_posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md b/content/posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md similarity index 100% rename from _src/_posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md rename to content/posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md diff --git a/_src/_posts/2008-06-30-stone-head.md b/content/posts/2008-06-30-stone-head.md similarity index 100% rename from _src/_posts/2008-06-30-stone-head.md rename to content/posts/2008-06-30-stone-head.md diff --git a/_src/_posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md b/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md similarity index 100% rename from _src/_posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md rename to content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md diff --git a/_src/_posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md b/content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md similarity index 100% rename from _src/_posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md rename to content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md diff --git a/_src/_posts/2008-07-11-enjoy-kremaliciousiphone.md b/content/posts/2008-07-11-enjoy-kremaliciousiphone.md similarity index 100% rename from _src/_posts/2008-07-11-enjoy-kremaliciousiphone.md rename to content/posts/2008-07-11-enjoy-kremaliciousiphone.md diff --git a/_src/_posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md b/content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md similarity index 100% rename from _src/_posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md rename to content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md diff --git a/_src/_posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md b/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md similarity index 100% rename from _src/_posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md rename to content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md diff --git a/_src/_posts/2008-07-23-leaf-life.md b/content/posts/2008-07-23-leaf-life.md similarity index 100% rename from _src/_posts/2008-07-23-leaf-life.md rename to content/posts/2008-07-23-leaf-life.md diff --git a/_src/_posts/2008-08-03-tips-for-journalists-reporting-from-china.md b/content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md similarity index 100% rename from _src/_posts/2008-08-03-tips-for-journalists-reporting-from-china.md rename to content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md diff --git a/_src/_posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md b/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md similarity index 100% rename from _src/_posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md rename to content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md diff --git a/_src/_posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md b/content/posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md similarity index 100% rename from _src/_posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md rename to content/posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md diff --git a/_src/_posts/2008-08-22-the-kremalicious-marsedit-style.md b/content/posts/2008-08-22-the-kremalicious-marsedit-style.md similarity index 100% rename from _src/_posts/2008-08-22-the-kremalicious-marsedit-style.md rename to content/posts/2008-08-22-the-kremalicious-marsedit-style.md diff --git a/_src/_posts/2008-08-26-icy-box-icons.md b/content/posts/2008-08-26-icy-box-icons.md similarity index 100% rename from _src/_posts/2008-08-26-icy-box-icons.md rename to content/posts/2008-08-26-icy-box-icons.md diff --git a/_src/_posts/2008-08-28-architect-and-facade-theming-for-leopard.md b/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md similarity index 100% rename from _src/_posts/2008-08-28-architect-and-facade-theming-for-leopard.md rename to content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md diff --git a/_src/_posts/2008-08-28-canon-eos-50d-new-lens-announced.md b/content/posts/2008-08-28-canon-eos-50d-new-lens-announced.md similarity index 100% rename from _src/_posts/2008-08-28-canon-eos-50d-new-lens-announced.md rename to content/posts/2008-08-28-canon-eos-50d-new-lens-announced.md diff --git a/_src/_posts/2008-09-01-a-new-browser-is-coming-google-chrome.md b/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md similarity index 100% rename from _src/_posts/2008-09-01-a-new-browser-is-coming-google-chrome.md rename to content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md diff --git a/_src/_posts/2008-09-23-a-long-time-ago.md b/content/posts/2008-09-23-a-long-time-ago.md similarity index 100% rename from _src/_posts/2008-09-23-a-long-time-ago.md rename to content/posts/2008-09-23-a-long-time-ago.md diff --git a/_src/_posts/2008-09-23-futurama-mars-university-wallpaper.md b/content/posts/2008-09-23-futurama-mars-university-wallpaper.md similarity index 100% rename from _src/_posts/2008-09-23-futurama-mars-university-wallpaper.md rename to content/posts/2008-09-23-futurama-mars-university-wallpaper.md diff --git a/_src/_posts/2008-10-23-coffee-cup-icon.md b/content/posts/2008-10-23-coffee-cup-icon.md similarity index 100% rename from _src/_posts/2008-10-23-coffee-cup-icon.md rename to content/posts/2008-10-23-coffee-cup-icon.md diff --git a/_src/_posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md b/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md similarity index 100% rename from _src/_posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md rename to content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md diff --git a/_src/_posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md b/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md similarity index 100% rename from _src/_posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md rename to content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md diff --git a/_src/_posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md b/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md similarity index 100% rename from _src/_posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md rename to content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md diff --git a/_src/_posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md b/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md similarity index 100% rename from _src/_posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md rename to content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md diff --git a/_src/_posts/2009-01-05-the-mac-in-futurama.md b/content/posts/2009-01-05-the-mac-in-futurama.md similarity index 100% rename from _src/_posts/2009-01-05-the-mac-in-futurama.md rename to content/posts/2009-01-05-the-mac-in-futurama.md diff --git a/_src/_posts/2009-02-01-portal-thingy.md b/content/posts/2009-02-01-portal-thingy.md similarity index 100% rename from _src/_posts/2009-02-01-portal-thingy.md rename to content/posts/2009-02-01-portal-thingy.md diff --git a/_src/_posts/2009-02-17-out-of-whale-oil.md b/content/posts/2009-02-17-out-of-whale-oil.md similarity index 100% rename from _src/_posts/2009-02-17-out-of-whale-oil.md rename to content/posts/2009-02-17-out-of-whale-oil.md diff --git a/_src/_posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md b/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md similarity index 100% rename from _src/_posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md rename to content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md diff --git a/_src/_posts/2009-06-04-twitter-crisp.md b/content/posts/2009-06-04-twitter-crisp.md similarity index 100% rename from _src/_posts/2009-06-04-twitter-crisp.md rename to content/posts/2009-06-04-twitter-crisp.md diff --git a/_src/_posts/2009-06-24-adiumeetie.md b/content/posts/2009-06-24-adiumeetie.md similarity index 100% rename from _src/_posts/2009-06-24-adiumeetie.md rename to content/posts/2009-06-24-adiumeetie.md diff --git a/_src/_posts/2009-09-05-delibar.md b/content/posts/2009-09-05-delibar.md similarity index 100% rename from _src/_posts/2009-09-05-delibar.md rename to content/posts/2009-09-05-delibar.md diff --git a/_src/_posts/2009-12-17-wordpress-post-thumbnails.md b/content/posts/2009-12-17-wordpress-post-thumbnails.md similarity index 100% rename from _src/_posts/2009-12-17-wordpress-post-thumbnails.md rename to content/posts/2009-12-17-wordpress-post-thumbnails.md diff --git a/_src/_posts/2010-02-04-ipixelpad.md b/content/posts/2010-02-04-ipixelpad.md similarity index 100% rename from _src/_posts/2010-02-04-ipixelpad.md rename to content/posts/2010-02-04-ipixelpad.md diff --git a/_src/_posts/2010-03-27-office-desk.md b/content/posts/2010-03-27-office-desk.md similarity index 100% rename from _src/_posts/2010-03-27-office-desk.md rename to content/posts/2010-03-27-office-desk.md diff --git a/_src/_posts/2010-07-03-momcorp.md b/content/posts/2010-07-03-momcorp.md similarity index 100% rename from _src/_posts/2010-07-03-momcorp.md rename to content/posts/2010-07-03-momcorp.md diff --git a/_src/_posts/2010-07-18-typeface-condoms.md b/content/posts/2010-07-18-typeface-condoms.md similarity index 100% rename from _src/_posts/2010-07-18-typeface-condoms.md rename to content/posts/2010-07-18-typeface-condoms.md diff --git a/_src/_posts/2010-08-07-bonsai.md b/content/posts/2010-08-07-bonsai.md similarity index 100% rename from _src/_posts/2010-08-07-bonsai.md rename to content/posts/2010-08-07-bonsai.md diff --git a/_src/_posts/2010-09-01-gdr-helvetica.md b/content/posts/2010-09-01-gdr-helvetica.md similarity index 100% rename from _src/_posts/2010-09-01-gdr-helvetica.md rename to content/posts/2010-09-01-gdr-helvetica.md diff --git a/_src/_posts/2010-12-11-iphone-coasters.md b/content/posts/2010-12-11-iphone-coasters.md similarity index 100% rename from _src/_posts/2010-12-11-iphone-coasters.md rename to content/posts/2010-12-11-iphone-coasters.md diff --git a/_src/_posts/2010-12-29-basically-the-monolith-is-on-my-desk.md b/content/posts/2010-12-29-basically-the-monolith-is-on-my-desk.md similarity index 100% rename from _src/_posts/2010-12-29-basically-the-monolith-is-on-my-desk.md rename to content/posts/2010-12-29-basically-the-monolith-is-on-my-desk.md diff --git a/_src/_posts/2010-12-29-free-monkey-breath-not-soylent-green.md b/content/posts/2010-12-29-free-monkey-breath-not-soylent-green.md similarity index 100% rename from _src/_posts/2010-12-29-free-monkey-breath-not-soylent-green.md rename to content/posts/2010-12-29-free-monkey-breath-not-soylent-green.md diff --git a/_src/_posts/2011-01-08-enjoying-paper.md b/content/posts/2011-01-08-enjoying-paper.md similarity index 100% rename from _src/_posts/2011-01-08-enjoying-paper.md rename to content/posts/2011-01-08-enjoying-paper.md diff --git a/_src/_posts/2011-01-08-glowing-star-inside.md b/content/posts/2011-01-08-glowing-star-inside.md similarity index 100% rename from _src/_posts/2011-01-08-glowing-star-inside.md rename to content/posts/2011-01-08-glowing-star-inside.md diff --git a/_src/_posts/2011-01-18-historic-flood-levels.md b/content/posts/2011-01-18-historic-flood-levels.md similarity index 100% rename from _src/_posts/2011-01-18-historic-flood-levels.md rename to content/posts/2011-01-18-historic-flood-levels.md diff --git a/_src/_posts/2011-10-11-broken-nexus-s-screen.md b/content/posts/2011-10-11-broken-nexus-s-screen.md similarity index 100% rename from _src/_posts/2011-10-11-broken-nexus-s-screen.md rename to content/posts/2011-10-11-broken-nexus-s-screen.md diff --git a/_src/_posts/2011-12-15-badged.md b/content/posts/2011-12-15-badged.md similarity index 100% rename from _src/_posts/2011-12-15-badged.md rename to content/posts/2011-12-15-badged.md diff --git a/_src/_posts/2012-02-26-mk-v2.md b/content/posts/2012-02-26-mk-v2.md similarity index 100% rename from _src/_posts/2012-02-26-mk-v2.md rename to content/posts/2012-02-26-mk-v2.md diff --git a/_src/_posts/2012-03-04-relaxing-cat.md b/content/posts/2012-03-04-relaxing-cat.md similarity index 100% rename from _src/_posts/2012-03-04-relaxing-cat.md rename to content/posts/2012-03-04-relaxing-cat.md diff --git a/_src/_posts/2012-04-03-blaue-turme.md b/content/posts/2012-04-03-blaue-turme.md similarity index 100% rename from _src/_posts/2012-04-03-blaue-turme.md rename to content/posts/2012-04-03-blaue-turme.md diff --git a/_src/_posts/2012-04-03-skeletor.md b/content/posts/2012-04-03-skeletor.md similarity index 100% rename from _src/_posts/2012-04-03-skeletor.md rename to content/posts/2012-04-03-skeletor.md diff --git a/_src/_posts/2012-04-03-train-station-leipzig.md b/content/posts/2012-04-03-train-station-leipzig.md similarity index 100% rename from _src/_posts/2012-04-03-train-station-leipzig.md rename to content/posts/2012-04-03-train-station-leipzig.md diff --git a/_src/_posts/2012-04-04-android-tab-conundrum.md b/content/posts/2012-04-04-android-tab-conundrum.md similarity index 100% rename from _src/_posts/2012-04-04-android-tab-conundrum.md rename to content/posts/2012-04-04-android-tab-conundrum.md diff --git a/_src/_posts/2012-04-05-current-sushi-status.md b/content/posts/2012-04-05-current-sushi-status.md similarity index 100% rename from _src/_posts/2012-04-05-current-sushi-status.md rename to content/posts/2012-04-05-current-sushi-status.md diff --git a/_src/_posts/2012-04-07-buna.md b/content/posts/2012-04-07-buna.md similarity index 100% rename from _src/_posts/2012-04-07-buna.md rename to content/posts/2012-04-07-buna.md diff --git a/_src/_posts/2012-04-07-cat-enjoying-a-good-ipad-game.md b/content/posts/2012-04-07-cat-enjoying-a-good-ipad-game.md similarity index 100% rename from _src/_posts/2012-04-07-cat-enjoying-a-good-ipad-game.md rename to content/posts/2012-04-07-cat-enjoying-a-good-ipad-game.md diff --git a/_src/_posts/2012-04-07-ipad-porn.md b/content/posts/2012-04-07-ipad-porn.md similarity index 100% rename from _src/_posts/2012-04-07-ipad-porn.md rename to content/posts/2012-04-07-ipad-porn.md diff --git a/_src/_posts/2012-04-07-opera.md b/content/posts/2012-04-07-opera.md similarity index 100% rename from _src/_posts/2012-04-07-opera.md rename to content/posts/2012-04-07-opera.md diff --git a/_src/_posts/2012-04-08-common-kitchen-decoration.md b/content/posts/2012-04-08-common-kitchen-decoration.md similarity index 100% rename from _src/_posts/2012-04-08-common-kitchen-decoration.md rename to content/posts/2012-04-08-common-kitchen-decoration.md diff --git a/_src/_posts/2012-04-08-graffiti-old-school-style.md b/content/posts/2012-04-08-graffiti-old-school-style.md similarity index 100% rename from _src/_posts/2012-04-08-graffiti-old-school-style.md rename to content/posts/2012-04-08-graffiti-old-school-style.md diff --git a/_src/_posts/2012-04-20-the-origins-of-the-blink-tag.md b/content/posts/2012-04-20-the-origins-of-the-blink-tag.md similarity index 100% rename from _src/_posts/2012-04-20-the-origins-of-the-blink-tag.md rename to content/posts/2012-04-20-the-origins-of-the-blink-tag.md diff --git a/_src/_posts/2012-04-30-announcing-sketch2.md b/content/posts/2012-04-30-announcing-sketch2.md similarity index 100% rename from _src/_posts/2012-04-30-announcing-sketch2.md rename to content/posts/2012-04-30-announcing-sketch2.md diff --git a/_src/_posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md b/content/posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md similarity index 100% rename from _src/_posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md rename to content/posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md diff --git a/_src/_posts/2012-05-03-antique-chrome.md b/content/posts/2012-05-03-antique-chrome.md similarity index 100% rename from _src/_posts/2012-05-03-antique-chrome.md rename to content/posts/2012-05-03-antique-chrome.md diff --git a/_src/_posts/2012-05-04-world-press-photo-2012.md b/content/posts/2012-05-04-world-press-photo-2012.md similarity index 100% rename from _src/_posts/2012-05-04-world-press-photo-2012.md rename to content/posts/2012-05-04-world-press-photo-2012.md diff --git a/_src/_posts/2012-05-09-media-query-asset-downloading-results.md b/content/posts/2012-05-09-media-query-asset-downloading-results.md similarity index 100% rename from _src/_posts/2012-05-09-media-query-asset-downloading-results.md rename to content/posts/2012-05-09-media-query-asset-downloading-results.md diff --git a/_src/_posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md b/content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md similarity index 100% rename from _src/_posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md rename to content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md diff --git a/_src/_posts/2012-05-12-which-responsive-images-solution-should-you-use.md b/content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md similarity index 100% rename from _src/_posts/2012-05-12-which-responsive-images-solution-should-you-use.md rename to content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md diff --git a/_src/_posts/2012-05-14-welcome-to-kremalicious2.md b/content/posts/2012-05-14-welcome-to-kremalicious2.md similarity index 100% rename from _src/_posts/2012-05-14-welcome-to-kremalicious2.md rename to content/posts/2012-05-14-welcome-to-kremalicious2.md diff --git a/_src/_posts/2012-05-15-wp-icons-template.md b/content/posts/2012-05-15-wp-icons-template.md similarity index 100% rename from _src/_posts/2012-05-15-wp-icons-template.md rename to content/posts/2012-05-15-wp-icons-template.md diff --git a/_src/_posts/2012-05-21-why-comic-sans.md b/content/posts/2012-05-21-why-comic-sans.md similarity index 100% rename from _src/_posts/2012-05-21-why-comic-sans.md rename to content/posts/2012-05-21-why-comic-sans.md diff --git a/_src/_posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md b/content/posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md similarity index 100% rename from _src/_posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md rename to content/posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md diff --git a/_src/_posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md b/content/posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md similarity index 100% rename from _src/_posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md rename to content/posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md diff --git a/_src/_posts/2012-05-23-like-modern-heating-only-more-badass.md b/content/posts/2012-05-23-like-modern-heating-only-more-badass.md similarity index 100% rename from _src/_posts/2012-05-23-like-modern-heating-only-more-badass.md rename to content/posts/2012-05-23-like-modern-heating-only-more-badass.md diff --git a/_src/_posts/2012-05-26-html-for-icon-font-usage.md b/content/posts/2012-05-26-html-for-icon-font-usage.md similarity index 100% rename from _src/_posts/2012-05-26-html-for-icon-font-usage.md rename to content/posts/2012-05-26-html-for-icon-font-usage.md diff --git a/_src/_posts/2012-05-27-balloon.md b/content/posts/2012-05-27-balloon.md similarity index 100% rename from _src/_posts/2012-05-27-balloon.md rename to content/posts/2012-05-27-balloon.md diff --git a/_src/_posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md b/content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md similarity index 100% rename from _src/_posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md rename to content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md diff --git a/_src/_posts/2012-06-13-retina-icons-in-wordpress-3-4.md b/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md similarity index 100% rename from _src/_posts/2012-06-13-retina-icons-in-wordpress-3-4.md rename to content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md diff --git a/_src/_posts/2012-06-27-typography-window.md b/content/posts/2012-06-27-typography-window.md similarity index 100% rename from _src/_posts/2012-06-27-typography-window.md rename to content/posts/2012-06-27-typography-window.md diff --git a/_src/_posts/2012-06-30-why-files-exist.md b/content/posts/2012-06-30-why-files-exist.md similarity index 100% rename from _src/_posts/2012-06-30-why-files-exist.md rename to content/posts/2012-06-30-why-files-exist.md diff --git a/_src/_posts/2012-07-04-newton-reconsidered.md b/content/posts/2012-07-04-newton-reconsidered.md similarity index 100% rename from _src/_posts/2012-07-04-newton-reconsidered.md rename to content/posts/2012-07-04-newton-reconsidered.md diff --git a/_src/_posts/2012-07-07-what-makes-twitter-twitter.md b/content/posts/2012-07-07-what-makes-twitter-twitter.md similarity index 100% rename from _src/_posts/2012-07-07-what-makes-twitter-twitter.md rename to content/posts/2012-07-07-what-makes-twitter-twitter.md diff --git a/_src/_posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md b/content/posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md similarity index 100% rename from _src/_posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md rename to content/posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md diff --git a/_src/_posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md b/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md similarity index 100% rename from _src/_posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md rename to content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md diff --git a/_src/_posts/2012-07-16-using-kbd-for-fun-and-profit.md b/content/posts/2012-07-16-using-kbd-for-fun-and-profit.md similarity index 100% rename from _src/_posts/2012-07-16-using-kbd-for-fun-and-profit.md rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit.md diff --git a/_src/_posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md b/content/posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md similarity index 100% rename from _src/_posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md rename to content/posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md diff --git a/_src/_posts/2012-07-20-mmmmh-coffee.md b/content/posts/2012-07-20-mmmmh-coffee.md similarity index 100% rename from _src/_posts/2012-07-20-mmmmh-coffee.md rename to content/posts/2012-07-20-mmmmh-coffee.md diff --git a/_src/_posts/2012-08-07-projectpurple.md b/content/posts/2012-08-07-projectpurple.md similarity index 100% rename from _src/_posts/2012-08-07-projectpurple.md rename to content/posts/2012-08-07-projectpurple.md diff --git a/_src/_posts/2012-08-08-amazingly-early.md b/content/posts/2012-08-08-amazingly-early.md similarity index 100% rename from _src/_posts/2012-08-08-amazingly-early.md rename to content/posts/2012-08-08-amazingly-early.md diff --git a/_src/_posts/2012-08-20-im-joining-ezeep.md b/content/posts/2012-08-20-im-joining-ezeep.md similarity index 100% rename from _src/_posts/2012-08-20-im-joining-ezeep.md rename to content/posts/2012-08-20-im-joining-ezeep.md diff --git a/_src/_posts/2012-08-25-so-much-room.md b/content/posts/2012-08-25-so-much-room.md similarity index 100% rename from _src/_posts/2012-08-25-so-much-room.md rename to content/posts/2012-08-25-so-much-room.md diff --git a/_src/_posts/2012-09-07-huge-station-is-huge.md b/content/posts/2012-09-07-huge-station-is-huge.md similarity index 100% rename from _src/_posts/2012-09-07-huge-station-is-huge.md rename to content/posts/2012-09-07-huge-station-is-huge.md diff --git a/_src/_posts/2012-09-10-subway-firefox.md b/content/posts/2012-09-10-subway-firefox.md similarity index 100% rename from _src/_posts/2012-09-10-subway-firefox.md rename to content/posts/2012-09-10-subway-firefox.md diff --git a/_src/_posts/2012-09-12-sweet-typography.md b/content/posts/2012-09-12-sweet-typography.md similarity index 100% rename from _src/_posts/2012-09-12-sweet-typography.md rename to content/posts/2012-09-12-sweet-typography.md diff --git a/_src/_posts/2012-09-14-bvg-dos.md b/content/posts/2012-09-14-bvg-dos.md similarity index 100% rename from _src/_posts/2012-09-14-bvg-dos.md rename to content/posts/2012-09-14-bvg-dos.md diff --git a/_src/_posts/2012-09-26-designing-with-code.md b/content/posts/2012-09-26-designing-with-code.md similarity index 100% rename from _src/_posts/2012-09-26-designing-with-code.md rename to content/posts/2012-09-26-designing-with-code.md diff --git a/_src/_posts/2013-02-17-castle-garden.md b/content/posts/2013-02-17-castle-garden.md similarity index 100% rename from _src/_posts/2013-02-17-castle-garden.md rename to content/posts/2013-02-17-castle-garden.md diff --git a/_src/_posts/2013-02-17-ezeep-android-app-design.md b/content/posts/2013-02-17-ezeep-android-app-design.md similarity index 100% rename from _src/_posts/2013-02-17-ezeep-android-app-design.md rename to content/posts/2013-02-17-ezeep-android-app-design.md diff --git a/_src/_posts/2013-02-17-ezeep-office-view.md b/content/posts/2013-02-17-ezeep-office-view.md similarity index 100% rename from _src/_posts/2013-02-17-ezeep-office-view.md rename to content/posts/2013-02-17-ezeep-office-view.md diff --git a/_src/_posts/2013-05-23-ezeep-birds.md b/content/posts/2013-05-23-ezeep-birds.md similarity index 100% rename from _src/_posts/2013-05-23-ezeep-birds.md rename to content/posts/2013-05-23-ezeep-birds.md diff --git a/_src/_posts/2013-05-23-ezeep-origami.md b/content/posts/2013-05-23-ezeep-origami.md similarity index 100% rename from _src/_posts/2013-05-23-ezeep-origami.md rename to content/posts/2013-05-23-ezeep-origami.md diff --git a/_src/_posts/2013-07-13-create-differentiate-iterate-10-pro-tips-on-relaunching-your-startup-website.md b/content/posts/2013-07-13-create-differentiate-iterate-10-pro-tips-on-relaunching-your-startup-website.md similarity index 100% rename from _src/_posts/2013-07-13-create-differentiate-iterate-10-pro-tips-on-relaunching-your-startup-website.md rename to content/posts/2013-07-13-create-differentiate-iterate-10-pro-tips-on-relaunching-your-startup-website.md diff --git a/_src/_posts/2013-07-13-enterprise-software-sucks.md b/content/posts/2013-07-13-enterprise-software-sucks.md similarity index 100% rename from _src/_posts/2013-07-13-enterprise-software-sucks.md rename to content/posts/2013-07-13-enterprise-software-sucks.md diff --git a/_src/_posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md b/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md similarity index 100% rename from _src/_posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md rename to content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md diff --git a/_src/_posts/2013-11-06-why-the-worlds-best-photo-startup-is-going-out-of-business.md b/content/posts/2013-11-06-why-the-worlds-best-photo-startup-is-going-out-of-business.md similarity index 100% rename from _src/_posts/2013-11-06-why-the-worlds-best-photo-startup-is-going-out-of-business.md rename to content/posts/2013-11-06-why-the-worlds-best-photo-startup-is-going-out-of-business.md diff --git a/_src/_posts/2013-11-20-why-we-are-allowed-to-hate-silicon-valley.md b/content/posts/2013-11-20-why-we-are-allowed-to-hate-silicon-valley.md similarity index 100% rename from _src/_posts/2013-11-20-why-we-are-allowed-to-hate-silicon-valley.md rename to content/posts/2013-11-20-why-we-are-allowed-to-hate-silicon-valley.md diff --git a/_src/_posts/2013-12-11-silicon-valley-isnt-a-meritocracy.md b/content/posts/2013-12-11-silicon-valley-isnt-a-meritocracy.md similarity index 100% rename from _src/_posts/2013-12-11-silicon-valley-isnt-a-meritocracy.md rename to content/posts/2013-12-11-silicon-valley-isnt-a-meritocracy.md diff --git a/_src/_posts/2014-03-10-just-a-normal-sunday.md b/content/posts/2014-03-10-just-a-normal-sunday.md similarity index 100% rename from _src/_posts/2014-03-10-just-a-normal-sunday.md rename to content/posts/2014-03-10-just-a-normal-sunday.md diff --git a/_src/_posts/2014-03-15-potsdam.md b/content/posts/2014-03-15-potsdam.md similarity index 100% rename from _src/_posts/2014-03-15-potsdam.md rename to content/posts/2014-03-15-potsdam.md diff --git a/_src/_posts/2014-03-17-typographic-diamond.md b/content/posts/2014-03-17-typographic-diamond.md similarity index 100% rename from _src/_posts/2014-03-17-typographic-diamond.md rename to content/posts/2014-03-17-typographic-diamond.md diff --git a/_src/_posts/2014-04-26-ai-weiwei-stools.md b/content/posts/2014-04-26-ai-weiwei-stools.md similarity index 100% rename from _src/_posts/2014-04-26-ai-weiwei-stools.md rename to content/posts/2014-04-26-ai-weiwei-stools.md diff --git a/_src/_posts/2014-06-07-airfield-reference-point.md b/content/posts/2014-06-07-airfield-reference-point.md similarity index 100% rename from _src/_posts/2014-06-07-airfield-reference-point.md rename to content/posts/2014-06-07-airfield-reference-point.md diff --git a/_src/_posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md b/content/posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md similarity index 100% rename from _src/_posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md rename to content/posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md diff --git a/_src/_posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md b/content/posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md similarity index 100% rename from _src/_posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md rename to content/posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md diff --git a/_src/_posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md b/content/posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md similarity index 100% rename from _src/_posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md rename to content/posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md diff --git a/_src/_posts/2015-04-09-most-surprising-dog-i-know.md b/content/posts/2015-04-09-most-surprising-dog-i-know.md similarity index 100% rename from _src/_posts/2015-04-09-most-surprising-dog-i-know.md rename to content/posts/2015-04-09-most-surprising-dog-i-know.md diff --git a/_src/_posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md b/content/posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md similarity index 100% rename from _src/_posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md rename to content/posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md diff --git a/_src/_posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md b/content/posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md similarity index 100% rename from _src/_posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md rename to content/posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md diff --git a/_src/_posts/2015-04-25-tiny-tiny-demons.md b/content/posts/2015-04-25-tiny-tiny-demons.md similarity index 100% rename from _src/_posts/2015-04-25-tiny-tiny-demons.md rename to content/posts/2015-04-25-tiny-tiny-demons.md diff --git a/_src/_posts/2015-08-02-simple-tor-setup-on-mac-os-x.md b/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md similarity index 100% rename from _src/_posts/2015-08-02-simple-tor-setup-on-mac-os-x.md rename to content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md diff --git a/_src/_posts/2015-09-13-css-app-store-badges.md b/content/posts/2015-09-13-css-app-store-badges.md similarity index 100% rename from _src/_posts/2015-09-13-css-app-store-badges.md rename to content/posts/2015-09-13-css-app-store-badges.md diff --git a/_src/_posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md b/content/posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md similarity index 100% rename from _src/_posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md rename to content/posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md diff --git a/_src/_posts/2016-02-27-streets-of-el-raval.md b/content/posts/2016-02-27-streets-of-el-raval.md similarity index 100% rename from _src/_posts/2016-02-27-streets-of-el-raval.md rename to content/posts/2016-02-27-streets-of-el-raval.md diff --git a/_src/_posts/2016-03-02-a-storm-is-coming.md b/content/posts/2016-03-02-a-storm-is-coming.md similarity index 100% rename from _src/_posts/2016-03-02-a-storm-is-coming.md rename to content/posts/2016-03-02-a-storm-is-coming.md diff --git a/_src/_posts/2017-02-13-keith-haring-vandalizing-a-wall.md b/content/posts/2017-02-13-keith-haring-vandalizing-a-wall.md similarity index 100% rename from _src/_posts/2017-02-13-keith-haring-vandalizing-a-wall.md rename to content/posts/2017-02-13-keith-haring-vandalizing-a-wall.md diff --git a/_src/_posts/2017-02-13-streets-of-el-born.md b/content/posts/2017-02-13-streets-of-el-born.md similarity index 100% rename from _src/_posts/2017-02-13-streets-of-el-born.md rename to content/posts/2017-02-13-streets-of-el-born.md diff --git a/_src/_posts/2017-02-14-new-passion-facade.md b/content/posts/2017-02-14-new-passion-facade.md similarity index 100% rename from _src/_posts/2017-02-14-new-passion-facade.md rename to content/posts/2017-02-14-new-passion-facade.md diff --git a/_src/_posts/2017-02-16-coolhaven-rotterdam.md b/content/posts/2017-02-16-coolhaven-rotterdam.md similarity index 100% rename from _src/_posts/2017-02-16-coolhaven-rotterdam.md rename to content/posts/2017-02-16-coolhaven-rotterdam.md diff --git a/_src/_posts/2017-02-17-behind-the-art.md b/content/posts/2017-02-17-behind-the-art.md similarity index 100% rename from _src/_posts/2017-02-17-behind-the-art.md rename to content/posts/2017-02-17-behind-the-art.md diff --git a/_src/_posts/2017-02-19-rotterdam-coats.md b/content/posts/2017-02-19-rotterdam-coats.md similarity index 100% rename from _src/_posts/2017-02-19-rotterdam-coats.md rename to content/posts/2017-02-19-rotterdam-coats.md diff --git a/_src/_posts/2017-02-21-david-chipperfield-staircase.md b/content/posts/2017-02-21-david-chipperfield-staircase.md similarity index 100% rename from _src/_posts/2017-02-21-david-chipperfield-staircase.md rename to content/posts/2017-02-21-david-chipperfield-staircase.md diff --git a/_src/_posts/2017-02-26-eu-gotham-city.md b/content/posts/2017-02-26-eu-gotham-city.md similarity index 100% rename from _src/_posts/2017-02-26-eu-gotham-city.md rename to content/posts/2017-02-26-eu-gotham-city.md diff --git a/_src/_posts/2017-02-27-amsterdam-cliche.md b/content/posts/2017-02-27-amsterdam-cliche.md similarity index 100% rename from _src/_posts/2017-02-27-amsterdam-cliche.md rename to content/posts/2017-02-27-amsterdam-cliche.md diff --git a/_src/_posts/2017-02-27-its-dark-and-i-dont-exist.md b/content/posts/2017-02-27-its-dark-and-i-dont-exist.md similarity index 100% rename from _src/_posts/2017-02-27-its-dark-and-i-dont-exist.md rename to content/posts/2017-02-27-its-dark-and-i-dont-exist.md diff --git a/_src/_posts/2017-02-28-stedelijk-museum.md b/content/posts/2017-02-28-stedelijk-museum.md similarity index 100% rename from _src/_posts/2017-02-28-stedelijk-museum.md rename to content/posts/2017-02-28-stedelijk-museum.md diff --git a/_src/_posts/2017-02-28-temple-guardian-rijksmuseum.md b/content/posts/2017-02-28-temple-guardian-rijksmuseum.md similarity index 100% rename from _src/_posts/2017-02-28-temple-guardian-rijksmuseum.md rename to content/posts/2017-02-28-temple-guardian-rijksmuseum.md diff --git a/_src/_posts/2017-02-28-watching-the-night-watch.md b/content/posts/2017-02-28-watching-the-night-watch.md similarity index 100% rename from _src/_posts/2017-02-28-watching-the-night-watch.md rename to content/posts/2017-02-28-watching-the-night-watch.md diff --git a/_src/_posts/2017-04-16-hamburgs-elbphilharmonie.md b/content/posts/2017-04-16-hamburgs-elbphilharmonie.md similarity index 100% rename from _src/_posts/2017-04-16-hamburgs-elbphilharmonie.md rename to content/posts/2017-04-16-hamburgs-elbphilharmonie.md diff --git a/_src/_posts/2017-07-05-kapaleeshwarar-temple-chennai.md b/content/posts/2017-07-05-kapaleeshwarar-temple-chennai.md similarity index 100% rename from _src/_posts/2017-07-05-kapaleeshwarar-temple-chennai.md rename to content/posts/2017-07-05-kapaleeshwarar-temple-chennai.md diff --git a/_src/_posts/2017-07-08-kochis-streetart-game-is-strong.md b/content/posts/2017-07-08-kochis-streetart-game-is-strong.md similarity index 100% rename from _src/_posts/2017-07-08-kochis-streetart-game-is-strong.md rename to content/posts/2017-07-08-kochis-streetart-game-is-strong.md diff --git a/_src/_posts/2017-07-09-orphaned-elephant-with-friend.md b/content/posts/2017-07-09-orphaned-elephant-with-friend.md similarity index 100% rename from _src/_posts/2017-07-09-orphaned-elephant-with-friend.md rename to content/posts/2017-07-09-orphaned-elephant-with-friend.md diff --git a/_src/_posts/2017-07-10-kochis-dhobhi-ghat.md b/content/posts/2017-07-10-kochis-dhobhi-ghat.md similarity index 100% rename from _src/_posts/2017-07-10-kochis-dhobhi-ghat.md rename to content/posts/2017-07-10-kochis-dhobhi-ghat.md diff --git a/_src/_posts/2017-07-13-mumbai-hand-painted-typography.md b/content/posts/2017-07-13-mumbai-hand-painted-typography.md similarity index 100% rename from _src/_posts/2017-07-13-mumbai-hand-painted-typography.md rename to content/posts/2017-07-13-mumbai-hand-painted-typography.md diff --git a/_src/_posts/2017-07-13-obligatory-gate-of-india-photo.md b/content/posts/2017-07-13-obligatory-gate-of-india-photo.md similarity index 100% rename from _src/_posts/2017-07-13-obligatory-gate-of-india-photo.md rename to content/posts/2017-07-13-obligatory-gate-of-india-photo.md diff --git a/_src/_posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md b/content/posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md similarity index 100% rename from _src/_posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md rename to content/posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md diff --git a/_src/_posts/2017-11-10-acropolis-the-erechtheum.md b/content/posts/2017-11-10-acropolis-the-erechtheum.md similarity index 100% rename from _src/_posts/2017-11-10-acropolis-the-erechtheum.md rename to content/posts/2017-11-10-acropolis-the-erechtheum.md diff --git a/_src/_posts/2017-11-10-acropolis-the-parthenon.md b/content/posts/2017-11-10-acropolis-the-parthenon.md similarity index 100% rename from _src/_posts/2017-11-10-acropolis-the-parthenon.md rename to content/posts/2017-11-10-acropolis-the-parthenon.md diff --git a/_src/_posts/2017-11-10-acropolis-the-propylaea.md b/content/posts/2017-11-10-acropolis-the-propylaea.md similarity index 100% rename from _src/_posts/2017-11-10-acropolis-the-propylaea.md rename to content/posts/2017-11-10-acropolis-the-propylaea.md diff --git a/_src/_posts/2017-12-16-sagrada-familia.md b/content/posts/2017-12-16-sagrada-familia.md similarity index 100% rename from _src/_posts/2017-12-16-sagrada-familia.md rename to content/posts/2017-12-16-sagrada-familia.md diff --git a/_src/_posts/2017-12-27-sao-paulo-traffic.md b/content/posts/2017-12-27-sao-paulo-traffic.md similarity index 100% rename from _src/_posts/2017-12-27-sao-paulo-traffic.md rename to content/posts/2017-12-27-sao-paulo-traffic.md diff --git a/_src/_posts/2018-01-04-passagem-literaria-da-consolacao.md b/content/posts/2018-01-04-passagem-literaria-da-consolacao.md similarity index 100% rename from _src/_posts/2018-01-04-passagem-literaria-da-consolacao.md rename to content/posts/2018-01-04-passagem-literaria-da-consolacao.md diff --git a/_src/_posts/2018-01-05-samba-school.md b/content/posts/2018-01-05-samba-school.md similarity index 100% rename from _src/_posts/2018-01-05-samba-school.md rename to content/posts/2018-01-05-samba-school.md diff --git a/gatsby-config.js b/gatsby-config.js new file mode 100644 index 00000000..4143e5c1 --- /dev/null +++ b/gatsby-config.js @@ -0,0 +1,52 @@ +const path = require('path') +const fs = require('fs') +const yaml = require('js-yaml') +const meta = yaml.load(fs.readFileSync('./content/meta.yml', 'utf8')) +const { url } = meta + +module.exports = { + siteMetadata: { + siteUrl: `${url}` + }, + plugins: [ + 'gatsby-plugin-react-helmet', + 'gatsby-transformer-yaml', + { + resolve: 'gatsby-transformer-remark', + options: { + plugins: [ + { + resolve: 'gatsby-remark-images', + options: { + maxWidth: 600 + } + }, + 'gatsby-remark-smartypants' + ] + } + }, + 'gatsby-transformer-sharp', + 'gatsby-plugin-sharp', + 'gatsby-plugin-sitemap', + { + resolve: 'gatsby-plugin-sass', + options: { + includePaths: [`${__dirname}/node_modules`] + } + }, + { + resolve: 'gatsby-source-filesystem', + options: { + name: 'pages', + path: path.join(__dirname, 'content', 'pages') + } + }, + { + resolve: 'gatsby-source-filesystem', + options: { + name: 'media', + path: path.join(__dirname, 'content', 'media') + } + } + ] +} diff --git a/gatsby-node.js b/gatsby-node.js new file mode 100644 index 00000000..e69de29b diff --git a/gulpfile.babel.js b/gulpfile.babel.js deleted file mode 100644 index 16f1248f..00000000 --- a/gulpfile.babel.js +++ /dev/null @@ -1,470 +0,0 @@ -import fs from 'fs' -import { src, dest, parallel, series, watch } from 'gulp' -import del from 'del' -import parallelize from 'concurrent-transform' -import browser from 'browser-sync' -import autoprefixer from 'autoprefixer' -import cssnano from 'cssnano' -import critical from 'critical' -import request from 'request' - -import yaml from 'js-yaml' -import chalk from 'chalk' -import yargs from 'yargs' - -// Required for mixing old and ES6+ js with ugify-js 3 -import uglifyjs from 'uglify-es' -import composer from 'gulp-uglify/composer' - -// Get all the configs: `pkg` and `site` -import pkg from './package' - -const site = yaml.safeLoad(fs.readFileSync('./_config.yml')) - -// Load plugins -const cp = require('child_process') -const $ = require('gulp-load-plugins')() - -// Custom minify -const minify = composer(uglifyjs, console) - -// Handle errors -const onError = error => { - console.log($.util.colors.red('\nYou fucked up:', error.message, 'on line', error.lineNumber, '\n')) - this.emit('end') -} - -// 'development' is just default, production overrides are triggered -// by adding the production flag to the gulp command e.g. `gulp build --production` -const argv = yargs.parse(process.argv.slice(1)) -const isProduction = argv.production - - -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -// Terminal Banner -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - -console.log('') -console.log(chalk.dim(' <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>')) -console.log('') -console.log(chalk.cyan(' (o) Just what do you think you\'re doing,', process.env.USER, '? ')) -console.log('') -console.log(chalk.dim(' <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>')) -console.log('') - - -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -// Config -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - -// Port to use for the development server. -const PORT = 1337 - -// Paths -const SRC = site.source -const DIST = site.destination - -// Deployment -const S3BUCKET = 'kremalicious.com' -const S3PATH = '/' -const S3REGION = 'eu-central-1' - -// SVG sprite -const SPRITECONFIG = { - dest: DIST + '/assets/img/', - mode: { - symbol: { - dest: './', - sprite: 'sprite.svg' - } - } -} - -// Code banner -const BANNER = [ - '/**', - ' ** <%= pkg.name %> v<%= pkg.version %>', - ' ** <%= pkg.description %>', - ' ** <%= pkg.homepage %>', - ' **', - ' ** <%= pkg.author.name %> <<%= pkg.author.email %>>', - ' **', - ' ** YOU EARNED THE GEEK ACHIEVEMENT ', - ' ** FOR LOOKING AT MY SOURCE ', - ' **', - ' ** But because of all the minimizing and caching ', - ' ** going on you better check out the code on ', - ' ** github ', - ' ** ', - ' ** <%= pkg.repository.url %> ', - ' **/', - '' -].join('\n') - - -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -// Tasks -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - - -// -// Delete build artifacts -// -export const clean = () => - del([ - DIST + '**/*', - DIST + '.*', // Delete all hidden files - '!' + DIST + '/media' - ]) - - -// -// Jekyll -// -export const jekyll = done => { - browser.notify('Compiling Jekyll') - - let jekyllOptions - - if (isProduction) { - process.env.JEKYLL_ENV = 'production' - jekyllOptions = 'jekyll build --lsi' - } else { - process.env.JEKYLL_ENV = 'development' - jekyllOptions = 'jekyll build --config _config.yml,_config.dev.yml --incremental --drafts --future' - } - - const jekyll = cp.execFile('bundle', ['exec', jekyllOptions], { stdio: 'inherit' }) - - const jekyllLogger = buffer => { - buffer.toString() - .split(/\n/) - .forEach(message => console.log(message)) - } - - jekyll.stdout.on('data', jekyllLogger).on('close', done) -} - - -// -// HTML -// -export const html = () => src(DIST + '/**/*.html') - .pipe($.if(isProduction, $.htmlmin({ - collapseWhitespace: true, - conservativeCollapse: true, - removeComments: true, - useShortDoctype: true, - collapseBooleanAttributes: true, - removeRedundantAttributes: true, - removeEmptyAttributes: true, - minifyJS: true, - minifyCSS: true - }))) - .pipe(dest(DIST)) - - -// -// Styles -// -const plugins = [ - autoprefixer(), - cssnano() -] - -export const css = () => - src([ - SRC + '/_assets/styl/kremalicious3.styl', - SRC + '/_assets/styl/post-*.styl' - ]) - .pipe($.if(!isProduction, $.sourcemaps.init())) - .pipe($.stylus({ 'include css': true })).on('error', onError) - .pipe($.postcss(plugins)).on('error', onError) - .pipe($.if(!isProduction, $.sourcemaps.write())) - .pipe($.if(isProduction, $.header(BANNER, { pkg }))) - .pipe($.rename({ suffix: '.min' })) - .pipe(dest(DIST + '/assets/css/')) - .pipe(browser.stream()) - -// Inline critical-path CSS -export const criticalCss = done => { - if (isProduction) { - critical.generate({ - base: DIST, - src: 'index.html', - dest: 'index.html', - inline: true, - minify: true, - dimensions: [{ - height: 320, - width: 480 - }, { - height: 600, - width: 650 - }, { - height: 700, - width: 960 - }, { - height: 900, - width: 1400 - }] - }) - } - done() -} - - -// -// Scripts -// -export const js = () => - src([ - SRC + '/_assets/js/*.js', - '!' + SRC + '/_assets/js/_*.js' - ]) - .pipe($.sourcemaps.init()) - .pipe($.include({ - includePaths: ['node_modules', SRC + '/_assets/js'] - })).on('error', onError) - .pipe($.if(isProduction, minify())).on('error', onError) - .pipe($.if(!isProduction, $.sourcemaps.write())) - .pipe($.if(isProduction, $.header(BANNER, { pkg }))) - .pipe($.rename({ suffix: '.min' })) - .pipe(dest(DIST + '/assets/js/')) - - -// -// Images -// -const imageminPlugins = [ - $.imagemin.gifsicle({ interlaced: true }), - $.imagemin.jpegtran(), - $.imagemin.optipng({ optimizationLevel: 5 }), - $.imagemin.svgo({ plugins: [{ removeViewBox: false }] }) -] - -// Copy all images -export const images = () => src(SRC + '/_assets/img/**/*') - .pipe($.if(isProduction, $.imagemin(imageminPlugins))) - .pipe(dest(DIST + '/assets/img/')) - -// SVG sprite -export const svg = () => src(SRC + '/_assets/img/**/*.svg') - .pipe($.if(isProduction, $.imagemin(imageminPlugins))) - .pipe($.svgSprite(SPRITECONFIG)) - .pipe(dest(DIST + '/assets/img/')) - - -// -// Copy fonts -// -export const fonts = () => src(SRC + '/_assets/fonts/**/*') - .pipe(dest(DIST + '/assets/fonts/')) - - -// -// Copy media -// -export const media = () => src(SRC + '/_media/**/*') - .pipe(dest(DIST + '/media/')) - - -// -// Revision static assets -// -export const rev = done => { - // Globbing is slow so do everything conditionally for faster dev build - if (isProduction) { - return src(DIST + '/assets/**/*.{css,js,png,jpg,jpeg,svg,eot,ttf,woff,woff2}') - .pipe($.rev()) - .pipe(dest(DIST + '/assets/')) - // Output rev manifest for next replace task - .pipe($.rev.manifest()) - .pipe(dest(DIST + '/assets/')) - } - done() -} - - -// -// Replace all links to assets in files -// from a manifest file -// -export const revReplace = done => { - // Globbing is slow so do everything conditionally for faster dev build - if (isProduction) { - const manifest = src(DIST + '/assets/rev-manifest.json') - - return src(DIST + '/**/*.{html,css,js}') - .pipe($.revReplace({ manifest })) - .pipe(dest(DIST)) - } - done() -} - - -// -// Ping search engines -// -export const seo = done => { - const googleUrl = 'http://www.google.com/webmasters/tools/ping?sitemap=' - const bingUrl = 'http://www.bing.com/webmaster/ping.aspx?siteMap=' - - const response = (error, response) => { - if (error) { - console.log(chalk.red(error)) - } else { - console.log(chalk.dim('Status:', response && response.statusCode)) - - if (response.statusCode === 200) { - console.log(chalk.green('Successfully notified')) - } - } - } - - request(googleUrl + site.url + '/sitemap.xml', response) - request(bingUrl + site.url + '/sitemap.xml', response) - - done() -} - - -// -// Dev Server -// -export const server = done => { - browser.init({ - server: DIST, - port: PORT, - reloadDebounce: 2000 - }) - done() -} - - -// -// Watch for file changes -// -export const watchSrc = () => { - watch(SRC + '/_assets/styl/**/*.styl').on('all', series(css)) - watch(SRC + '/_assets/js/**/*.js').on('all', series(js, browser.reload)) - watch(SRC + '/_assets/img/**/*.{png,jpg,jpeg,gif,webp}').on('all', series(images, browser.reload)) - watch(SRC + '/_assets/img/**/*.{svg}').on('all', series(svg, browser.reload)) - watch(SRC + '/_media/**/*').on('all', series(media, browser.reload)) - watch([SRC + '/**/*.{html,xml,json,txt,md,yml}', './*.yml', SRC + '_includes/svg/*']).on('all', series('build', browser.reload)) -} - - -// -// Build banner -// -export const buildBanner = done => { - console.log(chalk.dim(' ------------------------------------------')) - console.log(chalk.green(' Building ' + (isProduction ? 'production' : 'dev') + ' version...')) - console.log(chalk.dim(' ------------------------------------------')) - - done() -} - - -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -// Collection tasks -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - - -// -// Full build -// -// `gulp build` is the development build -// `gulp build --production` is the production build -// -export const build = series( - buildBanner, - clean, - jekyll, - parallel(html, css, js, svg, images, fonts, media), - rev, - revReplace, - criticalCss -) - - -// -// Build site, run server, and watch for file changes -// -// `gulp dev` -// -export const dev = series(build, server, watchSrc) - -// Set `gulp dev` as default: `gulp` -export default dev - - -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -// Deployment -// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - -// create publisher, define config -const publisher = $.awspublish.create({ - params: { - Bucket: S3BUCKET - }, - accessKeyId: process.env.AWS_ACCESS_KEY, - secretAccessKey: process.env.AWS_SECRET_KEY, - region: S3REGION -}) - -export const s3 = () => src(DIST + '/**/*') - .pipe($.awspublishRouter({ - cache: { - // Cache for 5 minutes by default - cacheTime: 300 - }, - routes: { - // All static assets, cached & gzipped - '^assets/(?:.+)\\.(?:js|css|png|jpg|jpeg|gif|ico|svg|ttf|eot|woff|woff2)$': { - cacheTime: 2592000, // Cache for 1 month - gzip: true - }, - - // Every other asset, cached - '^assets/.+$': { - cacheTime: 2592000 // Cache for 1 month - }, - - // All html files, not cached & gzipped - '^.+\\.html': { - cacheTime: 0, - gzip: true - }, - - // Font mime types - '.ttf$': { - key: '$&', - headers: { 'Content-Type': 'application/x-font-ttf' } - }, - '.woff$': { - key: '$&', - headers: { 'Content-Type': 'application/x-font-woff' } - }, - '.woff2$': { - key: '$&', - headers: { 'Content-Type': 'application/x-font-woff2' } - }, - - // Pass-through for anything that wasn't matched by routes above, to be uploaded with default options - '^.+$': '$&' - } - })) - // Make sure everything goes to the root '/' - .pipe($.rename(path => { - path.dirname = S3PATH + path.dirname - })) - .pipe(parallelize(publisher.publish(), 100)) - .pipe(publisher.sync()) // Delete files in bucket that are not in local folder - .pipe($.awspublish.reporter({ - states: ['create', 'update', 'delete'] - })) - -// `gulp deploy` -export const deploy = series(s3) diff --git a/package.json b/package.json index 6e12c308..e677810d 100644 --- a/package.json +++ b/package.json @@ -1,90 +1,72 @@ { - "name": "kremalicious", - "version": "3.0.0", - "author": { - "name": "Matthias Kretschmann", - "email": "m@kretschmann.io" - }, + "name": "@kremalicious/blog", + "version": "4.0.0", + "author": "Matthias Kretschmann ", "description": "Blog of Matthias Kretschmann", "homepage": "https://kremalicious.com", "license": "MIT", - "main": "gulpfile.babel.js", + "main": "index.js", "scripts": { - "start": "gulp", - "build": "gulp build --production", - "test": "xo" + "start": "gatsby develop", + "build": "gatsby build", + "format": "prettier --write 'src/**/*.{js,jsx}'", + "format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'", + "lint:js": "eslint ./gatsby-*.js && eslint ./src/**/*.{js,jsx}", + "lint:css": "stylelint ./src/**/*.{css,scss}", + "lint": "npm run lint:js && npm run lint:css", + "test": "npm run lint", + "deploy": "./scripts/deploy.sh" }, "browserslist": [ "last 3 versions" ], - "xo": { - "space": 4, - "semicolon": false, - "rules": { - "no-multiple-empty-lines": [ "error", { "max": 2, "maxEOF": 1 }], - "object-curly-spacing": ["error", "always"], - "promise/prefer-await-to-then": 0 - }, - "globals": [ - "window", - "document", - "navigator", - "jQuery", - "$" - ] - }, "dependencies": { "@webcomponents/webcomponentsjs": "^2.0.2", "clipboard": "^2.0.1", "exif-js": "^2.3.0", + "gatsby": "^2.0.0-beta.24", + "gatsby-image": "^2.0.0-beta.5", + "gatsby-plugin-matomo": "^0.4.1", + "gatsby-plugin-react-helmet": "^3.0.0-beta.3", + "gatsby-plugin-sass": "^2.0.0-beta.5", + "gatsby-plugin-sharp": "^2.0.0-beta.3", + "gatsby-plugin-sitemap": "^2.0.0-beta.2", + "gatsby-remark-images": "^2.0.1-beta.4", + "gatsby-remark-smartypants": "^2.0.0-beta.2", + "gatsby-source-filesystem": "^2.0.1-beta.3", + "gatsby-transformer-remark": "^2.1.1-beta.2", + "gatsby-transformer-sharp": "^2.1.1-beta.2", + "gatsby-transformer-yaml": "^2.1.1-beta.2", + "graphql": "^0.13.2", + "node-sass": "^4.9.2", "normalize-css": "^2.3.1", "normalize-opentype.css": "^0.2.4", "qrious": "^4.0.2", - "simple-jekyll-search": "^1.7.0", + "react": "^16.4.1", + "react-dom": "^16.4.1", + "react-helmet": "^5.2.0", "time-elements": "^1.1.0", "vex-js": "^4.1.0" }, "devDependencies": { - "autoprefixer": "^9.0.0", - "babel-core": "^6.26.3", - "babel-preset-env": "^1.7.0", - "browser-sync": "^2.24.5", - "chalk": "^2.4.1", - "concurrent-transform": "^1.0.0", - "critical": "^1.3.3", - "cssnano": "^4.0.0", - "del": "^3.0.0", - "fs": ">=0.0.2", - "gulp": "^4.0.0", - "gulp-awspublish": "^3.3.3", - "gulp-awspublish-router": "^0.1.5", - "gulp-cli": "^2.0.0", - "gulp-header": "^2.0.5", - "gulp-htmlmin": "^4.0.0", - "gulp-if": "^2.0.2", - "gulp-imagemin": "^4.1.0", - "gulp-include": "^2.3.1", - "gulp-load-plugins": "^1.5.0", - "gulp-postcss": "^7.0.1", - "gulp-rename": "^1.3.0", - "gulp-replace": "^1.0.0", - "gulp-rev": "^8.1.1", - "gulp-rev-replace": "^0.4.4", - "gulp-sourcemaps": "^2.6.4", - "gulp-stylus": "^2.7.0", - "gulp-svg-sprite": "^1.4.0", - "gulp-uglify": "^3.0.0", - "js-yaml": "^3.12.0", - "request": "^2.87.0", - "uglify-es": "^3.3.9", - "xo": "^0.21.1", - "yargs": "^12.0.1" + "babel-eslint": "^8.2.5", + "eslint": "^5.1.0", + "eslint-config-prettier": "^2.9.0", + "eslint-loader": "^2.0.0", + "eslint-plugin-graphql": "^2.1.1", + "eslint-plugin-prettier": "^2.6.2", + "eslint-plugin-react": "^7.10.0", + "prettier": "^1.13.7", + "prettier-stylelint": "^0.4.2", + "stylelint": "^9.2.1", + "stylelint-config-css-modules": "^1.2.0", + "stylelint-config-standard": "^18.2.0" }, "engines": { - "node": ">=8.0.0" + "node": "^10.0.0" }, "repository": { "type": "git", - "url": "https://github.com/kremalicious/kremalicious3.git" + "url": "https://github.com/kremalicious/blog.git" } } diff --git a/scripts/deploy.sh b/scripts/deploy.sh new file mode 100755 index 00000000..d2d22005 --- /dev/null +++ b/scripts/deploy.sh @@ -0,0 +1,44 @@ +#!/usr/bin/env bash +# +# required environment variables: +# AWS_ACCESS_KEY_ID +# AWS_SECRET_ACCESS_KEY +# AWS_DEFAULT_REGION +AWS_S3_BUCKET="kremalicious.com" +AWS_S3_BUCKET_BETA="beta.kremalicious.com" +# +set -e; + +function s3sync { + aws s3 sync ./public s3://"$1" --exclude "*.html" --exclude "*.js" --cache-control max-age=31536000,public --delete --acl public-read + + aws s3 sync ./public s3://"$1" --exclude "*" --include "*.html" --include "*.js" --cache-control max-age=0,no-cache,no-store,must-revalidate --delete --acl public-read +} + +## +## check for pull request against master +## +if [ "$TRAVIS_PULL_REQUEST" != "false" ] && [ "$TRAVIS_BRANCH" == "master" ]; then + + s3sync $AWS_S3_BUCKET_BETA + +## +## check for master push which is no pull request +## +elif [ "$TRAVIS_BRANCH" == "master" ] && [ "$TRAVIS_PULL_REQUEST" == "false" ] || [ "$TRAVIS" != true ]; then + + s3sync $AWS_S3_BUCKET + + echo "---------------------------------------------" + echo " ✓ done deployment " + echo "---------------------------------------------" + + exit; + +else + + echo "---------------------------------------------" + echo " nothing to deploy " + echo "---------------------------------------------" + +fi diff --git a/_src/favicon.ico b/static/favicon.ico similarity index 100% rename from _src/favicon.ico rename to static/favicon.ico diff --git a/_src/robots.txt b/static/robots.txt similarity index 100% rename from _src/robots.txt rename to static/robots.txt From 2ca0182a405dcb60a1158dba853ae641fa7ad9cf Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 17 Jul 2018 23:26:36 +0200 Subject: [PATCH 002/100] post metadata cleanup --- .prettierignore | 1 + content/pages/404.md | 13 - content/pages/styleguide.md | 778 ------------------ content/posts/2005-07-26-beaucarnea-leafs.md | 4 +- content/posts/2005-08-02-snail-on-a-leaf.md | 4 +- content/posts/2006-07-23-electricity.md | 4 +- content/posts/2006-07-23-floating-sky.md | 4 +- content/posts/2006-08-21-new-berlin-bridge.md | 4 +- content/posts/2006-09-16-wooden-windmill.md | 4 +- .../posts/2006-10-22-german-chancellery.md | 4 +- content/posts/2007-02-10-macbook-abstract.md | 4 +- ...-adjustment-tool-guide-for-aperture-152.md | 2 +- ...canon-canoscan-lide-500f-for-intel-macs.md | 14 +- ...s-on-a-mac-for-htaccess-protected-sites.md | 2 +- .../2008-03-30-launch-of-kremaliciouscom.md | 2 +- content/posts/2008-03-31-love-the-parallax.md | 4 +- ...-web-design-tips-from-leonardo-da-vinci.md | 2 +- .../posts/2008-04-04-aperture-file-types.md | 12 +- ...4-london-police-afraid-of-photographers.md | 4 +- ...guide-to-icons-how-to-smashing-magazine.md | 2 +- ...4-05-first-principles-for-choosing-type.md | 2 +- ...announced-various-photographers-awarded.md | 4 +- ...ing-the-image-icons-in-mac-os-x-leopard.md | 14 +- ...2008-04-09-measuring-the-color-of-light.md | 2 +- ...0-the-story-behind-the-pulitzer-picture.md | 2 +- ...8-04-11-photographers-strike-back-in-uk.md | 4 +- ...ion-helper-for-apples-aperture-released.md | 4 +- ...kit-team-introduced-css-based-gradients.md | 4 +- ...lever-text-effects-with-css-text-shadow.md | 126 ++- ...4-22-apple-releases-sdk-for-aperture-21.md | 4 +- ...someness-from-the-webkit-team-css-masks.md | 4 +- ...anoscan-lide-500f-with-mac-os-x-leopard.md | 16 +- ...can-images-directly-into-apple-aperture.md | 12 +- ...7-high-quality-watermarks-with-aperture.md | 52 +- ...first-available-aperture-editing-plugin.md | 4 +- ...-the-15-best-new-features-of-aperture-2.md | 34 +- ...s-beautiful-indiana-jones-desktop-icons.md | 6 +- ...tographic-software-to-work-with-leopard.md | 2 +- ...perture-adjustment-plugins-have-arrived.md | 30 +- ...eases-fisheye-hemi-plug-in-for-aperture.md | 4 +- ...05-21-awesome-parallax-optical-illusion.md | 4 +- ...-css-parallax-effect-12-creative-usages.md | 72 +- ...ew-all-in-one-aperture-plug-in-released.md | 4 +- content/posts/2008-06-01-chives.md | 6 +- .../2008-06-02-tweet-im-on-twitter-now.md | 4 +- ...and-the-history-of-the-first-photograph.md | 13 +- ...3-niepces-camera-obscura-wallpaper-pack.md | 6 +- .../2008-06-04-helvetica-typewriter-keys.md | 8 +- .../2008-06-11-safari-4-developer-preview.md | 12 +- ...tip-borders-titles-plug-in-for-aperture.md | 6 +- ...mac-file-server-and-time-machine-volume.md | 95 ++- ...-is-edit-for-aperture-now-updated-to-12.md | 4 +- ...25-new-canon-stuff-xs-eos-1000-430ex-ii.md | 6 +- content/posts/2008-06-30-stone-head.md | 4 +- ...ack-to-normal-on-kremaliciouscom-almost.md | 4 +- ...8-new-aperture-plug-ins-jade-and-ptlens.md | 8 +- .../2008-07-11-enjoy-kremaliciousiphone.md | 6 +- ...e-plug-in-nik-announces-silver-efex-pro.md | 6 +- ...s-25-get-rid-of-that-sluggish-dashboard.md | 4 +- content/posts/2008-07-23-leaf-life.md | 4 +- ...ps-for-journalists-reporting-from-china.md | 4 +- ...reate-a-mobile-encrypted-aperture-vault.md | 12 +- ...ja-finally-available-for-apple-aperture.md | 4 +- ...8-08-22-the-kremalicious-marsedit-style.md | 8 +- content/posts/2008-08-26-icy-box-icons.md | 8 +- ...rchitect-and-facade-theming-for-leopard.md | 8 +- ...-08-28-canon-eos-50d-new-lens-announced.md | 8 +- ...1-a-new-browser-is-coming-google-chrome.md | 6 +- content/posts/2008-09-23-a-long-time-ago.md | 4 +- ...9-23-futurama-mars-university-wallpaper.md | 4 +- content/posts/2008-10-23-coffee-cup-icon.md | 6 +- ...most-incredible-coffee-icons-on-the-web.md | 56 +- ...e-guide-to-watermarks-in-apple-aperture.md | 14 +- ...a-custom-gravatar-image-in-wordpress-27.md | 6 +- ...yling-author-comments-with-wordpress-27.md | 4 +- .../posts/2009-01-05-the-mac-in-futurama.md | 173 +--- content/posts/2009-02-01-portal-thingy.md | 16 +- content/posts/2009-02-17-out-of-whale-oil.md | 10 +- ...imate-coda-wordpress-share-link-bonanza.md | 20 +- content/posts/2009-06-04-twitter-crisp.md | 6 +- content/posts/2009-06-24-adiumeetie.md | 12 +- content/posts/2009-09-05-delibar.md | 6 +- .../2009-12-17-wordpress-post-thumbnails.md | 16 +- content/posts/2010-02-04-ipixelpad.md | 8 +- content/posts/2010-03-27-office-desk.md | 4 +- content/posts/2010-07-03-momcorp.md | 8 +- content/posts/2010-07-18-typeface-condoms.md | 4 +- content/posts/2010-08-07-bonsai.md | 4 +- content/posts/2010-09-01-gdr-helvetica.md | 4 +- content/posts/2010-12-11-iphone-coasters.md | 4 +- ...29-basically-the-monolith-is-on-my-desk.md | 4 +- ...29-free-monkey-breath-not-soylent-green.md | 4 +- content/posts/2011-01-08-enjoying-paper.md | 4 +- .../posts/2011-01-08-glowing-star-inside.md | 4 +- .../posts/2011-01-18-historic-flood-levels.md | 4 +- .../posts/2011-10-11-broken-nexus-s-screen.md | 4 +- content/posts/2011-12-15-badged.md | 6 +- content/posts/2012-02-26-mk-v2.md | 24 +- content/posts/2012-03-04-relaxing-cat.md | 4 +- content/posts/2012-04-03-blaue-turme.md | 4 +- content/posts/2012-04-03-skeletor.md | 4 +- .../posts/2012-04-03-train-station-leipzig.md | 4 +- .../posts/2012-04-04-android-tab-conundrum.md | 21 +- .../posts/2012-04-05-current-sushi-status.md | 4 +- content/posts/2012-04-07-buna.md | 4 +- ...012-04-07-cat-enjoying-a-good-ipad-game.md | 4 +- content/posts/2012-04-07-ipad-porn.md | 4 +- content/posts/2012-04-07-opera.md | 4 +- .../2012-04-08-common-kitchen-decoration.md | 4 +- .../2012-04-08-graffiti-old-school-style.md | 4 +- ...2012-04-20-the-origins-of-the-blink-tag.md | 2 +- .../posts/2012-04-30-announcing-sketch2.md | 2 +- ...oropen-free-access-to-academic-research.md | 2 +- content/posts/2012-05-03-antique-chrome.md | 4 +- .../2012-05-04-world-press-photo-2012.md | 2 +- ...9-media-query-asset-downloading-results.md | 2 +- ...5-12-nielsen-vs-clark-theyre-both-wrong.md | 2 +- ...sponsive-images-solution-should-you-use.md | 2 +- .../2012-05-14-welcome-to-kremalicious2.md | 14 +- content/posts/2012-05-15-wp-icons-template.md | 14 +- content/posts/2012-05-21-why-comic-sans.md | 2 +- ...hoo-killed-flickr-and-lost-the-internet.md | 2 +- ...-and-web-standards-at-the-turning-point.md | 2 +- ...23-like-modern-heating-only-more-badass.md | 4 +- .../2012-05-26-html-for-icon-font-usage.md | 2 +- content/posts/2012-05-27-balloon.md | 4 +- ...se-move-past-apples-silly-faux-real-uis.md | 2 +- ...012-06-13-retina-icons-in-wordpress-3-4.md | 6 +- content/posts/2012-06-27-typography-window.md | 4 +- content/posts/2012-06-30-why-files-exist.md | 2 +- .../posts/2012-07-04-newton-reconsidered.md | 2 +- .../2012-07-07-what-makes-twitter-twitter.md | 2 +- ...nd-colliders-the-first-photo-on-the-web.md | 2 +- ...your-web-site-to-the-windows-8-metro-ui.md | 10 +- ...2012-07-16-using-kbd-for-fun-and-profit.md | 2 +- ...puter-generated-graphics-film-from-1963.md | 2 +- content/posts/2012-07-20-mmmmh-coffee.md | 4 +- content/posts/2012-08-07-projectpurple.md | 16 +- content/posts/2012-08-08-amazingly-early.md | 4 +- content/posts/2012-08-20-im-joining-ezeep.md | 4 +- content/posts/2012-08-25-so-much-room.md | 4 +- .../posts/2012-09-07-huge-station-is-huge.md | 4 +- content/posts/2012-09-10-subway-firefox.md | 4 +- content/posts/2012-09-12-sweet-typography.md | 4 +- content/posts/2012-09-14-bvg-dos.md | 4 +- .../posts/2012-09-26-designing-with-code.md | 2 +- content/posts/2013-02-17-castle-garden.md | 4 +- .../2013-02-17-ezeep-android-app-design.md | 2 +- content/posts/2013-02-17-ezeep-office-view.md | 2 +- content/posts/2013-05-23-ezeep-birds.md | 2 +- content/posts/2013-05-23-ezeep-origami.md | 2 +- ...nology-can-hurt-or-harm-our-inner-state.md | 2 +- .../posts/2014-03-10-just-a-normal-sunday.md | 2 +- content/posts/2014-03-15-potsdam.md | 5 +- .../posts/2014-03-17-typographic-diamond.md | 5 +- content/posts/2014-04-26-ai-weiwei-stools.md | 2 +- .../2014-06-07-airfield-reference-point.md | 2 +- ...-anton-henning-heimat-schaffen-simpsons.md | 2 +- ...9-thanks-for-the-tip-little-orange-blob.md | 2 +- ...-hindu-temple-appears-around-the-corner.md | 2 +- .../2015-04-09-most-surprising-dog-i-know.md | 2 +- ...-obligatory-it-s-summer-in-berlin-photo.md | 2 +- ...hildhood-toys-hang-painted-in-a-gallery.md | 2 +- content/posts/2015-04-25-tiny-tiny-demons.md | 2 +- ...2015-08-02-simple-tor-setup-on-mac-os-x.md | 8 +- .../posts/2015-09-13-css-app-store-badges.md | 2 +- ...udi-knows-how-to-impress-with-a-ceiling.md | 2 +- .../posts/2016-02-27-streets-of-el-raval.md | 2 +- content/posts/2016-03-02-a-storm-is-coming.md | 2 +- ...7-02-13-keith-haring-vandalizing-a-wall.md | 2 +- .../posts/2017-02-13-streets-of-el-born.md | 2 +- .../posts/2017-02-14-new-passion-facade.md | 2 +- .../posts/2017-02-16-coolhaven-rotterdam.md | 2 +- content/posts/2017-02-17-behind-the-art.md | 2 +- content/posts/2017-02-19-rotterdam-coats.md | 2 +- ...2017-02-21-david-chipperfield-staircase.md | 2 +- content/posts/2017-02-26-eu-gotham-city.md | 2 +- content/posts/2017-02-27-amsterdam-cliche.md | 2 +- .../2017-02-27-its-dark-and-i-dont-exist.md | 2 +- content/posts/2017-02-28-stedelijk-museum.md | 2 +- .../2017-02-28-temple-guardian-rijksmuseum.md | 2 +- .../2017-02-28-watching-the-night-watch.md | 2 +- .../2017-04-16-hamburgs-elbphilharmonie.md | 2 +- ...017-07-05-kapaleeshwarar-temple-chennai.md | 2 +- ...7-07-08-kochis-streetart-game-is-strong.md | 2 +- ...017-07-09-orphaned-elephant-with-friend.md | 2 +- .../posts/2017-07-10-kochis-dhobhi-ghat.md | 2 +- ...17-07-13-mumbai-hand-painted-typography.md | 2 +- ...17-07-13-obligatory-gate-of-india-photo.md | 2 +- ...pati-shivaji-maharaj-vastu-sangrahalaya.md | 2 +- .../2017-11-10-acropolis-the-erechtheum.md | 2 +- .../2017-11-10-acropolis-the-parthenon.md | 2 +- .../2017-11-10-acropolis-the-propylaea.md | 2 +- content/posts/2017-12-16-sagrada-familia.md | 2 +- content/posts/2017-12-27-sao-paulo-traffic.md | 2 +- ...-01-04-passagem-literaria-da-consolacao.md | 2 +- content/posts/2018-01-05-samba-school.md | 2 +- 197 files changed, 669 insertions(+), 1633 deletions(-) delete mode 100644 content/pages/404.md delete mode 100644 content/pages/styleguide.md diff --git a/.prettierignore b/.prettierignore index 2667b906..6cddd8e6 100644 --- a/.prettierignore +++ b/.prettierignore @@ -2,3 +2,4 @@ node_modules/ .cache/ static/ public/ +content/ diff --git a/content/pages/404.md b/content/pages/404.md deleted file mode 100644 index 2c5bc8ef..00000000 --- a/content/pages/404.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -layout: page -title: I'm sorry Dave ---- - -
- -

I'm sorry Dave,

-

I'm afraid I can't do that.

- -How about a nice search? - -[Go to homepage](/) diff --git a/content/pages/styleguide.md b/content/pages/styleguide.md deleted file mode 100644 index 27c78816..00000000 --- a/content/pages/styleguide.md +++ /dev/null @@ -1,778 +0,0 @@ ---- -layout: page - -title: Style Guide -sitemap: false ---- - -The main page title of this guide is an `h1` element. - -## Colors - -
- {% for color in site.data.colors %} -
-
- ${{ color.name }} - #{{ color.hex }} -
- {% endfor %} -
- -## Typography - -
-

Brandon Grotesque

-

FF Tisa Sans Pro

-
- - -## Sections - -The secondary header above is an `h2` element, which may be used for any form of important page-level header. Consider using an `h2` unless you need a header level of less importance, or as a sub-header to an existing `h2` element. - -### Third-Level Header - -The header above is an `h3` element, which may be used for any form of page-level header which falls below the `h2` header in a document hierarchy. - -#### Fourth-Level Header - -The header above is an `h4` element, which may be used for any form of page-level header which falls below the `h3` header in a document hierarchy. - -##### Fifth-Level Header - -The header above is an `h5` element, which may be used for any form of page-level header which falls below the `h4` header in a document hierarchy. - -###### Sixth-Level Header - -The header above is an `h6` element, which may be used for any form of page-level header which falls below the `h5` header in a document hierarchy. - - -## Structural Elements - -### Paragraphs - -All paragraphs are wrapped in `p` tags. Additionally, `p` elements can be wrapped with a `blockquote` element if the `p` element is indeed a quote. - -The British Isles is an archipelago consisting of the two large islands of Great Britain and Ireland, and many smaller surrounding islands. - -

Great Britain is the largest island of the archipelago. Ireland is the second largest island of the archipelago and lies directly to the west of Great Britain.

- -```html -

...

-``` - -### Blockquotes - -The `blockquote` element represents a section that is being quoted from another source: - -> Many forms of Government have been tried, and will be tried in this world of sin and woe. No one pretends that democracy is perfect or all-wise. Indeed, it has been said that democracy is the worst form of government except all those other forms that have been tried from time to time. -> -> --- Winston Churchill, in [a speech to the House of Commons](http://hansard.millbanksystems.com/commons/1947/nov/11/parliament-bill#column_206) (11th November 1947) - -### Horizontal Rules - -The `hr` element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book. The following extract from *Pandora's Star* by Peter F. Hamilton shows two paragraphs that precede a scene change and the paragraph that follows it: - -> Dudley was ninety-two, in his second life, and fast approaching time for another rejuvenation. Despite his body having the physical age of a standard fifty-year-old, the prospect of a long degrading campaign within academia was one he regarded with dread. For a supposedly advanced civilization, the Intersolar Commonwearth could be appallingly backward at times, not to mention cruel. -> -> *Maybe it won't be that bad*, he told himself. The lie was comforting enough to get him through the rest of the night's shift. -> -> * * * -> -> The Carlton AllLander drove Dudley home just after dawn. Like the astronomer, the vehicle was old and worn, but perfectly capable of doing its job. It had a cheap diesel engine, common enough on a semi-frontier world like Gralmond, although its drive array was a thoroughly modern photoneural processor. With its high suspension and deep-tread tyres it could plough along the dirt track to the observatory in all weather and seasons, including the metre-deep snow of Gralmond's winters. - - -## List Elements - -### Ordered Lists - -The `ol` element denotes an ordered list, and various numbering schemes are available through CSS (including 1,2,3... i,ii,iii... a,b,c... and so on). Each item requires a surrounding `li` tag, to denote individual items within the list. - -Here is an example list showing the monarchs of Great Britain and the United Kingdom: - -1. House of Stuart - 1. Anne -2. House of Hanover - 1. George I - 2. George II - 3. George III - 4. George IV - 5. William IV - 6. Victoria -3. House of Saxe-Coburg and Gotha - 1. Edward VII -4. House of Windsor - 1. George V - 2. Edward VIII - 3. George VI - 4. Elizabeth II - -### Unordered Lists - -The `ul` element denotes an unordered list (i.e. a list of loose items that don't require numbering, or a bulleted list). Again, each item requires a surrounding `li` tag, to denote individual items. - -Here is an example list showing the constituent parts of the British Isles: - -* United Kingdom of Great Britain and Northern Ireland: - * England - * Scotland - * Wales - * Northern Ireland -* Republic of Ireland -* Isle of Man -* Channel Islands: - * Bailiwick of Guernsey - * Bailiwick of Jersey - -Sometimes you may want each list item to contain block elements, typically a paragraph or two: - -* The British Isles is an archipelago consisting of the two large islands of Great Britain and Ireland, and many smaller surrounding islands. - -* Great Britain is the largest island of the archipelago. Ireland is the second largest island of the archipelago and lies directly to the west of Great Britain. - -* The full list of islands in the British Isles includes over 1,000 islands, of which 51 have an area larger than 20 km^2^. - -### Definition Lists - -The `dl` element is for another type of list called a definition list. Instead of list items, the content of a `dl` consists of `dt` (definition term) and `dd` (definition description) pairs. Though it may be called a "definition list", `dl` can apply to other scenarios where a parent/child relationship is applicable. For example, it may be used for marking up dialogues, with each `dt` naming a speaker, and each `dd` containing his or her words: - -Romeo -: Have not saints lips, and holy palmers too? - -Juliet -: Ay, pilgrim, lips that they must use in prayer. - - -## Table Elements - -Tables should be used when displaying tabular data. The `thead`, `tfoot` and `tbody` elements enable you to group rows within each table. - -If you use these elements, you must use every element. They should appear in this order: `thead`, `tfoot` and `tbody`, so that browsers can render the foot before receiving all the data. You must use these tags within the `table` element. - -Example with Team GB's London 2012 medal table: - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SportGoldSilverBronzeTotal
Athletics4116
Boxing3115
Canoe Slalom1102
Canoe Sprint1012
Cycling - Road1113
Cycling - Track7119
Diving0011
Equestrian3115
Gymnastics - Artistic0134
Hockey0011
Judo0112
Modern Pentathlon0101
Rowing4239
Sailing1405
Shooting1001
Swimming0123
Tennis1102
Taekwondo1012
Triathlon1012
Total29171965
-
- -## Media Elements - -### Image - -The `img` element represents an image: - -Example image - - -## Text Formatting Elements - -### Links and Anchors - -The `a` element is used to hyperlink text, be that to another page, a named fragment on the current page or any other location on the web. Example: - -[Go to the home page](/) or [return to the top of this page](#top). - -### Stressed Emphasis - -The `em` element is used to denote text with stressed emphasis, i.e. something you'd pronounce differently. Where italicizing is required for stylistic differentiation, the `i` element may be preferable. Example: - -You simply *must* try the negitoro maki! - -### Strong Importance - -The `strong` element is used to denote text with strong importance. Where bolding is used for stylistic differentiation, the `b` element may be preferable. Example: - -**Don't** stick nails in the electrical outlet. - -### Italicised - -The `i` element is used for text in an alternate voice or mood, or otherwise offset from the normal prose. Examples include taxonomic designations, technical terms, idiomatic phrases from another language, the name of a ship or other spans of text whose typographic presentation is typically italicised. Example: - -There is a certain je ne sais quoi in the air. - -### Emboldened - -The `b` element is used for text stylistically offset from normal prose without conveying extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typographic presentation is typically emboldened. Example: - -You enter a small room. Your sword glows brighter. A **rat** scurries past the corner wall. - -### Inline Quotes - -The `q` element is used for quoting text inline. Example showing nested quotations: - -John said, I saw Lucy at lunch, she told me Mary wants you to get some ice cream on your way home. I think I will get some at Ben and Jerry's, on Gloucester Road. - -### Abbreviations - -The `abbr` element is used for any abbreviated text, whether it be acronym, initialism, or otherwise. Generally, it's less work and useful (enough) to mark up only the first occurrence of any particular abbreviation on a page, and ignore the rest. Any text in the `title` attribute will appear when the user's mouse hovers the abbreviation (although, notably, this does not work in Internet Explorer for Windows). Example: - -Get the latest news from the [BBC](http://www.bbc.co.uk/) in Stoke and Staffs. - -### Definitions - -The `dfn` element is used to highlight the first use of a term. The `title` attribute can be used to describe the term. Example: - -Bob's canine mother and equine father sat him down and carefully explained that he was an allopolyploid organism. - -### Citations - -The `cite` element is used to represent the title of a work (e.g. a book, essay, poem, song, film, TV show, sculpture, painting, musical, exhibition, etc.). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing. Example: - -Universal Declaration of Human Rights, United Nations, December 1948. Adopted by General Assembly resolution 217 A (III). - -### Marked or Highlighted Text - -The `mark` element is used to represent a run of text marked or highlighted for reference purposes. When used in a quotation it indicates a highlight not originally present but added to bring the reader's attention to that part of the text. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its relevance to the user's current activity. Example: - -I also have some ==kitten==s who are visiting me these days. They're really cute. I think they like my garden! Maybe I should adopt a ==kitten==. - -### Edits - -The `del` element is used to represent deleted or retracted text which still must remain on the page for some reason. Meanwhile its counterpart, the `ins` element, is used to represent inserted text. Example: - -As a result, ~~Kodos~~ ++Kang++ was elected president. - -### Variables - -The `var` element is used to denote a variable in a mathematical expression or programming context, but can also be used to indicate a placeholder where the contents should be replaced with your own value. Example: - -If there are n pipes leading to the ice cream factory then I expect at *least* n flavours of ice cream to be available for purchase! - -### Superscript and Subscript Text - -The `sup` element represents a superscript and the sub element represents a `sub`. These elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation. As a guide, only use these elements if their absence^superscript would change the meaning of the content. - -Chemical formulas are written using subscripts (e.g. C~6~H~12~O~6~), but atomic isotopes are written using superscripts (e.g. ^13 C, ^131^I, and ^238^U). - -### Small Print - -The `small` element is used to represent disclaimers, caveats, legal restrictions, or copyrights (commonly referred to as 'small print'). It can also be used for attributions or satisfying licensing requirements. Example: - -Copyright (C) 1912-2012 Acme Corporation. All Rights Reserved. - -### Time - -The `time` element is used to represent either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset. Example: - -Queen Elizabeth II was proclaimed sovereign of each of the Commonwealth realms on and , after the death of her father, King George VI. - -### Keyboard Entry - -The `kbd` element is used to denote user input (typically via a keyboard, although it may also be used to represent other input methods, such as voice commands). Example: - -To take a screenshot on your Mac, press Cmd + Shift + 3. - -### Sample Output - -The `samp` element is used to represent (sample) output from a program or computing system. Useful for technology-oriented sites, not so useful otherwise. Example: - -The computer said Too much cheese in tray two but I didn't know what that meant. - -### Pre-Formatted Text - -The `pre` element represents a block of pre-formatted text, in which structure is represented by typographic conventions rather than by elements. Here's an example showing the printable characters of ASCII: - - ! " # $ % & ' ( ) * + , - . / - 0 1 2 3 4 5 6 7 8 9 : ; < = > ? - @ A B C D E F G H I J K L M N O - P Q R S T U V W X Y Z [ \ ] ^ _ - a b c d e f g h i j k l m n o p - q r s t u v w x y z { | } ~ - -### Code - -The `code` element is used to represent fragments of computer code. Useful for technology-oriented sites, not so useful otherwise. Example: - -The [`requestAnimationFrame`](https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame) method in the `window` object tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. - -### Code Blocks - -The `code` element can also be used in conjunction with the `pre` element to represent verbatim text like markup or a fragment of computer code: - -``` -function microsoftShuffle(arr) { - return arr.slice().sort(function () { - return (0.5 - Math.random()); - }); -} -``` - -You may also specify the language of a code block, so that it can be properly highlighted. Below you can find the classic *Hello world* program implemented in different languages. - - -#### JavaScript - -```js -console.log('Hello, world!'); -``` - -#### HTML - -```html -

Hello, world!

-``` - -#### CSS - -```css -.hello { font-size: 2rem; } -``` - -#### Shell - -```shell -echo 'Hello, world!' -``` - -#### Bash - -```bash -# output stuff -echo 'Hello, world!' -``` - -#### PHP - -```php - -``` - -#### C - -```c -#include -int main(int argc, char *argv[]) -{ - printf("Hello, world!\n"); - return 0; -} -``` - -#### C++ - -```cpp -#include -using namespace std; -int main() -{ - cout << "Hello, world!" << endl; - return 0; -} -``` - -#### C# - -```csharp -using System; -class Program -{ - public static void Main() - { - Console.WriteLine("Hello, world!"); - } -} -``` - -#### Clojure - -```clj -(println "Hello, world!") -``` - -#### Elixir - -```elixir -IO.puts "Hello World" -``` - -#### Erlang - -```erlang -io:format("~s~n", ["Hello, world!"]) -``` - -#### Go - -```go -package main -import "fmt" -func main() { - fmt.Println("Hello, world!") -} -``` - -#### Groovy - -```groovy -println "Hello, world!" -``` - -#### Haskell - -```hs -main = putStrLn "Hello, world!" -``` - -#### Java - -```java -public class HelloWorld { - public static void main(String[] args) { - System.out.println("Hello, world!"); - } -} -``` - -#### Lisp - -```lisp -(princ "Hello, world!") -``` - -#### Lua - -```lua -print("Hello, World!") -``` - -#### Objective-C - -```objc -#import -int main(void) -{ - printf("Hello, world!\n"); - return 0; -} -``` - -#### Perl - -```perl -print "Hello, world!"; -``` - -#### Python - -```py -print "Hello, world!" -``` - -#### R - -```r -cat('Hello, world!') -``` - -#### Ruby - -```rb -puts "Hello, world!" -``` - -#### Scala - -```scala -object HelloWorld extends App { - println("Hello, world!") -} -``` - -#### Scheme - -```scheme -(display "Hello, world!") -``` - -#### Smalltalk - -```smalltalk -Transcript show: 'Hello, world!'. -``` - -## Form Elements - -Forms can be used when you wish to collect data from users. The `fieldset` element enables you to group related fields within a form, and each one should contain a corresponding `legend`. The `label` element ensures field descriptions are associated with their corresponding form widgets. - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -## Patterns - -Design and mark-up patterns unique to this site. - -### Alerts - -
-

I'm sure those windmills will keep them cool. Interesting. No, wait, the other thing: tedious. But, like most politicians, he promised more than he could deliver. Why not indeed! We're rescuing ya.

-

Isn't it true that you have been paid for your testimony? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Oh right. I forgot about the battle. Who are those horrible orange men?

-
- -
-

I'm sure those windmills will keep them cool. Interesting. No, wait, the other thing: tedious. But, like most politicians, he promised more than he could deliver. Why not indeed! We're rescuing ya.

-

Isn't it true that you have been paid for your testimony? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Oh right. I forgot about the battle. Who are those horrible orange men?

-
- -
-

I'm sure those windmills will keep them cool. Interesting. No, wait, the other thing: tedious. But, like most politicians, he promised more than he could deliver. Why not indeed! We're rescuing ya.

-

Isn't it true that you have been paid for your testimony? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Oh right. I forgot about the battle. Who are those horrible orange men?

-
- -### Pagination - - diff --git a/content/posts/2005-07-26-beaucarnea-leafs.md b/content/posts/2005-07-26-beaucarnea-leafs.md index 6101d89c..82638020 100644 --- a/content/posts/2005-07-26-beaucarnea-leafs.md +++ b/content/posts/2005-07-26-beaucarnea-leafs.md @@ -2,11 +2,11 @@ layout: photo title: Beaucarnea leafs -image: img_1820-Version-4.jpg +image: ../media/img_1820-Version-4.jpg author: Matthias Kretschmann date: 2005-07-26 11:44:49+00:00 -wordpress_id: 1982 + categories: - photos --- diff --git a/content/posts/2005-08-02-snail-on-a-leaf.md b/content/posts/2005-08-02-snail-on-a-leaf.md index 867a980a..eacd0ecc 100644 --- a/content/posts/2005-08-02-snail-on-a-leaf.md +++ b/content/posts/2005-08-02-snail-on-a-leaf.md @@ -2,11 +2,11 @@ layout: photo title: Snail on a leaf -image: schnecke_blatt.jpg +image: ../media/schnecke_blatt.jpg author: Matthias Kretschmann date: 2005-08-02 11:39:04+00:00 -wordpress_id: 1973 + categories: - photos --- diff --git a/content/posts/2006-07-23-electricity.md b/content/posts/2006-07-23-electricity.md index 87f0fb1e..d9fb0e45 100644 --- a/content/posts/2006-07-23-electricity.md +++ b/content/posts/2006-07-23-electricity.md @@ -2,11 +2,11 @@ layout: photo title: Electricity -image: MG_5885_2006-7-23.jpg +image: ../media/MG_5885_2006-7-23.jpg author: Matthias Kretschmann date: 2006-07-23 11:36:28+00:00 -wordpress_id: 1970 + categories: - photos --- diff --git a/content/posts/2006-07-23-floating-sky.md b/content/posts/2006-07-23-floating-sky.md index 42983731..92146b95 100644 --- a/content/posts/2006-07-23-floating-sky.md +++ b/content/posts/2006-07-23-floating-sky.md @@ -2,11 +2,11 @@ layout: photo title: Floating Sky -image: floating-sky-1.jpg +image: ../media/floating-sky-1.jpg author: Matthias Kretschmann date: 2006-07-23 11:32:14+00:00 -wordpress_id: 1964 + categories: - photos --- diff --git a/content/posts/2006-08-21-new-berlin-bridge.md b/content/posts/2006-08-21-new-berlin-bridge.md index e9fef347..e78a6430 100644 --- a/content/posts/2006-08-21-new-berlin-bridge.md +++ b/content/posts/2006-08-21-new-berlin-bridge.md @@ -2,11 +2,11 @@ layout: photo title: New Berlin Bridge -image: berliner_bruecke1-HDR-16bit.jpg +image: ../media/berliner_bruecke1-HDR-16bit.jpg author: Matthias Kretschmann date: 2006-08-21 11:22:34+00:00 -wordpress_id: 1958 + categories: - photos --- diff --git a/content/posts/2006-09-16-wooden-windmill.md b/content/posts/2006-09-16-wooden-windmill.md index 249106f0..51b33d8d 100644 --- a/content/posts/2006-09-16-wooden-windmill.md +++ b/content/posts/2006-09-16-wooden-windmill.md @@ -2,11 +2,11 @@ layout: photo title: Wooden Windmill -image: muehle_suhlendorf_HDR_Tonemapped_16bit.jpg +image: ../media/muehle_suhlendorf_HDR_Tonemapped_16bit.jpg author: Matthias Kretschmann date: 2006-09-16 11:47:16+00:00 -wordpress_id: 1985 + categories: - photos --- diff --git a/content/posts/2006-10-22-german-chancellery.md b/content/posts/2006-10-22-german-chancellery.md index 940a5991..c496e720 100644 --- a/content/posts/2006-10-22-german-chancellery.md +++ b/content/posts/2006-10-22-german-chancellery.md @@ -2,11 +2,11 @@ layout: photo title: German Chancellery -image: bundeskanzleramt_01_HDR_tonemapped_16bit-Version-2.jpg +image: ../media/bundeskanzleramt_01_HDR_tonemapped_16bit-Version-2.jpg author: Matthias Kretschmann date: 2006-10-22 11:43:00+00:00 -wordpress_id: 1979 + categories: - photos --- diff --git a/content/posts/2007-02-10-macbook-abstract.md b/content/posts/2007-02-10-macbook-abstract.md index 4b1c13c4..91438282 100644 --- a/content/posts/2007-02-10-macbook-abstract.md +++ b/content/posts/2007-02-10-macbook-abstract.md @@ -2,11 +2,11 @@ layout: photo title: MacBook abstract -image: MG_9313_2007-02-10.jpg +image: ../media/MG_9313_2007-02-10.jpg author: Matthias Kretschmann date: 2007-02-10 12:34:39+00:00 -wordpress_id: 1967 + categories: - photos --- diff --git a/content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md b/content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md index 4b1d17df..20d46ac8 100644 --- a/content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md +++ b/content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md @@ -5,7 +5,7 @@ title: Adjustment Tool Guide for Aperture 1.5.2 author: Matthias Kretschmann date: 2007-03-01 20:50:32+00:00 -wordpress_id: 1562 + categories: - photography tags: diff --git a/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md b/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md index f11a8734..5b5509ba 100644 --- a/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md +++ b/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md @@ -3,13 +3,12 @@ layout: post title: Finally... a universal scanner driver for the Canon CanoScan LiDE 500F for Intel Macs author: Matthias Kretschmann date: 2007-06-11 18:44:28+00:00 -wordpress_id: 1563 + category: photography tags: - tutorial - osx - macos -published: true redirect_from: - /2007/06/finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs/ @@ -24,25 +23,22 @@ 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... - [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) After choosing the scanner in the dropdown-menu and clicking on "Drivers & Software" you will come to a popup-window where you can find the driver called "LiDE 500F Scanner Driver Ver. 11.2.4.0X (Mac OS X)" in the middle of the site: -![image](/media/canon1.png) +![image](../media/canon1.png) And after installing (and rebooting the system) you can use the scanner with Photoshop CS3 on Intel-Macs. The scanner appears in Photoshop under File > Import > CanoScan LiDE 500f. -![image](/media/canon2.png) +![image](../media/canon2.png) -![image](/media/canon3.png)And don't forget to take a look in the preferences-dialog in the scan-window to set your color-management under the tab "Color Settings" +![image](../media/canon3.png)And don't forget to take a look in the preferences-dialog in the scan-window to set your color-management under the tab "Color Settings" -![image](/media/canon4.png)Another important setting is enabling 16bit per channel scanning under the tab "Scan". +![image](../media/canon4.png)Another important setting is enabling 16bit per channel scanning under the tab "Scan". The only problem that remains is that Photoshop really uses 50% of my CPU-Power (2GHz Intel Core2Duo) just when the scan-window is open. But now after six months of waiting i can finally scan my analog photography in acceptable quality. Thanks to Canon for nothing! diff --git a/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md b/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md index 02dd9bdc..13c58296 100644 --- a/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md +++ b/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md @@ -5,7 +5,7 @@ title: How to quickly generate encrypted .htpasswd passwords author: Matthias Kretschmann date: 2008-02-26 23:24:17+00:00 -wordpress_id: 12 + category: design tags: - tutorial diff --git a/content/posts/2008-03-30-launch-of-kremaliciouscom.md b/content/posts/2008-03-30-launch-of-kremaliciouscom.md index 734b7bc2..f76cf4c0 100644 --- a/content/posts/2008-03-30-launch-of-kremaliciouscom.md +++ b/content/posts/2008-03-30-launch-of-kremaliciouscom.md @@ -5,7 +5,7 @@ title: Launch of kremalicious.com author: Matthias Kretschmann date: 2008-03-30 19:24:21+00:00 -wordpress_id: 14 + categories: - personal tags: diff --git a/content/posts/2008-03-31-love-the-parallax.md b/content/posts/2008-03-31-love-the-parallax.md index 8a572513..23c6ff7d 100644 --- a/content/posts/2008-03-31-love-the-parallax.md +++ b/content/posts/2008-03-31-love-the-parallax.md @@ -5,12 +5,12 @@ title: Love the parallax author: Matthias Kretschmann date: 2008-03-31 20:54:45+00:00 -wordpress_id: 15 + categories: - design --- -![parallax](/media/parallax.png)If you resize your browser window while you are browsing this website you can see the black polaroids in my header fly and move at different speed on three layers. Pretty cool, huh? +![parallax](../media/parallax.png)If you resize your browser window while you are browsing this website you can see the black polaroids in my header fly and move at different speed on three layers. Pretty cool, huh? I implemented the header effect of those flying black polaroids on kremalicious.com following the original idea by the folks of [clearleft](http://clearleft.com/) on [their silverback teaser page](http://www.silverbackapp.com/) diff --git a/content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md b/content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md index c3031f91..82217729 100644 --- a/content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md +++ b/content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md @@ -6,7 +6,7 @@ linkurl: http://designpepper.com/blog/6-web-design-tips-from-leonardo-da-vinci author: Matthias Kretschmann date: 2008-04-04 18:43:05+00:00 -wordpress_id: 24 + categories: - design --- diff --git a/content/posts/2008-04-04-aperture-file-types.md b/content/posts/2008-04-04-aperture-file-types.md index a9c0a845..0ffd4e9c 100644 --- a/content/posts/2008-04-04-aperture-file-types.md +++ b/content/posts/2008-04-04-aperture-file-types.md @@ -1,11 +1,11 @@ --- layout: post title: Aperture File Types -image: "Teaser-Aperture-File-Types.jpg" -download: aperturefiletypes_by_kremalicious.zip +image: ../media/Teaser-Aperture-File-Types.jpg +download: ../media/aperturefiletypes_by_kremalicious.zip author: Matthias Kretschmann date: 2008-04-04T01:55:54.000Z -wordpress_id: 21 + category: goodies coinhive: true tags: @@ -19,9 +19,9 @@ redirect_from: These icons are free for your personal use and include icons for all file types Apple’s 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). - * Mac + Win + Linux + iContainer - * Leopard ready (512×512) - * custom 32px and 16px icons +- Mac + Win + Linux + iContainer +- Leopard ready (512×512) +- custom 32px and 16px icons Get them from [the goodies-page](http://www.kremalicious.com/goodies/) and have fun. diff --git a/content/posts/2008-04-04-london-police-afraid-of-photographers.md b/content/posts/2008-04-04-london-police-afraid-of-photographers.md index 4be9efe4..e1e5f484 100644 --- a/content/posts/2008-04-04-london-police-afraid-of-photographers.md +++ b/content/posts/2008-04-04-london-police-afraid-of-photographers.md @@ -5,14 +5,14 @@ title: London police afraid of photographers author: Matthias Kretschmann date: 2008-04-04 19:01:09+00:00 -wordpress_id: 25 + categories: - photography --- > Thousands of people take photos every day. What if one of them seems odd? Terrorists use surveillance to help plan attacks, taking photos and making notes about security measures like the location of CCTV cameras. If you see someone doing that, we need to know. Let experienced officers decide what action to take. -![London cops](/media/londonpolice.jpg) +![London cops](../media/londonpolice.jpg) yeah, i'm guilty. i took several photos of cctv cameras: [At Agentur Ahron](http://www.agentur-ahron.de/bild_db/details.php?image_id=552) diff --git a/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md b/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md index 946d58f6..3eab07d9 100644 --- a/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md +++ b/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md @@ -6,7 +6,7 @@ linkurl: http://www.smashingmagazine.com/2008/04/04/mac-os-x-leopard-designers-g author: Matthias Kretschmann date: 2008-04-04 10:47:23+00:00 -wordpress_id: 22 + category: design tags: - osx diff --git a/content/posts/2008-04-05-first-principles-for-choosing-type.md b/content/posts/2008-04-05-first-principles-for-choosing-type.md index 57672256..dc4b0883 100644 --- a/content/posts/2008-04-05-first-principles-for-choosing-type.md +++ b/content/posts/2008-04-05-first-principles-for-choosing-type.md @@ -6,7 +6,7 @@ linkurl: http://ilovetypography.com/2008/04/04/on-choosing-type author: Matthias Kretschmann date: 2008-04-05 14:01:51+00:00 -wordpress_id: 26 + categories: - design tags: diff --git a/content/posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md b/content/posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md index 6b211928..144e5746 100644 --- a/content/posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md +++ b/content/posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md @@ -5,12 +5,12 @@ title: Pulitzer Price Winners 2008 announced, various photographers awarded author: Matthias Kretschmann date: 2008-04-08 15:48:14+00:00 -wordpress_id: 31 + categories: - photography --- -![Pulitzer Price](/media/pulitzer.png)The Columbia University has announced the winners for 2008 of the 92nd annual Pulitzer Price. The Pulitzer Price itself is often cited as the highest honor for american journalists. Among the various categories there are two winning entries for [Breaking News Photography](http://www.pulitzer.org/year/2008/breaking-news-photography) and [Feature Photography](http://www.pulitzer.org/year/2008/feature-photography). +![Pulitzer Price](../media/pulitzer.png)The Columbia University has announced the winners for 2008 of the 92nd annual Pulitzer Price. The Pulitzer Price itself is often cited as the highest honor for american journalists. Among the various categories there are two winning entries for [Breaking News Photography](http://www.pulitzer.org/year/2008/breaking-news-photography) and [Feature Photography](http://www.pulitzer.org/year/2008/feature-photography). In the Breaking News Photography the price was won by Adrees Latif of Reuters [for his picture of the japanese videographer Kenji Nagai shot down during riots in Myanmar in 2007](http://www.pulitzer.org/year/2008/breaking-news-photography/works/). diff --git a/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md b/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md index 494c3c43..6b9bd293 100644 --- a/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md +++ b/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md @@ -5,7 +5,7 @@ title: 'HowTo: Changing the image icons in Mac OS X Leopard' author: Matthias Kretschmann date: 2008-04-09 13:13:42+00:00 -wordpress_id: 32 + category: design coinhive: true tags: @@ -15,32 +15,32 @@ tags: - icon --- -[![Aperture File Types](/media/aperturefiletypes.png)](/media/aperturefiletypes.png)After i released my [Aperture File Types icon set](http://www.kremalicious.com/goodies) many of you asked how they can really use these icons for displaying the icons of images on your Mac system. Sadly this isn't as easy as dropping them in [Candybar](http://www.panic.com/candybar) into a well for image icons cause there isn't any well for them. So using other icons as standard file type icons for images is a bit tricky. I discovered two ways of doing it, which involves overwriting resources of Preview.app and Photoshop. So before doing anything I mention in this post, you should make a backup copy of them. +[![Aperture File Types](../media/aperturefiletypes.png)](../media/aperturefiletypes.png)After i released my [Aperture File Types icon set](http://www.kremalicious.com/goodies) many of you asked how they can really use these icons for displaying the icons of images on your Mac system. Sadly this isn't as easy as dropping them in [Candybar](http://www.panic.com/candybar) into a well for image icons cause there isn't any well for them. So using other icons as standard file type icons for images is a bit tricky. I discovered two ways of doing it, which involves overwriting resources of Preview.app and Photoshop. So before doing anything I mention in this post, you should make a backup copy of them. ## Changing Preview.app icons -[![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. +[![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. And since Preview.app is used to show the icons we can find all file type icons for images in Preview.app > Contents > Resources. You get there by right clicking on Preview in your Applications folder and choosing Show Package Contents from the context menu. There you'll find icons in icns-format for bmp, dng, eps, fax, fpx, gif, icns, ico,jp2, jpeg, openexr, pdf, pict, png, pntg, ps, psd, qtif, radiance, raw, sgi, tga, tiff, xbm. You can just rename the desired icons from my icon pack in icns-format and replace them in the contents > resources of Preview.app. -![path Preview](/media/pathpreview.png) +![path Preview](../media/pathpreview.png) But, as you can see, Preview doesn’t have an unique icon for all RAW file types. Instead it uses just a generic RAW-icon named RAW.icns. -[![RAW](/media/raw.png)](/media/raw.png)So here’s what you can do: Grab your desired RAW-file icon from my icon package in icns-format. Rename it as RAW.icns. Copy it over to Preview.app > Contents > Resources and overwrite the standard icon. Making a backup copy of Preview.app before doing that is a wise thing here. +[![RAW](../media/raw.png)](../media/raw.png)So here’s what you can do: Grab your desired RAW-file icon from my icon package in icns-format. Rename it as RAW.icns. Copy it over to Preview.app > Contents > Resources and overwrite the standard icon. Making a backup copy of Preview.app before doing that is a wise thing here. The problem is that from now on every RAW-file is represented by this icon, which is ok if you just use one RAW-format. But it's a problem if you use more than one RAW format. ## Changing the file type icons of Photoshop -[![Photoshop CR2](/media/PS_CR2FileIcon.png)](/media/PS_CR2FileIcon.png)A solution to this mess is Photoshop. So this solution just works if you have Photoshop installed. Photoshop does have a unique icon for every RAW-format out there. To confirm that you can choose Adobe Photoshop as Standard Application in the Get Info window and the icon of the file should change instantly. +[![Photoshop CR2](../media/PS_CR2FileIcon.png)](../media/PS_CR2FileIcon.png)A solution to this mess is Photoshop. So this solution just works if you have Photoshop installed. Photoshop does have a unique icon for every RAW-format out there. To confirm that you can choose Adobe Photoshop as Standard Application in the Get Info window and the icon of the file should change instantly. So here's the trick: The icons from Photoshop are stored in Adobe Photoshop CS3.app > Contents > Resources. the icon e.g. for .cr2-icons is named PS_CR2FileIcon.icns. Just rename the icons in my pack in the naming scheme used in the Photoshop Resources and replace them. -![Path Photoshop](/media/pathphotoshop.png) +![Path Photoshop](../media/pathphotoshop.png) Hope this helps you although it's very tricky. But changing icons for images in Mac OS X is a bit out of my control since i don't develop Mac OS X. diff --git a/content/posts/2008-04-09-measuring-the-color-of-light.md b/content/posts/2008-04-09-measuring-the-color-of-light.md index dc3343b6..2c1f1922 100644 --- a/content/posts/2008-04-09-measuring-the-color-of-light.md +++ b/content/posts/2008-04-09-measuring-the-color-of-light.md @@ -6,7 +6,7 @@ linkurl: http://duncandavidson.com/2008/04/kelvins-and-the-color-of-light.html author: Matthias Kretschmann date: 2008-04-09 17:44:23+00:00 -wordpress_id: 33 + categories: - photography --- diff --git a/content/posts/2008-04-10-the-story-behind-the-pulitzer-picture.md b/content/posts/2008-04-10-the-story-behind-the-pulitzer-picture.md index edea869f..38d349ef 100644 --- a/content/posts/2008-04-10-the-story-behind-the-pulitzer-picture.md +++ b/content/posts/2008-04-10-the-story-behind-the-pulitzer-picture.md @@ -6,7 +6,7 @@ linkurl: http://blogs.reuters.com/photographers-blog/2008/04/07/the-story-behind author: Matthias Kretschmann date: 2008-04-10 13:16:47+00:00 -wordpress_id: 34 + categories: - photography --- diff --git a/content/posts/2008-04-11-photographers-strike-back-in-uk.md b/content/posts/2008-04-11-photographers-strike-back-in-uk.md index 907689d1..913909c0 100644 --- a/content/posts/2008-04-11-photographers-strike-back-in-uk.md +++ b/content/posts/2008-04-11-photographers-strike-back-in-uk.md @@ -6,12 +6,12 @@ linkurl: http://www.pressgazette.co.uk/node/40875 author: Matthias Kretschmann date: 2008-04-11 14:16:51+00:00 -wordpress_id: 36 + categories: - photography --- -[![London police afraid of photographers](/media/londonpolice.jpg)](/media/londonpolice.jpg)Remember [the campaign of the London police](http://www.kremalicious.com/2008/04/london-police-afraid-of-photographers/) calling all people to regard photographers as potential terrorists? +[![London police afraid of photographers](../media/londonpolice.jpg)](../media/londonpolice.jpg)Remember [the campaign of the London police](http://www.kremalicious.com/2008/04/london-police-afraid-of-photographers/) calling all people to regard photographers as potential terrorists? Now the [PressGazette reports](http://www.pressgazette.co.uk/node/40875) that diff --git a/content/posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md b/content/posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md index ecc10fb4..0faa0990 100644 --- a/content/posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md +++ b/content/posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md @@ -5,14 +5,14 @@ title: New automation helper for Apple's Aperture released author: Matthias Kretschmann date: 2008-04-14 13:51:39+00:00 -wordpress_id: 37 + category: photography coinhive: true tags: - aperture --- -![Aperture Assistent](/media/apassis.png)Panoramic photographer [Ian Wood](http://www.ianjameswood.co.uk/) has released an automation helper for Apple's Aperture called [Aperture Assistant](http://aperture-assistant.com) as a first beta version (build 49). Aperture Assistent allows you to setup and automate complex tasks for Apple's Aperture beyond the Apple delivered Automator actions in Mac OS X. The setup of these workflows is as easy as dragging around visual flowcharts. +![Aperture Assistent](../media/apassis.png)Panoramic photographer [Ian Wood](http://www.ianjameswood.co.uk/) has released an automation helper for Apple's Aperture called [Aperture Assistant](http://aperture-assistant.com) as a first beta version (build 49). Aperture Assistent allows you to setup and automate complex tasks for Apple's Aperture beyond the Apple delivered Automator actions in Mac OS X. The setup of these workflows is as easy as dragging around visual flowcharts. Although the interface looks and feels a bit buggy (dude, it's a beta!) it looks very promising. diff --git a/content/posts/2008-04-15-webkit-team-introduced-css-based-gradients.md b/content/posts/2008-04-15-webkit-team-introduced-css-based-gradients.md index af27b5b4..a881430a 100644 --- a/content/posts/2008-04-15-webkit-team-introduced-css-based-gradients.md +++ b/content/posts/2008-04-15-webkit-team-introduced-css-based-gradients.md @@ -5,14 +5,14 @@ title: WebKit team introduces CSS-based gradients author: Matthias Kretschmann date: 2008-04-15 17:36:34+00:00 -wordpress_id: 38 + categories: - design tags: - css --- -![WebKit](/media/webkit.png)Writing right now on a longer article about text-shadow and it's implementation in WebKit, the rendering engine which powers Safari and Konqueror. But now this exciting news popped up from Surfin' Safari, the blog of the WebKit development team: +![WebKit](../media/webkit.png)Writing right now on a longer article about text-shadow and it's implementation in WebKit, the rendering engine which powers Safari and Konqueror. But now this exciting news popped up from Surfin' Safari, the blog of the WebKit development team: > WebKit now supports gradients specified in CSS. There are two types of gradients: linear gradients and radial gradients. diff --git a/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md b/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md index 721d3251..e5ee517e 100644 --- a/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md +++ b/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md @@ -4,8 +4,8 @@ layout: post title: 'Text-Shadow Exposed: Make cool and clever text effects with css text-shadow' author: Matthias Kretschmann -date: 2008-04-17 01:32:13+00:00 -wordpress_id: 39 +date: "2008-04-17 01:32:13+00:00" + category: design tags: - css @@ -17,7 +17,7 @@ redirect_from: - /2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/ --- -![CSS](/media/css.png)The aim of this article is to give you a quick introduction of a css property named text-shadow which was first included in CSS2 (but it's not implemented in all browsers yet). Nevertheless you can make some cool effects with it, which could only be done before by photoshopping text and rendering it as an image. +![CSS](../media/css.png)The aim of this article is to give you a quick introduction of a css property named text-shadow which was first included in CSS2 (but it's not implemented in all browsers yet). Nevertheless you can make some cool effects with it, which could only be done before by photoshopping text and rendering it as an image. Because it's included in Safari since version 1.1(!) Mac users should be aware of various effects done by this property. In fact, most companys and persons with mac users as their main target audience use this effect on their websites. @@ -25,30 +25,28 @@ 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 -![kremalicious navbar](/media/navbar-kremalicious.png) +![kremalicious navbar](../media/navbar-kremalicious.png) subtle glow in my navigation 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. -![text-shadow used on apple.com](/media/textshadow-apple.png) +![text-shadow used on apple.com](../media/textshadow-apple.png) text-shadow on Apple.com 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. - - ## 2. Which browsers support it? + In fact, text-shadow is not a new property since it was first defined with [CSS2 in 1998](http://www.w3.org/TR/REC-CSS2/text.html#text-shadow-props) but it was just implemented by the KHTML/WebKit-folks. But it's available in [Safari](http://www.apple.com/safari/) since version 1.1 (2003), in [Konqueror](http://www.konqueror.org/features/browser.php) since version 3.4 (I believe, not sure) and [Opera](http://www.opera.com/) 9.5. Furthermore it's also supported by [Firefox](http://www.mozilla.com/en-US/firefox/firefox.html) 3.1/3.5 and finally [Google Chrome](http://www.google.com/chrome) 2 adds full support for the text-shadow property after they had stripped this from the first version of Chrome. On the Mac platform WebKit is also used in various other programs with a browser included like [Coda](http://www.panic.com/coda/) from Panic, [CSSedit](http://www.macrabbit.com/cssedit/) from MacRabbit or [NetNewsWire](http://www.newsgator.com/NetNewsWire.aspx) from NewsGator. Also every browser which is powered by the WebKit engine is able to render the text-shadow property, like [Shiira](http://shiira.jp/en.php), [OmniWeb](http://www.omnigroup.com/applications/omniweb/) or [Epiphany](http://www.gnome.org/projects/epiphany/) which are either for Mac or Linux. @@ -57,12 +55,9 @@ But with Safari 3.1, the beta release of Opera 9.5, Firefox 3.1 and Google Chrom But wait, regarding Safari on Mac OS X there's one more (bad) thing to remember. The Mac OS X 10.5.2 update [resulted in minor changes of the WebKit text-shadow rendering](http://www.islayer.com/blog/?p=255). It seems that with this update text-shadow is finally rendered correctly as WebKit added one extra pixel to the shadow offset on 10.4.11 and 10.5.1. - - ## 3. Any chance of cross-browser compatibility? - -So the major browser Internet Explorer doesn't support it yet but just don't count on Internet Explorer. I guess they are happy with [coding their own non-standard version of CSS for IE9](http://blogs.msdn.com/ie/archive/2008/04/01/announcing-css-2012.aspx) and making shadows with those [DXImageTransform.Microsoft.Shadow-stuff](http://msdn2.microsoft.com/en-us/library/ms532985(VS.85).aspx) which in the end just [looks horrible](http://kilianvalkhof.com/2008/design/almost-cross-browser-text-shadow/). So even IE 9 won't have it included. +So the major browser Internet Explorer doesn't support it yet but just don't count on Internet Explorer. I guess they are happy with [coding their own non-standard version of CSS for IE9](http://blogs.msdn.com/ie/archive/2008/04/01/announcing-css-2012.aspx) and making shadows with those [DXImageTransform.Microsoft.Shadow-stuff]() which in the end just [looks horrible](http://kilianvalkhof.com/2008/design/almost-cross-browser-text-shadow/). So even IE 9 won't have it included. But with Firefox 3.1 including text-shadow all major browsers except Internet Explorer are now supporting it. So you can start using it all around your next projects just with a lot of other techniques which in the end aren't available in Internet Explorer. @@ -70,24 +65,22 @@ One cross-browser trick would be to use conditional tags and serve Internet Expl Now that you're aware of it's compatibility with the various browsers we can take a look at the syntax of the text-shadow property. - - ## 4. How does it work and how to use it - - When defined in a css-stylesheet the property syntax should look like this: ```css -p { text-shadow: 1px 1px 1px #000; } +p { + text-shadow: 1px 1px 1px #000; +} ``` The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow: -1. value = The X-ccordinate -2. value = The Y-coordinate -3. value = The blur radius -4. value = The color of the shadow +1. value = The X-ccordinate +2. value = The Y-coordinate +3. value = The blur radius +4. value = The color of the shadow Using positive numbers as the first two values ends up with placing the shadow to the right of the text horizontically (first value) and placing the shadow below the text vertically (second value). @@ -96,7 +89,9 @@ The third value, the blur radius, is an optional value which can be specified bu Alternatiely, for WebKit-based browsers, you can use rgba values instead of hex code colors as the fourth value. The last number stands for transparency and can be set between 0.0 and 1.0 so you can make the text-shadow more subtle: ```css -p { text-shadow: 1px 1px 1px rgba(255,255,255, .5); } +p { + text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5); +} ``` Of course the effects done by this property often depend on the colors of your text and your background, so let's take a look at what we can do with all those combinations. @@ -105,12 +100,8 @@ Of course the effects done by this property often depend on the colors of your t I've made up some examples to show you the possibilities of this css property. Every example code follows a text example which is rendered by your browser. Below that you'll find a screenshot of the described effect rendered in Safari 3.1 on Mac OS X 10.5.2 so the non-WebKit and non-Opera Internet Explorer users can see the effect. - - ## 5.1 Simple drop shadow - - With the following lines of css code you get black text on white background with a smooth black drop shadow.The shadow is placed 2 pixels right and 2 pixels below the text and has a blur radius of 3: ```css @@ -121,7 +112,7 @@ text-shadow: 2px 2px 3px #000;

I'm a text with a smooth shadow

-![image](/media/text-shadow-1.png) +![image](../media/text-shadow-1.png) Or you can make it not so smooth but also good looking by ignoring the blur radius and setting a lighter color for the shadow: @@ -133,7 +124,7 @@ text-shadow: 2px 2px #000;

I'm a text with no smooth shadow

-![image](/media/text-shadow-2.png) +![image](../media/text-shadow-2.png) Using some negative values you can make the shadow look like it's lightsource is placed below the text: @@ -147,7 +138,7 @@ text-shadow: 2px -2px 3px #000; background: #fff; text-shadow: 2px -2px 3px #000;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm a text with a smooth shadow

-![image](/media/text-shadow-3.png) +![image](../media/text-shadow-3.png) Of course you can make it more funky and horrible to read: @@ -161,7 +152,7 @@ text-shadow: 2px 2px 2px #ff3300; background: #fff; text-shadow: 2px 2px 2px #ff3300;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm funky colored text

-![image](/media/text-shadow-4.png) +![image](../media/text-shadow-4.png) ## 5.2 Apple style (engraved text on metal) @@ -177,7 +168,7 @@ text-shadow: 0px 1px 1px #fff; background: #666; text-shadow: 0px 1px 1px #fff;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:bold;padding:0.3em">I'm engraved text

-![image](/media/text-shadow-5.png) +![image](../media/text-shadow-5.png) This even works the other way around on a black background with grey text by adjusting only the color values: @@ -191,7 +182,7 @@ text-shadow: 0px 1px 0px #ccc; background: #000; text-shadow: 0px 1px 0px #ccc;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:bold;padding:0.3em">I'm engraved text on black

-![image](/media/text-shadow-6.png) +![image](../media/text-shadow-6.png) Or you can make this one which looks like the text stands out from the background: @@ -205,7 +196,7 @@ text-shadow: 0px 1px 1px #000; background: #666; text-shadow: 0px 1px 1px #000;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm on top of the background

-![image](/media/text-shadow-7.png) +![image](../media/text-shadow-7.png) ## 5.3 Make your text glow @@ -221,7 +212,7 @@ text-shadow: 1px 1px 6px #fff; background: #000; text-shadow: 1px 1px 6px #fff;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm subtle glowing text

-![image](/media/text-shadow-8.png) +![image](../media/text-shadow-8.png) You can also make the whole text blurry by using the same color for text and shadow with no offset: @@ -235,7 +226,7 @@ text-shadow: 0px 0px 3px #fff; background: #666; text-shadow: 0px 0px 3px #fff;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm also glowing but more blurry

-![image](/media/text-shadow-9.png) +![image](../media/text-shadow-9.png) We can make it quite mysterious by using the same color for text and background and make the text just visible through text-shadow. Remember that the same color for text and background can be bad for usability...: @@ -249,7 +240,7 @@ text-shadow: 1px 1px 4px #fff; background: #000; text-shadow: 1px 1px 4px #fff;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm pretty mysterious looking text

-![image](/media/text-shadow-10.png) +![image](../media/text-shadow-10.png) Or the other way around to make it look light and... milky: @@ -263,7 +254,7 @@ text-shadow: 1px 1px 4px#000; background: #fff; text-shadow: 1px 1px 4px#000;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">I'm pretty milky looking text

-![image](/media/text-shadow-11.png) +![image](../media/text-shadow-11.png) ## 5.4 Duplicate your text @@ -279,7 +270,7 @@ text-shadow: 0px 20px #000; background: #fff; text-shadow: 0px 20px #000;text-align:center;font-size:24px;font-family:Helvetica,sans-serif;font-weight:300;padding:0.3em">Which line is text, which is shadow?

-![image](/media/text-shadow-13.png) +![image](../media/text-shadow-13.png) ## 5.5 Multiple shadows @@ -288,22 +279,23 @@ Sadly Safari 3 isn't able to render more than one shadow on one element. It just ```css color: #000; background: #000; -text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20; +text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px + #f80, 2px -18px 18px #f20; ```

Isn't this awesome?

-![image](/media/text-shadow-12.png) +![image](../media/text-shadow-12.png) ## 6. Hack: Avoid jagged light-on-dark text rendering in Safari -[![sub-pixel rendering](/media/text-shadow-15.png)](/media/text-shadow-hack.png) +[![sub-pixel rendering](../media/text-shadow-15.png)](../media/text-shadow-hack.png) More than a hack than an effect but it addresses the poor light-on-dark text rendering in Safari. This is caused by the [sub-pixel rendering](http://en.wikipedia.org/wiki/Subpixel_rendering) of OS X's Quartz 2D layer as a part of the Core Graphics framework. Also Safari 3.1 on Windows uses sub pixel rendering instead of plain anti-aliasing. -[![anti-alias rendering through text-shadow](/media/text-shadow-14.png)](/media/text-shadow-hack.png) +[![anti-alias rendering through text-shadow](../media/text-shadow-14.png)](../media/text-shadow-hack.png) In most situations this improves the legibility and smoothness of all 2D-text rendered throughout the Mac OS X interface which makes everything look so gorgeous. But it has some [rough problems with light text on dark backgrounds in Safari](http://equinox-of-insanity.com/2007/08/osx-text-rendering/) This problem doesn't exist when using anti-aliasing. @@ -324,29 +316,29 @@ But fear not. Rogie King already came up with a solution for this which you can ## 7. More articles and resources - * [Description of the text-shadow property](http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows) in: [CSS3 W3C Candidate Recommendation from 14 May 2003](http://www.w3.org/TR/2003/CR-css3-text-20030514) -text-shadow in-depth +- [Description of the text-shadow property](http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows) in: [CSS3 W3C Candidate Recommendation from 14 May 2003](http://www.w3.org/TR/2003/CR-css3-text-20030514) + text-shadow in-depth - * [Cross-browser text-shadow by Kilian Valkhof](http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/) -Nice article about trying to make text-shadow cross-browser compatible +- [Cross-browser text-shadow by Kilian Valkhof](http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/) + Nice article about trying to make text-shadow cross-browser compatible - * [CSS Drop Shadows on Design Meme](http://www.designmeme.com/articles/dropshadows/) -An easy css-hack for cross-browser compatibilty (but without a blur radius) +- [CSS Drop Shadows on Design Meme](http://www.designmeme.com/articles/dropshadows/) + An easy css-hack for cross-browser compatibilty (but without a blur radius) - * [text-shadow hack for firefox on klog](http://verens.com/archives/2005/02/28/text-shadow/) -Another hack just for Gecko-based browsers by utilizing javascript +- [text-shadow hack for firefox on klog](http://verens.com/archives/2005/02/28/text-shadow/) + Another hack just for Gecko-based browsers by utilizing javascript - * [Firefox plugin "A Text Shadow"](http://piro.sakura.ne.jp/xul/_textshadow.html.en) -A xpi-plugin providing support for text-shadow in Firefox written by Shimoda Hiroshi +- [Firefox plugin "A Text Shadow"](http://piro.sakura.ne.jp/xul/_textshadow.html.en) + A xpi-plugin providing support for text-shadow in Firefox written by Shimoda Hiroshi - * [Animating css text-shadow with javascript](http://maettig.com/code/css/text-shadow.html) -The author animates multiple text-shadows with javascript, really incredible. Also various nice examples on this page. +- [Animating css text-shadow with javascript](http://maettig.com/code/css/text-shadow.html) + The author animates multiple text-shadows with javascript, really incredible. Also various nice examples on this page. - * [Text-Shadow in Safari 1.1](http://whatdoiknow.org/archives/001305.shtml) -Propably the oldest text-shadow demo originally made for Safari 1.1 +- [Text-Shadow in Safari 1.1](http://whatdoiknow.org/archives/001305.shtml) + Propably the oldest text-shadow demo originally made for Safari 1.1 - * [10.5.2 brings WebKit text-shadow rendering changes](http://www.islayer.com/blog/?p=255) -Blog entry on islayer.com about different text-shadow rendering across different Mac OS X versions +- [10.5.2 brings WebKit text-shadow rendering changes](http://www.islayer.com/blog/?p=255) + Blog entry on islayer.com about different text-shadow rendering across different Mac OS X versions - * [CSS3 preview on css3.info](http://www.css3.info/preview/) -"Everything you need to know about CSS3" - get excited before CSS3 becomes final +- [CSS3 preview on css3.info](http://www.css3.info/preview/) + "Everything you need to know about CSS3" - get excited before CSS3 becomes final diff --git a/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md b/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md index 5f2083d0..7fafaf21 100644 --- a/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md +++ b/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md @@ -5,13 +5,13 @@ title: Apple releases plugin-SDK for Aperture 2.1 author: Matthias Kretschmann date: 2008-04-22 05:58:41+00:00 -wordpress_id: 42 + categories: - photography tags: - aperture --- -![Aperture](/media/aperture97.png)Just right after [Tiffen and Digital Film Tools announced](http://www.kremalicious.com/2008/04/first-aperture-adjustment-plugins-have-arrived/) their new image editing plugins for Aperture 2.1 Apple has released the Software Development Kit (SDK) for coding Aperture 2.1 plugins. It's available [from Apple's Developer Connection](https://connect.apple.com/cgi-bin/WebObjects/MemberSite.woa/wa/getSoftware?bundleID=20044) for registered members (registering is free). You can grab the Aperture 2.1 plugin-SDK (3D9) as a 595KB download from there and start coding. If you want to know what exactly you can do with it as a programmer you should [read those lines from Apple](http://developer.apple.com/appleapplications/aperturesdk.html). +![Aperture](../media/aperture97.png)Just right after [Tiffen and Digital Film Tools announced](http://www.kremalicious.com/2008/04/first-aperture-adjustment-plugins-have-arrived/) their new image editing plugins for Aperture 2.1 Apple has released the Software Development Kit (SDK) for coding Aperture 2.1 plugins. It's available [from Apple's Developer Connection](https://connect.apple.com/cgi-bin/WebObjects/MemberSite.woa/wa/getSoftware?bundleID=20044) for registered members (registering is free). You can grab the Aperture 2.1 plugin-SDK (3D9) as a 595KB download from there and start coding. If you want to know what exactly you can do with it as a programmer you should [read those lines from Apple](http://developer.apple.com/appleapplications/aperturesdk.html). So it should be just a matter of time before we see another bunch of plugins popping out. diff --git a/content/posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md b/content/posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md index bc8eeadc..fba976fb 100644 --- a/content/posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md +++ b/content/posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md @@ -5,7 +5,7 @@ title: 'More awesomeness from the WebKit team: CSS Masks' author: Matthias Kretschmann date: 2008-04-28 12:53:18+00:00 -wordpress_id: 44 + categories: - design @@ -13,7 +13,7 @@ tags: - css --- -![WebKit](/media/webkit.png)They won't stop with their cutting edge love. After having [text-shadow](http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/) implemented since many years and having a bunch of other cool stuff implemented like CSS gradients or CSS box-shadow the WebKit team freshly announced a new cool feature: CSS alpha masks. +![WebKit](../media/webkit.png)They won't stop with their cutting edge love. After having [text-shadow](http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/) implemented since many years and having a bunch of other cool stuff implemented like CSS gradients or CSS box-shadow the WebKit team freshly announced a new cool feature: CSS alpha masks. From the Surfin' Safari Blog: diff --git a/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md b/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md index 5208d24d..31f6207f 100644 --- a/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md +++ b/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md @@ -6,7 +6,7 @@ author: Matthias Kretschmann date: 2008-05-04 16:04:48+00:00 -wordpress_id: 45 + category: photography coinhive: true tags: @@ -15,7 +15,7 @@ tags: - macos --- -![Canon CanoScan LiDE 500F](/media/canoscanlide500f.jpg)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. +![Canon CanoScan LiDE 500F](../media/canoscanlide500f.jpg)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 @@ -28,7 +28,7 @@ The changelog says: So this sounds just right. You can download the new universal scanner driver from [Canon USA](http://www.usa.canon.com/consumer/controller?act=ModelInfoAct&tabact=SupportDetailTabAct&fcategoryid=235&modelid=11011#DownloadDetailAct) or [Canon Asia](http://support-asia.canon-asia.com/contents/ASIA/EN/0900321901.html). Following these links takes you right to the driver download page for this scanner. -[![Driver package contents](/media/canondrivercontents.png)](/media/canondrivercontents.png)You will get a file named lide500fosx11250en.dmg in your downloads folder. Just mount it and double click the package installer inside of the image. If you have a previous version of the driver installed you should remove all parts of it from the system and make a restart to avoid any problems. You can follow my screenshot on the right which shows the contents of the installer package to find all components on your system. +[![Driver package contents](../media/canondrivercontents.png)](../media/canondrivercontents.png)You will get a file named lide500fosx11250en.dmg in your downloads folder. Just mount it and double click the package installer inside of the image. If you have a previous version of the driver installed you should remove all parts of it from the system and make a restart to avoid any problems. You can follow my screenshot on the right which shows the contents of the installer package to find all components on your system. After the installation is finished you have to restart your Mac (very Mac-unlike) because the package installed a new Kernel extention. @@ -40,22 +40,22 @@ After a restart you should be able to use the scanner as a TWAIN device all over ## Preview / Image Capture -[![Scan window Preview](/media/scanwindow_preview.png)](/media/scanwindow_preview.png)Leopard included a new version of Preview, the pdf and image-viewing application by Apple and also a new version of Image Capture. To use it with your scanner just plug in the scanner, open Preview and choose File > Import Image or just open the Image Capture application. A new scan window should open doing an automatic overview scan. In the scan window you have some minor options like resolution, scaling etc. You can even make simple but powerful image corrections down at the bottom (set it to manual). +[![Scan window Preview](../media/scanwindow_preview.png)](../media/scanwindow_preview.png)Leopard included a new version of Preview, the pdf and image-viewing application by Apple and also a new version of Image Capture. To use it with your scanner just plug in the scanner, open Preview and choose File > Import Image or just open the Image Capture application. A new scan window should open doing an automatic overview scan. In the scan window you have some minor options like resolution, scaling etc. You can even make simple but powerful image corrections down at the bottom (set it to manual). But the best thing with the new Image Capture is the feature of setting the bit depth of the scanner to 16 bits. This was just possible before through the Canon software ScanGear in Photoshop. ## Scanning right into Apple Aperture? -[![Aperture Scanning](/media/aperturescan.png)](/media/aperturescan.png) Wouldn't that be great? Although the scanner is shown as a source in the import dialogue you can't import images with it directly from Aperture. Maybe someone will code a generic scanning plugin for Aperture like VueScan for Aperture or something like that. But I guess this is something just Canon is able to do that and they won't. +[![Aperture Scanning](../media/aperturescan.png)](../media/aperturescan.png) Wouldn't that be great? Although the scanner is shown as a source in the import dialogue you can't import images with it directly from Aperture. Maybe someone will code a generic scanning plugin for Aperture like VueScan for Aperture or something like that. But I guess this is something just Canon is able to do that and they won't. But using Preview/Image Capture and Automator you can bypass this limitation. If you want to know how you can do that have a look at my article [Scan images directly into Apple Aperture](http://www.kremalicious.com/2008/05/scan-images-directly-into-apple-aperture/). ## Adobe Photoshop CS3 -[![ScanGear Scan Window](/media/scangearwindow.png)](/media/scangearwindow.png)Just like with Creative Suite 2 you can use Photoshop to import images with your Scanner by using the Canon ScanGear software which indeed is just the scan window in Photoshop. Just chose File > Import > CanoScan LiDE 500F in Photoshop. If you have installed the driver for the first time the scan window in Photoshop defaults to Simple Mode. But if you want it simple you better chose a Preview/Image Capture workflow. So in Photoshop you should head over to Advanced Mode and check the preferences button down at the bottom first. +[![ScanGear Scan Window](../media/scangearwindow.png)](../media/scangearwindow.png)Just like with Creative Suite 2 you can use Photoshop to import images with your Scanner by using the Canon ScanGear software which indeed is just the scan window in Photoshop. Just chose File > Import > CanoScan LiDE 500F in Photoshop. If you have installed the driver for the first time the scan window in Photoshop defaults to Simple Mode. But if you want it simple you better chose a Preview/Image Capture workflow. So in Photoshop you should head over to Advanced Mode and check the preferences button down at the bottom first. -[![ScanGear Color Settings](/media/scangear_color.png)](/media/scangear_color.png)Under the Color Settings tab you should set your preferred color management options. +[![ScanGear Color Settings](../media/scangear_color.png)](../media/scangear_color.png)Under the Color Settings tab you should set your preferred color management options. Under the Scan tab you should enable 48/16 bit Output to enable scanning your images with a depth of 16 bit just like the RAW images from your dslr or digital camera. Click OK to save your preferences. @@ -63,6 +63,6 @@ Another task you should do before scanning the first time with this driver is ca Now you can set your scanning preferences and start scanning into Photoshop. Don't forget to chose Color(48Bit) in the Color Mode dropdown menu for 16 bit scanning. -![Color Mode](/media/scangear48bit.png) +![Color Mode](../media/scangear48bit.png) The advantage of this last workflow with Photoshop and ScanGear is more control over the scanner and therefore more control of the way your images will look right after the scan. If you want simplicity do it the OSX way by using Preview/Image Capture and simply automate it with Automator to serve your scanned images to your preferred application. diff --git a/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md b/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md index 0d9fbe39..d7f8732a 100644 --- a/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md +++ b/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md @@ -5,7 +5,7 @@ title: Scan images directly into Apple Aperture author: Matthias Kretschmann date: 2008-05-05 04:15:11+00:00 -wordpress_id: 46 + category: photography coinhive: true tags: @@ -15,24 +15,24 @@ tags: - macos --- -![Aperture Scanning](/media/aperturescan.png)Wouldn't that be great? Hook up your scanner, fire up Aperture, click on Import and the images coming directly from your scanner plate? Although my scanner is shown as a source in the import dialogue you can't import images with it directly from Aperture. But using Preview/Image Capture and Automator you can bypass this limitation. So here's what you can do to scan directly into Aperture in 3 simple steps. +![Aperture Scanning](../media/aperturescan.png)Wouldn't that be great? Hook up your scanner, fire up Aperture, click on Import and the images coming directly from your scanner plate? Although my scanner is shown as a source in the import dialogue you can't import images with it directly from Aperture. But using Preview/Image Capture and Automator you can bypass this limitation. So here's what you can do to scan directly into Aperture in 3 simple steps. In the Image Capture scan window you can define an automatic task which will follow the scan process. It defaults to Preview meaning that the scanned image will open as a new Preview document after the scan. But we can make the images import to Aperture after the scan just with tools which are build into Mac OS X and come with every Mac (besides Aperture). # 1. Make an Automator action -![Automator](/media/automator.png)Open up Automator and click on the photos library item. Find the Aperture action "Import Photos" and drag and drop it on the workflow field. Then you can chose your desired project or a new project for the scanned images to appear. I have a project for all new images called @Review so I chose that one as my target project. You can set a referenced import or the deletion of your source images as well. If you want to chose the desired project or any of the other preferences every time you're scanning you have to activate "Show this action when the workflow runs" in the Options of this action. +![Automator](../media/automator.png)Open up Automator and click on the photos library item. Find the Aperture action "Import Photos" and drag and drop it on the workflow field. Then you can chose your desired project or a new project for the scanned images to appear. I have a project for all new images called @Review so I chose that one as my target project. You can set a referenced import or the deletion of your source images as well. If you want to chose the desired project or any of the other preferences every time you're scanning you have to activate "Show this action when the workflow runs" in the Options of this action. To make it a bit cooler we can assign one or more keywords to our scanned images automatically. Just drag and drop the "Assign keywords to images" action and add a keyword like "Scan" or something like that. Finally we can set some usual IPTC-tags with the "Set IPTC Tags" action. In the end you should have something like this (click to zoom): -[![Aperture Import Workflow](/media/apertureimport_automator.png)](/media/apertureimport_automator.png) +[![Aperture Import Workflow](../media/apertureimport_automator.png)](../media/apertureimport_automator.png) # 2. Save it as a plug-in for Image Capture -[![Aperture Import Workflow2](/media/apertureimportplugin.png)](/media/apertureimportplugin.png)Now we're going to save the whole workflow we clicked together. But instead of saving it as a general workflow chose File > Save as Plug-in. Type in a name like "Import to Aperture" and chose Image Capture from the dropdown menu and click save. Now your workflow has become a freshly new plug-in of the Image Capture application. If you ever want to delete, edit or just backup your Image Capture Plugins you can find them in your user folder library under /Workflows/Applications/Image Capture. +[![Aperture Import Workflow2](../media/apertureimportplugin.png)](../media/apertureimportplugin.png)Now we're going to save the whole workflow we clicked together. But instead of saving it as a general workflow chose File > Save as Plug-in. Type in a name like "Import to Aperture" and chose Image Capture from the dropdown menu and click save. Now your workflow has become a freshly new plug-in of the Image Capture application. If you ever want to delete, edit or just backup your Image Capture Plugins you can find them in your user folder library under /Workflows/Applications/Image Capture. # 3. Scanning and have fun -[![Aperture Import Workflow3](/media/apertureimport_automatic.png)](/media/apertureimport_automatic.png)Plug in your scanner and open up Image Capture. A new scan window should open with your connected scanner as source. Now we have to define our freshly created plug-in as a task which will run after the image was scanned. Just chose your freshly created workflow from the Automatic Task dropdown menu and there you have it. So after you hit the scan button our freshly created workflow will run after the scan. +[![Aperture Import Workflow3](../media/apertureimport_automatic.png)](../media/apertureimport_automatic.png)Plug in your scanner and open up Image Capture. A new scan window should open with your connected scanner as source. Now we have to define our freshly created plug-in as a task which will run after the image was scanned. Just chose your freshly created workflow from the Automatic Task dropdown menu and there you have it. So after you hit the scan button our freshly created workflow will run after the scan. Just be creative with Automator. You can set up a lot of workflows for every thinkable scanning task and you can even backup your scanned images before or after importing them to Aperture by copying them into a new burn folder or make an archive from them which also could be automatically saved to a web server and so on... diff --git a/content/posts/2008-05-07-high-quality-watermarks-with-aperture.md b/content/posts/2008-05-07-high-quality-watermarks-with-aperture.md index e0019992..e6504bbe 100644 --- a/content/posts/2008-05-07-high-quality-watermarks-with-aperture.md +++ b/content/posts/2008-05-07-high-quality-watermarks-with-aperture.md @@ -3,10 +3,10 @@ layout: post title: 'HowTo: Use high-quality watermarks in your images with Aperture 2.1' author: Matthias Kretschmann -image: watermark_aperture.jpg +image: ../media/watermark_aperture.jpg date: 2008-05-07 03:27:25+00:00 -wordpress_id: 48 + categories: - photography tags: @@ -23,42 +23,40 @@ Since version 1.0 Aperture is able to render images on export with a graphic ove The steps for this magic involves 4 simple steps: - 1. Create a watermark image in Photoshop - 2. Render different sizes of the watermark image - 3. Define the watermark image inside an export preset in Aperture - 4. Make even more... - +1. Create a watermark image in Photoshop +2. Render different sizes of the watermark image +3. Define the watermark image inside an export preset in Aperture +4. Make even more... ## 1. Create a watermark image in Photoshop - Open up Photoshop and load a photo taken with your camera in full size (pixel size of course, not file size). If you have photos with different pixel sizes you should use a photo with the biggest pixel size you're going to export from your Aperture library. To illustrate the process I will use a picture taken by me. Create a new layer on top of the background layer and call it "watermark" or anything you like. -![Aperture Watermark example 1](/media/watermark_1.png) +![Aperture Watermark example 1](../media/watermark_1.png) If you want it simple you can start with the Text tool right now but I prefer to add a background so our text is always readable no matter if the photo is dark or light. With the select tool draw a rectangle on the bottom of the image. Then select the Paintbucket tool, chose a foreground color of white and click on the selection in the image so the rectangle selection is filled with white. -![Aperture Watermark example 2](/media/watermark_2.png) +![Aperture Watermark example 2](../media/watermark_2.png) Add some inner shadow by double clicking on the watermark layer and adjusting the values for inner shadow (just have a german speaking Photoshop version while writing this article but i guess you can identify the values visually): -![Aperture Watermark example 3](/media/watermark_3.png) +![Aperture Watermark example 3](../media/watermark_3.png) Adjust the Fill of the layer to 40%. This will just make the fill color transparent while the opacity of the layer styles are preserved. You should end up with something like this: -![Aperture Watermark example 4](/media/watermark_4.png) +![Aperture Watermark example 4](../media/watermark_4.png) Next select the Text tool, chose a black color in the tool preferences and click on the image. A new layer will be automatically created and you can type in the text you want to use in your watermark. For this tutorial I just used the copyright sign (opt + g) with a year and the word "Watermark". I used Helvetica Neue Ultra Light as font face. -Place the text at the bottom right and be sure to add some space to the right and to the bottom. Next set the layer mode of the text layer to "Overlay". Finally I've added a logo and set it's opacity to 80%. So now you should end up with something like this: +Place the text at the bottom right and be sure to add some space to the right and to the bottom. Next set the layer mode of the text layer to "Overlay". Finally I've added a logo and set it's opacity to 80%. So now you should end up with something like this: -![Aperture Watermark example 5](/media/watermark_5.png) +![Aperture Watermark example 5](../media/watermark_5.png) Now delete the Background layer. You should see the transparent grid. Next chose Image > Trim from the menu bar, select transparent pixels and click ok. The result should look like this: -![Aperture Watermark example 6](/media/watermark_6.png) +![Aperture Watermark example 6](../media/watermark_6.png) Although Aperture is able to render all layers even with their layer styles correctly it has some problems with text layers and their styles. So to be on the save side you should flatten the layers by selecting them all (with command + click on the name of the layers) and pressing command + e which will merge all layers into one. After this step you won't be able to edit your layers so maybe you want to save your document BEFORE this step as an editable psd template file. Be sure that the background of your canvas remains transparent. @@ -74,37 +72,27 @@ If you want to have full control and the highest quality you should repeat the a Now you can close Photoshop or let it open if you have enough RAM. - - ## 3. Define the watermark image inside an export preset - - Now we're going to make the watermark image part of an export preset inside Aperture. Open up Aperture and chose Aperture > Presets > Image Export from the menubar. In the Export Presets dialogue add a new preset by clicking on the little plus sign at the bottom left of the dialogue and give it a name: -![Aperture Watermark example 7](/media/watermark_7.png) - - +![Aperture Watermark example 7](../media/watermark_7.png) Now adjust your desired values before the "Show Watermark" part at the right. After you've finished click on the checkbox beside "Show Watermark" to activate watermarks for this export preset. For our example we will set the position of the image to Lower Right. Either drag your freshly created watermark.psd onto the drop field or chose it via Aperture's file inspector by clicking on the Choose Image button. The watermark image is automatically copied over to the Library folder of the user under /Application Support/Aperture/WatermarkImages. Just keep that in mind when you want to update your watermark images. - - As said before you can adjust the opacity of your watermark image but since we have included some different transparencies in our file we have to set it to an opacity of 1,0. Finally you can activate the "Scale watermark" checkbox if you want to use your big sized watermark image once and let Aperture scale it down for you. If you have created different sized watermark images you want to leave this deactivated and create a unique export preset for every size you want to export to. In this example we end up with those values: -![Aperture Watermark example 8](/media/watermark_8.png) - - +![Aperture Watermark example 8](../media/watermark_8.png) If you're done just click OK and select an image you want to export. Select File > Export > Versions from the menubar or press shift + command + e. In the Aperture file dialogue chose your destination and select your freshly created preset from the Export Preset dropdown menu and click OK. -![Aperture Watermark example 9](/media/watermark_9.png) +![Aperture Watermark example 9](../media/watermark_9.png) Your image is rendered in the background and you should end up with something like this. Click on it to zoom to the full sized version or open the link to the full image in a new browser window. (the full view image is scaled down with a 1024x1024px preset): -![Aperture Watermark example final](/media/watermarkexample_final.jpg) +![Aperture Watermark example final](../media/watermarkexample_final.jpg) You can also have a look at the psd file by downloading it here: @@ -116,11 +104,11 @@ Here are some quick examples by me: You can be a bit more subtle: -![Aperture Watermark example v2](/media/watermarkexample_v2.jpg) +![Aperture Watermark example v2](../media/watermarkexample_v2.jpg) Or use a subtle colorful spectrum: -![Aperture Watermark example v3](/media/watermarkexample_v3.jpg) +![Aperture Watermark example v3](../media/watermarkexample_v3.jpg) ## 4. Make even more... @@ -130,7 +118,7 @@ Just create a watermark image which has exactly the same size as your exported i And maybe you end up with something like this grunge old look just done with the watermark feature of Aperture: -![Aperture Watermark example v4](/media/watermarkexample_v4.jpg) +![Aperture Watermark example v4](../media/watermarkexample_v4.jpg) And that's it. Hope this article helped you mastering the watermark feature of Aperture. diff --git a/content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md b/content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md index 1adf131b..47b0769e 100644 --- a/content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md +++ b/content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md @@ -5,14 +5,14 @@ title: Nik ships Viveza as an Aperture editing plugin author: Matthias Kretschmann date: 2008-05-07 19:21:34+00:00 -wordpress_id: 49 + categories: - photography tags: - aperture --- -![Viveza](/media/viveza.png)Today [Nik Software](http://www.niksoftware.com) announced the availability of it's U-point-technology based editing plugin for Apple's Aperture 2.1 called [Viveza](http://www.niksoftware.com/viveza). +![Viveza](../media/viveza.png)Today [Nik Software](http://www.niksoftware.com) announced the availability of it's U-point-technology based editing plugin for Apple's Aperture 2.1 called [Viveza](http://www.niksoftware.com/viveza). 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. diff --git a/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md b/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md index 81f80152..1287be75 100644 --- a/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md +++ b/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md @@ -3,10 +3,10 @@ layout: post title: The 15 best new features of Aperture 2 author: Matthias Kretschmann -image: aperture15_7.png +image: ../media/aperture15_7.png date: 2008-05-07 19:22:49+00:00 -wordpress_id: 50 + categories: - photography tags: @@ -19,7 +19,7 @@ There are already some lists like this available on the web and they are always # 15. The "New" toolbar icon -[![New toolbar icon](/media/aperture15_1.png)](/media/aperture15_1.png) +[![New toolbar icon](../media/aperture15_1.png)](../media/aperture15_1.png) A handy dropdown icon with the most common create tasks you can do in Aperture 2. This causes Aperture 2 to have a delightful clean toolbar by default. @@ -27,31 +27,31 @@ A handy dropdown icon with the most common create tasks you can do in Aperture 2 # 14. Skimming through your projects -[![Skimming](/media/aperture15_2.png)](/media/aperture15_2.png) +[![Skimming](../media/aperture15_2.png)](../media/aperture15_2.png) The Library item has a new child item: All Photos. Clicking on it displays all your projects like the Event view known from iPhoto 08. By hovering the mouse over the key photo (which you can define for yourself too) you "skim" through the project and quickly see all images contained in this project. Perfect for visually finding that non-keyworded photo you remember you've taken it but don't know where it is. # 13. Search for adjustments -[![Search for adjustments](/media/aperture15_3.png)](/media/aperture15_3.png) +[![Search for adjustments](../media/aperture15_3.png)](../media/aperture15_3.png) With Aperture 2 you can define a search query based on the adjustments you've made to an image in your library. So you can quickly identify all your images which have the monochrome mixer applied to them or maybe all your images which have _no_ edge sharpening applied and so on. # 12. The Retouch tool -[![Retouch tool](/media/aperture15_4.png)](/media/aperture15_4.png) +[![Retouch tool](../media/aperture15_4.png)](../media/aperture15_4.png) No more fiddling around with the poor results of the spot & patch tool when you just want to remove some sensor dust from your image. The repair mode of this tool is just perfect for that kind of task. The clone mode pretty much functions the same way as the clone tool in Photoshop. You define a clone source in your image by pressing option + click in your image and then pasting that source onto the imperfection by clicking on it. # 11. Double click behavior -[![Double click behavior](/media/aperture15_5.png)](/media/aperture15_5.png) +[![Double click behavior](../media/aperture15_5.png)](../media/aperture15_5.png) The behavior of double clicking on images can now be set in Aperture's preferences. Either you can make Aperture show or hide the Viewer or set it to enter full screen mode with the double clicked image in focus. # 10. Book Layout -[![Book layout](/media/aperture15_6.png)](/media/aperture15_6.png) +[![Book layout](../media/aperture15_6.png)](../media/aperture15_6.png) The photobook layout capabilities of Aperture became much powerful with version 2. Now you can create your own book templates where you have much freedom for lay-outing it. In fact you have a powerful Desktop Publishing Program built right into Aperture. Be sure to listen to the [Inside Aperture Podcast about the book layout tool in Aperture](http://digitalmedia.oreilly.com/2008/05/06/aperture-layout-application-schorr.html). @@ -59,7 +59,7 @@ The photobook layout capabilities of Aperture became much powerful with version # 9. The V- and W-cycle -[![HUD](/media/aperture15_8.png)](/media/aperture15_8.png) +[![HUD](../media/aperture15_8.png)](../media/aperture15_8.png) By pressing V on your keyboard you can quickly cycle through different viewer modes. In previous versions of Aperture the V-key just showed/hid the big viewer. @@ -69,49 +69,49 @@ By pressing W on your keyboard you can cycle through the tabbed Inspector on the # 8. The tabbed Inspector/HUD -[![HUD](/media/aperture15_7.png)](/media/aperture15_7.png) +[![HUD](../media/aperture15_7.png)](../media/aperture15_7.png) An addition to the W-cycle: The overall inspector get polished by Apple which results in a completely new clean interface. But the best thing is you can access all those inspector tabs in full screen mode too by hitting the H-key. You can cycle through the tabs of the HUD in full screen mode just like you can do in the Aperture window by pressing the W-key. In fact the tabbed HUD will make you never want to leave full screen mode. # 7. .Mac Web Gallery -![Quick Preview](/media/aperture15_8.jpg) +![Quick Preview](../media/aperture15_8.jpg) Create easy updatable password protected galleries for different clients in no time. Your clients are even able to download the master files from your good looking .Mac web gallery. # 6. Definition adjustment slider -[![Recovery and Black Point sliders](/media/aperture15_11.png)](/media/aperture15_11.png) +[![Recovery and Black Point sliders](../media/aperture15_11.png)](../media/aperture15_11.png) It's a bit hard to describe. In short the slider adds more detail to the midtones of your image. But you just have to see it in action. You can get crisp and sharp images without the need of any sharpening tool. # 5. Recovery + Black Point sliders -![Recovery and Black Point sliders](/media/aperture15_10.png) +![Recovery and Black Point sliders](../media/aperture15_10.png) Although the Highlights & Shadow tool already produced reasonable results, the new Recovery and Black Point sliders are much more powerful and can reveal a lot of detail either in your blown out highlights or your underexposed shadows. Tip: While moving either the Recovery or the Black Point slider hold down the command key at the same time to see just an overlay of your hot & cold areas in your image. # 4. Quick Preview -![Quick Preview](/media/aperture15_12.png) +![Quick Preview](../media/aperture15_12.png) Perfect for first selections of your images during import. Aperture uses either a preview embedded by your camera in the RAW-file, the corresponding jpg-file if you shoot RAW+JPG or it uses the previews rendered by Aperture itself. # 3. Color Picker -[![Color Picker](/media/aperture15_13.png)](/media/aperture15_13.png) +[![Color Picker](../media/aperture15_13.png)](../media/aperture15_13.png) Inside the Color adjustment brick you can now directly pick the color you want to alter from your image by selecting it with the little eye dropper. So you aren't bound to the standard colors when adjusting the colors of your image separately. # 2. Spe(eeee)ed -[![Speed](/media/aperture15_14.jpg)](/media/aperture15_14.jpg) +[![Speed](../media/aperture15_14.jpg)](../media/aperture15_14.jpg) Now you can "scroll like butter" (I bet you know who said that) through your whole library fro real. I don't know what exactly causes Aperture 2 to be so much more responsive and speedier than previous versions but the development team have done magic with this. In combination with the quick preview mode quickly browsing through thousands of photos even in full screen mode is now a snap. # 1. RAW 2.0 -[![RAW power](/media/raw20.png)](/media/raw20.png) +[![RAW power](../media/raw20.png)](../media/raw20.png) The best new feature to me just because the whole purpose of Aperture should be producing the best looking images from your RAW files. While the first RAW 1.0 often rendered terrible pictures, the RAW 1.1 algorithm did it a lot better. But now we have a massive improvement to the RAW 1.1 algorithm with crisp highlights and more details in dark areas with less chromatic aberration by default. To me Aperture is now close and sometimes better than the quality of PhaseOne or CameraRAW. Of course Aperture 2 leaves all your old adjustments made in previous versions of Aperture alone and you can optionally migrate them all at once or separately. diff --git a/content/posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md b/content/posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md index eb5eb299..9237d8fa 100644 --- a/content/posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md +++ b/content/posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md @@ -5,14 +5,14 @@ title: The Iconfactory presents beautiful Indiana Jones desktop icons author: Matthias Kretschmann date: 2008-05-08 15:47:48+00:00 -wordpress_id: 51 + category: design tags: - icon --- -[![Indiana Jones Iconset by Iconfactory](/media/indianajones_first.png)](http://iconfactory.com/indianajones/)If you enjoyed the Indiana Jones movies than this first of four desktop icon sets is a must have for you. Icon Designer [Anthony Piraino](http://onebuttonmouse.com/) crafted some beautiful items from Indiana Jones and The Raiders of the Lost Ark movie. +[![Indiana Jones Iconset by Iconfactory](../media/indianajones_first.png)](http://iconfactory.com/indianajones/)If you enjoyed the Indiana Jones movies than this first of four desktop icon sets is a must have for you. Icon Designer [Anthony Piraino](http://onebuttonmouse.com/) crafted some beautiful items from Indiana Jones and The Raiders of the Lost Ark movie. The icons are available from the [special Iconfactory site](http://iconfactory.com/indianajones/) as an icontainer or mac and windows icon files. If you download the iContainer for use in [Candybar](http://www.panic.com/candybar/) you also get a new Mac OS X dock created by [David Lanham](http://dlanham.com/). All icons are free for your personal use only and there are already some nice placeholders for more icon sets inspired by the other movies. All of them will be released during May. -[![Indiana Jones Dock by David Lanham](/media/indianajones_dock.png)](/media/indianajones_dock.png) +[![Indiana Jones Dock by David Lanham](../media/indianajones_dock.png)](../media/indianajones_dock.png) diff --git a/content/posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md b/content/posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md index 6ee73c1b..f75ba3cb 100644 --- a/content/posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md +++ b/content/posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md @@ -5,7 +5,7 @@ title: Canon updates photographic software to work with Leopard author: Matthias Kretschmann date: 2008-05-14 10:01:15+00:00 -wordpress_id: 53 + category: photography --- diff --git a/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md b/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md index 909fa621..e75d24be 100644 --- a/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md +++ b/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md @@ -5,7 +5,7 @@ title: 'Update: First overview: Aperture 2.1 adjustment plugins have arrived' author: Matthias Kretschmann date: 2008-05-18 05:00:01+00:00 -wordpress_id: 54 + categories: - photography tags: @@ -14,7 +14,7 @@ tags: coinhive: true --- -![Aperture](/media/aperture97.png)With the release of Aperture 2.1 Apple introduced a plugin architecture for adding third party image adjustment and export plugins. Now the first third party image adjustment plugins for Aperture 2.1 have arrived. And they can definitely make you stop roundtripping your pictures to Photoshop and back. For now a total of 14 plugins from 9 companys were announced which are waiting to help you with your Aperture 2 workflow. +![Aperture](../media/aperture97.png)With the release of Aperture 2.1 Apple introduced a plugin architecture for adding third party image adjustment and export plugins. Now the first third party image adjustment plugins for Aperture 2.1 have arrived. And they can definitely make you stop roundtripping your pictures to Photoshop and back. For now a total of 14 plugins from 9 companys were announced which are waiting to help you with your Aperture 2 workflow. # Dfx digital filters plugin from Tiffen @@ -22,7 +22,7 @@ coinhive: true The first one is the [Dfx digital filters plug-in from Tiffen](http://www.tiffen.com/products.html?tablename=dfx) which was already available as an image editing plugin for Photoshop on Windows and Mac. It's an award winning set of [94 individual filters](http://www.tiffen.com/dfx_filter_effects_ig.html) for adjusting and altering your images in Aperture 2.1 and above. -[![Tiffen Dfx digital filters plugin Tiffen](/media/tiffen_aperture.jpg)](/media/tiffen_aperture.jpg) +[![Tiffen Dfx digital filters plugin Tiffen](../media/tiffen_aperture.jpg)](../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. @@ -34,15 +34,15 @@ Digital Film Tools [released three plugins](http://www.digitalfilmtools.com/aper [Power Stroke 1.0](http://www.digitalfilmtools.com/powerstroke/index.htm) is an image editing plugin for making targeted adjustments by intuitive handling with strokes. You can make multiple corrections and effects with one stroke such as color correction, recoloring or desaturation, colorization of black and white images, blur, fill light for dimly lit image areas and Diffusion/Glow. -[![Power Stroke 1.0](/media/dft-powerstroke_uis.jpg)](/media/dft-powerstroke_uis.jpg) +[![Power Stroke 1.0](../media/dft-powerstroke_uis.jpg)](../media/dft-powerstroke_uis.jpg) [Light! 3.5](http://www.digitalfilmtools.com/light/) is a plugin for adding Light effects with defined patterns which are created by Gamproducts. -[![Light! 3.5](/media/dft-light_ui.jpg)](/media/dft-light_ui.jpg) +[![Light! 3.5](../media/dft-light_ui.jpg)](../media/dft-light_ui.jpg) [Ozone 2.5](http://www.digitalfilmtools.com/ozone/) is an adjustment plugin for selective adjustments of colors. It' based on the Digital Zone System, which divides a picture into 11 discrete zones where you can adjust each zone separately. -[![Ozone 2.5](/media/dft-ozone_ui.jpg)](/media/dft-ozone_ui.jpg) +[![Ozone 2.5](../media/dft-ozone_ui.jpg)](../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. @@ -53,13 +53,13 @@ Nik Software [announced the availabilty of Viveza](http://www.niksoftware.com/vi 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. -[![Nik Viveza](/media/viveza_aperture_ui.jpg)](/media/viveza_aperture_ui.jpg) +[![Nik Viveza](../media/viveza_aperture_ui.jpg)](../media/viveza_aperture_ui.jpg) # 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](/media/dpmatte_index1.jpg)](/media/dpmatte_index1.jpg) +[![dpMatte](../media/dpmatte_index1.jpg)](../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. @@ -67,15 +67,15 @@ The folks at dvGarage are also working on an Aperture plugin called HDRToner for 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. -[![Fisheye-Hemi](/media/imagetrends_hemi_10.jpg)](/media/imagetrends_hemi_10.jpg) +[![Fisheye-Hemi](../media/imagetrends_hemi_10.jpg)](../media/imagetrends_hemi_10.jpg) The [PearlyWhites](http://www.imagetrendsinc.com/products/prodpage_pearly.asp) plugin, which is intended to automatically whiten and brighten teeth in your images should be available within the next 60 days. -[![PearlyWhites](/media/imagetrends_pearlywhite.png)](/media/imagetrends_pearlywhite.png) +[![PearlyWhites](../media/imagetrends_pearlywhite.png)](../media/imagetrends_pearlywhite.png) And the [ShineOff](http://www.imagetrendsinc.com/products/prodpage_shine.asp) plugin, which removes shine from faces and skin should be available within the next 60 days too. -[![ShineOff](/media/imagestrends_shieoff.jpg)](/media/imagestrends_shieoff.jpg) +[![ShineOff](../media/imagestrends_shieoff.jpg)](../media/imagestrends_shieoff.jpg) # Picturecode Noise Ninja @@ -83,7 +83,7 @@ Well known for it's awesome noise reduction capabilities, Picturecode's [Noise N According to Picturecode we can expect the plugin "sometimes next month" (June) and maybe there will be a beta version available before the final release. Definitely there will be a trial version of the plugin available from Picturecode's website. -[![Noise Ninja](/media/noiseninja.png)](/media/noiseninja.png) +[![Noise Ninja](../media/noiseninja.png)](../media/noiseninja.png) 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). @@ -91,11 +91,11 @@ You can have a first look at an early alpha version of the plugin running in Ape [Hydra](http://www.creaceed.com/hydra/) is a neat application for High Dynamic Range (HDR) image processing. With the release of Hydra 1.5, Creaceed made an Aperture plugin available with it too. It has a limited feature set compared to Photomatix or Photoshop but creating HDR images within Aperture is possible right now with this plugin. You can purchase Hydra for US$ 59.95 to get the included plugin or test it out by downloading the trial version (it will expire on July 1, 2008). But remember that the plugin is in beta stage at the moment. -![Hydra](/media/creaceed_hydra.png) +![Hydra](../media/creaceed_hydra.png) # Kekus LensFix CI -![Kekus LensFix CI](/media/lensfix_ci.png)The [LensFix](http://www.kekus.com/software/plugin.html) product from Kekus will help you to correct lens distortion automatically along with it's database of over 500 combinations of camera and lenses. It is also capable of reducing chromatic aberration in your images. Along with a standalone version and a Photoshop plugin the latest version will deliver you a plugin for Aperture in beta stage. The LensFix CI product with the Aperture plugin included will cost you US$ 30. +![Kekus LensFix CI](../media/lensfix_ci.png)The [LensFix](http://www.kekus.com/software/plugin.html) product from Kekus will help you to correct lens distortion automatically along with it's database of over 500 combinations of camera and lenses. It is also capable of reducing chromatic aberration in your images. Along with a standalone version and a Photoshop plugin the latest version will deliver you a plugin for Aperture in beta stage. The LensFix CI product with the Aperture plugin included will cost you US$ 30. You can read a first review of the beta plugin for Aperture [over at trick77.com](http://www.trick77.com/2008/05/18/review-lens-correction-plug-in-kekus-lensfix-for-aperture-2/). @@ -103,7 +103,7 @@ You can read a first review of the beta plugin for Aperture [over at trick77.com This plugin is a whole bundle of 11 different modules for more than 4000 effects like denoising, lens fixing, framing, light effects and many more. All effects can be applied to one image at a time or to a whole set of images at once. Just head over to the [product page](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) to see all effects and features this plugin bundle is capable of. The whole bundle will cost you US$ 299.95 or US$ 69.95 for each module. -[![Human Software ApertureEdit](/media/apertureedit_interface.jpg)](/media/apertureedit_interface.jpg) +[![Human Software ApertureEdit](../media/apertureedit_interface.jpg)](../media/apertureedit_interface.jpg) # More information diff --git a/content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md b/content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md index 88c3eb9f..b5381503 100644 --- a/content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md +++ b/content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md @@ -5,14 +5,14 @@ title: Image Trends releases Fisheye-Hemi plug-in for Apple Aperture author: Matthias Kretschmann date: 2008-05-19 13:05:23+00:00 -wordpress_id: 55 + categories: - photography tags: - aperture --- -[![Fisheye-Hemi](/media/imagetrends_hemi_10.jpg)](/media/imagetrends_hemi_10.jpg)Today Image Trends Inc. [announced](http://www.imagetrendsinc.com/news/Aperture%20Fisheye%20Hemi%20%20Final.pdf) the final availability of the anti-distortion plugin [Fisheye-Hemi](http://www.imagetrendsinc.com/products/prodpage_hemi.asp) as an editing plugin for Aperture 2.1. The plugin will remap your hemispheric images taken with a fisheye lens. So if you take pictures with a fisheye lens this plugin is a must have for you. +[![Fisheye-Hemi](../media/imagetrends_hemi_10.jpg)](../media/imagetrends_hemi_10.jpg)Today Image Trends Inc. [announced](http://www.imagetrendsinc.com/news/Aperture%20Fisheye%20Hemi%20%20Final.pdf) the final availability of the anti-distortion plugin [Fisheye-Hemi](http://www.imagetrendsinc.com/products/prodpage_hemi.asp) as an editing plugin for Aperture 2.1. The plugin will remap your hemispheric images taken with a fisheye lens. So if you take pictures with a fisheye lens this plugin is a must have for you. From the press release: diff --git a/content/posts/2008-05-21-awesome-parallax-optical-illusion.md b/content/posts/2008-05-21-awesome-parallax-optical-illusion.md index b1741ae6..98eeb574 100644 --- a/content/posts/2008-05-21-awesome-parallax-optical-illusion.md +++ b/content/posts/2008-05-21-awesome-parallax-optical-illusion.md @@ -5,14 +5,14 @@ title: 'Awesome parallax optical illusion: Make a horse move' author: Matthias Kretschmann date: 2008-05-21 13:02:00+00:00 -wordpress_id: 58 + categories: - design tags: - css --- -![Parallax](/media/parallax_illusion_css.png)As you may know there's a nice parallax effect implemented on this website. Just resize your browser window and you can see the black polaroids in my header flying on different layers. As I stated in an [earlier post](http://www.kremalicious.com/2008/03/love-the-parallax/) there is already some usage for it around the web while this effect seems to be first used by the guys from [Silverback](http://www.silverbackapp.com/). If you don't know what this effect is about head over to [thinkvitamin](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax/trackback/) to get to know what it is and how you can achieve it. +![Parallax](../media/parallax_illusion_css.png)As you may know there's a nice parallax effect implemented on this website. Just resize your browser window and you can see the black polaroids in my header flying on different layers. As I stated in an [earlier post](http://www.kremalicious.com/2008/03/love-the-parallax/) there is already some usage for it around the web while this effect seems to be first used by the guys from [Silverback](http://www.silverbackapp.com/). If you don't know what this effect is about head over to [thinkvitamin](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax/trackback/) to get to know what it is and how you can achieve it. But now Marco Kuiper from [marcofolio.net](http://www.marcofolio.net) adds another usage for it. He created a cool optical illusion with just plain css/html and some pictures. You can see a [demo of this effect](http://demo.marcofolio.net/a_parallax_illusion_with_css/) in action on Marco's website. Head over to the demo and resize your browser window. You should articulate something like "whoooot!" now. Marco has written [some words about it](http://www.marcofolio.net/css/a_parallax_illusion_with_css_the_horse_in_motion.html) too and you can download the demo. He has also [done a nice tutorial](http://www.marcofolio.net/photoshop/your_own_css_parallax_illusion_3d_image.html) how to achieve this optical illusion. Very cool! diff --git a/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md b/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md index 0f3402bc..a527e0aa 100644 --- a/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md +++ b/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md @@ -3,10 +3,10 @@ layout: post title: 'Showcasing the CSS Parallax Effect: 12+1 Creative Usages' author: Matthias Kretschmann -image: parallax-visualization_big.png +image: ../media/parallax-visualization_big.png date: 2008-05-22 20:01:12+00:00 -wordpress_id: 59 + categories: - design @@ -19,7 +19,7 @@ redirect_from: Been so in love with the parallax effect that I have to post another article about it. It's time for a first showcase of websites using this effect. At the end of this article you'll find some tutorials for making this effect too. -For the non-geeks: I don't mean [measuring distances between objects in space](http://en.wikipedia.org/wiki/Parallax), the [parallax error in photography](http://en.wikipedia.org/wiki/Parallax#Parallax_error_in_photography), any [StarTrek episode](http://www.startrek.com/startrek/view/series/VOY/episode/68824.html), the [movie Parallax View](http://www.imdb.com/title/tt0071970/) and definitely not [DC Comic's Parallax monster](http://scifipedia.scifi.com/index.php/Parallax_(DC)). +For the non-geeks: I don't mean [measuring distances between objects in space](http://en.wikipedia.org/wiki/Parallax), the [parallax error in photography](http://en.wikipedia.org/wiki/Parallax#Parallax_error_in_photography), any [StarTrek episode](http://www.startrek.com/startrek/view/series/VOY/episode/68824.html), the [movie Parallax View](http://www.imdb.com/title/tt0071970/) and definitely not [DC Comic's Parallax monster](). I mean [Parallax Scrolling](http://en.wikipedia.org/wiki/Parallax_scrolling) which is a technique often used in good ol' arcade and video games like [Moon Patrol](http://en.wikipedia.org/wiki/Moon_Patrol) or [Sonic the Hedgehog](http://en.wikipedia.org/wiki/Sonic_the_Hedgehog_%28video_game%29). In such 2D games parallax scrolling was used to create an illusion of three dimensional depth. @@ -35,59 +35,49 @@ So here are the examples. Just start clicking, resizing and goggling! The undeniable Kings of the Parallax, designed by Paul Annett. The Silverback guys made the effect so popular and inspired me too: -[![Silverback app](/media/parallax_001.jpg)](http://www.silverbackapp.com/) - +[![Silverback app](../media/parallax_001.jpg)](http://www.silverbackapp.com/) [Starry Night](http://css-tricks.com/examples/StarryNight/) An example by Chris Coyier from css-tricks.com. This one works vertically too and he made a [tutorial out of it](http://css-tricks.com/3d-parralax-background-effect/): -[![Starry Night](/media/parallax_002.jpg)](http://css-tricks.com/examples/StarryNight/) - +[![Starry Night](../media/parallax_002.jpg)](http://css-tricks.com/examples/StarryNight/) [Percentage Backgrounds](http://www.sitepoint.com/examples/stretchy/test.php) Probably the first css-based usage of this effect by Alex Walker over at Sitepoint. And probably the funniest one: -[![Sitepoint's Percentage Backgrounds](/media/parallax_003.jpg)](http://www.sitepoint.com/examples/stretchy/test.php) - +[![Sitepoint's Percentage Backgrounds](../media/parallax_003.jpg)](http://www.sitepoint.com/examples/stretchy/test.php) [The Horse in Motion](http://demo.marcofolio.net/a_parallax_illusion_with_css/) Marco Kuiper created a cool optical illusion with just plain css/html and some pictures. Head over to the demo and resize your browser window. You should articulate something like "whoooot!" now. You can read [here how he made it](http://www.marcofolio.net/css/a_parallax_illusion_with_css_the_horse_in_motion.html). -[![The Horse in Motion](/media/parallax_004.jpg)](http://demo.marcofolio.net/a_parallax_illusion_with_css/) - +[![The Horse in Motion](../media/parallax_004.jpg)](http://demo.marcofolio.net/a_parallax_illusion_with_css/) [We all hate Quickbooks, Do You?](http://weallhatequickbooks.com/) Nice fire parallax on this sort of aggregating website. It displays all Tweets with the word "quickbooks" in it: -[![We all hate Quickbooks, Do You?](/media/parallax_005.jpg)](http://weallhatequickbooks.com/) - +[![We all hate Quickbooks, Do You?](../media/parallax_005.jpg)](http://weallhatequickbooks.com/) [Dumago](http://dumago.net/) More mysterious (Oh my god, what is it??) than the Silverback app and with frosty stars instead of jungle leaves: -[![Dumago](/media/parallax_006.jpg)](http://dumago.net/) - +[![Dumago](../media/parallax_006.jpg)](http://dumago.net/) [Dromaeo](http://dromaeo.com/) Another funky name and a nice parallax too. This one uses little dinosaurs. Something like "Oh, so cute" or "How adorable!" should come to your mind: -[![Dromaeo](/media/parallax_007.jpg)](http://dromaeo.com/) - +[![Dromaeo](../media/parallax_007.jpg)](http://dromaeo.com/) [cdev.ru](http://www.cdev.ru/) A russian site with an awesome making-webdesign-in-jungle parallax (thanks [egot](http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-104)!). They even have different parallax headers on every page. Just click through the top menu: -[![cdev.ru](/media/parallax_013.jpg)](http://www.cdev.ru/) - - - +[![cdev.ru](../media/parallax_013.jpg)](http://www.cdev.ru/) # More Scripts and Interaction, please @@ -97,64 +87,55 @@ All the showcased sites above need to be resized in the browser to see the effec Very cool cloud effect which becomes visible just by scrolling down the page. I think this is the future and next step of the parallax effect in Web-Design since scrolling is way more common than resizing the browser window: -[![Parallax Backgrounds - a multi–layered javascript experiment](/media/parallax_008.jpg)](http://inner.geek.nz/javascript/parallax/) - +[![Parallax Backgrounds - a multi–layered javascript experiment](../media/parallax_008.jpg)](http://inner.geek.nz/javascript/parallax/) [Fly + Parallax Scrolling Effect](http://www.esqsoft.com/examples/fly_parallax/fly_parallax.htm) Similar to the Starry Night example from css-tricks. But this example uses JavaScript to achieve this effect without resizing your browser window. It almost looks like it's done with Flash: -[![Fly + Parallax Scrolling Effect](/media/parallax_009.jpg)](http://www.esqsoft.com/examples/fly_parallax/fly_parallax.htm) - +[![Fly + Parallax Scrolling Effect](../media/parallax_009.jpg)](http://www.esqsoft.com/examples/fly_parallax/fly_parallax.htm) [40 Jaar Sire](http://www.umaghetzeggen.nl/) Whatever this site is about (Help me dutch speaking folks! edit: [anna knows it!](http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-102)) it creates a shaky effect controlled by your mouse pointer: -[![40 Jaar Sire](/media/parallax_010.jpg)](http://www.umaghetzeggen.nl/) - +[![40 Jaar Sire](../media/parallax_010.jpg)](http://www.umaghetzeggen.nl/) [CSS combined with Scriptaculous's Morph effect](http://offtheline.net/examples/parallax/) Same graphics as on Silverback but with a Morph effect assembled with Scriptaculous. The parallax effect becomes visible by shrinking and unshrinking which is controlled by your mouse clicks: -[![CSS combined with Scriptaculous's Morph effect](/media/parallax_011.jpg)](http://offtheline.net/examples/parallax/) - +[![CSS combined with Scriptaculous's Morph effect](../media/parallax_011.jpg)](http://offtheline.net/examples/parallax/) [WeblogR demo](http://www.weblogr.fr/demo/09052008/) Same graphics as on Silverback too but this Parallax follows your mouse pointer. This is done with jQuery: -[![WeblogR demo](/media/parallax_012.jpg)](http://www.weblogr.fr/demo/09052008/) - - - +[![WeblogR demo](../media/parallax_012.jpg)](http://www.weblogr.fr/demo/09052008/) # How-Tos and Tutorials - * [How to recreate Silverback's Parallax Effect](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax) +- [How to recreate Silverback's Parallax Effect](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax) - * [In the Lab: Doing strange things to CSS Backgrounds](http://www.sitepoint.com/blogs/2008/01/18/in-the-lab-doing-strange-things-to-css-backgrounds/) +- [In the Lab: Doing strange things to CSS Backgrounds](http://www.sitepoint.com/blogs/2008/01/18/in-the-lab-doing-strange-things-to-css-backgrounds/) - * [Starry Night: Incredible 3D Background Effect with Parallax](http://css-tricks.com/3d-parralax-background-effect/) +- [Starry Night: Incredible 3D Background Effect with Parallax](http://css-tricks.com/3d-parralax-background-effect/) - * [Your own CSS parallax illusion 3d image](http://www.marcofolio.net/photoshop/your_own_css_parallax_illusion_3d_image.html) +- [Your own CSS parallax illusion 3d image](http://www.marcofolio.net/photoshop/your_own_css_parallax_illusion_3d_image.html) - * [Parallax Backgrounds - a multi–layered javascript experiment](http://inner.geek.nz/javascript/parallax/) - - * [How to Make the Parallax Effect](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/) +- [Parallax Backgrounds - a multi–layered javascript experiment](http://inner.geek.nz/javascript/parallax/) +- [How to Make the Parallax Effect](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/) Hope you enjoyed this little showcase. Please share it on your favorite social website or vote for it. Your vote is always highly appreciated! And if you know any other websites using this effect (the non-flash versions) feel free to post them in the comments beneath this article. **Update 05/29/2008:** [Dylan Bathurst](http://www.dylanbathurst.com/) wrote an article [How to make the Parallax effect](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/) which includes his own "Keep out of the Rain" example and a sticky, Hulk style Parallax footer: -[![Dylan Bathurst](/media/parallax_015.png)](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/) +[![Dylan Bathurst](../media/parallax_015.png)](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/) And he has found another Parallax effect on the [website of the Rissington Podcast](http://therissingtonpodcast.co.uk/). Cool! -[![The Rissington Podcast](/media/parallax_014.png)](http://therissingtonpodcast.co.uk/) - +[![The Rissington Podcast](../media/parallax_014.png)](http://therissingtonpodcast.co.uk/) **Update 2 06/02/2008:** Nice commentators [routine](http://www.weaintplastic.com/) and [Jorge Epuñan](http://www.csslab.cl/) made some more interactive Parallax examples: @@ -162,11 +143,10 @@ And he has found another Parallax effect on the [website of the Rissington Podca A star parallax which follows your mouse pointer. Done with jQuery and with heavy CPU load. -[![Sonus:portals](/media/parallax_017.jpg)](http://www.sonus-game.com/) - +[![Sonus:portals](../media/parallax_017.jpg)](http://www.sonus-game.com/) [Parallax con Mootools](http://www.csslab.cl/ejemplos/parallax_mootools/) My personal favorite for now in terms of usability. If you are able to understand spanish, [read his explanation](http://www.csslab.cl/2008/05/29/parallax-en-uso-real/). -[![Parallax con Mootools](/media/parallax_016.jpg)](http://www.csslab.cl/ejemplos/parallax_mootools/) +[![Parallax con Mootools](../media/parallax_016.jpg)](http://www.csslab.cl/ejemplos/parallax_mootools/) diff --git a/content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md b/content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md index 53968310..c78ad5fb 100644 --- a/content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md +++ b/content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md @@ -5,7 +5,7 @@ title: New all-in-one Aperture plug-in released author: Matthias Kretschmann date: 2008-05-28 15:29:56+00:00 -wordpress_id: 60 + categories: - photography tags: @@ -14,7 +14,7 @@ tags: coinhive: true --- -![ApertureEdit](/media/apertureedit_logo.png)Today [Human Software](http://www.humansoftware.com) released an exciting image editing plug-in for Apple's Aperture. It's called [ApertureEdit](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) and according to Human Software it offers more than 4000 professional effects which you can achieve right within Aperture. +![ApertureEdit](../media/apertureedit_logo.png)Today [Human Software](http://www.humansoftware.com) released an exciting image editing plug-in for Apple's Aperture. It's called [ApertureEdit](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) and according to Human Software it offers more than 4000 professional effects which you can achieve right within Aperture. The ApertureEdit plug-in is a bundle of 11 different modules for 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. diff --git a/content/posts/2008-06-01-chives.md b/content/posts/2008-06-01-chives.md index 66dc012d..0727e68e 100644 --- a/content/posts/2008-06-01-chives.md +++ b/content/posts/2008-06-01-chives.md @@ -2,12 +2,12 @@ layout: post title: Chives -image: Teaser-Chives.jpg -download: chives_by_kremalicious.zip +image: ../media/Teaser-Chives.jpg +download: ../media/chives_by_kremalicious.zip author: Matthias Kretschmann date: 2008-06-01 18:43:40+00:00 -wordpress_id: 64 + categories: - goodies tags: diff --git a/content/posts/2008-06-02-tweet-im-on-twitter-now.md b/content/posts/2008-06-02-tweet-im-on-twitter-now.md index 1cbad2ff..310d8e5d 100644 --- a/content/posts/2008-06-02-tweet-im-on-twitter-now.md +++ b/content/posts/2008-06-02-tweet-im-on-twitter-now.md @@ -5,14 +5,14 @@ title: Tweet! I'm on Twitter now. author: Matthias Kretschmann date: 2008-06-02 18:26:37+00:00 -wordpress_id: 65 + categories: - personal tags: - twitter --- -![Twitter](/media/twitter.png)In a heavy venturesome step of unreasonable Web 2.0 love I've decided to get me on Twitter and [opened up an account](https://twitter.com/kremalicious). +![Twitter](../media/twitter.png)In a heavy venturesome step of unreasonable Web 2.0 love I've decided to get me on Twitter and [opened up an account](https://twitter.com/kremalicious). If you like, you can follow me now on Twitter while I try to find some advantages of this curious Twitter thing. The plan for now is to post about background updates of this website and about whatever I will throw into the Cloud on other places. But damn, just 140 characters. Feels like writing like it's 1999. diff --git a/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md b/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md index fda1f6b6..f4e9812c 100644 --- a/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md +++ b/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md @@ -2,12 +2,12 @@ layout: post title: Niépce's Camera Obscura And The History Of The First Photograph -image: Teaser-Camera-Obscura-Icons.jpg -download: niepces_camera_obscura_by_kremalicious.zip +image: ../media/Teaser-Camera-Obscura-Icons.jpg +download: ../media/niepces_camera_obscura_by_kremalicious.zip author: Matthias Kretschmann date: 2008-06-03 14:34:03+00:00 -wordpress_id: 67 + categories: - goodies @@ -36,8 +36,7 @@ There's a fascinating story behind these icons which is nothing more than the st ## Nicéphore Niépce and The First Photograph - -![Nicéphore Niépce, ca. 1795](/media/nicephore-niepce.jpg) 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. @@ -106,7 +105,7 @@ In addition to these icons you can download the [associated wallpapers for your # How to use these icons -![Niépce's Camera Obscura in use](/media/cameraobscura_inuse.png)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. +![Niépce's Camera Obscura in use](../media/cameraobscura_inuse.png)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. The easiest way to change and apply icons in Mac OS X involves the awesome application [Candybar](http://www.panic.com/candybar) from [Panic Software](http://www.panic.com/). In case you don't have it you can change your icons by following these steps: @@ -118,6 +117,6 @@ These desktop icons are free for you personal and non-commercial use. All other # Final Words -![Oh no!](/media/coffee-cup-empty.png) +![Oh no!](../media/coffee-cup-empty.png) 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 buy me my next coffee. diff --git a/content/posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md b/content/posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md index 61124ea0..da57a257 100644 --- a/content/posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md +++ b/content/posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md @@ -2,12 +2,12 @@ layout: post title: Niépce's Camera Obscura Wallpaper Pack -image: Teaser-Camera-Obscura-Walls.jpg -download: niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip +image: ../media/Teaser-Camera-Obscura-Walls.jpg +download: ../media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip author: Matthias Kretschmann date: 2008-06-03 13:32:24+00:00 -wordpress_id: 66 + categories: - goodies tags: diff --git a/content/posts/2008-06-04-helvetica-typewriter-keys.md b/content/posts/2008-06-04-helvetica-typewriter-keys.md index eaaf3e9a..caa894a3 100644 --- a/content/posts/2008-06-04-helvetica-typewriter-keys.md +++ b/content/posts/2008-06-04-helvetica-typewriter-keys.md @@ -1,16 +1,16 @@ --- layout: photo -slug: helvetica-typewriter-keys title: Helvetica Typewriter Keys -image: MG_1735-Version-2.jpg +image: ../media/MG_1735-Version-2.jpg author: Matthias Kretschmann date: 2008-06-04 11:41:01+00:00 -wordpress_id: 1976 + categories: - photos -tags: typography +tags: +- typography --- [Photo on 500px](http://500px.com/photo/5630073) [Photo on flickr](http://www.flickr.com/photos/krema/6965165687) diff --git a/content/posts/2008-06-11-safari-4-developer-preview.md b/content/posts/2008-06-11-safari-4-developer-preview.md index 5b774c34..6f09d812 100644 --- a/content/posts/2008-06-11-safari-4-developer-preview.md +++ b/content/posts/2008-06-11-safari-4-developer-preview.md @@ -5,7 +5,7 @@ title: 'Safari 4 Developer Preview - Better Performance, Overhauled Web Inspecto author: Matthias Kretschmann date: 2008-06-11 10:37:07+00:00 -wordpress_id: 70 + category: design tags: - osx @@ -13,21 +13,21 @@ tags: - css --- -![Safari](/media/safari-logo.png)Apple released a developer preview of the upcoming version of its web browser Safari to registered Developers. The Safari 4 Developer Preview is available for Mac OS X Tiger/Leopard and Windows. While the main changes are not visible to the user the most significant visible new feature is the overhauled Web Inspector. +![Safari](../media/safari-logo.png)Apple released a developer preview of the upcoming version of its web browser Safari to registered Developers. The Safari 4 Developer Preview is available for Mac OS X Tiger/Leopard and Windows. While the main changes are not visible to the user the most significant visible new feature is the overhauled Web Inspector. You can access Safari's Web Inspector through Develop > Show Web Inspector (you have to check the "Show Develop menu" box in the Preferences first to enable it). The Web Inspector, like the Firebug plug-in for Firefox, is a cool tool especially for Web Developers to inspect various elements of the website you're browsing. The Navigation inside the Web Inspector is now moved from left to the top and there's a new "Databases" section and something like a browsing benchmarking "Profiles" section. All navigation tabs got new icons too. -![Web Inspector](/media/webinspector_3.png) +![Web Inspector](../media/webinspector_3.png) The "Resources" section got a slight overhaul too. With it you can see in which time the elements on your website were loaded with a nice graphical timeline. -![Web Inspector](/media/webinspector_2.png) +![Web Inspector](../media/webinspector_2.png) Among the visible new features in the Safari 4 Developer Preview is the ability to save websites as desktop applications or site-specific browsers (SSB) called Web Applications (File > Save as Web Application) and some more options for new windows or tabs in the General Preferences: -![Safari 4 New Windows And Tabs](/media/safari_4_tabs.png) +![Safari 4 New Windows And Tabs](../media/safari_4_tabs.png) In terms of web standards and performance the Safari 4 Developer Preview passes the [Acid3 performance test](http://acid3.acidtests.org/) with 100/100 and is way more faster at rendering web pages. @@ -37,7 +37,7 @@ Finally there seem to be a new css version implemented since Safari 4 now render Another new feature is the new full page zoom for zooming on web pages which was already implemented in the WebKit nightlies but [had to be manually activated](http://www.macosxhints.com/article.php?story=20080606045109546). In old Safari versions pressing Command + or - increased or decreased just the text size, sometimes destroying the whole layout of the page. The Safari 4 Developer Preview behaves just like the recent Firefox 3 RC1 and zooms out or zooms in the whole page layout and not just the text. -[![Web Inspector](/media/safari4_zoom_thumb.png)](/media/safari4_zoom.png) +[![Web Inspector](../media/safari4_zoom_thumb.png)](../media/safari4_zoom.png) And while Apple just [states in their press release](http://www.apple.com/pr/library/2008/06/09snowleopard.html) that Safari 4 delivers "the fastest implementation of JavaScript ever, increasing performance by 53 percent", other sources like [MacRumors](http://www.macrumors.com/2008/06/10/apple-seeds-safari-4-to-developers/) or [Macworld UK](http://www.macworld.co.uk/macsoftware/news/index.cfm?newsid=21625&pagtype=allchandate) expect this increased JavaScript performance to be based on the implementation of the freshly new [SquirrelFish JavaScript engine](http://webkit.org/blog/189/announcing-squirrelfish/). diff --git a/content/posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md b/content/posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md index d150440a..7d709bc4 100644 --- a/content/posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md +++ b/content/posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md @@ -5,19 +5,19 @@ title: 'Quick Tip: Borders & Titles Plug-In for Aperture' author: Matthias Kretschmann date: 2008-06-17 15:21:57+00:00 -wordpress_id: 73 + categories: - photography tags: - aperture --- -![Aperture](/media/aperture128.png)Have you ever looked for a way to quickly add text to your images [without photoshopping a watermark image](http://www.kremalicious.com/2008/05/high-quality-watermarks-with-aperture/) first? +![Aperture](../media/aperture128.png)Have you ever looked for a way to quickly add text to your images [without photoshopping a watermark image](http://www.kremalicious.com/2008/05/high-quality-watermarks-with-aperture/) first? There's a simple editing plug-in available for this task called [Borders & Titles](http://developer.apple.com/samplecode/BordersAndTitles/index.html) and as the name says you can add simple borders and text to your images within Aperture 2.1. It's a sample plug-in provided by Apple and it's fully functional. You can download it from Apple's Developer Connection website without registration: [Aperture Edit Plugin - Borders & Titles](http://developer.apple.com/samplecode/BordersAndTitles/index.html) -[![Borders & Titles](/media/aperture_bt_thumb.png)](/media/aperture_bt.png) +[![Borders & Titles](../media/aperture_bt_thumb.png)](../media/aperture_bt.png) The downlaod package includes the source code too so you can adjust the plug-in if you're able to code Cocoa. After downloading put the BordersAndTitles.ApertureEdit plug-in into /Library/Application Support/Aperture/Plug-Ins and access the plug-in from Aperture. diff --git a/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md b/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md index 212cdcba..100d73fa 100644 --- a/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md +++ b/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md @@ -1,15 +1,14 @@ --- layout: post -slug: ubuntu-as-mac-file-server-and-time-machine-volume title: 'HowTo: Make Ubuntu A Perfect Mac File Server And Time Machine Volume' author: Matthias Kretschmann -image: ubuntu_mac_feature.jpg +image: ../media/ubuntu_mac_feature.jpg date: 2008-06-19 03:08:11+00:00 updated: 2016-06-12 14:29:11+00:00 -wordpress_id: 75 + category: design tags: - tutorial @@ -41,23 +40,23 @@ Personally I use a fresh installation of Ubuntu 8.04 Hardy Heron Desktop version Here are the steps involved in setting up your Ubuntu box as a Mac file server: - 1. Modify and install Netatalk (Open Source AFP implementation) - 2. Configure Netatalk - 3. Configure shared volumes (and Time Machine volume) - 4. Install Avahi (Open Source Bonjour implementation) - 5. Configure Avahi and advertise services - 6. Configure TimeMachine - 7. Conclusion, Problems and more informations - 8. Downloading and using the Server Display Icons - 9. Translations Of This Article +1. Modify and install Netatalk (Open Source AFP implementation) +2. Configure Netatalk +3. Configure shared volumes (and Time Machine volume) +4. Install Avahi (Open Source Bonjour implementation) +5. Configure Avahi and advertise services +6. Configure TimeMachine +7. Conclusion, Problems and more informations +8. Downloading and using the Server Display Icons +9. Translations Of This Article # 1. Modify and install Netatalk -![Netatalk icon](/media/netatalk.png)[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. +![Netatalk icon](../media/netatalk.png)[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. First you have to enable the Source Code repositories via System > Administration > Software Sources under the Ubuntu Software tab. Check the Source Code Box, click Close and choose Reload in the next dialogue. -![Source Code Repositories](/media/ubuntuserver1.png) +![Source Code Repositories](../media/ubuntuserver1.png) Alessandro has built [a nice .deb package for i386 machines](http://dl.getdropbox.com/u/187424/netatalk_2.0.3-brando0_i386.deb). Although written in italian you can follow the necessary code snippets for installing this package [in his blog post.](http://gpz500.wordpress.com/2008/09/27/lairone-al-servizio-del-leopardo/) If the install package works for you just skip the following self compiling process and head over to the [Configure Netatalk section.](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#netatalk2) @@ -68,7 +67,7 @@ sudo apt-get build-dep netatalk sudo apt-get install cracklib2-dev fakeroot libssl-dev sudo apt-get source netatalk cd netatalk-2* -```` +``` Now you have downloaded the source code of Netatalk to your home folder, installed some required packages for building Netatalk and changed the directory to the downloaded folder. @@ -80,11 +79,10 @@ sudo DEB_BUILD_OPTIONS=ssl dpkg-buildpackage -rfakeroot Depending on your hardware this may take a while but you can enjoy the geeky build output in your Terminal: -![Building Netatalk](/media/ubuntuserver2.png) +![Building Netatalk](../media/ubuntuserver2.png) If everything went through without errors (except the signing warnings, can be ignored) you can install the recently created package: - ```shell sudo dpkg -i ~/netatalk_2*.deb ``` @@ -99,7 +97,7 @@ Now you have successfully build and installed your custom Netatalk package which # 2. Configure Netatalk -![Netatalk icon](/media/netatalk.png)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: +![Netatalk icon](../media/netatalk.png)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: ```shell sudo vi /etc/default/netatalk @@ -134,7 +132,7 @@ Press Ctrl + S to save the document or choose File > Save. # 3. Configure shared Volumes -![Time Machine Volume icon](/media/timemachinedisk97.png)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: +![Time Machine Volume icon](../media/timemachinedisk97.png)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: ```shell sudo vi /etc/netatalk/AppleVolumes.default @@ -173,7 +171,7 @@ Although we now have a fully configured AFP file server it will not show up in t # 4. Install Avahi -![Bonjour icon](/media/bonjour97.png)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: +![Bonjour icon](../media/bonjour97.png)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: ```shell sudo apt-get install avahi-daemon @@ -196,7 +194,7 @@ Press Ctrl + S to save the document or choose File > Save. # 5. Configure Avahi and advertise services -![Bonjour icon](/media/bonjour97.png)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: +![Bonjour icon](../media/bonjour97.png)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: ```shell sudo vi /etc/avahi/services/afpd.service @@ -233,19 +231,19 @@ Now you have configured the Avahi daemon to advertise AFP sharing across your ne Now you're done with setting up AFP file sharing on your Ubuntu box and advertising it across the network for Finder's sidebar. Check if everything works as intended by clicking on your Ubuntu server in Finder and clicking on the "Connect As" button. Enter your username and password (the ones you're using on your Ubuntu machine) and you should see the Volumes we defined earlier with the AppleVolumes.default file: -![Netatalk shares](/media/ubuntuserver3.png) +![Netatalk shares](../media/ubuntuserver3.png) Another side effect of using AFP is that your Ubuntu box will show up as a nice Apple Cinema Display icon instead of the BSOD windows icon. Here you see my Ubuntu server showing up in Finder as [Rockhopper](http://en.wikipedia.org/wiki/Southern_Rockhopper_Penguin): -![Ubuntu box in Finder](/media/ubuntuserver4.png) +![Ubuntu box in Finder](../media/ubuntuserver4.png) update: If you've followed the revised version of this article your Linux box should now be represented by a Xserve icon in Finder: -![Ubuntu box as Xserver in Finder](/media/ubuntuserver4a.png) +![Ubuntu box as Xserver in Finder](../media/ubuntuserver4a.png) # 6. Configure Time Machine -![Time Machine icon](/media/timemachine97.png)**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): +![Time Machine icon](../media/timemachine97.png)**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): ```shell defaults write com.apple.systempreferences TMShowUnsupportedNetworkVolumes 1 @@ -257,7 +255,7 @@ Now just mount the "TimeMachine" Volume first and choose it as a backup disk in When your first Time Machine backup is done you can remove all Volumes and the next time Time Machine starts it will automagically mount the disk image from your TimeMachine volume on your Ubuntu box without mounting the whole TimeMachine volume: -![Finder sidebar](/media/ubuntuserver5.png) +![Finder sidebar](../media/ubuntuserver5.png) # 7. Conclusion, Problems and more informations @@ -291,7 +289,7 @@ The secret number Time Machine adds to your computer name is nothing more than t In the field volume name write Backup of computername. Now FIRST chose sparse bundle disk image as the image format and THEN adjust the volume size to the size of your internal harddrive (minimum, choose more if you like) afterwards. Remember that Disk Utility won't let you make a bigger image file as you have physical hard drive space available if you don't chose sparse bundle disk image as the image format first. For reference have a look at this screenshot: -![Time Machine sparse bundle disk image](/media/tm-sparsebundle.png) +![Time Machine sparse bundle disk image](../media/tm-sparsebundle.png) 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). @@ -304,17 +302,17 @@ In short you have to allow communications over port 548 and 5353. ## "Connection Failed" If you get one of those errors: +```` + +Connection Failed - There was an error connection to the server. Check the server name or IP address and try again + +``` +or +``` + +There was an error connecting to the server. Check the server name or IP address and try again. If you are unable to resolve the problem contact your system administrator. ```` -Connection Failed - There was an error connection to the server. Check the server name or IP address and try again -``` - -or - -``` -There was an error connecting to the server. Check the server name or IP address and try again. If you are unable to resolve the problem contact your system administrator. -``` - you should first be sure you have either no firewall on your Ubuntu box in use or have it configured to allow AFP communications as suggested in the above paragraph. Remember that this error can be caused by a myriad of problems and just a lot of other configurations on your side. So you should try a minimal way: On my Ubuntu boxes I have no other file sharing protocol like samba or NFS enabled (even not installed) so the samba hostname and the AFP hostname can't interfere with each other. Also I've left the Workgroup field blank under System > Administration > Network > General tab. @@ -323,7 +321,7 @@ If you still can't connect to your Ubuntu box you can edit your /etc/hosts file ```shell sudo vi /etc/hosts -``` +```` Add the following two lines at the very top of the file. @@ -374,22 +372,21 @@ In the forum you'll also find some links to various patches to avoid problems wi ## 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/) - * [All possible AppleVolumes.default options (part of the Netatalk manual)](http://netatalk.sourceforge.net/2.0/htmldocs/AppleVolumes.default.5.html) - * [Overview and templates about services Avahi can advertise](http://holyarmy.org/2008/01/27/advertising-linux-services-via-avahibonjour) - * [In-depth article about Sparse Bundle disk images](http://db.tidbits.com/article/9673) - * [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. - +- 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/) +- [All possible AppleVolumes.default options (part of the Netatalk manual)](http://netatalk.sourceforge.net/2.0/htmldocs/AppleVolumes.default.5.html) +- [Overview and templates about services Avahi can advertise](http://holyarmy.org/2008/01/27/advertising-linux-services-via-avahibonjour) +- [In-depth article about Sparse Bundle disk images](http://db.tidbits.com/article/9673) +- [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 -![Ubuntu Server Display](/media/ubuntuserver97.png)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). +![Ubuntu Server Display](../media/ubuntuserver97.png)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). Here you can see the icons included in the Server Displays icon pack: -![Server Displays](/media/serverdisplays.jpg) +![Server Displays](../media/serverdisplays.jpg) Because I've just modified Apple's standard icons these icons are just available via this blog post and they will not show up in my Goodies section. Just download the whole package directly via this link: @@ -413,13 +410,13 @@ As for the Windows Vista server icon: Just rename the Windows Server.icns file t ``` /System/Library/CoreServices/CoreTypes.bundle/Contents/Resources -```` +``` Now drag & drop the renamed file into this path and replace the generic icon (making a backup before doing that is a good idea) and after a logout all your Windows servers should be displayed with the new icon. update: A solution for the icon problem is here: [Simon Wheatley figured out](http://www.simonwheatley.co.uk/2008/04/06/avahi-finder-icons/trackback/) how to assign a different icon to your avahi advertised Linux box. All you have to do is assigning a device info part at the end of the avahi service file for AFP. I've updated this article to include this part. Please head back to the Configure Avahi and advertise services part in this article and edit your afpd.service file again if you've followed the first revision of this article. -![Oh no!](/media/coffee-cup-empty.png) +![Oh no!](../media/coffee-cup-empty.png) 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](http://www.kremalicious.com/feed/), discuss this article or buy me my next coffee. diff --git a/content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md b/content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md index e79e0a91..3b724215 100644 --- a/content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md +++ b/content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md @@ -5,14 +5,14 @@ title: ApertureEdit is Edit for Aperture now, updated to 1.2 author: Matthias Kretschmann date: 2008-06-25 15:29:22+00:00 -wordpress_id: 77 + categories: - photography tags: - aperture --- -![Edit for Aperture logo](/media/apertureedit_logo2.png)The All-in-one Aperture adjustment plugin bundle from [Human Software](http://www.humansoftware.com) is now called Edit for Aperture or just [Edit](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html). The new version 1.2 can now apply multiple layers of curves correction at once and the interface gets a new split image view. Also "different compatibility issues for PowerPC users" were fixed according to the release notes. +![Edit for Aperture logo](../media/apertureedit_logo2.png)The All-in-one Aperture adjustment plugin bundle from [Human Software](http://www.humansoftware.com) is now called Edit for Aperture or just [Edit](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html). The new version 1.2 can now apply multiple layers of curves correction at once and the interface gets a new split image view. Also "different compatibility issues for PowerPC users" were fixed according to the release notes. The ApertureEdit plug-in is a bundle of 12 different modules for 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 and according to Human Software Edit offers more than 4000 professional effects. 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. diff --git a/content/posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md b/content/posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md index 617bd564..4af18d20 100644 --- a/content/posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md +++ b/content/posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md @@ -6,13 +6,13 @@ title: 'New Canon stuff: Digital Rebel XS/EOS 1000D/Kiss F And Speedlite 430EX I author: Matthias Kretschmann date: 2008-06-25 16:41:59+00:00 -wordpress_id: 78 + categories: - photography --- -![Digital Rebel XS/EOS 1000D ](/media/canon1000d.png)After the latest Digital Photo Professional update (DPP 3.4.1.1) [revealed some evidence about an upcoming Canon EOS Rebel XS/1000D](http://www.bobatkins.com/photography/digital/canon_xs_1000D_dpp34.html), Canon finally introduced this new entry-level DSLR this month. The [EOS Digital Rebel XS/1000D/Kiss F](http://www.canon-europe.com/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1000D/index.asp) ([full product specifications](http://www.canon-europe.com/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1000D/index.asp?specs=1)) is technically a hybrid between hardware and features found in Canon's entry-level cameras from the past: the 7-point autofocus system comes from the XT/350D, the Digic III processor is the same as in the XSi/450D and the Live View feature is implemented with the same features as found in the XSi/450D. +![Digital Rebel XS/EOS 1000D ](../media/canon1000d.png)After the latest Digital Photo Professional update (DPP 3.4.1.1) [revealed some evidence about an upcoming Canon EOS Rebel XS/1000D](http://www.bobatkins.com/photography/digital/canon_xs_1000D_dpp34.html), Canon finally introduced this new entry-level DSLR this month. The [EOS Digital Rebel XS/1000D/Kiss F](http://www.canon-europe.com/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1000D/index.asp) ([full product specifications](http://www.canon-europe.com/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1000D/index.asp?specs=1)) is technically a hybrid between hardware and features found in Canon's entry-level cameras from the past: the 7-point autofocus system comes from the XT/350D, the Digic III processor is the same as in the XSi/450D and the Live View feature is implemented with the same features as found in the XSi/450D. With this DSLR Canon seems to open up a new class in their EOS system which is somehow below the former entry level cameras (XT/350D, XTi/400D) and the latest entry-level XSi/450D. It's priced 200$ below Canons current or former entry-level DSLR XSi/450D and you can find a nice first review of this new DSLR [over at Digital Photography Review](http://www.dpreview.com/previews/Canon_1000D/). -[![Speedlite 430EX II](/media/speedlite430exii.jpg)](/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. +[![Speedlite 430EX II](../media/speedlite430exii.jpg)](../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. diff --git a/content/posts/2008-06-30-stone-head.md b/content/posts/2008-06-30-stone-head.md index e40e4a2d..374c1523 100644 --- a/content/posts/2008-06-30-stone-head.md +++ b/content/posts/2008-06-30-stone-head.md @@ -2,11 +2,11 @@ layout: photo title: Stone Head -image: stonehead.jpg +image: ../media/stonehead.jpg author: Matthias Kretschmann date: 2008-06-30 11:26:14+00:00 -wordpress_id: 1961 + categories: - photos --- diff --git a/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md b/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md index d5c198b2..bbcb731e 100644 --- a/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md +++ b/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md @@ -5,14 +5,14 @@ title: Everything Back To Normal On Kremalicious.com (Almost) author: Matthias Kretschmann date: 2008-07-01 16:39:02+00:00 -wordpress_id: 80 + categories: - personal tags: - wordpress --- -![Server screwed](/media/xserve_screwed.png)As you may have noticed, kremalicious.com was a bit screwed in the last week and some of you have asked me via mail and twitter what exactly was wrong. So to satisfy the curious geek in you I will provide some informations about it. +![Server screwed](../media/xserve_screwed.png)As you may have noticed, kremalicious.com was a bit screwed in the last week and some of you have asked me via mail and twitter what exactly was wrong. So to satisfy the curious geek in you I will provide some informations about it. It all started with a move of my whole website to new and shiny servers with PHP 5 running by my host. I didn't heard of any incompatibilities between the latest Wordpress version running on PHP 5 and in fact Wordpress loves to use PHP 5. But somehow I wasn't able to update my site neither over http or ftp. Since I can contact my host admins directly ([thank you jpBerlin/Heinlein-Support!](http://www.jpberlin.de/)) this problem was addressed rather quickly. They just neglected to tell me that the server address for login also changed (I should have think of this too). So all my changes were applied to my Wordpress installation on the old server. Problem solved I thought. diff --git a/content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md b/content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md index eab8925e..6633599a 100644 --- a/content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md +++ b/content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md @@ -5,7 +5,7 @@ title: 'New Aperture Plug-Ins: Jade And PTLens' author: Matthias Kretschmann date: 2008-07-08 19:19:54+00:00 -wordpress_id: 84 + categories: - photography tags: @@ -14,19 +14,19 @@ tags: Last week two new image editing plug-ins were announced for Aperture 2.1: The PTLens plug-in for correcting barrel distortion, vignetting, chromatic aberration, and perspective and the Jade plug-in for automatic correction of color, levels and exposure. -![image](/media/aperture-plugin128.png) +![image](../media/aperture-plugin128.png) The [PTLens plug-in](http://epaperpress.com/ptlens/) from [ePaperPress](http://epaperpress.com/) was available as a Photoshop plug-in in the past and is well known for its lens pincushion, barrel distortion, vignetting, chromatic aberration, and perspective correction abilities based on a lens model database similiar to [Kekus' LensFix CI plug-in](http://www.kekus.com/software/plugin.html). While I love the plug-ins ability to correct perspectives the Aperture plug-in doesn't work with RAW files(!), just with tiff and jpeg files which is one more way to compromise the way Aperture works (In my opinion the whole plug-in architecture of Aperture does that). And while I would love to show you the plug-ins user interface in Aperture PTLens refused to open either JPEG or TIFF files. So here's just a screenshot of the standalone application: -[![PTLens UI](/media/ptlens_ui_thumb.jpg)](/media/ptlens_ui.png) +[![PTLens UI](../media/ptlens_ui_thumb.jpg)](../media/ptlens_ui.png) So to me the PTLens plug-in for Aperture isn't finished yet. But you can download a [trial version from the plug-ins website](http://epaperpress.com/ptlens/media.html). The second plug-in recently released is the [Jade plug-in](http://jade.datamind.biz/) from Datamind. Because of its speed also on consumer Macs, Aperture 2 became popular among amateur photographers too. [Datamind](http://datamind.biz) targets it's first Aperture plug-in [Jade](http://jade.datamind.biz/) at this group. The former standalone application for Mac and Windows is now an Aperture adjustment plug-in for correcting your pictures colors, levels and exposure automatically with Dataminds own algorithm. And its user interface is very clean and uncluttered: -[![PTLens UI](/media/jade_ui_thumb.jpg)](/media/jade_ui.png) +[![PTLens UI](../media/jade_ui_thumb.jpg)](../media/jade_ui.png) While I have to say Jade produces very reasonable results it lacks a lot of controls and fails with complicated pictures where Aperture's adjustment controls wouldn't. So I would say this plug-in would be better as an iPhoto plug-in. Do you really want a blown up photoshop or tiff file for every photo you're going to correct in Aperture? diff --git a/content/posts/2008-07-11-enjoy-kremaliciousiphone.md b/content/posts/2008-07-11-enjoy-kremaliciousiphone.md index 1ea50ab1..f54b50ba 100644 --- a/content/posts/2008-07-11-enjoy-kremaliciousiphone.md +++ b/content/posts/2008-07-11-enjoy-kremaliciousiphone.md @@ -5,14 +5,14 @@ title: Enjoy Kremalicious{iPhone} author: Matthias Kretschmann date: 2008-07-11 00:20:22+00:00 -wordpress_id: 85 + categories: - personal tags: - wordpress --- -![](/media/kremaliciousiphone_thumb.png)I'm thrilled to announce that kremalicious.com now uses an iPhone optimized theme. When you browse this website with your iPhone everything will automagically switch to the new kremalicious iPhone theme which is simply called kremalicious{iPhone}. See those hip brackets? +![](../media/kremaliciousiphone_thumb.png)I'm thrilled to announce that kremalicious.com now uses an iPhone optimized theme. When you browse this website with your iPhone everything will automagically switch to the new kremalicious iPhone theme which is simply called kremalicious{iPhone}. See those hip brackets? When the website detects an iPhone or iPod Touch it will automatically switch to another freshly created theme which is absolutely seamless to the user. This detection is done by the wonderful slim iPhone Wordpress plug-in from ContentRobot which was slightly modified by me. @@ -43,7 +43,7 @@ There's neither an active nor a hover state for links on the iPhone which makes # Home Screen Icon -![image](/media/kremalicious-iconiphone.png)I've used a 147x147px icon so the icon looks crisp and sharp on the iPhone screen (because it's a 160dpi screen). You really should use a bigger size than [Apple's recommendation in their iPhone HIG](https://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/chapter_14_section_2.html). You have to provide a png icon without rounded corners and without the highlight shine since the iPhone will render that automatically on the icon. The icon has to be named apple-touch-icon.png and gets automatically detected when put in the root of your website. Additionally you can tell the iPhone the place where the icon is with this link tag in your head section: +![image](../media/kremalicious-iconiphone.png)I've used a 147x147px icon so the icon looks crisp and sharp on the iPhone screen (because it's a 160dpi screen). You really should use a bigger size than [Apple's recommendation in their iPhone HIG](https://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/chapter_14_section_2.html). You have to provide a png icon without rounded corners and without the highlight shine since the iPhone will render that automatically on the icon. The icon has to be named apple-touch-icon.png and gets automatically detected when put in the root of your website. Additionally you can tell the iPhone the place where the icon is with this link tag in your head section: {% highlight html %} diff --git a/content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md b/content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md index c0593c33..b2e3100c 100644 --- a/content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md +++ b/content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md @@ -5,15 +5,15 @@ title: 'New Aperture Plug-In: Nik announces Silver Efex Pro' author: Matthias Kretschmann date: 2008-07-11 19:13:16+00:00 -wordpress_id: 86 + categories: - photography tags: - aperture --- -![image](/media/aperture-plugin128.png)Beside a new version of Color Efex Pro for Capture NX, Nik announced a brand new plug-in for Photoshop and Aperture. [Silver Efex Pro](http://www.niksoftware.com/silverefexpro/usa/entry.php) is a tool to create black & white images with the power and simplicity of the U-Point technology. You can easily fine tune portions of your black & white images. It's also capable of emulating film grain and 18 different types of film while also providing 20 one-click preset styles. But Silver Efex Pro is also capable of color toning the image. +![image](../media/aperture-plugin128.png)Beside a new version of Color Efex Pro for Capture NX, Nik announced a brand new plug-in for Photoshop and Aperture. [Silver Efex Pro](http://www.niksoftware.com/silverefexpro/usa/entry.php) is a tool to create black & white images with the power and simplicity of the U-Point technology. You can easily fine tune portions of your black & white images. It's also capable of emulating film grain and 18 different types of film while also providing 20 one-click preset styles. But Silver Efex Pro is also capable of color toning the image. -[![Nik Silver Efex Pro UI](/media/nik_silverefex_thumb.png)](/media/nik_silverefex.png) +[![Nik Silver Efex Pro UI](../media/nik_silverefex_thumb.png)](../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. diff --git a/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md b/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md index e248a8c6..c76cde38 100644 --- a/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md +++ b/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md @@ -5,7 +5,7 @@ title: 'Wordpress 2.5+: Get Rid of That Sluggish Dashboard' author: Matthias Kretschmann date: 2008-07-15 14:04:46+00:00 -wordpress_id: 87 + categories: - design @@ -14,7 +14,7 @@ tags: - wordpress --- -![Wordpress Logo by kremalicious](/media/wordpress-logo.png)Since Wordpress 2.5 it was nearly impossible for me to log into Wordpress and quickly head over to the write tab. The Dashboard always wants to load a bunch of things in it but this always seemed to fail in my setup and slow things down. And not enough the Dashboard just locks everything up while loading which can take more than one minute. +![Wordpress Logo by kremalicious](../media/wordpress-logo.png)Since Wordpress 2.5 it was nearly impossible for me to log into Wordpress and quickly head over to the write tab. The Dashboard always wants to load a bunch of things in it but this always seemed to fail in my setup and slow things down. And not enough the Dashboard just locks everything up while loading which can take more than one minute. I've searched for a simple way of disabling those feeds, plugins etc. stuff the Wordpress Dashboard tries to fill but it seems you can't disable these from the backend. But there's a quick way for doing this which involves editing your /wp-admin/index-extra.php and uncomment some lines there. This will leave your Dashboard intact while it stops Wordpress from connecting to various sources to screw your blog up when you just want to quickly write something. diff --git a/content/posts/2008-07-23-leaf-life.md b/content/posts/2008-07-23-leaf-life.md index d76b96c0..4c38ceca 100644 --- a/content/posts/2008-07-23-leaf-life.md +++ b/content/posts/2008-07-23-leaf-life.md @@ -2,11 +2,11 @@ layout: photo title: Leaf Life -image: MG_1920.jpg +image: ../media/MG_1920.jpg author: Matthias Kretschmann date: 2008-07-23 20:38:57+00:00 -wordpress_id: 1908 + categories: - photos post_format: diff --git a/content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md b/content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md index db372b6f..cd6917ab 100644 --- a/content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md +++ b/content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md @@ -5,12 +5,12 @@ title: Tips for Journalists Reporting From China author: Matthias Kretschmann date: 2008-08-03 17:10:25+00:00 -wordpress_id: 95 + categories: - photography --- -![Jingjing and Chacha are watching you](/media/jingjing_chacha_kremalicious.jpg) +![Jingjing and Chacha are watching you](../media/jingjing_chacha_kremalicious.jpg) As you may know there's a huge Internet censorship going on in China. Contrary to promises made by chinese authorities and the International Olympic Committee (IOC) this Internet censorship is active during the Olympic Games [even in the international media centre](http://news.bbc.co.uk/2/hi/asia-pacific/7532338.stm). And the [IOC shares the current ideas of censorship in China](http://www.rsf.org/article.php3?id_article=26461). And as in every political system with totalitarian elements there's a good chance you will meet some angry lackeys if you're going to report about topics the chinese authorities don't want you to report. But more important they will threat your sources if their identity gets revealed. So if you want to report about [the water shortage in the villages around Beijing](http://www.voanews.com/english/2008-06-27-voa10.cfm), the [massive air pollution in Beijing](http://english.chosun.com/w21data/html/news/200807/200807300031.html) or about all the forced resettlements going on in China you should consider some security precautions to protect you and your sources. diff --git a/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md b/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md index 75d28c57..f9ea6435 100644 --- a/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md +++ b/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md @@ -5,7 +5,7 @@ title: 'HowTo: Create A Mobile Encrypted Aperture Vault' author: Matthias Kretschmann date: 2008-08-22 18:50:31+00:00 -wordpress_id: 142 + category: photography tags: - aperture @@ -16,7 +16,7 @@ tags: coinhive: true --- -![Niepce's Aperture Vault](/media/niepces_aperture_vault256.png)When on the road I always take a little mobile hard drive with me where all my referenced Aperture Masters from the past years and my mobile Aperture Vault (backing up the un-referenced Masters from the current year) reside. But being little and mobile also means the external hard drive can easily be lost or stolen exposing all my pictures to the thief. To avoid that you can use encryption so in the case of a lost or theft the data is not accessible by the thief. This can easily be done with [sparse bundle disk images](http://db.tidbits.com/article/9673) so you won't have to encrypt the whole hard drive with additional software. +![Niepce's Aperture Vault](../media/niepces_aperture_vault256.png)When on the road I always take a little mobile hard drive with me where all my referenced Aperture Masters from the past years and my mobile Aperture Vault (backing up the un-referenced Masters from the current year) reside. But being little and mobile also means the external hard drive can easily be lost or stolen exposing all my pictures to the thief. To avoid that you can use encryption so in the case of a lost or theft the data is not accessible by the thief. This can easily be done with [sparse bundle disk images](http://db.tidbits.com/article/9673) so you won't have to encrypt the whole hard drive with additional software. 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. @@ -26,7 +26,7 @@ First you have to create the encrypted disk image where the Aperture Vault will Be sure there is no device or volume selected in the sidebar and click on the New Image icon in the toolbar. Set a file name of the disk image and the Volume Name (the name of the mounted disk image on your desktop). Change all the settings as seen in the following screenshot. Be sure to select sparse bundle disk image as the Image Format before changing the volume size. This way you can set a bigger volume size than your physical disk space available on your hard drive. After creation the disk image won't be as big as you have set it with volume size. It will grow as you write files to it. For maximum security (but slower performance) select 256-bit AES encryption in the Encryption drop down menu: -![](/media/securevault3.png) +![](../media/securevault3.png) Finally set the destination where you want to have the disk image created. To make it all mobile choose your mobile hard drive as destination. After clicking Create you will be asked to provide a password for encrypting the disk image. Be sure to click on the little key icon to use Mac OS X built in password generator. Generate a new extra long password. Type in your new password manually in the Verify field and be sure to check "Remember password in my keychain". This is the only time you have to provide the password since it will be saved in your keychain after clicking OK. @@ -40,15 +40,15 @@ Now your newly created sparse bundle disk image ahould be mounted on your deskto Now go to Aperture, choose the Projects tab and click on the little gear wheel at the bottom of the sidebar and choose "Add Vault" from the opened menu. -![](/media/securevault2.png) +![](../media/securevault2.png) In the opened dialogue select your mounted disk image under the devices section in your sidebar, give it a name and click Add. -![](/media/securevault4.png) +![](../media/securevault4.png) The new Vault will be added to your Vault list and is now to ready to be updated. -![](/media/securevault5.png) +![](../media/securevault5.png) 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. diff --git a/content/posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md b/content/posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md index eee80418..5bb58ed5 100644 --- a/content/posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md +++ b/content/posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md @@ -5,14 +5,14 @@ title: Noise Ninja finally available for Apple Aperture author: Matthias Kretschmann date: 2008-08-22 14:51:02+00:00 -wordpress_id: 120 + categories: - photography tags: - aperture --- -![image](/media/aperture-plugin128.png)Earlier this month [PictureCode](http://www.picturecode.com) finally released their noise reduction software [Noise Ninja](http://www.picturecode.com/media.htm) as an Aperture plug-in for Aperture 2.1 and above. +![image](../media/aperture-plugin128.png)Earlier this month [PictureCode](http://www.picturecode.com) finally released their noise reduction software [Noise Ninja](http://www.picturecode.com/media.htm) as an Aperture plug-in for Aperture 2.1 and above. The results are just as amazing as they are with the Photoshop plug-in. But the Aperture plug-in uses a streamlined interface which differs from the photoshop version. But the functionality is the same. diff --git a/content/posts/2008-08-22-the-kremalicious-marsedit-style.md b/content/posts/2008-08-22-the-kremalicious-marsedit-style.md index 79515d82..262577e6 100644 --- a/content/posts/2008-08-22-the-kremalicious-marsedit-style.md +++ b/content/posts/2008-08-22-the-kremalicious-marsedit-style.md @@ -5,22 +5,22 @@ title: The Kremalicious MarsEdit Style author: Matthias Kretschmann date: 2008-08-22 17:04:19+00:00 -wordpress_id: 122 + categories: - goodies --- -![The Kremalicious MarsEdit Style](/media/marsedit_kremalicious.png)Personally I blog everything with RedSweater's awesome application [MarsEdit](http://www.red-sweater.com/marsedit/). MarsEdit has a cool preview window included where you can see your writing live while you type. The formatting of this preview is based on simple HTML and CSS so the style is pretty customizable. +![The Kremalicious MarsEdit Style](../media/marsedit_kremalicious.png)Personally I blog everything with RedSweater's awesome application [MarsEdit](http://www.red-sweater.com/marsedit/). MarsEdit has a cool preview window included where you can see your writing live while you type. The formatting of this preview is based on simple HTML and CSS so the style is pretty customizable. A while ago I've made a custom style for the blog on kremalicious.com and would like to share this style with you. The style is based on the colors used on kremalicious.com with a black background and light grey text on top of it. The links have the same blueish hover style as on my website: -[![The Kremalicious MarsEdit Style](/media/marsedit_kremalicious_big.png)](/media/marsedit_kremalicious_big.png) +[![The Kremalicious MarsEdit Style](../media/marsedit_kremalicious_big.png)](../media/marsedit_kremalicious_big.png) Here's how to apply the style for your blog preview in MarsEdit: In MarsEdit main window right-click (or ctrl + click) in the sidebar on the blog where you want to have my style applied to and choose Edit Preview Template. The Preview Template editor should open where you can customize the style of the preview with the css instructions in the header. -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): +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): {% highlight html %} diff --git a/content/posts/2008-08-26-icy-box-icons.md b/content/posts/2008-08-26-icy-box-icons.md index e1478526..52643aaa 100644 --- a/content/posts/2008-08-26-icy-box-icons.md +++ b/content/posts/2008-08-26-icy-box-icons.md @@ -2,12 +2,12 @@ layout: post title: Icy Box Icons -image: Teaser-Icy-Box.jpg -download: icybox_by_kremalicious.zip +image: ../media/Teaser-Icy-Box.jpg +download: ../media/icybox_by_kremalicious.zip author: Matthias Kretschmann date: 2008-08-26 19:16:38+00:00 -wordpress_id: 146 + categories: - goodies tags: @@ -32,4 +32,4 @@ The whole package includes 7 icons either packed in a nice tagged iContainer for * Leopard ready (512x512) * including 7 icons with 2 Time Machine versions -[![Icy Box Icons](/media/icybox_teaser2_small.png)](/media/icybox_teaser2.jpg) +[![Icy Box Icons](../media/icybox_teaser2_small.png)](../media/icybox_teaser2.jpg) diff --git a/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md b/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md index 8bd04701..92eb8394 100644 --- a/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md +++ b/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md @@ -5,20 +5,20 @@ title: 'Architect and Façade: Theming For Leopard' author: Matthias Kretschmann date: 2008-08-28 09:54:06+00:00 -wordpress_id: 156 + category: design tags: - osx - macos --- -![Architect icon](/media/architect-icon.jpg)There's good news for all you Mac OS X Leopard GUI Themer out there. While there's Panic's [Candybar](http://www.panic.com/candybar) for icon customization in OS X there is no application to alter all the user interface elements of Leopard. In Tiger there was an application called ShapeShifter but since the whole GUI in Leopard changed it stopped working. Architect and Façade to the rescue. +![Architect icon](../media/architect-icon.jpg)There's good news for all you Mac OS X Leopard GUI Themer out there. While there's Panic's [Candybar](http://www.panic.com/candybar) for icon customization in OS X there is no application to alter all the user interface elements of Leopard. In Tiger there was an application called ShapeShifter but since the whole GUI in Leopard changed it stopped working. Architect and Façade to the rescue. [SlightlyPretentious](http://www.slightlypretentious.com/) announced its "Theming made easy"-application Architect is coming as a public beta next sunday (is it 08/31 or 09/07?) on Wednesday, September 3rd. Icon Designer Laurent Baumann already posted [a new sweet application icon](http://www.flickr.com/photos/avetenebrae/2669353476/) for this app a while ago and we can expect a nice and good looking solution for theming and customization in Leopard. Head over to [the Screencast](http://www.slightlypretentious.com/) and see Architect and its UI in action. -![Architect UI](/media/architect-ui.png) +![Architect UI](../media/architect-ui.png) While Architect will help you customizing Leopards UI and building themes out of your modifications, Façade ([Laurent's icon of it](http://www.flickr.com/photos/avetenebrae/2665823420/in/photostream/)) will help you switch (and manage?) the themes. But currently there's no word on the [SlightlyPretentious](http://www.slightlypretentious.com/) website about this application. @@ -29,4 +29,4 @@ Still no sight of Façade anywhere except the [note of a Lead Developer change]( But meanwhile another theme manager was released: [Magnifique](http://magnifique.pcwizcomputer.com/), available as a free download. -![Magnifique UI](/media/magnifique-ui.png) +![Magnifique UI](../media/magnifique-ui.png) diff --git a/content/posts/2008-08-28-canon-eos-50d-new-lens-announced.md b/content/posts/2008-08-28-canon-eos-50d-new-lens-announced.md index 0297efd6..fb9ee98a 100644 --- a/content/posts/2008-08-28-canon-eos-50d-new-lens-announced.md +++ b/content/posts/2008-08-28-canon-eos-50d-new-lens-announced.md @@ -5,12 +5,12 @@ title: Canon EOS 50D And New Lens Officially Announced author: Matthias Kretschmann date: 2008-08-28 11:28:33+00:00 -wordpress_id: 168 + categories: - photography --- -[![EOS 50D back](/media/eos_50D_front_thumb.png)](/media/eos_50D_front.png)The successor of the EOS 40D is (almost) here: Canon [officially announced](http://www.usa.canon.com/templatedata/pressrelease/20080826_eos50d.html) the Canon EOS 50D along with the new lens Canon EF-S 18-200/3.5-5.6IS. The EOS 50D and the new lens will be both available in October 2008, Canon says. +[![EOS 50D back](../media/eos_50D_front_thumb.png)](../media/eos_50D_front.png)The successor of the EOS 40D is (almost) here: Canon [officially announced](http://www.usa.canon.com/templatedata/pressrelease/20080826_eos50d.html) the Canon EOS 50D along with the new lens Canon EF-S 18-200/3.5-5.6IS. The EOS 50D and the new lens will be both available in October 2008, Canon says. The EOS 50D comes with an CMOS APS-C sized sensor (crop factor 1.6) with 15.1 megapixels. Being Canons first DSLR with the new DIGIC 4 image processor the EOS 50D can burst 6.3 shots per second with improved image quality. @@ -18,12 +18,12 @@ The EOS 50D comes with an CMOS APS-C sized sensor (crop factor 1.6) with 15.1 me The "EOS Integrated Cleaning Systems" gets a new fluorine layer and now works in three steps to clean the sensor. With 35 metering zones and 9 cross type Autofocus zones the Autofocus specifications are the same as found in the EOS 40D. -[![EOS 50D back](/media/eos_50D_back_thumb.png)](/media/eos_50D_back.png)The basic ISO range goes from 100 - 3200 while those values can be "boosted" to ISO 6400 and 12800. The integrated noise reduction can be adjusted in four grades. The LCD display is now 3 inches big with 920,000 pixels (VGA) with a Live View Mode. +[![EOS 50D back](../media/eos_50D_back_thumb.png)](../media/eos_50D_back.png)The basic ISO range goes from 100 - 3200 while those values can be "boosted" to ISO 6400 and 12800. The integrated noise reduction can be adjusted in four grades. The LCD display is now 3 inches big with 920,000 pixels (VGA) with a Live View Mode. The EOS 50D is prized at US$1399 (1299€) for just the body and it will be available as a kit with the EF 28-135 3.5-5.6 IS USM for US$1599. If you're interested in all the details and specifications have a look at [Bob Atkins article about the official announcement of the EOS 50D](http://www.bobatkins.com/photography/digital/canon_eos_50D.html). -[![EF-S 18-200/3.5-5.6 IS](/media/efs_18-200_thumb.png)](/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€). +[![EF-S 18-200/3.5-5.6 IS](../media/efs_18-200_thumb.png)](../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. diff --git a/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md b/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md index 6432f01a..be3f3f82 100644 --- a/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md +++ b/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md @@ -3,10 +3,10 @@ layout: post title: 'A New Browser Is Coming: Google Chrome' author: Matthias Kretschmann -image: googlechrome.png +image: ../media/googlechrome.png date: 2008-09-01 20:40:38+00:00 -wordpress_id: 197 + categories: - design @@ -30,7 +30,7 @@ Update 2: Google Chrome can now be downloaded for Windows from [google.com/chrom Update 3: Google Chrome seems to have problems with some of my transparent PNGs: -![Chrome UI](/media/chrome-ui.png) +![Chrome UI](../media/chrome-ui.png) Update 4: There are some nice articles about various aspects of Chrome available in the web: diff --git a/content/posts/2008-09-23-a-long-time-ago.md b/content/posts/2008-09-23-a-long-time-ago.md index 9fcacc44..1c7b41bc 100644 --- a/content/posts/2008-09-23-a-long-time-ago.md +++ b/content/posts/2008-09-23-a-long-time-ago.md @@ -2,11 +2,11 @@ layout: photo title: A Long Time Ago... -image: A-Long-Time-Ago.jpg +image: ../media/A-Long-Time-Ago.jpg author: Matthias Kretschmann date: 2008-09-23 20:33:48+00:00 -wordpress_id: 1905 + category: photos tags: - mac diff --git a/content/posts/2008-09-23-futurama-mars-university-wallpaper.md b/content/posts/2008-09-23-futurama-mars-university-wallpaper.md index 9209a493..3181563b 100644 --- a/content/posts/2008-09-23-futurama-mars-university-wallpaper.md +++ b/content/posts/2008-09-23-futurama-mars-university-wallpaper.md @@ -2,11 +2,11 @@ layout: post title: Futurama Mars University Wallpaper -image: Teaser-Mars-U.jpg +image: ../media/Teaser-Mars-U.jpg author: Matthias Kretschmann date: 2008-09-23 23:22:16+00:00 -wordpress_id: 256 + category: goodies tags: - wallpaper diff --git a/content/posts/2008-10-23-coffee-cup-icon.md b/content/posts/2008-10-23-coffee-cup-icon.md index fb97e297..9a617d7c 100644 --- a/content/posts/2008-10-23-coffee-cup-icon.md +++ b/content/posts/2008-10-23-coffee-cup-icon.md @@ -2,12 +2,12 @@ layout: post title: Coffee Cup Icon -image: Teaser-Coffee-Cup-Icon.jpg -download: coffee_cup_by_kremalicious.zip +image: ../media/Teaser-Coffee-Cup-Icon.jpg +download: ../media/coffee_cup_by_kremalicious.zip author: Matthias Kretschmann date: 2008-10-23 14:59:23+00:00 -wordpress_id: 1817 + categories: - goodies tags: diff --git a/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md b/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md index d2ea267e..1ad8d914 100644 --- a/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md +++ b/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md @@ -3,10 +3,10 @@ layout: post title: The Finest Coffee Cups - Most Incredible Coffee Icons On The Web author: Matthias Kretschmann -image: coffee-cup-icon-kremalicious.png +image: ../media/coffee-cup-icon-kremalicious.png date: 2008-10-23 02:23:39+00:00 -wordpress_id: 277 + categories: - design --- @@ -23,7 +23,7 @@ Please note that these icons are the property of their respective owners and you A bunch of colorful cups of coffee. -[![Coffee Cup icons by Susumo Yoshida](/media/coffee-showcase-susumo.png)](http://www.mcdodesign.com/?page_id=22) +[![Coffee Cup icons by Susumo Yoshida](../media/coffee-showcase-susumo.png)](http://www.mcdodesign.com/?page_id=22) @@ -32,7 +32,7 @@ A bunch of colorful cups of coffee. A hyperrealistic icon from Vegrafik -[![CoffeeCon icon by Vegrafik](/media/coffee-showcase-vegrafik.png)](http://macthemes2.net/forum/viewtopic.php?id=16789993) +[![CoffeeCon icon by Vegrafik](../media/coffee-showcase-vegrafik.png)](http://macthemes2.net/forum/viewtopic.php?id=16789993) @@ -41,7 +41,7 @@ A hyperrealistic icon from Vegrafik In a fit of megalomania I declared my icon as incredible and included it here. Originally I've made the coffee cup for the donations button on kremalicious.com. -[![Coffee Cup Icon by kremalicious](/media/coffee-showcase-kretschmann.png)](/coffee-cup-icon) +[![Coffee Cup Icon by kremalicious](../media/coffee-showcase-kretschmann.png)](/coffee-cup-icon) @@ -50,7 +50,7 @@ In a fit of megalomania I declared my icon as incredible and included it here. O The one and only Mac OS X system replacement icon set has some coffee folders too. -[![Coffee folders from Agua Icons by David Lanham](/media/coffee-showcase-lanham.png)](http://dlanham.com/art/agua/) +[![Coffee folders from Agua Icons by David Lanham](../media/coffee-showcase-lanham.png)](http://dlanham.com/art/agua/) @@ -59,14 +59,14 @@ The one and only Mac OS X system replacement icon set has some coffee folders to Coffee in a metal cup. Sadly Dave didn't updated his World of Aqua icon pack with bigger sizes so it's just 128px. -[![Kaffe! icon from World of Aqua 3 icon set by Dave Brasgalla](/media/coffee-showcase-brasgalla.png)](http://iconfactory.com/freeware/preview/woa3) +[![Kaffe! icon from World of Aqua 3 icon set by Dave Brasgalla](../media/coffee-showcase-brasgalla.png)](http://iconfactory.com/freeware/preview/woa3) ## Starbucks coffee icon by Rok Benedik -[![Starbucks coffee icon by Benedik](/media/coffee-showcase-benedik.png)](http://benedik.deviantart.com/art/Starbucks-coffee-icons-96173293) +[![Starbucks coffee icon by Benedik](../media/coffee-showcase-benedik.png)](http://benedik.deviantart.com/art/Starbucks-coffee-icons-96173293) @@ -75,7 +75,7 @@ Coffee in a metal cup. Sadly Dave didn't updated his World of Aqua icon pack wit Also Jonas used coffee as the metaphor for the work folder (supposedly) and made clear he likes very big coffee cups. -[![Coffee folders from the Maji sets by Jonas Rask](/media/coffee-showcase-rask1.png)](http://www.jonasraskdesign.com/medias/medias.html) +[![Coffee folders from the Maji sets by Jonas Rask](../media/coffee-showcase-rask1.png)](http://www.jonasraskdesign.com/medias/medias.html) @@ -84,14 +84,14 @@ Also Jonas used coffee as the metaphor for the work folder (supposedly) and made Does this application need any introduction? Although not released yet the new web-coding application from MacRabbit drew a lot of attention. The icon is one of the reasons for that. -[![Espresso icon by MacRabbit](/media/coffee-showcase-macrabbit.png)](http://macrabbit.com/espresso/) +[![Espresso icon by MacRabbit](../media/coffee-showcase-macrabbit.png)](http://macrabbit.com/espresso/) ## Coffee folders from the Pry system sets by Jonas Rask Another folder-combined-with-coffee icon by Jonas. -[![Coffee folders from the Pry system sets by Jonas Rask](/media/coffee-showcase-rask2.png)](http://www.jonasraskdesign.com/medias/medias.html) +[![Coffee folders from the Pry system sets by Jonas Rask](../media/coffee-showcase-rask2.png)](http://www.jonasraskdesign.com/medias/medias.html) @@ -100,7 +100,7 @@ Another folder-combined-with-coffee icon by Jonas. A glass coffee cup which is [wildly used](http://abduzeedo.com/amazing-photoshop-light-effect-10-steps) on the web. Created for Windows so the icons are just 256px in size. -[![Coffee icons from Office Space icon set by VisualPharm](/media/coffee-showcase-visualpharm.png)](http://www.visualpharm.com/office_space.html) +[![Coffee icons from Office Space icon set by VisualPharm](../media/coffee-showcase-visualpharm.png)](http://www.visualpharm.com/office_space.html) @@ -109,14 +109,14 @@ A glass coffee cup which is [wildly used](http://abduzeedo.com/amazing-photoshop An icon set made in collaboration between [Alejandro Lopez](http://www.dimensionofdeskmod.net/medias/) & [Sergio Ruiz](http://www.camtessadesign.com/descargas/ver/the_coffee_shop) with icons related to a coffee shop. -[![The Coffee Shop icon set by Alejandro Lopez & Sergio Ruiz](/media/coffee-showcase-lopezruiz.png)](http://RuizDesign.deviantart.com/art/The-Coffee-Shop-89457309) +[![The Coffee Shop icon set by Alejandro Lopez & Sergio Ruiz](../media/coffee-showcase-lopezruiz.png)](http://RuizDesign.deviantart.com/art/The-Coffee-Shop-89457309) ## Espresso icon by Iiro Jäppinen -[![Espresso icon by Iiro Jäppinen](/media/coffee-showcase-jaeppinen.png)](http://iirojappinen.com/medias.html) +[![Espresso icon by Iiro Jäppinen](../media/coffee-showcase-jaeppinen.png)](http://iirojappinen.com/medias.html) @@ -125,7 +125,7 @@ An icon set made in collaboration between [Alejandro Lopez](http://www.dimension Not an icon but the coffee cup drawn in this wallpaper from Michael Flarup would make a good one. The detail of the cup is stunning. -[![Coffee Wallpaper by Michael Flarup](/media/coffee-showcase-flarup.png)](http://pixelresort.com/wallpapers/) +[![Coffee Wallpaper by Michael Flarup](../media/coffee-showcase-flarup.png)](http://pixelresort.com/wallpapers/) @@ -134,7 +134,7 @@ Not an icon but the coffee cup drawn in this wallpaper from Michael Flarup would Bean is a free word processor for Mac OS X and Laurent Baumann included a nice coffee cup in the application icon for it. -[![Bean icon by Laurent Baumann](/media/coffee-showcase-baumann.png)](http://www.bean-osx.com/Bean.html) +[![Bean icon by Laurent Baumann](../media/coffee-showcase-baumann.png)](http://www.bean-osx.com/Bean.html) @@ -143,7 +143,7 @@ Bean is a free word processor for Mac OS X and Laurent Baumann included a nice c Nice shiny coffee cups with a lot of detail in the reflections. Sadly just in 128px size maximum. Maybe you can [persuade mat-u to update this icon with bigger sizes.](http://www.mat-u.com/) -[![Have A Break icons by mat-u](/media/coffee-showcase-matu.png)](http://mat-u.deviantart.com/art/Have-A-Break-Icons-54326598) +[![Have A Break icons by mat-u](../media/coffee-showcase-matu.png)](http://mat-u.deviantart.com/art/Have-A-Break-Icons-54326598) @@ -152,7 +152,7 @@ Nice shiny coffee cups with a lot of detail in the reflections. Sadly just in 12 Apple uses a nice coffee cup in their Java applications which can be found in the Utilities folder. Thanks to [David](http://dlanham.com/) for pointing this out. -![Java Application icons by Apple](/media/coffee-showcase-apple.png) +![Java Application icons by Apple](../media/coffee-showcase-apple.png) @@ -161,7 +161,7 @@ Apple uses a nice coffee cup in their Java applications which can be found in th Trevor Kay made the new icon for Caffeine. This application prevents your Mac from automatically going to sleep. Trevor also made [some additional icons for Caffeine](http://God-X.deviantart.com/art/Caffeine-Replacement-Icons-75619389) although the coffee cup looks pretty much the same as the one from Apple's Java application icons. -[![Caffeine icon by Trevor Kay](/media/coffee-showcase-kaycaffeine.png)](http://lightheadsw.com/caffeine/) +[![Caffeine icon by Trevor Kay](../media/coffee-showcase-kaycaffeine.png)](http://lightheadsw.com/caffeine/) @@ -170,7 +170,7 @@ Trevor Kay made the new icon for Caffeine. This application prevents your Mac fr Some comic style icons which deviate from the realism of all the other coffee icons. Sadly just available in 128px size. -[![Coffee and Tea icons by Kate England](/media/coffee-showcase-england.png)](http://iconfactory.com/freeware/preview/cofe) +[![Coffee and Tea icons by Kate England](../media/coffee-showcase-england.png)](http://iconfactory.com/freeware/preview/cofe) @@ -179,7 +179,7 @@ Some comic style icons which deviate from the realism of all the other coffee ic Dave made an icon set for the Iconfactory inspired by the classic sci-fi television series of the 70's and included a Moon Coffee cup. Also just in 128px size. -[![Moon Coffee icon from Space: 1999 icon set by Dave Brasgalla](/media/coffee-showcase-brasgalla2.png)](http://iconfactory.com/freeware/preview/1999) +[![Moon Coffee icon from Space: 1999 icon set by Dave Brasgalla](../media/coffee-showcase-brasgalla2.png)](http://iconfactory.com/freeware/preview/1999) @@ -188,7 +188,7 @@ Dave made an icon set for the Iconfactory inspired by the classic sci-fi televis Acrylic Software's "new type of newsreader for Mac OS X Leopard" called [Times](http://www.acrylicapps.com/times/) uses a gorgeous icon made by Mikio Inose. -[![Times Application Icon by Mikio Inose](/media/coffee-showcase-times.png)](http://www.mikworks.com/clientwork/times/) +[![Times Application Icon by Mikio Inose](../media/coffee-showcase-times.png)](http://www.mikworks.com/clientwork/times/) @@ -197,7 +197,7 @@ Acrylic Software's "new type of newsreader for Mac OS X Leopard" called [Times]( One delicious full and one empty cappuccino cup re available in this icon set made by Creative 9 Design. Available just in 256px from their [blog](http://www.c9-d.com/blog/view/63). -[![Do you love Cappuccino? by Creative 9 Design](/media/coffee-showcase-lovecappu.png)](http://www.c9-d.com/blog/view/63) +[![Do you love Cappuccino? by Creative 9 Design](../media/coffee-showcase-lovecappu.png)](http://www.c9-d.com/blog/view/63) @@ -206,7 +206,7 @@ One delicious full and one empty cappuccino cup re available in this icon set ma Not a coffee cup but also very coffee related is this awesome Cappuccino machine icon (although it shows an Espresso machine) made by [Sofa](http://www.madebysofa.com) for the Cappuccino framework. -[![Cappuccino Framework Icon by Sofa](/media/coffee-showcase-cappuccinosofa.png)](http://cappuccino.org/) +[![Cappuccino Framework Icon by Sofa](../media/coffee-showcase-cappuccinosofa.png)](http://cappuccino.org/) @@ -217,16 +217,16 @@ 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. - * ![](/media/coffee-showcase-tut-psdtuts.png)[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/) + * ![](../media/coffee-showcase-tut-psdtuts.png)[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/). - * ![](/media/coffee-showcase-tut-houle.png)[Design A Coffee Mug Icon](http://www.myinkblog.com/2008/08/02/design-a-coffee-mug-icon/) + * ![](../media/coffee-showcase-tut-houle.png)[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. - * ![](/media/coffee-showcase-tut-vectuts.png)[Creating a Coffee Cup with Inkscape](http://vectortuts.com/illustration/creating-a-coffee-cup-with-inkscape/) + * ![](../media/coffee-showcase-tut-vectuts.png)[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. - * ![](/media/coffee-showcase-tut-abduzeedo.png)[Amazing Photoshop Light Effect In 10 Steps](http://abduzeedo.com/amazing-photoshop-light-effect-10-steps) + * ![](../media/coffee-showcase-tut-abduzeedo.png)[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). diff --git a/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md b/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md index 4b57f1ed..70879947 100644 --- a/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md +++ b/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md @@ -3,10 +3,10 @@ layout: post title: The Definite Guide To Watermarks In Apple Aperture author: Matthias Kretschmann -image: watermark_aperture.jpg +image: ../media/watermark_aperture.jpg date: 2008-10-26 16:05:58+00:00 -wordpress_id: 318 + categories: - photography tags: @@ -27,7 +27,7 @@ In this article I will lay out every way I've found to add watermarks to your im 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/). -![Aperture Watermark](/media/watermark_8.png) +![Aperture Watermark](../media/watermark_8.png) 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. @@ -57,7 +57,7 @@ Because of Aperture's workflow design you're always free to open up your image i Now you can just right click or ctrl + click on every image to open the context menu and choose Edit With whereas the first entry will be your external editor set in the preferences. Aperture will automatically render your image creating a new file and opens that up. Just add a new text layer in your external editor, type in your preferred text and save the file from there. Aperture will update with the changes accordingly. -![Aperture Watermark example 5](/media/watermark_5.png) +![Aperture Watermark example 5](../media/watermark_5.png) @@ -83,7 +83,7 @@ But since Aperture always creates a psd or tiff file for that you will end up wi But it has some powerful features in terms of watermarking: It can read out some IPTC fields to use the text as your copyright text, it is capable of saving presets and you can open several images at once in the plug-in window. So it works similar to Aperture's built-in watermarking feature but gives you full control over the watermark look without leaving Aperture. -![Aperture BorderFX](/media/aperture_borderfx.png) +![Aperture BorderFX](../media/aperture_borderfx.png) @@ -101,7 +101,7 @@ But you can't see your changes made in the plug-in on the images in your library With the release of Aperture 2.1 and its Edit Plug-In architecture Apple also released some sample plug-ins which aren't included in Aperture (just the Dodge & Burn plug-in is). But you can easily [download it from Apple’s Developer Connection website without registration](http://developer.apple.com/samplecode/BordersAndTitles/index.html) for free. -![Borders & Titles](/media/aperture_bt.png) +![Borders & Titles](../media/aperture_bt.png) @@ -118,7 +118,7 @@ As with every Edit Plug-In every time you fire up an image with this plug-in Ape [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) -![Impression Watermark Plug-In](/media/aperture-impression.png) +![Impression Watermark Plug-In](../media/aperture-impression.png) 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. diff --git a/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md b/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md index 513be3ce..0dc3120a 100644 --- a/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md +++ b/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md @@ -5,7 +5,7 @@ title: 'HowTo: Set A Custom Gravatar Image In Wordpress 2.7+' author: Matthias Kretschmann date: 2008-12-11 22:59:06+00:00 -wordpress_id: 344 + categories: - design @@ -19,7 +19,7 @@ redirect_from: - /2008/12/how-to-set-a-custom-gravatar-image-in-wordpress-27/ --- -![Wordpress Logo by kremalicious](/media/wordpress-logo.png) +![Wordpress Logo by kremalicious](../media/wordpress-logo.png) Sure enough I've upgraded immediately when [Wordpress 2.7 was released](http://wordpress.org/development/2008/12/coltrane/). Among all the other things that changed in this new version the comments functions got a massive overhaul. But the [new comment loop](http://codex.wordpress.org/Migrating_Plugins_and_Themes_to_2.7/Enhanced_Comment_Display#The_Comments_Loop) with the [new function ``](http://codex.wordpress.org/Template_Tags/wp_list_comments) lacks the ability to quickly set a custom default gravatar or avatar image. But with some help of the functions.php file we can set the default gravatar image in the Discussion settings in the Wordpress backend. Before Wordpress 2.7 I achieved a custom gravatar image on kremalicious.com with this code placed in the comments.php template file: @@ -55,7 +55,7 @@ But we can use the functions.php file in your template directory and add some li Just set a name for your custom Gravatar image to show up beside the image in the Wordpress back-end. The code above assumes you have your custom default gravatar image inside a folder called images inside your template directory. Change it to your environment if neccessary. After that a new entry in the Wordpress backend under Settings > Discussions will appear with the custom image specified: -![custom gravatar](/media/custom-gravatar.jpg) +![custom gravatar](../media/custom-gravatar.jpg) And you can adjust the displayed size of the gravatar image by adding a parameter to `` function in your comments.php file: diff --git a/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md b/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md index c59a8f7a..9994cae4 100644 --- a/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md +++ b/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md @@ -5,7 +5,7 @@ title: 'HowTo: Styling Author Comments With Wordpress 2.7+' author: Matthias Kretschmann date: 2008-12-13 16:47:43+00:00 -wordpress_id: 360 + categories: - design @@ -16,7 +16,7 @@ tags: coinhive: true --- -![Wordpress Logo by kremalicious](/media/wordpress-logo.png) +![Wordpress Logo by kremalicious](../media/wordpress-logo.png) Since my update to Wordpress 2.7 I'm pretty much into all the new comments stuff. As [I've written before](http://www.kremalicious.com/2008/12/how-to-set-a-custom-gravatar-image-in-wordpress-27/), the comment functionality changed dramatically with Wordpress 2.7. This makes writing a comments template much easier but if you used Worpress prior to 2.7 you have to change some things to work again. Beside other things this includes [Gravatar styling](http://www.kremalicious.com/2008/12/how-to-set-a-custom-gravatar-image-in-wordpress-27/) and also adding different styling to comments from the author of an article. In this article I will show you how to realize the latter with Wordpress 2.7 and above. Let's start by looking at the code to achieve styling of author comments prior to Wordpress 2.7. On kremalicious.com I've used this code: diff --git a/content/posts/2009-01-05-the-mac-in-futurama.md b/content/posts/2009-01-05-the-mac-in-futurama.md index 2147d0f7..485e74bb 100644 --- a/content/posts/2009-01-05-the-mac-in-futurama.md +++ b/content/posts/2009-01-05-the-mac-in-futurama.md @@ -5,7 +5,7 @@ title: The Mac in Futurama author: Matthias Kretschmann date: 2009-01-05 03:14:45+00:00 -image: futurama-mac-teaser.png +image: ../media/futurama-mac-teaser.png category: design tags: - futurama @@ -13,8 +13,7 @@ tags: coinhive: true -slug: the-mac-in-futurama -wordpress_id: 440 + --- Time for some Mac Futurama crossover geekiness! In a fun watching process I've compiled a list of all the references to Apple's Macintosh and other Apple products. In Futurama we mainly see references to the old, classic Macs running [System 6](http://en.wikipedia.org/wiki/Apple_System_Software_6), [System 7](http://en.wikipedia.org/wiki/System_7) or [OS 9](http://en.wikipedia.org/wiki/Mac_OS_9) ending with the colorful iMac G3. This is likely caused by the timeframe in which Matt Groening and David X. Cohen developed the first season of Futurama (1997-1999). @@ -25,232 +24,120 @@ For orientation: I've followed the original four season production cycle and not _All screens (C) 1999 by Twentieth Century Fox Film Corp._ - - ## Season 1 - ## 1ACV02 - The Series Has Landed - - The moon farmer introduces his three robot daughters. One of them is named "Daisy May 128k" as a reference to the first [Macintosh 128k](http://en.wikipedia.org/wiki/Macintosh_128K). -![Daisy May 128k](/media/futurama-mac-01.png) - - +![Daisy May 128k](../media/futurama-mac-01.png) ## 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? The sound to start the daily human hunt is the [Mac startup chime](http://musicthing.blogspot.com/2005/05/tiny-music-makers-pt-4-mac-startup.html) composed by [Jim Reekes ](http://en.wikipedia.org/wiki/Jim_Reekes) and first used in 1991 on the [Macintosh Quadra 700](http://en.wikipedia.org/wiki/Macintosh_Quadra_700). Maybe the [Chime of Death](http://en.wikipedia.org/wiki/Chimes_of_Death) would be more suitable for that. -![Mac startup chime](/media/futurama-mac-02.png) +![Mac startup chime](../media/futurama-mac-02.png) The judge is a not so friendly Macintosh 128k with a classic Mac OS Finder face. It uses Mac OS interface elements while judging and freezing at it. -![Macintosh 128k judge](/media/futurama-mac-03.png) +![Macintosh 128k judge](../media/futurama-mac-03.png) But the robots have some cool computer voodoo to get him back judging without the need of a restart. -![Macintosh 128k judge freeze](/media/futurama-mac-04.png) - -This one can be just coincidence or no Mac reference at all. The colors of the eyes and the mouths of the robot elders look pretty familiar to the [iMac G3 color flavors](http://www.apple.com/pr/photos/iMac/imaccolors.html) or the [original iBook colors](http://www.theapplecollection.com/iMac/iBook2.html) although there never was a yellow iMac (or iBook). ![Robot elders iBook colors](/media/futurama-mac-05.png) - +![Macintosh 128k judge freeze](../media/futurama-mac-04.png) +This one can be just coincidence or no Mac reference at all. The colors of the eyes and the mouths of the robot elders look pretty familiar to the [iMac G3 color flavors](http://www.apple.com/pr/photos/iMac/imaccolors.html) or the [original iBook colors](http://www.theapplecollection.com/iMac/iBook2.html) although there never was a yellow iMac (or iBook). ![Robot elders iBook colors](../media/futurama-mac-05.png) ## 1ACV10 A Flight to Remember - - The robot guy on the bar mixes sad Bender a drink out of Jägermeister and some Pennzoil product. He is named iZac as a reference to the Apple iMac or more generally for the "i"-brand. Beside that iZac is written in kind of the same font (variant of [ITC Garamond](http://new.myfonts.com/fonts/itc/garamond/), thanks [Schoschie](http://www.kremalicious.com/2009/01/the-mac-in-futurama/#comment-48831)) as in [Apple's Think Different tagline and campaigns](http://web.archive.org/web/20010228171255/www.apple.com/thinkdifferent/). Furthermore (but non-Mac related) iZac is also a reference to Isaac the bartender from the TV series love boat from 1977, as ["yeah" pointed out in the comments](http://www.kremalicious.com/2009/01/the-mac-in-futurama/#comment-37416). Thanks yeah! -![iZac](/media/futurama-mac-06.png) - - +![iZac](../media/futurama-mac-06.png) ## 1ACV11 Mars University - - -The Robot House fraternity is spying at a Macintosh 128k in the girls bed rooms. ![spying at a Macintosh 128k](/media/futurama-mac-07.png) - - +The Robot House fraternity is spying at a Macintosh 128k in the girls bed rooms. ![spying at a Macintosh 128k](../media/futurama-mac-07.png) ## 1ACV12 - When Aliens Attack - - -The crew searches the Internet on a Mac OS system for facts about the TV series Single Female Lawyer. ![Single Female Lawyer](/media/futurama-mac-08.png) - - +The crew searches the Internet on a Mac OS system for facts about the TV series Single Female Lawyer. ![Single Female Lawyer](../media/futurama-mac-08.png) ## Season 2 - - - - ## 2ACV09 A Bicyclops Built For Two +Bender choses a disguise while being in the Internet. He does this with a Mac style menu. ![Internet disguise](../media/futurama-mac-09.png) - -Bender choses a disguise while being in the Internet. He does this with a Mac style menu. ![Internet disguise](/media/futurama-mac-09.png) - -Alcasar submits Leela a video message which is played on Leelas display in a classic Mac OS styled window. ![Alcasar](/media/futurama-mac-10.png) - - +Alcasar submits Leela a video message which is played on Leelas display in a classic Mac OS styled window. ![Alcasar](../media/futurama-mac-10.png) ## 2ACV15 The Problem With Popplers - - -Hermes finds the name Popplers while searching the Internet on an iBook G3 with a weird antenna on top of it. ![Searching Popplers](/media/futurama-mac-11.png) - - +Hermes finds the name Popplers while searching the Internet on an iBook G3 with a weird antenna on top of it. ![Searching Popplers](../media/futurama-mac-11.png) ## 2ACV17 War Is The H-Word - - -Earth attacks the balls on Spheron 1 and a robot surgeon named iHawk operates the injured earthlings with a Martini in his hands. ![iHawk](/media/futurama-mac-12.png) - - +Earth attacks the balls on Spheron 1 and a robot surgeon named iHawk operates the injured earthlings with a Martini in his hands. ![iHawk](../media/futurama-mac-12.png) ## Season 3 - - - - ## 3ACV04 The Luck Of The Fryrish - - -Again the crew searches the Internet with a classic Mac OS interface. ![Internet Mac OS style](/media/futurama-mac-13.png) - - +Again the crew searches the Internet with a classic Mac OS interface. ![Internet Mac OS style](../media/futurama-mac-13.png) ## 3ACV06 Bendless Love - - -The Bending School for robots seems to be running on Mac OS because it uses a Mac OS interface progress bar. ![Mac OS Bending School](/media/futurama-mac-14.png) - - +The Bending School for robots seems to be running on Mac OS because it uses a Mac OS interface progress bar. ![Mac OS Bending School](../media/futurama-mac-14.png) ## 3ACV15 I Dated A Robot - - Sure enough, Prof. Farnsworth's blank robots are Mac formatted. -![Internet Mac OS style](/media/futurama-mac-15.png) - -Billy starring the propaganda movie "I dated a robot!" downloads his Monroe-Bot with a classic Macintosh 128k. ![Downloading Monroe-Bot](/media/futurama-mac-16.png) - +![Internet Mac OS style](../media/futurama-mac-15.png) +Billy starring the propaganda movie "I dated a robot!" downloads his Monroe-Bot with a classic Macintosh 128k. ![Downloading Monroe-Bot](../media/futurama-mac-16.png) ## Futurama 3ACV21 Future Stock - - -Planet Express is under new management of "that guy" from the 1980s. He shows the crew a new ad which is a parody of [Apple's legendary 1984 ad](http://www.youtube.com/watch?v=R706isyDrqI). ![1984 ad parody](/media/futurama-mac-19.png) - - +Planet Express is under new management of "that guy" from the 1980s. He shows the crew a new ad which is a parody of [Apple's legendary 1984 ad](http://www.youtube.com/watch?v=R706isyDrqI). ![1984 ad parody](../media/futurama-mac-19.png) ## Season 4 - - - - ## 4ACV06 Bender Should Not Be Allowed On TV - - The president of the TV network (who seems to be just a plain non-Mac laptop), has some sort of QuickTime Player running on him. -![President of Fox](/media/futurama-mac-17.png) - - +![President of Fox](../media/futurama-mac-17.png) ## 4ACV08 Crimes Of The Hot - - -iZac again. ![iZac on Galapagos Princess](/media/futurama-mac-18.png) - - +iZac again. ![iZac on Galapagos Princess](../media/futurama-mac-18.png) ## Season 5 - - - - ## 5ACV01 Bender's Big Score Part 1 +Bender is infected by the Scammers' obedience virus called iObey. ![iObey Obedience Virus](../media/futurama-mac-20.png) +## 5ACV15 Into The Wild Green Yonder Part 4 -Bender is infected by the Scammers' obedience virus called iObey. ![iObey Obedience Virus](/media/futurama-mac-20.png) - - - -## 5ACV15 Into The Wild Green Yonder Part 4 - - - -The audience in the violet dwarf star blowup or Encyclopod (or so) birth scene consists of many Futurama characters from all the Futurama series. If you look closely you can spot iZac again (upper left). In this screenshot there's also Matt Groening's head in the audience. ![iZac in audience](/media/futurama-mac-21.png) - - - +The audience in the violet dwarf star blowup or Encyclopod (or so) birth scene consists of many Futurama characters from all the Futurama series. If you look closely you can spot iZac again (upper left). In this screenshot there's also Matt Groening's head in the audience. ![iZac in audience](../media/futurama-mac-21.png) ## Futurama Stuff For Your Mac - - - - -![Futurama Vol. 1-6 by Gedeon Maheux](/media/futurama_gedeon.png)[[Futurama Vol. 1-6](http://iconfactory.com/freeware/preview/fut1) +![Futurama Vol. 1-6 by Gedeon Maheux](../media/futurama_gedeon.png)[[Futurama Vol. 1-6](http://iconfactory.com/freeware/preview/fut1) Amazing icons made by Iconfactory's [Gedeon Maheux](http://gedblog.com/). The recent [Volume 6 release](http://iconfactory.com/freeware/preview/fut6) also comes with some nice wallpapers showing silhouettes of the Planet Express crew members. [Vol.2](http://iconfactory.com/freeware/preview/fut2), [Vol.3](http://iconfactory.com/freeware/preview/fut3), [Vol.4](http://iconfactory.com/freeware/preview/fut4), [Vol.5](http://iconfactory.com/freeware/preview/fut5), [Vol.6](http://iconfactory.com/freeware/preview/fut6) Also [a search for Futurama in the freeware section on Iconfactory.com](http://iconfactory.com/search/freeware/futurama) is always a good idea... - - - - -![What If? Machine Terminal Icon by Mark Hawkins](/media/futurama_hawkins1.png)[What If? Machine Terminal Icon](http://scartissuemark.deviantart.com/art/What-If-Machine-Terminal-Icon-71455726) +![What If? Machine Terminal Icon by Mark Hawkins](../media/futurama_hawkins1.png)[What If? Machine Terminal Icon](http://scartissuemark.deviantart.com/art/What-If-Machine-Terminal-Icon-71455726) A nice icon intended as a Terminal replacement icon made by [Mark Hawkins](http://scartissuemark.deviantart.com/). - - - - -![Futurama: Trash Replacement by Mark Hawkins](/media/futurama_hawkins2.png)[Futurama: Trash Replacement](http://scartissuemark.deviantart.com/art/Futurama-Trash-Replacement-71612045) +![Futurama: Trash Replacement by Mark Hawkins](../media/futurama_hawkins2.png)[Futurama: Trash Replacement](http://scartissuemark.deviantart.com/art/Futurama-Trash-Replacement-71612045) A nice icon showing a big bucket of Fishy Joe's Popplers. Made by [Mark Hawkins](http://scartissuemark.deviantart.com/) too. - - - - -![Futurama Random Quote Generator by rawpixels](/media/futurama_rawpixels.png)[Futurama Random Quote Generator](http://www.apple.com/medias/dashboard/movie_tv/futuramarandomquotegenerator.html) +![Futurama Random Quote Generator by rawpixels](../media/futurama_rawpixels.png)[Futurama Random Quote Generator](http://www.apple.com/medias/dashboard/movie_tv/futuramarandomquotegenerator.html) A Dashboard widget for Mac OS X giving you random quotes from Futurama. Made by [rawpixels](http://www.rawpixels.com/). - - - - -![Futurama Mars University Wallpaper by Matthias Kretschmann/kremalicious.com](/media/futurama_kremalicious.png)[Futurama Mars University Wallpaper](http://www.kremalicious.com/2008/09/new-goodie-futurama-mars-university-wallpaper/) +![Futurama Mars University Wallpaper by Matthias Kretschmann/kremalicious.com](../media/futurama_kremalicious.png)[Futurama Mars University Wallpaper](http://www.kremalicious.com/2008/09/new-goodie-futurama-mars-university-wallpaper/) And there's my Futurama Mars University Wallpaper for Desktop and iPhone available in the [Goodies section](http://www.kremalicious.com/goodies) on this website. - - - - -![Futurama: Out Of Whale Oil Wallpaper Pack by Matthias Kretschmann/kremalicious.com](/media/out_of_whale_oil_detail.png)[Futurama: Out Of Whale Oil Wallpaper Pack](http://www.kremalicious.com/2009/02/out-of-whale-oil/) +![Futurama: Out Of Whale Oil Wallpaper Pack by Matthias Kretschmann/kremalicious.com](../media/out_of_whale_oil_detail.png)[Futurama: Out Of Whale Oil Wallpaper Pack](http://www.kremalicious.com/2009/02/out-of-whale-oil/) And finally there's my Futurama: Out Of Whale Oil Wallpaper pack for Desktop and iPhone also available in the [Goodies section](http://www.kremalicious.com/goodies) on this website. Vivid green and pink Feminista versions included. - - - - And that's it folks. Hope you enjoyed this fun article. If you know of more Mac or Apple references in Futurama or links to nice Futurama icons, wallpapers or application resources feel free to post them in the comments. As always: 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](http://www.kremalicious.com/feed/), discuss this article or buy me my next coffee. diff --git a/content/posts/2009-02-01-portal-thingy.md b/content/posts/2009-02-01-portal-thingy.md index 29a78151..018fe12a 100644 --- a/content/posts/2009-02-01-portal-thingy.md +++ b/content/posts/2009-02-01-portal-thingy.md @@ -2,17 +2,17 @@ layout: post title: 'Portal Thingy: matthiaskretschmann.com' -image: +image: ../media/ author: Matthias Kretschmann date: 2009-02-01 06:01:28+00:00 -wordpress_id: 504 + categories: - personal --- -[![matthiaskretschmann.com](/media/vcardsite-mk.png)](http://matthiaskretschmann.com) +[![matthiaskretschmann.com](../media/vcardsite-mk.png)](http://matthiaskretschmann.com) Just some self reference here. I've launched a slick new site under [matthiaskretschmann.com](http://matthiaskretschmann.com) today which has an absolute simple concept. It's kind of a digital business card site for being digitally present under my name. Beside that it has Links to my social media stuff so it's easier for you to stalk me. In the 90's we probably would have called it a Portal. As you can read in the sliding Colophon at the bottom of the site, it is written in valid XHTML 1.1 and CSS3 code and makes heavy use of jQuery. But, of course, it is fully functional without JavaScript enabled. Even the tab interface remains intact in such a case which is done by some PHP magic. Just the print and text-size buttons in the lower right will be gone without JavaScript. But that's ok because their functionality can be implemented just with JavaScript anyway. @@ -39,23 +39,23 @@ If you find a bug or have any additions feel free to [contact me](/contact), pos 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/). -[![timvandamme.com](/media/vcardsite-tim.png)](http://timvandamme.com) +[![timvandamme.com](../media/vcardsite-tim.png)](http://timvandamme.com) I was just blown away by the smart concept when first seeing this site last year and immediately made some rough sketches and drafts for my own implementation of this concept. But sadly time was too short for a new personal side project so everything laid down until last week. Another great version based on Tim's concept was crafted by [Mr. Foliage-O-Meter Rogie King](http://www.komodomedia.com/) under [rogieking.com](http://rogieking.com/) and there was also a nice little discussion about inspiration in [Rogie's blog](http://www.komodomedia.com/blog/2009/01/timvandammecom/) after he had launched his site. -[![rogieking.com](/media/vcardsite-rogie.png)](http://rogieking.com) +[![rogieking.com](../media/vcardsite-rogie.png)](http://rogieking.com) Finally I find it very interesting to compare the jQuery code of the three sites afterwards. We all have some sort of tab interface with fancy stuff going on when the tabs change. But we wrote three completely different versions of code for that purpose but all with the same JavaScript library. Oh mighty flexible jQuery! ## More Business Card Style Sites -![lbaumann.com](/media/vcardsite-laurent.png) +![lbaumann.com](../media/vcardsite-laurent.png) [Icon- and UI-Designer Laurent Baumann](http://lbaumann.com/) -![maximilianschoening.com](/media/vcardsite-maximilian.png) +![maximilianschoening.com](../media/vcardsite-maximilian.png) [Interface-Designer Maximilian Schöning](http://www.maximilianschoening.com/) -![arefjdey.com](/media/vcardsite-arefjdey.png) +![arefjdey.com](../media/vcardsite-arefjdey.png) [Consultant & Blogger Aref Jdey (Design & Code by yours truly)](http://www.arefjdey.com/) diff --git a/content/posts/2009-02-17-out-of-whale-oil.md b/content/posts/2009-02-17-out-of-whale-oil.md index e719c907..2bc5676f 100644 --- a/content/posts/2009-02-17-out-of-whale-oil.md +++ b/content/posts/2009-02-17-out-of-whale-oil.md @@ -2,12 +2,12 @@ layout: post title: We Are Out Of Whale Oil -image: Teaser-Out-Of-Whale-Oil.jpg -download: out-of-whale-oil-wall-by-kremalicious.zip +image: ../media/Teaser-Out-Of-Whale-Oil.jpg +download: ../media/out-of-whale-oil-wall-by-kremalicious.zip author: Matthias Kretschmann date: 2009-02-17 20:11:55+00:00 -wordpress_id: 533 + featured: true category: goodies @@ -23,7 +23,7 @@ redirect_from: Simple, high-resolution Futurama tribute wallpaper pack inspired by the latest Futurama movie Into The Wild Green Yonder. This pack includes 4 versions of the Planet Express ship whale oil indicator in 2 different sizes for desktop and iPhone use. Vivid pink Feminista versions included too. -![Futurama: Out Of Whale Oil Wallpaper Detail](/media/out_of_whale_oil_detail.png)Here're the details for the whole pack: +![Futurama: Out Of Whale Oil Wallpaper Detail](../media/out_of_whale_oil_detail.png)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) @@ -31,7 +31,7 @@ Simple, high-resolution Futurama tribute wallpaper pack inspired by the latest F * 2 Feminista iPhone versions with empty and full whale oil indicator (320x480) * Icon folder files for this wallpaper release -[![Futurama: Out Of Whale Oil Wallpaper Pack by kremalicious](/media/out-of-whale-oil-overview.png)](http://www.kremalicious.com/goodies/#wall) +[![Futurama: Out Of Whale Oil Wallpaper Pack by kremalicious](../media/out-of-whale-oil-overview.png)](http://www.kremalicious.com/goodies/#wall) Seriously, the pink versions are burning my eyes but the pink is a good reference to the events in the recent movie. diff --git a/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md b/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md index 85f8dd5e..71637545 100644 --- a/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md +++ b/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md @@ -2,11 +2,11 @@ layout: post title: Ultimate Share Link Bonanza For Coda, Wordpress And Everything Else -download: share-link-bonanza-coda-clips.zip +download: ../media/share-link-bonanza-coda-clips.zip author: Matthias Kretschmann date: 2009-03-29 23:12:15+00:00 -wordpress_id: 576 + categories: - design @@ -17,7 +17,7 @@ tags: coinhive: true --- -![Coda Clips Teaser](/media/codaclips-teaser.png) +![Coda Clips Teaser](../media/codaclips-teaser.png) Ever wanted to include those sharing links to social or bookmarking sites so users can easily submit your content to these sites in a Wordpress site or any other platform? Then you might have experienced a rather time consuming search odyssey to get those links. But fear no more! In this article I've provided a huge collection of all the links to your favorite social sites compiled in two handy Coda Clip files in a plain and a Wordpress version. And the non-Coda users can download an html file with all the links included. Additionally you'll find a huge list within this article with the separated links in two versions for each site. And finally I've put together a quick tutorial for using buttons or icons with these links. This way you can easily add content submit/sharing links to your sites in no time. @@ -42,7 +42,7 @@ _ ## Bonus: Coda Clips Icon -![Coda Clips Icon](/media/codaclips-icon128.png)There's no special icon for Coda Clips included in the recent Coda version (they use the blank one) so I quickly created one based on the other Coda file type icons. And the nice Panic guys allowed me to distribute this icon here. I've just made the 256px icon a bit sharper than the equivalent other coda file type icons. +![Coda Clips Icon](../media/codaclips-icon128.png)There's no special icon for Coda Clips included in the recent Coda version (they use the blank one) so I quickly created one based on the other Coda file type icons. And the nice Panic guys allowed me to distribute this icon here. I've just made the 256px icon a bit sharper than the equivalent other coda file type icons. If you download the above Coda Clip files this icon is already applied on the clip files but here're just the icon files (icns, folder, iContainer, PNGs): @@ -50,11 +50,11 @@ If you download the above Coda Clip files this icon is already applied on the cl ## 2. Usage -![Coda Clips HUD](/media/codaclips-hud.png)Just download and double click the Coda clip documents and two new clip groups will be created in your Coda Clips HUD with the various clips inside of them. All you have to do in Coda is inserting the clip by double clicking in the Coda Clips HUD and start typing your link text or type your link text first, select it and double click the clip in order to insert it. +![Coda Clips HUD](../media/codaclips-hud.png)Just download and double click the Coda clip documents and two new clip groups will be created in your Coda Clips HUD with the various clips inside of them. All you have to do in Coda is inserting the clip by double clicking in the Coda Clips HUD and start typing your link text or type your link text first, select it and double click the clip in order to insert it. -That's because both collections have their placeholder selection (the ![Coda Clips Placeholder](/media/codaclips-placeholder.png)) located where the link text would be: +That's because both collections have their placeholder selection (the ![Coda Clips Placeholder](../media/codaclips-placeholder.png)) located where the link text would be: -{% highlight html %}![Coda Clips Placeholder](/media/codaclips-placeholder.png){% endhighlight %} +{% highlight html %}![Coda Clips Placeholder](../media/codaclips-placeholder.png){% endhighlight %} 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,7 +74,7 @@ Apart from that some sites allow you to add and submit more informations than ju ## 2.2 Share Links (Wordpress Edition) -![Wordpress logo by kremalicious](/media/wordpress-logo.png)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: +![Wordpress logo by kremalicious](../media/wordpress-logo.png)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: * `` to create the URL dynamically depending on the article under which you have included the share and submit links. @@ -85,7 +85,7 @@ Anyway, as I've said above some sites allow more to submit here and you'll find ## 3. Quick Tutorial For Using Icons With These Links -![Tutorial icon by kremalicious](/media/tutorial-icon.png)I've also written a quick tutorial in case you want to use little images as icons beside your links. To achieve this these two solution provided here should fit every need for this. You can do this by using one of these two techniques realized with HTML and CSS: +![Tutorial icon by kremalicious](../media/tutorial-icon.png)I've also written a quick tutorial in case you want to use little images as icons beside your links. To achieve this these two solution provided here should fit every need for this. You can do this by using one of these two techniques realized with HTML and CSS: ## 3.1 Use The <img /> Tag Element @@ -675,7 +675,7 @@ Just click the Toggle All Links button to reveal them and click it again to hide ## 5. Please Jump Around, Then Spread The Word -![Coffee](/media/coffee-cup-icon-kremalicious.png) +![Coffee](../media/coffee-cup-icon-kremalicious.png) If you ever wanted or had to include such sharing links manually in your sites and searched hours for those you should already have recognized the value of this article and if not already happened you can now jump around to express your enjoyment. After this you should immediately bookmark or share this site on your favorite social site. And while you're at it [I could use another coffee](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=krema%40jpberlin%2ede&item_name=kremalicious%2ecom%20%2d%20Buy%20me%20a%20coffee%20or%20two%20or%20three%20or%20more&no_shipping=1&return=http%3a%2f%2fwww%2ekremalicious%2ecom%2fthank%2dyou%2f&tax=0¤cy_code=EUR&lc=US&bn=PP%2dDonationsBF&charset=UTF%2d8). diff --git a/content/posts/2009-06-04-twitter-crisp.md b/content/posts/2009-06-04-twitter-crisp.md index ccb19a13..95ce8a80 100644 --- a/content/posts/2009-06-04-twitter-crisp.md +++ b/content/posts/2009-06-04-twitter-crisp.md @@ -2,12 +2,12 @@ layout: post title: Twitter Crisp -image: Teaser-Twitter-Crisp.jpg -download: twitter-crisp-by-kremalicious.zip +image: ../media/Teaser-Twitter-Crisp.jpg +download: ../media/twitter-crisp-by-kremalicious.zip author: Matthias Kretschmann date: 2009-06-04 00:16:40+00:00 -wordpress_id: 794 + categories: - goodies tags: diff --git a/content/posts/2009-06-24-adiumeetie.md b/content/posts/2009-06-24-adiumeetie.md index 62f60224..f7ec35b2 100644 --- a/content/posts/2009-06-24-adiumeetie.md +++ b/content/posts/2009-06-24-adiumeetie.md @@ -2,12 +2,12 @@ layout: post title: Adiumeetie. Tweetie Style Adium Icon -image: Teaser-Adiumeetie.jpg -download: adiumeetie-by-kremalicious.zip +image: ../media/Teaser-Adiumeetie.jpg +download: ../media/adiumeetie-by-kremalicious.zip author: Matthias Kretschmann date: 2009-06-24 21:00:38+00:00 -wordpress_id: 844 + category: goodies tags: - icon @@ -17,13 +17,13 @@ tags: Here's a new desktop goodie for your pleasure. It's a replacement dock icon for the popular Mac IM client [Adium](http://adium.im/) following the style of atebit's excellent [Tweetie for Mac](http://www.atebits.com/tweetie-mac/) icon. -![Adiumeetie Teaser](/media/Adiumeetie-Teaser.jpg) +![Adiumeetie Teaser](../media/Adiumeetie-Teaser.jpg) While the Tweetie Mac icon (and it's UI) was discussed quite controversial (which caused some very nice Tweetie replacement icons to appear, like [here](http://jonasraskdesign.com/medias/medias.html), [here](http://iconblock.deviantart.com/art/Tweetie-Mix-120360482), [here](http://macthemes2.net/forum/viewtopic.php?id=16795744) or [here](http://www.flickr.com/photos/marcelomarfil/3611311439/)), I grew to like the style of it. But Adium beside Tweetie in the Dock just looked weird... (No offense, [Adam](http://www.artofadambetts.com/weblog/?p=108)) So I redrew the whole icon and used Adium's duck silhouette on it and made some obvious and subtle changes in comparison to the Tweetie icon. And thanks to [Loren](http://blog.atebits.com/) who kind of rubber-stamped this icon release. The icon comes in various formats (iContainer, icns, png) in sizes from 512px-16px and as an Adium dock icon package. This icon package uses some more icons (just 128px each) for the different states of Adium (online, offline, alert etc.) and includes the application icon too. -![Adiumeetie States](/media/Adiumeetie-Teaser-AdiumIcon.png) +![Adiumeetie States](../media/Adiumeetie-Teaser-AdiumIcon.png) ## Download @@ -36,7 +36,7 @@ Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or cli ## Adium Icon Usage -![Adiumeetie Dock Preview](/media/Adiumeetie-Dock-Preview.png)Just double click the Adiumeetie.AdiumIcon file and the dock icon gets installed automatically. Then you can select the icon in Adium's preferences under Appearance > Dock Icon from the drop-down menu. After this the icon should be ready as your new Adium icon both in the Dock and in your Applications folder. +![Adiumeetie Dock Preview](../media/Adiumeetie-Dock-Preview.png)Just double click the Adiumeetie.AdiumIcon file and the dock icon gets installed automatically. Then you can select the icon in Adium's preferences under Appearance > Dock Icon from the drop-down menu. After this the icon should be ready as your new Adium icon both in the Dock and in your Applications folder. The icon is free for your personal use and I hope you'll enjoy it. If you do, don't forget to [spread the word via Twitter](http://twitter.com/home?status=Adiumeetie%3A%20Tweetie%20Style%20Adium%20Dock%20Icon%20from%20%40kremalicious%20http://kremalicious.com/adiumeetie/) and all your other favorite social media sites. diff --git a/content/posts/2009-09-05-delibar.md b/content/posts/2009-09-05-delibar.md index b9f9c595..119ffe97 100644 --- a/content/posts/2009-09-05-delibar.md +++ b/content/posts/2009-09-05-delibar.md @@ -2,12 +2,12 @@ layout: post title: Delibar Interface Replacement Icons -image: Teaser-Delibar-Icons.jpg -download: delibar-by-kremalicious.zip +image: ../media/Teaser-Delibar-Icons.jpg +download: ../media/delibar-by-kremalicious.zip author: Matthias Kretschmann date: 2009-09-05 19:07:31+00:00 -wordpress_id: 936 + categories: - goodies tags: diff --git a/content/posts/2009-12-17-wordpress-post-thumbnails.md b/content/posts/2009-12-17-wordpress-post-thumbnails.md index cfc80e9a..7da66479 100644 --- a/content/posts/2009-12-17-wordpress-post-thumbnails.md +++ b/content/posts/2009-12-17-wordpress-post-thumbnails.md @@ -5,7 +5,7 @@ title: Using The New Post Thumbnail Feature In WordPress 2.9 author: Matthias Kretschmann date: 2009-12-17 04:00:21+00:00 -wordpress_id: 959 + categories: - design @@ -19,11 +19,11 @@ redirect_from: - /2009/12/wordpress-post-thumbnails/ --- -![Wordpress Logo by kremalicious](/media/wordpress-logo.png)WordPress 2.9 added a new feature which allows you to assign an image to an article to make it the post image like it's often used in magazine style themes. This new feature along with a new template tag makes all the custom field hacks usually used for this functionality in the past obsolete. So here's a quick walkthrough to make use of the new post thumbnail feature and of course how to make it backwards compatible. +![Wordpress Logo by kremalicious](../media/wordpress-logo.png)WordPress 2.9 added a new feature which allows you to assign an image to an article to make it the post image like it's often used in magazine style themes. This new feature along with a new template tag makes all the custom field hacks usually used for this functionality in the past obsolete. So here's a quick walkthrough to make use of the new post thumbnail feature and of course how to make it backwards compatible. ## 1. Activate The Feature -![Add WordPress Post Thumbnail Support To Theme](/media/wordpress-thumbnail-1.png)For whatever reason you first have to activate the feature with an entry in your theme's _functions.php_ file in order to get the Post Thumbnail box in the Editor. +![Add WordPress Post Thumbnail Support To Theme](../media/wordpress-thumbnail-1.png)For whatever reason you first have to activate the feature with an entry in your theme's _functions.php_ file in order to get the Post Thumbnail box in the Editor. So just open up your theme's _functions.php_ file in your favorite editor or create it if there's no such file in your theme folder. Add this little code snippet to this file: @@ -47,21 +47,21 @@ This makes sure WordPress installation prior to 2.9 won't get screwed up when us ## 2. Add A Post Thumbnail To Your Post -![Add Post Thumbnail](/media/wordpress-thumbnail-2.png)After you've added the above mentioned code into your _functions.php_ file there should be a new Post Thumbnail box in the WordPress editor view on the right side. +![Add Post Thumbnail](../media/wordpress-thumbnail-2.png)After you've added the above mentioned code into your _functions.php_ file there should be a new Post Thumbnail box in the WordPress editor view on the right side. In this box click on the _Set Thumbnail link_ and the usual Add Media dialogue will pop up where you can choose an image from your Media Library. At the end of the dialogue for the selected image there's a new link beside the Insert into Post button called _Use as thumbnail_. -![Add Post Thumbnail 2](/media/wordpress-thumbnail-3.png)Click this and your chosen image will be assigned as the post thumbnail. (Unfortunately the _Use as thumbnail_ link is missing in the dialogue which appears after uploading an image, it's just there if you browse your Media Library.) +![Add Post Thumbnail 2](../media/wordpress-thumbnail-3.png)Click this and your chosen image will be assigned as the post thumbnail. (Unfortunately the _Use as thumbnail_ link is missing in the dialogue which appears after uploading an image, it's just there if you browse your Media Library.) You can close the media dialogue now and you will see the image in the Post Thumbnail box: -![Post Thumbnail added](/media/wordpress-thumbnail-4.png) +![Post Thumbnail added](../media/wordpress-thumbnail-4.png) ## 3. Display The Post Thumbnail In Your Theme -![Add to theme](/media/wordpress-thumbnail-5.png)Basically all you have to do is to add this new template tag in your theme files where you want to display the post thumbnail, most certainly in your _index.php_ file: +![Add to theme](../media/wordpress-thumbnail-5.png)Basically all you have to do is to add this new template tag in your theme files where you want to display the post thumbnail, most certainly in your _index.php_ file: {% highlight php %}{% endhighlight %} This template tag will display the thumbnail sized post thumbnail by default and is essentially the same as: @@ -173,7 +173,7 @@ This first checks if the feature exists and if a post thumbnail was addd with th 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. -![Oh no!](/media/coffee-cup-empty.png) +![Oh no!](../media/coffee-cup-empty.png) As always: 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](http://www.kremalicious.com/feed/), discuss this article or buy me my next coffee. diff --git a/content/posts/2010-02-04-ipixelpad.md b/content/posts/2010-02-04-ipixelpad.md index 10704c6a..10f9d5f1 100644 --- a/content/posts/2010-02-04-ipixelpad.md +++ b/content/posts/2010-02-04-ipixelpad.md @@ -2,12 +2,12 @@ layout: post title: iPixelPad - Tongue Twisting But Crisp iPad Icons -image: Teaser-iPixelPad.png -download: ipixelpad_by_kremalicious.zip +image: ../media/Teaser-iPixelPad.png +download: ../media/ipixelpad_by_kremalicious.zip author: Matthias Kretschmann date: 2010-02-04 15:21:42+00:00 -wordpress_id: 1092 + categories: - goodies tags: @@ -22,7 +22,7 @@ They also come in two different versions for each size: with a matte highlight s And drawing the homescreen icons was quite funky and if you know the standard iPhone icons I bet you can guess what icons you can see here and in the icon files, at least in the 48px and 32px versions: -![ipixelpad-homescreen-zoom.png](/media/ipixelpad-homescreen-zoom.png) +![ipixelpad-homescreen-zoom.png](../media/ipixelpad-homescreen-zoom.png) The homescreen icons pixels in the 16px version needed all more vivid colors to get them distinguishable from the wallpaper background so they're a bit different from the other sizes. These are the times I wish I could modify just half a pixel. diff --git a/content/posts/2010-03-27-office-desk.md b/content/posts/2010-03-27-office-desk.md index 1c24be05..0bb23163 100644 --- a/content/posts/2010-03-27-office-desk.md +++ b/content/posts/2010-03-27-office-desk.md @@ -2,12 +2,12 @@ layout: photo title: Office Desk -image: Office-Desk.jpg +image: ../media/Office-Desk.jpg author: Matthias Kretschmann date: 2010-03-27 21:31:35+00:00 -wordpress_id: 1901 + categories: - photos post_format: diff --git a/content/posts/2010-07-03-momcorp.md b/content/posts/2010-07-03-momcorp.md index 0108895e..569d3c5c 100644 --- a/content/posts/2010-07-03-momcorp.md +++ b/content/posts/2010-07-03-momcorp.md @@ -2,12 +2,12 @@ layout: post title: MomCorp Wallpaper -image: Teaser-MomCorp-Wall.png -download: momcorp_wall_by_kremalicious.zip +image: ../media/Teaser-MomCorp-Wall.png +download: ../media/momcorp_wall_by_kremalicious.zip author: Matthias Kretschmann date: 2010-07-03 17:12:53+00:00 -wordpress_id: 1453 + category: goodies tags: - wallpaper @@ -20,7 +20,7 @@ The recent Futurama episode [Attack of the Killer App](http://en.wikipedia.org/w The wallpaper comes in four versions with two color variations and two text variations with Mom's favorite tagline. Here's an overview: -![MomCorp-Walls-Overview](/media/MomCorp-Walls-Overview.png) +![MomCorp-Walls-Overview](../media/MomCorp-Walls-Overview.png) ## Download diff --git a/content/posts/2010-07-18-typeface-condoms.md b/content/posts/2010-07-18-typeface-condoms.md index b9484314..3c6fdd00 100644 --- a/content/posts/2010-07-18-typeface-condoms.md +++ b/content/posts/2010-07-18-typeface-condoms.md @@ -2,11 +2,11 @@ layout: photo title: Typeface condoms -image: Typeface-condoms.jpg +image: ../media/Typeface-condoms.jpg author: Matthias Kretschmann date: 2010-07-18 20:28:33+00:00 -wordpress_id: 1898 + categories: - photos post_format: diff --git a/content/posts/2010-08-07-bonsai.md b/content/posts/2010-08-07-bonsai.md index 2256cd42..b682a79b 100644 --- a/content/posts/2010-08-07-bonsai.md +++ b/content/posts/2010-08-07-bonsai.md @@ -2,11 +2,11 @@ layout: photo title: Bonsai -image: Bonsai-5-Version-2.jpg +image: ../media/Bonsai-5-Version-2.jpg author: Matthias Kretschmann date: 2010-08-07 20:23:31+00:00 -wordpress_id: 1895 + categories: - photos post_format: diff --git a/content/posts/2010-09-01-gdr-helvetica.md b/content/posts/2010-09-01-gdr-helvetica.md index 0a38a693..f69dbb8b 100644 --- a/content/posts/2010-09-01-gdr-helvetica.md +++ b/content/posts/2010-09-01-gdr-helvetica.md @@ -2,11 +2,11 @@ layout: photo title: GDR Helvetica -image: GDR-Helvetica.jpg +image: ../media/GDR-Helvetica.jpg author: Matthias Kretschmann date: 2010-09-01 20:21:43+00:00 -wordpress_id: 1892 + categories: - photos post_format: diff --git a/content/posts/2010-12-11-iphone-coasters.md b/content/posts/2010-12-11-iphone-coasters.md index 3680f8ec..b62945a8 100644 --- a/content/posts/2010-12-11-iphone-coasters.md +++ b/content/posts/2010-12-11-iphone-coasters.md @@ -2,11 +2,11 @@ layout: photo title: iPhone Coasters -image: iPhone-Coasters-1-Version-2.jpg +image: ../media/iPhone-Coasters-1-Version-2.jpg author: Matthias Kretschmann date: 2010-12-11 21:19:29+00:00 -wordpress_id: 1889 + categories: - photos post_format: diff --git a/content/posts/2010-12-29-basically-the-monolith-is-on-my-desk.md b/content/posts/2010-12-29-basically-the-monolith-is-on-my-desk.md index 1a1ceb3a..9fe15f90 100644 --- a/content/posts/2010-12-29-basically-the-monolith-is-on-my-desk.md +++ b/content/posts/2010-12-29-basically-the-monolith-is-on-my-desk.md @@ -2,11 +2,11 @@ layout: photo title: Basically, The Monolith Is On My Desk -image: Basically-The-Monolith-Is-On-My-Desk.jpg +image: ../media/Basically-The-Monolith-Is-On-My-Desk.jpg author: Matthias Kretschmann date: 2010-12-29 15:47:12+00:00 -wordpress_id: 1873 + categories: - photos post_format: diff --git a/content/posts/2010-12-29-free-monkey-breath-not-soylent-green.md b/content/posts/2010-12-29-free-monkey-breath-not-soylent-green.md index a02bb3c5..0bfb880e 100644 --- a/content/posts/2010-12-29-free-monkey-breath-not-soylent-green.md +++ b/content/posts/2010-12-29-free-monkey-breath-not-soylent-green.md @@ -2,11 +2,11 @@ layout: photo title: Free Monkey Breath, Not Soylent Green -image: Free-Monkey-Breath-Not-Soylent-Green.jpg +image: ../media/Free-Monkey-Breath-Not-Soylent-Green.jpg author: Matthias Kretschmann date: 2010-12-29 21:16:55+00:00 -wordpress_id: 1886 + categories: - photos post_format: diff --git a/content/posts/2011-01-08-enjoying-paper.md b/content/posts/2011-01-08-enjoying-paper.md index e6adaf9d..bc0de1e8 100644 --- a/content/posts/2011-01-08-enjoying-paper.md +++ b/content/posts/2011-01-08-enjoying-paper.md @@ -2,11 +2,11 @@ layout: photo title: Enjoying Paper -image: Enjoying-Paper.jpg +image: ../media/Enjoying-Paper.jpg author: Matthias Kretschmann date: 2011-01-08 15:43:14+00:00 -wordpress_id: 1867 + categories: - photos post_format: diff --git a/content/posts/2011-01-08-glowing-star-inside.md b/content/posts/2011-01-08-glowing-star-inside.md index 91fc38e7..a4793415 100644 --- a/content/posts/2011-01-08-glowing-star-inside.md +++ b/content/posts/2011-01-08-glowing-star-inside.md @@ -2,11 +2,11 @@ layout: photo title: Glowing Star Inside -image: Glowing-Star-Inside.jpg +image: ../media/Glowing-Star-Inside.jpg author: Matthias Kretschmann date: 2011-01-08 15:45:26+00:00 -wordpress_id: 1870 + categories: - photos post_format: diff --git a/content/posts/2011-01-18-historic-flood-levels.md b/content/posts/2011-01-18-historic-flood-levels.md index 76d1ef45..7fd69263 100644 --- a/content/posts/2011-01-18-historic-flood-levels.md +++ b/content/posts/2011-01-18-historic-flood-levels.md @@ -2,11 +2,11 @@ layout: photo title: Historic Flood Levels -image: Historic-Flood-Levels.jpg +image: ../media/Historic-Flood-Levels.jpg author: Matthias Kretschmann date: 2011-01-18 15:40:12+00:00 -wordpress_id: 1864 + categories: - photos post_format: diff --git a/content/posts/2011-10-11-broken-nexus-s-screen.md b/content/posts/2011-10-11-broken-nexus-s-screen.md index f873ecaa..94f2ff8c 100644 --- a/content/posts/2011-10-11-broken-nexus-s-screen.md +++ b/content/posts/2011-10-11-broken-nexus-s-screen.md @@ -2,11 +2,11 @@ layout: photo title: Broken Nexus S Screen -image: Broken-Nexus-S-Screen.jpg +image: ../media/Broken-Nexus-S-Screen.jpg author: Matthias Kretschmann date: 2011-10-11 14:37:06+00:00 -wordpress_id: 1861 + categories: - photos post_format: diff --git a/content/posts/2011-12-15-badged.md b/content/posts/2011-12-15-badged.md index 7cbe7e96..ef4833f3 100644 --- a/content/posts/2011-12-15-badged.md +++ b/content/posts/2011-12-15-badged.md @@ -2,12 +2,12 @@ layout: post title: Badged - iOS Style Notification Badges for WordPress -image: Badged-Teaser-kremalicious@2x.png +image: ../media/Badged-Teaser-kremalicious@2x.png author: Matthias Kretschmann updated: 2014-10-11 07:56:46+00:00 date: 2011-12-15 07:56:46+00:00 -wordpress_id: 1468 + category: goodies tags: @@ -39,7 +39,7 @@ The plugin is hosted on GitHub and will always be mirrored in the WordPress plug 3. Enjoy 4. (optional) Adjust options under _Settings > Badged_. Upon activation the plugin sets both options by default: -![](/media/badged-settings.png) +![](../media/badged-settings.png) If you find any problems you can [open an issue on GitHub](https://github.com/kremalicious/Badged/issues) or just drop me a line in the comments or on [Twitter](http://twitter.com/kremalicious). diff --git a/content/posts/2012-02-26-mk-v2.md b/content/posts/2012-02-26-mk-v2.md index 88edbd54..f119b4e0 100644 --- a/content/posts/2012-02-26-mk-v2.md +++ b/content/posts/2012-02-26-mk-v2.md @@ -2,11 +2,11 @@ layout: post title: Personal Site v2 -image: mkv2.jpg +image: ../media/mkv2.jpg author: Matthias Kretschmann date: 2012-02-26 21:29:54+00:00 -wordpress_id: 1506 + categories: - personal --- @@ -17,13 +17,13 @@ Today I finally launched v2 of my personal site, still following the concept of One goal was to use as less images as possible. Yes, it would have been easier to just use images instead of like 10 box-shadows on one element but this wouldn't have been any fun. And no matter what retina/high dpi devices come up next all interface elements will look just as sharp without any additional work. -![](/media/mkv2-detail.png) +![](../media/mkv2-detail.png) Apart from the colored top background, the logo and the subtle background texture there're no background images in use. All the other visuals were created with a lot of CSS3 & pseudo elements. Pseudo elements were the perfect technology so the markup doesn't get cluttered with dozens of empty divs, spans etc. which would only serve a styling purpose. All icons on the site are coming from an icon font (the wonderful [IcoMoon](http://keyamoon.com/icomoon)) embedded with @font-face. -![](/media/mkv2-balls.jpg) +![](../media/mkv2-balls.jpg) ## Mobile & Modern First @@ -31,7 +31,7 @@ All icons on the site are coming from an icon font (the wonderful [IcoMoon](htt For the front-end development I've followed a mobile devices & modern browsers first approach. Therefore the site should look great on many different devices & screen sizes. As a starting point I used a combination of the [1140grid](http://cssgrid.net) and [320 and up](http://www.stuffandnonsense.co.uk/projects/320andup/). -![](/media/mkv2-responsivelayouts.jpg) +![](../media/mkv2-responsivelayouts.jpg) That's of course all done by media queries with breakpoints at 600px, 768px and 992px. During my testing those rather weird values turned out to work best for this simple layout. The layout only changes at 600px & 768px, the 992px is just used for some different css animations. And yes, I'm aware of the irony targeting fixed values here although everything else uses relative values. @@ -40,19 +40,19 @@ But it's interesting to see how different the rendering of the site is in some m - * [iOS - Mobile Safari (iPhone 4S)](/media/mkv2-iphone.png) + * [iOS - Mobile Safari (iPhone 4S)](../media/mkv2-iphone.png) - * [iOS - Mobile Safari (iPad)](/media/mkv2-ipad.png) + * [iOS - Mobile Safari (iPad)](../media/mkv2-ipad.png) - * [Android - Android Browser (Nexus S)](/media/mkv2-android.png) + * [Android - Android Browser (Nexus S)](../media/mkv2-android.png) - * [Android - Chrome beta (Nexus S)](/media/mkv2-android-chrome.png) + * [Android - Chrome beta (Nexus S)](../media/mkv2-android-chrome.png) - * [Android - Firefox (Nexus S)](/media/mkv2-android-firefox.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. @@ -73,11 +73,11 @@ If you're interested, here're the non-minified versions of the main [css file]( ## The touch hover problem -![](/media/mkv2-portfolio-overlay.jpg) +![](../media/mkv2-portfolio-overlay.jpg) A common pattern for stuff which can be revealed by hovering over something on desktop devices is to just make everything visible by default on touch devices. But I didn't wanted to clutter the portfolio items by adding buttons/text links or whatever around them. -![](/media/mkv2-ipad-touchindicator.jpg) So this led to a problem for touch users because it isn't immediately obvious how to reveal the overlays housing additional actions for each item. Approximately half of my beta testers found out about tapping a portfolio item to reveal the actions which is obviously not enough. +![](../media/mkv2-ipad-touchindicator.jpg) So this led to a problem for touch users because it isn't immediately obvious how to reveal the overlays housing additional actions for each item. Approximately half of my beta testers found out about tapping a portfolio item to reveal the actions which is obviously not enough. So I incorporated a visual hint for the other half: If a user on a touch device hasn't tapped on an item yet a subtle touch indicator starts pulsating over each item after 30 seconds. diff --git a/content/posts/2012-03-04-relaxing-cat.md b/content/posts/2012-03-04-relaxing-cat.md index 2782b4be..072c3e9f 100644 --- a/content/posts/2012-03-04-relaxing-cat.md +++ b/content/posts/2012-03-04-relaxing-cat.md @@ -2,11 +2,11 @@ layout: photo title: Relaxing Cat -image: 7f9397a265d811e1b9f1123138140926_7.jpg +image: ../media/7f9397a265d811e1b9f1123138140926_7.jpg author: Matthias Kretschmann date: 2012-03-04 08:00:32+00:00 -wordpress_id: 1729 + categories: - photos post_format: diff --git a/content/posts/2012-04-03-blaue-turme.md b/content/posts/2012-04-03-blaue-turme.md index 8a78e26b..3a507001 100644 --- a/content/posts/2012-04-03-blaue-turme.md +++ b/content/posts/2012-04-03-blaue-turme.md @@ -2,11 +2,11 @@ layout: photo title: Blaue Türme -image: Blaue-Tuerme-1.jpg +image: ../media/Blaue-Tuerme-1.jpg author: Matthias Kretschmann date: 2012-04-03 12:41:01+00:00 -wordpress_id: 1753 + categories: - photos post_format: diff --git a/content/posts/2012-04-03-skeletor.md b/content/posts/2012-04-03-skeletor.md index 38184305..3c52ac40 100644 --- a/content/posts/2012-04-03-skeletor.md +++ b/content/posts/2012-04-03-skeletor.md @@ -2,11 +2,11 @@ layout: photo title: Skeletor -image: 6313cc1e7db611e180c9123138016265_7.jpg +image: ../media/6313cc1e7db611e180c9123138016265_7.jpg author: Matthias Kretschmann date: 2012-04-03 17:56:49+00:00 -wordpress_id: 1745 + categories: - photos post_format: diff --git a/content/posts/2012-04-03-train-station-leipzig.md b/content/posts/2012-04-03-train-station-leipzig.md index 6ced8dae..8367714b 100644 --- a/content/posts/2012-04-03-train-station-leipzig.md +++ b/content/posts/2012-04-03-train-station-leipzig.md @@ -2,11 +2,11 @@ layout: photo title: Train Station Leipzig -image: de2ac24c7db911e1b9f1123138140926_7.jpg +image: ../media/de2ac24c7db911e1b9f1123138140926_7.jpg author: Matthias Kretschmann date: 2012-04-03 18:21:44+00:00 -wordpress_id: 1747 + categories: - photos post_format: diff --git a/content/posts/2012-04-04-android-tab-conundrum.md b/content/posts/2012-04-04-android-tab-conundrum.md index 17fcf2fe..18ba73cf 100644 --- a/content/posts/2012-04-04-android-tab-conundrum.md +++ b/content/posts/2012-04-04-android-tab-conundrum.md @@ -1,13 +1,11 @@ --- author: Matthias Kretschmann -comments: true date: 2012-04-04 14:24:30+00:00 layout: post -slug: android-tab-conundrum title: The Android Tab Bar Conundrum. Again. -image: tabs_overview.png +image: ../media/tabs_overview.png -wordpress_id: 1556 + categories: - design @@ -21,43 +19,34 @@ Most obviously in the form of the app's main navigation tabs which Instagram fo ## Problem No. 1: Navigation Controls - -![](/media/android-navigation-buttons.png) +![](../media/android-navigation-buttons.png) The suggested [top placement in the Android Design Guidelines](http://developer.android.com/design/building-blocks/tabs.html) was an answer to a typical Android specific problem: the very bottom of Android apps is reserved for on-screen navigation buttons, originally capacitative off-screen buttons. And those can get triggered accidentally when reaching tabs in a tab bar at the bottom of the screen. Let's dub this problem no. 1. Now I'm usually all for breaking the rules because that's the only way innovation can happen. But this breaking needs to be thoroughly thought through and involves a deep understanding of the rules being broken. While a lot of iOS ports just use the bottom tab bar out of habit and non-thinking, [Tim](https://twitter.com/maxvoltar) and the Instagram guys don't fall in this camp. - ## Problem No. 2: Longer Screens - -![](/media/android-galaxy-note.png) +![](../media/android-galaxy-note.png) The usage of a bottom tab bar in Instagram for Android is an answer to a relatively new problem which isn't incorporated in the Android Design Guidelines: bigger screens, or more precisely longer screens, make it very hard to reach tabs at the top of the screen when holding the device with one hand. When looking at all those new devices it seems clear screen sizes above 4" are now the norm for Android. This is problem no. 2. In my view it all comes down to balancing those 2 problems against each other and, as said on Twitter, Tim decided to value problem 2 over problem 1: - > on the Galaxy Note it's impossible to get to the tabs with one hand if they're on top. — Tim Van Damme ([@maxvoltar](https://twitter.com/maxvoltar)) [April 3, 2012](https://twitter.com/maxvoltar/status/187224604912254976) - And I'm afraid he's right: it's just more important for users to reach the tabs with one hand than preventing them from accidently triggering the OS buttons. When an app has a tab bar it's usually the main element to navigate inside an app so it's crucial to reach those elements very fast. Also problem 1 is less of a problem on devices like the Galaxy Nexus with its on-screen buttons, they just don't get triggered by accident so easily as those off-screen capacitive buttons. - ## A way out - So we really need to rethink this specific guideline but this doesn't have to be just the decision between top or bottom placement of tabs. There's another way out to solve both problems: Combining scrollable & fixed tabs. This is already used by Google in ICS's built-in Phone and People app (thanks Jake!). And Instagram for Android could have used the same fixed tabs on the top of the screen but combine them with a swipe left/right gesture to navigate between those tabs. (Per guideline a swipe view needs to get a corresponding scrollable, text-only tab bar) Here's a quick mockup: - -![](/media/Instagram-Swipe.png) - +![](../media/Instagram-Swipe.png) Users wouldn't have to reach for the tabs to change views and nobody would accidently trigger the OS buttons at the bottom. The active states of the current and new tab item could fade corresponding to the swiping, same goes for the title of the current view in the very top bar. Another way could have been to split action & navigation tabs like [Guenther Beyer did in his mockup](https://plus.google.com/109726284197282147930/posts/5McKooqNnnd). diff --git a/content/posts/2012-04-05-current-sushi-status.md b/content/posts/2012-04-05-current-sushi-status.md index d3803f28..0fc8d57b 100644 --- a/content/posts/2012-04-05-current-sushi-status.md +++ b/content/posts/2012-04-05-current-sushi-status.md @@ -2,11 +2,11 @@ layout: photo title: Current Sushi Status -image: aff38e2c7f5311e1b10e123138105d6b_7.jpg +image: ../media/aff38e2c7f5311e1b10e123138105d6b_7.jpg author: Matthias Kretschmann date: 2012-04-05 19:15:20+00:00 -wordpress_id: 1731 + categories: - photos post_format: diff --git a/content/posts/2012-04-07-buna.md b/content/posts/2012-04-07-buna.md index 0f3c5e59..e269ab2b 100644 --- a/content/posts/2012-04-07-buna.md +++ b/content/posts/2012-04-07-buna.md @@ -2,11 +2,11 @@ layout: photo title: Buna -image: 44af28f2805b11e18cf91231380fd29b_7.jpg +image: ../media/44af28f2805b11e18cf91231380fd29b_7.jpg author: Matthias Kretschmann date: 2012-04-07 02:42:08+00:00 -wordpress_id: 1733 + categories: - photos post_format: diff --git a/content/posts/2012-04-07-cat-enjoying-a-good-ipad-game.md b/content/posts/2012-04-07-cat-enjoying-a-good-ipad-game.md index a67fe1a4..93140844 100644 --- a/content/posts/2012-04-07-cat-enjoying-a-good-ipad-game.md +++ b/content/posts/2012-04-07-cat-enjoying-a-good-ipad-game.md @@ -2,11 +2,11 @@ layout: photo title: Cat enjoying a good iPad game -image: 7838011c80ce11e19e4a12313813ffc0_7.jpg +image: ../media/7838011c80ce11e19e4a12313813ffc0_7.jpg author: Matthias Kretschmann date: 2012-04-07 16:26:46+00:00 -wordpress_id: 1739 + categories: - photos post_format: diff --git a/content/posts/2012-04-07-ipad-porn.md b/content/posts/2012-04-07-ipad-porn.md index 62572839..f22c250d 100644 --- a/content/posts/2012-04-07-ipad-porn.md +++ b/content/posts/2012-04-07-ipad-porn.md @@ -2,11 +2,11 @@ layout: photo title: iPad Porn -image: 97a44d6080b711e181bd12313817987b_7.jpg +image: ../media/97a44d6080b711e181bd12313817987b_7.jpg author: Matthias Kretschmann date: 2012-04-07 13:43:00+00:00 -wordpress_id: 1735 + categories: - photos post_format: diff --git a/content/posts/2012-04-07-opera.md b/content/posts/2012-04-07-opera.md index 0ccc1cb2..1848cd38 100644 --- a/content/posts/2012-04-07-opera.md +++ b/content/posts/2012-04-07-opera.md @@ -2,11 +2,11 @@ layout: photo title: Opera -image: 5df6e0a280c911e1a87612313804ec91_7.jpg +image: ../media/5df6e0a280c911e1a87612313804ec91_7.jpg author: Matthias Kretschmann date: 2012-04-07 15:50:15+00:00 -wordpress_id: 1737 + categories: - photos post_format: diff --git a/content/posts/2012-04-08-common-kitchen-decoration.md b/content/posts/2012-04-08-common-kitchen-decoration.md index 7b87df64..74bc90d6 100644 --- a/content/posts/2012-04-08-common-kitchen-decoration.md +++ b/content/posts/2012-04-08-common-kitchen-decoration.md @@ -2,11 +2,11 @@ layout: photo title: Common kitchen decoration -image: 2ba6eeba81b111e1989612313815112c_7.jpg +image: ../media/2ba6eeba81b111e1989612313815112c_7.jpg author: Matthias Kretschmann date: 2012-04-08 19:29:33+00:00 -wordpress_id: 1741 + categories: - photos post_format: diff --git a/content/posts/2012-04-08-graffiti-old-school-style.md b/content/posts/2012-04-08-graffiti-old-school-style.md index a1da2257..d64807a1 100644 --- a/content/posts/2012-04-08-graffiti-old-school-style.md +++ b/content/posts/2012-04-08-graffiti-old-school-style.md @@ -2,11 +2,11 @@ layout: photo title: Graffiti, old school style -image: 7e2b28f881b711e1af7612313813f8e8_7.jpg +image: ../media/7e2b28f881b711e1af7612313813f8e8_7.jpg author: Matthias Kretschmann date: 2012-04-08 20:14:49+00:00 -wordpress_id: 1743 + categories: - photos post_format: diff --git a/content/posts/2012-04-20-the-origins-of-the-blink-tag.md b/content/posts/2012-04-20-the-origins-of-the-blink-tag.md index a183f683..ced0403c 100644 --- a/content/posts/2012-04-20-the-origins-of-the-blink-tag.md +++ b/content/posts/2012-04-20-the-origins-of-the-blink-tag.md @@ -6,7 +6,7 @@ linkurl: http://www.montulli.org/theoriginofthe%3Cblink%3Etag author: Matthias Kretschmann date: 2012-04-20 08:48:46+00:00 -wordpress_id: 1712 + categories: - design post_format: diff --git a/content/posts/2012-04-30-announcing-sketch2.md b/content/posts/2012-04-30-announcing-sketch2.md index e00d174b..75f06cbf 100644 --- a/content/posts/2012-04-30-announcing-sketch2.md +++ b/content/posts/2012-04-30-announcing-sketch2.md @@ -6,7 +6,7 @@ linkurl: http://www.bohemiancoding.com/about/blog/announcing-sketch-2-0/ author: Matthias Kretschmann date: 2012-04-30 12:37:05+00:00 -wordpress_id: 1950 + categories: - design post_format: diff --git a/content/posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md b/content/posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md index 57ce1fbe..7cf9e418 100644 --- a/content/posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md +++ b/content/posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md @@ -6,7 +6,7 @@ linkurl: http://www.guardian.co.uk/commentisfree/2012/may/01/open-free-access-ac author: Matthias Kretschmann date: 2012-05-02 03:12:40+00:00 -wordpress_id: 1989 + categories: - links post_format: diff --git a/content/posts/2012-05-03-antique-chrome.md b/content/posts/2012-05-03-antique-chrome.md index 32b77c1a..cf640e21 100644 --- a/content/posts/2012-05-03-antique-chrome.md +++ b/content/posts/2012-05-03-antique-chrome.md @@ -2,11 +2,11 @@ layout: photo title: Antique Chrome -image: 5fc688aa953811e180c9123138016265_7.jpg +image: ../media/5fc688aa953811e180c9123138016265_7.jpg author: Matthias Kretschmann date: 2012-05-03 15:55:15+00:00 -wordpress_id: 1996 + categories: - photos post_format: diff --git a/content/posts/2012-05-04-world-press-photo-2012.md b/content/posts/2012-05-04-world-press-photo-2012.md index 8a6a1534..7a9152f4 100644 --- a/content/posts/2012-05-04-world-press-photo-2012.md +++ b/content/posts/2012-05-04-world-press-photo-2012.md @@ -6,7 +6,7 @@ linkurl: http://www.worldpressphoto.org/gallery/2012-world-press-photo author: Matthias Kretschmann date: 2012-05-04 13:12:54+00:00 -wordpress_id: 1997 + categories: - photography post_format: diff --git a/content/posts/2012-05-09-media-query-asset-downloading-results.md b/content/posts/2012-05-09-media-query-asset-downloading-results.md index 41544540..860a87ae 100644 --- a/content/posts/2012-05-09-media-query-asset-downloading-results.md +++ b/content/posts/2012-05-09-media-query-asset-downloading-results.md @@ -6,7 +6,7 @@ linkurl: http://timkadlec.com/2012/04/media-query-asset-downloading-results/ author: Matthias Kretschmann date: 2012-05-09 09:48:19+00:00 -wordpress_id: 2019 + categories: - design post_format: diff --git a/content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md b/content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md index b7fe5181..2f5f5c38 100644 --- a/content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md +++ b/content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md @@ -6,7 +6,7 @@ linkurl: http://netmagazine.com/opinions/nielsen-vs-clark-theyre-both-wrong author: Matthias Kretschmann date: 2012-05-12 13:19:02+00:00 -wordpress_id: 2024 + categories: - design post_format: diff --git a/content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md b/content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md index 9d680c46..54dcd5de 100644 --- a/content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md +++ b/content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md @@ -6,7 +6,7 @@ linkurl: http://css-tricks.com/which-responsive-images-solution-should-you-use/ author: Matthias Kretschmann date: 2012-05-12 17:52:53+00:00 -wordpress_id: 2041 + categories: - design post_format: diff --git a/content/posts/2012-05-14-welcome-to-kremalicious2.md b/content/posts/2012-05-14-welcome-to-kremalicious2.md index f9fab5be..69c583cf 100644 --- a/content/posts/2012-05-14-welcome-to-kremalicious2.md +++ b/content/posts/2012-05-14-welcome-to-kremalicious2.md @@ -2,11 +2,11 @@ layout: post title: Welcome to kremalicious2 -image: kremalicious2-teaser.jpg +image: ../media/kremalicious2-teaser.jpg author: Matthias Kretschmann date: 2012-05-14 19:33:22+00:00 -wordpress_id: 1920 + categories: - personal @@ -30,13 +30,13 @@ To make future maintenance a bit easier, I’m using the simple [HS Responsive ## Typography -![](/media/kremalicious2-typography.jpg)After much experimentation, all fonts (that is, those for texts) on this blog are now coming from TypeKit. The body text is set in [Rooney Web](http://www.janfromm.de/typefaces/rooney/overview/) from [Jan Fromm](https://twitter.com/janfromm) which looks just gorgeous on Retina screens. All headings & buttons use Adobe's [Cronos Pro](https://typekit.com/fonts/cronos-pro). +![](../media/kremalicious2-typography.jpg)After much experimentation, all fonts (that is, those for texts) on this blog are now coming from TypeKit. The body text is set in [Rooney Web](http://www.janfromm.de/typefaces/rooney/overview/) from [Jan Fromm](https://twitter.com/janfromm) which looks just gorgeous on Retina screens. All headings & buttons use Adobe's [Cronos Pro](https://typekit.com/fonts/cronos-pro). Sadly, Typekit [only works in webkit based mobile browsers](http://help.typekit.com/customer/portal/articles/6786) which is a real bummer. Sorry Firefox & Opera users on mobile devices. ## Icons -![](/media/kremalicious2-topicicons.jpg)All icons on the site are coming from the awesome icon font [Font Awesome](http://fortawesome.github.com/Font-Awesome/) made by Dave Gandy. But the original font was missing some needed glyphs so I’m using a fork called [Font Awesome More](http://gregoryloucas.github.com/Font-Awesome-More/) from Gregory Loucas ([@gregoryLpaul](https://twitter.com/gregoryLpaul)). This makes things like changing icon colors so much easier but using icon fonts still has the problem of small icons not rendering super crisp, although `font-smoothing: antialiased` helps a bit. +![](../media/kremalicious2-topicicons.jpg)All icons on the site are coming from the awesome icon font [Font Awesome](http://fortawesome.github.com/Font-Awesome/) made by Dave Gandy. But the original font was missing some needed glyphs so I’m using a fork called [Font Awesome More](http://gregoryloucas.github.com/Font-Awesome-More/) from Gregory Loucas ([@gregoryLpaul](https://twitter.com/gregoryLpaul)). This makes things like changing icon colors so much easier but using icon fonts still has the problem of small icons not rendering super crisp, although `font-smoothing: antialiased` helps a bit. ## CSS beats Images @@ -46,7 +46,7 @@ The whole interface is mostly CSS based, only the logo typeface with the cloud a But even those @2x assets are just blurry when the user zooms into the interface. But with most interface elements being css or font based you can zoom in ridiculously without anything becoming blurry. That's actually a scaled down full size screenshot of a zoom in on the 3rd generation iPad: -![](/media/kremaliciouscom-iPad-3.jpg) +![](../media/kremaliciouscom-iPad-3.jpg) Needless to say this introduces new problems, especially for performance on mobile devices. As we know, current mobile devices and their browsers come into memory problems when told to render a lot of css box-shadows or css gradients. This all isn't noticeable on Desktop devices or an iPad 1, but it's quite noticeable in the Android stock browser on a Nexus S for instance. @@ -74,11 +74,11 @@ Link post means a short comment from me to a valuable or interesting resource wh ### Photo posts -![](/media/kremalicious2-photoposts.jpg) +![](../media/kremalicious2-photoposts.jpg) [Photo posts](/photos) are my new favorite: beside selected images from my Flickr and 500px profiles, they include automatic posting of my Instagram images. After being taken, a new Instagram image is posted immediately as a special styled photo post in this blog. -![](/media/kremalicious2-photogrid.jpg)And I didn’t wanted to clutter the blog stream in times when there’re a lot of photo-only posts between text based posts. +![](../media/kremalicious2-photogrid.jpg)And I didn’t wanted to clutter the blog stream in times when there’re a lot of photo-only posts between text based posts. So all photo posts which immediately follow one another are grouped together in a grid, nicely laid out by [jQuery Masonry](http://masonry.desandro.com/). I couldn't figure out a way to make this filtering on the WordPress loop level for now so this grouping is done with jQuery after page load. diff --git a/content/posts/2012-05-15-wp-icons-template.md b/content/posts/2012-05-15-wp-icons-template.md index c7cd7932..19e01bc9 100644 --- a/content/posts/2012-05-15-wp-icons-template.md +++ b/content/posts/2012-05-15-wp-icons-template.md @@ -2,11 +2,11 @@ layout: post title: WordPress Admin Icons Template -image: kremalicious-Teaser-WP-Icon-Template.png +image: ../media/kremalicious-Teaser-WP-Icon-Template.png author: Matthias Kretschmann date: 2012-05-15 16:00:44+00:00 -wordpress_id: 2043 + categories: - design @@ -35,7 +35,7 @@ So if you value quality and want pixel perfect icons in your admin area you need ## The Template -![](/media/WordPress-Admin-Icons-Template-Filled.png) +![](../media/WordPress-Admin-Icons-Template-Filled.png) I’ve put the template along with the implementation examples from the next section on [github](https://github.com/kremalicious/wp-icons-template). You can just download the whole package right away: @@ -101,14 +101,14 @@ function custom_post_type_icon() { /* Admin Menu - 16px @2x */ #menu-posts-YOUR_POSTTYPE_NAME .wp-menu-image { - background-image: url('/images/icon-adminmenu16-sprite_2x.png') !important; + background-image: ../media/url('/images/icon-adminmenu16-sprite_2x.png') !important; -webkit-background-size: 16px 48px; -moz-background-size: 16px 48px; background-size: 16px 48px; } /* Post Screen - 32px @2x */ .icon32-posts-YOUR_POSTTYPE_NAME { - background-image: url('/images/icon-adminpage32_2x.png') !important; + background-image: ../media/url('/images/icon-adminpage32_2x.png') !important; -webkit-background-size: 32px 32px; -moz-background-size: 32px 32px; background-size: 32px 32px; @@ -178,7 +178,7 @@ function option_page_icon() { Use only if you put your plugin or option page in the top level via add_menu_page() */ #toplevel_page_PLUGINNAME-FILENAME .wp-menu-image { - background-image: url('/images/icon-adminmenu16-sprite_2x.png') !important; + background-image: ../media/url('/images/icon-adminmenu16-sprite_2x.png') !important; -webkit-background-size: 16px 48px; -moz-background-size: 16px 48px; background-size: 16px 48px; @@ -186,7 +186,7 @@ function option_page_icon() { /* Option Screen - 32px @2x */ #PLUGINNAME.icon32 { - background-image: url('/images/icon-adminpage32_2x.png') !important; + background-image: ../media/url('/images/icon-adminpage32_2x.png') !important; -webkit-background-size: 32px 32px; -moz-background-size: 32px 32px; background-size: 32px 32px; diff --git a/content/posts/2012-05-21-why-comic-sans.md b/content/posts/2012-05-21-why-comic-sans.md index f28f219f..4dd68acf 100644 --- a/content/posts/2012-05-21-why-comic-sans.md +++ b/content/posts/2012-05-21-why-comic-sans.md @@ -6,7 +6,7 @@ linkurl: http://www.connare.com/whycomic.htm author: Matthias Kretschmann date: 2012-05-21 21:18:17+00:00 -wordpress_id: 2120 + categories: - design post_format: diff --git a/content/posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md b/content/posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md index 87d46252..ee9cc6e0 100644 --- a/content/posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md +++ b/content/posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md @@ -6,7 +6,7 @@ linkurl: http://gizmodo.com/5910223/how-yahoo-killed-flickr-and-lost-the-interne author: Matthias Kretschmann date: 2012-05-22 01:00:03+00:00 -wordpress_id: 2125 + categories: - photography post_format: diff --git a/content/posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md b/content/posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md index 2fa3c93d..aba93cab 100644 --- a/content/posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md +++ b/content/posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md @@ -6,7 +6,7 @@ linkurl: http://www.alistapart.com/articles/responsive-images-and-web-standards- author: Matthias Kretschmann date: 2012-05-22 06:23:26+00:00 -wordpress_id: 2133 + categories: - design post_format: diff --git a/content/posts/2012-05-23-like-modern-heating-only-more-badass.md b/content/posts/2012-05-23-like-modern-heating-only-more-badass.md index 599a6188..a616ac84 100644 --- a/content/posts/2012-05-23-like-modern-heating-only-more-badass.md +++ b/content/posts/2012-05-23-like-modern-heating-only-more-badass.md @@ -2,11 +2,11 @@ layout: photo title: Like modern heating only more badass -image: 41b5a454a43811e1989612313815112c_7.jpeg +image: ../media/41b5a454a43811e1989612313815112c_7.jpeg author: Matthias Kretschmann date: 2012-05-23 14:23:38+00:00 -wordpress_id: 2142 + categories: - photos post_format: diff --git a/content/posts/2012-05-26-html-for-icon-font-usage.md b/content/posts/2012-05-26-html-for-icon-font-usage.md index 934931fb..7bdde080 100644 --- a/content/posts/2012-05-26-html-for-icon-font-usage.md +++ b/content/posts/2012-05-26-html-for-icon-font-usage.md @@ -6,7 +6,7 @@ linkurl: http://css-tricks.com/html-for-icon-font-usage/ author: Matthias Kretschmann date: 2012-05-26 05:13:58+00:00 -wordpress_id: 2154 + categories: - design post_format: diff --git a/content/posts/2012-05-27-balloon.md b/content/posts/2012-05-27-balloon.md index f82a7e4d..185f904e 100644 --- a/content/posts/2012-05-27-balloon.md +++ b/content/posts/2012-05-27-balloon.md @@ -2,11 +2,11 @@ layout: photo title: Balloon -image: 690fe368a81911e1b2fe1231380205bf_7.jpg +image: ../media/690fe368a81911e1b2fe1231380205bf_7.jpg author: Matthias Kretschmann date: 2012-05-27 17:16:11+00:00 -wordpress_id: 2167 + categories: - photos post_format: diff --git a/content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md b/content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md index 063cddde..ee4634ff 100644 --- a/content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md +++ b/content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md @@ -6,7 +6,7 @@ linkurl: http://www.fastcodesign.com/1669879/can-we-please-move-past-apples-sill author: Matthias Kretschmann date: 2012-06-05 16:25:56+00:00 -wordpress_id: 2187 + categories: - design post_format: diff --git a/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md b/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md index df46f3a3..0a56695a 100644 --- a/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md +++ b/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md @@ -5,7 +5,7 @@ title: Retina icons in WordPress 3.4 author: Matthias Kretschmann date: 2012-06-13 19:01:20+00:00 -wordpress_id: 2195 + categories: - design @@ -19,12 +19,12 @@ Apart from a nicely responsive admin area, WordPress 3.4 now [includes retina as And it looks gorgeous. Here's a detail screenshot of the admin area in 3.4 in full scale, taken on the iPad 3: -![](/media/wp34_retina_icons.png) +![](../media/wp34_retina_icons.png) So if you're a plugin developer you absolutely want to make sure to include retina assets for your plugin, like a double sized admin menu icon. There's just one problem: WordPress doesn't include anything to make this easy for developers. The functions `register_post_type()` and `add_menu_page()` only allow you to define one image as menu icon which then gets inserted as `img` tag. -[![](/media/kremalicious-Teaser-WP-Icon-Template.png)](/wp-icons-template/)If you want to include retina assets, you have to do it via CSS and media queries. Have a look at the code examples in my [WordPress icons template post](/wp-icons-template/) or peek around in the [github repository](https://github.com/kremalicious/wp-icons-template) to see how this can be achieved. +[![](../media/kremalicious-Teaser-WP-Icon-Template.png)](/wp-icons-template/)If you want to include retina assets, you have to do it via CSS and media queries. Have a look at the code examples in my [WordPress icons template post](/wp-icons-template/) or peek around in the [github repository](https://github.com/kremalicious/wp-icons-template) to see how this can be achieved. And no, [SVG for your icons are not the solution](http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html). diff --git a/content/posts/2012-06-27-typography-window.md b/content/posts/2012-06-27-typography-window.md index b7109b69..6472d9cc 100644 --- a/content/posts/2012-06-27-typography-window.md +++ b/content/posts/2012-06-27-typography-window.md @@ -2,11 +2,11 @@ layout: photo title: Typography window -image: 80a136dabff711e188131231381b5c25_7.jpg +image: ../media/80a136dabff711e188131231381b5c25_7.jpg author: Matthias Kretschmann date: 2012-06-27 01:29:13+00:00 -wordpress_id: 2215 + categories: - photos post_format: diff --git a/content/posts/2012-06-30-why-files-exist.md b/content/posts/2012-06-30-why-files-exist.md index b0bc125f..5ca8a347 100644 --- a/content/posts/2012-06-30-why-files-exist.md +++ b/content/posts/2012-06-30-why-files-exist.md @@ -6,7 +6,7 @@ linkurl: http://blog.filepicker.io/post/26157006600/why-files-exist author: Matthias Kretschmann date: 2012-06-30 18:17:33+00:00 -wordpress_id: 2219 + categories: - design post_format: diff --git a/content/posts/2012-07-04-newton-reconsidered.md b/content/posts/2012-07-04-newton-reconsidered.md index 329aa106..40fcf791 100644 --- a/content/posts/2012-07-04-newton-reconsidered.md +++ b/content/posts/2012-07-04-newton-reconsidered.md @@ -6,7 +6,7 @@ linkurl: http://techland.time.com/2012/06/01/newton-reconsidered/ author: Matthias Kretschmann date: 2012-07-04 01:19:17+00:00 -wordpress_id: 2239 + categories: - design post_format: diff --git a/content/posts/2012-07-07-what-makes-twitter-twitter.md b/content/posts/2012-07-07-what-makes-twitter-twitter.md index 9506353a..d111dc0f 100644 --- a/content/posts/2012-07-07-what-makes-twitter-twitter.md +++ b/content/posts/2012-07-07-what-makes-twitter-twitter.md @@ -6,7 +6,7 @@ linkurl: http://alt.adrianshort.co.uk/blog/2012/06/30/what-makes-twitter-twitter author: Matthias Kretschmann date: 2012-07-07 08:18:58+00:00 -wordpress_id: 2252 + categories: - links post_format: diff --git a/content/posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md b/content/posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md index fce0f311..2fbbb413 100644 --- a/content/posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md +++ b/content/posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md @@ -6,7 +6,7 @@ linkurl: http://motherboard.vice.com/2012/7/10/crossdressing-compression-and-col author: Matthias Kretschmann date: 2012-07-11 21:00:07+00:00 -wordpress_id: 2261 + categories: - photography post_format: diff --git a/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md b/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md index 3fdd81b7..097d57a5 100644 --- a/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md +++ b/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md @@ -1,11 +1,11 @@ --- layout: post title: Add your web site to the Windows 8 Metro UI -image: kremalicious-Teaser-Metro-Tile.jpg +image: ../media/kremalicious-Teaser-Metro-Tile.jpg author: Matthias Kretschmann date: 2012-07-15 16:19:55+00:00 -wordpress_id: 2269 + categories: - design tags: @@ -35,16 +35,16 @@ As an example, I just [pushed](https://github.com/kremalicious/kremalicious2/com When browsing the site in Windows 8/Internet Explorer 10, users have the choice of pinning it to the start screen: -![](/media/Windows-8-Metro-tile-kremalicious.png) +![](../media/Windows-8-Metro-tile-kremalicious.png) And this is how it looks like on the Windows 8 start screen: -![](/media/Windows-8-Metro-tile-kremalicious-in-action.png) +![](../media/Windows-8-Metro-tile-kremalicious-in-action.png) As you can see, pinned sites always get a smaller, square tile. Sadly, the image somehow still gets resized which makes it really hard to create pixel perfect icons for it. It's also not possible to horizontally center the image within it's tile, placing the logo at the bottom of the image file ended up the same. That's because the title can fill two rows. And the image is only used on the start screen but not on the All apps screen where your site will get the default IE logo, at least with the defined background color: -![](/media/Windows-8-Metro-tile-kremalicious-all-apps.png) +![](../media/Windows-8-Metro-tile-kremalicious-all-apps.png) The described behavior and screenshots are from the Windows 8 Consumer Preview and may change. I will update this article if there's new stuff in the final version. diff --git a/content/posts/2012-07-16-using-kbd-for-fun-and-profit.md b/content/posts/2012-07-16-using-kbd-for-fun-and-profit.md index af97aede..2da6e6b6 100644 --- a/content/posts/2012-07-16-using-kbd-for-fun-and-profit.md +++ b/content/posts/2012-07-16-using-kbd-for-fun-and-profit.md @@ -2,7 +2,7 @@ layout: post title: Using <kbd> for fun and profit -image: kremalicious-kbdfun-teaser.png +image: ../media/kremalicious-kbdfun-teaser.png style: post-kbd.min.css author: Matthias Kretschmann featured: true diff --git a/content/posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md b/content/posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md index bbe49753..71047b90 100644 --- a/content/posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md +++ b/content/posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md @@ -6,7 +6,7 @@ linkurl: http://techchannel.att.com/play-video.cfm/2012/7/18/AT&T-Archives-First author: Matthias Kretschmann date: 2012-07-19 12:30:56+00:00 -wordpress_id: 2336 + categories: - design post_format: diff --git a/content/posts/2012-07-20-mmmmh-coffee.md b/content/posts/2012-07-20-mmmmh-coffee.md index f88626e9..d13defa7 100644 --- a/content/posts/2012-07-20-mmmmh-coffee.md +++ b/content/posts/2012-07-20-mmmmh-coffee.md @@ -2,11 +2,11 @@ layout: photo title: Mmmmh, Coffee -image: 66a6e0c0d25a11e1a94522000a1e8aaf_7.jpg +image: ../media/66a6e0c0d25a11e1a94522000a1e8aaf_7.jpg author: Matthias Kretschmann date: 2012-07-20 11:02:30+00:00 -wordpress_id: 2345 + categories: - photos post_format: diff --git a/content/posts/2012-08-07-projectpurple.md b/content/posts/2012-08-07-projectpurple.md index 0fa547b8..f304a96d 100644 --- a/content/posts/2012-08-07-projectpurple.md +++ b/content/posts/2012-08-07-projectpurple.md @@ -2,8 +2,8 @@ layout: post title: Project Purple -image: Teaser-Project-Purple.png -download: project-purple-kremalicious.zip +image: ../media/Teaser-Project-Purple.png +download: ../media/project-purple-kremalicious.zip author: Matthias Kretschmann featured: true @@ -22,11 +22,11 @@ It [has been revealed](http://www.theverge.com/2012/8/3/3218846/schiller-forstal > Forstall said that "on the front door of the Purple Dorm we put a sign up that said 'Fight Club'... because the first rule of that project was to not talk about it outside those doors." -![](/media/project-purple-nexus-kremalicious.png) +![](../media/project-purple-nexus-kremalicious.png) The full size I designed the wallpaper in is 3200x2048px. I don't know why Apple uses 3200px as width for the default wallpapers in Mountain Lion but it seems a good width for now. And a height of 2048px makes this big size perfectly usable for the iPad 3 too. -![](/media/Project-Purple-Dribbble.png) +![](../media/Project-Purple-Dribbble.png) ## Download @@ -36,10 +36,10 @@ Download the whole package with all the sizes included or grab the individual on Download zip

- * [Desktop/rMBP/iPad 3 (3200x2048)](/media/project-purple-kremalicious.png) - * [Laptop/Nexus 7/Galaxy Nexus (1280x800)](/media/project-purple-nexus-kremalicious.png) - * [iPad (1024x1024)](/media/project-purple-ipad-kremalicious.png) - * [iPhone (640x960)](/media/project-purple-iphone4-kremalicious.png) + * [Desktop/rMBP/iPad 3 (3200x2048)](../media/project-purple-kremalicious.png) + * [Laptop/Nexus 7/Galaxy Nexus (1280x800)](../media/project-purple-nexus-kremalicious.png) + * [iPad (1024x1024)](../media/project-purple-ipad-kremalicious.png) + * [iPhone (640x960)](../media/project-purple-iphone4-kremalicious.png) ## License diff --git a/content/posts/2012-08-08-amazingly-early.md b/content/posts/2012-08-08-amazingly-early.md index d277d5b6..f1026ae5 100644 --- a/content/posts/2012-08-08-amazingly-early.md +++ b/content/posts/2012-08-08-amazingly-early.md @@ -2,11 +2,11 @@ layout: photo title: Amazingly early -image: 2ca7a094e10f11e1868c12313817a130_7.jpg +image: ../media/2ca7a094e10f11e1868c12313817a130_7.jpg author: Matthias Kretschmann date: 2012-08-08 04:11:48+00:00 -wordpress_id: 2384 + categories: - photos post_format: diff --git a/content/posts/2012-08-20-im-joining-ezeep.md b/content/posts/2012-08-20-im-joining-ezeep.md index 6c854dae..725572fc 100644 --- a/content/posts/2012-08-20-im-joining-ezeep.md +++ b/content/posts/2012-08-20-im-joining-ezeep.md @@ -2,11 +2,11 @@ layout: post title: I'm joining ezeep -image: kremalicious-Teaser-ezeep.png +image: ../media/kremalicious-Teaser-ezeep.png author: Matthias Kretschmann date: 2012-08-20 14:12:11+00:00 -wordpress_id: 2387 + categories: - personal tags: diff --git a/content/posts/2012-08-25-so-much-room.md b/content/posts/2012-08-25-so-much-room.md index 7fd7331c..b9ef665f 100644 --- a/content/posts/2012-08-25-so-much-room.md +++ b/content/posts/2012-08-25-so-much-room.md @@ -2,11 +2,11 @@ layout: photo title: So much room -image: c0c45b6eeea211e1ad8e22000a1cdbb8_7.jpg +image: ../media/c0c45b6eeea211e1ad8e22000a1cdbb8_7.jpg author: Matthias Kretschmann date: 2012-08-25 10:50:58+00:00 -wordpress_id: 2409 + categories: - photos post_format: diff --git a/content/posts/2012-09-07-huge-station-is-huge.md b/content/posts/2012-09-07-huge-station-is-huge.md index 42416ed2..2516c06e 100644 --- a/content/posts/2012-09-07-huge-station-is-huge.md +++ b/content/posts/2012-09-07-huge-station-is-huge.md @@ -2,11 +2,11 @@ layout: photo title: Huge station is huge -image: 619b3900f92911e1a31922000a1cddf1_7.jpg +image: ../media/619b3900f92911e1a31922000a1cddf1_7.jpg author: Matthias Kretschmann date: 2012-09-07 20:19:52+00:00 -wordpress_id: 2412 + categories: - photos post_format: diff --git a/content/posts/2012-09-10-subway-firefox.md b/content/posts/2012-09-10-subway-firefox.md index 84227f25..c54a879c 100644 --- a/content/posts/2012-09-10-subway-firefox.md +++ b/content/posts/2012-09-10-subway-firefox.md @@ -2,11 +2,11 @@ layout: photo title: Subway Firefox -image: 84f9d2c4fb7411e19ca422000a1d0119_7.jpg +image: ../media/84f9d2c4fb7411e19ca422000a1d0119_7.jpg author: Matthias Kretschmann date: 2012-09-10 18:22:46+00:00 -wordpress_id: 2415 + categories: - photos post_format: diff --git a/content/posts/2012-09-12-sweet-typography.md b/content/posts/2012-09-12-sweet-typography.md index b542055f..a4f0390a 100644 --- a/content/posts/2012-09-12-sweet-typography.md +++ b/content/posts/2012-09-12-sweet-typography.md @@ -2,11 +2,11 @@ layout: photo title: Sweet typography -image: 01f8b0b8fcc611e19b5b123138140bce_7.jpg +image: ../media/01f8b0b8fcc611e19b5b123138140bce_7.jpg author: Matthias Kretschmann date: 2012-09-12 10:38:36+00:00 -wordpress_id: 2418 + categories: - photos post_format: diff --git a/content/posts/2012-09-14-bvg-dos.md b/content/posts/2012-09-14-bvg-dos.md index c85e0e34..e0a61368 100644 --- a/content/posts/2012-09-14-bvg-dos.md +++ b/content/posts/2012-09-14-bvg-dos.md @@ -2,11 +2,11 @@ layout: photo title: BVG DOS -image: 6c4003f2fe9911e1ae9122000a1e9e21_7.jpg +image: ../media/6c4003f2fe9911e1ae9122000a1e9e21_7.jpg author: Matthias Kretschmann date: 2012-09-14 18:24:29+00:00 -wordpress_id: 2421 + categories: - photos post_format: diff --git a/content/posts/2012-09-26-designing-with-code.md b/content/posts/2012-09-26-designing-with-code.md index 3414752f..08d1267e 100644 --- a/content/posts/2012-09-26-designing-with-code.md +++ b/content/posts/2012-09-26-designing-with-code.md @@ -6,7 +6,7 @@ linkurl: http://www.teehanlax.com/blog/designing-with-code/ author: Matthias Kretschmann date: 2012-09-26 11:45:40+00:00 -wordpress_id: 2424 + categories: - design post_format: diff --git a/content/posts/2013-02-17-castle-garden.md b/content/posts/2013-02-17-castle-garden.md index aecce5c6..92213683 100644 --- a/content/posts/2013-02-17-castle-garden.md +++ b/content/posts/2013-02-17-castle-garden.md @@ -2,11 +2,11 @@ layout: photo title: Castle Garden -image: 8372983659_da0e88ca79_o.jpg +image: ../media/8372983659_da0e88ca79_o.jpg author: Matthias Kretschmann date: 2013-02-17 11:50:21+00:00 -wordpress_id: 2434 + categories: - photos post_format: diff --git a/content/posts/2013-02-17-ezeep-android-app-design.md b/content/posts/2013-02-17-ezeep-android-app-design.md index b5cdd33b..da583c70 100644 --- a/content/posts/2013-02-17-ezeep-android-app-design.md +++ b/content/posts/2013-02-17-ezeep-android-app-design.md @@ -2,7 +2,7 @@ layout: photo title: ezeep Android App Design -image: 8455835942_a9b9100373_o.jpg +image: ../media/8455835942_a9b9100373_o.jpg author: Matthias Kretschmann categories: diff --git a/content/posts/2013-02-17-ezeep-office-view.md b/content/posts/2013-02-17-ezeep-office-view.md index 1573c23d..b090264c 100644 --- a/content/posts/2013-02-17-ezeep-office-view.md +++ b/content/posts/2013-02-17-ezeep-office-view.md @@ -2,7 +2,7 @@ layout: photo title: ezeep office view -image: 8450618380_83c64006c6_o.jpg +image: ../media/8450618380_83c64006c6_o.jpg author: Matthias Kretschmann categories: diff --git a/content/posts/2013-05-23-ezeep-birds.md b/content/posts/2013-05-23-ezeep-birds.md index 8a1e2a82..d5803997 100644 --- a/content/posts/2013-05-23-ezeep-birds.md +++ b/content/posts/2013-05-23-ezeep-birds.md @@ -2,7 +2,7 @@ layout: photo title: ezeep birds -image: 8776417095_43553c88c2_o.jpg +image: ../media/8776417095_43553c88c2_o.jpg author: Matthias Kretschmann categories: - photos diff --git a/content/posts/2013-05-23-ezeep-origami.md b/content/posts/2013-05-23-ezeep-origami.md index 9e44bca8..b54de5eb 100644 --- a/content/posts/2013-05-23-ezeep-origami.md +++ b/content/posts/2013-05-23-ezeep-origami.md @@ -2,7 +2,7 @@ layout: photo title: ezeep origami -image: 8782995066_e90ff6b3ae_o.jpg +image: ../media/8782995066_e90ff6b3ae_o.jpg author: Matthias Kretschmann categories: diff --git a/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md b/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md index 42086f2d..637abef1 100644 --- a/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md +++ b/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md @@ -2,7 +2,7 @@ layout: post title: 'Stealing Time: How Technology Can Hurt or Harm Our Inner State' -image: post-time.png +image: ../media/post-time.png author: Matthias Kretschmann categories: - design diff --git a/content/posts/2014-03-10-just-a-normal-sunday.md b/content/posts/2014-03-10-just-a-normal-sunday.md index e4a5825d..c4691381 100644 --- a/content/posts/2014-03-10-just-a-normal-sunday.md +++ b/content/posts/2014-03-10-just-a-normal-sunday.md @@ -1,7 +1,7 @@ --- layout: photo title: Just a normal Sunday -image: just-a-normal-sunday.jpg +image: ../media/just-a-normal-sunday.jpg author: Matthias Kretschmann category: photos --- diff --git a/content/posts/2014-03-15-potsdam.md b/content/posts/2014-03-15-potsdam.md index 5ec7df4c..21ff58d4 100644 --- a/content/posts/2014-03-15-potsdam.md +++ b/content/posts/2014-03-15-potsdam.md @@ -1,8 +1,7 @@ --- layout: photo -published: true title: Potsdam -image: potsdam.jpg +image: ../media/potsdam.jpg author: Matthias Kretschmann category: photos --- @@ -11,4 +10,4 @@ Potsdam at Potsdamer Stadtschloss [flickr](https://www.flickr.com/photos/krema/13229034343/) | [EyeEm](http://www.eyeem.com/p/32659561) -Processed with VSCOcam with b3 preset \ No newline at end of file +Processed with VSCOcam with b3 preset diff --git a/content/posts/2014-03-17-typographic-diamond.md b/content/posts/2014-03-17-typographic-diamond.md index 4b070164..b16c7aac 100644 --- a/content/posts/2014-03-17-typographic-diamond.md +++ b/content/posts/2014-03-17-typographic-diamond.md @@ -1,8 +1,7 @@ --- layout: photo -published: true title: Typographic diamond -image: typographic-diamond.jpg +image: ../media/typographic-diamond.jpg author: Matthias Kretschmann category: photos --- @@ -11,4 +10,4 @@ Typographic diamond at Hobrechtstraße [flickr](https://www.flickr.com/photos/krema/13229327324/) | [EyeEm](http://www.eyeem.com/p/32659836) -Processed with VSCOcam with b5 preset \ No newline at end of file +Processed with VSCOcam with b5 preset diff --git a/content/posts/2014-04-26-ai-weiwei-stools.md b/content/posts/2014-04-26-ai-weiwei-stools.md index 2b014438..f5a962cb 100644 --- a/content/posts/2014-04-26-ai-weiwei-stools.md +++ b/content/posts/2014-04-26-ai-weiwei-stools.md @@ -1,7 +1,7 @@ --- layout: photo title: Ai Weiwei, Stools -image: ai-wei-wei-stools.jpg +image: ../media/ai-wei-wei-stools.jpg author: Matthias Kretschmann category: photos --- diff --git a/content/posts/2014-06-07-airfield-reference-point.md b/content/posts/2014-06-07-airfield-reference-point.md index 239c9ec5..9235e2a1 100644 --- a/content/posts/2014-06-07-airfield-reference-point.md +++ b/content/posts/2014-06-07-airfield-reference-point.md @@ -1,7 +1,7 @@ --- layout: photo title: Airfield Reference Point -image: airfield-reference-point.jpg +image: ../media/airfield-reference-point.jpg author: Matthias Kretschmann category: photos --- diff --git a/content/posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md b/content/posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md index 043caeb3..a3aec312 100644 --- a/content/posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md +++ b/content/posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md @@ -1,7 +1,7 @@ --- layout: photo title: Anton Henning, Heimat schaffen, Simpsons -image: 2015-03-29-anton-henning-heimat-schaffen-simpsons.jpg +image: ../media/2015-03-29-anton-henning-heimat-schaffen-simpsons.jpg author: Matthias Kretschmann category: photos --- diff --git a/content/posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md b/content/posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md index 8a477307..58530d7f 100644 --- a/content/posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md +++ b/content/posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md @@ -1,7 +1,7 @@ --- layout: photo title: Thanks for the tip little orange blob -image: 2015-03-29-thanks-for-the-tip-little-orange-blob.jpg +image: ../media/2015-03-29-thanks-for-the-tip-little-orange-blob.jpg author: Matthias Kretschmann category: photos --- diff --git a/content/posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md b/content/posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md index 75a42040..9e7545a9 100644 --- a/content/posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md +++ b/content/posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md @@ -1,7 +1,7 @@ --- layout: photo title: Suddenly... a new Hindu temple appears around the corner -image: 2015-04-17-suddenly-a-new-hindu-temple-appears-around-the-corner.jpg +image: ../media/2015-04-17-suddenly-a-new-hindu-temple-appears-around-the-corner.jpg author: Matthias Kretschmann category: photos --- diff --git a/content/posts/2015-04-09-most-surprising-dog-i-know.md b/content/posts/2015-04-09-most-surprising-dog-i-know.md index ece4a90e..a4aafa2d 100644 --- a/content/posts/2015-04-09-most-surprising-dog-i-know.md +++ b/content/posts/2015-04-09-most-surprising-dog-i-know.md @@ -1,7 +1,7 @@ --- layout: photo title: Most surprising dog I know -image: most-surprising-dog-i-know.jpg +image: ../media/most-surprising-dog-i-know.jpg author: Matthias Kretschmann category: photos --- diff --git a/content/posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md b/content/posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md index 01881682..617e8168 100644 --- a/content/posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md +++ b/content/posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md @@ -1,7 +1,7 @@ --- layout: photo title: Obligatory it's summer in Berlin photo -image: obligatory-it-s-summer-in-berlin-photo.jpg +image: ../media/obligatory-it-s-summer-in-berlin-photo.jpg author: Matthias Kretschmann category: photos --- diff --git a/content/posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md b/content/posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md index 385eaa1f..f18b96ab 100644 --- a/content/posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md +++ b/content/posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md @@ -1,7 +1,7 @@ --- layout: photo title: That moment when your childhood toys hang painted in a gallery -image: Monstrum_Gameboy_Catherine_Kaleel.jpg +image: ../media/Monstrum_Gameboy_Catherine_Kaleel.jpg author: Matthias Kretschmann category: photos --- diff --git a/content/posts/2015-04-25-tiny-tiny-demons.md b/content/posts/2015-04-25-tiny-tiny-demons.md index d9758bdc..8e3e6930 100644 --- a/content/posts/2015-04-25-tiny-tiny-demons.md +++ b/content/posts/2015-04-25-tiny-tiny-demons.md @@ -1,7 +1,7 @@ --- layout: photo title: Tiny tiny demons -image: tiny_tiny_demons.jpg +image: ../media/tiny_tiny_demons.jpg author: Matthias Kretschmann category: photos --- diff --git a/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md b/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md index 5d7078c6..21d19d4b 100644 --- a/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md +++ b/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md @@ -2,7 +2,7 @@ layout: post title: Simple Tor setup on macOS -image: teaser-tor.png +image: ../media/teaser-tor.png author: Matthias Kretschmann date: 2015-08-02 21:57:30.912218000 +02:00 updated: 2018-07-11 00:52:46+02:00 @@ -33,7 +33,7 @@ I'm using macOS High Sierra (10.13) for the following instructions but it should ## Tor Browser -![Tor Browser](/media/tor-browser.png) +![Tor Browser](../media/tor-browser.png) The most simple way to surf anonymously with Tor is to just grab [Tor Browser](https://www.torproject.org/projects/torbrowser.html.en). It's a modified version of [Firefox Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/organizations/) with Tor and some extensions (Torbutton, TorLauncher, NoScript, and HTTPS-Everywhere) built right in. Upon start, Tor Browser automatically starts the required Tor background processes and routes traffic through the Tor network. That's the way to go if you want the highest level of protection without much further configuration. @@ -76,7 +76,7 @@ You can do this under *System Preferences > Network* by creating a specific Tor - *SOCKS proxy server*: `localhost` - *Port*: `9050` -![Network Settings](/media/tor-osx-proxy.png) +![Network Settings](../media/tor-osx-proxy.png) 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. @@ -132,7 +132,7 @@ tor.sh and Tor should run smoothly on your system without additional configuration: -![Tor running in Terminal](/media/tor-osx-terminal.png) +![Tor running in Terminal](../media/tor-osx-terminal.png) Verify you're indeed browsing over the Tor network by going to [check.torproject.org](https://check.torproject.org). diff --git a/content/posts/2015-09-13-css-app-store-badges.md b/content/posts/2015-09-13-css-app-store-badges.md index b3162296..93aa7772 100644 --- a/content/posts/2015-09-13-css-app-store-badges.md +++ b/content/posts/2015-09-13-css-app-store-badges.md @@ -2,7 +2,7 @@ layout: post title: CSS App Store Badges -image: teaser-appstorebadges.png +image: ../media/teaser-appstorebadges.png author: Matthias Kretschmann date: 2015-09-13 18:55:18.418548000 +02:00 diff --git a/content/posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md b/content/posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md index 0f636b56..8e5ce3ca 100644 --- a/content/posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md +++ b/content/posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md @@ -1,7 +1,7 @@ --- layout: photo title: 'Gaudí knows how to impress with a ceiling' -image: sagrada-familia-ceiling.jpg +image: ../media/sagrada-familia-ceiling.jpg author: Matthias Kretschmann date: 2016-02-25 16:52:24.544813000 +01:00 category: photos diff --git a/content/posts/2016-02-27-streets-of-el-raval.md b/content/posts/2016-02-27-streets-of-el-raval.md index ba6b7c4a..c8b5c686 100644 --- a/content/posts/2016-02-27-streets-of-el-raval.md +++ b/content/posts/2016-02-27-streets-of-el-raval.md @@ -1,7 +1,7 @@ --- layout: photo title: Streets of El Raval -image: streets-of-el-raval.jpg +image: ../media/streets-of-el-raval.jpg author: Matthias Kretschmann date: 2016-02-27 17:28:23.878566000 +01:00 category: photos diff --git a/content/posts/2016-03-02-a-storm-is-coming.md b/content/posts/2016-03-02-a-storm-is-coming.md index 5a3cf4ec..8ab6be83 100644 --- a/content/posts/2016-03-02-a-storm-is-coming.md +++ b/content/posts/2016-03-02-a-storm-is-coming.md @@ -1,7 +1,7 @@ --- layout: photo title: A storm is coming -image: a-storm-is-coming.jpg +image: ../media/a-storm-is-coming.jpg author: Matthias Kretschmann category: photos --- diff --git a/content/posts/2017-02-13-keith-haring-vandalizing-a-wall.md b/content/posts/2017-02-13-keith-haring-vandalizing-a-wall.md index b93373b0..d8425ac9 100644 --- a/content/posts/2017-02-13-keith-haring-vandalizing-a-wall.md +++ b/content/posts/2017-02-13-keith-haring-vandalizing-a-wall.md @@ -1,7 +1,7 @@ --- layout: photo title: K. Haring vandalizing a wall -image: keith-haring-vandalizing-a-wall.jpg +image: ../media/keith-haring-vandalizing-a-wall.jpg author: Matthias Kretschmann category: photos --- diff --git a/content/posts/2017-02-13-streets-of-el-born.md b/content/posts/2017-02-13-streets-of-el-born.md index 40b72680..cc6cf68d 100644 --- a/content/posts/2017-02-13-streets-of-el-born.md +++ b/content/posts/2017-02-13-streets-of-el-born.md @@ -1,7 +1,7 @@ --- layout: photo title: Streets of El Born -image: streets-of-el-born.jpg +image: ../media/streets-of-el-born.jpg author: Matthias Kretschmann category: photos --- diff --git a/content/posts/2017-02-14-new-passion-facade.md b/content/posts/2017-02-14-new-passion-facade.md index f734543d..68256acf 100644 --- a/content/posts/2017-02-14-new-passion-facade.md +++ b/content/posts/2017-02-14-new-passion-facade.md @@ -1,7 +1,7 @@ --- layout: photo title: New Passion Façade -image: new-passion-facade.jpg +image: ../media/new-passion-facade.jpg author: Matthias Kretschmann category: photos --- diff --git a/content/posts/2017-02-16-coolhaven-rotterdam.md b/content/posts/2017-02-16-coolhaven-rotterdam.md index 65fd4788..03f8896a 100644 --- a/content/posts/2017-02-16-coolhaven-rotterdam.md +++ b/content/posts/2017-02-16-coolhaven-rotterdam.md @@ -1,7 +1,7 @@ --- layout: photo title: Coolhaven Rotterdam -image: coolhaven-rotterdam.jpg +image: ../media/coolhaven-rotterdam.jpg author: Matthias Kretschmann category: photos --- diff --git a/content/posts/2017-02-17-behind-the-art.md b/content/posts/2017-02-17-behind-the-art.md index 35612707..8789412a 100644 --- a/content/posts/2017-02-17-behind-the-art.md +++ b/content/posts/2017-02-17-behind-the-art.md @@ -1,7 +1,7 @@ --- layout: photo title: Behind the art -image: behind-the-art.jpg +image: ../media/behind-the-art.jpg author: Matthias Kretschmann category: photos --- diff --git a/content/posts/2017-02-19-rotterdam-coats.md b/content/posts/2017-02-19-rotterdam-coats.md index 56467acf..aedd60d9 100644 --- a/content/posts/2017-02-19-rotterdam-coats.md +++ b/content/posts/2017-02-19-rotterdam-coats.md @@ -1,7 +1,7 @@ --- layout: photo title: Rotterdam coats -image: 2017-02-19-rotterdam-coats.jpg +image: ../media/2017-02-19-rotterdam-coats.jpg author: Matthias Kretschmann date: 2017-02-19 21:13:38.626498000 +02:00 category: photos diff --git a/content/posts/2017-02-21-david-chipperfield-staircase.md b/content/posts/2017-02-21-david-chipperfield-staircase.md index d0f86ae1..7f6755c0 100644 --- a/content/posts/2017-02-21-david-chipperfield-staircase.md +++ b/content/posts/2017-02-21-david-chipperfield-staircase.md @@ -1,7 +1,7 @@ --- layout: photo title: David Chipperfield staircase -image: 2017-02-21-david-chipperfield-staircase.jpg +image: ../media/2017-02-21-david-chipperfield-staircase.jpg author: Matthias Kretschmann date: 2017-02-21 21:18:36.350189000 +02:00 category: photos diff --git a/content/posts/2017-02-26-eu-gotham-city.md b/content/posts/2017-02-26-eu-gotham-city.md index 38d52562..1c10730f 100644 --- a/content/posts/2017-02-26-eu-gotham-city.md +++ b/content/posts/2017-02-26-eu-gotham-city.md @@ -1,7 +1,7 @@ --- layout: photo title: EU Gotham City -image: 2017-02-26-eu-gotham-city.jpg +image: ../media/2017-02-26-eu-gotham-city.jpg author: Matthias Kretschmann date: 2017-02-26 23:32:50.225380000 +02:00 category: photos diff --git a/content/posts/2017-02-27-amsterdam-cliche.md b/content/posts/2017-02-27-amsterdam-cliche.md index 359009ff..3f44a595 100644 --- a/content/posts/2017-02-27-amsterdam-cliche.md +++ b/content/posts/2017-02-27-amsterdam-cliche.md @@ -1,7 +1,7 @@ --- layout: photo title: Amsterdam cliché -image: 2017-02-27-amsterdam-cliche.jpg +image: ../media/2017-02-27-amsterdam-cliche.jpg author: Matthias Kretschmann date: 2017-02-27 16:21:42.964539000 +02:00 category: photos diff --git a/content/posts/2017-02-27-its-dark-and-i-dont-exist.md b/content/posts/2017-02-27-its-dark-and-i-dont-exist.md index d9748115..04e7da80 100644 --- a/content/posts/2017-02-27-its-dark-and-i-dont-exist.md +++ b/content/posts/2017-02-27-its-dark-and-i-dont-exist.md @@ -1,7 +1,7 @@ --- layout: photo title: "It's dark and I don't exist" -image: 2017-02-27-its-dark-and-i-dont-exist.jpg +image: ../media/2017-02-27-its-dark-and-i-dont-exist.jpg author: Matthias Kretschmann date: 2017-02-27 17:29:32.626557000 +02:00 category: photos diff --git a/content/posts/2017-02-28-stedelijk-museum.md b/content/posts/2017-02-28-stedelijk-museum.md index a60141d7..88fb38fc 100644 --- a/content/posts/2017-02-28-stedelijk-museum.md +++ b/content/posts/2017-02-28-stedelijk-museum.md @@ -1,7 +1,7 @@ --- layout: photo title: Stedelijk Museum -image: 2017-02-28-stedelijk-museum.jpg +image: ../media/2017-02-28-stedelijk-museum.jpg author: Matthias Kretschmann date: 2017-02-28 13:48:35.217273000 +02:00 category: photos diff --git a/content/posts/2017-02-28-temple-guardian-rijksmuseum.md b/content/posts/2017-02-28-temple-guardian-rijksmuseum.md index 3a9c014c..676a4075 100644 --- a/content/posts/2017-02-28-temple-guardian-rijksmuseum.md +++ b/content/posts/2017-02-28-temple-guardian-rijksmuseum.md @@ -1,7 +1,7 @@ --- layout: photo title: Temple Guardian Rijksmuseum -image: 2017-02-28-temple-guardian-rijksmuseum.jpg +image: ../media/2017-02-28-temple-guardian-rijksmuseum.jpg author: Matthias Kretschmann date: 2017-02-28 15:38:28.206431000 +02:00 category: photos diff --git a/content/posts/2017-02-28-watching-the-night-watch.md b/content/posts/2017-02-28-watching-the-night-watch.md index b687a61a..90bf1ae2 100644 --- a/content/posts/2017-02-28-watching-the-night-watch.md +++ b/content/posts/2017-02-28-watching-the-night-watch.md @@ -1,7 +1,7 @@ --- layout: photo title: Watching The Night Watch -image: 2017-02-28-watching-the-night-watch.jpg +image: ../media/2017-02-28-watching-the-night-watch.jpg author: Matthias Kretschmann date: 2017-02-28 14:45:08.139508000 +02:00 category: photos diff --git a/content/posts/2017-04-16-hamburgs-elbphilharmonie.md b/content/posts/2017-04-16-hamburgs-elbphilharmonie.md index fc8755fb..b64952de 100644 --- a/content/posts/2017-04-16-hamburgs-elbphilharmonie.md +++ b/content/posts/2017-04-16-hamburgs-elbphilharmonie.md @@ -1,7 +1,7 @@ --- layout: photo title: Hamburg's Elbphilharmonie -image: 2017-04-16-hamburgs-elbphilharmonie.jpg +image: ../media/2017-04-16-hamburgs-elbphilharmonie.jpg author: Matthias Kretschmann date: 2017-04-16 18:26:20.280801000 +02:00 category: photos diff --git a/content/posts/2017-07-05-kapaleeshwarar-temple-chennai.md b/content/posts/2017-07-05-kapaleeshwarar-temple-chennai.md index 9d515009..80ee6c46 100644 --- a/content/posts/2017-07-05-kapaleeshwarar-temple-chennai.md +++ b/content/posts/2017-07-05-kapaleeshwarar-temple-chennai.md @@ -1,7 +1,7 @@ --- layout: photo title: Kapaleeshwarar Temple Chennai -image: 2017-07-05-kapaleeshwarar-temple-chennai.jpg +image: ../media/2017-07-05-kapaleeshwarar-temple-chennai.jpg author: Matthias Kretschmann date: 2017-07-05 21:21:41.413746000 +02:00 category: photos diff --git a/content/posts/2017-07-08-kochis-streetart-game-is-strong.md b/content/posts/2017-07-08-kochis-streetart-game-is-strong.md index d595f845..15748a47 100644 --- a/content/posts/2017-07-08-kochis-streetart-game-is-strong.md +++ b/content/posts/2017-07-08-kochis-streetart-game-is-strong.md @@ -1,7 +1,7 @@ --- layout: photo title: "Kochi's street art game is strong" -image: 2017-07-14-kochis-streetart-game-is-strong.jpg +image: ../media/2017-07-14-kochis-streetart-game-is-strong.jpg author: Matthias Kretschmann date: 2017-07-08 14:28:19.869188000 +02:00 category: photos diff --git a/content/posts/2017-07-09-orphaned-elephant-with-friend.md b/content/posts/2017-07-09-orphaned-elephant-with-friend.md index 286d584e..9bdf10a3 100644 --- a/content/posts/2017-07-09-orphaned-elephant-with-friend.md +++ b/content/posts/2017-07-09-orphaned-elephant-with-friend.md @@ -1,7 +1,7 @@ --- layout: photo title: Orphaned elephant with friend -image: 2017-07-09-orphaned-elephant-with-friend.jpg +image: ../media/2017-07-09-orphaned-elephant-with-friend.jpg author: Matthias Kretschmann date: 2017-07-09 09:41:37.771378000 +02:00 category: photos diff --git a/content/posts/2017-07-10-kochis-dhobhi-ghat.md b/content/posts/2017-07-10-kochis-dhobhi-ghat.md index fa6f5a21..652e2e8d 100644 --- a/content/posts/2017-07-10-kochis-dhobhi-ghat.md +++ b/content/posts/2017-07-10-kochis-dhobhi-ghat.md @@ -1,7 +1,7 @@ --- layout: photo title: Kochis dhobhi ghat -image: 2017-07-10-kochis-dhobhi-ghat.jpg +image: ../media/2017-07-10-kochis-dhobhi-ghat.jpg author: Matthias Kretschmann date: 2017-07-10 14:28:19.869188000 +02:00 category: photos diff --git a/content/posts/2017-07-13-mumbai-hand-painted-typography.md b/content/posts/2017-07-13-mumbai-hand-painted-typography.md index 6796d39e..f1715a59 100644 --- a/content/posts/2017-07-13-mumbai-hand-painted-typography.md +++ b/content/posts/2017-07-13-mumbai-hand-painted-typography.md @@ -1,7 +1,7 @@ --- layout: photo title: "The art of hand painted typography" -image: 2017-07-13-mumbai-hand-painted-typography.jpg +image: ../media/2017-07-13-mumbai-hand-painted-typography.jpg author: Matthias Kretschmann date: 2017-07-13 16:28:19.869188000 +02:00 category: photos diff --git a/content/posts/2017-07-13-obligatory-gate-of-india-photo.md b/content/posts/2017-07-13-obligatory-gate-of-india-photo.md index 48881cc7..6ac78767 100644 --- a/content/posts/2017-07-13-obligatory-gate-of-india-photo.md +++ b/content/posts/2017-07-13-obligatory-gate-of-india-photo.md @@ -1,7 +1,7 @@ --- layout: photo title: "Obligatory Gateway of India photo" -image: 2017-07-13-obligatory-gate-of-india-photo.jpg +image: ../media/2017-07-13-obligatory-gate-of-india-photo.jpg author: Matthias Kretschmann date: 2017-07-13 14:28:19.869188000 +02:00 category: photos diff --git a/content/posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md b/content/posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md index e8737a19..66a3509e 100644 --- a/content/posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md +++ b/content/posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md @@ -1,7 +1,7 @@ --- layout: photo title: "Chhatrapati Shivaji Maharaj Vastu Sangrahalaya" -image: 2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.jpg +image: ../media/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.jpg author: Matthias Kretschmann date: 2017-07-14 14:28:19.869188000 +02:00 category: photos diff --git a/content/posts/2017-11-10-acropolis-the-erechtheum.md b/content/posts/2017-11-10-acropolis-the-erechtheum.md index 2de4be67..778a8b8b 100644 --- a/content/posts/2017-11-10-acropolis-the-erechtheum.md +++ b/content/posts/2017-11-10-acropolis-the-erechtheum.md @@ -1,7 +1,7 @@ --- layout: photo title: "The Erechtheum" -image: 2017-11-10-acropolis-the-erechtheum.jpg +image: ../media/2017-11-10-acropolis-the-erechtheum.jpg author: Matthias Kretschmann date: 2017-11-10 14:42:19.869188000 +02:00 category: photos diff --git a/content/posts/2017-11-10-acropolis-the-parthenon.md b/content/posts/2017-11-10-acropolis-the-parthenon.md index 709646eb..a9fe62fb 100644 --- a/content/posts/2017-11-10-acropolis-the-parthenon.md +++ b/content/posts/2017-11-10-acropolis-the-parthenon.md @@ -1,7 +1,7 @@ --- layout: photo title: "The Parthenon" -image: 2017-11-10-acropolis-the-parthenon.jpg +image: ../media/2017-11-10-acropolis-the-parthenon.jpg author: Matthias Kretschmann date: 2017-11-10 14:37:19.869188000 +02:00 category: photos diff --git a/content/posts/2017-11-10-acropolis-the-propylaea.md b/content/posts/2017-11-10-acropolis-the-propylaea.md index de1af7e2..8c1b4402 100644 --- a/content/posts/2017-11-10-acropolis-the-propylaea.md +++ b/content/posts/2017-11-10-acropolis-the-propylaea.md @@ -1,7 +1,7 @@ --- layout: photo title: "The Propylaea" -image: 2017-11-10-acropolis-the-propylaea.jpg +image: ../media/2017-11-10-acropolis-the-propylaea.jpg author: Matthias Kretschmann date: 2017-11-10 14:32:19.869188000 +02:00 category: photos diff --git a/content/posts/2017-12-16-sagrada-familia.md b/content/posts/2017-12-16-sagrada-familia.md index f1a2eb6e..5165dbce 100644 --- a/content/posts/2017-12-16-sagrada-familia.md +++ b/content/posts/2017-12-16-sagrada-familia.md @@ -1,7 +1,7 @@ --- layout: photo title: "Sagrada Família" -image: 2017-12-16-sagrada-familia.jpg +image: ../media/2017-12-16-sagrada-familia.jpg author: Matthias Kretschmann date: 2017-12-16 13:01:21.869188000 +02:00 category: photos diff --git a/content/posts/2017-12-27-sao-paulo-traffic.md b/content/posts/2017-12-27-sao-paulo-traffic.md index 177fe3f8..1cb4fe33 100644 --- a/content/posts/2017-12-27-sao-paulo-traffic.md +++ b/content/posts/2017-12-27-sao-paulo-traffic.md @@ -1,7 +1,7 @@ --- layout: photo title: "Traffic of São Paulo" -image: 2017-12-27-sao-paulo-traffic.jpg +image: ../media/2017-12-27-sao-paulo-traffic.jpg author: Matthias Kretschmann date: 2017-12-27 13:03:21.869188000 -02:00 category: photos diff --git a/content/posts/2018-01-04-passagem-literaria-da-consolacao.md b/content/posts/2018-01-04-passagem-literaria-da-consolacao.md index 375c71a5..76683556 100644 --- a/content/posts/2018-01-04-passagem-literaria-da-consolacao.md +++ b/content/posts/2018-01-04-passagem-literaria-da-consolacao.md @@ -1,7 +1,7 @@ --- layout: photo title: "Passagem Literária da Consolação" -image: 2018-01-04-passagem-literaria-da-consolacao.jpg +image: ../media/2018-01-04-passagem-literaria-da-consolacao.jpg author: Matthias Kretschmann date: 2018-01-04 16:02:02.869188000 -02:00 category: photos diff --git a/content/posts/2018-01-05-samba-school.md b/content/posts/2018-01-05-samba-school.md index 0ed514d0..d8c3ad98 100644 --- a/content/posts/2018-01-05-samba-school.md +++ b/content/posts/2018-01-05-samba-school.md @@ -1,7 +1,7 @@ --- layout: photo title: "Escola de Samba" -image: 2018-01-05-samba-school.jpg +image: ../media/2018-01-05-samba-school.jpg author: Matthias Kretschmann date: 2018-01-05 21:56:02.869188000 -02:00 category: photos From 1cd59e0a84ea782088b0ff19d56f48fec8f91998 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 17 Jul 2018 23:33:55 +0200 Subject: [PATCH 003/100] basic setup for blog posts & media --- README.md | 20 +- gatsby-config.js | 60 +-- gatsby-node.js | 140 ++++++ package.json | 19 +- src/components/Image.jsx | 30 ++ src/components/Image.module.scss | 19 + src/pages/404.jsx | 16 + src/pages/index.jsx | 42 ++ src/pages/styleguide.md | 773 +++++++++++++++++++++++++++++++ src/templates/post.jsx | 51 ++ static/robots.txt | 5 +- 11 files changed, 1119 insertions(+), 56 deletions(-) create mode 100644 src/components/Image.jsx create mode 100644 src/components/Image.module.scss create mode 100644 src/pages/404.jsx create mode 100644 src/pages/index.jsx create mode 100644 src/pages/styleguide.md create mode 100644 src/templates/post.jsx diff --git a/README.md b/README.md index a12575d2..5a9ab9a4 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,17 @@ -blog -================== +# blog > [kremalicious.com](http://kremalicious.com) built with [Gatsby](http://gatsbyjs.org). Neat. [![Build Status](https://travis-ci.com/kremalicious/kremalicious3.svg?branch=master)](https://travis-ci.com/kremalicious/kremalicious3) [![Greenkeeper badge](https://badges.greenkeeper.io/kremalicious/kremalicious3.svg)](https://greenkeeper.io/) - -Requirements ------------------- +## Requirements You need to have the following tools installed on your development machine before moving on: -- [node.js](http://nodejs.org/) & [npm](https://npmjs.org/) - - -Get up and running ------------------- +- [Node.js](http://nodejs.org/) & [npm](https://npmjs.org/) +## Get up and running ### Install dependencies @@ -29,8 +23,6 @@ npm install ### Development server -This generates the site with the dev build task `gulp build` and starts a local dev server combined with a livereloading watch task under `http://localhost:1337`. - ```bash npm start ``` @@ -41,9 +33,7 @@ npm start npm run build ``` - -Licenses ------------------- +## Licenses ### Posts diff --git a/gatsby-config.js b/gatsby-config.js index 4143e5c1..98e400c2 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -9,36 +9,11 @@ module.exports = { siteUrl: `${url}` }, plugins: [ - 'gatsby-plugin-react-helmet', - 'gatsby-transformer-yaml', - { - resolve: 'gatsby-transformer-remark', - options: { - plugins: [ - { - resolve: 'gatsby-remark-images', - options: { - maxWidth: 600 - } - }, - 'gatsby-remark-smartypants' - ] - } - }, - 'gatsby-transformer-sharp', - 'gatsby-plugin-sharp', - 'gatsby-plugin-sitemap', - { - resolve: 'gatsby-plugin-sass', - options: { - includePaths: [`${__dirname}/node_modules`] - } - }, { resolve: 'gatsby-source-filesystem', options: { - name: 'pages', - path: path.join(__dirname, 'content', 'pages') + name: 'posts', + path: path.join(__dirname, 'content', 'posts') } }, { @@ -47,6 +22,35 @@ module.exports = { name: 'media', path: path.join(__dirname, 'content', 'media') } - } + }, + { + resolve: 'gatsby-transformer-remark', + options: { + plugins: [ + { + resolve: 'gatsby-remark-images', + options: { + maxWidth: 940, + linkImagesToOriginal: false, + sizeByPixelDensity: true, + showCaptions: true + } + }, + 'gatsby-remark-smartypants', + 'gatsby-remark-autolink-headers' + ] + } + }, + { + resolve: 'gatsby-plugin-sass', + options: { + includePaths: [`${__dirname}/node_modules`] + } + }, + 'gatsby-plugin-react-helmet', + 'gatsby-transformer-yaml', + 'gatsby-transformer-sharp', + 'gatsby-plugin-sharp', + 'gatsby-plugin-sitemap' ] } diff --git a/gatsby-node.js b/gatsby-node.js index e69de29b..46d32db4 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -0,0 +1,140 @@ +const path = require('path') +const { createFilePath } = require('gatsby-source-filesystem') + +// Create slug & date for posts from file path +exports.onCreateNode = ({ node, actions, getNode }) => { + const { createNodeField } = actions + + if (node.internal.type === 'MarkdownRemark') { + const fileNode = getNode(node.parent) + const parsedFilePath = path.parse(fileNode.relativePath) + + // slug + const slugOriginal = createFilePath({ node, getNode }) + const slug = `/${slugOriginal.substring(12)}` // remove date from file path + + createNodeField({ + node, + name: 'slug', + value: slug + }) + + // date + let date + + if (node.frontmatter.date) { + date = `${node.frontmatter.date}` + } else { + date = `${parsedFilePath.name.substring(0, 10)}` + } + + createNodeField({ + node, + name: 'date', + value: date + }) + } +} + +exports.createPages = ({ graphql, actions }) => { + const { createPage } = actions + + return new Promise((resolve, reject) => { + const postTemplate = path.resolve('src/templates/post.jsx') + // const indexTemplate = path.resolve('src/templates/index.jsx') + // const tagPage = path.resolve('src/templates/tag.jsx') + // const categoryPage = path.resolve('src/templates/category.jsx') + + resolve( + graphql( + ` + { + allMarkdownRemark { + edges { + node { + fields { + slug + } + } + } + } + } + ` + ).then(result => { + if (result.errors) { + /* eslint no-console: "off" */ + console.log(result.errors) + reject(result.errors) + } + + // Creates Index page + // createPaginatedPages({ + // edges: result.data.allMarkdownRemark.edges, + // createPage: createPage, + // pageTemplate: indexTemplate + // }) + + // Create Posts + result.data.allMarkdownRemark.edges.forEach(edge => { + createPage({ + path: `${edge.node.fields.slug}`, + component: postTemplate, + context: { + slug: edge.node.fields.slug + } + }) + }) + + // const tagSet = new Set() + // const tagMap = new Map() + // const categorySet = new Set() + + // result.data.allMarkdownRemark.edges.forEach(edge => { + // if (edge.node.frontmatter.tags) { + // edge.node.frontmatter.tags.forEach(tag => { + // tagSet.add(tag) + + // const array = tagMap.has(tag) ? tagMap.get(tag) : [] + // array.push(edge) + // tagMap.set(tag, array) + // }) + // } + + // if (edge.node.frontmatter.category) { + // categorySet.add(edge.node.frontmatter.category) + // } + // }) + + // const tagFormatter = tag => route => + // `/tags/${_.kebabCase(tag)}/${route !== 1 ? route : ''}` + // const tagList = Array.from(tagSet) + // tagList.forEach(tag => { + // // Creates tag pages + // createPaginationPages({ + // createPage, + // edges: tagMap.get(tag), + // component: tagPage, + // pathFormatter: tagFormatter(tag), + // limit: siteConfig.sitePaginationLimit, + // context: { + // tag + // } + // }) + // }) + + // const categoryList = Array.from(categorySet) + // categoryList.forEach(category => { + // createPage({ + // path: `/categories/${_.kebabCase(category)}/`, + // component: categoryPage, + // context: { + // category + // } + // }) + // }) + + resolve() + }) + ) + }) +} diff --git a/package.json b/package.json index e677810d..86b753fe 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "build": "gatsby build", "format": "prettier --write 'src/**/*.{js,jsx}'", "format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'", - "lint:js": "eslint ./gatsby-*.js && eslint ./src/**/*.{js,jsx}", + "lint:js": "eslint ./gatsby-*.js && eslint ./src/**/*.jsx", "lint:css": "stylelint ./src/**/*.{css,scss}", "lint": "npm run lint:js && npm run lint:css", "test": "npm run lint", @@ -24,18 +24,19 @@ "@webcomponents/webcomponentsjs": "^2.0.2", "clipboard": "^2.0.1", "exif-js": "^2.3.0", - "gatsby": "^2.0.0-beta.24", - "gatsby-image": "^2.0.0-beta.5", + "gatsby": "^2.0.0-beta.43", + "gatsby-image": "^2.0.0-beta.6", "gatsby-plugin-matomo": "^0.4.1", "gatsby-plugin-react-helmet": "^3.0.0-beta.3", "gatsby-plugin-sass": "^2.0.0-beta.5", - "gatsby-plugin-sharp": "^2.0.0-beta.3", + "gatsby-plugin-sharp": "^2.0.0-beta.5", "gatsby-plugin-sitemap": "^2.0.0-beta.2", - "gatsby-remark-images": "^2.0.1-beta.4", + "gatsby-remark-autolink-headers": "^2.0.0-beta.3", + "gatsby-remark-images": "^2.0.1-beta.7", "gatsby-remark-smartypants": "^2.0.0-beta.2", - "gatsby-source-filesystem": "^2.0.1-beta.3", - "gatsby-transformer-remark": "^2.1.1-beta.2", - "gatsby-transformer-sharp": "^2.1.1-beta.2", + "gatsby-source-filesystem": "^2.0.1-beta.5", + "gatsby-transformer-remark": "^2.1.1-beta.3", + "gatsby-transformer-sharp": "^2.1.1-beta.5", "gatsby-transformer-yaml": "^2.1.1-beta.2", "graphql": "^0.13.2", "node-sass": "^4.9.2", @@ -49,7 +50,7 @@ "vex-js": "^4.1.0" }, "devDependencies": { - "babel-eslint": "^8.2.5", + "babel-eslint": "^8.2.6", "eslint": "^5.1.0", "eslint-config-prettier": "^2.9.0", "eslint-loader": "^2.0.0", diff --git a/src/components/Image.jsx b/src/components/Image.jsx new file mode 100644 index 00000000..8b4cbd73 --- /dev/null +++ b/src/components/Image.jsx @@ -0,0 +1,30 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { graphql } from 'gatsby' +import Img from 'gatsby-image' +import styles from './Image.module.scss' + +const Image = props => ( + {props.alt} +) + +Image.propTypes = { + fluid: PropTypes.object.isRequired, + alt: PropTypes.string +} + +export const projectImage = graphql` + fragment ImageFluid on ImageSharp { + fluid(maxWidth: 940, quality: 85) { + ...GatsbyImageSharpFluid_withWebp + } + } +` + +export default Image diff --git a/src/components/Image.module.scss b/src/components/Image.module.scss new file mode 100644 index 00000000..61f01f91 --- /dev/null +++ b/src/components/Image.module.scss @@ -0,0 +1,19 @@ +.image { + img { + display: block; + max-width: 100%; + height: auto; + } +} + +.imageWrap { + margin-left: auto; + margin-right: auto; + display: block; + + @media (min-width: 940px) { + max-width: 940px; + border-radius: .25rem; + overflow: hidden; + } +} diff --git a/src/pages/404.jsx b/src/pages/404.jsx new file mode 100644 index 00000000..9c25f0d8 --- /dev/null +++ b/src/pages/404.jsx @@ -0,0 +1,16 @@ +import React, { Fragment } from 'react' + +const NotFound = () => ( + +
+ +

I am sorry Dave,

+

I am afraid I can NotFound do that.

+ + + How about a nice search? + + +) + +export default NotFound diff --git a/src/pages/index.jsx b/src/pages/index.jsx new file mode 100644 index 00000000..05b9cdc9 --- /dev/null +++ b/src/pages/index.jsx @@ -0,0 +1,42 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { Link, graphql } from 'gatsby' + +const IndexPage = ({ data }) => { + const edges = data.allMarkdownRemark.edges + const Posts = edges + // .filter(edge => !!edge.node.frontmatter.date) + .map(edge => ( +
  • + {edge.node.frontmatter.title} +
    • + )) + + return
      {Posts}
    +} + +IndexPage.propTypes = { + data: PropTypes.object.isRequired +} + +export default IndexPage + +export const indexQuery = graphql` + query { + allMarkdownRemark(sort: { order: DESC, fields: [fields___date] }) { + edges { + node { + id + excerpt(pruneLength: 250) + frontmatter { + title + } + fields { + slug + date(formatString: "MMMM DD, YYYY") + } + } + } + } + } +` diff --git a/src/pages/styleguide.md b/src/pages/styleguide.md new file mode 100644 index 00000000..24ae24f8 --- /dev/null +++ b/src/pages/styleguide.md @@ -0,0 +1,773 @@ +--- +layout: page + +title: Style Guide +sitemap: false +--- + +The main page title of this guide is an `h1` element. + +## Colors + +
    + {% for color in site.data.colors %} +
    +
    + ${{ color.name }} + #{{ color.hex }} +
    + {% endfor %} +
    + +## Typography + +
    +

    Brandon Grotesque

    +

    FF Tisa Sans Pro

    +
    + +## Sections + +The secondary header above is an `h2` element, which may be used for any form of important page-level header. Consider using an `h2` unless you need a header level of less importance, or as a sub-header to an existing `h2` element. + +### Third-Level Header + +The header above is an `h3` element, which may be used for any form of page-level header which falls below the `h2` header in a document hierarchy. + +#### Fourth-Level Header + +The header above is an `h4` element, which may be used for any form of page-level header which falls below the `h3` header in a document hierarchy. + +##### Fifth-Level Header + +The header above is an `h5` element, which may be used for any form of page-level header which falls below the `h4` header in a document hierarchy. + +###### Sixth-Level Header + +The header above is an `h6` element, which may be used for any form of page-level header which falls below the `h5` header in a document hierarchy. + +## Structural Elements + +### Paragraphs + +All paragraphs are wrapped in `p` tags. Additionally, `p` elements can be wrapped with a `blockquote` element if the `p` element is indeed a quote. + +The British Isles is an archipelago consisting of the two large islands of Great Britain and Ireland, and many smaller surrounding islands. + +

    Great Britain is the largest island of the archipelago. Ireland is the second largest island of the archipelago and lies directly to the west of Great Britain.

    + +```html +

    ...

    +``` + +### Blockquotes + +The `blockquote` element represents a section that is being quoted from another source: + +> Many forms of Government have been tried, and will be tried in this world of sin and woe. No one pretends that democracy is perfect or all-wise. Indeed, it has been said that democracy is the worst form of government except all those other forms that have been tried from time to time. +> +> --- Winston Churchill, in [a speech to the House of Commons](http://hansard.millbanksystems.com/commons/1947/nov/11/parliament-bill#column_206) (11th November 1947) + +### Horizontal Rules + +The `hr` element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book. The following extract from _Pandora's Star_ by Peter F. Hamilton shows two paragraphs that precede a scene change and the paragraph that follows it: + +> Dudley was ninety-two, in his second life, and fast approaching time for another rejuvenation. Despite his body having the physical age of a standard fifty-year-old, the prospect of a long degrading campaign within academia was one he regarded with dread. For a supposedly advanced civilization, the Intersolar Commonwearth could be appallingly backward at times, not to mention cruel. +> +> _Maybe it won't be that bad_, he told himself. The lie was comforting enough to get him through the rest of the night's shift. +> +> --- +> +> The Carlton AllLander drove Dudley home just after dawn. Like the astronomer, the vehicle was old and worn, but perfectly capable of doing its job. It had a cheap diesel engine, common enough on a semi-frontier world like Gralmond, although its drive array was a thoroughly modern photoneural processor. With its high suspension and deep-tread tyres it could plough along the dirt track to the observatory in all weather and seasons, including the metre-deep snow of Gralmond's winters. + +## List Elements + +### Ordered Lists + +The `ol` element denotes an ordered list, and various numbering schemes are available through CSS (including 1,2,3... i,ii,iii... a,b,c... and so on). Each item requires a surrounding `li` tag, to denote individual items within the list. + +Here is an example list showing the monarchs of Great Britain and the United Kingdom: + +1. House of Stuart + 1. Anne +2. House of Hanover + 1. George I + 2. George II + 3. George III + 4. George IV + 5. William IV + 6. Victoria +3. House of Saxe-Coburg and Gotha + 1. Edward VII +4. House of Windsor + 1. George V + 2. Edward VIII + 3. George VI + 4. Elizabeth II + +### Unordered Lists + +The `ul` element denotes an unordered list (i.e. a list of loose items that don't require numbering, or a bulleted list). Again, each item requires a surrounding `li` tag, to denote individual items. + +Here is an example list showing the constituent parts of the British Isles: + +- United Kingdom of Great Britain and Northern Ireland: + - England + - Scotland + - Wales + - Northern Ireland +- Republic of Ireland +- Isle of Man +- Channel Islands: + - Bailiwick of Guernsey + - Bailiwick of Jersey + +Sometimes you may want each list item to contain block elements, typically a paragraph or two: + +- The British Isles is an archipelago consisting of the two large islands of Great Britain and Ireland, and many smaller surrounding islands. + +- Great Britain is the largest island of the archipelago. Ireland is the second largest island of the archipelago and lies directly to the west of Great Britain. + +- The full list of islands in the British Isles includes over 1,000 islands, of which 51 have an area larger than 20 km^2^. + +### Definition Lists + +The `dl` element is for another type of list called a definition list. Instead of list items, the content of a `dl` consists of `dt` (definition term) and `dd` (definition description) pairs. Though it may be called a "definition list", `dl` can apply to other scenarios where a parent/child relationship is applicable. For example, it may be used for marking up dialogues, with each `dt` naming a speaker, and each `dd` containing his or her words: + +Romeo +: Have not saints lips, and holy palmers too? + +Juliet +: Ay, pilgrim, lips that they must use in prayer. + +## Table Elements + +Tables should be used when displaying tabular data. The `thead`, `tfoot` and `tbody` elements enable you to group rows within each table. + +If you use these elements, you must use every element. They should appear in this order: `thead`, `tfoot` and `tbody`, so that browsers can render the foot before receiving all the data. You must use these tags within the `table` element. + +Example with Team GB's London 2012 medal table: + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    SportGoldSilverBronzeTotal
    Athletics4116
    Boxing3115
    Canoe Slalom1102
    Canoe Sprint1012
    Cycling - Road1113
    Cycling - Track7119
    Diving0011
    Equestrian3115
    Gymnastics - Artistic0134
    Hockey0011
    Judo0112
    Modern Pentathlon0101
    Rowing4239
    Sailing1405
    Shooting1001
    Swimming0123
    Tennis1102
    Taekwondo1012
    Triathlon1012
    Total29171965
    +
    + +## Media Elements + +### Image + +The `img` element represents an image: + +Example image + +## Text Formatting Elements + +### Links and Anchors + +The `a` element is used to hyperlink text, be that to another page, a named fragment on the current page or any other location on the web. Example: + +[Go to the home page](/) or [return to the top of this page](#top). + +### Stressed Emphasis + +The `em` element is used to denote text with stressed emphasis, i.e. something you'd pronounce differently. Where italicizing is required for stylistic differentiation, the `i` element may be preferable. Example: + +You simply _must_ try the negitoro maki! + +### Strong Importance + +The `strong` element is used to denote text with strong importance. Where bolding is used for stylistic differentiation, the `b` element may be preferable. Example: + +**Don't** stick nails in the electrical outlet. + +### Italicised + +The `i` element is used for text in an alternate voice or mood, or otherwise offset from the normal prose. Examples include taxonomic designations, technical terms, idiomatic phrases from another language, the name of a ship or other spans of text whose typographic presentation is typically italicised. Example: + +There is a certain je ne sais quoi in the air. + +### Emboldened + +The `b` element is used for text stylistically offset from normal prose without conveying extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typographic presentation is typically emboldened. Example: + +You enter a small room. Your sword glows brighter. A **rat** scurries past the corner wall. + +### Inline Quotes + +The `q` element is used for quoting text inline. Example showing nested quotations: + +John said, I saw Lucy at lunch, she told me Mary wants you to get some ice cream on your way home. I think I will get some at Ben and Jerry's, on Gloucester Road. + +### Abbreviations + +The `abbr` element is used for any abbreviated text, whether it be acronym, initialism, or otherwise. Generally, it's less work and useful (enough) to mark up only the first occurrence of any particular abbreviation on a page, and ignore the rest. Any text in the `title` attribute will appear when the user's mouse hovers the abbreviation (although, notably, this does not work in Internet Explorer for Windows). Example: + +Get the latest news from the [BBC](http://www.bbc.co.uk/) in Stoke and Staffs. + +### Definitions + +The `dfn` element is used to highlight the first use of a term. The `title` attribute can be used to describe the term. Example: + +Bob's canine mother and equine father sat him down and carefully explained that he was an allopolyploid organism. + +### Citations + +The `cite` element is used to represent the title of a work (e.g. a book, essay, poem, song, film, TV show, sculpture, painting, musical, exhibition, etc.). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing. Example: + +Universal Declaration of Human Rights, United Nations, December 1948. Adopted by General Assembly resolution 217 A (III). + +### Marked or Highlighted Text + +The `mark` element is used to represent a run of text marked or highlighted for reference purposes. When used in a quotation it indicates a highlight not originally present but added to bring the reader's attention to that part of the text. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its relevance to the user's current activity. Example: + +I also have some ==kitten==s who are visiting me these days. They're really cute. I think they like my garden! Maybe I should adopt a ==kitten==. + +### Edits + +The `del` element is used to represent deleted or retracted text which still must remain on the page for some reason. Meanwhile its counterpart, the `ins` element, is used to represent inserted text. Example: + +As a result, ~~Kodos~~ ++Kang++ was elected president. + +### Variables + +The `var` element is used to denote a variable in a mathematical expression or programming context, but can also be used to indicate a placeholder where the contents should be replaced with your own value. Example: + +If there are n pipes leading to the ice cream factory then I expect at _least_ n flavours of ice cream to be available for purchase! + +### Superscript and Subscript Text + +The `sup` element represents a superscript and the sub element represents a `sub`. These elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation. As a guide, only use these elements if their absence^superscript would change the meaning of the content. + +Chemical formulas are written using subscripts (e.g. C~6~H~12~O~6~), but atomic isotopes are written using superscripts (e.g. ^13 C, ^131^I, and ^238^U). + +### Small Print + +The `small` element is used to represent disclaimers, caveats, legal restrictions, or copyrights (commonly referred to as 'small print'). It can also be used for attributions or satisfying licensing requirements. Example: + +Copyright (C) 1912-2012 Acme Corporation. All Rights Reserved. + +### Time + +The `time` element is used to represent either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset. Example: + +Queen Elizabeth II was proclaimed sovereign of each of the Commonwealth realms on and , after the death of her father, King George VI. + +### Keyboard Entry + +The `kbd` element is used to denote user input (typically via a keyboard, although it may also be used to represent other input methods, such as voice commands). Example: + +To take a screenshot on your Mac, press Cmd + Shift + 3. + +### Sample Output + +The `samp` element is used to represent (sample) output from a program or computing system. Useful for technology-oriented sites, not so useful otherwise. Example: + +The computer said Too much cheese in tray two but I didn't know what that meant. + +### Pre-Formatted Text + +The `pre` element represents a block of pre-formatted text, in which structure is represented by typographic conventions rather than by elements. Here's an example showing the printable characters of ASCII: + + ! " # $ % & ' ( ) * + , - . / + 0 1 2 3 4 5 6 7 8 9 : ; < = > ? + @ A B C D E F G H I J K L M N O + P Q R S T U V W X Y Z [ \ ] ^ _ + a b c d e f g h i j k l m n o p + q r s t u v w x y z { | } ~ + +### Code + +The `code` element is used to represent fragments of computer code. Useful for technology-oriented sites, not so useful otherwise. Example: + +The [`requestAnimationFrame`](https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame) method in the `window` object tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. + +### Code Blocks + +The `code` element can also be used in conjunction with the `pre` element to represent verbatim text like markup or a fragment of computer code: + +``` +function microsoftShuffle(arr) { + return arr.slice().sort(function () { + return (0.5 - Math.random()); + }); +} +``` + +You may also specify the language of a code block, so that it can be properly highlighted. Below you can find the classic _Hello world_ program implemented in different languages. + +#### JavaScript + +```js +console.log('Hello, world!') +``` + +#### HTML + +```html +

    Hello, world!

    +``` + +#### CSS + +```css +.hello { + font-size: 2rem; +} +``` + +#### Shell + +```shell +echo 'Hello, world!' +``` + +#### Bash + +```bash +# output stuff +echo 'Hello, world!' +``` + +#### PHP + +```php + +``` + +#### C + +```c +#include +int main(int argc, char *argv[]) +{ + printf("Hello, world!\n"); + return 0; +} +``` + +#### C++ + +```cpp +#include +using namespace std; +int main() +{ + cout << "Hello, world!" << endl; + return 0; +} +``` + +#### C# + +```csharp +using System; +class Program +{ + public static void Main() + { + Console.WriteLine("Hello, world!"); + } +} +``` + +#### Clojure + +```clj +(println "Hello, world!") +``` + +#### Elixir + +```elixir +IO.puts "Hello World" +``` + +#### Erlang + +```erlang +io:format("~s~n", ["Hello, world!"]) +``` + +#### Go + +```go +package main +import "fmt" +func main() { + fmt.Println("Hello, world!") +} +``` + +#### Groovy + +```groovy +println "Hello, world!" +``` + +#### Haskell + +```hs +main = putStrLn "Hello, world!" +``` + +#### Java + +```java +public class HelloWorld { + public static void main(String[] args) { + System.out.println("Hello, world!"); + } +} +``` + +#### Lisp + +```lisp +(princ "Hello, world!") +``` + +#### Lua + +```lua +print("Hello, World!") +``` + +#### Objective-C + +```objc +#import +int main(void) +{ + printf("Hello, world!\n"); + return 0; +} +``` + +#### Perl + +```perl +print "Hello, world!"; +``` + +#### Python + +```py +print "Hello, world!" +``` + +#### R + +```r +cat('Hello, world!') +``` + +#### Ruby + +```rb +puts "Hello, world!" +``` + +#### Scala + +```scala +object HelloWorld extends App { + println("Hello, world!") +} +``` + +#### Scheme + +```scheme +(display "Hello, world!") +``` + +#### Smalltalk + +```smalltalk +Transcript show: 'Hello, world!'. +``` + +## Form Elements + +Forms can be used when you wish to collect data from users. The `fieldset` element enables you to group related fields within a form, and each one should contain a corresponding `legend`. The `label` element ensures field descriptions are associated with their corresponding form widgets. + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + +## Patterns + +Design and mark-up patterns unique to this site. + +### Alerts + +
    +

    I'm sure those windmills will keep them cool. Interesting. No, wait, the other thing: tedious. But, like most politicians, he promised more than he could deliver. Why not indeed! We're rescuing ya.

    +

    Isn't it true that you have been paid for your testimony? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Oh right. I forgot about the battle. Who are those horrible orange men?

    +
    + +
    +

    I'm sure those windmills will keep them cool. Interesting. No, wait, the other thing: tedious. But, like most politicians, he promised more than he could deliver. Why not indeed! We're rescuing ya.

    +

    Isn't it true that you have been paid for your testimony? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Oh right. I forgot about the battle. Who are those horrible orange men?

    +
    + +
    +

    I'm sure those windmills will keep them cool. Interesting. No, wait, the other thing: tedious. But, like most politicians, he promised more than he could deliver. Why not indeed! We're rescuing ya.

    +

    Isn't it true that you have been paid for your testimony? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Oh right. I forgot about the battle. Who are those horrible orange men?

    +
    + +### Pagination + + diff --git a/src/templates/post.jsx b/src/templates/post.jsx new file mode 100644 index 00000000..111ff047 --- /dev/null +++ b/src/templates/post.jsx @@ -0,0 +1,51 @@ +import React from 'react' +import PropTypes from 'prop-types' +import Helmet from 'react-helmet' +import { graphql } from 'gatsby' +import Image from '../components/Image' + +const Post = ({ data }) => { + const { markdownRemark: post } = data + const { title, image } = post.frontmatter + + return ( +
    + + +
    +

    {title}

    + {title} +
    +
    +
    + ) +} + +Post.propTypes = { + data: PropTypes.object.isRequired +} + +export default Post + +export const pageQuery = graphql` + query BlogPostByPath($slug: String!) { + markdownRemark(fields: { slug: { eq: $slug } }) { + html + frontmatter { + title + image { + childImageSharp { + ...ImageFluid + } + } + } + fields { + slug + date(formatString: "MMMM DD, YYYY") + } + } + } +` diff --git a/static/robots.txt b/static/robots.txt index a75076ab..7fb6b4e8 100644 --- a/static/robots.txt +++ b/static/robots.txt @@ -1,6 +1,3 @@ ---- ---- - User-agent: * Disallow: /search/ Disallow: /page/ @@ -8,4 +5,4 @@ Disallow: /*/page/ Disallow: /tag/ Disallow: /api/ -Sitemap: {{ site.url }}/sitemap.xml +Sitemap: https://kremalicious.com/sitemap.xml From a293c93f5e3293a7ca127556d8991eecc4266268 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 18 Jul 2018 00:24:11 +0200 Subject: [PATCH 004/100] add basic styling --- content/meta.yml | 10 +- .../2013-07-13-enterprise-software-sucks.md | 6 +- gatsby-browser.js | 10 ++ gatsby-config.js | 12 +- package.json | 1 + src/components/Layout.jsx | 53 ++++++++ src/components/Layout.module.scss | 6 + src/components/{ => atoms}/Image.jsx | 0 src/components/{ => atoms}/Image.module.scss | 0 src/components/atoms/Typekit.jsx | 46 +++++++ src/components/molecules/Head.jsx | 28 ++++ src/pages/404.jsx | 9 +- src/pages/index.jsx | 7 +- src/styles/base.scss | 121 ++++++++++++++++++ src/styles/variables.scss | 69 ++++++++++ src/templates/post.jsx | 13 +- 16 files changed, 368 insertions(+), 23 deletions(-) create mode 100644 gatsby-browser.js create mode 100644 src/components/Layout.jsx create mode 100644 src/components/Layout.module.scss rename src/components/{ => atoms}/Image.jsx (100%) rename src/components/{ => atoms}/Image.module.scss (100%) create mode 100644 src/components/atoms/Typekit.jsx create mode 100644 src/components/molecules/Head.jsx create mode 100644 src/styles/base.scss create mode 100644 src/styles/variables.scss diff --git a/content/meta.yml b/content/meta.yml index d3d2462d..e55b9441 100644 --- a/content/meta.yml +++ b/content/meta.yml @@ -9,8 +9,8 @@ # Basics # -------------------- -name: kremalicious -description: 'Blog of designer & developer Matthias Kretschmann' +title: kremalicious +tagline: 'Blog of designer & developer Matthias Kretschmann' url: https://kremalicious.com author: name: Matthias Kretschmann @@ -24,8 +24,4 @@ author: ether: "0x339dbC44d39bf1961E385ed0Ae88FC6069b87Ea1" -# Urls -# -------------------- - -media_url: "https://res.cloudinary.com/kremalicious" - +typekitID: msu4qap diff --git a/content/posts/2013-07-13-enterprise-software-sucks.md b/content/posts/2013-07-13-enterprise-software-sucks.md index 770f1e56..8cdce59e 100644 --- a/content/posts/2013-07-13-enterprise-software-sucks.md +++ b/content/posts/2013-07-13-enterprise-software-sucks.md @@ -40,14 +40,14 @@ Just adding feature after feature out of dubious reasons (“Your competitors ha After finding ezeep’s Buddha nature, the next step was to actually create the various elements of our experience and branding, ranging from typography, color, visual style, writing style, interaction models, user flows and more. -ezeep color scheme +![ezeep color scheme](../media/buddha-colorscheme.png) While being human and friendly sounds like a no-brainer, in the corporate software world, it turns out it isn’t. ezeep’s vivid color scheme, subtle textures, graphics and icons are a visible manifestation of this, tackling the negative perception of printing for our users. Creating this layer of delight on top of the functional layers is especially crucial in printing. Good design helps making users more forgiving about errors no matter who’s responsible for them. Printers – the little autistic beings they are – just tend to not work from time to time, and a failing device immediately reflects back on our service. If that’s the case the least we can do is make the experience beautiful. - +![](../media/buddha-printer.png) Paired with helpful and to-the-point copy, this creates a friendly and unifying atmosphere across the whole product, ranging from the web to native apps on Mac, Windows, iOS and Android. -We acknowledge we don’t have all the answers yet or, more precisely, we know what we don’t know. For us the only way to get those answers is by shipping iteration after iteration and learning from them. Feedback rules. \ No newline at end of file +We acknowledge we don’t have all the answers yet or, more precisely, we know what we don’t know. For us the only way to get those answers is by shipping iteration after iteration and learning from them. Feedback rules. diff --git a/gatsby-browser.js b/gatsby-browser.js new file mode 100644 index 00000000..3106bf81 --- /dev/null +++ b/gatsby-browser.js @@ -0,0 +1,10 @@ +exports.onInitialClientRender = () => { + require('./src/styles/base.scss') +} + +exports.onClientEntry = () => { + // IntersectionObserver polyfill for gatsby-image (Safari, IE) + if (typeof window.IntersectionObserver === 'undefined') { + require('intersection-observer') + } +} diff --git a/gatsby-config.js b/gatsby-config.js index 98e400c2..5434e2d8 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -23,6 +23,13 @@ module.exports = { path: path.join(__dirname, 'content', 'media') } }, + { + resolve: 'gatsby-source-filesystem', + options: { + name: 'posts', + path: path.join(__dirname, 'content') + } + }, { resolve: 'gatsby-transformer-remark', options: { @@ -33,7 +40,8 @@ module.exports = { maxWidth: 940, linkImagesToOriginal: false, sizeByPixelDensity: true, - showCaptions: true + showCaptions: true, + backgroundColor: '#e7eef4' } }, 'gatsby-remark-smartypants', @@ -44,7 +52,7 @@ module.exports = { { resolve: 'gatsby-plugin-sass', options: { - includePaths: [`${__dirname}/node_modules`] + includePaths: [`${__dirname}/node_modules`, `${__dirname}/src/styles`] } }, 'gatsby-plugin-react-helmet', diff --git a/package.json b/package.json index 86b753fe..3cdc184c 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "gatsby-transformer-sharp": "^2.1.1-beta.5", "gatsby-transformer-yaml": "^2.1.1-beta.2", "graphql": "^0.13.2", + "intersection-observer": "^0.5.0", "node-sass": "^4.9.2", "normalize-css": "^2.3.1", "normalize-opentype.css": "^0.2.4", diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx new file mode 100644 index 00000000..9cc9dd9d --- /dev/null +++ b/src/components/Layout.jsx @@ -0,0 +1,53 @@ +import React, { Fragment } from 'react' +import PropTypes from 'prop-types' +import { StaticQuery, graphql } from 'gatsby' +import Head from './molecules/Head' +import styles from './Layout.module.scss' + +const Layout = ({ children, location }) => { + return ( + { + const meta = data.contentYaml + + return ( + + + +
    + {children} +
    +     + ) + }} + /> + ) +} + +Layout.propTypes = { + children: PropTypes.any.isRequired, + location: PropTypes.object.isRequired +} + +export default Layout diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss new file mode 100644 index 00000000..07108ecd --- /dev/null +++ b/src/components/Layout.module.scss @@ -0,0 +1,6 @@ +@import 'variables'; + +.screen { + flex: 1; + padding: $spacer; +} diff --git a/src/components/Image.jsx b/src/components/atoms/Image.jsx similarity index 100% rename from src/components/Image.jsx rename to src/components/atoms/Image.jsx diff --git a/src/components/Image.module.scss b/src/components/atoms/Image.module.scss similarity index 100% rename from src/components/Image.module.scss rename to src/components/atoms/Image.module.scss diff --git a/src/components/atoms/Typekit.jsx b/src/components/atoms/Typekit.jsx new file mode 100644 index 00000000..4c2e0665 --- /dev/null +++ b/src/components/atoms/Typekit.jsx @@ -0,0 +1,46 @@ +import React from 'react' +import { StaticQuery, graphql } from 'gatsby' +import Helmet from 'react-helmet' + +const TypekitScript = typekitID => ( + +) + +const Typekit = () => ( + { + const { typekitID } = data.contentYaml + + return ( + typekitID && ( + + + + + {TypekitScript(typekitID)} + + ) + ) + }} + /> +) + +export default Typekit diff --git a/src/components/molecules/Head.jsx b/src/components/molecules/Head.jsx new file mode 100644 index 00000000..24b86076 --- /dev/null +++ b/src/components/molecules/Head.jsx @@ -0,0 +1,28 @@ +import React, { Fragment } from 'react' +import PropTypes from 'prop-types' +import Helmet from 'react-helmet' +import Typekit from '../atoms/Typekit' + +const Head = ({ meta }) => { + const { title, tagline } = meta + + return ( + + + + + + + + + ) +} + +Head.propTypes = { + meta: PropTypes.object.isRequired +} + +export default Head diff --git a/src/pages/404.jsx b/src/pages/404.jsx index 9c25f0d8..5b934f56 100644 --- a/src/pages/404.jsx +++ b/src/pages/404.jsx @@ -1,16 +1,17 @@ -import React, { Fragment } from 'react' +import React from 'react' +import Layout from '../components/Layout' const NotFound = () => ( - +

    I am sorry Dave,

    -

    I am afraid I can NotFound do that.

    +

    I am afraid I can not do that.

    How about a nice search? - + ) export default NotFound diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 05b9cdc9..9796c980 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -1,6 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import { Link, graphql } from 'gatsby' +import Layout from '../components/Layout' const IndexPage = ({ data }) => { const edges = data.allMarkdownRemark.edges @@ -12,7 +13,11 @@ const IndexPage = ({ data }) => { )) - return
      {Posts}
    + return ( + +
      {Posts}
    +     + ) } IndexPage.propTypes = { diff --git a/src/styles/base.scss b/src/styles/base.scss new file mode 100644 index 00000000..b703a17a --- /dev/null +++ b/src/styles/base.scss @@ -0,0 +1,121 @@ +@import 'variables'; + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html, +body { + margin: 0; + padding: 0; +} + +html { + font-size: $font-size-root; + background: $body-background-color; +} + +body { + font-family: $font-family-base; + font-weight: $font-weight-base; + font-size: $font-size-base; + line-height: $line-height; + color: $font-color-base; + text-rendering: optimizeLegibility; + font-feature-settings: 'liga', 'kern'; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + min-height: 100vh; + background: $body-background-color; + transition: background .6s $easing; + + &.dark { + background-color: $body-background-color--dark; + color: $text-color--dark; + } +} + +p, +ul, +ol { + margin: 0 0 $spacer; +} + +// Headings +///////////////////////////////////// + +h1 { + font-size: $font-size-h1; +} + +h2 { + font-size: $font-size-h2; +} + +h3 { + font-size: $font-size-h3; +} + +h4 { + font-size: $font-size-h4; +} + +h5 { + font-size: $font-size-h5; +} + +h6 { + font-size: $font-size-h6; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: $font-family-headings; + line-height: $line-height-headings; + color: $color-headings; + font-weight: $font-weight-headings; + margin: 0 0 $spacer; + letter-spacing: -.02em; + + .dark & { + color: $color-headings--dark; + } +} + +// Links +///////////////////////////////////// + +a { + color: $brand-cyan; + text-decoration: none; + transition: .2s ease-out; + + &:hover, + &:focus { + color: lighten($brand-cyan, 10%); + transform: translate3d(0, -.1rem, 0); + } +} + +// Media +///////////////////////////////////// + +img, +video, +svg { + max-width: 100%; + height: auto; + margin: 0; +} + +#___gatsby { + display: flex; + min-height: 100vh; + flex-direction: column; +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 00000000..dca558fa --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,69 @@ +$imageMaxWidth: 940px; +$easing: cubic-bezier(.75, 0, .08, 1); + +// Colors +///////////////////////////////////// + +$brand-main: #015565; +$brand-cyan: #43a699; +$brand-main-light: #88bec8; +$brand-light: #e7eef4; + +$brand-grey: #6b7f88; +$brand-grey-light: lighten($brand-grey, 15%); +$brand-grey-dimmed: lighten($brand-grey, 50%); + +// Backgrounds +///////////////////////////////////// + +$body-background-color: $brand-light; +$body-background-color--dark: darken($brand-grey, 30%); + +// Text Colors +///////////////////////////////////// + +$text-color: $brand-grey; +$text-color-light: $brand-grey-light; + +$text-color--dark: $brand-grey-light; +$text-color-light--dark: $brand-grey; + +// Typography +///////////////////////////////////// + +$font-size-root: 18px; + +$font-size-base: 1rem; +$font-size-large: 1.2rem; +$font-size-small: .8rem; +$font-size-mini: .7rem; + +$font-size-h1: 2.5rem; +$font-size-h2: 2rem; +$font-size-h3: 1.75rem; +$font-size-h4: $font-size-large; +$font-size-h5: $font-size-base; +$font-size-h6: $font-size-small; + +$line-height: 1.5; +$line-height-small: 1.1428571429; + +$font-family-base: 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue', + Helvetica, Arial, sans-serif; +$font-weight-base: 400; +$font-color-base: $text-color; + +$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace; + +$font-family-headings: 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue', + Helvetica, Arial, sans-serif; +$font-weight-headings: 500; +$line-height-headings: 1.1; + +$color-headings: $brand-main; +$color-headings--dark: $brand-main-light; + +// Components spacing +///////////////////////////////////// + +$spacer: ($font-size-base * $line-height); diff --git a/src/templates/post.jsx b/src/templates/post.jsx index 111ff047..70412671 100644 --- a/src/templates/post.jsx +++ b/src/templates/post.jsx @@ -2,25 +2,26 @@ import React from 'react' import PropTypes from 'prop-types' import Helmet from 'react-helmet' import { graphql } from 'gatsby' -import Image from '../components/Image' +import Layout from '../components/Layout' +import Image from '../components/atoms/Image' const Post = ({ data }) => { const { markdownRemark: post } = data const { title, image } = post.frontmatter return ( -
    + -
    +

    {title}

    - {title} + {image && {title}}
    -
    -
    + +     ) } From 5057d0d7163e2322ee57e53037e072a8dde07136 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 18 Jul 2018 02:19:15 +0200 Subject: [PATCH 005/100] move assets --- .../_assets/img => src/images}/apple-touch-icon.png | Bin .../img => src/images}/arrow-with-circle-down.svg | 0 {_src/_assets/img => src/images}/avatar.jpeg | Bin {_src/_assets/img => src/images}/bitcoin.svg | 0 {_src/_assets/img => src/images}/chevron-left.svg | 0 {_src/_assets/img => src/images}/chevron-right.svg | 0 {_src/_assets/img => src/images}/clipboard.svg | 0 {_src/_assets/img => src/images}/eye.svg | 0 {_src/_assets/img => src/images}/facebook.svg | 0 {_src/_assets/img => src/images}/favicon-16x16.png | Bin {_src/_assets/img => src/images}/favicon-32x32.png | Bin {_src/_assets/img => src/images}/favicon-96x96.png | Bin {_src/_assets/img => src/images}/favicon-mask.svg | 0 {_src/_assets/img => src/images}/forward.svg | 0 {_src/_assets/img => src/images}/github.svg | 0 {_src/_assets/img => src/images}/google+.svg | 0 {_src/_assets/img => src/images}/heart.svg | 0 {_src/_assets/img => src/images}/infinity.svg | 0 .../_assets/img => src/images}/info-with-circle.svg | 0 {_src/_assets/img => src/images}/jsonfeed.svg | 0 .../_assets/img => src/images}/kremalicious1024.png | Bin .../_assets/img => src/images}/kremalicious512.png | Bin {_src/_assets/img => src/images}/krlcus-cloud16.png | Bin {_src/_assets/img => src/images}/krlcus-cloud32.png | Bin {_src/_assets/img => src/images}/link.svg | 0 .../images}/logo-kremalicious-g-profile.png | Bin {_src/_assets/img => src/images}/logo.png | Bin {_src/_assets/img => src/images}/logo@2x.png | Bin {_src/_assets/img => src/images}/logo@3x.png | Bin .../_assets/img => src/images}/magnifying-glass.svg | 0 {_src/_assets/img => src/images}/metro-tile.png | Bin {_src/_assets/img => src/images}/rss.svg | 0 .../img => src/images}/touch-icon-192x192.png | Bin {_src/_assets/img => src/images}/twitter.svg | 0 34 files changed, 0 insertions(+), 0 deletions(-) rename {_src/_assets/img => src/images}/apple-touch-icon.png (100%) rename {_src/_assets/img => src/images}/arrow-with-circle-down.svg (100%) rename {_src/_assets/img => src/images}/avatar.jpeg (100%) rename {_src/_assets/img => src/images}/bitcoin.svg (100%) rename {_src/_assets/img => src/images}/chevron-left.svg (100%) rename {_src/_assets/img => src/images}/chevron-right.svg (100%) rename {_src/_assets/img => src/images}/clipboard.svg (100%) rename {_src/_assets/img => src/images}/eye.svg (100%) rename {_src/_assets/img => src/images}/facebook.svg (100%) rename {_src/_assets/img => src/images}/favicon-16x16.png (100%) rename {_src/_assets/img => src/images}/favicon-32x32.png (100%) rename {_src/_assets/img => src/images}/favicon-96x96.png (100%) rename {_src/_assets/img => src/images}/favicon-mask.svg (100%) rename {_src/_assets/img => src/images}/forward.svg (100%) rename {_src/_assets/img => src/images}/github.svg (100%) rename {_src/_assets/img => src/images}/google+.svg (100%) rename {_src/_assets/img => src/images}/heart.svg (100%) rename {_src/_assets/img => src/images}/infinity.svg (100%) rename {_src/_assets/img => src/images}/info-with-circle.svg (100%) rename {_src/_assets/img => src/images}/jsonfeed.svg (100%) rename {_src/_assets/img => src/images}/kremalicious1024.png (100%) rename {_src/_assets/img => src/images}/kremalicious512.png (100%) rename {_src/_assets/img => src/images}/krlcus-cloud16.png (100%) rename {_src/_assets/img => src/images}/krlcus-cloud32.png (100%) rename {_src/_assets/img => src/images}/link.svg (100%) rename {_src/_assets/img => src/images}/logo-kremalicious-g-profile.png (100%) rename {_src/_assets/img => src/images}/logo.png (100%) rename {_src/_assets/img => src/images}/logo@2x.png (100%) rename {_src/_assets/img => src/images}/logo@3x.png (100%) rename {_src/_assets/img => src/images}/magnifying-glass.svg (100%) rename {_src/_assets/img => src/images}/metro-tile.png (100%) rename {_src/_assets/img => src/images}/rss.svg (100%) rename {_src/_assets/img => src/images}/touch-icon-192x192.png (100%) rename {_src/_assets/img => src/images}/twitter.svg (100%) diff --git a/_src/_assets/img/apple-touch-icon.png b/src/images/apple-touch-icon.png similarity index 100% rename from _src/_assets/img/apple-touch-icon.png rename to src/images/apple-touch-icon.png diff --git a/_src/_assets/img/arrow-with-circle-down.svg b/src/images/arrow-with-circle-down.svg similarity index 100% rename from _src/_assets/img/arrow-with-circle-down.svg rename to src/images/arrow-with-circle-down.svg diff --git a/_src/_assets/img/avatar.jpeg b/src/images/avatar.jpeg similarity index 100% rename from _src/_assets/img/avatar.jpeg rename to src/images/avatar.jpeg diff --git a/_src/_assets/img/bitcoin.svg b/src/images/bitcoin.svg similarity index 100% rename from _src/_assets/img/bitcoin.svg rename to src/images/bitcoin.svg diff --git a/_src/_assets/img/chevron-left.svg b/src/images/chevron-left.svg similarity index 100% rename from _src/_assets/img/chevron-left.svg rename to src/images/chevron-left.svg diff --git a/_src/_assets/img/chevron-right.svg b/src/images/chevron-right.svg similarity index 100% rename from _src/_assets/img/chevron-right.svg rename to src/images/chevron-right.svg diff --git a/_src/_assets/img/clipboard.svg b/src/images/clipboard.svg similarity index 100% rename from _src/_assets/img/clipboard.svg rename to src/images/clipboard.svg diff --git a/_src/_assets/img/eye.svg b/src/images/eye.svg similarity index 100% rename from _src/_assets/img/eye.svg rename to src/images/eye.svg diff --git a/_src/_assets/img/facebook.svg b/src/images/facebook.svg similarity index 100% rename from _src/_assets/img/facebook.svg rename to src/images/facebook.svg diff --git a/_src/_assets/img/favicon-16x16.png b/src/images/favicon-16x16.png similarity index 100% rename from _src/_assets/img/favicon-16x16.png rename to src/images/favicon-16x16.png diff --git a/_src/_assets/img/favicon-32x32.png b/src/images/favicon-32x32.png similarity index 100% rename from _src/_assets/img/favicon-32x32.png rename to src/images/favicon-32x32.png diff --git a/_src/_assets/img/favicon-96x96.png b/src/images/favicon-96x96.png similarity index 100% rename from _src/_assets/img/favicon-96x96.png rename to src/images/favicon-96x96.png diff --git a/_src/_assets/img/favicon-mask.svg b/src/images/favicon-mask.svg similarity index 100% rename from _src/_assets/img/favicon-mask.svg rename to src/images/favicon-mask.svg diff --git a/_src/_assets/img/forward.svg b/src/images/forward.svg similarity index 100% rename from _src/_assets/img/forward.svg rename to src/images/forward.svg diff --git a/_src/_assets/img/github.svg b/src/images/github.svg similarity index 100% rename from _src/_assets/img/github.svg rename to src/images/github.svg diff --git a/_src/_assets/img/google+.svg b/src/images/google+.svg similarity index 100% rename from _src/_assets/img/google+.svg rename to src/images/google+.svg diff --git a/_src/_assets/img/heart.svg b/src/images/heart.svg similarity index 100% rename from _src/_assets/img/heart.svg rename to src/images/heart.svg diff --git a/_src/_assets/img/infinity.svg b/src/images/infinity.svg similarity index 100% rename from _src/_assets/img/infinity.svg rename to src/images/infinity.svg diff --git a/_src/_assets/img/info-with-circle.svg b/src/images/info-with-circle.svg similarity index 100% rename from _src/_assets/img/info-with-circle.svg rename to src/images/info-with-circle.svg diff --git a/_src/_assets/img/jsonfeed.svg b/src/images/jsonfeed.svg similarity index 100% rename from _src/_assets/img/jsonfeed.svg rename to src/images/jsonfeed.svg diff --git a/_src/_assets/img/kremalicious1024.png b/src/images/kremalicious1024.png similarity index 100% rename from _src/_assets/img/kremalicious1024.png rename to src/images/kremalicious1024.png diff --git a/_src/_assets/img/kremalicious512.png b/src/images/kremalicious512.png similarity index 100% rename from _src/_assets/img/kremalicious512.png rename to src/images/kremalicious512.png diff --git a/_src/_assets/img/krlcus-cloud16.png b/src/images/krlcus-cloud16.png similarity index 100% rename from _src/_assets/img/krlcus-cloud16.png rename to src/images/krlcus-cloud16.png diff --git a/_src/_assets/img/krlcus-cloud32.png b/src/images/krlcus-cloud32.png similarity index 100% rename from _src/_assets/img/krlcus-cloud32.png rename to src/images/krlcus-cloud32.png diff --git a/_src/_assets/img/link.svg b/src/images/link.svg similarity index 100% rename from _src/_assets/img/link.svg rename to src/images/link.svg diff --git a/_src/_assets/img/logo-kremalicious-g-profile.png b/src/images/logo-kremalicious-g-profile.png similarity index 100% rename from _src/_assets/img/logo-kremalicious-g-profile.png rename to src/images/logo-kremalicious-g-profile.png diff --git a/_src/_assets/img/logo.png b/src/images/logo.png similarity index 100% rename from _src/_assets/img/logo.png rename to src/images/logo.png diff --git a/_src/_assets/img/logo@2x.png b/src/images/logo@2x.png similarity index 100% rename from _src/_assets/img/logo@2x.png rename to src/images/logo@2x.png diff --git a/_src/_assets/img/logo@3x.png b/src/images/logo@3x.png similarity index 100% rename from _src/_assets/img/logo@3x.png rename to src/images/logo@3x.png diff --git a/_src/_assets/img/magnifying-glass.svg b/src/images/magnifying-glass.svg similarity index 100% rename from _src/_assets/img/magnifying-glass.svg rename to src/images/magnifying-glass.svg diff --git a/_src/_assets/img/metro-tile.png b/src/images/metro-tile.png similarity index 100% rename from _src/_assets/img/metro-tile.png rename to src/images/metro-tile.png diff --git a/_src/_assets/img/rss.svg b/src/images/rss.svg similarity index 100% rename from _src/_assets/img/rss.svg rename to src/images/rss.svg diff --git a/_src/_assets/img/touch-icon-192x192.png b/src/images/touch-icon-192x192.png similarity index 100% rename from _src/_assets/img/touch-icon-192x192.png rename to src/images/touch-icon-192x192.png diff --git a/_src/_assets/img/twitter.svg b/src/images/twitter.svg similarity index 100% rename from _src/_assets/img/twitter.svg rename to src/images/twitter.svg From d01499f87a116b113006510c47c824ab55d57574 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 18 Jul 2018 02:19:32 +0200 Subject: [PATCH 006/100] more base typography --- _src/_assets/styl/_kremalicious/code.styl | 77 ------ gatsby-config.js | 3 +- package.json | 2 + src/components/Layout.module.scss | 4 +- src/styles/_code.scss | 85 ++++++ src/styles/_syntax.scss | 158 +++++++++++ .../{variables.scss => _variables.scss} | 29 ++- src/styles/base.scss | 245 +++++++++++++++++- 8 files changed, 514 insertions(+), 89 deletions(-) delete mode 100644 _src/_assets/styl/_kremalicious/code.styl create mode 100644 src/styles/_code.scss create mode 100644 src/styles/_syntax.scss rename src/styles/{variables.scss => _variables.scss} (78%) diff --git a/_src/_assets/styl/_kremalicious/code.styl b/_src/_assets/styl/_kremalicious/code.styl deleted file mode 100644 index a0fe0d61..00000000 --- a/_src/_assets/styl/_kremalicious/code.styl +++ /dev/null @@ -1,77 +0,0 @@ -// -// kremalicious3 -// -------------- -// Code -// - -code, -kbd, -pre, -samp - font-family: $font-family-monospace - font-size: $font-size-small - hyphens: none - -code, -kbd - padding: 2px 4px - -code, -samp - color: darken($code-color, 40%) - background-color: alpha($code-bg, 5%) - border-radius: $border-radius-base - -kbd - color: $kbd-color - background-color: $kbd-bg - border-radius: $border-radius-small - border: 1px solid $kbd-bg - box-shadow: inset 0 1px 0 rgba(#fff, .4) - -pre - display: block - padding: 0 - margin-bottom: $spacer - line-height: $line-height - color: $code-color - background-color: $code-bg - margin-left: -($spacer) - margin-right: -($spacer) - - // make 'em scrollable - overflow: scroll - -webkit-overflow-scrolling: touch - max-height: 300px - - @media $screen-sm - max-height: 500px - - @media $screen-md - border-radius: $border-radius-base - - // Account for some code outputs that place code tags in pre tags - code - white-space: pre - overflow: auto - display: block - padding: $spacer - font-size: inherit - color: inherit - background-color: transparent - border-radius: 0 - - overflow-wrap: normal - word-wrap: normal - word-break: normal - -code.language-shell - padding-left: 1.5em - display: block - - &:before - @extend .text-dimmed - content: "$" - display: inline-block - margin-left: -.5em - margin-right: .8em diff --git a/gatsby-config.js b/gatsby-config.js index 5434e2d8..ae6740a4 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -41,9 +41,10 @@ module.exports = { linkImagesToOriginal: false, sizeByPixelDensity: true, showCaptions: true, - backgroundColor: '#e7eef4' + backgroundColor: '#dfe8ef' } }, + 'gatsby-remark-prismjs', 'gatsby-remark-smartypants', 'gatsby-remark-autolink-headers' ] diff --git a/package.json b/package.json index 3cdc184c..1e580da1 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "gatsby-plugin-sitemap": "^2.0.0-beta.2", "gatsby-remark-autolink-headers": "^2.0.0-beta.3", "gatsby-remark-images": "^2.0.1-beta.7", + "gatsby-remark-prismjs": "^3.0.0-beta.3", "gatsby-remark-smartypants": "^2.0.0-beta.2", "gatsby-source-filesystem": "^2.0.1-beta.5", "gatsby-transformer-remark": "^2.1.1-beta.3", @@ -43,6 +44,7 @@ "node-sass": "^4.9.2", "normalize-css": "^2.3.1", "normalize-opentype.css": "^0.2.4", + "prismjs": "^1.15.0", "qrious": "^4.0.2", "react": "^16.4.1", "react-dom": "^16.4.1", diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss index 07108ecd..9e207d99 100644 --- a/src/components/Layout.module.scss +++ b/src/components/Layout.module.scss @@ -1,6 +1,8 @@ @import 'variables'; .screen { - flex: 1; + max-width: 38rem; + margin-left: auto; + margin-right: auto; padding: $spacer; } diff --git a/src/styles/_code.scss b/src/styles/_code.scss new file mode 100644 index 00000000..51731ed1 --- /dev/null +++ b/src/styles/_code.scss @@ -0,0 +1,85 @@ +@import 'variables'; + +code, +kbd, +pre, +samp { + font-family: $font-family-monospace; + font-size: $font-size-small; +} + +code, +kbd { + padding: 2px 4px; +} + +code, +samp { + color: darken($code-color, 40%); + background-color: rgba($code-bg, .05); + border-radius: $border-radius; +} + +kbd { + color: $kbd-color; + background-color: $kbd-bg; + border-radius: $border-radius; + border: 1px solid $kbd-bg; + box-shadow: inset 0 1px 0 rgba(#fff, .4); +} + +pre { + display: block; + padding: $spacer / 2; + margin-bottom: $spacer; + line-height: $line-height; + color: $code-color; + background-color: $code-bg; + margin-left: -($spacer); + margin-right: -($spacer); + + // make 'em scrollable + overflow: scroll; + -webkit-overflow-scrolling: touch; + max-height: 300px; + + @media (min-width: $screen-sm) { + max-height: 500px; + } + + @media (min-width: $screen-md) { + border-radius: $border-radius; + } + + code { + white-space: pre; + overflow: auto; + display: block; + color: inherit; + background-color: transparent; + border-radius: 0; + overflow-wrap: normal; + word-wrap: normal; + word-break: normal; + } +} + +pre > code.language-bash { + padding-left: 1.5em; + display: block; + + &::before { + content: '$'; + opacity: .5; + display: inline-block; + margin-left: -.5em; + margin-right: .8em; + } +} + +:not(pre) > code[class*='language-'] { + background: rgba($code-bg, .1); + color: $text-color; +} + +@import 'syntax'; diff --git a/src/styles/_syntax.scss b/src/styles/_syntax.scss new file mode 100644 index 00000000..2148915f --- /dev/null +++ b/src/styles/_syntax.scss @@ -0,0 +1,158 @@ +/* +Name: Duotone Space +Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes) + +Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-space-dark.css) +Generated with Base16 Builder (https://github.com/base16-builder/base16-builder) +*/ + +code[class*='language-'], +pre[class*='language-'] { + direction: ltr; + text-align: left; + tab-size: 4; + hyphens: none; + background: #24242e; + color: #767693; +} + +pre[class*='language-']::-moz-selection, +pre[class*='language-'] ::-moz-selection, +code[class*='language-']::-moz-selection, +code[class*='language-'] ::-moz-selection { + text-shadow: none; + background: #5151e6; +} + +pre[class*='language-']::selection, +pre[class*='language-'] ::selection, +code[class*='language-']::selection, +code[class*='language-'] ::selection { + text-shadow: none; + background: #5151e6; +} + +/* Inline code */ +// :not(pre) > code[class*='language-'] { +// } + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #5b5b76; +} + +.token.punctuation { + color: #5b5b76; +} + +.token.namespace { + opacity: .7; +} + +.token.tag, +.token.operator, +.token.number { + color: #dd672c; +} + +.token.property, +.token.function { + color: #767693; +} + +.token.tag-id, +.token.selector, +.token.atrule-id { + color: #ebebff; +} + +code.language-javascript, +.token.attr-name { + color: #aaaaca; +} + +code.language-css, +code.language-scss, +.token.boolean, +.token.string, +.token.entity, +.token.url, +.language-css .token.string, +.language-scss .token.string, +.style .token.string, +.token.attr-value, +.token.keyword, +.token.control, +.token.directive, +.token.unit, +.token.statement, +.token.regex, +.token.atrule { + color: #fe8c52; +} + +.token.placeholder, +.token.variable { + color: #fe8c52; +} + +.token.deleted { + text-decoration: line-through; +} + +.token.inserted { + border-bottom: 1px dotted #ebebff; + text-decoration: none; +} + +.token.italic { + font-style: italic; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.important { + color: #aaaaca; +} + +.token.entity { + cursor: help; +} + +pre > code.highlight { + outline: .4em solid #7676f4; + outline-offset: .4em; +} + +/* overrides color-values for the Line Numbers plugin + * http://prismjs.com/plugins/line-numbers/ + */ +.line-numbers .line-numbers-rows { + border-right-color: #262631; +} + +.line-numbers-rows > span::before { + color: #393949; +} + +/* overrides color-values for the Line Highlight plugin +* http://prismjs.com/plugins/line-highlight/ +*/ +.line-highlight { + background: rgba(221, 103, 44, .2); + background: -webkit-linear-gradient( + left, + rgba(221, 103, 44, .2) 70%, + rgba(221, 103, 44, 0) + ); + background: linear-gradient( + to right, + rgba(221, 103, 44, .2) 70%, + rgba(221, 103, 44, 0) + ); +} diff --git a/src/styles/variables.scss b/src/styles/_variables.scss similarity index 78% rename from src/styles/variables.scss rename to src/styles/_variables.scss index dca558fa..b7c79d9c 100644 --- a/src/styles/variables.scss +++ b/src/styles/_variables.scss @@ -5,8 +5,8 @@ $easing: cubic-bezier(.75, 0, .08, 1); ///////////////////////////////////// $brand-main: #015565; -$brand-cyan: #43a699; $brand-main-light: #88bec8; +$brand-cyan: #43a699; $brand-light: #e7eef4; $brand-grey: #6b7f88; @@ -16,9 +16,11 @@ $brand-grey-dimmed: lighten($brand-grey, 50%); // Backgrounds ///////////////////////////////////// -$body-background-color: $brand-light; +$body-background-color: #dfe8ef; $body-background-color--dark: darken($brand-grey, 30%); +$page-background-color: $brand-light; + // Text Colors ///////////////////////////////////// @@ -28,7 +30,7 @@ $text-color-light: $brand-grey-light; $text-color--dark: $brand-grey-light; $text-color-light--dark: $brand-grey; -// Typography +// Base Typography ///////////////////////////////////// $font-size-root: 18px; @@ -55,6 +57,9 @@ $font-color-base: $text-color; $font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace; +// Headings +///////////////////////////////////// + $font-family-headings: 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif; $font-weight-headings: 500; @@ -63,7 +68,25 @@ $line-height-headings: 1.1; $color-headings: $brand-main; $color-headings--dark: $brand-main-light; +// Code +///////////////////////////////////// + +$code-bg: #343642; +$code-color: $brand-light; +$kbd-bg: $code-bg; +$kbd-color: $code-color; + // Components spacing ///////////////////////////////////// $spacer: ($font-size-base * $line-height); + +$border-radius: 3px; + +// Responsive breakpoints +///////////////////////////////////// + +$screen-xs: 30em; +$screen-sm: 40.625em; +$screen-md: 60em; +$screen-lg: 87.5em; diff --git a/src/styles/base.scss b/src/styles/base.scss index b703a17a..d0599f5c 100644 --- a/src/styles/base.scss +++ b/src/styles/base.scss @@ -10,11 +10,11 @@ html, body { margin: 0; padding: 0; + background: $body-background-color; } html { font-size: $font-size-root; - background: $body-background-color; } body { @@ -24,13 +24,18 @@ body { line-height: $line-height; color: $font-color-base; text-rendering: optimizeLegibility; + letter-spacing: -.01em; font-feature-settings: 'liga', 'kern'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; - background: $body-background-color; transition: background .6s $easing; + // handling long text, like URLs + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; + &.dark { background-color: $body-background-color--dark; color: $text-color--dark; @@ -43,27 +48,73 @@ ol { margin: 0 0 $spacer; } +// Reset fonts for relevant elements +///////////////////////////////////// + +input, +button, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + // Headings ///////////////////////////////////// +h1, +h2 { + margin-top: $spacer * 2; + margin-bottom: $spacer * 2; +} + +h3, +h4, +h5, +h6 { + margin-top: $spacer; + margin-bottom: $spacer; +} + h1 { - font-size: $font-size-h1; + font-size: $font-size-h2; + + @media (min-width: $screen-xs) { + font-size: $font-size-h1; + } } h2 { - font-size: $font-size-h2; + font-size: $font-size-h3; + + @media (min-width: $screen-xs) { + font-size: $font-size-h2; + } } h3 { - font-size: $font-size-h3; + font-size: $font-size-h4; + + @media (min-width: $screen-xs) { + font-size: $font-size-h3; + } } h4 { - font-size: $font-size-h4; + font-size: $font-size-h5; + + @media (min-width: $screen-xs) { + font-size: $font-size-h4; + } } h5 { - font-size: $font-size-h5; + font-size: $font-size-h6; + + @media (min-width: $screen-xs) { + font-size: $font-size-h5; + } } h6 { @@ -96,11 +147,24 @@ a { text-decoration: none; transition: .2s ease-out; + h1 &, + h2 &, + h3 & { + color: $color-headings; + } + &:hover, &:focus { + outline: 0; color: lighten($brand-cyan, 10%); transform: translate3d(0, -.1rem, 0); } + + &:active { + transition: none; + color: darken($brand-cyan, 30%); + box-shadow: inset 0 -1px 0 darken($brand-cyan, 30%); + } } // Media @@ -114,8 +178,175 @@ svg { margin: 0; } +// Lists +///////////////////////////////////// + +ul { + li { + &::before { + content: ' \2015'; // horizontal bar: ― ― + } + } +} + +ol { + counter-reset: ol-counter; + + li { + &::before { + content: counter(ol-counter) '.'; + counter-increment: ol-counter; + } + } + + ul li::before { + display: none; + } +} + +ul, +ol { + margin-top: 0; + margin-bottom: $spacer; + padding-left: ($spacer * 1.5); + list-style: none; + + li { + position: relative; + + // stylelint-disable no-descending-specificity + &::before { + position: absolute; + left: -($spacer * 1.5); + top: -1px; + color: $text-color-light; + user-select: none; + } + // stylelint-enable no-descending-specificity + } + + ul, + ol { + margin-bottom: 0; + } +} + +// Inline typography +///////////////////////////////////// + +b, +strong, +.bold { + font-weight: 700; + font-style: normal; +} + +em, +.italic { + font-style: italic; +} + +abbr[title], +dfn { + text-transform: none; + font-style: normal; + font-size: inherit; + border-bottom: 1px dashed $brand-grey-dimmed; + cursor: help; + font-feature-settings: inherit; +} + +mark { + background: #fffaab; + color: $text-color; +} + +hr { + border: 0; + border-bottom: 1px dashed #afc3cb; + padding-bottom: $spacer; + margin-bottom: $spacer * 2; + + &::before { + bottom: -2px; + width: 100%; + border-bottom: 1px dashed #fff; + } +} + +// Quotes +///////////////////////////////////// + +q { + font-style: italic; +} + +cite { + font-style: normal; + text-transform: uppercase; +} + +blockquote, +blockquote > p { + font-style: italic; +} + +blockquote { + margin: 0 0 $spacer; + position: relative; + padding-left: 20px; + + @media (min-width: $screen-xs) { + padding-left: 40px; + } + + @media (min-width: $screen-lg) { + padding-left: 60px; + } + + // quotation marks + &::before { + content: '“'; + font-size: 300%; + color: lighten($text-color, 40%); + position: absolute; + left: -10px; + top: -20px; + + @media (min-width: $screen-xs) { + left: 0; + } + + @media (min-width: $screen-lg) { + top: -30px; + } + } + + p:last-child { + margin-bottom: 0; + } +} + +// Selection +///////////////////////////////////// + +::-moz-selection { + background: #2e4f5c; + color: #fff; +} + +::selection { + background: #2e4f5c; + color: #fff; +} + #___gatsby { display: flex; min-height: 100vh; flex-direction: column; } + +// More basic elements +///////////////////////////////////// + +@import 'code'; From 7a51a4478d790956bda07ce7db54d560b9be3678 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 18 Jul 2018 23:04:01 +0200 Subject: [PATCH 007/100] add stylelint-config-recommended-scss --- .stylelintrc | 1 + package.json | 8 +++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index 54edb733..c93af2d0 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -2,6 +2,7 @@ "extends": [ "stylelint-config-standard", "stylelint-config-css-modules", + "stylelint-config-recommended-scss", "./node_modules/prettier-stylelint/config.js" ], "syntax": "scss", diff --git a/package.json b/package.json index 1e580da1..f355d504 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@webcomponents/webcomponentsjs": "^2.0.2", "clipboard": "^2.0.1", "exif-js": "^2.3.0", - "gatsby": "^2.0.0-beta.43", + "gatsby": "^2.0.0-beta.46", "gatsby-image": "^2.0.0-beta.6", "gatsby-plugin-matomo": "^0.4.1", "gatsby-plugin-react-helmet": "^3.0.0-beta.3", @@ -35,7 +35,7 @@ "gatsby-remark-images": "^2.0.1-beta.7", "gatsby-remark-prismjs": "^3.0.0-beta.3", "gatsby-remark-smartypants": "^2.0.0-beta.2", - "gatsby-source-filesystem": "^2.0.1-beta.5", + "gatsby-source-filesystem": "^2.0.1-beta.6", "gatsby-transformer-remark": "^2.1.1-beta.3", "gatsby-transformer-sharp": "^2.1.1-beta.5", "gatsby-transformer-yaml": "^2.1.1-beta.2", @@ -64,7 +64,9 @@ "prettier-stylelint": "^0.4.2", "stylelint": "^9.2.1", "stylelint-config-css-modules": "^1.2.0", - "stylelint-config-standard": "^18.2.0" + "stylelint-config-recommended-scss": "^3.2.0", + "stylelint-config-standard": "^18.2.0", + "stylelint-scss": "^3.1.3" }, "engines": { "node": "^10.0.0" From 9246bf7ea85b39477ce1eba2a123c8ff82cd0aef Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 18 Jul 2018 23:04:31 +0200 Subject: [PATCH 008/100] port over mixins, base post styling --- ...ack-to-normal-on-kremaliciouscom-almost.md | 10 +- .../2008-07-11-enjoy-kremaliciousiphone.md | 16 +- ...s-25-get-rid-of-that-sluggish-dashboard.md | 10 +- ...8-08-22-the-kremalicious-marsedit-style.md | 4 +- ...a-custom-gravatar-image-in-wordpress-27.md | 14 +- ...yling-author-comments-with-wordpress-27.md | 18 +- ...imate-coda-wordpress-share-link-bonanza.md | 46 ++-- .../2009-12-17-wordpress-post-thumbnails.md | 83 ++++--- content/posts/2012-05-15-wp-icons-template.md | 19 +- ...your-web-site-to-the-windows-8-metro-ui.md | 4 +- ...2012-07-16-using-kbd-for-fun-and-profit.md | 38 +++- gatsby-node.js | 2 +- src/components/Layout.module.scss | 1 + src/styles/_mixins.scss | 207 ++++++++++++++++++ src/styles/_variables.scss | 14 +- src/styles/base.scss | 9 +- src/templates/Post.module.scss | 70 ++++++ src/templates/post.jsx | 13 +- 18 files changed, 454 insertions(+), 124 deletions(-) create mode 100644 src/styles/_mixins.scss create mode 100644 src/templates/Post.module.scss diff --git a/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md b/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md index bbcb731e..7ad17669 100644 --- a/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md +++ b/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md @@ -5,7 +5,7 @@ title: Everything Back To Normal On Kremalicious.com (Almost) author: Matthias Kretschmann date: 2008-07-01 16:39:02+00:00 - + categories: - personal tags: @@ -20,14 +20,14 @@ But more problems appeared. The display of the newest and latest posts and the n Now it's clear something with my code must be wrong, I thought. For displaying the latest posts in Wordpress I use a pretty standard way which is [described in the Wordpress Codex](http://codex.wordpress.org/Template_Tags/get_posts): -{% highlight php %} +```php
    -{% endhighlight %} +``` This would get all recent posts sorted by their post_date entry in the (wp_posts) database table and style it as an unordered list with my preferred format. This code worked since the launch of kremalicious.com and I first used it to display the recent blog entries on my start page. But since i didn't change anything in the code this couldn't be caused by wrong code or something. @@ -39,7 +39,9 @@ This bug affects all versions of MySQL since 5.0.50 and it seems there is no sta Thankfully [a commenter](http://wordpress.org/support/topic/185896#post-793417) in the Wordpress forums reminded me of a nice temporary solution to this mess until my host updates MySQL: using wp_get_archives for displaying the recent posts. But this won't let me display the dates anymore: -{% highlight php %}{% endhighlight %} +```php + +``` Problem temporary solved! diff --git a/content/posts/2008-07-11-enjoy-kremaliciousiphone.md b/content/posts/2008-07-11-enjoy-kremaliciousiphone.md index f54b50ba..2fb6d11b 100644 --- a/content/posts/2008-07-11-enjoy-kremaliciousiphone.md +++ b/content/posts/2008-07-11-enjoy-kremaliciousiphone.md @@ -5,7 +5,7 @@ title: Enjoy Kremalicious{iPhone} author: Matthias Kretschmann date: 2008-07-11 00:20:22+00:00 - + categories: - personal tags: @@ -26,9 +26,9 @@ 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}: -{% highlight html %} +```html -{% endhighlight %} +``` 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. @@ -37,17 +37,17 @@ 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: -{% highlight css %} --webkit-tap-highlight-color: rgba(234,234,234,0.5); -{% endhighlight %} +```css +-webkit-tap-highlight-color: rgba(234,234,234, .5); +``` # Home Screen Icon ![image](../media/kremalicious-iconiphone.png)I've used a 147x147px icon so the icon looks crisp and sharp on the iPhone screen (because it's a 160dpi screen). You really should use a bigger size than [Apple's recommendation in their iPhone HIG](https://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/chapter_14_section_2.html). You have to provide a png icon without rounded corners and without the highlight shine since the iPhone will render that automatically on the icon. The icon has to be named apple-touch-icon.png and gets automatically detected when put in the root of your website. Additionally you can tell the iPhone the place where the icon is with this link tag in your head section: -{% highlight html %} +```html -{% endhighlight %} +``` And finally many thanks to [cschock](http://www.cschock.de) for continuously testing my code voodoo soup even at late hours. diff --git a/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md b/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md index c76cde38..6a833efb 100644 --- a/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md +++ b/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md @@ -5,7 +5,7 @@ title: 'Wordpress 2.5+: Get Rid of That Sluggish Dashboard' author: Matthias Kretschmann date: 2008-07-15 14:04:46+00:00 - + categories: - design @@ -20,7 +20,7 @@ I've searched for a simple way of disabling those feeds, plugins etc. stuff the So open your `/wp-admin/index-extra.php` file. It should look like this: -{% highlight php %} +```php -{% endhighlight %} +``` Now just uncomment the lines so it looks like this (every line with two leading // is uncommented and therefore inactive): -{% highlight php %} +```php -{% endhighlight %} +``` And that's it. Save the file on your server, log in to your Wordpress backend and you should see your Dashboard with everything intact. It just won't search for incoming links and all those other RSS sources anymore. diff --git a/content/posts/2008-08-22-the-kremalicious-marsedit-style.md b/content/posts/2008-08-22-the-kremalicious-marsedit-style.md index 262577e6..5ba2d233 100644 --- a/content/posts/2008-08-22-the-kremalicious-marsedit-style.md +++ b/content/posts/2008-08-22-the-kremalicious-marsedit-style.md @@ -23,7 +23,7 @@ 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): -{% highlight html %} +```html @@ -70,7 +70,7 @@ Just copy and paste the following HTML and CSS into your Preview Template editor -{% endhighlight %} +``` Now click on Save Changes in the lower right corner of the window and there you have it. diff --git a/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md b/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md index 0dc3120a..083696ed 100644 --- a/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md +++ b/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md @@ -5,7 +5,7 @@ title: 'HowTo: Set A Custom Gravatar Image In Wordpress 2.7+' author: Matthias Kretschmann date: 2008-12-11 22:59:06+00:00 - + categories: - design @@ -24,7 +24,7 @@ Sure enough I've upgraded immediately when [Wordpress 2.7 was released](http://w Before Wordpress 2.7 I achieved a custom gravatar image on kremalicious.com with this code placed in the comments.php template file: -{% highlight php %} +```php -{% endhighlight %} +``` So we were able to set a path to our image we wanted to use as the default gravatar image. But with Wordpress 2.7 we have the new function [``](http://codex.wordpress.org/Template_Tags/wp_list_comments) which pretty much simplifies writing comment template code. Although it has a parameter for the avatar size it doesn't have one for setting a custom image like before. But we can use the functions.php file in your template directory and add some lines to it: (If you don't have a functions.php file just create one.) -{% highlight php %} +```php -{% endhighlight %} +``` @@ -60,9 +60,9 @@ Just set a name for your custom Gravatar image to show up beside the image in th And you can adjust the displayed size of the gravatar image by adding a parameter to `` function in your comments.php file: -{% highlight php %} +```php 70, )); ?> -{% endhighlight %} +``` diff --git a/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md b/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md index 9994cae4..825e54e8 100644 --- a/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md +++ b/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md @@ -5,7 +5,7 @@ title: 'HowTo: Styling Author Comments With Wordpress 2.7+' author: Matthias Kretschmann date: 2008-12-13 16:47:43+00:00 - + categories: - design @@ -21,7 +21,7 @@ Since my update to Wordpress 2.7 I'm pretty much into all the new comments stuff Let's start by looking at the code to achieve styling of author comments prior to Wordpress 2.7. On kremalicious.com I've used this code: -{% highlight php %} +```php
  • other comments code
    • -{% endhighlight %} +``` So with some php stuff we were able to check for the author name or, as I did it, for the URL of the comment author. If one of these were detected Wordpress added a new class 'author' to the `
  • ` tag which we were able to style by adding a li.author to our css file: - {% highlight css %}li.author { css comes in here }{% endhighlight %} +```css +li.author { /* css comes in here */ } +``` But with Wordpress 2.7 these steps are needless because of the [new function ``](http://codex.wordpress.org/Template_Tags/wp_list_comments) which adds a class on author comments for itself! If a comment from the author of an article is posted under this article, **Wordpress automatically adds the class 'bypostauthor' to the surrounding `
  • ` 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: - {% highlight css %}li.bypostauthor { css comes in here }{% endhighlight %} +```css +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! @@ -49,6 +53,8 @@ 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': -{% highlight css %}li.byuser { css comes in here }{% endhighlight %} +```css +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/). diff --git a/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md b/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md index 71637545..7938ac73 100644 --- a/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md +++ b/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md @@ -6,7 +6,7 @@ download: ../media/share-link-bonanza-coda-clips.zip author: Matthias Kretschmann date: 2009-03-29 23:12:15+00:00 - + categories: - design @@ -54,7 +54,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 ![Coda Clips Placeholder](../media/codaclips-placeholder.png)) located where the link text would be: -{% highlight html %}![Coda Clips Placeholder](../media/codaclips-placeholder.png){% endhighlight %} +```html +![Coda Clips Placeholder](../media/codaclips-placeholder.png) +``` 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. @@ -91,11 +93,15 @@ 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: -{% highlight html %} Delicious{% endhighlight %} +```html + Delicious +``` And if you want to just use an icon with no text use just an img element without providing any link text: -{% highlight html %}{% endhighlight %} +```html + +``` @@ -105,29 +111,31 @@ 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: -{% highlight html %}Delicious{% endhighlight %} +```html +Delicious +``` 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: -{% highlight css %} - .delicious { - background: url(delicious.png) no-repeat center center; - padding-left: 20px; - } -{% endhighlight %} +```css +.delicious { + background: url(delicious.png) no-repeat center center; + padding-left: 20px; +} +``` If you want to use just icons and no text you should provide a link text anyway but hide it with css. This is a good practice for accessibility and search engine optimization. Also you would have to provide the dimensions of the icon: -{% highlight css %} - .delicious { - width: 16px; - height: 16px; - background: url(delicious.png) no-repeat center center; - text-indent: -999999px; - } -{% endhighlight %} +```css +.delicious { + width: 16px; + height: 16px; + background: url(delicious.png) no-repeat center center; + text-indent: -999999px; +} +``` ## 4. HTML File Download And All The Links Separated diff --git a/content/posts/2009-12-17-wordpress-post-thumbnails.md b/content/posts/2009-12-17-wordpress-post-thumbnails.md index 7da66479..89f32bce 100644 --- a/content/posts/2009-12-17-wordpress-post-thumbnails.md +++ b/content/posts/2009-12-17-wordpress-post-thumbnails.md @@ -5,7 +5,7 @@ title: Using The New Post Thumbnail Feature In WordPress 2.9 author: Matthias Kretschmann date: 2009-12-17 04:00:21+00:00 - + categories: - design @@ -27,20 +27,20 @@ redirect_from: So just open up your theme's _functions.php_ file in your favorite editor or create it if there's no such file in your theme folder. Add this little code snippet to this file: -{% highlight php %} +```php -{% endhighlight %} +``` For backwards compatibility you should wrap this inside a function check for the new `add_theme_support`: -{% highlight php %} +```php -{% endhighlight %} +``` This makes sure WordPress installation prior to 2.9 won't get screwed up when using a theme with this new feature. @@ -62,17 +62,26 @@ You can close the media dialogue now and you will see the image in the Post Thum ![Add to theme](../media/wordpress-thumbnail-5.png)Basically all you have to do is to add this new template tag in your theme files where you want to display the post thumbnail, most certainly in your _index.php_ file: -{% highlight php %}{% endhighlight %} + +```php + +``` + This template tag will display the thumbnail sized post thumbnail by default and is essentially the same as: -{% highlight php %}{% endhighlight %} +```php + +``` But of course you can grab the other sizes WordPress automatically creates when you upload an image: -{% highlight php %}{% endhighlight %} +?> +``` + _(Note: Matt [left a comment on WP Engineer](http://wpengineer.com/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/#comment-3053) stating he wouldn't recommend using these named arguments but provided no explanation for it yet.)_ The code will output a generic `` tag with a class of wp-post-image. Needless to say this is what you can select with css to style just the post thumbnails further: @@ -84,21 +93,27 @@ The code will output a generic `` tag with a class of wp-post-image. Need If you want to adjust the generated output of the tag you can do this by using some array stuff. So let's say you want to have the post thumbnails to be 200x200px big and another class assigned to it, you can extend the template tag like so: -{% highlight php %} 'alignleft' )); ?>{% endhighlight %} +```php + 'alignleft' )); ?> +``` If you want to add more than one class you can do this like so: -{% highlight php %} 'alignleft another_class')); ?>{% endhighlight %} +```php + 'alignleft another_class')); ?> +``` And you can add any attributes to the `` tag like a `title`, `rel` or an `alt` attribute. For accessibility reasons you should always add at least the alt-attribute: -{% highlight php %} 'alignleft', 'alt' => 'alttext')); ?>{% endhighlight %} +```php + 'alignleft', 'alt' => 'alttext')); ?> +``` As for the title attribute this will be grabbed automatically from the entry you've made in your Media Library during the upload process but you even could override this too: -{% highlight php %} +```php 'alignleft', 'alt' => 'alttext', 'title' => 'titletext')); ?> -{% endhighlight %} +``` @@ -107,22 +122,26 @@ As for the title attribute this will be grabbed automatically from the entry you Finally if you want to respect the custom sizes you or your users have set under Settings > Media you can first grab those sizes with [get_option function](http://codex.wordpress.org/Function_Reference/get_option) and then put it in the array: -{% highlight php %} 'alignleft')); -?>{% endhighlight %} +?> +``` You can also detect the Media settings for the other sizes and whether the crop setting is active or not: -{% highlight php %}{% endhighlight %} +?> +``` @@ -133,41 +152,38 @@ With the check in your functions.php at the beginning there's already ensured ol So it's a pretty good idea to make this backwards compatible with some quick if else voodoo, code shamelessly [adapted from WP-Recipes](http://www.wprecipes.com/wordpress-2-9-display-post-image-with-backward-compatibility): -{% highlight php %}if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { +```php +if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { the_post_thumbnail(); } else { $postimage = get_post_meta($post->ID, 'post-image', true); if ($postimage) { echo ''; } -}{% endhighlight %} +} +``` This first checks if the feature exists and if a post thumbnail was addd with this new feature. If it was, it simply returns the post thumbnail. If not, it falls back to whatever you've used in your theme before, the usual way is to check for and get the value of a special custom field named e.g. post-image and output it. You can add whatever you've used before inside the else statement. Et voilà, it's nicely backwards compatible now, yay! ## 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 Engineer: [About WordPress Post Thumbnail](http://wpengineer.com/about-wordpress-post-thumbnail/) +* WP Recipes: [WordPress 2.9 : Display post image with backward compatibility](http://www.wprecipes.com/wordpress-2-9-display-post-image-with-backward-compatibility) - * 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/) +* 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) - * WP Recipes: [WordPress 2.9 : Display post image with backward compatibility](http://www.wprecipes.com/wordpress-2-9-display-post-image-with-backward-compatibility) +* Chris Harrison: [Post Thumbnails in RSS Feeds](http://cdharrison.com/2009/12/the_post_thumbnail-for-rss-feeds/) - * 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/) +* 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. @@ -178,13 +194,8 @@ Well and that's it. I would love to link to some smart WordPress Codex pages for As always: 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](http://www.kremalicious.com/feed/), discuss this article or buy me my next coffee. - - - - ## Article Updates - 12/20/2009 Added some resources and a note about the named arguments 12/20/2009 function check for add_theme_support at the beginning 12/20/2009 corrected the size array code under Custom Output diff --git a/content/posts/2012-05-15-wp-icons-template.md b/content/posts/2012-05-15-wp-icons-template.md index 19e01bc9..153c97d2 100644 --- a/content/posts/2012-05-15-wp-icons-template.md +++ b/content/posts/2012-05-15-wp-icons-template.md @@ -6,7 +6,7 @@ image: ../media/kremalicious-Teaser-WP-Icon-Template.png author: Matthias Kretschmann date: 2012-05-15 16:00:44+00:00 - + categories: - design @@ -70,8 +70,8 @@ You can always refer to the inline commented versions of these snippets in the [ 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: -{% highlight php %} +```php - -{% endhighlight %} +``` ### Plugin And Theme Options Icons The easiest way is to just use this markup on your option page before the page heading which is the default on all admin pages: -{% highlight html %}
    -

    My cool option page

    {% endhighlight %} +```html +
    +

    My cool option page

    +``` This is the markup being addressed in the snippet block for option page icons. The `icon32` class will make sure everything is aligned consistent to all other pages without redefining everything in css. @@ -136,8 +137,7 @@ Putting your plugin or option page in the top level of the admin menu via `add_m So all this combined leads to this snippet: -{% highlight php %} - +```php - -{% endhighlight %} +``` 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. diff --git a/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md b/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md index 097d57a5..b24e3557 100644 --- a/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md +++ b/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md @@ -28,10 +28,10 @@ While the size is the same as for the iPad 3 homescreen icon, I strongly suggest As an example, I just [pushed](https://github.com/kremalicious/kremalicious2/commit/4c7e215f4abecde4385028767b633be1278f277e) the Metro [tile image](/metro-tile.png) for kremalicious.com with those `meta` tags: -{% highlight html %} +```html -{% endhighlight %} +``` When browsing the site in Windows 8/Internet Explorer 10, users have the choice of pinning it to the start screen: diff --git a/content/posts/2012-07-16-using-kbd-for-fun-and-profit.md b/content/posts/2012-07-16-using-kbd-for-fun-and-profit.md index 2da6e6b6..0cbfcae7 100644 --- a/content/posts/2012-07-16-using-kbd-for-fun-and-profit.md +++ b/content/posts/2012-07-16-using-kbd-for-fun-and-profit.md @@ -1,7 +1,7 @@ --- layout: post -title: Using <kbd> for fun and profit +title: Using for fun and profit image: ../media/kremalicious-kbdfun-teaser.png style: post-kbd.min.css author: Matthias Kretschmann @@ -43,8 +43,10 @@ Just drop in the `kbdftw.css` in your `head`: If you want to use the Android key style, include roboto.css before: -{% highlight html %} -{% endhighlight %} +```html + + +``` You also need to add all the Roboto font files from assets/fonts to your project. @@ -58,21 +60,39 @@ For the Android style, there's `roboto.less` as include at the end. But the font The default styling are light keys with Lucida Grande as font: -{% highlight html %}Q{% endhighlight %} becomes Q +```html +Q +``` +becomes Q Add a dark class to get the dark keys: -{% highlight html %}Q{% endhighlight %} becomes Q +```html +Q +``` +becomes Q Adding an ios or android class gives a replica of those system keys. Android uses three different colors on the default keyboard. -{% highlight html %}Q{% endhighlight %} becomes Q +```html +Q +``` +becomes Q -{% highlight html %}Q{% endhighlight %} becomes Q +```html +Q +``` +becomes Q -{% highlight html %}Q{% endhighlight %} becomes Q +```html +Q +``` +becomes Q -{% highlight html %}Q{% endhighlight %} becomes Q +```html +Q +``` +becomes Q I've let the default `display: inline` intact so all padding on the `kbd` elements won't affect the line-height of the surrounding text. This leads to problems when you want to use them over multiple lines so just make them `display: inline-block` in this scenario. diff --git a/gatsby-node.js b/gatsby-node.js index 46d32db4..45fb8ea3 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -40,7 +40,7 @@ exports.createPages = ({ graphql, actions }) => { const { createPage } = actions return new Promise((resolve, reject) => { - const postTemplate = path.resolve('src/templates/post.jsx') + const postTemplate = path.resolve('src/templates/Post.jsx') // const indexTemplate = path.resolve('src/templates/index.jsx') // const tagPage = path.resolve('src/templates/tag.jsx') // const categoryPage = path.resolve('src/templates/category.jsx') diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss index 9e207d99..7ef577f5 100644 --- a/src/components/Layout.module.scss +++ b/src/components/Layout.module.scss @@ -1,6 +1,7 @@ @import 'variables'; .screen { + width: 100%; max-width: 38rem; margin-left: auto; margin-right: auto; diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss new file mode 100644 index 00000000..c70f9a1c --- /dev/null +++ b/src/styles/_mixins.scss @@ -0,0 +1,207 @@ +@import 'variables'; + +// Centering Blocks +///////////////////////////////////// + +@mixin aligncenter() { + display: block; + margin-left: auto; + margin-right: auto; +} + +// Toggling content +///////////////////////////////////// + +// Hide from both screenreaders and browsers: h5bp.com/u +@mixin hide() { + display: none !important; + visibility: hidden; +} + +@mixin show() { + display: block; + visibility: visible; +} + +// Hide only visually, but have it available for screenreaders: h5bp.com/v +@mixin visuallyhidden() { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + + // Extends the .visuallyhidden class to allow the + // element to be focusable when navigated to via the keyboard: h5bp.com/p + &.focusable:active, + &.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; + } +} + +// Hide visually and from screenreaders, but maintain layout +@mixin invisible() { + visibility: hidden; +} + +// CSS image replacement +///////////////////////////////////// + +@mixin hide-text() { + font: 0/0 a; // stylelint-disable font-family-no-missing-generic-family-keyword + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} + +// Text overflow +///////////////////////////////////// + +@mixin ellipsis($width) { + width: $width; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +// Default transition +///////////////////////////////////// + +@mixin transition() { + transition: all ease-in-out .15s; +} + +// Dashed Dividers +///////////////////////////////////// + +@mixin divider() { + position: relative; + border-bottom: 1px dashed #afc3cb; + margin-top: $spacer; + margin-bottom: $spacer; + + &::before { + content: ''; + position: absolute; + left: 0; + height: 1px; + bottom: -2px; + width: 100%; + border-bottom: 1px dashed #fff; + } +} + +// Heading band +///////////////////////////////////// + +@mixin heading-band() { + display: inline-block; + clear: both; + background: rgba(255, 255, 255, .5); + padding: ($spacer/2) $spacer ($spacer/2) 100%; + margin-left: -100%; +} + +// Lead paragraph +///////////////////////////////////// + +@mixin lead() { + font-size: $font-size-large; + line-height: $spacer * 1.15; +} + +// Layout breakout +///////////////////////////////////// + +@mixin breakoutviewport() { + margin-left: calc(-50vw + 50%); + margin-right: calc(-50vw + 50%); + + @media (min-width: $screen-md) { + @include breakoutviewport--base(); + } +} + +@mixin breakoutviewport--base() { + margin-left: -($spacer * 4); + margin-right: -($spacer * 4); +} + +@mixin breakoutviewport--full() { + margin-left: calc(-50vw + 50%); + margin-right: calc(-50vw + 50%); +} + +// Button sizing +///////////////////////////////////// + +@mixin button-size( + $padding-vertical, + $padding-horizontal, + $font-size, + $line-height, + $border-radius +) { + padding: $padding-vertical $padding-horizontal; + font-size: $font-size; + line-height: $line-height; + border-radius: $border-radius; +} + +// Form control sizing +///////////////////////////////////// + +@mixin input-size( + $padding-vertical, + $padding-horizontal, + $font-size, + $line-height, + $border-radius +) { + padding: $padding-vertical $padding-horizontal; + font-size: $font-size; + line-height: $line-height; + border-radius: $border-radius; + + &input[type='search'] { + background-size: $font-size; + background-position: $padding-vertical center; + padding-left: ($padding-vertical * 4); + } + + &select { + line-height: $input-height; + } + + &textarea, + &select[multiple] { + height: auto; + } +} + +// Placeholder text +///////////////////////////////////// + +@mixin placeholder($color: $input-color-placeholder) { + &::-moz-placeholder { + color: $color; + opacity: 1; // Override Firefox's unusual default opacity; See https//github.com/twbs/bootstrap/pull/11526 + } + + &::-webkit-input-placeholder { + color: $color; + } + + &:-ms-input-placeholder { + color: $color; + } +} diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index b7c79d9c..f837a267 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -68,6 +68,13 @@ $line-height-headings: 1.1; $color-headings: $brand-main; $color-headings--dark: $brand-main-light; +// Spacing +///////////////////////////////////// + +$spacer: ($font-size-base * $line-height); + +$border-radius: 3px; + // Code ///////////////////////////////////// @@ -76,13 +83,6 @@ $code-color: $brand-light; $kbd-bg: $code-bg; $kbd-color: $code-color; -// Components spacing -///////////////////////////////////// - -$spacer: ($font-size-base * $line-height); - -$border-radius: 3px; - // Responsive breakpoints ///////////////////////////////////// diff --git a/src/styles/base.scss b/src/styles/base.scss index d0599f5c..02ad4915 100644 --- a/src/styles/base.scss +++ b/src/styles/base.scss @@ -172,7 +172,8 @@ a { img, video, -svg { +svg, +figure { max-width: 100%; height: auto; margin: 0; @@ -340,13 +341,13 @@ blockquote { color: #fff; } +// More basic elements +///////////////////////////////////// + #___gatsby { display: flex; min-height: 100vh; flex-direction: column; } -// More basic elements -///////////////////////////////////// - @import 'code'; diff --git a/src/templates/Post.module.scss b/src/templates/Post.module.scss new file mode 100644 index 00000000..cda2f891 --- /dev/null +++ b/src/templates/Post.module.scss @@ -0,0 +1,70 @@ +@import 'variables'; +@import 'mixins'; + +.hentry { + padding-top: $spacer * 2; + padding-bottom: $spacer * 2; + width: 100%; + + @media (min-width: $screen-sm) { + padding-top: $spacer * 3; + padding-bottom: $spacer * 3; + } +} + +// Post Title +///////////////////////////////////// + +.hentry__title { + font-size: $font-size-h1; + text-align: center; + color: $color-headings; + margin-top: 0; + margin-bottom: $spacer; +} + +// Post/photo teaser +///////////////////////////////////// + +.hentry__teaser { + @include breakoutviewport(); + + max-width: none; + display: block; + margin-top: $spacer * 1.5; + margin-bottom: $spacer * 1.5; + + img { + border-radius: 0; + + @media (min-width: $screen-sm) { + border-radius: $border-radius; + } + } +} + +// Post Content +///////////////////////////////////// + +.hentry__content { + h1, + h2 { + @include heading-band(); + } + + h1 { + font-size: $font-size-h2; + } + + h2 { + font-size: $font-size-h3; + } + + h3 { + font-size: $font-size-h4; + } + + p:last-child { + margin-bottom: 0; + } +} diff --git a/src/templates/post.jsx b/src/templates/post.jsx index 70412671..2c28ac26 100644 --- a/src/templates/post.jsx +++ b/src/templates/post.jsx @@ -4,6 +4,7 @@ import Helmet from 'react-helmet' import { graphql } from 'gatsby' import Layout from '../components/Layout' import Image from '../components/atoms/Image' +import styles from './Post.module.scss' const Post = ({ data }) => { const { markdownRemark: post } = data @@ -13,11 +14,15 @@ const Post = ({ data }) => { -
    -

    {title}

    - {image && {title}} +
    +

    {title}

    + {image && ( +
    + {title} +
    + )}
    From 32c7155f93949a676d5981c19db7408bbb3bea9f Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 18 Jul 2018 23:14:47 +0200 Subject: [PATCH 009/100] syntax highlighting tweaks --- src/styles/_code.scss | 10 +-- src/styles/_syntax.scss | 163 ++++++++++++---------------------------- 2 files changed, 54 insertions(+), 119 deletions(-) diff --git a/src/styles/_code.scss b/src/styles/_code.scss index 51731ed1..73a5652a 100644 --- a/src/styles/_code.scss +++ b/src/styles/_code.scss @@ -64,16 +64,16 @@ pre { } } -pre > code.language-bash { - padding-left: 1.5em; +pre > code.language-shell { + padding-left: $spacer / 2; display: block; &::before { content: '$'; - opacity: .5; + opacity: .4; display: inline-block; - margin-left: -.5em; - margin-right: .8em; + margin-left: -.5rem; + margin-right: .5rem; } } diff --git a/src/styles/_syntax.scss b/src/styles/_syntax.scss index 2148915f..4f579e18 100644 --- a/src/styles/_syntax.scss +++ b/src/styles/_syntax.scss @@ -1,114 +1,78 @@ -/* -Name: Duotone Space -Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes) - -Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-space-dark.css) -Generated with Base16 Builder (https://github.com/base16-builder/base16-builder) -*/ +/** + * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML + * Based on https://github.com/chriskempson/tomorrow-theme + * @author Rose Pritchard + */ code[class*='language-'], pre[class*='language-'] { - direction: ltr; - text-align: left; tab-size: 4; hyphens: none; - background: #24242e; - color: #767693; -} - -pre[class*='language-']::-moz-selection, -pre[class*='language-'] ::-moz-selection, -code[class*='language-']::-moz-selection, -code[class*='language-'] ::-moz-selection { - text-shadow: none; - background: #5151e6; -} - -pre[class*='language-']::selection, -pre[class*='language-'] ::selection, -code[class*='language-']::selection, -code[class*='language-'] ::selection { - text-shadow: none; - background: #5151e6; } /* Inline code */ -// :not(pre) > code[class*='language-'] { -// } +:not(pre) > code[class*='language-'] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} .token.comment, +.token.block-comment, .token.prolog, .token.doctype, .token.cdata { - color: #5b5b76; + color: #999; } .token.punctuation { - color: #5b5b76; -} - -.token.namespace { - opacity: .7; + color: #ccc; } .token.tag, -.token.operator, -.token.number { - color: #dd672c; +.token.attr-name, +.token.namespace, +.token.deleted { + color: #e2777a; +} + +.token.function-name { + color: #6196cc; +} + +.token.boolean, +.token.number, +.token.function { + color: #f08d49; } .token.property, -.token.function { - color: #767693; +.token.class-name, +.token.constant, +.token.symbol { + color: #f8c555; } -.token.tag-id, .token.selector, -.token.atrule-id { - color: #ebebff; -} - -code.language-javascript, -.token.attr-name { - color: #aaaaca; -} - -code.language-css, -code.language-scss, -.token.boolean, -.token.string, -.token.entity, -.token.url, -.language-css .token.string, -.language-scss .token.string, -.style .token.string, -.token.attr-value, +.token.important, +.token.atrule, .token.keyword, -.token.control, -.token.directive, -.token.unit, -.token.statement, +.token.builtin { + color: #cc99cd; +} + +.token.string, +.token.char, +.token.attr-value, .token.regex, -.token.atrule { - color: #fe8c52; -} - -.token.placeholder, .token.variable { - color: #fe8c52; + color: #7ec699; } -.token.deleted { - text-decoration: line-through; -} - -.token.inserted { - border-bottom: 1px dotted #ebebff; - text-decoration: none; -} - -.token.italic { - font-style: italic; +.token.operator, +.token.entity, +.token.url { + color: #67cdcc; } .token.important, @@ -116,43 +80,14 @@ code.language-scss, font-weight: bold; } -.token.important { - color: #aaaaca; +.token.italic { + font-style: italic; } .token.entity { cursor: help; } -pre > code.highlight { - outline: .4em solid #7676f4; - outline-offset: .4em; -} - -/* overrides color-values for the Line Numbers plugin - * http://prismjs.com/plugins/line-numbers/ - */ -.line-numbers .line-numbers-rows { - border-right-color: #262631; -} - -.line-numbers-rows > span::before { - color: #393949; -} - -/* overrides color-values for the Line Highlight plugin -* http://prismjs.com/plugins/line-highlight/ -*/ -.line-highlight { - background: rgba(221, 103, 44, .2); - background: -webkit-linear-gradient( - left, - rgba(221, 103, 44, .2) 70%, - rgba(221, 103, 44, 0) - ); - background: linear-gradient( - to right, - rgba(221, 103, 44, .2) 70%, - rgba(221, 103, 44, 0) - ); +.token.inserted { + color: green; } From 874df1ea85c8d192033abcb0f4ee9569f7f865af Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 19 Jul 2018 00:22:06 +0200 Subject: [PATCH 010/100] make post folders possible --- .../Google Android License.txt | 0 .../Roboto-Regular-webfont.eot | Bin .../Roboto-Regular-webfont.svg | 0 .../Roboto-Regular-webfont.ttf | Bin .../Roboto-Regular-webfont.woff | Bin .../index.md} | 8 +- .../kremalicious-kbdfun-teaser.png | Bin .../post-kbd.css | 73 ++++++++++++++++ gatsby-node.js | 82 +++++++++--------- package.json | 4 +- src/styles/_mixins.scss | 16 ++++ src/styles/base.scss | 18 +++- src/templates/Post.module.scss | 8 +- 13 files changed, 161 insertions(+), 48 deletions(-) rename {_src/_assets/fonts => content/posts/2012-07-16-using-kbd-for-fun-and-profit}/Google Android License.txt (100%) rename {_src/_assets/fonts => content/posts/2012-07-16-using-kbd-for-fun-and-profit}/Roboto-Regular-webfont.eot (100%) rename {_src/_assets/fonts => content/posts/2012-07-16-using-kbd-for-fun-and-profit}/Roboto-Regular-webfont.svg (100%) rename {_src/_assets/fonts => content/posts/2012-07-16-using-kbd-for-fun-and-profit}/Roboto-Regular-webfont.ttf (100%) rename {_src/_assets/fonts => content/posts/2012-07-16-using-kbd-for-fun-and-profit}/Roboto-Regular-webfont.woff (100%) rename content/posts/{2012-07-16-using-kbd-for-fun-and-profit.md => 2012-07-16-using-kbd-for-fun-and-profit/index.md} (96%) rename content/{media => posts/2012-07-16-using-kbd-for-fun-and-profit}/kremalicious-kbdfun-teaser.png (100%) create mode 100644 content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.css diff --git a/_src/_assets/fonts/Google Android License.txt b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/Google Android License.txt similarity index 100% rename from _src/_assets/fonts/Google Android License.txt rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/Google Android License.txt diff --git a/_src/_assets/fonts/Roboto-Regular-webfont.eot b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.eot similarity index 100% rename from _src/_assets/fonts/Roboto-Regular-webfont.eot rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.eot diff --git a/_src/_assets/fonts/Roboto-Regular-webfont.svg b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.svg similarity index 100% rename from _src/_assets/fonts/Roboto-Regular-webfont.svg rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.svg diff --git a/_src/_assets/fonts/Roboto-Regular-webfont.ttf b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.ttf similarity index 100% rename from _src/_assets/fonts/Roboto-Regular-webfont.ttf rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.ttf diff --git a/_src/_assets/fonts/Roboto-Regular-webfont.woff b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.woff similarity index 100% rename from _src/_assets/fonts/Roboto-Regular-webfont.woff rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/Roboto-Regular-webfont.woff diff --git a/content/posts/2012-07-16-using-kbd-for-fun-and-profit.md b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md similarity index 96% rename from content/posts/2012-07-16-using-kbd-for-fun-and-profit.md rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md index 0cbfcae7..3fabc79b 100644 --- a/content/posts/2012-07-16-using-kbd-for-fun-and-profit.md +++ b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md @@ -2,8 +2,8 @@ layout: post title: Using for fun and profit -image: ../media/kremalicious-kbdfun-teaser.png -style: post-kbd.min.css +image: ./kremalicious-kbdfun-teaser.png +style: ./post-kbd.css author: Matthias Kretschmann featured: true @@ -17,6 +17,10 @@ tags: coinhive: true --- + + There's this HTML element meant for marking up keyboard keys named ``. Obviously it can be styled with CSS so why not use it to make those elements look a bit more like hardware or the iOS and Android software keys. The above picture might be blurry depending on the device you're using so here's a live rendered demo: diff --git a/content/media/kremalicious-kbdfun-teaser.png b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/kremalicious-kbdfun-teaser.png similarity index 100% rename from content/media/kremalicious-kbdfun-teaser.png rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/kremalicious-kbdfun-teaser.png diff --git a/content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.css b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.css new file mode 100644 index 00000000..206fdd43 --- /dev/null +++ b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.css @@ -0,0 +1,73 @@ +kbd { + font-size: 18px; + color: #444444; + font-family: "Lucida Grande", Lucida, Verdana, sans-serif; + font-weight: normal; + font-style: normal; + text-align: center; + line-height: 1em; + text-shadow: 0 1px 0 #fff; + display: inline; + padding: .3em .55em; + border-radius: 6px; + background-clip: padding-box; + border: 1px solid #bbb; + background-color: #f7f7f7; + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)); + background-repeat: repeat-x; + box-shadow: 0px 2px 0 #bbbbbb, 0 3px 1px #999999, 0 3px 0 #bbbbbb, inset 0 1px 1px #ffffff, inset 0 -1px 3px #cccccc; +} + +kbd.dark { + color: #eeeeee; + text-shadow: 0 -1px 0 #000000; + border-color: #000; + background-color: #4d4c4c; + background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0)); + background-repeat: no-repeat; + box-shadow: 0px 2px 0 #000000, 0 3px 1px #999999, inset 0 1px 1px #aaaaaa, inset 0 -1px 3px #272727; +} + + +kbd.ios { + font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; + color: #000; + border-color: rgba(0, 0, 0, 0.6); + border-top-color: rgba(0, 0, 0, 0.4); + background-color: #b7b7bc; + background-image: linear-gradient(to bottom, #efeff0, #b7b7bc); + background-repeat: repeat-x; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 #ffffff; +} + + +kbd.android { + font-family: 'RobotoRegular', "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #ffffff; + text-shadow: none; + padding: .3em; + border: 1px solid rgba(0, 0, 0, 0.05); + border-radius: 3px; + background-clip: padding-box; + background: #5e5e5e; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #444444, inset 0 1px 0 #868686; +} + + +kbd.android.dark { + background: #222222; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #505050; +} + +kbd.android.color { + background: #083c5b; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #36647b; +} + +@font-face { + font-family: 'RobotoRegular'; + src: url('./Roboto-Regular-webfont.eot'); + src: url('./Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('./Roboto-Regular-webfont.woff') format('woff'), url('./Roboto-Regular-webfont.ttf') format('truetype'), url('./Roboto-Regular-webfont.svg#RobotoRegular') format('svg'); + font-weight: normal; + font-style: normal; +} diff --git a/gatsby-node.js b/gatsby-node.js index 45fb8ea3..b6c1ec72 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,17 +1,23 @@ const path = require('path') const { createFilePath } = require('gatsby-source-filesystem') -// Create slug & date for posts from file path +// Create slug & date for posts from file path values exports.onCreateNode = ({ node, actions, getNode }) => { const { createNodeField } = actions if (node.internal.type === 'MarkdownRemark') { const fileNode = getNode(node.parent) const parsedFilePath = path.parse(fileNode.relativePath) + const slugOriginal = createFilePath({ node, getNode }) // slug - const slugOriginal = createFilePath({ node, getNode }) - const slug = `/${slugOriginal.substring(12)}` // remove date from file path + let slug + + if (parsedFilePath.name === 'index') { + slug = `/${parsedFilePath.dir.substring(11)}` // remove date from file dir + } else { + slug = `/${slugOriginal.substring(12)}` // remove first slash & date from file path + } createNodeField({ node, @@ -25,7 +31,7 @@ exports.onCreateNode = ({ node, actions, getNode }) => { if (node.frontmatter.date) { date = `${node.frontmatter.date}` } else { - date = `${parsedFilePath.name.substring(0, 10)}` + date = `${slugOriginal.substring(1, 10)}` // grab date from file path } createNodeField({ @@ -42,18 +48,22 @@ exports.createPages = ({ graphql, actions }) => { return new Promise((resolve, reject) => { const postTemplate = path.resolve('src/templates/Post.jsx') // const indexTemplate = path.resolve('src/templates/index.jsx') - // const tagPage = path.resolve('src/templates/tag.jsx') - // const categoryPage = path.resolve('src/templates/category.jsx') + // const tagTemplate = path.resolve('src/templates/tag.jsx') + // const categoryTemplate = path.resolve('src/templates/category.jsx') resolve( graphql( ` { - allMarkdownRemark { + allMarkdownRemark( + sort: { fields: [fields___date], order: DESC } + limit: 1000 + ) { edges { node { fields { slug + date } } } @@ -67,20 +77,21 @@ exports.createPages = ({ graphql, actions }) => { reject(result.errors) } - // Creates Index page - // createPaginatedPages({ - // edges: result.data.allMarkdownRemark.edges, - // createPage: createPage, - // pageTemplate: indexTemplate - // }) - // Create Posts - result.data.allMarkdownRemark.edges.forEach(edge => { + const posts = result.data.allMarkdownRemark.edges + + posts.forEach((post, index) => { + const previous = + index === posts.length - 1 ? null : posts[index + 1].node + const next = index === 0 ? null : posts[index - 1].node + createPage({ - path: `${edge.node.fields.slug}`, + path: `${post.node.fields.slug}`, component: postTemplate, context: { - slug: edge.node.fields.slug + slug: post.node.fields.slug, + previous, + next } }) }) @@ -89,47 +100,40 @@ exports.createPages = ({ graphql, actions }) => { // const tagMap = new Map() // const categorySet = new Set() - // result.data.allMarkdownRemark.edges.forEach(edge => { - // if (edge.node.frontmatter.tags) { - // edge.node.frontmatter.tags.forEach(tag => { + // posts.forEach(post => { + // if (post.node.frontmatter.tags) { + // post.node.frontmatter.tags.forEach(tag => { // tagSet.add(tag) // const array = tagMap.has(tag) ? tagMap.get(tag) : [] - // array.push(edge) + // array.push(post) // tagMap.set(tag, array) // }) // } - // if (edge.node.frontmatter.category) { - // categorySet.add(edge.node.frontmatter.category) + // if (post.node.frontmatter.category) { + // categorySet.add(post.node.frontmatter.category) // } // }) - // const tagFormatter = tag => route => - // `/tags/${_.kebabCase(tag)}/${route !== 1 ? route : ''}` // const tagList = Array.from(tagSet) + // tagList.forEach(tag => { // // Creates tag pages - // createPaginationPages({ - // createPage, - // edges: tagMap.get(tag), - // component: tagPage, - // pathFormatter: tagFormatter(tag), - // limit: siteConfig.sitePaginationLimit, - // context: { - // tag - // } + // createPage({ + // path: `/tags/${tag}/`, + // component: tagTemplate, + // context: { tag } // }) // }) // const categoryList = Array.from(categorySet) + // categoryList.forEach(category => { // createPage({ - // path: `/categories/${_.kebabCase(category)}/`, - // component: categoryPage, - // context: { - // category - // } + // path: `/categories/${category}/`, + // component: categoryTemplate, + // context: { category } // }) // }) diff --git a/package.json b/package.json index f355d504..6eca2731 100644 --- a/package.json +++ b/package.json @@ -21,10 +21,10 @@ "last 3 versions" ], "dependencies": { - "@webcomponents/webcomponentsjs": "^2.0.2", + "@webcomponents/webcomponentsjs": "^2.0.3", "clipboard": "^2.0.1", "exif-js": "^2.3.0", - "gatsby": "^2.0.0-beta.46", + "gatsby": "^2.0.0-beta.47", "gatsby-image": "^2.0.0-beta.6", "gatsby-plugin-matomo": "^0.4.1", "gatsby-plugin-react-helmet": "^3.0.0-beta.3", diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index c70f9a1c..5d3e7b90 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -205,3 +205,19 @@ color: $color; } } + +// Image frame style +///////////////////////////////////// + +@mixin media-frame() { + @include transition(); + + border-top: 2px solid transparent; + border-bottom: 2px solid transparent; + border-radius: $border-radius; + box-shadow: 0 1px 3px rgba($brand-grey, .2); + + @media (min-width: $screen-sm) { + border: 2px solid transparent; + } +} diff --git a/src/styles/base.scss b/src/styles/base.scss index 02ad4915..489f29d7 100644 --- a/src/styles/base.scss +++ b/src/styles/base.scss @@ -167,16 +167,26 @@ a { } } -// Media +// Responsive Media ///////////////////////////////////// +figure, img, -video, svg, -figure { +video, +audio, +embed, +canvas, +picture { max-width: 100%; height: auto; - margin: 0; + margin: 0 auto; + display: block; + border-radius: $border-radius; +} + +img { + vertical-align: middle; } // Lists diff --git a/src/templates/Post.module.scss b/src/templates/Post.module.scss index cda2f891..d02cf58a 100644 --- a/src/templates/Post.module.scss +++ b/src/templates/Post.module.scss @@ -34,13 +34,19 @@ margin-top: $spacer * 1.5; margin-bottom: $spacer * 1.5; - img { + > div { + @include media-frame(); + border-radius: 0; @media (min-width: $screen-sm) { border-radius: $border-radius; } } + + img { + border-radius: 0; + } } // Post Content From 371831faffdb530baa3356acbea4066080eb4415 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 19 Jul 2018 02:22:01 +0200 Subject: [PATCH 011/100] categories & tags --- content/posts/2005-07-26-beaucarnea-leafs.md | 7 +- content/posts/2005-08-02-snail-on-a-leaf.md | 7 +- content/posts/2006-07-23-electricity.md | 7 +- content/posts/2006-07-23-floating-sky.md | 7 +- content/posts/2006-08-21-new-berlin-bridge.md | 7 +- content/posts/2006-09-16-wooden-windmill.md | 7 +- .../posts/2006-10-22-german-chancellery.md | 7 +- content/posts/2007-02-10-macbook-abstract.md | 7 +- ...-adjustment-tool-guide-for-aperture-152.md | 7 +- ...canon-canoscan-lide-500f-for-intel-macs.md | 8 +- ...s-on-a-mac-for-htaccess-protected-sites.md | 11 +-- .../2008-03-30-launch-of-kremaliciouscom.md | 7 +- content/posts/2008-03-31-love-the-parallax.md | 7 +- ...-web-design-tips-from-leonardo-da-vinci.md | 7 +- .../posts/2008-04-04-aperture-file-types.md | 6 +- ...4-london-police-afraid-of-photographers.md | 7 +- ...guide-to-icons-how-to-smashing-magazine.md | 2 +- ...4-05-first-principles-for-choosing-type.md | 7 +- ...own-safari-features-worth-switching-for.md | 2 +- ...announced-various-photographers-awarded.md | 7 +- ...ing-the-image-icons-in-mac-os-x-leopard.md | 2 +- ...2008-04-09-measuring-the-color-of-light.md | 7 +- ...0-the-story-behind-the-pulitzer-picture.md | 7 +- ...8-04-11-photographers-strike-back-in-uk.md | 7 +- ...ion-helper-for-apples-aperture-released.md | 2 +- ...kit-team-introduced-css-based-gradients.md | 7 +- ...lever-text-effects-with-css-text-shadow.md | 2 +- ...4-22-apple-releases-sdk-for-aperture-21.md | 7 +- ...someness-from-the-webkit-team-css-masks.md | 7 +- ...anoscan-lide-500f-with-mac-os-x-leopard.md | 2 +- ...can-images-directly-into-apple-aperture.md | 2 +- ...7-high-quality-watermarks-with-aperture.md | 7 +- ...first-available-aperture-editing-plugin.md | 7 +- ...-the-15-best-new-features-of-aperture-2.md | 7 +- ...s-beautiful-indiana-jones-desktop-icons.md | 2 +- ...tographic-software-to-work-with-leopard.md | 2 +- ...perture-adjustment-plugins-have-arrived.md | 7 +- ...eases-fisheye-hemi-plug-in-for-aperture.md | 7 +- ...05-21-awesome-parallax-optical-illusion.md | 7 +- ...-css-parallax-effect-12-creative-usages.md | 7 +- ...ew-all-in-one-aperture-plug-in-released.md | 7 +- content/posts/2008-06-01-chives.md | 7 +- .../2008-06-02-tweet-im-on-twitter-now.md | 7 +- ...and-the-history-of-the-first-photograph.md | 7 +- ...3-niepces-camera-obscura-wallpaper-pack.md | 7 +- .../2008-06-04-helvetica-typewriter-keys.md | 7 +- .../2008-06-11-safari-4-developer-preview.md | 2 +- ...tip-borders-titles-plug-in-for-aperture.md | 7 +- ...mac-file-server-and-time-machine-volume.md | 2 +- ...-is-edit-for-aperture-now-updated-to-12.md | 7 +- ...25-new-canon-stuff-xs-eos-1000-430ex-ii.md | 10 +-- content/posts/2008-06-30-stone-head.md | 7 +- ...ack-to-normal-on-kremaliciouscom-almost.md | 5 +- ...8-new-aperture-plug-ins-jade-and-ptlens.md | 7 +- .../2008-07-11-enjoy-kremaliciousiphone.md | 5 +- ...e-plug-in-nik-announces-silver-efex-pro.md | 7 +- ...s-25-get-rid-of-that-sluggish-dashboard.md | 5 +- content/posts/2008-07-23-leaf-life.md | 7 +- ...ps-for-journalists-reporting-from-china.md | 7 +- ...reate-a-mobile-encrypted-aperture-vault.md | 2 +- ...ja-finally-available-for-apple-aperture.md | 7 +- ...8-08-22-the-kremalicious-marsedit-style.md | 7 +- content/posts/2008-08-26-icy-box-icons.md | 7 +- ...rchitect-and-facade-theming-for-leopard.md | 2 +- ...-08-28-canon-eos-50d-new-lens-announced.md | 9 +-- ...1-a-new-browser-is-coming-google-chrome.md | 7 +- content/posts/2008-09-23-a-long-time-ago.md | 2 +- ...9-23-futurama-mars-university-wallpaper.md | 2 +- content/posts/2008-10-23-coffee-cup-icon.md | 7 +- ...most-incredible-coffee-icons-on-the-web.md | 7 +- ...e-guide-to-watermarks-in-apple-aperture.md | 7 +- ...a-custom-gravatar-image-in-wordpress-27.md | 6 +- ...yling-author-comments-with-wordpress-27.md | 6 +- .../posts/2009-01-05-the-mac-in-futurama.md | 2 +- content/posts/2009-02-01-portal-thingy.md | 9 +-- content/posts/2009-02-17-out-of-whale-oil.md | 2 +- ...imate-coda-wordpress-share-link-bonanza.md | 6 +- content/posts/2009-06-04-twitter-crisp.md | 7 +- content/posts/2009-06-24-adiumeetie.md | 2 +- content/posts/2009-09-05-delibar.md | 7 +- .../2009-12-17-wordpress-post-thumbnails.md | 6 +- content/posts/2010-02-04-ipixelpad.md | 7 +- content/posts/2010-03-27-office-desk.md | 8 +- content/posts/2010-07-03-momcorp.md | 2 +- content/posts/2010-07-18-typeface-condoms.md | 9 +-- content/posts/2010-08-07-bonsai.md | 9 +-- content/posts/2010-09-01-gdr-helvetica.md | 9 +-- content/posts/2010-12-11-iphone-coasters.md | 9 +-- ...29-basically-the-monolith-is-on-my-desk.md | 9 +-- ...29-free-monkey-breath-not-soylent-green.md | 9 +-- content/posts/2011-01-08-enjoying-paper.md | 9 +-- .../posts/2011-01-08-glowing-star-inside.md | 9 +-- .../posts/2011-01-18-historic-flood-levels.md | 9 +-- .../posts/2011-10-11-broken-nexus-s-screen.md | 9 +-- content/posts/2011-12-15-badged.md | 6 +- content/posts/2012-02-26-mk-v2.md | 17 ++-- content/posts/2012-03-04-relaxing-cat.md | 9 +-- content/posts/2012-04-03-blaue-turme.md | 9 +-- content/posts/2012-04-03-skeletor.md | 9 +-- .../posts/2012-04-03-train-station-leipzig.md | 9 +-- .../posts/2012-04-04-android-tab-conundrum.md | 7 +- .../posts/2012-04-05-current-sushi-status.md | 9 +-- content/posts/2012-04-07-buna.md | 9 +-- ...012-04-07-cat-enjoying-a-good-ipad-game.md | 9 +-- content/posts/2012-04-07-ipad-porn.md | 9 +-- content/posts/2012-04-07-opera.md | 9 +-- .../2012-04-08-common-kitchen-decoration.md | 9 +-- .../2012-04-08-graffiti-old-school-style.md | 9 +-- ...2012-04-20-the-origins-of-the-blink-tag.md | 9 +-- .../posts/2012-04-30-announcing-sketch2.md | 9 +-- ...oropen-free-access-to-academic-research.md | 9 +-- content/posts/2012-05-03-antique-chrome.md | 11 +-- .../2012-05-04-world-press-photo-2012.md | 11 +-- ...9-media-query-asset-downloading-results.md | 9 +-- ...5-12-nielsen-vs-clark-theyre-both-wrong.md | 9 +-- ...sponsive-images-solution-should-you-use.md | 9 +-- .../2012-05-14-welcome-to-kremalicious2.md | 7 +- content/posts/2012-05-15-wp-icons-template.md | 13 ++- content/posts/2012-05-21-why-comic-sans.md | 9 +-- ...hoo-killed-flickr-and-lost-the-internet.md | 9 +-- ...-and-web-standards-at-the-turning-point.md | 9 +-- ...23-like-modern-heating-only-more-badass.md | 9 +-- .../2012-05-26-html-for-icon-font-usage.md | 9 +-- content/posts/2012-05-27-balloon.md | 9 +-- ...se-move-past-apples-silly-faux-real-uis.md | 9 +-- ...012-06-13-retina-icons-in-wordpress-3-4.md | 7 +- content/posts/2012-06-27-typography-window.md | 11 +-- content/posts/2012-06-30-why-files-exist.md | 9 +-- .../posts/2012-07-04-newton-reconsidered.md | 11 +-- .../2012-07-07-what-makes-twitter-twitter.md | 9 +-- ...nd-colliders-the-first-photo-on-the-web.md | 9 +-- ...your-web-site-to-the-windows-8-metro-ui.md | 7 +- .../index.md | 6 +- ...puter-generated-graphics-film-from-1963.md | 9 +-- content/posts/2012-07-20-mmmmh-coffee.md | 11 +-- content/posts/2012-08-07-projectpurple.md | 2 +- content/posts/2012-08-08-amazingly-early.md | 11 +-- content/posts/2012-08-20-im-joining-ezeep.md | 7 +- content/posts/2012-08-25-so-much-room.md | 11 +-- .../posts/2012-09-07-huge-station-is-huge.md | 11 +-- content/posts/2012-09-10-subway-firefox.md | 11 +-- content/posts/2012-09-12-sweet-typography.md | 11 +-- content/posts/2012-09-14-bvg-dos.md | 11 +-- .../posts/2012-09-26-designing-with-code.md | 9 +-- content/posts/2013-02-17-castle-garden.md | 9 +-- .../2013-02-17-ezeep-android-app-design.md | 5 +- content/posts/2013-02-17-ezeep-office-view.md | 5 +- content/posts/2013-05-23-ezeep-birds.md | 5 +- content/posts/2013-05-23-ezeep-origami.md | 5 +- ...ips-on-relaunching-your-startup-website.md | 7 +- .../2013-07-13-enterprise-software-sucks.md | 6 +- ...nology-can-hurt-or-harm-our-inner-state.md | 9 +-- ...-photo-startup-is-going-out-of-business.md | 7 +- ...y-we-are-allowed-to-hate-silicon-valley.md | 7 +- ...12-11-silicon-valley-isnt-a-meritocracy.md | 7 +- .../posts/2014-03-10-just-a-normal-sunday.md | 2 +- content/posts/2014-03-15-potsdam.md | 2 +- .../posts/2014-03-17-typographic-diamond.md | 2 +- content/posts/2014-04-26-ai-weiwei-stools.md | 2 +- .../2014-06-07-airfield-reference-point.md | 2 +- ...-anton-henning-heimat-schaffen-simpsons.md | 2 +- ...9-thanks-for-the-tip-little-orange-blob.md | 2 +- ...-hindu-temple-appears-around-the-corner.md | 2 +- .../2015-04-09-most-surprising-dog-i-know.md | 2 +- ...-obligatory-it-s-summer-in-berlin-photo.md | 2 +- ...hildhood-toys-hang-painted-in-a-gallery.md | 2 +- content/posts/2015-04-25-tiny-tiny-demons.md | 2 +- ...2015-08-02-simple-tor-setup-on-mac-os-x.md | 2 +- .../posts/2015-09-13-css-app-store-badges.md | 2 +- ...udi-knows-how-to-impress-with-a-ceiling.md | 2 +- .../posts/2016-02-27-streets-of-el-raval.md | 2 +- content/posts/2016-03-02-a-storm-is-coming.md | 2 +- ...7-02-13-keith-haring-vandalizing-a-wall.md | 2 +- .../posts/2017-02-13-streets-of-el-born.md | 2 +- .../posts/2017-02-14-new-passion-facade.md | 2 +- .../posts/2017-02-16-coolhaven-rotterdam.md | 2 +- content/posts/2017-02-17-behind-the-art.md | 2 +- content/posts/2017-02-19-rotterdam-coats.md | 2 +- ...2017-02-21-david-chipperfield-staircase.md | 2 +- content/posts/2017-02-26-eu-gotham-city.md | 2 +- content/posts/2017-02-27-amsterdam-cliche.md | 2 +- .../2017-02-27-its-dark-and-i-dont-exist.md | 2 +- content/posts/2017-02-28-stedelijk-museum.md | 2 +- .../2017-02-28-temple-guardian-rijksmuseum.md | 2 +- .../2017-02-28-watching-the-night-watch.md | 2 +- .../2017-04-16-hamburgs-elbphilharmonie.md | 2 +- ...017-07-05-kapaleeshwarar-temple-chennai.md | 2 +- ...7-07-08-kochis-streetart-game-is-strong.md | 2 +- ...017-07-09-orphaned-elephant-with-friend.md | 2 +- .../posts/2017-07-10-kochis-dhobhi-ghat.md | 2 +- ...17-07-13-mumbai-hand-painted-typography.md | 2 +- ...17-07-13-obligatory-gate-of-india-photo.md | 2 +- ...pati-shivaji-maharaj-vastu-sangrahalaya.md | 2 +- .../2017-11-10-acropolis-the-erechtheum.md | 2 +- .../2017-11-10-acropolis-the-parthenon.md | 2 +- .../2017-11-10-acropolis-the-propylaea.md | 2 +- content/posts/2017-12-16-sagrada-familia.md | 2 +- content/posts/2017-12-27-sao-paulo-traffic.md | 2 +- ...-01-04-passagem-literaria-da-consolacao.md | 2 +- content/posts/2018-01-05-samba-school.md | 2 +- gatsby-node.js | 10 +-- package.json | 3 +- src/components/molecules/PostMeta.jsx | 55 +++++++++++++ src/components/molecules/PostMeta.module.scss | 79 +++++++++++++++++++ src/styles/_code.scss | 2 +- src/styles/_mixins.scss | 5 +- src/styles/_variables.scss | 4 +- src/styles/base.scss | 27 +++---- src/templates/Post.module.scss | 12 --- src/templates/post.jsx | 14 ++++ 210 files changed, 649 insertions(+), 770 deletions(-) create mode 100644 src/components/molecules/PostMeta.jsx create mode 100644 src/components/molecules/PostMeta.module.scss diff --git a/content/posts/2005-07-26-beaucarnea-leafs.md b/content/posts/2005-07-26-beaucarnea-leafs.md index 82638020..00153ffb 100644 --- a/content/posts/2005-07-26-beaucarnea-leafs.md +++ b/content/posts/2005-07-26-beaucarnea-leafs.md @@ -1,14 +1,13 @@ --- -layout: photo +type: photo title: Beaucarnea leafs image: ../media/img_1820-Version-4.jpg author: Matthias Kretschmann date: 2005-07-26 11:44:49+00:00 - -categories: -- photos + +category: photos --- [Photo on 500px](http://500px.com/photo/2661202) [Photo on flickr](http://www.flickr.com/photos/krema/6821597484) diff --git a/content/posts/2005-08-02-snail-on-a-leaf.md b/content/posts/2005-08-02-snail-on-a-leaf.md index eacd0ecc..c71604ec 100644 --- a/content/posts/2005-08-02-snail-on-a-leaf.md +++ b/content/posts/2005-08-02-snail-on-a-leaf.md @@ -1,14 +1,13 @@ --- -layout: photo +type: photo title: Snail on a leaf image: ../media/schnecke_blatt.jpg author: Matthias Kretschmann date: 2005-08-02 11:39:04+00:00 - -categories: -- photos + +category: photos --- [Photo on flickr](http://www.flickr.com/photos/krema/6965150181/in/photostream/) [Photo on 500px](http://500px.com/photo/5629909) diff --git a/content/posts/2006-07-23-electricity.md b/content/posts/2006-07-23-electricity.md index d9fb0e45..adc8e9e1 100644 --- a/content/posts/2006-07-23-electricity.md +++ b/content/posts/2006-07-23-electricity.md @@ -1,14 +1,13 @@ --- -layout: photo +type: photo title: Electricity image: ../media/MG_5885_2006-7-23.jpg author: Matthias Kretschmann date: 2006-07-23 11:36:28+00:00 - -categories: -- photos + +category: photos --- [Photo on 500px](http://500px.com/photo/5629510) [Photo on flickr](http://www.flickr.com/photos/krema/6965105709) diff --git a/content/posts/2006-07-23-floating-sky.md b/content/posts/2006-07-23-floating-sky.md index 92146b95..f1064f13 100644 --- a/content/posts/2006-07-23-floating-sky.md +++ b/content/posts/2006-07-23-floating-sky.md @@ -1,14 +1,13 @@ --- -layout: photo +type: photo title: Floating Sky image: ../media/floating-sky-1.jpg author: Matthias Kretschmann date: 2006-07-23 11:32:14+00:00 - -categories: -- photos + +category: photos --- Combining of a lot of techniques: a long exposured HDR (3 bracketed shots) processed in Photomatix and finally polished in Photoshop. diff --git a/content/posts/2006-08-21-new-berlin-bridge.md b/content/posts/2006-08-21-new-berlin-bridge.md index e78a6430..e172d497 100644 --- a/content/posts/2006-08-21-new-berlin-bridge.md +++ b/content/posts/2006-08-21-new-berlin-bridge.md @@ -1,14 +1,13 @@ --- -layout: photo +type: photo title: New Berlin Bridge image: ../media/berliner_bruecke1-HDR-16bit.jpg author: Matthias Kretschmann date: 2006-08-21 11:22:34+00:00 - -categories: -- photos + +category: photos --- ... in Halle (Saale) diff --git a/content/posts/2006-09-16-wooden-windmill.md b/content/posts/2006-09-16-wooden-windmill.md index 51b33d8d..46bffadb 100644 --- a/content/posts/2006-09-16-wooden-windmill.md +++ b/content/posts/2006-09-16-wooden-windmill.md @@ -1,14 +1,13 @@ --- -layout: photo +type: photo title: Wooden Windmill image: ../media/muehle_suhlendorf_HDR_Tonemapped_16bit.jpg author: Matthias Kretschmann date: 2006-09-16 11:47:16+00:00 - -categories: -- photos + +category: photos --- [Photo on 500px](http://500px.com/photo/2661412) [Photo on flickr](http://www.flickr.com/photos/krema/6818985878) diff --git a/content/posts/2006-10-22-german-chancellery.md b/content/posts/2006-10-22-german-chancellery.md index c496e720..10b7faa0 100644 --- a/content/posts/2006-10-22-german-chancellery.md +++ b/content/posts/2006-10-22-german-chancellery.md @@ -1,14 +1,13 @@ --- -layout: photo +type: photo title: German Chancellery image: ../media/bundeskanzleramt_01_HDR_tonemapped_16bit-Version-2.jpg author: Matthias Kretschmann date: 2006-10-22 11:43:00+00:00 - -categories: -- photos + +category: photos --- [Photo on 500px](http://500px.com/photo/5650652) [Photo on flickr](http://www.flickr.com/photos/krema/6967670015) diff --git a/content/posts/2007-02-10-macbook-abstract.md b/content/posts/2007-02-10-macbook-abstract.md index 91438282..bf09b233 100644 --- a/content/posts/2007-02-10-macbook-abstract.md +++ b/content/posts/2007-02-10-macbook-abstract.md @@ -1,14 +1,13 @@ --- -layout: photo +type: photo title: MacBook abstract image: ../media/MG_9313_2007-02-10.jpg author: Matthias Kretschmann date: 2007-02-10 12:34:39+00:00 - -categories: -- photos + +category: photos --- [Photo on flickr](http://www.flickr.com/photos/krema/2495391492) diff --git a/content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md b/content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md index 20d46ac8..ad2e18c9 100644 --- a/content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md +++ b/content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: Adjustment Tool Guide for Aperture 1.5.2 author: Matthias Kretschmann date: 2007-03-01 20:50:32+00:00 - -categories: -- photography + +category: photography tags: - aperture coinhive: true diff --git a/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md b/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md index 5b5509ba..efcf4f03 100644 --- a/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md +++ b/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md @@ -1,14 +1,14 @@ --- -layout: post +type: post title: Finally... a universal scanner driver for the Canon CanoScan LiDE 500F for Intel Macs author: Matthias Kretschmann date: 2007-06-11 18:44:28+00:00 category: photography tags: - - tutorial - - osx - - macos +- tutorial +- osx +- macos redirect_from: - /2007/06/finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs/ diff --git a/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md b/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md index 13c58296..5d9e9c85 100644 --- a/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md +++ b/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md @@ -1,16 +1,17 @@ --- -layout: post +type: post title: How to quickly generate encrypted .htpasswd passwords author: Matthias Kretschmann date: 2008-02-26 23:24:17+00:00 - + category: design + tags: - - tutorial - - osx - - macos +- tutorial +- osx +- macos coinhive: true diff --git a/content/posts/2008-03-30-launch-of-kremaliciouscom.md b/content/posts/2008-03-30-launch-of-kremaliciouscom.md index f76cf4c0..21d2bf88 100644 --- a/content/posts/2008-03-30-launch-of-kremaliciouscom.md +++ b/content/posts/2008-03-30-launch-of-kremaliciouscom.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: Launch of kremalicious.com author: Matthias Kretschmann date: 2008-03-30 19:24:21+00:00 - -categories: -- personal + +category: personal tags: - wordpress --- diff --git a/content/posts/2008-03-31-love-the-parallax.md b/content/posts/2008-03-31-love-the-parallax.md index 23c6ff7d..40575093 100644 --- a/content/posts/2008-03-31-love-the-parallax.md +++ b/content/posts/2008-03-31-love-the-parallax.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: Love the parallax author: Matthias Kretschmann date: 2008-03-31 20:54:45+00:00 - -categories: -- design + +category: design --- ![parallax](../media/parallax.png)If you resize your browser window while you are browsing this website you can see the black polaroids in my header fly and move at different speed on three layers. Pretty cool, huh? diff --git a/content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md b/content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md index 82217729..c40b9d0d 100644 --- a/content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md +++ b/content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md @@ -1,14 +1,13 @@ --- -layout: link +type: link title: 6 Web Design Tips from Leonardo da Vinci linkurl: http://designpepper.com/blog/6-web-design-tips-from-leonardo-da-vinci author: Matthias Kretschmann date: 2008-04-04 18:43:05+00:00 - -categories: -- design + +category: design --- An awesome creative idea for a blog post about Web-Design from Joshua Clanton: diff --git a/content/posts/2008-04-04-aperture-file-types.md b/content/posts/2008-04-04-aperture-file-types.md index 0ffd4e9c..fdc8dd72 100644 --- a/content/posts/2008-04-04-aperture-file-types.md +++ b/content/posts/2008-04-04-aperture-file-types.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: Aperture File Types image: ../media/Teaser-Aperture-File-Types.jpg download: ../media/aperturefiletypes_by_kremalicious.zip @@ -23,10 +23,10 @@ These icons are free for your personal use and include icons for all file types - Leopard ready (512×512) - custom 32px and 16px icons -Get them from [the goodies-page](http://www.kremalicious.com/goodies/) and have fun. +Get them from [the goodies-page](https://kremalicious.com/goodies/) and have fun.

    Download

    -And don't forget to read my article about [how to change the generic image icons in Mac OS X Leopard](http://www.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](https://kremalicious.com/2008/04/changing-the-image-icons-in-mac-os-x-leopard/). diff --git a/content/posts/2008-04-04-london-police-afraid-of-photographers.md b/content/posts/2008-04-04-london-police-afraid-of-photographers.md index e1e5f484..ce81b61a 100644 --- a/content/posts/2008-04-04-london-police-afraid-of-photographers.md +++ b/content/posts/2008-04-04-london-police-afraid-of-photographers.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: London police afraid of photographers author: Matthias Kretschmann date: 2008-04-04 19:01:09+00:00 - -categories: -- photography + +category: photography --- > Thousands of people take photos every day. What if one of them seems odd? Terrorists use surveillance to help plan attacks, taking photos and making notes about security measures like the location of CCTV cameras. If you see someone doing that, we need to know. Let experienced officers decide what action to take. diff --git a/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md b/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md index 3eab07d9..9abbc9a5 100644 --- a/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md +++ b/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md @@ -1,5 +1,5 @@ --- -layout: link +type: link title: 'Mac OS X Leopard: Designer’s Guide to Icons' linkurl: http://www.smashingmagazine.com/2008/04/04/mac-os-x-leopard-designers-guide-to-icons diff --git a/content/posts/2008-04-05-first-principles-for-choosing-type.md b/content/posts/2008-04-05-first-principles-for-choosing-type.md index dc4b0883..2dd68bef 100644 --- a/content/posts/2008-04-05-first-principles-for-choosing-type.md +++ b/content/posts/2008-04-05-first-principles-for-choosing-type.md @@ -1,14 +1,13 @@ --- -layout: link +type: link title: First principles for choosing the right typeface linkurl: http://ilovetypography.com/2008/04/04/on-choosing-type author: Matthias Kretschmann date: 2008-04-05 14:01:51+00:00 - -categories: -- design + +category: design tags: - typography --- diff --git a/content/posts/2008-04-06-9-lesser-known-safari-features-worth-switching-for.md b/content/posts/2008-04-06-9-lesser-known-safari-features-worth-switching-for.md index 545cbf83..7dbb8696 100644 --- a/content/posts/2008-04-06-9-lesser-known-safari-features-worth-switching-for.md +++ b/content/posts/2008-04-06-9-lesser-known-safari-features-worth-switching-for.md @@ -1,5 +1,5 @@ --- -layout: link +type: link title: 9 Lesser Known Safari Features linkurl: http://www.danielmiessler.com/blog/9-lesser-known-safari-features-worth-switching-for diff --git a/content/posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md b/content/posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md index 144e5746..45184bb2 100644 --- a/content/posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md +++ b/content/posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: Pulitzer Price Winners 2008 announced, various photographers awarded author: Matthias Kretschmann date: 2008-04-08 15:48:14+00:00 - -categories: -- photography + +category: photography --- ![Pulitzer Price](../media/pulitzer.png)The Columbia University has announced the winners for 2008 of the 92nd annual Pulitzer Price. The Pulitzer Price itself is often cited as the highest honor for american journalists. Among the various categories there are two winning entries for [Breaking News Photography](http://www.pulitzer.org/year/2008/breaking-news-photography) and [Feature Photography](http://www.pulitzer.org/year/2008/feature-photography). diff --git a/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md b/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md index 6b9bd293..05c941a7 100644 --- a/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md +++ b/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: 'HowTo: Changing the image icons in Mac OS X Leopard' author: Matthias Kretschmann diff --git a/content/posts/2008-04-09-measuring-the-color-of-light.md b/content/posts/2008-04-09-measuring-the-color-of-light.md index 2c1f1922..ddbf89ac 100644 --- a/content/posts/2008-04-09-measuring-the-color-of-light.md +++ b/content/posts/2008-04-09-measuring-the-color-of-light.md @@ -1,14 +1,13 @@ --- -layout: link +type: link title: Measuring the Color of Light linkurl: http://duncandavidson.com/2008/04/kelvins-and-the-color-of-light.html author: Matthias Kretschmann date: 2008-04-09 17:44:23+00:00 - -categories: -- photography + +category: photography --- Ever wondered what the heck 6500 Kelvin has to do with your photos? Here's an in-depth article from the blog of [James Duncan Davidson](http://duncandavidson.com/blog/) for better understanding of the whole color and white balance thing in photography. diff --git a/content/posts/2008-04-10-the-story-behind-the-pulitzer-picture.md b/content/posts/2008-04-10-the-story-behind-the-pulitzer-picture.md index 38d349ef..6427fac9 100644 --- a/content/posts/2008-04-10-the-story-behind-the-pulitzer-picture.md +++ b/content/posts/2008-04-10-the-story-behind-the-pulitzer-picture.md @@ -1,14 +1,13 @@ --- -layout: link +type: link title: The story behind the Pulitzer picture linkurl: http://blogs.reuters.com/photographers-blog/2008/04/07/the-story-behind-the-pictures/ author: Matthias Kretschmann date: 2008-04-10 13:16:47+00:00 - -categories: -- photography + +category: photography --- 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/): diff --git a/content/posts/2008-04-11-photographers-strike-back-in-uk.md b/content/posts/2008-04-11-photographers-strike-back-in-uk.md index 913909c0..79ec0ed7 100644 --- a/content/posts/2008-04-11-photographers-strike-back-in-uk.md +++ b/content/posts/2008-04-11-photographers-strike-back-in-uk.md @@ -1,14 +1,13 @@ --- -layout: link +type: link title: Photographers strike back in UK linkurl: http://www.pressgazette.co.uk/node/40875 author: Matthias Kretschmann date: 2008-04-11 14:16:51+00:00 - -categories: -- photography + +category: photography --- [![London police afraid of photographers](../media/londonpolice.jpg)](../media/londonpolice.jpg)Remember [the campaign of the London police](http://www.kremalicious.com/2008/04/london-police-afraid-of-photographers/) calling all people to regard photographers as potential terrorists? diff --git a/content/posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md b/content/posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md index 0faa0990..59f7e35a 100644 --- a/content/posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md +++ b/content/posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: New automation helper for Apple's Aperture released author: Matthias Kretschmann diff --git a/content/posts/2008-04-15-webkit-team-introduced-css-based-gradients.md b/content/posts/2008-04-15-webkit-team-introduced-css-based-gradients.md index a881430a..019f4dd6 100644 --- a/content/posts/2008-04-15-webkit-team-introduced-css-based-gradients.md +++ b/content/posts/2008-04-15-webkit-team-introduced-css-based-gradients.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: WebKit team introduces CSS-based gradients author: Matthias Kretschmann date: 2008-04-15 17:36:34+00:00 - -categories: -- design + +category: design tags: - css --- diff --git a/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md b/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md index e5ee517e..fa2ee497 100644 --- a/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md +++ b/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: 'Text-Shadow Exposed: Make cool and clever text effects with css text-shadow' author: Matthias Kretschmann diff --git a/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md b/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md index 7fafaf21..aa43e510 100644 --- a/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md +++ b/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: Apple releases plugin-SDK for Aperture 2.1 author: Matthias Kretschmann date: 2008-04-22 05:58:41+00:00 - -categories: -- photography + +category: photography tags: - aperture --- diff --git a/content/posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md b/content/posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md index fba976fb..2f0f5e1d 100644 --- a/content/posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md +++ b/content/posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: 'More awesomeness from the WebKit team: CSS Masks' author: Matthias Kretschmann date: 2008-04-28 12:53:18+00:00 - -categories: - - design + +category: design tags: - css diff --git a/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md b/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md index 31f6207f..ec922b41 100644 --- a/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md +++ b/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: Using the CanoScan LiDE 500F scanner with Mac OS X Leopard author: Matthias Kretschmann diff --git a/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md b/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md index d7f8732a..04517f9c 100644 --- a/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md +++ b/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: Scan images directly into Apple Aperture author: Matthias Kretschmann diff --git a/content/posts/2008-05-07-high-quality-watermarks-with-aperture.md b/content/posts/2008-05-07-high-quality-watermarks-with-aperture.md index e6504bbe..c869a8c8 100644 --- a/content/posts/2008-05-07-high-quality-watermarks-with-aperture.md +++ b/content/posts/2008-05-07-high-quality-watermarks-with-aperture.md @@ -1,14 +1,13 @@ --- -layout: post +type: post title: 'HowTo: Use high-quality watermarks in your images with Aperture 2.1' author: Matthias Kretschmann image: ../media/watermark_aperture.jpg date: 2008-05-07 03:27:25+00:00 - -categories: -- photography + +category: photography tags: - aperture - tutorial diff --git a/content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md b/content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md index 47b0769e..2b248885 100644 --- a/content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md +++ b/content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: Nik ships Viveza as an Aperture editing plugin author: Matthias Kretschmann date: 2008-05-07 19:21:34+00:00 - -categories: -- photography + +category: photography tags: - aperture --- diff --git a/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md b/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md index 1287be75..8d660f10 100644 --- a/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md +++ b/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md @@ -1,14 +1,13 @@ --- -layout: post +type: post title: The 15 best new features of Aperture 2 author: Matthias Kretschmann image: ../media/aperture15_7.png date: 2008-05-07 19:22:49+00:00 - -categories: -- photography + +category: photography tags: - aperture diff --git a/content/posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md b/content/posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md index 9237d8fa..52674b02 100644 --- a/content/posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md +++ b/content/posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: The Iconfactory presents beautiful Indiana Jones desktop icons author: Matthias Kretschmann diff --git a/content/posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md b/content/posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md index f75ba3cb..9e8375c6 100644 --- a/content/posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md +++ b/content/posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: Canon updates photographic software to work with Leopard author: Matthias Kretschmann diff --git a/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md b/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md index e75d24be..4d7fd724 100644 --- a/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md +++ b/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: 'Update: First overview: Aperture 2.1 adjustment plugins have arrived' author: Matthias Kretschmann date: 2008-05-18 05:00:01+00:00 - -categories: -- photography + +category: photography tags: - aperture diff --git a/content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md b/content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md index b5381503..6e0d1683 100644 --- a/content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md +++ b/content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: Image Trends releases Fisheye-Hemi plug-in for Apple Aperture author: Matthias Kretschmann date: 2008-05-19 13:05:23+00:00 - -categories: -- photography + +category: photography tags: - aperture --- diff --git a/content/posts/2008-05-21-awesome-parallax-optical-illusion.md b/content/posts/2008-05-21-awesome-parallax-optical-illusion.md index 98eeb574..4f153f3d 100644 --- a/content/posts/2008-05-21-awesome-parallax-optical-illusion.md +++ b/content/posts/2008-05-21-awesome-parallax-optical-illusion.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: 'Awesome parallax optical illusion: Make a horse move' author: Matthias Kretschmann date: 2008-05-21 13:02:00+00:00 - -categories: -- design + +category: design tags: - css --- diff --git a/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md b/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md index a527e0aa..5d7d662c 100644 --- a/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md +++ b/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md @@ -1,14 +1,13 @@ --- -layout: post +type: post title: 'Showcasing the CSS Parallax Effect: 12+1 Creative Usages' author: Matthias Kretschmann image: ../media/parallax-visualization_big.png date: 2008-05-22 20:01:12+00:00 - -categories: - - design + +category: design tags: - css diff --git a/content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md b/content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md index c78ad5fb..07ad677f 100644 --- a/content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md +++ b/content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: New all-in-one Aperture plug-in released author: Matthias Kretschmann date: 2008-05-28 15:29:56+00:00 - -categories: -- photography + +category: photography tags: - aperture diff --git a/content/posts/2008-06-01-chives.md b/content/posts/2008-06-01-chives.md index 0727e68e..2e72b692 100644 --- a/content/posts/2008-06-01-chives.md +++ b/content/posts/2008-06-01-chives.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: Chives image: ../media/Teaser-Chives.jpg @@ -7,9 +7,8 @@ download: ../media/chives_by_kremalicious.zip author: Matthias Kretschmann date: 2008-06-01 18:43:40+00:00 - -categories: - - goodies + +category: goodies tags: - wallpaper diff --git a/content/posts/2008-06-02-tweet-im-on-twitter-now.md b/content/posts/2008-06-02-tweet-im-on-twitter-now.md index 310d8e5d..d84aef2c 100644 --- a/content/posts/2008-06-02-tweet-im-on-twitter-now.md +++ b/content/posts/2008-06-02-tweet-im-on-twitter-now.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: Tweet! I'm on Twitter now. author: Matthias Kretschmann date: 2008-06-02 18:26:37+00:00 - -categories: -- personal + +category: personal tags: - twitter --- diff --git a/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md b/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md index f4e9812c..c7b41f9d 100644 --- a/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md +++ b/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: Niépce's Camera Obscura And The History Of The First Photograph image: ../media/Teaser-Camera-Obscura-Icons.jpg @@ -7,11 +7,8 @@ download: ../media/niepces_camera_obscura_by_kremalicious.zip author: Matthias Kretschmann date: 2008-06-03 14:34:03+00:00 - -categories: - - goodies - - photography +category: goodies tags: - icon diff --git a/content/posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md b/content/posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md index da57a257..91bcf36f 100644 --- a/content/posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md +++ b/content/posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: Niépce's Camera Obscura Wallpaper Pack image: ../media/Teaser-Camera-Obscura-Walls.jpg @@ -7,9 +7,8 @@ download: ../media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip author: Matthias Kretschmann date: 2008-06-03 13:32:24+00:00 - -categories: -- goodies + +category: goodies tags: - wallpaper diff --git a/content/posts/2008-06-04-helvetica-typewriter-keys.md b/content/posts/2008-06-04-helvetica-typewriter-keys.md index caa894a3..353441e2 100644 --- a/content/posts/2008-06-04-helvetica-typewriter-keys.md +++ b/content/posts/2008-06-04-helvetica-typewriter-keys.md @@ -1,14 +1,13 @@ --- -layout: photo +type: photo title: Helvetica Typewriter Keys image: ../media/MG_1735-Version-2.jpg author: Matthias Kretschmann date: 2008-06-04 11:41:01+00:00 - -categories: -- photos + +category: photos tags: - typography --- diff --git a/content/posts/2008-06-11-safari-4-developer-preview.md b/content/posts/2008-06-11-safari-4-developer-preview.md index 6f09d812..f6af8c44 100644 --- a/content/posts/2008-06-11-safari-4-developer-preview.md +++ b/content/posts/2008-06-11-safari-4-developer-preview.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: 'Safari 4 Developer Preview - Better Performance, Overhauled Web Inspector, New CSS' author: Matthias Kretschmann diff --git a/content/posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md b/content/posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md index 7d709bc4..8d6b0b8a 100644 --- a/content/posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md +++ b/content/posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: 'Quick Tip: Borders & Titles Plug-In for Aperture' author: Matthias Kretschmann date: 2008-06-17 15:21:57+00:00 - -categories: -- photography + +category: photography tags: - aperture --- diff --git a/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md b/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md index 100d73fa..323aca4a 100644 --- a/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md +++ b/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: 'HowTo: Make Ubuntu A Perfect Mac File Server And Time Machine Volume' author: Matthias Kretschmann diff --git a/content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md b/content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md index 3b724215..b75ad8eb 100644 --- a/content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md +++ b/content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: ApertureEdit is Edit for Aperture now, updated to 1.2 author: Matthias Kretschmann date: 2008-06-25 15:29:22+00:00 - -categories: -- photography + +category: photography tags: - aperture --- diff --git a/content/posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md b/content/posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md index 4af18d20..cd23da0c 100644 --- a/content/posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md +++ b/content/posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md @@ -1,14 +1,12 @@ --- -layout: post +type: post -title: 'New Canon stuff: Digital Rebel XS/EOS 1000D/Kiss F And Speedlite 430EX II - announced' +title: 'New Canon stuff: Digital Rebel XS/EOS 1000D/Kiss F And Speedlite 430EX II announced' author: Matthias Kretschmann date: 2008-06-25 16:41:59+00:00 - -categories: -- photography + +category: photography --- ![Digital Rebel XS/EOS 1000D ](../media/canon1000d.png)After the latest Digital Photo Professional update (DPP 3.4.1.1) [revealed some evidence about an upcoming Canon EOS Rebel XS/1000D](http://www.bobatkins.com/photography/digital/canon_xs_1000D_dpp34.html), Canon finally introduced this new entry-level DSLR this month. The [EOS Digital Rebel XS/1000D/Kiss F](http://www.canon-europe.com/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1000D/index.asp) ([full product specifications](http://www.canon-europe.com/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1000D/index.asp?specs=1)) is technically a hybrid between hardware and features found in Canon's entry-level cameras from the past: the 7-point autofocus system comes from the XT/350D, the Digic III processor is the same as in the XSi/450D and the Live View feature is implemented with the same features as found in the XSi/450D. diff --git a/content/posts/2008-06-30-stone-head.md b/content/posts/2008-06-30-stone-head.md index 374c1523..4fecb288 100644 --- a/content/posts/2008-06-30-stone-head.md +++ b/content/posts/2008-06-30-stone-head.md @@ -1,14 +1,13 @@ --- -layout: photo +type: photo title: Stone Head image: ../media/stonehead.jpg author: Matthias Kretschmann date: 2008-06-30 11:26:14+00:00 - -categories: -- photos + +category: photos --- A stone made head which can be twittled. Halle(Saale)/Germany. Heavy Color Adjustements in Aperture 2.1 diff --git a/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md b/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md index 7ad17669..a98304d8 100644 --- a/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md +++ b/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: Everything Back To Normal On Kremalicious.com (Almost) author: Matthias Kretschmann date: 2008-07-01 16:39:02+00:00 -categories: -- personal +category: personal tags: - wordpress --- diff --git a/content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md b/content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md index 6633599a..3e3bb1a9 100644 --- a/content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md +++ b/content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: 'New Aperture Plug-Ins: Jade And PTLens' author: Matthias Kretschmann date: 2008-07-08 19:19:54+00:00 - -categories: -- photography + +category: photography tags: - aperture --- diff --git a/content/posts/2008-07-11-enjoy-kremaliciousiphone.md b/content/posts/2008-07-11-enjoy-kremaliciousiphone.md index 2fb6d11b..e49de049 100644 --- a/content/posts/2008-07-11-enjoy-kremaliciousiphone.md +++ b/content/posts/2008-07-11-enjoy-kremaliciousiphone.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: Enjoy Kremalicious{iPhone} author: Matthias Kretschmann date: 2008-07-11 00:20:22+00:00 -categories: -- personal +category: personal tags: - wordpress --- diff --git a/content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md b/content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md index b2e3100c..4129cb44 100644 --- a/content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md +++ b/content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: 'New Aperture Plug-In: Nik announces Silver Efex Pro' author: Matthias Kretschmann date: 2008-07-11 19:13:16+00:00 - -categories: -- photography + +category: photography tags: - aperture --- diff --git a/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md b/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md index 6a833efb..a509c5d0 100644 --- a/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md +++ b/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: 'Wordpress 2.5+: Get Rid of That Sluggish Dashboard' author: Matthias Kretschmann @@ -7,8 +7,7 @@ author: Matthias Kretschmann date: 2008-07-15 14:04:46+00:00 -categories: -- design +category: design tags: - tutorial - wordpress diff --git a/content/posts/2008-07-23-leaf-life.md b/content/posts/2008-07-23-leaf-life.md index 4c38ceca..089cf1e8 100644 --- a/content/posts/2008-07-23-leaf-life.md +++ b/content/posts/2008-07-23-leaf-life.md @@ -1,14 +1,13 @@ --- -layout: photo +type: photo title: Leaf Life image: ../media/MG_1920.jpg author: Matthias Kretschmann date: 2008-07-23 20:38:57+00:00 - -categories: -- photos + +category: photos post_format: - Image --- diff --git a/content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md b/content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md index cd6917ab..b1b87b31 100644 --- a/content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md +++ b/content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: Tips for Journalists Reporting From China author: Matthias Kretschmann date: 2008-08-03 17:10:25+00:00 - -categories: -- photography + +category: photography --- ![Jingjing and Chacha are watching you](../media/jingjing_chacha_kremalicious.jpg) diff --git a/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md b/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md index f9ea6435..3b659b65 100644 --- a/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md +++ b/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: 'HowTo: Create A Mobile Encrypted Aperture Vault' author: Matthias Kretschmann diff --git a/content/posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md b/content/posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md index 5bb58ed5..e4d3b5ba 100644 --- a/content/posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md +++ b/content/posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: Noise Ninja finally available for Apple Aperture author: Matthias Kretschmann date: 2008-08-22 14:51:02+00:00 - -categories: -- photography + +category: photography tags: - aperture --- diff --git a/content/posts/2008-08-22-the-kremalicious-marsedit-style.md b/content/posts/2008-08-22-the-kremalicious-marsedit-style.md index 5ba2d233..b8b47818 100644 --- a/content/posts/2008-08-22-the-kremalicious-marsedit-style.md +++ b/content/posts/2008-08-22-the-kremalicious-marsedit-style.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: The Kremalicious MarsEdit Style author: Matthias Kretschmann date: 2008-08-22 17:04:19+00:00 - -categories: -- goodies + +category: goodies --- ![The Kremalicious MarsEdit Style](../media/marsedit_kremalicious.png)Personally I blog everything with RedSweater's awesome application [MarsEdit](http://www.red-sweater.com/marsedit/). MarsEdit has a cool preview window included where you can see your writing live while you type. The formatting of this preview is based on simple HTML and CSS so the style is pretty customizable. diff --git a/content/posts/2008-08-26-icy-box-icons.md b/content/posts/2008-08-26-icy-box-icons.md index 52643aaa..0a9c847c 100644 --- a/content/posts/2008-08-26-icy-box-icons.md +++ b/content/posts/2008-08-26-icy-box-icons.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: Icy Box Icons image: ../media/Teaser-Icy-Box.jpg @@ -7,9 +7,8 @@ download: ../media/icybox_by_kremalicious.zip author: Matthias Kretschmann date: 2008-08-26 19:16:38+00:00 - -categories: -- goodies + +category: goodies tags: - icon diff --git a/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md b/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md index 92eb8394..59c7ad7c 100644 --- a/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md +++ b/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: 'Architect and Façade: Theming For Leopard' author: Matthias Kretschmann diff --git a/content/posts/2008-08-28-canon-eos-50d-new-lens-announced.md b/content/posts/2008-08-28-canon-eos-50d-new-lens-announced.md index fb9ee98a..5ad127f2 100644 --- a/content/posts/2008-08-28-canon-eos-50d-new-lens-announced.md +++ b/content/posts/2008-08-28-canon-eos-50d-new-lens-announced.md @@ -1,18 +1,17 @@ --- -layout: post +type: post title: Canon EOS 50D And New Lens Officially Announced author: Matthias Kretschmann date: 2008-08-28 11:28:33+00:00 - -categories: -- photography + +category: photography --- [![EOS 50D back](../media/eos_50D_front_thumb.png)](../media/eos_50D_front.png)The successor of the EOS 40D is (almost) here: Canon [officially announced](http://www.usa.canon.com/templatedata/pressrelease/20080826_eos50d.html) the Canon EOS 50D along with the new lens Canon EF-S 18-200/3.5-5.6IS. The EOS 50D and the new lens will be both available in October 2008, Canon says. -The EOS 50D comes with an CMOS APS-C sized sensor (crop factor 1.6) with 15.1 megapixels. Being Canons first DSLR with the new DIGIC 4 image processor the EOS 50D can burst 6.3 shots per second with improved image quality. +The EOS 50D comes with an CMOS APS-C sized sensor (crop factor 1.6) with 15.1 megapixels. Being Canons first DSLR with the new DIGIC 4 image processor the EOS 50D can burst 6.3 shots per second with improved image quality. diff --git a/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md b/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md index be3f3f82..b4453b02 100644 --- a/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md +++ b/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md @@ -1,15 +1,14 @@ --- -layout: post +type: post title: 'A New Browser Is Coming: Google Chrome' author: Matthias Kretschmann image: ../media/googlechrome.png date: 2008-09-01 20:40:38+00:00 - -categories: -- design + +category: design tags: - google --- diff --git a/content/posts/2008-09-23-a-long-time-ago.md b/content/posts/2008-09-23-a-long-time-ago.md index 1c7b41bc..7c613785 100644 --- a/content/posts/2008-09-23-a-long-time-ago.md +++ b/content/posts/2008-09-23-a-long-time-ago.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: A Long Time Ago... image: ../media/A-Long-Time-Ago.jpg diff --git a/content/posts/2008-09-23-futurama-mars-university-wallpaper.md b/content/posts/2008-09-23-futurama-mars-university-wallpaper.md index 3181563b..be26eba6 100644 --- a/content/posts/2008-09-23-futurama-mars-university-wallpaper.md +++ b/content/posts/2008-09-23-futurama-mars-university-wallpaper.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: Futurama Mars University Wallpaper image: ../media/Teaser-Mars-U.jpg diff --git a/content/posts/2008-10-23-coffee-cup-icon.md b/content/posts/2008-10-23-coffee-cup-icon.md index 9a617d7c..ef5dc9aa 100644 --- a/content/posts/2008-10-23-coffee-cup-icon.md +++ b/content/posts/2008-10-23-coffee-cup-icon.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: Coffee Cup Icon image: ../media/Teaser-Coffee-Cup-Icon.jpg @@ -7,9 +7,8 @@ download: ../media/coffee_cup_by_kremalicious.zip author: Matthias Kretschmann date: 2008-10-23 14:59:23+00:00 - -categories: -- goodies + +category: goodies tags: - icon --- diff --git a/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md b/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md index 1ad8d914..2b6dee72 100644 --- a/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md +++ b/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md @@ -1,14 +1,13 @@ --- -layout: post +type: post title: The Finest Coffee Cups - Most Incredible Coffee Icons On The Web author: Matthias Kretschmann image: ../media/coffee-cup-icon-kremalicious.png date: 2008-10-23 02:23:39+00:00 - -categories: -- design + +category: design --- In this article I present you the finest icons of the fuel of a lot of designers and students (and other people too) available on the web. I've just released [my own coffee cup icon](/coffee-cup-icon) but this beverage seem to have inspired a lot of other beautiful icons especially for Mac OS X. diff --git a/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md b/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md index 70879947..fb569abf 100644 --- a/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md +++ b/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md @@ -1,14 +1,13 @@ --- -layout: post +type: post title: The Definite Guide To Watermarks In Apple Aperture author: Matthias Kretschmann image: ../media/watermark_aperture.jpg date: 2008-10-26 16:05:58+00:00 - -categories: -- photography + +category: photography tags: - aperture diff --git a/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md b/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md index 083696ed..0fe40ac1 100644 --- a/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md +++ b/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md @@ -1,14 +1,12 @@ --- -layout: post +type: post title: 'HowTo: Set A Custom Gravatar Image In Wordpress 2.7+' author: Matthias Kretschmann date: 2008-12-11 22:59:06+00:00 - -categories: -- design +category: design tags: - tutorial - wordpress diff --git a/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md b/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md index 825e54e8..5cd4205b 100644 --- a/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md +++ b/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md @@ -1,14 +1,12 @@ --- -layout: post +type: post title: 'HowTo: Styling Author Comments With Wordpress 2.7+' author: Matthias Kretschmann date: 2008-12-13 16:47:43+00:00 - -categories: -- design +category: design tags: - tutorial - wordpress diff --git a/content/posts/2009-01-05-the-mac-in-futurama.md b/content/posts/2009-01-05-the-mac-in-futurama.md index 485e74bb..69452607 100644 --- a/content/posts/2009-01-05-the-mac-in-futurama.md +++ b/content/posts/2009-01-05-the-mac-in-futurama.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: The Mac in Futurama author: Matthias Kretschmann diff --git a/content/posts/2009-02-01-portal-thingy.md b/content/posts/2009-02-01-portal-thingy.md index 018fe12a..9465cd4a 100644 --- a/content/posts/2009-02-01-portal-thingy.md +++ b/content/posts/2009-02-01-portal-thingy.md @@ -1,14 +1,13 @@ --- -layout: post +type: post title: 'Portal Thingy: matthiaskretschmann.com' image: ../media/ author: Matthias Kretschmann date: 2009-02-01 06:01:28+00:00 - -categories: -- personal + +category: personal --- @@ -29,7 +28,7 @@ But the sad thing I had to learn was that Internet Explorer 7 and Google Chrome 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. -For all other modern browsers beside those mentioned above the site should work well but you'll get the best viewing experience with [Safari](http://www.apple.com/safari/), [Firefox 3.1](http://www.mozilla.com/en-US/firefox/all-beta.html) or [Opera](http://www.opera.com/) (because of their [text-shadow support](http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/)). +For all other modern browsers beside those mentioned above the site should work well but you'll get the best viewing experience with [Safari](http://www.apple.com/safari/), [Firefox 3.1](http://www.mozilla.com/en-US/firefox/all-beta.html) or [Opera](http://www.opera.com/) (because of their [text-shadow support](http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/)). 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). diff --git a/content/posts/2009-02-17-out-of-whale-oil.md b/content/posts/2009-02-17-out-of-whale-oil.md index 2bc5676f..3dd048dd 100644 --- a/content/posts/2009-02-17-out-of-whale-oil.md +++ b/content/posts/2009-02-17-out-of-whale-oil.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: We Are Out Of Whale Oil image: ../media/Teaser-Out-Of-Whale-Oil.jpg diff --git a/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md b/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md index 7938ac73..840cd6ed 100644 --- a/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md +++ b/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: Ultimate Share Link Bonanza For Coda, Wordpress And Everything Else download: ../media/share-link-bonanza-coda-clips.zip @@ -7,9 +7,7 @@ author: Matthias Kretschmann date: 2009-03-29 23:12:15+00:00 - -categories: - - design +category: design tags: - tutorial - wordpress diff --git a/content/posts/2009-06-04-twitter-crisp.md b/content/posts/2009-06-04-twitter-crisp.md index 95ce8a80..fb88baf6 100644 --- a/content/posts/2009-06-04-twitter-crisp.md +++ b/content/posts/2009-06-04-twitter-crisp.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: Twitter Crisp image: ../media/Teaser-Twitter-Crisp.jpg @@ -7,9 +7,8 @@ download: ../media/twitter-crisp-by-kremalicious.zip author: Matthias Kretschmann date: 2009-06-04 00:16:40+00:00 - -categories: -- goodies + +category: goodies tags: - icon --- diff --git a/content/posts/2009-06-24-adiumeetie.md b/content/posts/2009-06-24-adiumeetie.md index f7ec35b2..40be2744 100644 --- a/content/posts/2009-06-24-adiumeetie.md +++ b/content/posts/2009-06-24-adiumeetie.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: Adiumeetie. Tweetie Style Adium Icon image: ../media/Teaser-Adiumeetie.jpg diff --git a/content/posts/2009-09-05-delibar.md b/content/posts/2009-09-05-delibar.md index 119ffe97..74435b20 100644 --- a/content/posts/2009-09-05-delibar.md +++ b/content/posts/2009-09-05-delibar.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: Delibar Interface Replacement Icons image: ../media/Teaser-Delibar-Icons.jpg @@ -7,9 +7,8 @@ download: ../media/delibar-by-kremalicious.zip author: Matthias Kretschmann date: 2009-09-05 19:07:31+00:00 - -categories: -- goodies + +category: goodies tags: - icon --- diff --git a/content/posts/2009-12-17-wordpress-post-thumbnails.md b/content/posts/2009-12-17-wordpress-post-thumbnails.md index 89f32bce..5a52963b 100644 --- a/content/posts/2009-12-17-wordpress-post-thumbnails.md +++ b/content/posts/2009-12-17-wordpress-post-thumbnails.md @@ -1,14 +1,12 @@ --- -layout: post +type: post title: Using The New Post Thumbnail Feature In WordPress 2.9 author: Matthias Kretschmann date: 2009-12-17 04:00:21+00:00 - -categories: - - design +category: design tags: - tutorial - wordpress diff --git a/content/posts/2010-02-04-ipixelpad.md b/content/posts/2010-02-04-ipixelpad.md index 10f9d5f1..19d36b4e 100644 --- a/content/posts/2010-02-04-ipixelpad.md +++ b/content/posts/2010-02-04-ipixelpad.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: iPixelPad - Tongue Twisting But Crisp iPad Icons image: ../media/Teaser-iPixelPad.png @@ -7,9 +7,8 @@ download: ../media/ipixelpad_by_kremalicious.zip author: Matthias Kretschmann date: 2010-02-04 15:21:42+00:00 - -categories: -- goodies + +category: goodies tags: - icon diff --git a/content/posts/2010-03-27-office-desk.md b/content/posts/2010-03-27-office-desk.md index 0bb23163..2f1a4c1b 100644 --- a/content/posts/2010-03-27-office-desk.md +++ b/content/posts/2010-03-27-office-desk.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Office Desk image: ../media/Office-Desk.jpg @@ -7,11 +7,7 @@ author: Matthias Kretschmann date: 2010-03-27 21:31:35+00:00 - -categories: -- photos -post_format: -- Image +category: photos --- Lost in this gorgeous figure. East Indian Rosewood, FTW! diff --git a/content/posts/2010-07-03-momcorp.md b/content/posts/2010-07-03-momcorp.md index 569d3c5c..d55076ed 100644 --- a/content/posts/2010-07-03-momcorp.md +++ b/content/posts/2010-07-03-momcorp.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: MomCorp Wallpaper image: ../media/Teaser-MomCorp-Wall.png diff --git a/content/posts/2010-07-18-typeface-condoms.md b/content/posts/2010-07-18-typeface-condoms.md index 3c6fdd00..09bb3eeb 100644 --- a/content/posts/2010-07-18-typeface-condoms.md +++ b/content/posts/2010-07-18-typeface-condoms.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: Typeface condoms image: ../media/Typeface-condoms.jpg author: Matthias Kretschmann date: 2010-07-18 20:28:33+00:00 - -categories: -- photos -post_format: -- Image + +category: photos --- Burg Giebichenstein Hochschule für Kunst & Design Halle Jahresausstellung 2010, Campus Design diff --git a/content/posts/2010-08-07-bonsai.md b/content/posts/2010-08-07-bonsai.md index b682a79b..f1118f11 100644 --- a/content/posts/2010-08-07-bonsai.md +++ b/content/posts/2010-08-07-bonsai.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: Bonsai image: ../media/Bonsai-5-Version-2.jpg author: Matthias Kretschmann date: 2010-08-07 20:23:31+00:00 - -categories: -- photos -post_format: -- Image + +category: photos --- Still needs a cut diff --git a/content/posts/2010-09-01-gdr-helvetica.md b/content/posts/2010-09-01-gdr-helvetica.md index f69dbb8b..3106e8e8 100644 --- a/content/posts/2010-09-01-gdr-helvetica.md +++ b/content/posts/2010-09-01-gdr-helvetica.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: GDR Helvetica image: ../media/GDR-Helvetica.jpg author: Matthias Kretschmann date: 2010-09-01 20:21:43+00:00 - -categories: -- photos -post_format: -- Image + +category: photos --- Must be socialist Helvetica or something diff --git a/content/posts/2010-12-11-iphone-coasters.md b/content/posts/2010-12-11-iphone-coasters.md index b62945a8..b7c59f78 100644 --- a/content/posts/2010-12-11-iphone-coasters.md +++ b/content/posts/2010-12-11-iphone-coasters.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: iPhone Coasters image: ../media/iPhone-Coasters-1-Version-2.jpg author: Matthias Kretschmann date: 2010-12-11 21:19:29+00:00 - -categories: -- photos -post_format: -- Image + +category: photos --- Putting stuff under my coffee, iOS style. That's the "Home Set" from [iphoneappscoasters.com](http://iphoneappscoasters.com) diff --git a/content/posts/2010-12-29-basically-the-monolith-is-on-my-desk.md b/content/posts/2010-12-29-basically-the-monolith-is-on-my-desk.md index 9fe15f90..9c7dbca8 100644 --- a/content/posts/2010-12-29-basically-the-monolith-is-on-my-desk.md +++ b/content/posts/2010-12-29-basically-the-monolith-is-on-my-desk.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: Basically, The Monolith Is On My Desk image: ../media/Basically-The-Monolith-Is-On-My-Desk.jpg author: Matthias Kretschmann date: 2010-12-29 15:47:12+00:00 - -categories: -- photos -post_format: -- Image + +category: photos --- Be careful: your mind will get blown when you stare at it for too long. TMA-1 Action Figure from [ThinkGeek](http://thinkgeek.com) diff --git a/content/posts/2010-12-29-free-monkey-breath-not-soylent-green.md b/content/posts/2010-12-29-free-monkey-breath-not-soylent-green.md index 0bfb880e..cbacd04a 100644 --- a/content/posts/2010-12-29-free-monkey-breath-not-soylent-green.md +++ b/content/posts/2010-12-29-free-monkey-breath-not-soylent-green.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: Free Monkey Breath, Not Soylent Green image: ../media/Free-Monkey-Breath-Not-Soylent-Green.jpg author: Matthias Kretschmann date: 2010-12-29 21:16:55+00:00 - -categories: -- photos -post_format: -- Image + +category: photos --- Don't know where to start outlining why this is an awesome geeky bag diff --git a/content/posts/2011-01-08-enjoying-paper.md b/content/posts/2011-01-08-enjoying-paper.md index bc0de1e8..c1b9e775 100644 --- a/content/posts/2011-01-08-enjoying-paper.md +++ b/content/posts/2011-01-08-enjoying-paper.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: Enjoying Paper image: ../media/Enjoying-Paper.jpg author: Matthias Kretschmann date: 2011-01-08 15:43:14+00:00 - -categories: -- photos -post_format: -- Image + +category: photos --- Being a kid again and enjoying the package of a present (Thanks Dad!) diff --git a/content/posts/2011-01-08-glowing-star-inside.md b/content/posts/2011-01-08-glowing-star-inside.md index a4793415..b938a8ab 100644 --- a/content/posts/2011-01-08-glowing-star-inside.md +++ b/content/posts/2011-01-08-glowing-star-inside.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: Glowing Star Inside image: ../media/Glowing-Star-Inside.jpg author: Matthias Kretschmann date: 2011-01-08 15:45:26+00:00 - -categories: -- photos -post_format: -- Image + +category: photos --- Thanks Dad! diff --git a/content/posts/2011-01-18-historic-flood-levels.md b/content/posts/2011-01-18-historic-flood-levels.md index 7fd69263..93d1478d 100644 --- a/content/posts/2011-01-18-historic-flood-levels.md +++ b/content/posts/2011-01-18-historic-flood-levels.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: Historic Flood Levels image: ../media/Historic-Flood-Levels.jpg author: Matthias Kretschmann date: 2011-01-18 15:40:12+00:00 - -categories: -- photos -post_format: -- Image + +category: photos --- dates ranging from 16th - 19th century diff --git a/content/posts/2011-10-11-broken-nexus-s-screen.md b/content/posts/2011-10-11-broken-nexus-s-screen.md index 94f2ff8c..e10b69a1 100644 --- a/content/posts/2011-10-11-broken-nexus-s-screen.md +++ b/content/posts/2011-10-11-broken-nexus-s-screen.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: Broken Nexus S Screen image: ../media/Broken-Nexus-S-Screen.jpg author: Matthias Kretschmann date: 2011-10-11 14:37:06+00:00 - -categories: -- photos -post_format: -- Image + +category: photos --- The good thing is it looks really cool, the bad thing is I can't use the screen anymore. diff --git a/content/posts/2011-12-15-badged.md b/content/posts/2011-12-15-badged.md index ef4833f3..f1e97d06 100644 --- a/content/posts/2011-12-15-badged.md +++ b/content/posts/2011-12-15-badged.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: Badged - iOS Style Notification Badges for WordPress image: ../media/Badged-Teaser-kremalicious@2x.png @@ -7,11 +7,11 @@ author: Matthias Kretschmann updated: 2014-10-11 07:56:46+00:00 date: 2011-12-15 07:56:46+00:00 - + category: goodies tags: - - wordpress +- wordpress coinhive: true --- diff --git a/content/posts/2012-02-26-mk-v2.md b/content/posts/2012-02-26-mk-v2.md index f119b4e0..f71b30a3 100644 --- a/content/posts/2012-02-26-mk-v2.md +++ b/content/posts/2012-02-26-mk-v2.md @@ -1,14 +1,13 @@ --- -layout: post +type: post title: Personal Site v2 image: ../media/mkv2.jpg author: Matthias Kretschmann date: 2012-02-26 21:29:54+00:00 - -categories: -- personal + +category: personal --- Today I finally launched v2 of my personal site, still following the concept of a business card web site but with a portfolio added to it. You should totally [have a look](http://matthiaskretschmann.com). @@ -39,19 +38,19 @@ But it's interesting to see how different the rendering of the site is in some m - + * [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) diff --git a/content/posts/2012-03-04-relaxing-cat.md b/content/posts/2012-03-04-relaxing-cat.md index 072c3e9f..dc9f7c27 100644 --- a/content/posts/2012-03-04-relaxing-cat.md +++ b/content/posts/2012-03-04-relaxing-cat.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: Relaxing Cat image: ../media/7f9397a265d811e1b9f1123138140926_7.jpg author: Matthias Kretschmann date: 2012-03-04 08:00:32+00:00 - -categories: -- photos -post_format: -- Image + +category: photos tags: - instagram - sitamun diff --git a/content/posts/2012-04-03-blaue-turme.md b/content/posts/2012-04-03-blaue-turme.md index 3a507001..2a223339 100644 --- a/content/posts/2012-04-03-blaue-turme.md +++ b/content/posts/2012-04-03-blaue-turme.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: Blaue Türme image: ../media/Blaue-Tuerme-1.jpg author: Matthias Kretschmann date: 2012-04-03 12:41:01+00:00 - -categories: -- photos -post_format: -- Image + +category: photos --- [Photo on 500px](http://500px.com/photo/6350862) | [Photo on Flickr](http://www.flickr.com/photos/krema/6904523272/in/photostream) diff --git a/content/posts/2012-04-03-skeletor.md b/content/posts/2012-04-03-skeletor.md index 3c52ac40..04ab523b 100644 --- a/content/posts/2012-04-03-skeletor.md +++ b/content/posts/2012-04-03-skeletor.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: Skeletor image: ../media/6313cc1e7db611e180c9123138016265_7.jpg author: Matthias Kretschmann date: 2012-04-03 17:56:49+00:00 - -categories: -- photos -post_format: -- Image + +category: photos tags: - instagram --- diff --git a/content/posts/2012-04-03-train-station-leipzig.md b/content/posts/2012-04-03-train-station-leipzig.md index 8367714b..cb65b23d 100644 --- a/content/posts/2012-04-03-train-station-leipzig.md +++ b/content/posts/2012-04-03-train-station-leipzig.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: Train Station Leipzig image: ../media/de2ac24c7db911e1b9f1123138140926_7.jpg author: Matthias Kretschmann date: 2012-04-03 18:21:44+00:00 - -categories: -- photos -post_format: -- Image + +category: photos tags: - instagram --- diff --git a/content/posts/2012-04-04-android-tab-conundrum.md b/content/posts/2012-04-04-android-tab-conundrum.md index 18ba73cf..500bc150 100644 --- a/content/posts/2012-04-04-android-tab-conundrum.md +++ b/content/posts/2012-04-04-android-tab-conundrum.md @@ -1,14 +1,11 @@ --- author: Matthias Kretschmann date: 2012-04-04 14:24:30+00:00 -layout: post +type: post title: The Android Tab Bar Conundrum. Again. image: ../media/tabs_overview.png - - -categories: - - design +category: design tags: - android --- diff --git a/content/posts/2012-04-05-current-sushi-status.md b/content/posts/2012-04-05-current-sushi-status.md index 0fc8d57b..96a122b4 100644 --- a/content/posts/2012-04-05-current-sushi-status.md +++ b/content/posts/2012-04-05-current-sushi-status.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: Current Sushi Status image: ../media/aff38e2c7f5311e1b10e123138105d6b_7.jpg author: Matthias Kretschmann date: 2012-04-05 19:15:20+00:00 - -categories: -- photos -post_format: -- Image + +category: photos tags: - instagram --- diff --git a/content/posts/2012-04-07-buna.md b/content/posts/2012-04-07-buna.md index e269ab2b..0d4acf06 100644 --- a/content/posts/2012-04-07-buna.md +++ b/content/posts/2012-04-07-buna.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: Buna image: ../media/44af28f2805b11e18cf91231380fd29b_7.jpg author: Matthias Kretschmann date: 2012-04-07 02:42:08+00:00 - -categories: -- photos -post_format: -- Image + +category: photos tags: - instagram --- diff --git a/content/posts/2012-04-07-cat-enjoying-a-good-ipad-game.md b/content/posts/2012-04-07-cat-enjoying-a-good-ipad-game.md index 93140844..f70e6bb6 100644 --- a/content/posts/2012-04-07-cat-enjoying-a-good-ipad-game.md +++ b/content/posts/2012-04-07-cat-enjoying-a-good-ipad-game.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: Cat enjoying a good iPad game image: ../media/7838011c80ce11e19e4a12313813ffc0_7.jpg author: Matthias Kretschmann date: 2012-04-07 16:26:46+00:00 - -categories: -- photos -post_format: -- Image + +category: photos tags: - instagram --- diff --git a/content/posts/2012-04-07-ipad-porn.md b/content/posts/2012-04-07-ipad-porn.md index f22c250d..750050d1 100644 --- a/content/posts/2012-04-07-ipad-porn.md +++ b/content/posts/2012-04-07-ipad-porn.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: iPad Porn image: ../media/97a44d6080b711e181bd12313817987b_7.jpg author: Matthias Kretschmann date: 2012-04-07 13:43:00+00:00 - -categories: -- photos -post_format: -- Image + +category: photos tags: - instagram diff --git a/content/posts/2012-04-07-opera.md b/content/posts/2012-04-07-opera.md index 1848cd38..595503d0 100644 --- a/content/posts/2012-04-07-opera.md +++ b/content/posts/2012-04-07-opera.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: Opera image: ../media/5df6e0a280c911e1a87612313804ec91_7.jpg author: Matthias Kretschmann date: 2012-04-07 15:50:15+00:00 - -categories: -- photos -post_format: -- Image + +category: photos tags: - instagram --- diff --git a/content/posts/2012-04-08-common-kitchen-decoration.md b/content/posts/2012-04-08-common-kitchen-decoration.md index 74bc90d6..427681e7 100644 --- a/content/posts/2012-04-08-common-kitchen-decoration.md +++ b/content/posts/2012-04-08-common-kitchen-decoration.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: Common kitchen decoration image: ../media/2ba6eeba81b111e1989612313815112c_7.jpg author: Matthias Kretschmann date: 2012-04-08 19:29:33+00:00 - -categories: -- photos -post_format: -- Image + +category: photos tags: - instagram --- diff --git a/content/posts/2012-04-08-graffiti-old-school-style.md b/content/posts/2012-04-08-graffiti-old-school-style.md index d64807a1..7cd629f6 100644 --- a/content/posts/2012-04-08-graffiti-old-school-style.md +++ b/content/posts/2012-04-08-graffiti-old-school-style.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: Graffiti, old school style image: ../media/7e2b28f881b711e1af7612313813f8e8_7.jpg author: Matthias Kretschmann date: 2012-04-08 20:14:49+00:00 - -categories: -- photos -post_format: -- Image + +category: photos tags: - instagram --- diff --git a/content/posts/2012-04-20-the-origins-of-the-blink-tag.md b/content/posts/2012-04-20-the-origins-of-the-blink-tag.md index ced0403c..91a56ee9 100644 --- a/content/posts/2012-04-20-the-origins-of-the-blink-tag.md +++ b/content/posts/2012-04-20-the-origins-of-the-blink-tag.md @@ -1,16 +1,13 @@ --- -layout: link +type: link title: The origins of the <blink> tag linkurl: http://www.montulli.org/theoriginofthe%3Cblink%3Etag author: Matthias Kretschmann date: 2012-04-20 08:48:46+00:00 - -categories: -- design -post_format: -- Link + +category: design tags: - history --- diff --git a/content/posts/2012-04-30-announcing-sketch2.md b/content/posts/2012-04-30-announcing-sketch2.md index 75f06cbf..ac90454b 100644 --- a/content/posts/2012-04-30-announcing-sketch2.md +++ b/content/posts/2012-04-30-announcing-sketch2.md @@ -1,16 +1,13 @@ --- -layout: link +type: link title: Announcing Sketch 2.0 linkurl: http://www.bohemiancoding.com/about/blog/announcing-sketch-2-0/ author: Matthias Kretschmann date: 2012-04-30 12:37:05+00:00 - -categories: -- design -post_format: -- Link + +category: design --- Remarkable update to Bohemian Coding's [Sketch](http://bohemiancoding.com/sketch) app. It's like Photoshop but with only the UI design related features included: diff --git a/content/posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md b/content/posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md index 7cf9e418..7368cfdb 100644 --- a/content/posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md +++ b/content/posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md @@ -1,16 +1,13 @@ --- -layout: link +type: link title: A call for open, free access to academic research linkurl: http://www.guardian.co.uk/commentisfree/2012/may/01/open-free-access-academic-research author: Matthias Kretschmann date: 2012-05-02 03:12:40+00:00 - -categories: -- links -post_format: -- Link + +category: links --- David Willetts, a minister of state for universities and science in the UK, is calling for more open access in academics: diff --git a/content/posts/2012-05-03-antique-chrome.md b/content/posts/2012-05-03-antique-chrome.md index cf640e21..32d79a8d 100644 --- a/content/posts/2012-05-03-antique-chrome.md +++ b/content/posts/2012-05-03-antique-chrome.md @@ -1,19 +1,16 @@ --- -layout: photo +type: photo title: Antique Chrome image: ../media/5fc688aa953811e180c9123138016265_7.jpg author: Matthias Kretschmann date: 2012-05-03 15:55:15+00:00 - -categories: -- photos -post_format: -- Image + +category: photos tags: - instagram --- -from [Instagram](http://instagr.am), posted with [Instagrate to WordPress](http://www.polevaultweb.com/plugins/instagrate-to-wordpress/) +from [Instagram](http://instagr.am), posted with [Instagrate to WordPress](http://www.polevaultweb.com/plugins/instagrate-to-wordpress/) diff --git a/content/posts/2012-05-04-world-press-photo-2012.md b/content/posts/2012-05-04-world-press-photo-2012.md index 7a9152f4..9842d04e 100644 --- a/content/posts/2012-05-04-world-press-photo-2012.md +++ b/content/posts/2012-05-04-world-press-photo-2012.md @@ -1,20 +1,17 @@ --- -layout: link +type: link title: World Press Photo 2012 linkurl: http://www.worldpressphoto.org/gallery/2012-world-press-photo author: Matthias Kretschmann date: 2012-05-04 13:12:54+00:00 - -categories: -- photography -post_format: -- Link + +category: photography tags: - photojournalism --- -The winners of the 2012 contest were announced and the [winner gallery](http://www.worldpressphoto.org/gallery/2012-world-press-photo) is worth checking out. +The winners of the 2012 contest were announced and the [winner gallery](http://www.worldpressphoto.org/gallery/2012-world-press-photo) is worth checking out. This years [winner, dubbed Photo Of The Year 2011](http://www.worldpressphoto.org/photo/world-press-photo-year-2011-0), comes from Spanish photographer [Samuel Aranda](http://www.samuelaranda.net/). diff --git a/content/posts/2012-05-09-media-query-asset-downloading-results.md b/content/posts/2012-05-09-media-query-asset-downloading-results.md index 860a87ae..72bd5500 100644 --- a/content/posts/2012-05-09-media-query-asset-downloading-results.md +++ b/content/posts/2012-05-09-media-query-asset-downloading-results.md @@ -1,16 +1,13 @@ --- -layout: link +type: link title: Media Query & Asset Downloading Results linkurl: http://timkadlec.com/2012/04/media-query-asset-downloading-results/ author: Matthias Kretschmann date: 2012-05-09 09:48:19+00:00 - -categories: -- design -post_format: -- Link + +category: design tags: - responsive - retina diff --git a/content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md b/content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md index 2f5f5c38..f4dfd838 100644 --- a/content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md +++ b/content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md @@ -1,16 +1,13 @@ --- -layout: link +type: link title: Nielsen vs Clark – they're both wrong linkurl: http://netmagazine.com/opinions/nielsen-vs-clark-theyre-both-wrong author: Matthias Kretschmann date: 2012-05-12 13:19:02+00:00 - -categories: -- design -post_format: -- Link + +category: design tags: - mobile - responsive diff --git a/content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md b/content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md index 54dcd5de..93640b96 100644 --- a/content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md +++ b/content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md @@ -1,16 +1,13 @@ --- -layout: link +type: link title: Which responsive images solution should you use? linkurl: http://css-tricks.com/which-responsive-images-solution-should-you-use/ author: Matthias Kretschmann date: 2012-05-12 17:52:53+00:00 - -categories: -- design -post_format: -- Link + +category: design tags: - mobile - responsive diff --git a/content/posts/2012-05-14-welcome-to-kremalicious2.md b/content/posts/2012-05-14-welcome-to-kremalicious2.md index 69c583cf..716e37e8 100644 --- a/content/posts/2012-05-14-welcome-to-kremalicious2.md +++ b/content/posts/2012-05-14-welcome-to-kremalicious2.md @@ -1,15 +1,14 @@ --- -layout: post +type: post title: Welcome to kremalicious2 image: ../media/kremalicious2-teaser.jpg author: Matthias Kretschmann date: 2012-05-14 19:33:22+00:00 - -categories: - - personal + +category: personal tags: - wordpress --- diff --git a/content/posts/2012-05-15-wp-icons-template.md b/content/posts/2012-05-15-wp-icons-template.md index 153c97d2..3f6c4fac 100644 --- a/content/posts/2012-05-15-wp-icons-template.md +++ b/content/posts/2012-05-15-wp-icons-template.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: WordPress Admin Icons Template image: ../media/kremalicious-Teaser-WP-Icon-Template.png @@ -8,13 +8,12 @@ author: Matthias Kretschmann date: 2012-05-15 16:00:44+00:00 -categories: - - design - - goodies +category: design tags: - - boilerplate - - tutorial - - wordpress +- goodies +- boilerplate +- tutorial +- wordpress coinhive: true diff --git a/content/posts/2012-05-21-why-comic-sans.md b/content/posts/2012-05-21-why-comic-sans.md index 4dd68acf..22be4432 100644 --- a/content/posts/2012-05-21-why-comic-sans.md +++ b/content/posts/2012-05-21-why-comic-sans.md @@ -1,16 +1,13 @@ --- -layout: link +type: link title: Why Comic Sans? linkurl: http://www.connare.com/whycomic.htm author: Matthias Kretschmann date: 2012-05-21 21:18:17+00:00 - -categories: -- design -post_format: -- Link + +category: design tags: - typography --- diff --git a/content/posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md b/content/posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md index ee9cc6e0..384376fc 100644 --- a/content/posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md +++ b/content/posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md @@ -1,16 +1,13 @@ --- -layout: link +type: link title: How Yahoo Killed Flickr and Lost the Internet linkurl: http://gizmodo.com/5910223/how-yahoo-killed-flickr-and-lost-the-internet author: Matthias Kretschmann date: 2012-05-22 01:00:03+00:00 - -categories: -- photography -post_format: -- Link + +category: photography --- Great insight article into what and how exactly Yahoo managed to screw this up. diff --git a/content/posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md b/content/posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md index aba93cab..b5337320 100644 --- a/content/posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md +++ b/content/posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md @@ -1,16 +1,13 @@ --- -layout: link +type: link title: Responsive Images and Web Standards at the Turning Point linkurl: http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/ author: Matthias Kretschmann date: 2012-05-22 06:23:26+00:00 - -categories: -- design -post_format: -- Link + +category: design tags: - mobile - responsive diff --git a/content/posts/2012-05-23-like-modern-heating-only-more-badass.md b/content/posts/2012-05-23-like-modern-heating-only-more-badass.md index a616ac84..0ade6097 100644 --- a/content/posts/2012-05-23-like-modern-heating-only-more-badass.md +++ b/content/posts/2012-05-23-like-modern-heating-only-more-badass.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: Like modern heating only more badass image: ../media/41b5a454a43811e1989612313815112c_7.jpeg author: Matthias Kretschmann date: 2012-05-23 14:23:38+00:00 - -categories: -- photos -post_format: -- Image + +category: photos tags: - instagram --- diff --git a/content/posts/2012-05-26-html-for-icon-font-usage.md b/content/posts/2012-05-26-html-for-icon-font-usage.md index 7bdde080..767f793c 100644 --- a/content/posts/2012-05-26-html-for-icon-font-usage.md +++ b/content/posts/2012-05-26-html-for-icon-font-usage.md @@ -1,16 +1,13 @@ --- -layout: link +type: link title: HTML for Icon Font Usage linkurl: http://css-tricks.com/html-for-icon-font-usage/ author: Matthias Kretschmann date: 2012-05-26 05:13:58+00:00 - -categories: -- design -post_format: -- Link + +category: design --- Chris Coyier on an accessible implementation for icon fonts: diff --git a/content/posts/2012-05-27-balloon.md b/content/posts/2012-05-27-balloon.md index 185f904e..294b200e 100644 --- a/content/posts/2012-05-27-balloon.md +++ b/content/posts/2012-05-27-balloon.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: Balloon image: ../media/690fe368a81911e1b2fe1231380205bf_7.jpg author: Matthias Kretschmann date: 2012-05-27 17:16:11+00:00 - -categories: -- photos -post_format: -- Image + +category: photos tags: - instagram --- diff --git a/content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md b/content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md index ee4634ff..c0d7c21e 100644 --- a/content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md +++ b/content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md @@ -1,16 +1,13 @@ --- -layout: link +type: link title: Can We Please Move Past Apple's Silly, Faux-Real UIs? linkurl: http://www.fastcodesign.com/1669879/can-we-please-move-past-apples-silly-faux-real-uis author: Matthias Kretschmann date: 2012-06-05 16:25:56+00:00 - -categories: -- design -post_format: -- Link + +category: design --- Much has been written about the good and bad of skeuomorphism. Tom Hobbs wrote a [great piece](http://www.fastcodesign.com/1669879/can-we-please-move-past-apples-silly-faux-real-uis) putting everything together. diff --git a/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md b/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md index 0a56695a..923867ec 100644 --- a/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md +++ b/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md @@ -1,14 +1,13 @@ --- -layout: post +type: post title: Retina icons in WordPress 3.4 author: Matthias Kretschmann date: 2012-06-13 19:01:20+00:00 - -categories: - - design + +category: design tags: - wordpress diff --git a/content/posts/2012-06-27-typography-window.md b/content/posts/2012-06-27-typography-window.md index 6472d9cc..22a5235e 100644 --- a/content/posts/2012-06-27-typography-window.md +++ b/content/posts/2012-06-27-typography-window.md @@ -1,17 +1,14 @@ --- -layout: photo +type: photo title: Typography window image: ../media/80a136dabff711e188131231381b5c25_7.jpg author: Matthias Kretschmann date: 2012-06-27 01:29:13+00:00 - -categories: -- photos -post_format: -- Image + +category: photos --- -from Instagram +from Instagram diff --git a/content/posts/2012-06-30-why-files-exist.md b/content/posts/2012-06-30-why-files-exist.md index 5ca8a347..e9f4b6f2 100644 --- a/content/posts/2012-06-30-why-files-exist.md +++ b/content/posts/2012-06-30-why-files-exist.md @@ -1,16 +1,13 @@ --- -layout: link +type: link title: Why Files exist linkurl: http://blog.filepicker.io/post/26157006600/why-files-exist author: Matthias Kretschmann date: 2012-06-30 18:17:33+00:00 - -categories: -- design -post_format: -- Link + +category: design --- [This](http://blog.filepicker.io/post/26157006600/why-files-exist) has been said many times, but it bears repeating: diff --git a/content/posts/2012-07-04-newton-reconsidered.md b/content/posts/2012-07-04-newton-reconsidered.md index 40fcf791..babfca1e 100644 --- a/content/posts/2012-07-04-newton-reconsidered.md +++ b/content/posts/2012-07-04-newton-reconsidered.md @@ -1,16 +1,13 @@ --- -layout: link +type: link title: Newton, Reconsidered linkurl: http://techland.time.com/2012/06/01/newton-reconsidered/ author: Matthias Kretschmann date: 2012-07-04 01:19:17+00:00 - -categories: -- design -post_format: -- Link + +category: design tags: - apple - newton @@ -20,6 +17,6 @@ Skeuomorphism on mobile devices has come a long way: > Using a second unit, Steve Capps, one of Newton’s creators, showed how you could use it to order a pizza by moving topping icons onto a pie and then sending out a fax. In 1992, that was show-stopping stuff. -But instead of another Newton history article, this one is an interesting "hands-on assessment" of Apple's first PDA. Almost 20 years after its release, Harry McCracken got himself a fully working MessagePad H1000 over eBay and tested it. +But instead of another Newton history article, this one is an interesting "hands-on assessment" of Apple's first PDA. Almost 20 years after its release, Harry McCracken got himself a fully working MessagePad H1000 over eBay and tested it. Would be interesting to know if the same could be done with an iPhone 4S or Galaxy Nexus in 2032. I doubt it. diff --git a/content/posts/2012-07-07-what-makes-twitter-twitter.md b/content/posts/2012-07-07-what-makes-twitter-twitter.md index d111dc0f..9937076d 100644 --- a/content/posts/2012-07-07-what-makes-twitter-twitter.md +++ b/content/posts/2012-07-07-what-makes-twitter-twitter.md @@ -1,16 +1,13 @@ --- -layout: link +type: link title: What makes Twitter Twitter? linkurl: http://alt.adrianshort.co.uk/blog/2012/06/30/what-makes-twitter-twitter/ author: Matthias Kretschmann date: 2012-07-07 08:18:58+00:00 - -categories: -- links -post_format: -- Link + +category: links --- Couldn't agree more: diff --git a/content/posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md b/content/posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md index 2fbbb413..ef24531b 100644 --- a/content/posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md +++ b/content/posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md @@ -1,16 +1,13 @@ --- -layout: link +type: link title: 'Crossdressing, Compression and Colliders: The First Photo on the Web' linkurl: http://motherboard.vice.com/2012/7/10/crossdressing-compression-and-colliders-the-first-photo-on-the-web author: Matthias Kretschmann date: 2012-07-11 21:00:07+00:00 - -categories: -- photography -post_format: -- Link + +category: photography tags: - history --- diff --git a/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md b/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md index b24e3557..589fd066 100644 --- a/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md +++ b/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md @@ -1,13 +1,12 @@ --- -layout: post +type: post title: Add your web site to the Windows 8 Metro UI image: ../media/kremalicious-Teaser-Metro-Tile.jpg author: Matthias Kretschmann date: 2012-07-15 16:19:55+00:00 - -categories: -- design + +category: design tags: - icon - windows diff --git a/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md index 3fabc79b..75d0c461 100644 --- a/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md +++ b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: Using for fun and profit image: ./kremalicious-kbdfun-teaser.png @@ -8,9 +8,7 @@ author: Matthias Kretschmann featured: true date: 2012-07-16 14:36:58+00:00 -categories: - - design - - goodies +category: design tags: - css diff --git a/content/posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md b/content/posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md index 71047b90..acdb5eed 100644 --- a/content/posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md +++ b/content/posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md @@ -1,16 +1,13 @@ --- -layout: link +type: link title: First computer generated graphics film from 1963 linkurl: http://techchannel.att.com/play-video.cfm/2012/7/18/AT&T-Archives-First-Computer-Generated-Graphics-Film author: Matthias Kretschmann date: 2012-07-19 12:30:56+00:00 - -categories: -- design -post_format: -- Link + +category: design tags: - history --- diff --git a/content/posts/2012-07-20-mmmmh-coffee.md b/content/posts/2012-07-20-mmmmh-coffee.md index d13defa7..56a81b0b 100644 --- a/content/posts/2012-07-20-mmmmh-coffee.md +++ b/content/posts/2012-07-20-mmmmh-coffee.md @@ -1,17 +1,14 @@ --- -layout: photo +type: photo title: Mmmmh, Coffee image: ../media/66a6e0c0d25a11e1a94522000a1e8aaf_7.jpg author: Matthias Kretschmann date: 2012-07-20 11:02:30+00:00 - -categories: -- photos -post_format: -- Image + +category: photos --- -from Instagram +from Instagram diff --git a/content/posts/2012-08-07-projectpurple.md b/content/posts/2012-08-07-projectpurple.md index f304a96d..f7a6f77c 100644 --- a/content/posts/2012-08-07-projectpurple.md +++ b/content/posts/2012-08-07-projectpurple.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: Project Purple image: ../media/Teaser-Project-Purple.png diff --git a/content/posts/2012-08-08-amazingly-early.md b/content/posts/2012-08-08-amazingly-early.md index f1026ae5..14d652c6 100644 --- a/content/posts/2012-08-08-amazingly-early.md +++ b/content/posts/2012-08-08-amazingly-early.md @@ -1,17 +1,14 @@ --- -layout: photo +type: photo title: Amazingly early image: ../media/2ca7a094e10f11e1868c12313817a130_7.jpg author: Matthias Kretschmann date: 2012-08-08 04:11:48+00:00 - -categories: -- photos -post_format: -- Image + +category: photos --- -from Instagram +from Instagram diff --git a/content/posts/2012-08-20-im-joining-ezeep.md b/content/posts/2012-08-20-im-joining-ezeep.md index 725572fc..cdaee777 100644 --- a/content/posts/2012-08-20-im-joining-ezeep.md +++ b/content/posts/2012-08-20-im-joining-ezeep.md @@ -1,14 +1,13 @@ --- -layout: post +type: post title: I'm joining ezeep image: ../media/kremalicious-Teaser-ezeep.png author: Matthias Kretschmann date: 2012-08-20 14:12:11+00:00 - -categories: -- personal + +category: personal tags: - ezeep --- diff --git a/content/posts/2012-08-25-so-much-room.md b/content/posts/2012-08-25-so-much-room.md index b9ef665f..27dafcd3 100644 --- a/content/posts/2012-08-25-so-much-room.md +++ b/content/posts/2012-08-25-so-much-room.md @@ -1,17 +1,14 @@ --- -layout: photo +type: photo title: So much room image: ../media/c0c45b6eeea211e1ad8e22000a1cdbb8_7.jpg author: Matthias Kretschmann date: 2012-08-25 10:50:58+00:00 - -categories: -- photos -post_format: -- Image + +category: photos --- -from Instagram +from Instagram diff --git a/content/posts/2012-09-07-huge-station-is-huge.md b/content/posts/2012-09-07-huge-station-is-huge.md index 2516c06e..358fc478 100644 --- a/content/posts/2012-09-07-huge-station-is-huge.md +++ b/content/posts/2012-09-07-huge-station-is-huge.md @@ -1,17 +1,14 @@ --- -layout: photo +type: photo title: Huge station is huge image: ../media/619b3900f92911e1a31922000a1cddf1_7.jpg author: Matthias Kretschmann date: 2012-09-07 20:19:52+00:00 - -categories: -- photos -post_format: -- Image + +category: photos --- -from Instagram +from Instagram diff --git a/content/posts/2012-09-10-subway-firefox.md b/content/posts/2012-09-10-subway-firefox.md index c54a879c..b9290ef1 100644 --- a/content/posts/2012-09-10-subway-firefox.md +++ b/content/posts/2012-09-10-subway-firefox.md @@ -1,17 +1,14 @@ --- -layout: photo +type: photo title: Subway Firefox image: ../media/84f9d2c4fb7411e19ca422000a1d0119_7.jpg author: Matthias Kretschmann date: 2012-09-10 18:22:46+00:00 - -categories: -- photos -post_format: -- Image + +category: photos --- -from Instagram +from Instagram diff --git a/content/posts/2012-09-12-sweet-typography.md b/content/posts/2012-09-12-sweet-typography.md index a4f0390a..e31f5d12 100644 --- a/content/posts/2012-09-12-sweet-typography.md +++ b/content/posts/2012-09-12-sweet-typography.md @@ -1,17 +1,14 @@ --- -layout: photo +type: photo title: Sweet typography image: ../media/01f8b0b8fcc611e19b5b123138140bce_7.jpg author: Matthias Kretschmann date: 2012-09-12 10:38:36+00:00 - -categories: -- photos -post_format: -- Image + +category: photos --- -from Instagram +from Instagram diff --git a/content/posts/2012-09-14-bvg-dos.md b/content/posts/2012-09-14-bvg-dos.md index e0a61368..b9439e6d 100644 --- a/content/posts/2012-09-14-bvg-dos.md +++ b/content/posts/2012-09-14-bvg-dos.md @@ -1,17 +1,14 @@ --- -layout: photo +type: photo title: BVG DOS image: ../media/6c4003f2fe9911e1ae9122000a1e9e21_7.jpg author: Matthias Kretschmann date: 2012-09-14 18:24:29+00:00 - -categories: -- photos -post_format: -- Image + +category: photos --- -from Instagram +from Instagram diff --git a/content/posts/2012-09-26-designing-with-code.md b/content/posts/2012-09-26-designing-with-code.md index 08d1267e..015fd1cc 100644 --- a/content/posts/2012-09-26-designing-with-code.md +++ b/content/posts/2012-09-26-designing-with-code.md @@ -1,16 +1,13 @@ --- -layout: link +type: link title: Designing with Code linkurl: http://www.teehanlax.com/blog/designing-with-code/ author: Matthias Kretschmann date: 2012-09-26 11:45:40+00:00 - -categories: -- design -post_format: -- Link + +category: design --- I try to repeat that at least 2 times a day: diff --git a/content/posts/2013-02-17-castle-garden.md b/content/posts/2013-02-17-castle-garden.md index 92213683..a1d0223c 100644 --- a/content/posts/2013-02-17-castle-garden.md +++ b/content/posts/2013-02-17-castle-garden.md @@ -1,16 +1,13 @@ --- -layout: photo +type: photo title: Castle Garden image: ../media/8372983659_da0e88ca79_o.jpg author: Matthias Kretschmann date: 2013-02-17 11:50:21+00:00 - -categories: -- photos -post_format: -- Image + +category: photos --- [Castle Garden | flickr](http://www.flickr.com/photos/krema/8372983659) diff --git a/content/posts/2013-02-17-ezeep-android-app-design.md b/content/posts/2013-02-17-ezeep-android-app-design.md index da583c70..9883f3ea 100644 --- a/content/posts/2013-02-17-ezeep-android-app-design.md +++ b/content/posts/2013-02-17-ezeep-android-app-design.md @@ -1,12 +1,11 @@ --- -layout: photo +type: photo title: ezeep Android App Design image: ../media/8455835942_a9b9100373_o.jpg author: Matthias Kretschmann -categories: -- photos +category: photos tags: - ezeep --- diff --git a/content/posts/2013-02-17-ezeep-office-view.md b/content/posts/2013-02-17-ezeep-office-view.md index b090264c..ea0ed259 100644 --- a/content/posts/2013-02-17-ezeep-office-view.md +++ b/content/posts/2013-02-17-ezeep-office-view.md @@ -1,12 +1,11 @@ --- -layout: photo +type: photo title: ezeep office view image: ../media/8450618380_83c64006c6_o.jpg author: Matthias Kretschmann -categories: -- photos +category: photos tags: - ezeep --- diff --git a/content/posts/2013-05-23-ezeep-birds.md b/content/posts/2013-05-23-ezeep-birds.md index d5803997..f9e4eebf 100644 --- a/content/posts/2013-05-23-ezeep-birds.md +++ b/content/posts/2013-05-23-ezeep-birds.md @@ -1,11 +1,10 @@ --- -layout: photo +type: photo title: ezeep birds image: ../media/8776417095_43553c88c2_o.jpg author: Matthias Kretschmann -categories: -- photos +category: photos tags: - ezeep --- diff --git a/content/posts/2013-05-23-ezeep-origami.md b/content/posts/2013-05-23-ezeep-origami.md index b54de5eb..07373fb9 100644 --- a/content/posts/2013-05-23-ezeep-origami.md +++ b/content/posts/2013-05-23-ezeep-origami.md @@ -1,12 +1,11 @@ --- -layout: photo +type: photo title: ezeep origami image: ../media/8782995066_e90ff6b3ae_o.jpg author: Matthias Kretschmann -categories: -- photos +category: photos tags: - ezeep --- diff --git a/content/posts/2013-07-13-create-differentiate-iterate-10-pro-tips-on-relaunching-your-startup-website.md b/content/posts/2013-07-13-create-differentiate-iterate-10-pro-tips-on-relaunching-your-startup-website.md index f5a3f3b5..094fa408 100644 --- a/content/posts/2013-07-13-create-differentiate-iterate-10-pro-tips-on-relaunching-your-startup-website.md +++ b/content/posts/2013-07-13-create-differentiate-iterate-10-pro-tips-on-relaunching-your-startup-website.md @@ -1,16 +1,15 @@ --- -layout: link +type: link title: Create, differentiate, iterate – 10 pro tips on relaunching your startup website linkurl: http://venturevillage.eu/10-pro-tips-redesign author: Matthias Kretschmann date: 2013-07-13 12:49:39+00:00 -categories: -- design -- personal +category: design tags: - ezeep +- personal --- Was one of the people interviewed by Charmaine Li from VentureVillage about relaunching a startup's website where I talk a bit about [ezeep's relaunch](https://www.ezeep.com/blog/hip-hip-have-a-look-at-ezeeps-hot-new-home-page/). diff --git a/content/posts/2013-07-13-enterprise-software-sucks.md b/content/posts/2013-07-13-enterprise-software-sucks.md index 8cdce59e..33060638 100644 --- a/content/posts/2013-07-13-enterprise-software-sucks.md +++ b/content/posts/2013-07-13-enterprise-software-sucks.md @@ -1,13 +1,11 @@ --- -layout: post +type: post title: Enterprise Software Sucks author: Matthias Kretschmann date: 2013-07-13 13:19:44+00:00 -categories: -- design -- personal +category: design tags: - ezeep --- diff --git a/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md b/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md index 637abef1..28ed7fbc 100644 --- a/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md +++ b/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md @@ -1,12 +1,11 @@ --- -layout: post +type: post title: 'Stealing Time: How Technology Can Hurt or Harm Our Inner State' image: ../media/post-time.png author: Matthias Kretschmann -categories: -- design -- personal + +category: design tags: - ezeep --- @@ -34,4 +33,4 @@ At [ezeep](https://www.ezeep.com), reducing the time our customers & users need It doesn’t need you, it should serve you. In truth, we’re pretty obsessed with customer needs, instead of product features. This helps a lot for developing the empathy needed to decide which new features are actually useful. In our research, we always try to determine how our product can be a useful extension of reality instead of forcing features on users just because it’s possible technologically. -Nobody wants to deal with their printers all the time, so another design goal is enabling customers to set up printers once and forget about it. So, hook up that printer to your whole team in 5 minutes, switch off your screens and get out there grabbing some rich emotions. \ No newline at end of file +Nobody wants to deal with their printers all the time, so another design goal is enabling customers to set up printers once and forget about it. So, hook up that printer to your whole team in 5 minutes, switch off your screens and get out there grabbing some rich emotions. diff --git a/content/posts/2013-11-06-why-the-worlds-best-photo-startup-is-going-out-of-business.md b/content/posts/2013-11-06-why-the-worlds-best-photo-startup-is-going-out-of-business.md index d74e655b..d085888c 100644 --- a/content/posts/2013-11-06-why-the-worlds-best-photo-startup-is-going-out-of-business.md +++ b/content/posts/2013-11-06-why-the-worlds-best-photo-startup-is-going-out-of-business.md @@ -1,15 +1,14 @@ --- -layout: link +type: link title: Why the world's best photo startup is going out of business linkurl: http://www.theverge.com/2013/11/5/5039216/everpix-life-and-death-inside-the-worlds-best-photo-startup -categories: -- photography +category: photography --- Really sad, the service was awesome. But good example that building an awesome product is not enough: > While the team obsessed about perfecting the service, the founders paid less attention to the subject investors care about most: growth. [...] > -> And so at a time when successful photo apps were attracting users by the millions, by March the company had attracted fewer than 19,000 signups. Everpix had spent almost nothing to advertise the service. \ No newline at end of file +> And so at a time when successful photo apps were attracting users by the millions, by March the company had attracted fewer than 19,000 signups. Everpix had spent almost nothing to advertise the service. diff --git a/content/posts/2013-11-20-why-we-are-allowed-to-hate-silicon-valley.md b/content/posts/2013-11-20-why-we-are-allowed-to-hate-silicon-valley.md index ad18e7c4..983e1b81 100644 --- a/content/posts/2013-11-20-why-we-are-allowed-to-hate-silicon-valley.md +++ b/content/posts/2013-11-20-why-we-are-allowed-to-hate-silicon-valley.md @@ -1,12 +1,11 @@ --- -layout: link +type: link title: Why We Are Allowed to Hate Silicon Valley linkurl: http://www.faz.net/aktuell/feuilleton/debatten/the-internet-ideology-why-we-are-allowed-to-hate-silicon-valley-12658406.html author: Matthias Kretschmann -categories: -- links +category: links tags: - 'silicon valley' - google @@ -14,4 +13,4 @@ tags: Don't fully agree with Evgeny Morozov's culture pessimism but he makes some good points in this article: -> It might even help bury some of the myths spun by Silicon Valley. Wouldn’t it be nice if one day, told that Google’s mission is to “organize the world’s information and make it universally accessible and useful,” we would finally read between the lines and discover its true meaning: “to monetize all of the world’s information and make it universally inaccessible and profitable”? With this act of subversive interpretation, we might eventually hit upon the greatest emancipatory insight of all: Letting Google organize all of the world’s information makes as much sense as letting Halliburton organize all of the world’s oil. \ No newline at end of file +> It might even help bury some of the myths spun by Silicon Valley. Wouldn’t it be nice if one day, told that Google’s mission is to “organize the world’s information and make it universally accessible and useful,” we would finally read between the lines and discover its true meaning: “to monetize all of the world’s information and make it universally inaccessible and profitable”? With this act of subversive interpretation, we might eventually hit upon the greatest emancipatory insight of all: Letting Google organize all of the world’s information makes as much sense as letting Halliburton organize all of the world’s oil. diff --git a/content/posts/2013-12-11-silicon-valley-isnt-a-meritocracy.md b/content/posts/2013-12-11-silicon-valley-isnt-a-meritocracy.md index 73dc7dad..6f297d1e 100644 --- a/content/posts/2013-12-11-silicon-valley-isnt-a-meritocracy.md +++ b/content/posts/2013-12-11-silicon-valley-isnt-a-meritocracy.md @@ -1,11 +1,10 @@ --- -layout: link +type: link title: Silicon Valley Isn't a Meritocracy linkurl: http://www.wired.com/opinion/2013/11/silicon-valley-isnt-a-meritocracy-and-the-cult-of-the-entrepreneur-holds-people-back/ -categories: -- links +category: links tags: - 'silicon valley' @@ -13,4 +12,4 @@ tags: From [Silicon Valley Isn't a Meritocracy — And It's Dangerous to Hero-Worship Entrepreneurs](http://www.wired.com/opinion/2013/11/silicon-valley-isnt-a-meritocracy-and-the-cult-of-the-entrepreneur-holds-people-back/): -> People in tech repeatedly portray Silicon Valley as places where the smartest, most motivated people from around the globe are changing the world for the better, and this rhetoric has been taken up and repeated often by traditional media outlets. Unlike, say, community activists, public schoolteachers, social workers, or health care providers, technologists are ultimately focused on a small slice of the population, and they are primarily looking for ideas that will prove profitable. These entrepreneurs may have a passion for better audio streaming or e-mail, but to say that such pursuits are world-changing is a bit disingenuous. \ No newline at end of file +> People in tech repeatedly portray Silicon Valley as places where the smartest, most motivated people from around the globe are changing the world for the better, and this rhetoric has been taken up and repeated often by traditional media outlets. Unlike, say, community activists, public schoolteachers, social workers, or health care providers, technologists are ultimately focused on a small slice of the population, and they are primarily looking for ideas that will prove profitable. These entrepreneurs may have a passion for better audio streaming or e-mail, but to say that such pursuits are world-changing is a bit disingenuous. diff --git a/content/posts/2014-03-10-just-a-normal-sunday.md b/content/posts/2014-03-10-just-a-normal-sunday.md index c4691381..bbff2645 100644 --- a/content/posts/2014-03-10-just-a-normal-sunday.md +++ b/content/posts/2014-03-10-just-a-normal-sunday.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Just a normal Sunday image: ../media/just-a-normal-sunday.jpg author: Matthias Kretschmann diff --git a/content/posts/2014-03-15-potsdam.md b/content/posts/2014-03-15-potsdam.md index 21ff58d4..1b2ed9c3 100644 --- a/content/posts/2014-03-15-potsdam.md +++ b/content/posts/2014-03-15-potsdam.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Potsdam image: ../media/potsdam.jpg author: Matthias Kretschmann diff --git a/content/posts/2014-03-17-typographic-diamond.md b/content/posts/2014-03-17-typographic-diamond.md index b16c7aac..b16f6e71 100644 --- a/content/posts/2014-03-17-typographic-diamond.md +++ b/content/posts/2014-03-17-typographic-diamond.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Typographic diamond image: ../media/typographic-diamond.jpg author: Matthias Kretschmann diff --git a/content/posts/2014-04-26-ai-weiwei-stools.md b/content/posts/2014-04-26-ai-weiwei-stools.md index f5a962cb..3a6bc660 100644 --- a/content/posts/2014-04-26-ai-weiwei-stools.md +++ b/content/posts/2014-04-26-ai-weiwei-stools.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Ai Weiwei, Stools image: ../media/ai-wei-wei-stools.jpg author: Matthias Kretschmann diff --git a/content/posts/2014-06-07-airfield-reference-point.md b/content/posts/2014-06-07-airfield-reference-point.md index 9235e2a1..48f159ee 100644 --- a/content/posts/2014-06-07-airfield-reference-point.md +++ b/content/posts/2014-06-07-airfield-reference-point.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Airfield Reference Point image: ../media/airfield-reference-point.jpg author: Matthias Kretschmann diff --git a/content/posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md b/content/posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md index a3aec312..d2a73dd8 100644 --- a/content/posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md +++ b/content/posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Anton Henning, Heimat schaffen, Simpsons image: ../media/2015-03-29-anton-henning-heimat-schaffen-simpsons.jpg author: Matthias Kretschmann diff --git a/content/posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md b/content/posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md index 58530d7f..c1f2597d 100644 --- a/content/posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md +++ b/content/posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Thanks for the tip little orange blob image: ../media/2015-03-29-thanks-for-the-tip-little-orange-blob.jpg author: Matthias Kretschmann diff --git a/content/posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md b/content/posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md index 9e7545a9..c5d844d0 100644 --- a/content/posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md +++ b/content/posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Suddenly... a new Hindu temple appears around the corner image: ../media/2015-04-17-suddenly-a-new-hindu-temple-appears-around-the-corner.jpg author: Matthias Kretschmann diff --git a/content/posts/2015-04-09-most-surprising-dog-i-know.md b/content/posts/2015-04-09-most-surprising-dog-i-know.md index a4aafa2d..2ef7b8b2 100644 --- a/content/posts/2015-04-09-most-surprising-dog-i-know.md +++ b/content/posts/2015-04-09-most-surprising-dog-i-know.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Most surprising dog I know image: ../media/most-surprising-dog-i-know.jpg author: Matthias Kretschmann diff --git a/content/posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md b/content/posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md index 617e8168..4f5a9d18 100644 --- a/content/posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md +++ b/content/posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Obligatory it's summer in Berlin photo image: ../media/obligatory-it-s-summer-in-berlin-photo.jpg author: Matthias Kretschmann diff --git a/content/posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md b/content/posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md index f18b96ab..302236e2 100644 --- a/content/posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md +++ b/content/posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: That moment when your childhood toys hang painted in a gallery image: ../media/Monstrum_Gameboy_Catherine_Kaleel.jpg author: Matthias Kretschmann diff --git a/content/posts/2015-04-25-tiny-tiny-demons.md b/content/posts/2015-04-25-tiny-tiny-demons.md index 8e3e6930..096fcd38 100644 --- a/content/posts/2015-04-25-tiny-tiny-demons.md +++ b/content/posts/2015-04-25-tiny-tiny-demons.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Tiny tiny demons image: ../media/tiny_tiny_demons.jpg author: Matthias Kretschmann diff --git a/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md b/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md index 21d19d4b..f3bb7348 100644 --- a/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md +++ b/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: Simple Tor setup on macOS image: ../media/teaser-tor.png diff --git a/content/posts/2015-09-13-css-app-store-badges.md b/content/posts/2015-09-13-css-app-store-badges.md index 93aa7772..5f4cd00c 100644 --- a/content/posts/2015-09-13-css-app-store-badges.md +++ b/content/posts/2015-09-13-css-app-store-badges.md @@ -1,5 +1,5 @@ --- -layout: post +type: post title: CSS App Store Badges image: ../media/teaser-appstorebadges.png diff --git a/content/posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md b/content/posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md index 8e5ce3ca..ab40d335 100644 --- a/content/posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md +++ b/content/posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: 'Gaudí knows how to impress with a ceiling' image: ../media/sagrada-familia-ceiling.jpg author: Matthias Kretschmann diff --git a/content/posts/2016-02-27-streets-of-el-raval.md b/content/posts/2016-02-27-streets-of-el-raval.md index c8b5c686..03c38e87 100644 --- a/content/posts/2016-02-27-streets-of-el-raval.md +++ b/content/posts/2016-02-27-streets-of-el-raval.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Streets of El Raval image: ../media/streets-of-el-raval.jpg author: Matthias Kretschmann diff --git a/content/posts/2016-03-02-a-storm-is-coming.md b/content/posts/2016-03-02-a-storm-is-coming.md index 8ab6be83..76d78172 100644 --- a/content/posts/2016-03-02-a-storm-is-coming.md +++ b/content/posts/2016-03-02-a-storm-is-coming.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: A storm is coming image: ../media/a-storm-is-coming.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-02-13-keith-haring-vandalizing-a-wall.md b/content/posts/2017-02-13-keith-haring-vandalizing-a-wall.md index d8425ac9..91236924 100644 --- a/content/posts/2017-02-13-keith-haring-vandalizing-a-wall.md +++ b/content/posts/2017-02-13-keith-haring-vandalizing-a-wall.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: K. Haring vandalizing a wall image: ../media/keith-haring-vandalizing-a-wall.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-02-13-streets-of-el-born.md b/content/posts/2017-02-13-streets-of-el-born.md index cc6cf68d..ce38cf75 100644 --- a/content/posts/2017-02-13-streets-of-el-born.md +++ b/content/posts/2017-02-13-streets-of-el-born.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Streets of El Born image: ../media/streets-of-el-born.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-02-14-new-passion-facade.md b/content/posts/2017-02-14-new-passion-facade.md index 68256acf..32af19d3 100644 --- a/content/posts/2017-02-14-new-passion-facade.md +++ b/content/posts/2017-02-14-new-passion-facade.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: New Passion Façade image: ../media/new-passion-facade.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-02-16-coolhaven-rotterdam.md b/content/posts/2017-02-16-coolhaven-rotterdam.md index 03f8896a..bf77026c 100644 --- a/content/posts/2017-02-16-coolhaven-rotterdam.md +++ b/content/posts/2017-02-16-coolhaven-rotterdam.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Coolhaven Rotterdam image: ../media/coolhaven-rotterdam.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-02-17-behind-the-art.md b/content/posts/2017-02-17-behind-the-art.md index 8789412a..acb760e7 100644 --- a/content/posts/2017-02-17-behind-the-art.md +++ b/content/posts/2017-02-17-behind-the-art.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Behind the art image: ../media/behind-the-art.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-02-19-rotterdam-coats.md b/content/posts/2017-02-19-rotterdam-coats.md index aedd60d9..9cd356d1 100644 --- a/content/posts/2017-02-19-rotterdam-coats.md +++ b/content/posts/2017-02-19-rotterdam-coats.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Rotterdam coats image: ../media/2017-02-19-rotterdam-coats.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-02-21-david-chipperfield-staircase.md b/content/posts/2017-02-21-david-chipperfield-staircase.md index 7f6755c0..586129b9 100644 --- a/content/posts/2017-02-21-david-chipperfield-staircase.md +++ b/content/posts/2017-02-21-david-chipperfield-staircase.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: David Chipperfield staircase image: ../media/2017-02-21-david-chipperfield-staircase.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-02-26-eu-gotham-city.md b/content/posts/2017-02-26-eu-gotham-city.md index 1c10730f..c5e347ef 100644 --- a/content/posts/2017-02-26-eu-gotham-city.md +++ b/content/posts/2017-02-26-eu-gotham-city.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: EU Gotham City image: ../media/2017-02-26-eu-gotham-city.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-02-27-amsterdam-cliche.md b/content/posts/2017-02-27-amsterdam-cliche.md index 3f44a595..c2dd539d 100644 --- a/content/posts/2017-02-27-amsterdam-cliche.md +++ b/content/posts/2017-02-27-amsterdam-cliche.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Amsterdam cliché image: ../media/2017-02-27-amsterdam-cliche.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-02-27-its-dark-and-i-dont-exist.md b/content/posts/2017-02-27-its-dark-and-i-dont-exist.md index 04e7da80..9b08d677 100644 --- a/content/posts/2017-02-27-its-dark-and-i-dont-exist.md +++ b/content/posts/2017-02-27-its-dark-and-i-dont-exist.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: "It's dark and I don't exist" image: ../media/2017-02-27-its-dark-and-i-dont-exist.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-02-28-stedelijk-museum.md b/content/posts/2017-02-28-stedelijk-museum.md index 88fb38fc..ebb4378e 100644 --- a/content/posts/2017-02-28-stedelijk-museum.md +++ b/content/posts/2017-02-28-stedelijk-museum.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Stedelijk Museum image: ../media/2017-02-28-stedelijk-museum.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-02-28-temple-guardian-rijksmuseum.md b/content/posts/2017-02-28-temple-guardian-rijksmuseum.md index 676a4075..59b3f656 100644 --- a/content/posts/2017-02-28-temple-guardian-rijksmuseum.md +++ b/content/posts/2017-02-28-temple-guardian-rijksmuseum.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Temple Guardian Rijksmuseum image: ../media/2017-02-28-temple-guardian-rijksmuseum.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-02-28-watching-the-night-watch.md b/content/posts/2017-02-28-watching-the-night-watch.md index 90bf1ae2..b15f1d9a 100644 --- a/content/posts/2017-02-28-watching-the-night-watch.md +++ b/content/posts/2017-02-28-watching-the-night-watch.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Watching The Night Watch image: ../media/2017-02-28-watching-the-night-watch.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-04-16-hamburgs-elbphilharmonie.md b/content/posts/2017-04-16-hamburgs-elbphilharmonie.md index b64952de..05770faf 100644 --- a/content/posts/2017-04-16-hamburgs-elbphilharmonie.md +++ b/content/posts/2017-04-16-hamburgs-elbphilharmonie.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Hamburg's Elbphilharmonie image: ../media/2017-04-16-hamburgs-elbphilharmonie.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-07-05-kapaleeshwarar-temple-chennai.md b/content/posts/2017-07-05-kapaleeshwarar-temple-chennai.md index 80ee6c46..4957c7e6 100644 --- a/content/posts/2017-07-05-kapaleeshwarar-temple-chennai.md +++ b/content/posts/2017-07-05-kapaleeshwarar-temple-chennai.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Kapaleeshwarar Temple Chennai image: ../media/2017-07-05-kapaleeshwarar-temple-chennai.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-07-08-kochis-streetart-game-is-strong.md b/content/posts/2017-07-08-kochis-streetart-game-is-strong.md index 15748a47..7913a03b 100644 --- a/content/posts/2017-07-08-kochis-streetart-game-is-strong.md +++ b/content/posts/2017-07-08-kochis-streetart-game-is-strong.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: "Kochi's street art game is strong" image: ../media/2017-07-14-kochis-streetart-game-is-strong.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-07-09-orphaned-elephant-with-friend.md b/content/posts/2017-07-09-orphaned-elephant-with-friend.md index 9bdf10a3..5b47d208 100644 --- a/content/posts/2017-07-09-orphaned-elephant-with-friend.md +++ b/content/posts/2017-07-09-orphaned-elephant-with-friend.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Orphaned elephant with friend image: ../media/2017-07-09-orphaned-elephant-with-friend.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-07-10-kochis-dhobhi-ghat.md b/content/posts/2017-07-10-kochis-dhobhi-ghat.md index 652e2e8d..a2292d3a 100644 --- a/content/posts/2017-07-10-kochis-dhobhi-ghat.md +++ b/content/posts/2017-07-10-kochis-dhobhi-ghat.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: Kochis dhobhi ghat image: ../media/2017-07-10-kochis-dhobhi-ghat.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-07-13-mumbai-hand-painted-typography.md b/content/posts/2017-07-13-mumbai-hand-painted-typography.md index f1715a59..f73ef0ad 100644 --- a/content/posts/2017-07-13-mumbai-hand-painted-typography.md +++ b/content/posts/2017-07-13-mumbai-hand-painted-typography.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: "The art of hand painted typography" image: ../media/2017-07-13-mumbai-hand-painted-typography.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-07-13-obligatory-gate-of-india-photo.md b/content/posts/2017-07-13-obligatory-gate-of-india-photo.md index 6ac78767..c2c1752d 100644 --- a/content/posts/2017-07-13-obligatory-gate-of-india-photo.md +++ b/content/posts/2017-07-13-obligatory-gate-of-india-photo.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: "Obligatory Gateway of India photo" image: ../media/2017-07-13-obligatory-gate-of-india-photo.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md b/content/posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md index 66a3509e..6d75f076 100644 --- a/content/posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md +++ b/content/posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: "Chhatrapati Shivaji Maharaj Vastu Sangrahalaya" image: ../media/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-11-10-acropolis-the-erechtheum.md b/content/posts/2017-11-10-acropolis-the-erechtheum.md index 778a8b8b..5894d97f 100644 --- a/content/posts/2017-11-10-acropolis-the-erechtheum.md +++ b/content/posts/2017-11-10-acropolis-the-erechtheum.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: "The Erechtheum" image: ../media/2017-11-10-acropolis-the-erechtheum.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-11-10-acropolis-the-parthenon.md b/content/posts/2017-11-10-acropolis-the-parthenon.md index a9fe62fb..8e98ab30 100644 --- a/content/posts/2017-11-10-acropolis-the-parthenon.md +++ b/content/posts/2017-11-10-acropolis-the-parthenon.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: "The Parthenon" image: ../media/2017-11-10-acropolis-the-parthenon.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-11-10-acropolis-the-propylaea.md b/content/posts/2017-11-10-acropolis-the-propylaea.md index 8c1b4402..c9ea5804 100644 --- a/content/posts/2017-11-10-acropolis-the-propylaea.md +++ b/content/posts/2017-11-10-acropolis-the-propylaea.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: "The Propylaea" image: ../media/2017-11-10-acropolis-the-propylaea.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-12-16-sagrada-familia.md b/content/posts/2017-12-16-sagrada-familia.md index 5165dbce..1b6a6b1f 100644 --- a/content/posts/2017-12-16-sagrada-familia.md +++ b/content/posts/2017-12-16-sagrada-familia.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: "Sagrada Família" image: ../media/2017-12-16-sagrada-familia.jpg author: Matthias Kretschmann diff --git a/content/posts/2017-12-27-sao-paulo-traffic.md b/content/posts/2017-12-27-sao-paulo-traffic.md index 1cb4fe33..aa60dd24 100644 --- a/content/posts/2017-12-27-sao-paulo-traffic.md +++ b/content/posts/2017-12-27-sao-paulo-traffic.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: "Traffic of São Paulo" image: ../media/2017-12-27-sao-paulo-traffic.jpg author: Matthias Kretschmann diff --git a/content/posts/2018-01-04-passagem-literaria-da-consolacao.md b/content/posts/2018-01-04-passagem-literaria-da-consolacao.md index 76683556..99dfac64 100644 --- a/content/posts/2018-01-04-passagem-literaria-da-consolacao.md +++ b/content/posts/2018-01-04-passagem-literaria-da-consolacao.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: "Passagem Literária da Consolação" image: ../media/2018-01-04-passagem-literaria-da-consolacao.jpg author: Matthias Kretschmann diff --git a/content/posts/2018-01-05-samba-school.md b/content/posts/2018-01-05-samba-school.md index d8c3ad98..865432d0 100644 --- a/content/posts/2018-01-05-samba-school.md +++ b/content/posts/2018-01-05-samba-school.md @@ -1,5 +1,5 @@ --- -layout: photo +type: photo title: "Escola de Samba" image: ../media/2018-01-05-samba-school.jpg author: Matthias Kretschmann diff --git a/gatsby-node.js b/gatsby-node.js index b6c1ec72..a92946ed 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -80,18 +80,12 @@ exports.createPages = ({ graphql, actions }) => { // Create Posts const posts = result.data.allMarkdownRemark.edges - posts.forEach((post, index) => { - const previous = - index === posts.length - 1 ? null : posts[index + 1].node - const next = index === 0 ? null : posts[index - 1].node - + posts.forEach(post => { createPage({ path: `${post.node.fields.slug}`, component: postTemplate, context: { - slug: post.node.fields.slug, - previous, - next + slug: post.node.fields.slug } }) }) diff --git a/package.json b/package.json index 6eca2731..cf9fa45b 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,6 @@ "last 3 versions" ], "dependencies": { - "@webcomponents/webcomponentsjs": "^2.0.3", "clipboard": "^2.0.1", "exif-js": "^2.3.0", "gatsby": "^2.0.0-beta.47", @@ -49,7 +48,7 @@ "react": "^16.4.1", "react-dom": "^16.4.1", "react-helmet": "^5.2.0", - "time-elements": "^1.1.0", + "react-time": "^4.3.0", "vex-js": "^4.1.0" }, "devDependencies": { diff --git a/src/components/molecules/PostMeta.jsx b/src/components/molecules/PostMeta.jsx new file mode 100644 index 00000000..1e17e863 --- /dev/null +++ b/src/components/molecules/PostMeta.jsx @@ -0,0 +1,55 @@ +import React from 'react' +import PropTypes from 'prop-types' +import Time from 'react-time' +import styles from './PostMeta.module.scss' + +const PostMeta = ({ post, meta }) => { + const { author, updated, category, tags } = post.frontmatter + const { date } = post.fields + + return ( + + ) +} + +PostMeta.propTypes = { + post: PropTypes.object.isRequired, + meta: PropTypes.object.isRequired +} + +export default PostMeta diff --git a/src/components/molecules/PostMeta.module.scss b/src/components/molecules/PostMeta.module.scss new file mode 100644 index 00000000..04a6a6a5 --- /dev/null +++ b/src/components/molecules/PostMeta.module.scss @@ -0,0 +1,79 @@ +@import 'variables'; + +// Post meta +///////////////////////////////////// + +.entryMeta { + font-size: $font-size-small; + margin-top: $spacer * 2; +} + +.byline, +.time, +.tags, +.categories { + text-align: center; +} + +.byline, +.time { + font-size: italic; +} + +.byline { + margin-bottom: 0; +} + +.by { + display: block; +} + +.time { + margin-bottom: $spacer * 2; +} + +// Categories & Tags +///////////////////////////////////// + +.categories { + margin-bottom: $spacer / 2; +} + +.category { + font-size: $font-size-mini; + text-align: center; + color: $text-color; + line-height: 1; + text-transform: uppercase; + border: 1px solid $text-color; + border-radius: $border-radius; + padding: 4px 8px; + margin: 0; + display: inline-block; + + &:hover, + &:focus { + color: $link-color; + border-color: $link-color; + } + + &:active { + background: $link-color; + top: 0; + color: #fff; + } +} + +.tags { +} + +.tag { + color: $text-color; + margin-right: 5px; + + &::before { + color: $brand-grey-dimmed; + content: '#'; + margin-right: 1px; + } +} diff --git a/src/styles/_code.scss b/src/styles/_code.scss index 73a5652a..510f2458 100644 --- a/src/styles/_code.scss +++ b/src/styles/_code.scss @@ -78,7 +78,7 @@ pre > code.language-shell { } :not(pre) > code[class*='language-'] { - background: rgba($code-bg, .1); + background: rgba($code-bg, .05); color: $text-color; } diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 5d3e7b90..6691ec7e 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -86,8 +86,8 @@ @mixin divider() { position: relative; border-bottom: 1px dashed #afc3cb; - margin-top: $spacer; - margin-bottom: $spacer; + margin-top: $spacer * $line-height; + margin-bottom: $spacer * $line-height; &::before { content: ''; @@ -105,7 +105,6 @@ @mixin heading-band() { display: inline-block; - clear: both; background: rgba(255, 255, 255, .5); padding: ($spacer/2) $spacer ($spacer/2) 100%; margin-left: -100%; diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index f837a267..a1232015 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -11,7 +11,7 @@ $brand-light: #e7eef4; $brand-grey: #6b7f88; $brand-grey-light: lighten($brand-grey, 15%); -$brand-grey-dimmed: lighten($brand-grey, 50%); +$brand-grey-dimmed: lighten($brand-grey, 30%); // Backgrounds ///////////////////////////////////// @@ -30,6 +30,8 @@ $text-color-light: $brand-grey-light; $text-color--dark: $brand-grey-light; $text-color-light--dark: $brand-grey; +$link-color: $brand-cyan; + // Base Typography ///////////////////////////////////// diff --git a/src/styles/base.scss b/src/styles/base.scss index 489f29d7..54fea4da 100644 --- a/src/styles/base.scss +++ b/src/styles/base.scss @@ -1,4 +1,5 @@ @import 'variables'; +@import 'mixins'; *, *::before, @@ -131,7 +132,6 @@ h6 { line-height: $line-height-headings; color: $color-headings; font-weight: $font-weight-headings; - margin: 0 0 $spacer; letter-spacing: -.02em; .dark & { @@ -143,7 +143,7 @@ h6 { ///////////////////////////////////// a { - color: $brand-cyan; + color: $link-color; text-decoration: none; transition: .2s ease-out; @@ -156,14 +156,14 @@ a { &:hover, &:focus { outline: 0; - color: lighten($brand-cyan, 10%); + color: lighten($link-color, 10%); transform: translate3d(0, -.1rem, 0); } &:active { transition: none; - color: darken($brand-cyan, 30%); - box-shadow: inset 0 -1px 0 darken($brand-cyan, 30%); + color: darken($link-color, 30%); + box-shadow: inset 0 -1px 0 darken($link-color, 30%); } } @@ -219,7 +219,7 @@ ul, ol { margin-top: 0; margin-bottom: $spacer; - padding-left: ($spacer * 1.5); + padding-left: $spacer; list-style: none; li { @@ -228,7 +228,7 @@ ol { // stylelint-disable no-descending-specificity &::before { position: absolute; - left: -($spacer * 1.5); + left: -($spacer); top: -1px; color: $text-color-light; user-select: none; @@ -273,16 +273,10 @@ mark { } hr { + margin: 0; border: 0; - border-bottom: 1px dashed #afc3cb; - padding-bottom: $spacer; - margin-bottom: $spacer * 2; - &::before { - bottom: -2px; - width: 100%; - border-bottom: 1px dashed #fff; - } + @include divider(); } // Quotes @@ -300,6 +294,7 @@ cite { blockquote, blockquote > p { font-style: italic; + color: $brand-grey-light; } blockquote { @@ -319,7 +314,7 @@ blockquote { &::before { content: '“'; font-size: 300%; - color: lighten($text-color, 40%); + color: lighten($brand-grey-light, 20%); position: absolute; left: -10px; top: -20px; diff --git a/src/templates/Post.module.scss b/src/templates/Post.module.scss index d02cf58a..dcb35e63 100644 --- a/src/templates/Post.module.scss +++ b/src/templates/Post.module.scss @@ -58,18 +58,6 @@ @include heading-band(); } - h1 { - font-size: $font-size-h2; - } - - h2 { - font-size: $font-size-h3; - } - - h3 { - font-size: $font-size-h4; - } - p:last-child { margin-bottom: 0; } diff --git a/src/templates/post.jsx b/src/templates/post.jsx index 2c28ac26..46f65765 100644 --- a/src/templates/post.jsx +++ b/src/templates/post.jsx @@ -4,10 +4,12 @@ import Helmet from 'react-helmet' import { graphql } from 'gatsby' import Layout from '../components/Layout' import Image from '../components/atoms/Image' +import PostMeta from '../components/molecules/PostMeta' import styles from './Post.module.scss' const Post = ({ data }) => { const { markdownRemark: post } = data + const { contentYaml: meta } = data const { title, image } = post.frontmatter return ( @@ -25,6 +27,8 @@ const Post = ({ data }) => { className={styles.hentry__content} dangerouslySetInnerHTML={{ __html: post.html }} /> + +
    ) @@ -47,11 +51,21 @@ export const pageQuery = graphql` ...ImageFluid } } + author + updated + category + tags } fields { slug date(formatString: "MMMM DD, YYYY") } } + + contentYaml { + author { + uri + } + } } ` From f3f5f3381f756299a9ae8fc90ad99318eb854ad3 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 19 Jul 2018 16:49:20 +0200 Subject: [PATCH 012/100] add buttons, more post meta --- README.md | 7 +- ...2012-04-20-the-origins-of-the-blink-tag.md | 2 +- content/posts/2012-08-07-projectpurple.md | 2 +- package.json | 2 +- src/components/atoms/PostLinkActions.jsx | 21 ++ .../atoms/PostLinkActions.module.scss | 8 + src/components/atoms/PostTitle.jsx | 24 ++ src/components/atoms/PostTitle.module.scss | 16 ++ src/components/molecules/PostMeta.jsx | 15 +- src/components/molecules/PostMeta.module.scss | 6 +- src/styles/_buttons.scss | 227 ++++++++++++++++++ src/styles/_variables.scss | 2 + src/styles/base.scss | 1 + src/templates/Post.module.scss | 24 +- src/templates/post.jsx | 9 +- 15 files changed, 339 insertions(+), 27 deletions(-) create mode 100644 src/components/atoms/PostLinkActions.jsx create mode 100644 src/components/atoms/PostLinkActions.module.scss create mode 100644 src/components/atoms/PostTitle.jsx create mode 100644 src/components/atoms/PostTitle.module.scss create mode 100644 src/styles/_buttons.scss diff --git a/README.md b/README.md index 5a9ab9a4..c02e6c74 100644 --- a/README.md +++ b/README.md @@ -37,13 +37,16 @@ npm run build ### Posts -Creative Commons License
    All post content under `_src/_posts` is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. + + Creative Commons License +
    +All post content under `_src/_posts` is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. ### Photos & images All photos & image assets under `_src/_media`, `_src/assets/img`, and `assets sheet.psd` are plain ol' copyright. -Copyright (c) 2008–2017 Matthias Kretschmann +Copyright (c) 2008–2018 Matthias Kretschmann Don't care if you fork & play with it, but you're not allowed to publish anything from it as a whole without my written permission. diff --git a/content/posts/2012-04-20-the-origins-of-the-blink-tag.md b/content/posts/2012-04-20-the-origins-of-the-blink-tag.md index 91a56ee9..debfdbc9 100644 --- a/content/posts/2012-04-20-the-origins-of-the-blink-tag.md +++ b/content/posts/2012-04-20-the-origins-of-the-blink-tag.md @@ -1,7 +1,7 @@ --- type: link -title: The origins of the <blink> tag +title: The origins of the tag linkurl: http://www.montulli.org/theoriginofthe%3Cblink%3Etag author: Matthias Kretschmann diff --git a/content/posts/2012-08-07-projectpurple.md b/content/posts/2012-08-07-projectpurple.md index f7a6f77c..85b48d4e 100644 --- a/content/posts/2012-08-07-projectpurple.md +++ b/content/posts/2012-08-07-projectpurple.md @@ -33,7 +33,7 @@ The full size I designed the wallpaper in is 3200x2048px. I don't know why Apple Download the whole package with all the sizes included or grab the individual ones from the list, all linked to the image files:

    - Download zip + Download zip

    * [Desktop/rMBP/iPad 3 (3200x2048)](../media/project-purple-kremalicious.png) diff --git a/package.json b/package.json index cf9fa45b..19b9bf0e 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "gatsby-remark-images": "^2.0.1-beta.7", "gatsby-remark-prismjs": "^3.0.0-beta.3", "gatsby-remark-smartypants": "^2.0.0-beta.2", - "gatsby-source-filesystem": "^2.0.1-beta.6", + "gatsby-source-filesystem": "^2.0.1-beta.7", "gatsby-transformer-remark": "^2.1.1-beta.3", "gatsby-transformer-sharp": "^2.1.1-beta.5", "gatsby-transformer-yaml": "^2.1.1-beta.2", diff --git a/src/components/atoms/PostLinkActions.jsx b/src/components/atoms/PostLinkActions.jsx new file mode 100644 index 00000000..e5a3a8d2 --- /dev/null +++ b/src/components/atoms/PostLinkActions.jsx @@ -0,0 +1,21 @@ +import React from 'react' +import PropTypes from 'prop-types' +import styles from './PostLinkActions.module.scss' + +const PostLinkActions = ({ linkurl, slug }) => ( + +) + +PostLinkActions.propTypes = { + slug: PropTypes.string.isRequired, + linkurl: PropTypes.string +} + +export default PostLinkActions diff --git a/src/components/atoms/PostLinkActions.module.scss b/src/components/atoms/PostLinkActions.module.scss new file mode 100644 index 00000000..e94c2ebd --- /dev/null +++ b/src/components/atoms/PostLinkActions.module.scss @@ -0,0 +1,8 @@ +@import 'variables'; + +.postLinkActions { + display: flex; + justify-content: space-between; + margin-top: $spacer * 2; + margin-bottom: $spacer * 2; +} diff --git a/src/components/atoms/PostTitle.jsx b/src/components/atoms/PostTitle.jsx new file mode 100644 index 00000000..d840e45a --- /dev/null +++ b/src/components/atoms/PostTitle.jsx @@ -0,0 +1,24 @@ +import React from 'react' +import PropTypes from 'prop-types' +import styles from './PostTitle.module.scss' + +const PostTitle = ({ type, linkurl, title }) => + type === 'link' ? ( +

    + + {title} + +

    + ) : ( +

    {title}

    + ) + +PostTitle.propTypes = { + type: PropTypes.string, + title: PropTypes.string.isRequired, + linkurl: PropTypes.string +} + +export default PostTitle diff --git a/src/components/atoms/PostTitle.module.scss b/src/components/atoms/PostTitle.module.scss new file mode 100644 index 00000000..2cb7925e --- /dev/null +++ b/src/components/atoms/PostTitle.module.scss @@ -0,0 +1,16 @@ +@import 'variables'; + +// Post Title +///////////////////////////////////// + +.hentry__title { + font-size: $font-size-h1; + text-align: center; + color: $color-headings; + margin-top: 0; + margin-bottom: $spacer; +} + +.hentry__title__link { + font-size: $font-size-h3; +} diff --git a/src/components/molecules/PostMeta.jsx b/src/components/molecules/PostMeta.jsx index 1e17e863..52414eac 100644 --- a/src/components/molecules/PostMeta.jsx +++ b/src/components/molecules/PostMeta.jsx @@ -1,14 +1,17 @@ import React from 'react' import PropTypes from 'prop-types' import Time from 'react-time' +import PostLinkActions from '../atoms/PostLinkActions' import styles from './PostMeta.module.scss' const PostMeta = ({ post, meta }) => { - const { author, updated, category, tags } = post.frontmatter - const { date } = post.fields + const { author, updated, category, tags, type, linkurl } = post.frontmatter + const { date, slug } = post.fields return (
    + {type === 'link' && } + - {category} - + )} {tags && ( diff --git a/src/components/molecules/PostMeta.module.scss b/src/components/molecules/PostMeta.module.scss index 04a6a6a5..b006e2a5 100644 --- a/src/components/molecules/PostMeta.module.scss +++ b/src/components/molecules/PostMeta.module.scss @@ -17,7 +17,7 @@ .byline, .time { - font-size: italic; + font-style: italic; } .byline { @@ -37,6 +37,7 @@ .categories { margin-bottom: $spacer / 2; + text-align: center; } .category { @@ -64,9 +65,6 @@ } } -.tags { -} - .tag { color: $text-color; margin-right: 5px; diff --git a/src/styles/_buttons.scss b/src/styles/_buttons.scss new file mode 100644 index 00000000..db0bac4e --- /dev/null +++ b/src/styles/_buttons.scss @@ -0,0 +1,227 @@ +@import 'variables'; +@import 'mixins'; + +.btn, +a.btn { + text-align: center; + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + background-image: none; // Reset unusual Firefox-on-Android default style + white-space: nowrap; + user-select: none; + transition: all .2s ease-in-out; + + // Default Button + @include button-size( + $padding-base-vertical, + $padding-base-horizontal, + $font-size-small, + $line-height, + $border-radius + ); + + background-color: rgba(255, 255, 255, .1); + border: 1px solid rgba(94, 131, 162, .3); + border-bottom-color: rgba(94, 131, 162, .4); + font-family: $font-family-headings; + font-weight: $font-weight-headings; + color: $brand-grey; + text-transform: uppercase; + box-shadow: 0 1px 3px rgba($brand-grey-light, .1), + inset 0 1px 0 rgba(255, 255, 255, .7); + + @media (min-width: $screen-sm) { + max-width: 20rem; + } + + &:hover, + &:focus { + outline: 0; + background-color: rgba(255, 255, 255, .5); + } + + &:active { + color: $brand-grey; + border-color: rgba(94, 131, 162, .3); + background-color: transparent; + box-shadow: 0 1px 0 #fff; + transition: none; + outline: 0; + } + + &:focus { + outline: 0; + } + + // Disabled State + &.disabled, + &[disabled], + fieldset[disabled] & { + cursor: not-allowed; + pointer-events: none; + opacity: .6; + box-shadow: none; + } + + // grid buttons + &.col2, + &.col3 { + margin-bottom: $spacer / 2; + + @media (min-width: $screen-sm) { + margin-bottom: 0; + } + } + + span { + font-size: .9rem; + color: rgba(19, 56, 50, .6); + margin-left: .3em; + } +} + +// Primary Button +.btn-primary, +a.btn-primary { + @extend .btn; + + color: darken($link-color, 50%); + text-shadow: 0 1px 0 rgba(255, 255, 255, .3); + background: lighten($link-color, 15%); + border-color: $link-color; + box-shadow: 0 1px 3px rgba($brand-grey-light, .4), + inset 0 1px 0 rgba(255, 255, 255, .4); + + &:hover, + &:focus { + color: darken($link-color, 50%); + background-color: lighten($link-color, 25%); + text-shadow: 0 1px 0 rgba(255, 255, 255, .3); + } + + &:active { + color: darken($link-color, 50%); + border-color: darken($link-color, 10%); + background-color: lighten($link-color, 15%); + } +} + +.more-link { + font-family: $font-family-headings; + font-weight: $font-weight-headings; + font-size: $font-size-small; + color: $link-color; + text-transform: uppercase; + + .icon { + top: .15em; + position: relative; + width: 18px; + height: 18px; + } +} + +.btn-block { + display: block; +} + +// Close button +///////////////////////////////////// + +.close { + text-align: center; + display: block; + color: lighten($brand-grey-light, 50%); + line-height: 1; + font-size: $font-size-large; + padding: 3px; + cursor: pointer; + + &button { + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; + } + + &:hover, + &:focus { + color: lighten($brand-grey-light, 20%); + cursor: pointer; + outline: 0; + } + + &:active { + background: none; + color: $brand-grey-light; + transition: none; + } +} + +// some helper classes for old content +///////////////////////////////////// + +.content-download { + text-align: center; + display: block; + margin-top: $spacer * 2; + margin-bottom: $spacer * 2; + + @media (min-width: $screen-xs) { + display: flex; + } + + a { + @extend .btn; + + flex: 1; + margin-left: $spacer / 2; + + &:first-child { + margin-left: 0; + } + + &:only-child { + margin-left: auto; + margin-right: auto; + } + + span { + font-size: $font-size-mini; + color: $text-color-light; + } + } + + .icon-download, + .icon-heart, + .icon-wordpress, + .icon-github, + .icon-eye { + &::before { + content: ''; + width: 18px; + height: 18px; + display: inline-block; + margin-right: 5px; + margin-bottom: -3px; + opacity: .35; + background: url('../images/arrow-with-circle-down.svg') no-repeat + left center; + } + } + + .icon-heart::before { + background-image: url('../images/heart.svg'); + } + + .icon-github::before { + background-image: url('../images/github.svg'); + } + + .icon-eye::before { + background-image: url('../images/eye.svg'); + } +} diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index a1232015..b31086b1 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -74,6 +74,8 @@ $color-headings--dark: $brand-main-light; ///////////////////////////////////// $spacer: ($font-size-base * $line-height); +$padding-base-vertical: 8px; +$padding-base-horizontal: 12px; $border-radius: 3px; diff --git a/src/styles/base.scss b/src/styles/base.scss index 54fea4da..5acac887 100644 --- a/src/styles/base.scss +++ b/src/styles/base.scss @@ -356,3 +356,4 @@ blockquote { } @import 'code'; +@import 'buttons'; diff --git a/src/templates/Post.module.scss b/src/templates/Post.module.scss index dcb35e63..27367488 100644 --- a/src/templates/Post.module.scss +++ b/src/templates/Post.module.scss @@ -12,17 +12,6 @@ } } -// Post Title -///////////////////////////////////// - -.hentry__title { - font-size: $font-size-h1; - text-align: center; - color: $color-headings; - margin-top: 0; - margin-bottom: $spacer; -} - // Post/photo teaser ///////////////////////////////////// @@ -62,3 +51,16 @@ margin-bottom: 0; } } + +// Goodies download +///////////////////////////////////// + +.goodie-actions { + text-align: center; + max-width: 640px; + + .btn { + margin-bottom: 0; + display: block; + } +} diff --git a/src/templates/post.jsx b/src/templates/post.jsx index 46f65765..40cd3de3 100644 --- a/src/templates/post.jsx +++ b/src/templates/post.jsx @@ -4,25 +4,28 @@ import Helmet from 'react-helmet' import { graphql } from 'gatsby' import Layout from '../components/Layout' import Image from '../components/atoms/Image' +import PostTitle from '../components/atoms/PostTitle' import PostMeta from '../components/molecules/PostMeta' import styles from './Post.module.scss' const Post = ({ data }) => { const { markdownRemark: post } = data const { contentYaml: meta } = data - const { title, image } = post.frontmatter + const { title, image, type, linkurl } = post.frontmatter return (
    -

    {title}

    + + {image && (
    {title}
    )} +
    Date: Thu, 19 Jul 2018 23:04:41 +0200 Subject: [PATCH 013/100] category & tag archives --- gatsby-config.js | 10 +++- gatsby-node.js | 74 ++++++++++++------------- package.json | 5 +- src/components/molecules/PostMeta.jsx | 5 +- src/templates/Archive.jsx | 78 +++++++++++++++++++++++++++ src/templates/Archive.module.scss | 8 +++ src/templates/post.jsx | 1 + 7 files changed, 141 insertions(+), 40 deletions(-) create mode 100644 src/templates/Archive.jsx create mode 100644 src/templates/Archive.module.scss diff --git a/gatsby-config.js b/gatsby-config.js index ae6740a4..d42efe8e 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -33,6 +33,7 @@ module.exports = { { resolve: 'gatsby-transformer-remark', options: { + excerpt_separator: '', plugins: [ { resolve: 'gatsby-remark-images', @@ -44,6 +45,12 @@ module.exports = { backgroundColor: '#dfe8ef' } }, + { + resolve: 'gatsby-remark-copy-linked-files', + options: { + destinationDir: 'media' + } + }, 'gatsby-remark-prismjs', 'gatsby-remark-smartypants', 'gatsby-remark-autolink-headers' @@ -60,6 +67,7 @@ module.exports = { 'gatsby-transformer-yaml', 'gatsby-transformer-sharp', 'gatsby-plugin-sharp', - 'gatsby-plugin-sitemap' + 'gatsby-plugin-sitemap', + 'gatsby-plugin-catch-links' ] } diff --git a/gatsby-node.js b/gatsby-node.js index a92946ed..b0bd13a1 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -47,9 +47,7 @@ exports.createPages = ({ graphql, actions }) => { return new Promise((resolve, reject) => { const postTemplate = path.resolve('src/templates/Post.jsx') - // const indexTemplate = path.resolve('src/templates/index.jsx') - // const tagTemplate = path.resolve('src/templates/tag.jsx') - // const categoryTemplate = path.resolve('src/templates/category.jsx') + const archiveTemplate = path.resolve('src/templates/Archive.jsx') resolve( graphql( @@ -65,6 +63,10 @@ exports.createPages = ({ graphql, actions }) => { slug date } + frontmatter { + category + tags + } } } } @@ -90,46 +92,46 @@ exports.createPages = ({ graphql, actions }) => { }) }) - // const tagSet = new Set() - // const tagMap = new Map() - // const categorySet = new Set() + // Category & Tag Pages + const tagSet = new Set() + const tagMap = new Map() + const categorySet = new Set() - // posts.forEach(post => { - // if (post.node.frontmatter.tags) { - // post.node.frontmatter.tags.forEach(tag => { - // tagSet.add(tag) + posts.forEach(post => { + if (post.node.frontmatter.tags) { + post.node.frontmatter.tags.forEach(tag => { + tagSet.add(tag) - // const array = tagMap.has(tag) ? tagMap.get(tag) : [] - // array.push(post) - // tagMap.set(tag, array) - // }) - // } + const array = tagMap.has(tag) ? tagMap.get(tag) : [] + array.push(post) + tagMap.set(tag, array) + }) + } - // if (post.node.frontmatter.category) { - // categorySet.add(post.node.frontmatter.category) - // } - // }) + if (post.node.frontmatter.category) { + categorySet.add(post.node.frontmatter.category) + } + }) - // const tagList = Array.from(tagSet) + const tagList = Array.from(tagSet) - // tagList.forEach(tag => { - // // Creates tag pages - // createPage({ - // path: `/tags/${tag}/`, - // component: tagTemplate, - // context: { tag } - // }) - // }) + tagList.forEach(tag => { + createPage({ + path: `/tag/${tag}/`, + component: archiveTemplate, + context: { tag } + }) + }) - // const categoryList = Array.from(categorySet) + const categoryList = Array.from(categorySet) - // categoryList.forEach(category => { - // createPage({ - // path: `/categories/${category}/`, - // component: categoryTemplate, - // context: { category } - // }) - // }) + categoryList.forEach(category => { + createPage({ + path: `/${category}/`, + component: archiveTemplate, + context: { category } + }) + }) resolve() }) diff --git a/package.json b/package.json index 19b9bf0e..fa235431 100644 --- a/package.json +++ b/package.json @@ -25,12 +25,14 @@ "exif-js": "^2.3.0", "gatsby": "^2.0.0-beta.47", "gatsby-image": "^2.0.0-beta.6", + "gatsby-plugin-catch-links": "^1.0.24", "gatsby-plugin-matomo": "^0.4.1", "gatsby-plugin-react-helmet": "^3.0.0-beta.3", "gatsby-plugin-sass": "^2.0.0-beta.5", "gatsby-plugin-sharp": "^2.0.0-beta.5", "gatsby-plugin-sitemap": "^2.0.0-beta.2", "gatsby-remark-autolink-headers": "^2.0.0-beta.3", + "gatsby-remark-copy-linked-files": "^1.5.37", "gatsby-remark-images": "^2.0.1-beta.7", "gatsby-remark-prismjs": "^3.0.0-beta.3", "gatsby-remark-smartypants": "^2.0.0-beta.2", @@ -49,13 +51,14 @@ "react-dom": "^16.4.1", "react-helmet": "^5.2.0", "react-time": "^4.3.0", + "slugify": "^1.3.0", "vex-js": "^4.1.0" }, "devDependencies": { "babel-eslint": "^8.2.6", "eslint": "^5.1.0", "eslint-config-prettier": "^2.9.0", - "eslint-loader": "^2.0.0", + "eslint-loader": "^2.1.0", "eslint-plugin-graphql": "^2.1.1", "eslint-plugin-prettier": "^2.6.2", "eslint-plugin-react": "^7.10.0", diff --git a/src/components/molecules/PostMeta.jsx b/src/components/molecules/PostMeta.jsx index 52414eac..fced92d9 100644 --- a/src/components/molecules/PostMeta.jsx +++ b/src/components/molecules/PostMeta.jsx @@ -1,6 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import Time from 'react-time' +import slugify from 'slugify' import PostLinkActions from '../atoms/PostLinkActions' import styles from './PostMeta.module.scss' @@ -33,7 +34,7 @@ const PostMeta = ({ post, meta }) => { {category && ( @@ -42,7 +43,7 @@ const PostMeta = ({ post, meta }) => { {tags && (
    {tags.map(tag => ( - + {tag} ))} diff --git a/src/templates/Archive.jsx b/src/templates/Archive.jsx new file mode 100644 index 00000000..4278edb2 --- /dev/null +++ b/src/templates/Archive.jsx @@ -0,0 +1,78 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { Link, graphql } from 'gatsby' +import Layout from '../components/Layout' +import styles from './Archive.module.scss' + +const Archive = ({ data, pageContext }) => { + let posts + let archiveTitle + + if (pageContext.category) { + posts = data.category.edges + archiveTitle = pageContext.category + } else { + posts = data.tag.edges + archiveTitle = pageContext.tag + } + + const Posts = posts.map(post => ( +
  • + {post.node.frontmatter.title} +
    • + )) + + return ( + +

    {archiveTitle}

    +
      {Posts}
    +     + ) +} + +Archive.propTypes = { + data: PropTypes.object.isRequired, + pageContext: PropTypes.object.isRequired +} + +export default Archive + +export const archiveQuery = graphql` + query($category: String, $tag: String) { + category: allMarkdownRemark( + filter: { frontmatter: { category: { eq: $category } } } + sort: { order: DESC, fields: [fields___date] } + ) { + edges { + node { + id + frontmatter { + title + } + fields { + slug + date(formatString: "MMMM DD, YYYY") + } + } + } + } + + tag: allMarkdownRemark( + filter: { frontmatter: { tags: { eq: $tag } } } + sort: { order: DESC, fields: [fields___date] } + ) { + edges { + node { + id + frontmatter { + title + } + fields { + slug + date(formatString: "MMMM DD, YYYY") + } + } + } + } + } +` diff --git a/src/templates/Archive.module.scss b/src/templates/Archive.module.scss new file mode 100644 index 00000000..9d7a71fd --- /dev/null +++ b/src/templates/Archive.module.scss @@ -0,0 +1,8 @@ +@import 'variables'; +@import 'mixins'; + +.archiveTitle { + font-size: $font-size-h3; + + @include heading-band(); +} diff --git a/src/templates/post.jsx b/src/templates/post.jsx index 40cd3de3..72d1ecc5 100644 --- a/src/templates/post.jsx +++ b/src/templates/post.jsx @@ -47,6 +47,7 @@ export const pageQuery = graphql` query BlogPostByPath($slug: String!) { markdownRemark(fields: { slug: { eq: $slug } }) { html + excerpt frontmatter { type title From 1f840830dddaa376e0965e842647356b485d9581 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 20 Jul 2018 15:23:57 +0200 Subject: [PATCH 014/100] port over more core content styles --- ...and-the-history-of-the-first-photograph.md | 17 ++-- .../index.md | 4 - gatsby-config.js | 2 +- package.json | 4 +- src/components/atoms/PostTitle.module.scss | 1 + src/components/molecules/PostMeta.jsx | 2 + src/styles/_alerts.scss | 37 +++++++ src/styles/_buttons.scss | 4 +- src/styles/_content.scss | 98 +++++++++++++++++++ src/styles/_mixins.scss | 1 - src/styles/_variables.scss | 4 + src/styles/base.scss | 56 +---------- src/templates/Post.module.scss | 11 +-- 13 files changed, 160 insertions(+), 81 deletions(-) create mode 100644 src/styles/_alerts.scss create mode 100644 src/styles/_content.scss diff --git a/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md b/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md index c7b41f9d..09e796b4 100644 --- a/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md +++ b/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md @@ -21,11 +21,13 @@ redirect_from: - /2008/06/niepces-camera-obscura-and-the-history-of-the-first-photograph/ --- -These two desktop icons show the Camera Obscura as it was used by Nicéphore Niépce in an Aperture and iPhoto style and are intended as an homage to him. Nicéphore Niépce made it first possible to preserve an image taken with a camera obscura in 1826 or 1827 by using a special mixture of bitumen on a pewter plate, naming it Heliography. This first preserved photograph "View from the Window at Le Gras" is the one you can see in the iPhoto icon contained in this package. The third icon is the folder icon I have created for this icon package. +These two desktop icons show the Camera Obscura as it was used by Nicéphore Niépce in an Aperture and iPhoto style and are intended as an homage to him. Nicéphore Niépce made it first possible to preserve an image taken with a camera obscura in 1826 or 1827 by using a special mixture of bitumen on a pewter plate, naming it Heliography. + +This first preserved photograph _View from the Window at Le Gras_ is the one you can see in the iPhoto icon contained in this package. The third icon is the folder icon I have created for this icon package. Either just download the icons or read the exciting story about the First Photograph. -{% include picture.html file='cameraobscura11_all.png' %} +![](../media/cameraobscura11_all.png) # The story behind these icons @@ -33,7 +35,7 @@ There's a fascinating story behind these icons which is nothing more than the st ## Nicéphore Niépce and The First Photograph -![Nicéphore Niépce, ca. 1795](../media/nicephore-niepce.jpg) Nicéphore Niépce, ca. 1795 +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. @@ -45,16 +47,15 @@ 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! -{% include picture.html file='View-from-the-Window-at-Le-Gras.png' %} -View from the Window at Le Gras +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. +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. -Because of his inventions he got in contact with the French artist, chemist and inventor Louis-Jacques-Mandé Daguerre and they became officially partners by the time of 1829 (14 December). At this time Daguerre already was famous for his impressive Dioramas. They were both experimenting a lot to produce preserved images in less time. In June 1832 both invented a process called the Physautotype. This process utilized a distillate of lavender oil as the photosensitive agent and produced images in fewer than 8 hours. +Because of his inventions he got in contact with the French artist, chemist and inventor Louis-Jacques-Mandé Daguerre and they became officially partners by the time of 1829 (14 December). At that time, Daguerre already was famous for his impressive Dioramas. They were both experimenting a lot to produce preserved images in less time. In June 1832 both invented a process called the Physautotype. This process utilized a distillate of lavender oil as the photosensitive agent and produced images in fewer than 8 hours. But Niépce died suddenly in 1833 and instead of him his partner Louis-Jacques-Mandé Daguerre became famous with his Daguerreotype process in 1839. Finally Daguerre was named and praised as the inventor of photography along with his competitor [William Fox Talbot](http://en.wikipedia.org/wiki/William_Henry_Fox_Talbot). -But in 1952 Niépce's lost image "View from the Window at Le Gras" was discovered and since then he has to be named along with Daguerre and Talbot when speaking of the invention of photography. And we can learn that the invention of photography wasn't an act of one particular genius but a decades long process with many smart people involved. +But in 1952 Niépce's lost image _View from the Window at Le Gras_ was discovered and since then he has to be named along with Daguerre and Talbot when speaking of the invention of photography. And we can learn that the invention of photography wasn't an act of one particular genius but a decades long process with many smart people involved. If you're interested in all the different processes and techniques used by Niépce and Daguerre you can browse the [Invention of Photography section on the website of Maison Nicéphore Niépce](http://www.nicephore-niepce.com/pagus/pagus-inv.html). diff --git a/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md index 75d0c461..caecb944 100644 --- a/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md +++ b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md @@ -15,10 +15,6 @@ tags: coinhive: true --- - - There's this HTML element meant for marking up keyboard keys named ``. Obviously it can be styled with CSS so why not use it to make those elements look a bit more like hardware or the iOS and Android software keys. The above picture might be blurry depending on the device you're using so here's a live rendered demo: diff --git a/gatsby-config.js b/gatsby-config.js index d42efe8e..a4ea7c25 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -40,7 +40,7 @@ module.exports = { options: { maxWidth: 940, linkImagesToOriginal: false, - sizeByPixelDensity: true, + // sizeByPixelDensity: true, showCaptions: true, backgroundColor: '#dfe8ef' } diff --git a/package.json b/package.json index fa235431..ebd4c11a 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "dependencies": { "clipboard": "^2.0.1", "exif-js": "^2.3.0", - "gatsby": "^2.0.0-beta.47", + "gatsby": "^2.0.0-beta.53", "gatsby-image": "^2.0.0-beta.6", "gatsby-plugin-catch-links": "^1.0.24", "gatsby-plugin-matomo": "^0.4.1", @@ -36,7 +36,7 @@ "gatsby-remark-images": "^2.0.1-beta.7", "gatsby-remark-prismjs": "^3.0.0-beta.3", "gatsby-remark-smartypants": "^2.0.0-beta.2", - "gatsby-source-filesystem": "^2.0.1-beta.7", + "gatsby-source-filesystem": "^2.0.1-beta.8", "gatsby-transformer-remark": "^2.1.1-beta.3", "gatsby-transformer-sharp": "^2.1.1-beta.5", "gatsby-transformer-yaml": "^2.1.1-beta.2", diff --git a/src/components/atoms/PostTitle.module.scss b/src/components/atoms/PostTitle.module.scss index 2cb7925e..55c93309 100644 --- a/src/components/atoms/PostTitle.module.scss +++ b/src/components/atoms/PostTitle.module.scss @@ -1,4 +1,5 @@ @import 'variables'; +@import 'mixins'; // Post Title ///////////////////////////////////// diff --git a/src/components/molecules/PostMeta.jsx b/src/components/molecules/PostMeta.jsx index fced92d9..72b2313f 100644 --- a/src/components/molecules/PostMeta.jsx +++ b/src/components/molecules/PostMeta.jsx @@ -21,8 +21,10 @@ const PostMeta = ({ post, meta }) => {
    + {updated && 'published '}
    @@ -80,6 +83,7 @@ export const pageQuery = graphql` } contentYaml { + url author { uri } From c78e62094ee39f2b16b43ffb7ca6e125477cc341 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 29 Aug 2018 20:23:53 +0200 Subject: [PATCH 038/100] fix post --- content/posts/2017-07-08-kochis-streetart-game-is-strong.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/posts/2017-07-08-kochis-streetart-game-is-strong.md b/content/posts/2017-07-08-kochis-streetart-game-is-strong.md index 7913a03b..110e0566 100644 --- a/content/posts/2017-07-08-kochis-streetart-game-is-strong.md +++ b/content/posts/2017-07-08-kochis-streetart-game-is-strong.md @@ -1,7 +1,7 @@ --- type: photo title: "Kochi's street art game is strong" -image: ../media/2017-07-14-kochis-streetart-game-is-strong.jpg +image: ../media/2017-07-08-kochis-streetart-game-is-strong.jpg author: Matthias Kretschmann date: 2017-07-08 14:28:19.869188000 +02:00 category: photos From a04ab0e4b5da5802654602061c599dbc6ae76ffc Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 30 Aug 2018 01:54:01 +0200 Subject: [PATCH 039/100] package updates, add gatsby-redirect-from --- .gitignore | 1 + .../posts/2008-04-04-aperture-file-types.md | 2 +- content/redirects.yml | 8 +++++ gatsby-config.js | 3 +- package.json | 33 ++++++++++--------- 5 files changed, 29 insertions(+), 18 deletions(-) create mode 100644 content/redirects.yml diff --git a/.gitignore b/.gitignore index 1b4e9ac6..546b06fa 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ package-lock.json public .cache src/components/svg +plugins/gatsby-redirect-from diff --git a/content/posts/2008-04-04-aperture-file-types.md b/content/posts/2008-04-04-aperture-file-types.md index 8b534abe..615b4a31 100644 --- a/content/posts/2008-04-04-aperture-file-types.md +++ b/content/posts/2008-04-04-aperture-file-types.md @@ -23,7 +23,7 @@ These icons are free for your personal use and include icons for all file types - Leopard ready (512×512) - custom 32px and 16px icons -Get them from [the goodies-page](https://kremalicious.com/goodies/) and have fun. +Get them and have fun.

    Download diff --git a/content/redirects.yml b/content/redirects.yml new file mode 100644 index 00000000..c643bece --- /dev/null +++ b/content/redirects.yml @@ -0,0 +1,8 @@ +- from: '/new-goodies-aperture-file-types-icons/' + to: '/aperture-file-types/' + +- from: '/2008/02/how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites/' + to: '/how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites/' + +- from: '/2007/06/finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs/' + to: '/finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs/' diff --git a/gatsby-config.js b/gatsby-config.js index a55a2cec..0e7c5953 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -108,6 +108,7 @@ module.exports = { 'gatsby-transformer-sharp', 'gatsby-plugin-sharp', 'gatsby-plugin-sitemap', - 'gatsby-plugin-catch-links' + 'gatsby-plugin-catch-links', + 'gatsby-redirect-from' ] } diff --git a/package.json b/package.json index 97bf54dc..2c36be3b 100644 --- a/package.json +++ b/package.json @@ -22,24 +22,25 @@ "last 3 versions" ], "dependencies": { - "gatsby": "^2.0.0-rc.0", - "gatsby-image": "^2.0.0-rc.0", - "gatsby-plugin-catch-links": "^2.0.2-rc.0", + "gatsby": "^2.0.0-rc.4", + "gatsby-image": "^2.0.0-rc.1", + "gatsby-plugin-catch-links": "^2.0.2-rc.1", "gatsby-plugin-lunr": "^1.1.0", "gatsby-plugin-matomo": "^0.5.0", - "gatsby-plugin-react-helmet": "^3.0.0-rc.0", - "gatsby-plugin-sass": "^2.0.0-rc.0", - "gatsby-plugin-sharp": "^2.0.0-rc.0", - "gatsby-plugin-sitemap": "^2.0.0-rc.0", - "gatsby-remark-autolink-headers": "^2.0.0-rc.0", - "gatsby-remark-copy-linked-files": "^2.0.0-rc.0", - "gatsby-remark-images": "^2.0.1-rc.0", - "gatsby-remark-prismjs": "^3.0.0-rc.0", - "gatsby-remark-smartypants": "^2.0.0-rc.0", - "gatsby-source-filesystem": "^2.0.1-rc.0", - "gatsby-transformer-remark": "^2.1.1-rc.0", - "gatsby-transformer-sharp": "^2.1.1-rc.0", - "gatsby-transformer-yaml": "^2.1.1-rc.0", + "gatsby-plugin-react-helmet": "^3.0.0-rc.1", + "gatsby-plugin-sass": "^2.0.0-rc.1", + "gatsby-plugin-sharp": "^2.0.0-rc.2", + "gatsby-plugin-sitemap": "^2.0.0-rc.1", + "gatsby-redirect-from": "0.0.3", + "gatsby-remark-autolink-headers": "^2.0.0-rc.1", + "gatsby-remark-copy-linked-files": "^2.0.0-rc.1", + "gatsby-remark-images": "^2.0.1-rc.1", + "gatsby-remark-prismjs": "^3.0.0-rc.2", + "gatsby-remark-smartypants": "^2.0.0-rc.1", + "gatsby-source-filesystem": "^2.0.1-rc.1", + "gatsby-transformer-remark": "^2.1.1-rc.1", + "gatsby-transformer-sharp": "^2.1.1-rc.2", + "gatsby-transformer-yaml": "^2.1.1-rc.1", "graphql": "^0.13.2", "intersection-observer": "^0.5.0", "node-sass": "^4.9.3", From 95e40bb6334cdebdbc38c09d4406d7809f805d5c Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 30 Aug 2018 14:23:51 +0200 Subject: [PATCH 040/100] bump gatsby-redirect-from --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2c36be3b..8e450e12 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "gatsby-plugin-sass": "^2.0.0-rc.1", "gatsby-plugin-sharp": "^2.0.0-rc.2", "gatsby-plugin-sitemap": "^2.0.0-rc.1", - "gatsby-redirect-from": "0.0.3", + "gatsby-redirect-from": "0.1.0", "gatsby-remark-autolink-headers": "^2.0.0-rc.1", "gatsby-remark-copy-linked-files": "^2.0.0-rc.1", "gatsby-remark-images": "^2.0.1-rc.1", From 49e783139488e9efd42998b82b4236ed3e152553 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 30 Aug 2018 17:23:55 +0200 Subject: [PATCH 041/100] add gatsby-plugin-meta-redirect --- gatsby-config.js | 6 +++++- package.json | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/gatsby-config.js b/gatsby-config.js index 0e7c5953..892046d9 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -4,6 +4,9 @@ const yaml = require('js-yaml') const meta = yaml.load(fs.readFileSync('./content/meta.yml', 'utf8')) const { url } = meta +// required for gatsby-plugin-meta-redirect +require('regenerator-runtime/runtime') + module.exports = { siteMetadata: { siteUrl: `${url}` @@ -109,6 +112,7 @@ module.exports = { 'gatsby-plugin-sharp', 'gatsby-plugin-sitemap', 'gatsby-plugin-catch-links', - 'gatsby-redirect-from' + 'gatsby-redirect-from', + 'gatsby-plugin-meta-redirect' ] } diff --git a/package.json b/package.json index 8e450e12..13974c72 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "gatsby-plugin-catch-links": "^2.0.2-rc.1", "gatsby-plugin-lunr": "^1.1.0", "gatsby-plugin-matomo": "^0.5.0", + "gatsby-plugin-meta-redirect": "^1.1.0", "gatsby-plugin-react-helmet": "^3.0.0-rc.1", "gatsby-plugin-sass": "^2.0.0-rc.1", "gatsby-plugin-sharp": "^2.0.0-rc.2", From c1a72f2d10e715eb02a291341414fa125469a4c8 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 30 Aug 2018 22:50:09 +0200 Subject: [PATCH 042/100] kill categories --- content/posts/2005-07-26-beaucarnea-leafs.md | 2 - content/posts/2005-08-02-snail-on-a-leaf.md | 2 - content/posts/2006-07-23-electricity.md | 2 - content/posts/2006-07-23-floating-sky.md | 2 - content/posts/2006-08-21-new-berlin-bridge.md | 2 - content/posts/2006-09-16-wooden-windmill.md | 2 - .../posts/2006-10-22-german-chancellery.md | 2 - content/posts/2007-02-10-macbook-abstract.md | 2 - ...-adjustment-tool-guide-for-aperture-152.md | 2 +- ...canon-canoscan-lide-500f-for-intel-macs.md | 2 +- ...s-on-a-mac-for-htaccess-protected-sites.md | 3 +- .../2008-03-30-launch-of-kremaliciouscom.md | 4 +- content/posts/2008-03-31-love-the-parallax.md | 3 +- ...-web-design-tips-from-leonardo-da-vinci.md | 3 +- .../posts/2008-04-04-aperture-file-types.md | 3 +- ...4-london-police-afraid-of-photographers.md | 3 +- ...guide-to-icons-how-to-smashing-magazine.md | 2 +- ...4-05-first-principles-for-choosing-type.md | 2 +- ...own-safari-features-worth-switching-for.md | 4 +- ...announced-various-photographers-awarded.md | 3 +- ...ing-the-image-icons-in-mac-os-x-leopard.md | 2 +- ...2008-04-09-measuring-the-color-of-light.md | 3 +- ...0-the-story-behind-the-pulitzer-picture.md | 3 +- ...8-04-11-photographers-strike-back-in-uk.md | 3 +- ...ion-helper-for-apples-aperture-released.md | 2 +- ...kit-team-introduced-css-based-gradients.md | 2 +- ...lever-text-effects-with-css-text-shadow.md | 7 +-- ...4-22-apple-releases-sdk-for-aperture-21.md | 2 +- ...someness-from-the-webkit-team-css-masks.md | 5 +- ...anoscan-lide-500f-with-mac-os-x-leopard.md | 9 ++-- ...can-images-directly-into-apple-aperture.md | 10 ++-- ...7-high-quality-watermarks-with-aperture.md | 2 +- ...first-available-aperture-editing-plugin.md | 2 +- ...-the-15-best-new-features-of-aperture-2.md | 2 +- ...s-beautiful-indiana-jones-desktop-icons.md | 2 +- ...tographic-software-to-work-with-leopard.md | 3 +- ...perture-adjustment-plugins-have-arrived.md | 2 +- ...eases-fisheye-hemi-plug-in-for-aperture.md | 2 +- ...05-21-awesome-parallax-optical-illusion.md | 2 +- ...-css-parallax-effect-12-creative-usages.md | 5 +- ...ew-all-in-one-aperture-plug-in-released.md | 2 +- content/posts/2008-06-01-chives.md | 4 +- .../2008-06-02-tweet-im-on-twitter-now.md | 2 +- ...and-the-history-of-the-first-photograph.md | 5 +- ...3-niepces-camera-obscura-wallpaper-pack.md | 2 +- .../2008-06-04-helvetica-typewriter-keys.md | 1 - .../2008-06-11-safari-4-developer-preview.md | 9 ++-- ...tip-borders-titles-plug-in-for-aperture.md | 2 +- ...mac-file-server-and-time-machine-volume.md | 11 ++--- ...-is-edit-for-aperture-now-updated-to-12.md | 2 +- ...25-new-canon-stuff-xs-eos-1000-430ex-ii.md | 3 +- content/posts/2008-06-30-stone-head.md | 2 - ...ack-to-normal-on-kremaliciouscom-almost.md | 4 +- ...8-new-aperture-plug-ins-jade-and-ptlens.md | 2 +- .../2008-07-11-enjoy-kremaliciousiphone.md | 4 +- ...e-plug-in-nik-announces-silver-efex-pro.md | 2 +- ...s-25-get-rid-of-that-sluggish-dashboard.md | 3 +- content/posts/2008-07-23-leaf-life.md | 4 -- ...ps-for-journalists-reporting-from-china.md | 3 +- ...reate-a-mobile-encrypted-aperture-vault.md | 10 ++-- ...ja-finally-available-for-apple-aperture.md | 2 +- ...8-08-22-the-kremalicious-marsedit-style.md | 3 +- content/posts/2008-08-26-icy-box-icons.md | 2 +- ...rchitect-and-facade-theming-for-leopard.md | 6 +-- ...-08-28-canon-eos-50d-new-lens-announced.md | 3 +- ...1-a-new-browser-is-coming-google-chrome.md | 3 +- content/posts/2008-09-23-a-long-time-ago.md | 3 +- ...9-23-futurama-mars-university-wallpaper.md | 6 +-- content/posts/2008-10-23-coffee-cup-icon.md | 2 +- ...most-incredible-coffee-icons-on-the-web.md | 3 +- ...e-guide-to-watermarks-in-apple-aperture.md | 2 +- ...a-custom-gravatar-image-in-wordpress-27.md | 2 +- ...yling-author-comments-with-wordpress-27.md | 2 +- .../posts/2009-01-05-the-mac-in-futurama.md | 9 ++-- content/posts/2009-02-01-portal-thingy.md | 3 +- content/posts/2009-02-17-out-of-whale-oil.md | 8 ++-- ...imate-coda-wordpress-share-link-bonanza.md | 8 ++-- content/posts/2009-06-04-twitter-crisp.md | 2 +- content/posts/2009-06-24-adiumeetie.md | 8 ++-- content/posts/2009-09-05-delibar.md | 2 +- .../2009-12-17-wordpress-post-thumbnails.md | 6 +-- content/posts/2010-02-04-ipixelpad.md | 4 +- content/posts/2010-03-27-office-desk.md | 2 - content/posts/2010-07-03-momcorp.md | 6 +-- content/posts/2010-07-18-typeface-condoms.md | 3 +- content/posts/2010-08-07-bonsai.md | 2 - content/posts/2010-09-01-gdr-helvetica.md | 3 +- content/posts/2010-12-11-iphone-coasters.md | 2 - ...29-basically-the-monolith-is-on-my-desk.md | 2 - ...29-free-monkey-breath-not-soylent-green.md | 2 - content/posts/2011-01-08-enjoying-paper.md | 2 - .../posts/2011-01-08-glowing-star-inside.md | 2 - .../posts/2011-01-18-historic-flood-levels.md | 2 - .../posts/2011-10-11-broken-nexus-s-screen.md | 2 - content/posts/2011-12-15-badged.md | 3 +- content/posts/2012-02-26-mk-v2.md | 3 +- content/posts/2012-03-04-relaxing-cat.md | 2 - content/posts/2012-04-03-blaue-turme.md | 2 - content/posts/2012-04-03-skeletor.md | 4 -- .../posts/2012-04-03-train-station-leipzig.md | 4 -- .../posts/2012-04-04-android-tab-conundrum.md | 10 ++-- .../posts/2012-04-05-current-sushi-status.md | 4 -- content/posts/2012-04-07-buna.md | 4 -- ...012-04-07-cat-enjoying-a-good-ipad-game.md | 4 -- content/posts/2012-04-07-ipad-porn.md | 4 -- content/posts/2012-04-07-opera.md | 4 -- .../2012-04-08-common-kitchen-decoration.md | 4 -- .../2012-04-08-graffiti-old-school-style.md | 4 -- ...2012-04-20-the-origins-of-the-blink-tag.md | 2 +- .../posts/2012-04-30-announcing-sketch2.md | 3 +- ...oropen-free-access-to-academic-research.md | 2 - content/posts/2012-05-03-antique-chrome.md | 4 -- .../2012-05-04-world-press-photo-2012.md | 2 +- ...9-media-query-asset-downloading-results.md | 2 +- ...5-12-nielsen-vs-clark-theyre-both-wrong.md | 2 +- ...sponsive-images-solution-should-you-use.md | 2 +- .../2012-05-14-welcome-to-kremalicious2.md | 5 +- content/posts/2012-05-15-wp-icons-template.md | 3 +- content/posts/2012-05-21-why-comic-sans.md | 2 +- ...hoo-killed-flickr-and-lost-the-internet.md | 3 +- ...-and-web-standards-at-the-turning-point.md | 2 +- ...23-like-modern-heating-only-more-badass.md | 4 -- .../2012-05-26-html-for-icon-font-usage.md | 3 +- content/posts/2012-05-27-balloon.md | 4 -- ...se-move-past-apples-silly-faux-real-uis.md | 3 +- ...012-06-13-retina-icons-in-wordpress-3-4.md | 5 +- content/posts/2012-06-27-typography-window.md | 2 - content/posts/2012-06-30-why-files-exist.md | 3 +- .../posts/2012-07-04-newton-reconsidered.md | 2 +- .../2012-07-07-what-makes-twitter-twitter.md | 2 - ...nd-colliders-the-first-photo-on-the-web.md | 2 +- ...your-web-site-to-the-windows-8-metro-ui.md | 3 +- .../index.md | 5 +- ...puter-generated-graphics-film-from-1963.md | 2 +- content/posts/2012-07-20-mmmmh-coffee.md | 2 - content/posts/2012-08-07-projectpurple.md | 7 +-- content/posts/2012-08-08-amazingly-early.md | 2 - content/posts/2012-08-20-im-joining-ezeep.md | 2 +- content/posts/2012-08-25-so-much-room.md | 2 - .../posts/2012-09-07-huge-station-is-huge.md | 2 - content/posts/2012-09-10-subway-firefox.md | 2 - content/posts/2012-09-12-sweet-typography.md | 2 - content/posts/2012-09-14-bvg-dos.md | 2 - .../posts/2012-09-26-designing-with-code.md | 3 +- content/posts/2013-02-17-castle-garden.md | 2 - .../2013-02-17-ezeep-android-app-design.md | 1 - content/posts/2013-02-17-ezeep-office-view.md | 1 - content/posts/2013-05-23-ezeep-birds.md | 2 +- content/posts/2013-05-23-ezeep-origami.md | 1 - ...ips-on-relaunching-your-startup-website.md | 2 +- .../2013-07-13-enterprise-software-sucks.md | 2 +- ...nology-can-hurt-or-harm-our-inner-state.md | 2 +- ...-photo-startup-is-going-out-of-business.md | 3 +- ...y-we-are-allowed-to-hate-silicon-valley.md | 1 - ...12-11-silicon-valley-isnt-a-meritocracy.md | 2 - .../posts/2014-03-10-just-a-normal-sunday.md | 1 - content/posts/2014-03-15-potsdam.md | 1 - .../posts/2014-03-17-typographic-diamond.md | 1 - content/posts/2014-04-26-ai-weiwei-stools.md | 1 - .../2014-06-07-airfield-reference-point.md | 1 - ...-anton-henning-heimat-schaffen-simpsons.md | 1 - ...9-thanks-for-the-tip-little-orange-blob.md | 1 - ...-hindu-temple-appears-around-the-corner.md | 1 - .../2015-04-09-most-surprising-dog-i-know.md | 1 - ...-obligatory-it-s-summer-in-berlin-photo.md | 1 - ...hildhood-toys-hang-painted-in-a-gallery.md | 1 - content/posts/2015-04-25-tiny-tiny-demons.md | 1 - ...2015-08-02-simple-tor-setup-on-mac-os-x.md | 10 ++-- .../posts/2015-09-13-css-app-store-badges.md | 7 +-- ...udi-knows-how-to-impress-with-a-ceiling.md | 1 - .../posts/2016-02-27-streets-of-el-raval.md | 1 - content/posts/2016-03-02-a-storm-is-coming.md | 1 - ...7-02-13-keith-haring-vandalizing-a-wall.md | 1 - .../posts/2017-02-13-streets-of-el-born.md | 1 - .../posts/2017-02-14-new-passion-facade.md | 1 - .../posts/2017-02-16-coolhaven-rotterdam.md | 1 - content/posts/2017-02-17-behind-the-art.md | 1 - content/posts/2017-02-19-rotterdam-coats.md | 1 - ...2017-02-21-david-chipperfield-staircase.md | 1 - content/posts/2017-02-26-eu-gotham-city.md | 1 - content/posts/2017-02-27-amsterdam-cliche.md | 1 - .../2017-02-27-its-dark-and-i-dont-exist.md | 1 - content/posts/2017-02-28-stedelijk-museum.md | 1 - .../2017-02-28-temple-guardian-rijksmuseum.md | 1 - .../2017-02-28-watching-the-night-watch.md | 1 - .../2017-04-16-hamburgs-elbphilharmonie.md | 1 - ...017-07-05-kapaleeshwarar-temple-chennai.md | 1 - ...7-07-08-kochis-streetart-game-is-strong.md | 1 - ...017-07-09-orphaned-elephant-with-friend.md | 1 - .../posts/2017-07-10-kochis-dhobhi-ghat.md | 1 - ...17-07-13-mumbai-hand-painted-typography.md | 1 - ...17-07-13-obligatory-gate-of-india-photo.md | 1 - ...pati-shivaji-maharaj-vastu-sangrahalaya.md | 1 - .../2017-11-10-acropolis-the-erechtheum.md | 1 - .../2017-11-10-acropolis-the-parthenon.md | 1 - .../2017-11-10-acropolis-the-propylaea.md | 1 - content/posts/2017-12-16-sagrada-familia.md | 1 - content/posts/2017-12-27-sao-paulo-traffic.md | 1 - ...-01-04-passagem-literaria-da-consolacao.md | 1 - content/posts/2018-01-05-samba-school.md | 1 - content/redirects.yml | 8 ---- gatsby-node.js | 22 +-------- src/components/molecules/Menu.jsx | 20 ++++---- src/components/molecules/PostMeta.jsx | 15 +++--- src/components/molecules/PostMeta.module.scss | 46 +++++++++---------- src/templates/Archive.jsx | 20 +------- src/templates/Post.jsx | 1 - 207 files changed, 249 insertions(+), 434 deletions(-) delete mode 100644 content/redirects.yml diff --git a/content/posts/2005-07-26-beaucarnea-leafs.md b/content/posts/2005-07-26-beaucarnea-leafs.md index 00153ffb..e3b1bdb6 100644 --- a/content/posts/2005-07-26-beaucarnea-leafs.md +++ b/content/posts/2005-07-26-beaucarnea-leafs.md @@ -6,8 +6,6 @@ image: ../media/img_1820-Version-4.jpg author: Matthias Kretschmann date: 2005-07-26 11:44:49+00:00 - -category: photos --- [Photo on 500px](http://500px.com/photo/2661202) [Photo on flickr](http://www.flickr.com/photos/krema/6821597484) diff --git a/content/posts/2005-08-02-snail-on-a-leaf.md b/content/posts/2005-08-02-snail-on-a-leaf.md index c71604ec..2efbab5c 100644 --- a/content/posts/2005-08-02-snail-on-a-leaf.md +++ b/content/posts/2005-08-02-snail-on-a-leaf.md @@ -6,8 +6,6 @@ image: ../media/schnecke_blatt.jpg author: Matthias Kretschmann date: 2005-08-02 11:39:04+00:00 - -category: photos --- [Photo on flickr](http://www.flickr.com/photos/krema/6965150181/in/photostream/) [Photo on 500px](http://500px.com/photo/5629909) diff --git a/content/posts/2006-07-23-electricity.md b/content/posts/2006-07-23-electricity.md index adc8e9e1..f4065f01 100644 --- a/content/posts/2006-07-23-electricity.md +++ b/content/posts/2006-07-23-electricity.md @@ -6,8 +6,6 @@ image: ../media/MG_5885_2006-7-23.jpg author: Matthias Kretschmann date: 2006-07-23 11:36:28+00:00 - -category: photos --- [Photo on 500px](http://500px.com/photo/5629510) [Photo on flickr](http://www.flickr.com/photos/krema/6965105709) diff --git a/content/posts/2006-07-23-floating-sky.md b/content/posts/2006-07-23-floating-sky.md index f1064f13..454426ae 100644 --- a/content/posts/2006-07-23-floating-sky.md +++ b/content/posts/2006-07-23-floating-sky.md @@ -6,8 +6,6 @@ image: ../media/floating-sky-1.jpg author: Matthias Kretschmann date: 2006-07-23 11:32:14+00:00 - -category: photos --- Combining of a lot of techniques: a long exposured HDR (3 bracketed shots) processed in Photomatix and finally polished in Photoshop. diff --git a/content/posts/2006-08-21-new-berlin-bridge.md b/content/posts/2006-08-21-new-berlin-bridge.md index e172d497..85741064 100644 --- a/content/posts/2006-08-21-new-berlin-bridge.md +++ b/content/posts/2006-08-21-new-berlin-bridge.md @@ -6,8 +6,6 @@ image: ../media/berliner_bruecke1-HDR-16bit.jpg author: Matthias Kretschmann date: 2006-08-21 11:22:34+00:00 - -category: photos --- ... in Halle (Saale) diff --git a/content/posts/2006-09-16-wooden-windmill.md b/content/posts/2006-09-16-wooden-windmill.md index 46bffadb..20b55a11 100644 --- a/content/posts/2006-09-16-wooden-windmill.md +++ b/content/posts/2006-09-16-wooden-windmill.md @@ -6,8 +6,6 @@ image: ../media/muehle_suhlendorf_HDR_Tonemapped_16bit.jpg author: Matthias Kretschmann date: 2006-09-16 11:47:16+00:00 - -category: photos --- [Photo on 500px](http://500px.com/photo/2661412) [Photo on flickr](http://www.flickr.com/photos/krema/6818985878) diff --git a/content/posts/2006-10-22-german-chancellery.md b/content/posts/2006-10-22-german-chancellery.md index 10b7faa0..29171c7e 100644 --- a/content/posts/2006-10-22-german-chancellery.md +++ b/content/posts/2006-10-22-german-chancellery.md @@ -6,8 +6,6 @@ image: ../media/bundeskanzleramt_01_HDR_tonemapped_16bit-Version-2.jpg author: Matthias Kretschmann date: 2006-10-22 11:43:00+00:00 - -category: photos --- [Photo on 500px](http://500px.com/photo/5650652) [Photo on flickr](http://www.flickr.com/photos/krema/6967670015) diff --git a/content/posts/2007-02-10-macbook-abstract.md b/content/posts/2007-02-10-macbook-abstract.md index bf09b233..e0925237 100644 --- a/content/posts/2007-02-10-macbook-abstract.md +++ b/content/posts/2007-02-10-macbook-abstract.md @@ -6,8 +6,6 @@ image: ../media/MG_9313_2007-02-10.jpg author: Matthias Kretschmann date: 2007-02-10 12:34:39+00:00 - -category: photos --- [Photo on flickr](http://www.flickr.com/photos/krema/2495391492) diff --git a/content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md b/content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md index ad2e18c9..efe06ee4 100644 --- a/content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md +++ b/content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md @@ -6,8 +6,8 @@ author: Matthias Kretschmann date: 2007-03-01 20:50:32+00:00 -category: photography tags: +- photography - aperture coinhive: true --- diff --git a/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md b/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md index efcf4f03..6399ec99 100644 --- a/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md +++ b/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md @@ -4,8 +4,8 @@ title: Finally... a universal scanner driver for the Canon CanoScan LiDE 500F fo author: Matthias Kretschmann date: 2007-06-11 18:44:28+00:00 -category: photography tags: +- photography - tutorial - osx - macos diff --git a/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md b/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md index 5d9e9c85..d7d8b061 100644 --- a/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md +++ b/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md @@ -6,9 +6,10 @@ author: Matthias Kretschmann date: 2008-02-26 23:24:17+00:00 -category: design +category: tags: +- design - tutorial - osx - macos diff --git a/content/posts/2008-03-30-launch-of-kremaliciouscom.md b/content/posts/2008-03-30-launch-of-kremaliciouscom.md index 21d2bf88..08f26dd7 100644 --- a/content/posts/2008-03-30-launch-of-kremaliciouscom.md +++ b/content/posts/2008-03-30-launch-of-kremaliciouscom.md @@ -6,9 +6,9 @@ author: Matthias Kretschmann date: 2008-03-30 19:24:21+00:00 -category: personal tags: - - wordpress +- personal +- wordpress --- A fresh start of my website under the new domain www.kremalicious.com and with [Wordpress](http://www.wordpress.org) under the hood. My former website under [www.jpberlin.de/krema](http://www.jpberlin.de/krema) will no longer be updated and will be deleted soon. I just implemented a few posts from the old weblog. diff --git a/content/posts/2008-03-31-love-the-parallax.md b/content/posts/2008-03-31-love-the-parallax.md index a39cf290..610765f8 100644 --- a/content/posts/2008-03-31-love-the-parallax.md +++ b/content/posts/2008-03-31-love-the-parallax.md @@ -6,7 +6,8 @@ author: Matthias Kretschmann date: 2008-03-31 20:54:45+00:00 -category: design +tags: +- design --- ![parallax](../media/parallax.png)If you resize your browser window while you are browsing this website you can see the black polaroids in my header fly and move at different speed on three layers. Pretty cool, huh? diff --git a/content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md b/content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md index c40b9d0d..d134bead 100644 --- a/content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md +++ b/content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md @@ -7,7 +7,8 @@ author: Matthias Kretschmann date: 2008-04-04 18:43:05+00:00 -category: design +tags: +- design --- An awesome creative idea for a blog post about Web-Design from Joshua Clanton: diff --git a/content/posts/2008-04-04-aperture-file-types.md b/content/posts/2008-04-04-aperture-file-types.md index 615b4a31..5f01151b 100644 --- a/content/posts/2008-04-04-aperture-file-types.md +++ b/content/posts/2008-04-04-aperture-file-types.md @@ -6,9 +6,10 @@ download: ../media/aperturefiletypes_by_kremalicious.zip author: Matthias Kretschmann date: 2008-04-04T01:55:54.000Z -category: goodies +category: coinhive: true tags: + - goodies - icon redirect_from: - "/new-goodies-aperture-file-types-icons/" diff --git a/content/posts/2008-04-04-london-police-afraid-of-photographers.md b/content/posts/2008-04-04-london-police-afraid-of-photographers.md index 8c60aab7..eda9ffaf 100644 --- a/content/posts/2008-04-04-london-police-afraid-of-photographers.md +++ b/content/posts/2008-04-04-london-police-afraid-of-photographers.md @@ -6,7 +6,8 @@ author: Matthias Kretschmann date: 2008-04-04 19:01:09+00:00 -category: photography +tags: +- photography --- ![London cops](../media/londonpolice.jpg) diff --git a/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md b/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md index 9abbc9a5..25315ce3 100644 --- a/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md +++ b/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md @@ -7,8 +7,8 @@ author: Matthias Kretschmann date: 2008-04-04 10:47:23+00:00 -category: design tags: + - design - osx - macos - icon diff --git a/content/posts/2008-04-05-first-principles-for-choosing-type.md b/content/posts/2008-04-05-first-principles-for-choosing-type.md index 2dd68bef..96e01567 100644 --- a/content/posts/2008-04-05-first-principles-for-choosing-type.md +++ b/content/posts/2008-04-05-first-principles-for-choosing-type.md @@ -7,8 +7,8 @@ author: Matthias Kretschmann date: 2008-04-05 14:01:51+00:00 -category: design tags: +- design - typography --- diff --git a/content/posts/2008-04-06-9-lesser-known-safari-features-worth-switching-for.md b/content/posts/2008-04-06-9-lesser-known-safari-features-worth-switching-for.md index 7dbb8696..5a406b9d 100644 --- a/content/posts/2008-04-06-9-lesser-known-safari-features-worth-switching-for.md +++ b/content/posts/2008-04-06-9-lesser-known-safari-features-worth-switching-for.md @@ -4,7 +4,9 @@ type: link title: 9 Lesser Known Safari Features linkurl: http://www.danielmiessler.com/blog/9-lesser-known-safari-features-worth-switching-for author: Matthias Kretschmann -category: design + +tags: +- design date: 2008-04-06 21:21:22+00:00 --- diff --git a/content/posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md b/content/posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md index 18039a12..8e3636be 100644 --- a/content/posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md +++ b/content/posts/2008-04-08-pulitzer-price-winners-2008-announced-various-photographers-awarded.md @@ -6,7 +6,8 @@ author: Matthias Kretschmann date: 2008-04-08 15:48:14+00:00 -category: photography +tags: +- photography --- ![Pulitzer Price](../media/pulitzer.png) diff --git a/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md b/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md index ac2f8669..95e09205 100644 --- a/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md +++ b/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md @@ -6,9 +6,9 @@ author: Matthias Kretschmann date: 2008-04-09 13:13:42+00:00 -category: design coinhive: true tags: + - design - tutorial - osx - macos diff --git a/content/posts/2008-04-09-measuring-the-color-of-light.md b/content/posts/2008-04-09-measuring-the-color-of-light.md index ddbf89ac..7eea5202 100644 --- a/content/posts/2008-04-09-measuring-the-color-of-light.md +++ b/content/posts/2008-04-09-measuring-the-color-of-light.md @@ -7,7 +7,8 @@ author: Matthias Kretschmann date: 2008-04-09 17:44:23+00:00 -category: photography +tags: +- photography --- Ever wondered what the heck 6500 Kelvin has to do with your photos? Here's an in-depth article from the blog of [James Duncan Davidson](http://duncandavidson.com/blog/) for better understanding of the whole color and white balance thing in photography. diff --git a/content/posts/2008-04-10-the-story-behind-the-pulitzer-picture.md b/content/posts/2008-04-10-the-story-behind-the-pulitzer-picture.md index 6427fac9..97149287 100644 --- a/content/posts/2008-04-10-the-story-behind-the-pulitzer-picture.md +++ b/content/posts/2008-04-10-the-story-behind-the-pulitzer-picture.md @@ -7,7 +7,8 @@ author: Matthias Kretschmann date: 2008-04-10 13:16:47+00:00 -category: photography +tags: +- photography --- 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/): diff --git a/content/posts/2008-04-11-photographers-strike-back-in-uk.md b/content/posts/2008-04-11-photographers-strike-back-in-uk.md index 7a09ccb7..d7ce9cba 100644 --- a/content/posts/2008-04-11-photographers-strike-back-in-uk.md +++ b/content/posts/2008-04-11-photographers-strike-back-in-uk.md @@ -7,7 +7,8 @@ author: Matthias Kretschmann date: 2008-04-11 14:16:51+00:00 -category: photography +tags: +- photography --- [![London police afraid of photographers](../media/londonpolice.jpg)](../media/londonpolice.jpg) diff --git a/content/posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md b/content/posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md index ae120b97..3c73428e 100644 --- a/content/posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md +++ b/content/posts/2008-04-14-new-automation-helper-for-apples-aperture-released.md @@ -6,9 +6,9 @@ author: Matthias Kretschmann date: 2008-04-14 13:51:39+00:00 -category: photography coinhive: true tags: +- photography - aperture --- diff --git a/content/posts/2008-04-15-webkit-team-introduced-css-based-gradients.md b/content/posts/2008-04-15-webkit-team-introduced-css-based-gradients.md index 57e71c59..0cb03931 100644 --- a/content/posts/2008-04-15-webkit-team-introduced-css-based-gradients.md +++ b/content/posts/2008-04-15-webkit-team-introduced-css-based-gradients.md @@ -6,8 +6,8 @@ author: Matthias Kretschmann date: 2008-04-15 17:36:34+00:00 -category: design tags: +- design - css --- diff --git a/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md b/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md index c7db1e96..1989e835 100644 --- a/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md +++ b/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md @@ -6,10 +6,11 @@ author: Matthias Kretschmann date: "2008-04-17 01:32:13+00:00" -category: design +category: tags: - - css - - tutorial + - design + - css + - tutorial coinhive: true diff --git a/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md b/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md index 77c07fd5..2a38b0d1 100644 --- a/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md +++ b/content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md @@ -6,8 +6,8 @@ author: Matthias Kretschmann date: 2008-04-22 05:58:41+00:00 -category: photography tags: +- photography - aperture --- diff --git a/content/posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md b/content/posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md index 86f65909..666f9eab 100644 --- a/content/posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md +++ b/content/posts/2008-04-28-more-awesomeness-from-the-webkit-team-css-masks.md @@ -6,10 +6,9 @@ author: Matthias Kretschmann date: 2008-04-28 12:53:18+00:00 -category: design - tags: - - css + - design + - css --- ![WebKit](../media/webkit.png)They won't stop with their cutting edge love. After having [text-shadow](http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/) implemented since many years and having a bunch of other cool stuff implemented like CSS gradients or CSS box-shadow the WebKit team freshly announced a new cool feature: CSS alpha masks. diff --git a/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md b/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md index 703759eb..3bc6348f 100644 --- a/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md +++ b/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md @@ -7,13 +7,12 @@ image: ../media/canoscanlide500f.jpg date: 2008-05-04 16:04:48+00:00 - -category: photography coinhive: true tags: - - tutorial - - osx - - macos + - photography + - tutorial + - osx + - macos --- A while ago I [wrote about my problems](http://www.kremalicious.com/2007/06/finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs/) finding a universal scanner driver from Canon for my CanoScan LiDE 500F to use it under Mac OS X. The solution was the Canon Asia website where a universal driver version was available. But since then Apple released Mac OS X 10.5 Leopard in october 2007 and the Canon driver with the version 11.2.4.0X stopped working on this new operating system. diff --git a/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md b/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md index 2e3a326e..ff386eed 100644 --- a/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md +++ b/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md @@ -7,13 +7,13 @@ image: ../media/aperturescan.png date: 2008-05-05 04:15:11+00:00 -category: photography coinhive: true tags: - - aperture - - tutorial - - osx - - macos + - photography + - aperture + - tutorial + - osx + - macos --- Wouldn't that be great? Hook up your scanner, fire up Aperture, click on Import and the images coming directly from your scanner plate? Although my scanner is shown as a source in the import dialogue you can't import images with it directly from Aperture. But using Preview/Image Capture and Automator you can bypass this limitation. So here's what you can do to scan directly into Aperture in 3 simple steps. diff --git a/content/posts/2008-05-07-high-quality-watermarks-with-aperture.md b/content/posts/2008-05-07-high-quality-watermarks-with-aperture.md index c869a8c8..cccbaac1 100644 --- a/content/posts/2008-05-07-high-quality-watermarks-with-aperture.md +++ b/content/posts/2008-05-07-high-quality-watermarks-with-aperture.md @@ -7,8 +7,8 @@ image: ../media/watermark_aperture.jpg date: 2008-05-07 03:27:25+00:00 -category: photography tags: +- photography - aperture - tutorial diff --git a/content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md b/content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md index 76243a59..f92c2cd2 100644 --- a/content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md +++ b/content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md @@ -6,8 +6,8 @@ author: Matthias Kretschmann date: 2008-05-07 19:21:34+00:00 -category: photography tags: +- photography - aperture --- diff --git a/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md b/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md index 8d660f10..d6971a64 100644 --- a/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md +++ b/content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md @@ -7,8 +7,8 @@ image: ../media/aperture15_7.png date: 2008-05-07 19:22:49+00:00 -category: photography tags: +- photography - aperture coinhive: true diff --git a/content/posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md b/content/posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md index c55f5c60..7c11d23f 100644 --- a/content/posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md +++ b/content/posts/2008-05-08-the-iconfactory-presents-beautiful-indiana-jones-desktop-icons.md @@ -6,8 +6,8 @@ author: Matthias Kretschmann date: 2008-05-08 15:47:48+00:00 -category: design tags: +- design - icon --- diff --git a/content/posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md b/content/posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md index 9e8375c6..bc2e29f6 100644 --- a/content/posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md +++ b/content/posts/2008-05-14-canon-updates-its-photographic-software-to-work-with-leopard.md @@ -6,7 +6,8 @@ author: Matthias Kretschmann date: 2008-05-14 10:01:15+00:00 -category: photography +tags: +- photography --- Canon has posted some updates for their photographic software on the Canon USA website: diff --git a/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md b/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md index 2dffadef..62cd4087 100644 --- a/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md +++ b/content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md @@ -6,8 +6,8 @@ author: Matthias Kretschmann date: 2008-05-18 05:00:01+00:00 -category: photography tags: +- photography - aperture coinhive: true diff --git a/content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md b/content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md index a109437b..cd6eca0b 100644 --- a/content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md +++ b/content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md @@ -6,8 +6,8 @@ author: Matthias Kretschmann date: 2008-05-19 13:05:23+00:00 -category: photography tags: +- photography - aperture --- diff --git a/content/posts/2008-05-21-awesome-parallax-optical-illusion.md b/content/posts/2008-05-21-awesome-parallax-optical-illusion.md index 2f8e68a6..e43da2ba 100644 --- a/content/posts/2008-05-21-awesome-parallax-optical-illusion.md +++ b/content/posts/2008-05-21-awesome-parallax-optical-illusion.md @@ -6,8 +6,8 @@ author: Matthias Kretschmann date: 2008-05-21 13:02:00+00:00 -category: design tags: +- design - css --- diff --git a/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md b/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md index 5d7d662c..827df0a3 100644 --- a/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md +++ b/content/posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md @@ -7,10 +7,9 @@ image: ../media/parallax-visualization_big.png date: 2008-05-22 20:01:12+00:00 -category: design - tags: - - css + - design + - css redirect_from: - /2008/05/showcasing-the-css-parallax-effect-12-creative-usages/ diff --git a/content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md b/content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md index cd1ca24b..4651cdb9 100644 --- a/content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md +++ b/content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md @@ -6,8 +6,8 @@ author: Matthias Kretschmann date: 2008-05-28 15:29:56+00:00 -category: photography tags: +- photography - aperture coinhive: true diff --git a/content/posts/2008-06-01-chives.md b/content/posts/2008-06-01-chives.md index 9f53a2e3..77daf14d 100644 --- a/content/posts/2008-06-01-chives.md +++ b/content/posts/2008-06-01-chives.md @@ -8,9 +8,9 @@ author: Matthias Kretschmann date: 2008-06-01 18:43:40+00:00 -category: goodies tags: - - wallpaper + - goodies + - wallpaper coinhive: true diff --git a/content/posts/2008-06-02-tweet-im-on-twitter-now.md b/content/posts/2008-06-02-tweet-im-on-twitter-now.md index ff28fae1..b5a98161 100644 --- a/content/posts/2008-06-02-tweet-im-on-twitter-now.md +++ b/content/posts/2008-06-02-tweet-im-on-twitter-now.md @@ -6,8 +6,8 @@ author: Matthias Kretschmann date: 2008-06-02 18:26:37+00:00 -category: personal tags: +- personal - twitter --- diff --git a/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md b/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md index bbf17767..ba951c11 100644 --- a/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md +++ b/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md @@ -8,10 +8,9 @@ author: Matthias Kretschmann date: 2008-06-03 14:34:03+00:00 -category: goodies - tags: - - icon +- goodies +- icon coinhive: true diff --git a/content/posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md b/content/posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md index e7cfc3ef..d7aa417b 100644 --- a/content/posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md +++ b/content/posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md @@ -8,8 +8,8 @@ author: Matthias Kretschmann date: 2008-06-03 13:32:24+00:00 -category: goodies tags: +- goodies - wallpaper coinhive: true diff --git a/content/posts/2008-06-04-helvetica-typewriter-keys.md b/content/posts/2008-06-04-helvetica-typewriter-keys.md index 353441e2..43d97dff 100644 --- a/content/posts/2008-06-04-helvetica-typewriter-keys.md +++ b/content/posts/2008-06-04-helvetica-typewriter-keys.md @@ -7,7 +7,6 @@ author: Matthias Kretschmann date: 2008-06-04 11:41:01+00:00 -category: photos tags: - typography --- diff --git a/content/posts/2008-06-11-safari-4-developer-preview.md b/content/posts/2008-06-11-safari-4-developer-preview.md index b7feca30..f48c21a9 100644 --- a/content/posts/2008-06-11-safari-4-developer-preview.md +++ b/content/posts/2008-06-11-safari-4-developer-preview.md @@ -6,11 +6,12 @@ author: Matthias Kretschmann date: 2008-06-11 10:37:07+00:00 -category: design +category: tags: - - osx - - macos - - css + - design + - osx + - macos + - css --- ![Safari](../media/safari-logo.png)Apple released a developer preview of the upcoming version of its web browser Safari to registered Developers. The Safari 4 Developer Preview is available for Mac OS X Tiger/Leopard and Windows. While the main changes are not visible to the user the most significant visible new feature is the overhauled Web Inspector. diff --git a/content/posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md b/content/posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md index 98232b83..b7fdc4f5 100644 --- a/content/posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md +++ b/content/posts/2008-06-17-quick-tip-borders-titles-plug-in-for-aperture.md @@ -6,8 +6,8 @@ author: Matthias Kretschmann date: 2008-06-17 15:21:57+00:00 -category: photography tags: +- photography - aperture --- diff --git a/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md b/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md index 711c4543..1223e8ce 100644 --- a/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md +++ b/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md @@ -8,13 +8,12 @@ image: ../media/ubuntu_mac_feature.jpg date: 2008-06-19 03:08:11+00:00 updated: 2016-06-12 14:29:11+00:00 - -category: design tags: - - tutorial - - osx - - macos - - ubuntu + - design + - tutorial + - osx + - macos + - ubuntu coinhive: true diff --git a/content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md b/content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md index f5a93a38..2d3ff1fc 100644 --- a/content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md +++ b/content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md @@ -6,8 +6,8 @@ author: Matthias Kretschmann date: 2008-06-25 15:29:22+00:00 -category: photography tags: +- photography - aperture --- diff --git a/content/posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md b/content/posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md index 388fbaeb..95bc2df9 100644 --- a/content/posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md +++ b/content/posts/2008-06-25-new-canon-stuff-xs-eos-1000-430ex-ii.md @@ -6,7 +6,8 @@ author: Matthias Kretschmann date: 2008-06-25 16:41:59+00:00 -category: photography +tags: +- photography --- ![Digital Rebel XS/EOS 1000D ](../media/canon1000d.png)After the latest Digital Photo Professional update (DPP 3.4.1.1) [revealed some evidence about an upcoming Canon EOS Rebel XS/1000D](http://www.bobatkins.com/photography/digital/canon_xs_1000D_dpp34.html), Canon finally introduced this new entry-level DSLR this month. The [EOS Digital Rebel XS/1000D/Kiss F](http://www.canon-europe.com/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1000D/index.asp) ([full product specifications](http://www.canon-europe.com/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1000D/index.asp?specs=1)) is technically a hybrid between hardware and features found in Canon's entry-level cameras from the past: the 7-point autofocus system comes from the XT/350D, the Digic III processor is the same as in the XSi/450D and the Live View feature is implemented with the same features as found in the XSi/450D. diff --git a/content/posts/2008-06-30-stone-head.md b/content/posts/2008-06-30-stone-head.md index 4fecb288..aed013f8 100644 --- a/content/posts/2008-06-30-stone-head.md +++ b/content/posts/2008-06-30-stone-head.md @@ -6,8 +6,6 @@ image: ../media/stonehead.jpg author: Matthias Kretschmann date: 2008-06-30 11:26:14+00:00 - -category: photos --- A stone made head which can be twittled. Halle(Saale)/Germany. Heavy Color Adjustements in Aperture 2.1 diff --git a/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md b/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md index 592229fb..07be34e0 100644 --- a/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md +++ b/content/posts/2008-07-01-everything-back-to-normal-on-kremaliciouscom-almost.md @@ -6,9 +6,9 @@ author: Matthias Kretschmann date: 2008-07-01 16:39:02+00:00 -category: personal tags: - - wordpress +- personal +- wordpress --- ![Server screwed](../media/xserve_screwed.png)As you may have noticed, kremalicious.com was a bit screwed in the last week and some of you have asked me via mail and twitter what exactly was wrong. So to satisfy the curious geek in you I will provide some informations about it. diff --git a/content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md b/content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md index 4d795055..a2d10f14 100644 --- a/content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md +++ b/content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md @@ -6,8 +6,8 @@ author: Matthias Kretschmann date: 2008-07-08 19:19:54+00:00 -category: photography tags: +- photography - aperture --- diff --git a/content/posts/2008-07-11-enjoy-kremaliciousiphone.md b/content/posts/2008-07-11-enjoy-kremaliciousiphone.md index 19760b5a..25013aef 100644 --- a/content/posts/2008-07-11-enjoy-kremaliciousiphone.md +++ b/content/posts/2008-07-11-enjoy-kremaliciousiphone.md @@ -6,9 +6,9 @@ author: Matthias Kretschmann date: 2008-07-11 00:20:22+00:00 -category: personal tags: - - wordpress +- personal +- wordpress --- ![](../media/kremaliciousiphone_thumb.png)I'm thrilled to announce that kremalicious.com now uses an iPhone optimized theme. When you browse this website with your iPhone everything will automagically switch to the new kremalicious iPhone theme which is simply called kremalicious{iPhone}. See those hip brackets? diff --git a/content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md b/content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md index f7c7baa2..3f9c965b 100644 --- a/content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md +++ b/content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md @@ -6,8 +6,8 @@ author: Matthias Kretschmann date: 2008-07-11 19:13:16+00:00 -category: photography tags: +- photography - aperture --- diff --git a/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md b/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md index ed1ccb2e..b687878a 100644 --- a/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md +++ b/content/posts/2008-07-15-wordpress-25-get-rid-of-that-sluggish-dashboard.md @@ -6,9 +6,8 @@ author: Matthias Kretschmann date: 2008-07-15 14:04:46+00:00 - -category: design tags: +- design - tutorial - wordpress --- diff --git a/content/posts/2008-07-23-leaf-life.md b/content/posts/2008-07-23-leaf-life.md index 089cf1e8..bcb72d8d 100644 --- a/content/posts/2008-07-23-leaf-life.md +++ b/content/posts/2008-07-23-leaf-life.md @@ -6,10 +6,6 @@ image: ../media/MG_1920.jpg author: Matthias Kretschmann date: 2008-07-23 20:38:57+00:00 - -category: photos -post_format: -- Image --- Having fun with Aperture and Silver Efex Pro. diff --git a/content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md b/content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md index 173d1957..f6dba4f8 100644 --- a/content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md +++ b/content/posts/2008-08-03-tips-for-journalists-reporting-from-china.md @@ -6,7 +6,8 @@ author: Matthias Kretschmann date: 2008-08-03 17:10:25+00:00 -category: photography +tags: +- photography --- ![Jingjing and Chacha are watching you](../media/jingjing_chacha_kremalicious.jpg) diff --git a/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md b/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md index 25264fd7..96a52d78 100644 --- a/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md +++ b/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md @@ -6,12 +6,12 @@ author: Matthias Kretschmann date: 2008-08-22 18:50:31+00:00 -category: photography tags: - - aperture - - tutorial - - osx - - macos + - photography + - aperture + - tutorial + - osx + - macos coinhive: true --- diff --git a/content/posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md b/content/posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md index 3c48efbb..e24c137e 100644 --- a/content/posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md +++ b/content/posts/2008-08-22-noise-ninja-finally-available-for-apple-aperture.md @@ -6,8 +6,8 @@ author: Matthias Kretschmann date: 2008-08-22 14:51:02+00:00 -category: photography tags: +- photography - aperture --- diff --git a/content/posts/2008-08-22-the-kremalicious-marsedit-style.md b/content/posts/2008-08-22-the-kremalicious-marsedit-style.md index d3ab3574..ccddae64 100644 --- a/content/posts/2008-08-22-the-kremalicious-marsedit-style.md +++ b/content/posts/2008-08-22-the-kremalicious-marsedit-style.md @@ -6,7 +6,8 @@ author: Matthias Kretschmann date: 2008-08-22 17:04:19+00:00 -category: goodies +tags: +- goodies --- ![The Kremalicious MarsEdit Style](../media/marsedit_kremalicious.png)Personally I blog everything with RedSweater's awesome application [MarsEdit](http://www.red-sweater.com/marsedit/). MarsEdit has a cool preview window included where you can see your writing live while you type. The formatting of this preview is based on simple HTML and CSS so the style is pretty customizable. diff --git a/content/posts/2008-08-26-icy-box-icons.md b/content/posts/2008-08-26-icy-box-icons.md index fbaffd16..09b2c28e 100644 --- a/content/posts/2008-08-26-icy-box-icons.md +++ b/content/posts/2008-08-26-icy-box-icons.md @@ -8,8 +8,8 @@ author: Matthias Kretschmann date: 2008-08-26 19:16:38+00:00 -category: goodies tags: +- goodies - icon redirect_from: diff --git a/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md b/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md index 59c7ad7c..4a9a8f3d 100644 --- a/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md +++ b/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md @@ -6,10 +6,10 @@ author: Matthias Kretschmann date: 2008-08-28 09:54:06+00:00 -category: design tags: - - osx - - macos + - design + - osx + - macos --- ![Architect icon](../media/architect-icon.jpg)There's good news for all you Mac OS X Leopard GUI Themer out there. While there's Panic's [Candybar](http://www.panic.com/candybar) for icon customization in OS X there is no application to alter all the user interface elements of Leopard. In Tiger there was an application called ShapeShifter but since the whole GUI in Leopard changed it stopped working. Architect and Façade to the rescue. diff --git a/content/posts/2008-08-28-canon-eos-50d-new-lens-announced.md b/content/posts/2008-08-28-canon-eos-50d-new-lens-announced.md index 5ad127f2..46ef0c44 100644 --- a/content/posts/2008-08-28-canon-eos-50d-new-lens-announced.md +++ b/content/posts/2008-08-28-canon-eos-50d-new-lens-announced.md @@ -6,7 +6,8 @@ author: Matthias Kretschmann date: 2008-08-28 11:28:33+00:00 -category: photography +tags: +- photography --- [![EOS 50D back](../media/eos_50D_front_thumb.png)](../media/eos_50D_front.png)The successor of the EOS 40D is (almost) here: Canon [officially announced](http://www.usa.canon.com/templatedata/pressrelease/20080826_eos50d.html) the Canon EOS 50D along with the new lens Canon EF-S 18-200/3.5-5.6IS. The EOS 50D and the new lens will be both available in October 2008, Canon says. diff --git a/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md b/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md index b4453b02..d3033c85 100644 --- a/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md +++ b/content/posts/2008-09-01-a-new-browser-is-coming-google-chrome.md @@ -7,9 +7,8 @@ image: ../media/googlechrome.png date: 2008-09-01 20:40:38+00:00 - -category: design tags: +- design - google --- diff --git a/content/posts/2008-09-23-a-long-time-ago.md b/content/posts/2008-09-23-a-long-time-ago.md index 7c613785..736d4ab7 100644 --- a/content/posts/2008-09-23-a-long-time-ago.md +++ b/content/posts/2008-09-23-a-long-time-ago.md @@ -7,9 +7,8 @@ author: Matthias Kretschmann date: 2008-09-23 20:33:48+00:00 -category: photos tags: - - mac + - mac --- ... this used to be a nice entry-level Apple monitor (Apple Multiple Scan 20). However, it took more than 10 years 'til it refused to display red and green. diff --git a/content/posts/2008-09-23-futurama-mars-university-wallpaper.md b/content/posts/2008-09-23-futurama-mars-university-wallpaper.md index 0d08dc27..140bf15b 100644 --- a/content/posts/2008-09-23-futurama-mars-university-wallpaper.md +++ b/content/posts/2008-09-23-futurama-mars-university-wallpaper.md @@ -7,10 +7,10 @@ author: Matthias Kretschmann date: 2008-09-23 23:22:16+00:00 -category: goodies tags: - - wallpaper - - futurama + - goodies + - wallpaper + - futurama coinhive: true diff --git a/content/posts/2008-10-23-coffee-cup-icon.md b/content/posts/2008-10-23-coffee-cup-icon.md index 815c7d76..0f4950f4 100644 --- a/content/posts/2008-10-23-coffee-cup-icon.md +++ b/content/posts/2008-10-23-coffee-cup-icon.md @@ -8,8 +8,8 @@ author: Matthias Kretschmann date: 2008-10-23 14:59:23+00:00 -category: goodies tags: +- goodies - icon --- diff --git a/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md b/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md index 2b6dee72..727316a1 100644 --- a/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md +++ b/content/posts/2008-10-23-the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web.md @@ -7,7 +7,8 @@ image: ../media/coffee-cup-icon-kremalicious.png date: 2008-10-23 02:23:39+00:00 -category: design +tags: +- design --- In this article I present you the finest icons of the fuel of a lot of designers and students (and other people too) available on the web. I've just released [my own coffee cup icon](/coffee-cup-icon) but this beverage seem to have inspired a lot of other beautiful icons especially for Mac OS X. diff --git a/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md b/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md index fb569abf..7c20d088 100644 --- a/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md +++ b/content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md @@ -7,8 +7,8 @@ image: ../media/watermark_aperture.jpg date: 2008-10-26 16:05:58+00:00 -category: photography tags: +- photography - aperture coinhive: true diff --git a/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md b/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md index 68534588..57f1828d 100644 --- a/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md +++ b/content/posts/2008-12-11-how-to-set-a-custom-gravatar-image-in-wordpress-27.md @@ -6,8 +6,8 @@ author: Matthias Kretschmann date: 2008-12-11 22:59:06+00:00 -category: design tags: +- design - tutorial - wordpress diff --git a/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md b/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md index ea026281..193e3263 100644 --- a/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md +++ b/content/posts/2008-12-13-howto-styling-author-comments-with-wordpress-27.md @@ -6,8 +6,8 @@ author: Matthias Kretschmann date: 2008-12-13 16:47:43+00:00 -category: design tags: +- design - tutorial - wordpress diff --git a/content/posts/2009-01-05-the-mac-in-futurama.md b/content/posts/2009-01-05-the-mac-in-futurama.md index 69452607..ee6b2f20 100644 --- a/content/posts/2009-01-05-the-mac-in-futurama.md +++ b/content/posts/2009-01-05-the-mac-in-futurama.md @@ -6,14 +6,13 @@ author: Matthias Kretschmann date: 2009-01-05 03:14:45+00:00 image: ../media/futurama-mac-teaser.png -category: design + tags: - - futurama - - mac + - design + - futurama + - mac coinhive: true - - --- Time for some Mac Futurama crossover geekiness! In a fun watching process I've compiled a list of all the references to Apple's Macintosh and other Apple products. In Futurama we mainly see references to the old, classic Macs running [System 6](http://en.wikipedia.org/wiki/Apple_System_Software_6), [System 7](http://en.wikipedia.org/wiki/System_7) or [OS 9](http://en.wikipedia.org/wiki/Mac_OS_9) ending with the colorful iMac G3. This is likely caused by the timeframe in which Matt Groening and David X. Cohen developed the first season of Futurama (1997-1999). diff --git a/content/posts/2009-02-01-portal-thingy.md b/content/posts/2009-02-01-portal-thingy.md index b719c11b..784cb3fe 100644 --- a/content/posts/2009-02-01-portal-thingy.md +++ b/content/posts/2009-02-01-portal-thingy.md @@ -7,7 +7,8 @@ author: Matthias Kretschmann date: 2009-02-01 06:01:28+00:00 -category: personal +tags: +- personal --- Just some self reference here. I've launched a slick new site under [matthiaskretschmann.com](http://matthiaskretschmann.com) today which has an absolute simple concept. It's kind of a digital business card site for being digitally present under my name. Beside that it has Links to my social media stuff so it's easier for you to stalk me. In the 90's we probably would have called it a Portal. diff --git a/content/posts/2009-02-17-out-of-whale-oil.md b/content/posts/2009-02-17-out-of-whale-oil.md index aede6c64..a3523b26 100644 --- a/content/posts/2009-02-17-out-of-whale-oil.md +++ b/content/posts/2009-02-17-out-of-whale-oil.md @@ -7,13 +7,13 @@ download: ../media/out-of-whale-oil-wall-by-kremalicious.zip author: Matthias Kretschmann date: 2009-02-17 20:11:55+00:00 - featured: true -category: goodies + tags: - - wallpaper - - futurama + - goodies + - wallpaper + - futurama coinhive: true diff --git a/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md b/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md index 88037985..1b0f2643 100644 --- a/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md +++ b/content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md @@ -7,10 +7,12 @@ author: Matthias Kretschmann date: 2009-03-29 23:12:15+00:00 -category: design +category: tags: - - tutorial - - wordpress + - design + - goodies + - tutorial + - wordpress coinhive: true --- diff --git a/content/posts/2009-06-04-twitter-crisp.md b/content/posts/2009-06-04-twitter-crisp.md index cff2f347..c9844834 100644 --- a/content/posts/2009-06-04-twitter-crisp.md +++ b/content/posts/2009-06-04-twitter-crisp.md @@ -8,8 +8,8 @@ author: Matthias Kretschmann date: 2009-06-04 00:16:40+00:00 -category: goodies tags: +- goodies - icon --- diff --git a/content/posts/2009-06-24-adiumeetie.md b/content/posts/2009-06-24-adiumeetie.md index 08fece79..bdeb3601 100644 --- a/content/posts/2009-06-24-adiumeetie.md +++ b/content/posts/2009-06-24-adiumeetie.md @@ -8,11 +8,11 @@ author: Matthias Kretschmann date: 2009-06-24 21:00:38+00:00 -category: goodies tags: - - icon - - osx - - macos + - goodies + - icon + - osx + - macos --- Here's a new desktop goodie for your pleasure. It's a replacement dock icon for the popular Mac IM client [Adium](http://adium.im/) following the style of atebit's excellent [Tweetie for Mac](http://www.atebits.com/tweetie-mac/) icon. diff --git a/content/posts/2009-09-05-delibar.md b/content/posts/2009-09-05-delibar.md index 6de926c3..1b797d93 100644 --- a/content/posts/2009-09-05-delibar.md +++ b/content/posts/2009-09-05-delibar.md @@ -8,8 +8,8 @@ author: Matthias Kretschmann date: 2009-09-05 19:07:31+00:00 -category: goodies tags: +- goodies - icon --- diff --git a/content/posts/2009-12-17-wordpress-post-thumbnails.md b/content/posts/2009-12-17-wordpress-post-thumbnails.md index 5a52963b..a106b4c6 100644 --- a/content/posts/2009-12-17-wordpress-post-thumbnails.md +++ b/content/posts/2009-12-17-wordpress-post-thumbnails.md @@ -6,10 +6,10 @@ author: Matthias Kretschmann date: 2009-12-17 04:00:21+00:00 -category: design tags: - - tutorial - - wordpress + - design + - tutorial + - wordpress coinhive: true diff --git a/content/posts/2010-02-04-ipixelpad.md b/content/posts/2010-02-04-ipixelpad.md index 1a71363b..62f6534c 100644 --- a/content/posts/2010-02-04-ipixelpad.md +++ b/content/posts/2010-02-04-ipixelpad.md @@ -7,9 +7,9 @@ download: ../media/ipixelpad_by_kremalicious.zip author: Matthias Kretschmann date: 2010-02-04 15:21:42+00:00 - -category: goodies + tags: +- goodies - icon coinhive: true diff --git a/content/posts/2010-03-27-office-desk.md b/content/posts/2010-03-27-office-desk.md index 2f1a4c1b..88de12c6 100644 --- a/content/posts/2010-03-27-office-desk.md +++ b/content/posts/2010-03-27-office-desk.md @@ -6,8 +6,6 @@ image: ../media/Office-Desk.jpg author: Matthias Kretschmann date: 2010-03-27 21:31:35+00:00 - -category: photos --- Lost in this gorgeous figure. East Indian Rosewood, FTW! diff --git a/content/posts/2010-07-03-momcorp.md b/content/posts/2010-07-03-momcorp.md index aecb83fb..6e5124ab 100644 --- a/content/posts/2010-07-03-momcorp.md +++ b/content/posts/2010-07-03-momcorp.md @@ -8,10 +8,10 @@ author: Matthias Kretschmann date: 2010-07-03 17:12:53+00:00 -category: goodies tags: - - wallpaper - - futurama + - goodies + - wallpaper + - futurama coinhive: true --- diff --git a/content/posts/2010-07-18-typeface-condoms.md b/content/posts/2010-07-18-typeface-condoms.md index 09bb3eeb..d616f3b5 100644 --- a/content/posts/2010-07-18-typeface-condoms.md +++ b/content/posts/2010-07-18-typeface-condoms.md @@ -7,7 +7,8 @@ author: Matthias Kretschmann date: 2010-07-18 20:28:33+00:00 -category: photos +tags: +- typography --- Burg Giebichenstein Hochschule für Kunst & Design Halle Jahresausstellung 2010, Campus Design diff --git a/content/posts/2010-08-07-bonsai.md b/content/posts/2010-08-07-bonsai.md index f1118f11..113e0ee4 100644 --- a/content/posts/2010-08-07-bonsai.md +++ b/content/posts/2010-08-07-bonsai.md @@ -6,8 +6,6 @@ image: ../media/Bonsai-5-Version-2.jpg author: Matthias Kretschmann date: 2010-08-07 20:23:31+00:00 - -category: photos --- Still needs a cut diff --git a/content/posts/2010-09-01-gdr-helvetica.md b/content/posts/2010-09-01-gdr-helvetica.md index 3106e8e8..53effdcb 100644 --- a/content/posts/2010-09-01-gdr-helvetica.md +++ b/content/posts/2010-09-01-gdr-helvetica.md @@ -7,7 +7,8 @@ author: Matthias Kretschmann date: 2010-09-01 20:21:43+00:00 -category: photos +tags: +- typography --- Must be socialist Helvetica or something diff --git a/content/posts/2010-12-11-iphone-coasters.md b/content/posts/2010-12-11-iphone-coasters.md index b7c59f78..a9f5f296 100644 --- a/content/posts/2010-12-11-iphone-coasters.md +++ b/content/posts/2010-12-11-iphone-coasters.md @@ -6,8 +6,6 @@ image: ../media/iPhone-Coasters-1-Version-2.jpg author: Matthias Kretschmann date: 2010-12-11 21:19:29+00:00 - -category: photos --- Putting stuff under my coffee, iOS style. That's the "Home Set" from [iphoneappscoasters.com](http://iphoneappscoasters.com) diff --git a/content/posts/2010-12-29-basically-the-monolith-is-on-my-desk.md b/content/posts/2010-12-29-basically-the-monolith-is-on-my-desk.md index 9c7dbca8..b5f318d4 100644 --- a/content/posts/2010-12-29-basically-the-monolith-is-on-my-desk.md +++ b/content/posts/2010-12-29-basically-the-monolith-is-on-my-desk.md @@ -6,8 +6,6 @@ image: ../media/Basically-The-Monolith-Is-On-My-Desk.jpg author: Matthias Kretschmann date: 2010-12-29 15:47:12+00:00 - -category: photos --- Be careful: your mind will get blown when you stare at it for too long. TMA-1 Action Figure from [ThinkGeek](http://thinkgeek.com) diff --git a/content/posts/2010-12-29-free-monkey-breath-not-soylent-green.md b/content/posts/2010-12-29-free-monkey-breath-not-soylent-green.md index cbacd04a..75563919 100644 --- a/content/posts/2010-12-29-free-monkey-breath-not-soylent-green.md +++ b/content/posts/2010-12-29-free-monkey-breath-not-soylent-green.md @@ -6,8 +6,6 @@ image: ../media/Free-Monkey-Breath-Not-Soylent-Green.jpg author: Matthias Kretschmann date: 2010-12-29 21:16:55+00:00 - -category: photos --- Don't know where to start outlining why this is an awesome geeky bag diff --git a/content/posts/2011-01-08-enjoying-paper.md b/content/posts/2011-01-08-enjoying-paper.md index c1b9e775..e0516133 100644 --- a/content/posts/2011-01-08-enjoying-paper.md +++ b/content/posts/2011-01-08-enjoying-paper.md @@ -6,8 +6,6 @@ image: ../media/Enjoying-Paper.jpg author: Matthias Kretschmann date: 2011-01-08 15:43:14+00:00 - -category: photos --- Being a kid again and enjoying the package of a present (Thanks Dad!) diff --git a/content/posts/2011-01-08-glowing-star-inside.md b/content/posts/2011-01-08-glowing-star-inside.md index b938a8ab..46565b63 100644 --- a/content/posts/2011-01-08-glowing-star-inside.md +++ b/content/posts/2011-01-08-glowing-star-inside.md @@ -6,8 +6,6 @@ image: ../media/Glowing-Star-Inside.jpg author: Matthias Kretschmann date: 2011-01-08 15:45:26+00:00 - -category: photos --- Thanks Dad! diff --git a/content/posts/2011-01-18-historic-flood-levels.md b/content/posts/2011-01-18-historic-flood-levels.md index 93d1478d..532966d7 100644 --- a/content/posts/2011-01-18-historic-flood-levels.md +++ b/content/posts/2011-01-18-historic-flood-levels.md @@ -6,8 +6,6 @@ image: ../media/Historic-Flood-Levels.jpg author: Matthias Kretschmann date: 2011-01-18 15:40:12+00:00 - -category: photos --- dates ranging from 16th - 19th century diff --git a/content/posts/2011-10-11-broken-nexus-s-screen.md b/content/posts/2011-10-11-broken-nexus-s-screen.md index e10b69a1..3bee25b5 100644 --- a/content/posts/2011-10-11-broken-nexus-s-screen.md +++ b/content/posts/2011-10-11-broken-nexus-s-screen.md @@ -6,8 +6,6 @@ image: ../media/Broken-Nexus-S-Screen.jpg author: Matthias Kretschmann date: 2011-10-11 14:37:06+00:00 - -category: photos --- The good thing is it looks really cool, the bad thing is I can't use the screen anymore. diff --git a/content/posts/2011-12-15-badged.md b/content/posts/2011-12-15-badged.md index f1e97d06..c04d531f 100644 --- a/content/posts/2011-12-15-badged.md +++ b/content/posts/2011-12-15-badged.md @@ -8,9 +8,8 @@ updated: 2014-10-11 07:56:46+00:00 date: 2011-12-15 07:56:46+00:00 - -category: goodies tags: +- goodies - wordpress coinhive: true diff --git a/content/posts/2012-02-26-mk-v2.md b/content/posts/2012-02-26-mk-v2.md index f71b30a3..da9ae377 100644 --- a/content/posts/2012-02-26-mk-v2.md +++ b/content/posts/2012-02-26-mk-v2.md @@ -7,7 +7,8 @@ author: Matthias Kretschmann date: 2012-02-26 21:29:54+00:00 -category: personal +tags: +- personal --- Today I finally launched v2 of my personal site, still following the concept of a business card web site but with a portfolio added to it. You should totally [have a look](http://matthiaskretschmann.com). diff --git a/content/posts/2012-03-04-relaxing-cat.md b/content/posts/2012-03-04-relaxing-cat.md index dc9f7c27..695b77e8 100644 --- a/content/posts/2012-03-04-relaxing-cat.md +++ b/content/posts/2012-03-04-relaxing-cat.md @@ -7,9 +7,7 @@ author: Matthias Kretschmann date: 2012-03-04 08:00:32+00:00 -category: photos tags: -- instagram - sitamun --- diff --git a/content/posts/2012-04-03-blaue-turme.md b/content/posts/2012-04-03-blaue-turme.md index 2a223339..c5bf1595 100644 --- a/content/posts/2012-04-03-blaue-turme.md +++ b/content/posts/2012-04-03-blaue-turme.md @@ -6,8 +6,6 @@ image: ../media/Blaue-Tuerme-1.jpg author: Matthias Kretschmann date: 2012-04-03 12:41:01+00:00 - -category: photos --- [Photo on 500px](http://500px.com/photo/6350862) | [Photo on Flickr](http://www.flickr.com/photos/krema/6904523272/in/photostream) diff --git a/content/posts/2012-04-03-skeletor.md b/content/posts/2012-04-03-skeletor.md index 04ab523b..344b8e4e 100644 --- a/content/posts/2012-04-03-skeletor.md +++ b/content/posts/2012-04-03-skeletor.md @@ -6,10 +6,6 @@ image: ../media/6313cc1e7db611e180c9123138016265_7.jpg author: Matthias Kretschmann date: 2012-04-03 17:56:49+00:00 - -category: photos -tags: -- instagram --- diff --git a/content/posts/2012-04-03-train-station-leipzig.md b/content/posts/2012-04-03-train-station-leipzig.md index cb65b23d..3e4a0326 100644 --- a/content/posts/2012-04-03-train-station-leipzig.md +++ b/content/posts/2012-04-03-train-station-leipzig.md @@ -6,10 +6,6 @@ image: ../media/de2ac24c7db911e1b9f1123138140926_7.jpg author: Matthias Kretschmann date: 2012-04-03 18:21:44+00:00 - -category: photos -tags: -- instagram --- diff --git a/content/posts/2012-04-04-android-tab-conundrum.md b/content/posts/2012-04-04-android-tab-conundrum.md index 500bc150..d17f1300 100644 --- a/content/posts/2012-04-04-android-tab-conundrum.md +++ b/content/posts/2012-04-04-android-tab-conundrum.md @@ -1,13 +1,15 @@ --- -author: Matthias Kretschmann -date: 2012-04-04 14:24:30+00:00 type: post + title: The Android Tab Bar Conundrum. Again. image: ../media/tabs_overview.png -category: design +author: Matthias Kretschmann +date: 2012-04-04 14:24:30+00:00 + tags: - - android +- design +- android --- With [Instagram for Android](https://play.google.com/store/apps/details?id=com.instagram.android&hl=en) there's once again an app getting ported to Android from iOS which doesn't follow the platform specific guidelines with a lot of elements. But this time it's a bit complicated, let me explain. diff --git a/content/posts/2012-04-05-current-sushi-status.md b/content/posts/2012-04-05-current-sushi-status.md index 96a122b4..c48464c0 100644 --- a/content/posts/2012-04-05-current-sushi-status.md +++ b/content/posts/2012-04-05-current-sushi-status.md @@ -6,10 +6,6 @@ image: ../media/aff38e2c7f5311e1b10e123138105d6b_7.jpg author: Matthias Kretschmann date: 2012-04-05 19:15:20+00:00 - -category: photos -tags: -- instagram --- diff --git a/content/posts/2012-04-07-buna.md b/content/posts/2012-04-07-buna.md index 0d4acf06..20985a44 100644 --- a/content/posts/2012-04-07-buna.md +++ b/content/posts/2012-04-07-buna.md @@ -6,10 +6,6 @@ image: ../media/44af28f2805b11e18cf91231380fd29b_7.jpg author: Matthias Kretschmann date: 2012-04-07 02:42:08+00:00 - -category: photos -tags: -- instagram --- diff --git a/content/posts/2012-04-07-cat-enjoying-a-good-ipad-game.md b/content/posts/2012-04-07-cat-enjoying-a-good-ipad-game.md index f70e6bb6..453bef88 100644 --- a/content/posts/2012-04-07-cat-enjoying-a-good-ipad-game.md +++ b/content/posts/2012-04-07-cat-enjoying-a-good-ipad-game.md @@ -6,10 +6,6 @@ image: ../media/7838011c80ce11e19e4a12313813ffc0_7.jpg author: Matthias Kretschmann date: 2012-04-07 16:26:46+00:00 - -category: photos -tags: -- instagram --- diff --git a/content/posts/2012-04-07-ipad-porn.md b/content/posts/2012-04-07-ipad-porn.md index 750050d1..9f51d1b2 100644 --- a/content/posts/2012-04-07-ipad-porn.md +++ b/content/posts/2012-04-07-ipad-porn.md @@ -7,10 +7,6 @@ author: Matthias Kretschmann date: 2012-04-07 13:43:00+00:00 -category: photos -tags: -- instagram - coinhive: true --- diff --git a/content/posts/2012-04-07-opera.md b/content/posts/2012-04-07-opera.md index 595503d0..7d10d556 100644 --- a/content/posts/2012-04-07-opera.md +++ b/content/posts/2012-04-07-opera.md @@ -6,10 +6,6 @@ image: ../media/5df6e0a280c911e1a87612313804ec91_7.jpg author: Matthias Kretschmann date: 2012-04-07 15:50:15+00:00 - -category: photos -tags: -- instagram --- diff --git a/content/posts/2012-04-08-common-kitchen-decoration.md b/content/posts/2012-04-08-common-kitchen-decoration.md index 427681e7..8339d7c3 100644 --- a/content/posts/2012-04-08-common-kitchen-decoration.md +++ b/content/posts/2012-04-08-common-kitchen-decoration.md @@ -6,10 +6,6 @@ image: ../media/2ba6eeba81b111e1989612313815112c_7.jpg author: Matthias Kretschmann date: 2012-04-08 19:29:33+00:00 - -category: photos -tags: -- instagram --- diff --git a/content/posts/2012-04-08-graffiti-old-school-style.md b/content/posts/2012-04-08-graffiti-old-school-style.md index 7cd629f6..89d3fbdf 100644 --- a/content/posts/2012-04-08-graffiti-old-school-style.md +++ b/content/posts/2012-04-08-graffiti-old-school-style.md @@ -6,10 +6,6 @@ image: ../media/7e2b28f881b711e1af7612313813f8e8_7.jpg author: Matthias Kretschmann date: 2012-04-08 20:14:49+00:00 - -category: photos -tags: -- instagram --- from [Instagram](http://instagr.am), posted with [Instagrate to WordPress](http://www.polevaultweb.com/plugins/instagrate-to-wordpress/) diff --git a/content/posts/2012-04-20-the-origins-of-the-blink-tag.md b/content/posts/2012-04-20-the-origins-of-the-blink-tag.md index debfdbc9..a37ec11f 100644 --- a/content/posts/2012-04-20-the-origins-of-the-blink-tag.md +++ b/content/posts/2012-04-20-the-origins-of-the-blink-tag.md @@ -7,8 +7,8 @@ author: Matthias Kretschmann date: 2012-04-20 08:48:46+00:00 -category: design tags: +- design - history --- diff --git a/content/posts/2012-04-30-announcing-sketch2.md b/content/posts/2012-04-30-announcing-sketch2.md index ac90454b..c31e12ed 100644 --- a/content/posts/2012-04-30-announcing-sketch2.md +++ b/content/posts/2012-04-30-announcing-sketch2.md @@ -7,7 +7,8 @@ author: Matthias Kretschmann date: 2012-04-30 12:37:05+00:00 -category: design +tags: +- design --- Remarkable update to Bohemian Coding's [Sketch](http://bohemiancoding.com/sketch) app. It's like Photoshop but with only the UI design related features included: diff --git a/content/posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md b/content/posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md index 7368cfdb..e876fae1 100644 --- a/content/posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md +++ b/content/posts/2012-05-02-a-call-foropen-free-access-to-academic-research.md @@ -6,8 +6,6 @@ linkurl: http://www.guardian.co.uk/commentisfree/2012/may/01/open-free-access-ac author: Matthias Kretschmann date: 2012-05-02 03:12:40+00:00 - -category: links --- David Willetts, a minister of state for universities and science in the UK, is calling for more open access in academics: diff --git a/content/posts/2012-05-03-antique-chrome.md b/content/posts/2012-05-03-antique-chrome.md index 32d79a8d..e4752aae 100644 --- a/content/posts/2012-05-03-antique-chrome.md +++ b/content/posts/2012-05-03-antique-chrome.md @@ -6,10 +6,6 @@ image: ../media/5fc688aa953811e180c9123138016265_7.jpg author: Matthias Kretschmann date: 2012-05-03 15:55:15+00:00 - -category: photos -tags: -- instagram --- from [Instagram](http://instagr.am), posted with [Instagrate to WordPress](http://www.polevaultweb.com/plugins/instagrate-to-wordpress/) diff --git a/content/posts/2012-05-04-world-press-photo-2012.md b/content/posts/2012-05-04-world-press-photo-2012.md index 9842d04e..f622218c 100644 --- a/content/posts/2012-05-04-world-press-photo-2012.md +++ b/content/posts/2012-05-04-world-press-photo-2012.md @@ -7,8 +7,8 @@ author: Matthias Kretschmann date: 2012-05-04 13:12:54+00:00 -category: photography tags: +- photography - photojournalism --- diff --git a/content/posts/2012-05-09-media-query-asset-downloading-results.md b/content/posts/2012-05-09-media-query-asset-downloading-results.md index 72bd5500..35be357e 100644 --- a/content/posts/2012-05-09-media-query-asset-downloading-results.md +++ b/content/posts/2012-05-09-media-query-asset-downloading-results.md @@ -7,8 +7,8 @@ author: Matthias Kretschmann date: 2012-05-09 09:48:19+00:00 -category: design tags: +- design - responsive - retina --- diff --git a/content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md b/content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md index f4dfd838..38517ebf 100644 --- a/content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md +++ b/content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md @@ -7,8 +7,8 @@ author: Matthias Kretschmann date: 2012-05-12 13:19:02+00:00 -category: design tags: +- design - mobile - responsive --- diff --git a/content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md b/content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md index 93640b96..d5aa6f17 100644 --- a/content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md +++ b/content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md @@ -7,8 +7,8 @@ author: Matthias Kretschmann date: 2012-05-12 17:52:53+00:00 -category: design tags: +- design - mobile - responsive --- diff --git a/content/posts/2012-05-14-welcome-to-kremalicious2.md b/content/posts/2012-05-14-welcome-to-kremalicious2.md index 716e37e8..7ead30f2 100644 --- a/content/posts/2012-05-14-welcome-to-kremalicious2.md +++ b/content/posts/2012-05-14-welcome-to-kremalicious2.md @@ -7,10 +7,9 @@ author: Matthias Kretschmann date: 2012-05-14 19:33:22+00:00 - -category: personal tags: - - wordpress +- personal +- wordpress --- It finally happened. After so many rejected revisions, so many pauses, so much coffee: kremalicious2 is here. diff --git a/content/posts/2012-05-15-wp-icons-template.md b/content/posts/2012-05-15-wp-icons-template.md index 3f6c4fac..0de407b0 100644 --- a/content/posts/2012-05-15-wp-icons-template.md +++ b/content/posts/2012-05-15-wp-icons-template.md @@ -7,9 +7,8 @@ author: Matthias Kretschmann date: 2012-05-15 16:00:44+00:00 - -category: design tags: +- design - goodies - boilerplate - tutorial diff --git a/content/posts/2012-05-21-why-comic-sans.md b/content/posts/2012-05-21-why-comic-sans.md index 22be4432..2a006b0a 100644 --- a/content/posts/2012-05-21-why-comic-sans.md +++ b/content/posts/2012-05-21-why-comic-sans.md @@ -7,8 +7,8 @@ author: Matthias Kretschmann date: 2012-05-21 21:18:17+00:00 -category: design tags: +- design - typography --- diff --git a/content/posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md b/content/posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md index 384376fc..26273f0e 100644 --- a/content/posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md +++ b/content/posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.md @@ -7,7 +7,8 @@ author: Matthias Kretschmann date: 2012-05-22 01:00:03+00:00 -category: photography +tags: +- photography --- Great insight article into what and how exactly Yahoo managed to screw this up. diff --git a/content/posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md b/content/posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md index b5337320..4d1b03c0 100644 --- a/content/posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md +++ b/content/posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.md @@ -7,8 +7,8 @@ author: Matthias Kretschmann date: 2012-05-22 06:23:26+00:00 -category: design tags: +- design - mobile - responsive - retina diff --git a/content/posts/2012-05-23-like-modern-heating-only-more-badass.md b/content/posts/2012-05-23-like-modern-heating-only-more-badass.md index 0ade6097..828d4379 100644 --- a/content/posts/2012-05-23-like-modern-heating-only-more-badass.md +++ b/content/posts/2012-05-23-like-modern-heating-only-more-badass.md @@ -6,10 +6,6 @@ image: ../media/41b5a454a43811e1989612313815112c_7.jpeg author: Matthias Kretschmann date: 2012-05-23 14:23:38+00:00 - -category: photos -tags: -- instagram --- @[Ofen- und Keramikmuseum Velten](http://www.ofenmuseum-velten.de/) diff --git a/content/posts/2012-05-26-html-for-icon-font-usage.md b/content/posts/2012-05-26-html-for-icon-font-usage.md index 767f793c..8723799d 100644 --- a/content/posts/2012-05-26-html-for-icon-font-usage.md +++ b/content/posts/2012-05-26-html-for-icon-font-usage.md @@ -7,7 +7,8 @@ author: Matthias Kretschmann date: 2012-05-26 05:13:58+00:00 -category: design +tags: +- design --- Chris Coyier on an accessible implementation for icon fonts: diff --git a/content/posts/2012-05-27-balloon.md b/content/posts/2012-05-27-balloon.md index 294b200e..d5997b14 100644 --- a/content/posts/2012-05-27-balloon.md +++ b/content/posts/2012-05-27-balloon.md @@ -6,10 +6,6 @@ image: ../media/690fe368a81911e1b2fe1231380205bf_7.jpg author: Matthias Kretschmann date: 2012-05-27 17:16:11+00:00 - -category: photos -tags: -- instagram --- [Photo on Instagram](http://instagr.am/p/LIwqMrtSs2/) diff --git a/content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md b/content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md index c0d7c21e..36710d82 100644 --- a/content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md +++ b/content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md @@ -7,7 +7,8 @@ author: Matthias Kretschmann date: 2012-06-05 16:25:56+00:00 -category: design +tags: +- design --- Much has been written about the good and bad of skeuomorphism. Tom Hobbs wrote a [great piece](http://www.fastcodesign.com/1669879/can-we-please-move-past-apples-silly-faux-real-uis) putting everything together. diff --git a/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md b/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md index 923867ec..5875a20e 100644 --- a/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md +++ b/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md @@ -6,10 +6,9 @@ author: Matthias Kretschmann date: 2012-06-13 19:01:20+00:00 - -category: design tags: - - wordpress +- design +- wordpress coinhive: true --- diff --git a/content/posts/2012-06-27-typography-window.md b/content/posts/2012-06-27-typography-window.md index 22a5235e..56b82c86 100644 --- a/content/posts/2012-06-27-typography-window.md +++ b/content/posts/2012-06-27-typography-window.md @@ -6,8 +6,6 @@ image: ../media/80a136dabff711e188131231381b5c25_7.jpg author: Matthias Kretschmann date: 2012-06-27 01:29:13+00:00 - -category: photos --- from Instagram diff --git a/content/posts/2012-06-30-why-files-exist.md b/content/posts/2012-06-30-why-files-exist.md index e9f4b6f2..f795f20d 100644 --- a/content/posts/2012-06-30-why-files-exist.md +++ b/content/posts/2012-06-30-why-files-exist.md @@ -7,7 +7,8 @@ author: Matthias Kretschmann date: 2012-06-30 18:17:33+00:00 -category: design +tags: +- design --- [This](http://blog.filepicker.io/post/26157006600/why-files-exist) has been said many times, but it bears repeating: diff --git a/content/posts/2012-07-04-newton-reconsidered.md b/content/posts/2012-07-04-newton-reconsidered.md index babfca1e..6d094b15 100644 --- a/content/posts/2012-07-04-newton-reconsidered.md +++ b/content/posts/2012-07-04-newton-reconsidered.md @@ -7,8 +7,8 @@ author: Matthias Kretschmann date: 2012-07-04 01:19:17+00:00 -category: design tags: +- design - apple - newton --- diff --git a/content/posts/2012-07-07-what-makes-twitter-twitter.md b/content/posts/2012-07-07-what-makes-twitter-twitter.md index 9937076d..063e8afc 100644 --- a/content/posts/2012-07-07-what-makes-twitter-twitter.md +++ b/content/posts/2012-07-07-what-makes-twitter-twitter.md @@ -6,8 +6,6 @@ linkurl: http://alt.adrianshort.co.uk/blog/2012/06/30/what-makes-twitter-twitter author: Matthias Kretschmann date: 2012-07-07 08:18:58+00:00 - -category: links --- Couldn't agree more: diff --git a/content/posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md b/content/posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md index ef24531b..a669e966 100644 --- a/content/posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md +++ b/content/posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.md @@ -7,8 +7,8 @@ author: Matthias Kretschmann date: 2012-07-11 21:00:07+00:00 -category: photography tags: +- photography - history --- diff --git a/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md b/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md index 589fd066..3309dc64 100644 --- a/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md +++ b/content/posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.md @@ -1,13 +1,14 @@ --- type: post + title: Add your web site to the Windows 8 Metro UI image: ../media/kremalicious-Teaser-Metro-Tile.jpg author: Matthias Kretschmann date: 2012-07-15 16:19:55+00:00 -category: design tags: +- design - icon - windows diff --git a/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md index caecb944..3537f81c 100644 --- a/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md +++ b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md @@ -8,9 +8,10 @@ author: Matthias Kretschmann featured: true date: 2012-07-16 14:36:58+00:00 -category: design + tags: - - css +- design +- css coinhive: true --- diff --git a/content/posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md b/content/posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md index acdb5eed..c1c9ee22 100644 --- a/content/posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md +++ b/content/posts/2012-07-19-first-computer-generated-graphics-film-from-1963.md @@ -7,8 +7,8 @@ author: Matthias Kretschmann date: 2012-07-19 12:30:56+00:00 -category: design tags: +- design - history --- diff --git a/content/posts/2012-07-20-mmmmh-coffee.md b/content/posts/2012-07-20-mmmmh-coffee.md index 56a81b0b..b0263330 100644 --- a/content/posts/2012-07-20-mmmmh-coffee.md +++ b/content/posts/2012-07-20-mmmmh-coffee.md @@ -6,8 +6,6 @@ image: ../media/66a6e0c0d25a11e1a94522000a1e8aaf_7.jpg author: Matthias Kretschmann date: 2012-07-20 11:02:30+00:00 - -category: photos --- from Instagram diff --git a/content/posts/2012-08-07-projectpurple.md b/content/posts/2012-08-07-projectpurple.md index 85b48d4e..cd86e98f 100644 --- a/content/posts/2012-08-07-projectpurple.md +++ b/content/posts/2012-08-07-projectpurple.md @@ -8,10 +8,11 @@ author: Matthias Kretschmann featured: true date: 2012-08-07 13:15:44+00:00 -category: goodies + tags: - - iphone - - wallpaper +- goodies +- iphone +- wallpaper coinhive: true --- diff --git a/content/posts/2012-08-08-amazingly-early.md b/content/posts/2012-08-08-amazingly-early.md index 14d652c6..9549f92a 100644 --- a/content/posts/2012-08-08-amazingly-early.md +++ b/content/posts/2012-08-08-amazingly-early.md @@ -6,8 +6,6 @@ image: ../media/2ca7a094e10f11e1868c12313817a130_7.jpg author: Matthias Kretschmann date: 2012-08-08 04:11:48+00:00 - -category: photos --- from Instagram diff --git a/content/posts/2012-08-20-im-joining-ezeep.md b/content/posts/2012-08-20-im-joining-ezeep.md index cdaee777..e54b3216 100644 --- a/content/posts/2012-08-20-im-joining-ezeep.md +++ b/content/posts/2012-08-20-im-joining-ezeep.md @@ -7,8 +7,8 @@ author: Matthias Kretschmann date: 2012-08-20 14:12:11+00:00 -category: personal tags: +- personal - ezeep --- diff --git a/content/posts/2012-08-25-so-much-room.md b/content/posts/2012-08-25-so-much-room.md index 27dafcd3..c0719bbe 100644 --- a/content/posts/2012-08-25-so-much-room.md +++ b/content/posts/2012-08-25-so-much-room.md @@ -6,8 +6,6 @@ image: ../media/c0c45b6eeea211e1ad8e22000a1cdbb8_7.jpg author: Matthias Kretschmann date: 2012-08-25 10:50:58+00:00 - -category: photos --- from Instagram diff --git a/content/posts/2012-09-07-huge-station-is-huge.md b/content/posts/2012-09-07-huge-station-is-huge.md index 358fc478..1960dd76 100644 --- a/content/posts/2012-09-07-huge-station-is-huge.md +++ b/content/posts/2012-09-07-huge-station-is-huge.md @@ -6,8 +6,6 @@ image: ../media/619b3900f92911e1a31922000a1cddf1_7.jpg author: Matthias Kretschmann date: 2012-09-07 20:19:52+00:00 - -category: photos --- from Instagram diff --git a/content/posts/2012-09-10-subway-firefox.md b/content/posts/2012-09-10-subway-firefox.md index b9290ef1..400b71d6 100644 --- a/content/posts/2012-09-10-subway-firefox.md +++ b/content/posts/2012-09-10-subway-firefox.md @@ -6,8 +6,6 @@ image: ../media/84f9d2c4fb7411e19ca422000a1d0119_7.jpg author: Matthias Kretschmann date: 2012-09-10 18:22:46+00:00 - -category: photos --- from Instagram diff --git a/content/posts/2012-09-12-sweet-typography.md b/content/posts/2012-09-12-sweet-typography.md index e31f5d12..6b10fdaa 100644 --- a/content/posts/2012-09-12-sweet-typography.md +++ b/content/posts/2012-09-12-sweet-typography.md @@ -6,8 +6,6 @@ image: ../media/01f8b0b8fcc611e19b5b123138140bce_7.jpg author: Matthias Kretschmann date: 2012-09-12 10:38:36+00:00 - -category: photos --- from Instagram diff --git a/content/posts/2012-09-14-bvg-dos.md b/content/posts/2012-09-14-bvg-dos.md index b9439e6d..bee20224 100644 --- a/content/posts/2012-09-14-bvg-dos.md +++ b/content/posts/2012-09-14-bvg-dos.md @@ -6,8 +6,6 @@ image: ../media/6c4003f2fe9911e1ae9122000a1e9e21_7.jpg author: Matthias Kretschmann date: 2012-09-14 18:24:29+00:00 - -category: photos --- from Instagram diff --git a/content/posts/2012-09-26-designing-with-code.md b/content/posts/2012-09-26-designing-with-code.md index 015fd1cc..9662b33a 100644 --- a/content/posts/2012-09-26-designing-with-code.md +++ b/content/posts/2012-09-26-designing-with-code.md @@ -7,7 +7,8 @@ author: Matthias Kretschmann date: 2012-09-26 11:45:40+00:00 -category: design +tags: +- design --- I try to repeat that at least 2 times a day: diff --git a/content/posts/2013-02-17-castle-garden.md b/content/posts/2013-02-17-castle-garden.md index a1d0223c..97a70a29 100644 --- a/content/posts/2013-02-17-castle-garden.md +++ b/content/posts/2013-02-17-castle-garden.md @@ -6,8 +6,6 @@ image: ../media/8372983659_da0e88ca79_o.jpg author: Matthias Kretschmann date: 2013-02-17 11:50:21+00:00 - -category: photos --- [Castle Garden | flickr](http://www.flickr.com/photos/krema/8372983659) diff --git a/content/posts/2013-02-17-ezeep-android-app-design.md b/content/posts/2013-02-17-ezeep-android-app-design.md index 9883f3ea..3a8f3b74 100644 --- a/content/posts/2013-02-17-ezeep-android-app-design.md +++ b/content/posts/2013-02-17-ezeep-android-app-design.md @@ -5,7 +5,6 @@ title: ezeep Android App Design image: ../media/8455835942_a9b9100373_o.jpg author: Matthias Kretschmann -category: photos tags: - ezeep --- diff --git a/content/posts/2013-02-17-ezeep-office-view.md b/content/posts/2013-02-17-ezeep-office-view.md index ea0ed259..f9df3870 100644 --- a/content/posts/2013-02-17-ezeep-office-view.md +++ b/content/posts/2013-02-17-ezeep-office-view.md @@ -5,7 +5,6 @@ title: ezeep office view image: ../media/8450618380_83c64006c6_o.jpg author: Matthias Kretschmann -category: photos tags: - ezeep --- diff --git a/content/posts/2013-05-23-ezeep-birds.md b/content/posts/2013-05-23-ezeep-birds.md index f9e4eebf..257140b6 100644 --- a/content/posts/2013-05-23-ezeep-birds.md +++ b/content/posts/2013-05-23-ezeep-birds.md @@ -4,7 +4,7 @@ type: photo title: ezeep birds image: ../media/8776417095_43553c88c2_o.jpg author: Matthias Kretschmann -category: photos + tags: - ezeep --- diff --git a/content/posts/2013-05-23-ezeep-origami.md b/content/posts/2013-05-23-ezeep-origami.md index 07373fb9..65d87df9 100644 --- a/content/posts/2013-05-23-ezeep-origami.md +++ b/content/posts/2013-05-23-ezeep-origami.md @@ -5,7 +5,6 @@ title: ezeep origami image: ../media/8782995066_e90ff6b3ae_o.jpg author: Matthias Kretschmann -category: photos tags: - ezeep --- diff --git a/content/posts/2013-07-13-create-differentiate-iterate-10-pro-tips-on-relaunching-your-startup-website.md b/content/posts/2013-07-13-create-differentiate-iterate-10-pro-tips-on-relaunching-your-startup-website.md index 094fa408..ac7f6552 100644 --- a/content/posts/2013-07-13-create-differentiate-iterate-10-pro-tips-on-relaunching-your-startup-website.md +++ b/content/posts/2013-07-13-create-differentiate-iterate-10-pro-tips-on-relaunching-your-startup-website.md @@ -6,8 +6,8 @@ linkurl: http://venturevillage.eu/10-pro-tips-redesign author: Matthias Kretschmann date: 2013-07-13 12:49:39+00:00 -category: design tags: +- design - ezeep - personal --- diff --git a/content/posts/2013-07-13-enterprise-software-sucks.md b/content/posts/2013-07-13-enterprise-software-sucks.md index 33060638..66db50a7 100644 --- a/content/posts/2013-07-13-enterprise-software-sucks.md +++ b/content/posts/2013-07-13-enterprise-software-sucks.md @@ -5,8 +5,8 @@ title: Enterprise Software Sucks author: Matthias Kretschmann date: 2013-07-13 13:19:44+00:00 -category: design tags: +- design - ezeep --- diff --git a/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md b/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md index 28ed7fbc..ddc111ad 100644 --- a/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md +++ b/content/posts/2013-08-07-stealing-time-how-technology-can-hurt-or-harm-our-inner-state.md @@ -5,8 +5,8 @@ title: 'Stealing Time: How Technology Can Hurt or Harm Our Inner State' image: ../media/post-time.png author: Matthias Kretschmann -category: design tags: +- design - ezeep --- diff --git a/content/posts/2013-11-06-why-the-worlds-best-photo-startup-is-going-out-of-business.md b/content/posts/2013-11-06-why-the-worlds-best-photo-startup-is-going-out-of-business.md index d085888c..bb1a3f15 100644 --- a/content/posts/2013-11-06-why-the-worlds-best-photo-startup-is-going-out-of-business.md +++ b/content/posts/2013-11-06-why-the-worlds-best-photo-startup-is-going-out-of-business.md @@ -4,7 +4,8 @@ type: link title: Why the world's best photo startup is going out of business linkurl: http://www.theverge.com/2013/11/5/5039216/everpix-life-and-death-inside-the-worlds-best-photo-startup -category: photography +tags: +- photography --- Really sad, the service was awesome. But good example that building an awesome product is not enough: diff --git a/content/posts/2013-11-20-why-we-are-allowed-to-hate-silicon-valley.md b/content/posts/2013-11-20-why-we-are-allowed-to-hate-silicon-valley.md index 983e1b81..663e5339 100644 --- a/content/posts/2013-11-20-why-we-are-allowed-to-hate-silicon-valley.md +++ b/content/posts/2013-11-20-why-we-are-allowed-to-hate-silicon-valley.md @@ -5,7 +5,6 @@ title: Why We Are Allowed to Hate Silicon Valley linkurl: http://www.faz.net/aktuell/feuilleton/debatten/the-internet-ideology-why-we-are-allowed-to-hate-silicon-valley-12658406.html author: Matthias Kretschmann -category: links tags: - 'silicon valley' - google diff --git a/content/posts/2013-12-11-silicon-valley-isnt-a-meritocracy.md b/content/posts/2013-12-11-silicon-valley-isnt-a-meritocracy.md index 6f297d1e..a1ac8ed0 100644 --- a/content/posts/2013-12-11-silicon-valley-isnt-a-meritocracy.md +++ b/content/posts/2013-12-11-silicon-valley-isnt-a-meritocracy.md @@ -4,8 +4,6 @@ type: link title: Silicon Valley Isn't a Meritocracy linkurl: http://www.wired.com/opinion/2013/11/silicon-valley-isnt-a-meritocracy-and-the-cult-of-the-entrepreneur-holds-people-back/ -category: links - tags: - 'silicon valley' --- diff --git a/content/posts/2014-03-10-just-a-normal-sunday.md b/content/posts/2014-03-10-just-a-normal-sunday.md index bbff2645..efac0be1 100644 --- a/content/posts/2014-03-10-just-a-normal-sunday.md +++ b/content/posts/2014-03-10-just-a-normal-sunday.md @@ -3,7 +3,6 @@ type: photo title: Just a normal Sunday image: ../media/just-a-normal-sunday.jpg author: Matthias Kretschmann -category: photos --- Just a normal Sunday at Botschaft der Russischen Föderation | Embassy of the Russian Federation diff --git a/content/posts/2014-03-15-potsdam.md b/content/posts/2014-03-15-potsdam.md index 1b2ed9c3..e4367fc4 100644 --- a/content/posts/2014-03-15-potsdam.md +++ b/content/posts/2014-03-15-potsdam.md @@ -3,7 +3,6 @@ type: photo title: Potsdam image: ../media/potsdam.jpg author: Matthias Kretschmann -category: photos --- Potsdam at Potsdamer Stadtschloss diff --git a/content/posts/2014-03-17-typographic-diamond.md b/content/posts/2014-03-17-typographic-diamond.md index b16f6e71..9b2f10c3 100644 --- a/content/posts/2014-03-17-typographic-diamond.md +++ b/content/posts/2014-03-17-typographic-diamond.md @@ -3,7 +3,6 @@ type: photo title: Typographic diamond image: ../media/typographic-diamond.jpg author: Matthias Kretschmann -category: photos --- Typographic diamond at Hobrechtstraße diff --git a/content/posts/2014-04-26-ai-weiwei-stools.md b/content/posts/2014-04-26-ai-weiwei-stools.md index 3a6bc660..209c547e 100644 --- a/content/posts/2014-04-26-ai-weiwei-stools.md +++ b/content/posts/2014-04-26-ai-weiwei-stools.md @@ -3,7 +3,6 @@ type: photo title: Ai Weiwei, Stools image: ../media/ai-wei-wei-stools.jpg author: Matthias Kretschmann -category: photos --- Ai Weiwei - Evidence, Stools at Martin Gropius Bau diff --git a/content/posts/2014-06-07-airfield-reference-point.md b/content/posts/2014-06-07-airfield-reference-point.md index 48f159ee..05b7f060 100644 --- a/content/posts/2014-06-07-airfield-reference-point.md +++ b/content/posts/2014-06-07-airfield-reference-point.md @@ -3,7 +3,6 @@ type: photo title: Airfield Reference Point image: ../media/airfield-reference-point.jpg author: Matthias Kretschmann -category: photos --- Airfield Reference Point Black And White at Tempelhofer Feld diff --git a/content/posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md b/content/posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md index d2a73dd8..b85223fd 100644 --- a/content/posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md +++ b/content/posts/2015-03-29-anton-henning-heimat-schaffen-simpsons.md @@ -3,7 +3,6 @@ type: photo title: Anton Henning, Heimat schaffen, Simpsons image: ../media/2015-03-29-anton-henning-heimat-schaffen-simpsons.jpg author: Matthias Kretschmann -category: photos --- Anton Henning, Heimat schaffen - home is where the heart is (II), Germany, 2015. diff --git a/content/posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md b/content/posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md index c1f2597d..3c826cd8 100644 --- a/content/posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md +++ b/content/posts/2015-03-29-thanks-for-the-tip-little-orange-blob.md @@ -3,7 +3,6 @@ type: photo title: Thanks for the tip little orange blob image: ../media/2015-03-29-thanks-for-the-tip-little-orange-blob.jpg author: Matthias Kretschmann -category: photos --- [Instagram](https://instagram.com/p/00qW1wNSm6/) \ No newline at end of file diff --git a/content/posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md b/content/posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md index c5d844d0..b4096f4b 100644 --- a/content/posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md +++ b/content/posts/2015-04-01-suddenly-a-new-hindu-temple-appears-around-the-corner.md @@ -3,7 +3,6 @@ type: photo title: Suddenly... a new Hindu temple appears around the corner image: ../media/2015-04-17-suddenly-a-new-hindu-temple-appears-around-the-corner.jpg author: Matthias Kretschmann -category: photos --- [Instagram](https://instagram.com/p/08ngIbtSvs/) \ No newline at end of file diff --git a/content/posts/2015-04-09-most-surprising-dog-i-know.md b/content/posts/2015-04-09-most-surprising-dog-i-know.md index 2ef7b8b2..37ca202c 100644 --- a/content/posts/2015-04-09-most-surprising-dog-i-know.md +++ b/content/posts/2015-04-09-most-surprising-dog-i-know.md @@ -3,7 +3,6 @@ type: photo title: Most surprising dog I know image: ../media/most-surprising-dog-i-know.jpg author: Matthias Kretschmann -category: photos --- [Instagram](https://instagram.com/p/1Q4td6NSo_/) \ No newline at end of file diff --git a/content/posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md b/content/posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md index 4f5a9d18..7fd19ffc 100644 --- a/content/posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md +++ b/content/posts/2015-04-16-obligatory-it-s-summer-in-berlin-photo.md @@ -3,7 +3,6 @@ type: photo title: Obligatory it's summer in Berlin photo image: ../media/obligatory-it-s-summer-in-berlin-photo.jpg author: Matthias Kretschmann -category: photos --- [Instagram](https://instagram.com/p/1ikG3qtSkG/) \ No newline at end of file diff --git a/content/posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md b/content/posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md index 302236e2..86ba8b9e 100644 --- a/content/posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md +++ b/content/posts/2015-04-23-that-moment-when-your-childhood-toys-hang-painted-in-a-gallery.md @@ -3,7 +3,6 @@ type: photo title: That moment when your childhood toys hang painted in a gallery image: ../media/Monstrum_Gameboy_Catherine_Kaleel.jpg author: Matthias Kretschmann -category: photos --- Seen at [SUPERSAMPLE - Pixels at an Exhibition](http://www.supersample.de) 2015 in Berlin. diff --git a/content/posts/2015-04-25-tiny-tiny-demons.md b/content/posts/2015-04-25-tiny-tiny-demons.md index 096fcd38..b005faab 100644 --- a/content/posts/2015-04-25-tiny-tiny-demons.md +++ b/content/posts/2015-04-25-tiny-tiny-demons.md @@ -3,7 +3,6 @@ type: photo title: Tiny tiny demons image: ../media/tiny_tiny_demons.jpg author: Matthias Kretschmann -category: photos --- [Instagram](https://instagram.com/p/16VfLytShp/) \ No newline at end of file diff --git a/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md b/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md index f3bb7348..8e82b453 100644 --- a/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md +++ b/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md @@ -7,12 +7,12 @@ author: Matthias Kretschmann date: 2015-08-02 21:57:30.912218000 +02:00 updated: 2018-07-11 00:52:46+02:00 -category: tags: - - tutorial - - tor - - osx - - macos + - goodies + - tutorial + - tor + - osx + - macos coinhive: true --- diff --git a/content/posts/2015-09-13-css-app-store-badges.md b/content/posts/2015-09-13-css-app-store-badges.md index 5f4cd00c..422d24fb 100644 --- a/content/posts/2015-09-13-css-app-store-badges.md +++ b/content/posts/2015-09-13-css-app-store-badges.md @@ -7,10 +7,11 @@ image: ../media/teaser-appstorebadges.png author: Matthias Kretschmann date: 2015-09-13 18:55:18.418548000 +02:00 -category: goodies +category: tags: - - css - - svg +- goodies +- css +- svg coinhive: true --- diff --git a/content/posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md b/content/posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md index ab40d335..cc88035a 100644 --- a/content/posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md +++ b/content/posts/2016-02-25-gaudi-knows-how-to-impress-with-a-ceiling.md @@ -4,7 +4,6 @@ title: 'Gaudí knows how to impress with a ceiling' image: ../media/sagrada-familia-ceiling.jpg author: Matthias Kretschmann date: 2016-02-25 16:52:24.544813000 +01:00 -category: photos --- [Instagram](https://www.instagram.com/p/BCU30S1NSj6/) diff --git a/content/posts/2016-02-27-streets-of-el-raval.md b/content/posts/2016-02-27-streets-of-el-raval.md index 03c38e87..0b74a2b8 100644 --- a/content/posts/2016-02-27-streets-of-el-raval.md +++ b/content/posts/2016-02-27-streets-of-el-raval.md @@ -4,7 +4,6 @@ title: Streets of El Raval image: ../media/streets-of-el-raval.jpg author: Matthias Kretschmann date: 2016-02-27 17:28:23.878566000 +01:00 -category: photos --- [Instagram](https://www.instagram.com/p/BCXqCY5tSg5/) diff --git a/content/posts/2016-03-02-a-storm-is-coming.md b/content/posts/2016-03-02-a-storm-is-coming.md index 76d78172..d198c23d 100644 --- a/content/posts/2016-03-02-a-storm-is-coming.md +++ b/content/posts/2016-03-02-a-storm-is-coming.md @@ -3,7 +3,6 @@ type: photo title: A storm is coming image: ../media/a-storm-is-coming.jpg author: Matthias Kretschmann -category: photos --- @Carrer de la Marina, Barcelona diff --git a/content/posts/2017-02-13-keith-haring-vandalizing-a-wall.md b/content/posts/2017-02-13-keith-haring-vandalizing-a-wall.md index 91236924..31aa7fe5 100644 --- a/content/posts/2017-02-13-keith-haring-vandalizing-a-wall.md +++ b/content/posts/2017-02-13-keith-haring-vandalizing-a-wall.md @@ -3,7 +3,6 @@ type: photo title: K. Haring vandalizing a wall image: ../media/keith-haring-vandalizing-a-wall.jpg author: Matthias Kretschmann -category: photos --- Some guy named K. Haring vandalizing a wall. diff --git a/content/posts/2017-02-13-streets-of-el-born.md b/content/posts/2017-02-13-streets-of-el-born.md index ce38cf75..b8121b78 100644 --- a/content/posts/2017-02-13-streets-of-el-born.md +++ b/content/posts/2017-02-13-streets-of-el-born.md @@ -3,7 +3,6 @@ type: photo title: Streets of El Born image: ../media/streets-of-el-born.jpg author: Matthias Kretschmann -category: photos --- 🥃 diff --git a/content/posts/2017-02-14-new-passion-facade.md b/content/posts/2017-02-14-new-passion-facade.md index 32af19d3..32b4e4f9 100644 --- a/content/posts/2017-02-14-new-passion-facade.md +++ b/content/posts/2017-02-14-new-passion-facade.md @@ -3,7 +3,6 @@ type: photo title: New Passion Façade image: ../media/new-passion-facade.jpg author: Matthias Kretschmann -category: photos --- The Passion Façade got something new this year. Berlin should handle the BER like that: every generation gets to add their own elements and after 140 years it should be finished. diff --git a/content/posts/2017-02-16-coolhaven-rotterdam.md b/content/posts/2017-02-16-coolhaven-rotterdam.md index bf77026c..51237909 100644 --- a/content/posts/2017-02-16-coolhaven-rotterdam.md +++ b/content/posts/2017-02-16-coolhaven-rotterdam.md @@ -3,7 +3,6 @@ type: photo title: Coolhaven Rotterdam image: ../media/coolhaven-rotterdam.jpg author: Matthias Kretschmann -category: photos --- @Coolhaven Rotterdam diff --git a/content/posts/2017-02-17-behind-the-art.md b/content/posts/2017-02-17-behind-the-art.md index acb760e7..7cbc215b 100644 --- a/content/posts/2017-02-17-behind-the-art.md +++ b/content/posts/2017-02-17-behind-the-art.md @@ -3,7 +3,6 @@ type: photo title: Behind the art image: ../media/behind-the-art.jpg author: Matthias Kretschmann -category: photos --- Behind the art. Rotterdam Contemporary Art Fair 2017 diff --git a/content/posts/2017-02-19-rotterdam-coats.md b/content/posts/2017-02-19-rotterdam-coats.md index 9cd356d1..4e683cba 100644 --- a/content/posts/2017-02-19-rotterdam-coats.md +++ b/content/posts/2017-02-19-rotterdam-coats.md @@ -4,7 +4,6 @@ title: Rotterdam coats image: ../media/2017-02-19-rotterdam-coats.jpg author: Matthias Kretschmann date: 2017-02-19 21:13:38.626498000 +02:00 -category: photos --- They hang their coats quite differently in Rotterdam. @Museum Boijmans Van Beuningen diff --git a/content/posts/2017-02-21-david-chipperfield-staircase.md b/content/posts/2017-02-21-david-chipperfield-staircase.md index 586129b9..9d8296c1 100644 --- a/content/posts/2017-02-21-david-chipperfield-staircase.md +++ b/content/posts/2017-02-21-david-chipperfield-staircase.md @@ -4,7 +4,6 @@ title: David Chipperfield staircase image: ../media/2017-02-21-david-chipperfield-staircase.jpg author: Matthias Kretschmann date: 2017-02-21 21:18:36.350189000 +02:00 -category: photos --- Home is where David Chipperfield creates the sexy staircases. @Neues Museum, Berlin. diff --git a/content/posts/2017-02-26-eu-gotham-city.md b/content/posts/2017-02-26-eu-gotham-city.md index c5e347ef..611a98f1 100644 --- a/content/posts/2017-02-26-eu-gotham-city.md +++ b/content/posts/2017-02-26-eu-gotham-city.md @@ -4,7 +4,6 @@ title: EU Gotham City image: ../media/2017-02-26-eu-gotham-city.jpg author: Matthias Kretschmann date: 2017-02-26 23:32:50.225380000 +02:00 -category: photos --- Where EU-Gotham City is being built. @Kop van Zuid, Rotterdam, Netherlands diff --git a/content/posts/2017-02-27-amsterdam-cliche.md b/content/posts/2017-02-27-amsterdam-cliche.md index c2dd539d..fc8e585e 100644 --- a/content/posts/2017-02-27-amsterdam-cliche.md +++ b/content/posts/2017-02-27-amsterdam-cliche.md @@ -4,7 +4,6 @@ title: Amsterdam cliché image: ../media/2017-02-27-amsterdam-cliche.jpg author: Matthias Kretschmann date: 2017-02-27 16:21:42.964539000 +02:00 -category: photos --- Amsterdam just being a cliche of itself. @Prinsengracht, Amsterdam, Netherlands diff --git a/content/posts/2017-02-27-its-dark-and-i-dont-exist.md b/content/posts/2017-02-27-its-dark-and-i-dont-exist.md index 9b08d677..48ca7389 100644 --- a/content/posts/2017-02-27-its-dark-and-i-dont-exist.md +++ b/content/posts/2017-02-27-its-dark-and-i-dont-exist.md @@ -4,7 +4,6 @@ title: "It's dark and I don't exist" image: ../media/2017-02-27-its-dark-and-i-dont-exist.jpg author: Matthias Kretschmann date: 2017-02-27 17:29:32.626557000 +02:00 -category: photos --- @Amsterdam, Netherlands diff --git a/content/posts/2017-02-28-stedelijk-museum.md b/content/posts/2017-02-28-stedelijk-museum.md index ebb4378e..8babd9c6 100644 --- a/content/posts/2017-02-28-stedelijk-museum.md +++ b/content/posts/2017-02-28-stedelijk-museum.md @@ -4,7 +4,6 @@ title: Stedelijk Museum image: ../media/2017-02-28-stedelijk-museum.jpg author: Matthias Kretschmann date: 2017-02-28 13:48:35.217273000 +02:00 -category: photos --- @Stedelijk Museum, Amsterdam, Netherlands diff --git a/content/posts/2017-02-28-temple-guardian-rijksmuseum.md b/content/posts/2017-02-28-temple-guardian-rijksmuseum.md index 59b3f656..b39fff4e 100644 --- a/content/posts/2017-02-28-temple-guardian-rijksmuseum.md +++ b/content/posts/2017-02-28-temple-guardian-rijksmuseum.md @@ -4,7 +4,6 @@ title: Temple Guardian Rijksmuseum image: ../media/2017-02-28-temple-guardian-rijksmuseum.jpg author: Matthias Kretschmann date: 2017-02-28 15:38:28.206431000 +02:00 -category: photos --- One of two temple guardians. Anonymous, wood, c. 1300 - c. 1400, Japan. diff --git a/content/posts/2017-02-28-watching-the-night-watch.md b/content/posts/2017-02-28-watching-the-night-watch.md index b15f1d9a..359c65c3 100644 --- a/content/posts/2017-02-28-watching-the-night-watch.md +++ b/content/posts/2017-02-28-watching-the-night-watch.md @@ -4,7 +4,6 @@ title: Watching The Night Watch image: ../media/2017-02-28-watching-the-night-watch.jpg author: Matthias Kretschmann date: 2017-02-28 14:45:08.139508000 +02:00 -category: photos --- Watching The Night Watch. diff --git a/content/posts/2017-04-16-hamburgs-elbphilharmonie.md b/content/posts/2017-04-16-hamburgs-elbphilharmonie.md index 05770faf..4bc06b31 100644 --- a/content/posts/2017-04-16-hamburgs-elbphilharmonie.md +++ b/content/posts/2017-04-16-hamburgs-elbphilharmonie.md @@ -4,7 +4,6 @@ title: Hamburg's Elbphilharmonie image: ../media/2017-04-16-hamburgs-elbphilharmonie.jpg author: Matthias Kretschmann date: 2017-04-16 18:26:20.280801000 +02:00 -category: photos --- @Elbphilharmonie, Hamburg, Germany diff --git a/content/posts/2017-07-05-kapaleeshwarar-temple-chennai.md b/content/posts/2017-07-05-kapaleeshwarar-temple-chennai.md index 4957c7e6..61612937 100644 --- a/content/posts/2017-07-05-kapaleeshwarar-temple-chennai.md +++ b/content/posts/2017-07-05-kapaleeshwarar-temple-chennai.md @@ -4,7 +4,6 @@ title: Kapaleeshwarar Temple Chennai image: ../media/2017-07-05-kapaleeshwarar-temple-chennai.jpg author: Matthias Kretschmann date: 2017-07-05 21:21:41.413746000 +02:00 -category: photos --- @Kapaleeshwarar Temple, Chennai, India diff --git a/content/posts/2017-07-08-kochis-streetart-game-is-strong.md b/content/posts/2017-07-08-kochis-streetart-game-is-strong.md index 110e0566..6122bca7 100644 --- a/content/posts/2017-07-08-kochis-streetart-game-is-strong.md +++ b/content/posts/2017-07-08-kochis-streetart-game-is-strong.md @@ -4,7 +4,6 @@ title: "Kochi's street art game is strong" image: ../media/2017-07-08-kochis-streetart-game-is-strong.jpg author: Matthias Kretschmann date: 2017-07-08 14:28:19.869188000 +02:00 -category: photos --- Kochi's street art game is strong. diff --git a/content/posts/2017-07-09-orphaned-elephant-with-friend.md b/content/posts/2017-07-09-orphaned-elephant-with-friend.md index 5b47d208..f2375fe3 100644 --- a/content/posts/2017-07-09-orphaned-elephant-with-friend.md +++ b/content/posts/2017-07-09-orphaned-elephant-with-friend.md @@ -4,7 +4,6 @@ title: Orphaned elephant with friend image: ../media/2017-07-09-orphaned-elephant-with-friend.jpg author: Matthias Kretschmann date: 2017-07-09 09:41:37.771378000 +02:00 -category: photos --- @The Elephant Training Centre, Kodanadu, Kerala, India diff --git a/content/posts/2017-07-10-kochis-dhobhi-ghat.md b/content/posts/2017-07-10-kochis-dhobhi-ghat.md index a2292d3a..0e965434 100644 --- a/content/posts/2017-07-10-kochis-dhobhi-ghat.md +++ b/content/posts/2017-07-10-kochis-dhobhi-ghat.md @@ -4,7 +4,6 @@ title: Kochis dhobhi ghat image: ../media/2017-07-10-kochis-dhobhi-ghat.jpg author: Matthias Kretschmann date: 2017-07-10 14:28:19.869188000 +02:00 -category: photos --- At Kochi's dhobhi ghat, a human powered outdoor laundry. diff --git a/content/posts/2017-07-13-mumbai-hand-painted-typography.md b/content/posts/2017-07-13-mumbai-hand-painted-typography.md index f73ef0ad..434c811f 100644 --- a/content/posts/2017-07-13-mumbai-hand-painted-typography.md +++ b/content/posts/2017-07-13-mumbai-hand-painted-typography.md @@ -4,7 +4,6 @@ title: "The art of hand painted typography" image: ../media/2017-07-13-mumbai-hand-painted-typography.jpg author: Matthias Kretschmann date: 2017-07-13 16:28:19.869188000 +02:00 -category: photos --- The art of hand painted typography alive and well everywhere. diff --git a/content/posts/2017-07-13-obligatory-gate-of-india-photo.md b/content/posts/2017-07-13-obligatory-gate-of-india-photo.md index c2c1752d..db4958eb 100644 --- a/content/posts/2017-07-13-obligatory-gate-of-india-photo.md +++ b/content/posts/2017-07-13-obligatory-gate-of-india-photo.md @@ -4,7 +4,6 @@ title: "Obligatory Gateway of India photo" image: ../media/2017-07-13-obligatory-gate-of-india-photo.jpg author: Matthias Kretschmann date: 2017-07-13 14:28:19.869188000 +02:00 -category: photos --- @Gateway of India, Mumbai, India diff --git a/content/posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md b/content/posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md index 6d75f076..af90261c 100644 --- a/content/posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md +++ b/content/posts/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.md @@ -4,7 +4,6 @@ title: "Chhatrapati Shivaji Maharaj Vastu Sangrahalaya" image: ../media/2017-07-14-chhatrapati-shivaji-maharaj-vastu-sangrahalaya.jpg author: Matthias Kretschmann date: 2017-07-14 14:28:19.869188000 +02:00 -category: photos --- In front of the CSMVS museum, excellent sculptures and miniature paintings in there diff --git a/content/posts/2017-11-10-acropolis-the-erechtheum.md b/content/posts/2017-11-10-acropolis-the-erechtheum.md index 5894d97f..5268208c 100644 --- a/content/posts/2017-11-10-acropolis-the-erechtheum.md +++ b/content/posts/2017-11-10-acropolis-the-erechtheum.md @@ -4,7 +4,6 @@ title: "The Erechtheum" image: ../media/2017-11-10-acropolis-the-erechtheum.jpg author: Matthias Kretschmann date: 2017-11-10 14:42:19.869188000 +02:00 -category: photos --- The Erechtheum on top of the Acropolis of Athens. diff --git a/content/posts/2017-11-10-acropolis-the-parthenon.md b/content/posts/2017-11-10-acropolis-the-parthenon.md index 8e98ab30..022f88d7 100644 --- a/content/posts/2017-11-10-acropolis-the-parthenon.md +++ b/content/posts/2017-11-10-acropolis-the-parthenon.md @@ -4,7 +4,6 @@ title: "The Parthenon" image: ../media/2017-11-10-acropolis-the-parthenon.jpg author: Matthias Kretschmann date: 2017-11-10 14:37:19.869188000 +02:00 -category: photos --- The Parthenon on top of the Acropolis of Athens. diff --git a/content/posts/2017-11-10-acropolis-the-propylaea.md b/content/posts/2017-11-10-acropolis-the-propylaea.md index c9ea5804..9c14b7b8 100644 --- a/content/posts/2017-11-10-acropolis-the-propylaea.md +++ b/content/posts/2017-11-10-acropolis-the-propylaea.md @@ -4,7 +4,6 @@ title: "The Propylaea" image: ../media/2017-11-10-acropolis-the-propylaea.jpg author: Matthias Kretschmann date: 2017-11-10 14:32:19.869188000 +02:00 -category: photos --- Part of the Propylaea on top of the Acropolis of Athens. diff --git a/content/posts/2017-12-16-sagrada-familia.md b/content/posts/2017-12-16-sagrada-familia.md index 1b6a6b1f..d86904c8 100644 --- a/content/posts/2017-12-16-sagrada-familia.md +++ b/content/posts/2017-12-16-sagrada-familia.md @@ -4,7 +4,6 @@ title: "Sagrada Família" image: ../media/2017-12-16-sagrada-familia.jpg author: Matthias Kretschmann date: 2017-12-16 13:01:21.869188000 +02:00 -category: photos --- @Sagrada Família, Barcelona, Spain diff --git a/content/posts/2017-12-27-sao-paulo-traffic.md b/content/posts/2017-12-27-sao-paulo-traffic.md index aa60dd24..a287e578 100644 --- a/content/posts/2017-12-27-sao-paulo-traffic.md +++ b/content/posts/2017-12-27-sao-paulo-traffic.md @@ -4,7 +4,6 @@ title: "Traffic of São Paulo" image: ../media/2017-12-27-sao-paulo-traffic.jpg author: Matthias Kretschmann date: 2017-12-27 13:03:21.869188000 -02:00 -category: photos --- @Vila Buarque, São Paulo, Brazil diff --git a/content/posts/2018-01-04-passagem-literaria-da-consolacao.md b/content/posts/2018-01-04-passagem-literaria-da-consolacao.md index 99dfac64..04d0665b 100644 --- a/content/posts/2018-01-04-passagem-literaria-da-consolacao.md +++ b/content/posts/2018-01-04-passagem-literaria-da-consolacao.md @@ -4,7 +4,6 @@ title: "Passagem Literária da Consolação" image: ../media/2018-01-04-passagem-literaria-da-consolacao.jpg author: Matthias Kretschmann date: 2018-01-04 16:02:02.869188000 -02:00 -category: photos --- @Passagem Literária da Consolação, São Paulo, Brazil diff --git a/content/posts/2018-01-05-samba-school.md b/content/posts/2018-01-05-samba-school.md index 865432d0..b47dc35e 100644 --- a/content/posts/2018-01-05-samba-school.md +++ b/content/posts/2018-01-05-samba-school.md @@ -4,7 +4,6 @@ title: "Escola de Samba" image: ../media/2018-01-05-samba-school.jpg author: Matthias Kretschmann date: 2018-01-05 21:56:02.869188000 -02:00 -category: photos --- @Beira Mar, São Paulo, Brazil diff --git a/content/redirects.yml b/content/redirects.yml deleted file mode 100644 index c643bece..00000000 --- a/content/redirects.yml +++ /dev/null @@ -1,8 +0,0 @@ -- from: '/new-goodies-aperture-file-types-icons/' - to: '/aperture-file-types/' - -- from: '/2008/02/how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites/' - to: '/how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites/' - -- from: '/2007/06/finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs/' - to: '/finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs/' diff --git a/gatsby-node.js b/gatsby-node.js index b0bd13a1..195523e5 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -53,10 +53,7 @@ exports.createPages = ({ graphql, actions }) => { graphql( ` { - allMarkdownRemark( - sort: { fields: [fields___date], order: DESC } - limit: 1000 - ) { + allMarkdownRemark(sort: { fields: [fields___date], order: DESC }) { edges { node { fields { @@ -64,7 +61,7 @@ exports.createPages = ({ graphql, actions }) => { date } frontmatter { - category + type tags } } @@ -95,7 +92,6 @@ exports.createPages = ({ graphql, actions }) => { // Category & Tag Pages const tagSet = new Set() const tagMap = new Map() - const categorySet = new Set() posts.forEach(post => { if (post.node.frontmatter.tags) { @@ -107,10 +103,6 @@ exports.createPages = ({ graphql, actions }) => { tagMap.set(tag, array) }) } - - if (post.node.frontmatter.category) { - categorySet.add(post.node.frontmatter.category) - } }) const tagList = Array.from(tagSet) @@ -123,16 +115,6 @@ exports.createPages = ({ graphql, actions }) => { }) }) - const categoryList = Array.from(categorySet) - - categoryList.forEach(category => { - createPage({ - path: `/${category}/`, - component: archiveTemplate, - context: { category } - }) - }) - resolve() }) ) diff --git a/src/components/molecules/Menu.jsx b/src/components/molecules/Menu.jsx index 023867b6..32dbe285 100644 --- a/src/components/molecules/Menu.jsx +++ b/src/components/molecules/Menu.jsx @@ -36,7 +36,7 @@ class Menu extends PureComponent { edges { node { frontmatter { - category + type } } } @@ -45,20 +45,20 @@ class Menu extends PureComponent { `} render={data => { const posts = data.allMarkdownRemark.edges - const categorySet = new Set() + const typeSet = new Set() posts.forEach(post => { - if (post.node.frontmatter.category) { - categorySet.add(post.node.frontmatter.category) + if (post.node.frontmatter.type) { + typeSet.add(post.node.frontmatter.type) } }) - const categoryList = Array.from(categorySet) + const typeList = Array.from(typeSet) - const Categories = categoryList.map(category => ( -

  • - - {category} + const Types = typeList.map(type => ( +
  • + + {type}s
    • )) @@ -66,7 +66,7 @@ class Menu extends PureComponent { return ( -
      {Categories}
    +
      {Types}
     ) }} diff --git a/src/components/molecules/PostMeta.jsx b/src/components/molecules/PostMeta.jsx index 72b2313f..71dd51ce 100644 --- a/src/components/molecules/PostMeta.jsx +++ b/src/components/molecules/PostMeta.jsx @@ -1,12 +1,13 @@ import React from 'react' import PropTypes from 'prop-types' +import { Link } from 'gatsby' import Time from 'react-time' import slugify from 'slugify' import PostLinkActions from '../atoms/PostLinkActions' import styles from './PostMeta.module.scss' const PostMeta = ({ post, meta }) => { - const { author, updated, category, tags, type, linkurl } = post.frontmatter + const { author, updated, tags, type, linkurl } = post.frontmatter const { date, slug } = post.fields return ( @@ -34,20 +35,18 @@ const PostMeta = ({ post, meta }) => { )}
    • - {category && ( -
    - - {category} - + {type && ( +
    + {type}s
    )} {tags && (
    {tags.map(tag => ( - + {tag} - + ))}
    )} diff --git a/src/components/molecules/PostMeta.module.scss b/src/components/molecules/PostMeta.module.scss index b006e2a5..8ca48462 100644 --- a/src/components/molecules/PostMeta.module.scss +++ b/src/components/molecules/PostMeta.module.scss @@ -32,36 +32,36 @@ margin-bottom: $spacer * 2; } -// Categories & Tags +// Types & Tags ///////////////////////////////////// -.categories { +.type { margin-bottom: $spacer / 2; text-align: center; -} -.category { - font-size: $font-size-mini; - text-align: center; - color: $text-color; - line-height: 1; - text-transform: uppercase; - border: 1px solid $text-color; - border-radius: $border-radius; - padding: 4px 8px; - margin: 0; - display: inline-block; + a { + font-size: $font-size-mini; + text-align: center; + color: $text-color; + line-height: 1; + text-transform: uppercase; + border: 1px solid $text-color; + border-radius: $border-radius; + padding: 4px 8px; + margin: 0; + display: inline-block; - &:hover, - &:focus { - color: $link-color; - border-color: $link-color; - } + &:hover, + &:focus { + color: $link-color; + border-color: $link-color; + } - &:active { - background: $link-color; - top: 0; - color: #fff; + &:active { + background: $link-color; + top: 0; + color: #fff; + } } } diff --git a/src/templates/Archive.jsx b/src/templates/Archive.jsx index f24f15ad..5ec53736 100644 --- a/src/templates/Archive.jsx +++ b/src/templates/Archive.jsx @@ -39,25 +39,7 @@ Archive.propTypes = { export default Archive export const archiveQuery = graphql` - query($category: String, $tag: String) { - category: allMarkdownRemark( - filter: { frontmatter: { category: { eq: $category } } } - sort: { order: DESC, fields: [fields___date] } - ) { - edges { - node { - id - frontmatter { - title - } - fields { - slug - date(formatString: "MMMM DD, YYYY") - } - } - } - } - + query($tag: String) { tag: allMarkdownRemark( filter: { frontmatter: { tags: { eq: $tag } } } sort: { order: DESC, fields: [fields___date] } diff --git a/src/templates/Post.jsx b/src/templates/Post.jsx index eb9b9a0e..e42e5493 100644 --- a/src/templates/Post.jsx +++ b/src/templates/Post.jsx @@ -71,7 +71,6 @@ export const pageQuery = graphql` } author updated - category tags linkurl } From e32f4a5620a904d2274c9a7a62f2400a8da61bed Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 31 Aug 2018 00:15:42 +0200 Subject: [PATCH 043/100] photos page --- src/components/atoms/Image.jsx | 10 +++-- src/pages/photos.jsx | 70 ++++++++++++++++++++++++++++++++++ src/pages/photos.module.scss | 18 +++++++++ 3 files changed, 94 insertions(+), 4 deletions(-) create mode 100644 src/pages/photos.jsx create mode 100644 src/pages/photos.module.scss diff --git a/src/components/atoms/Image.jsx b/src/components/atoms/Image.jsx index 8b4cbd73..f8cea4c1 100644 --- a/src/components/atoms/Image.jsx +++ b/src/components/atoms/Image.jsx @@ -4,18 +4,20 @@ import { graphql } from 'gatsby' import Img from 'gatsby-image' import styles from './Image.module.scss' -const Image = props => ( +const Image = ({ fluid, fixed, alt }) => ( {props.alt} ) Image.propTypes = { - fluid: PropTypes.object.isRequired, + fluid: PropTypes.object, + fixed: PropTypes.object, alt: PropTypes.string } diff --git a/src/pages/photos.jsx b/src/pages/photos.jsx new file mode 100644 index 00000000..9fee5e12 --- /dev/null +++ b/src/pages/photos.jsx @@ -0,0 +1,70 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { graphql, Link } from 'gatsby' +import Layout from '../components/Layout' +import Image from '../components/atoms/Image' + +import styles from './photos.module.scss' +import stylesArchive from '../templates/Archive.module.scss' + +const Photos = ({ data, location }) => { + const edges = data.photos.edges + + const PhotoThumbs = edges.map(({ node }) => { + const { title, image } = node.frontmatter + const { slug } = node.fields + + return ( +
    + {image && ( + + {title} + + )} +
    + ) + }) + + return ( + +

    Photos

    +
    {PhotoThumbs}
    +     + ) +} + +Photos.propTypes = { + location: PropTypes.object.isRequired, + data: PropTypes.object +} + +export default Photos + +export const photosQuery = graphql` + query { + photos: allMarkdownRemark( + filter: { frontmatter: { type: { eq: "photo" } } } + sort: { order: DESC, fields: [fields___date] } + ) { + edges { + node { + id + frontmatter { + title + type + image { + childImageSharp { + fluid(maxWidth: 400, maxHeight: 400, quality: 85) { + ...GatsbyImageSharpFluid_withWebp + } + } + } + } + fields { + slug + } + } + } + } + } +` diff --git a/src/pages/photos.module.scss b/src/pages/photos.module.scss new file mode 100644 index 00000000..dc35045f --- /dev/null +++ b/src/pages/photos.module.scss @@ -0,0 +1,18 @@ +@import 'mixins'; + +.photos { + @include breakoutviewport; + + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.photo { + flex: 0 0 48%; + margin-bottom: 4%; + + a { + display: block; + } +} From d5f578846d4980d152a958522284af2ad1f29d88 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 3 Sep 2018 17:33:21 +0200 Subject: [PATCH 044/100] package updates --- package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 13974c72..afd00c46 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "last 3 versions" ], "dependencies": { - "gatsby": "^2.0.0-rc.4", + "gatsby": "^2.0.0-rc.8", "gatsby-image": "^2.0.0-rc.1", "gatsby-plugin-catch-links": "^2.0.2-rc.1", "gatsby-plugin-lunr": "^1.1.0", @@ -30,7 +30,7 @@ "gatsby-plugin-meta-redirect": "^1.1.0", "gatsby-plugin-react-helmet": "^3.0.0-rc.1", "gatsby-plugin-sass": "^2.0.0-rc.1", - "gatsby-plugin-sharp": "^2.0.0-rc.2", + "gatsby-plugin-sharp": "^2.0.0-rc.3", "gatsby-plugin-sitemap": "^2.0.0-rc.1", "gatsby-redirect-from": "0.1.0", "gatsby-remark-autolink-headers": "^2.0.0-rc.1", @@ -58,9 +58,9 @@ "slugify": "^1.3.1" }, "devDependencies": { - "@svgr/cli": "^2.2.0", + "@svgr/cli": "^2.3.0", "babel-eslint": "^9.0.0", - "eslint": "^5.4.0", + "eslint": "^5.5.0", "eslint-config-prettier": "^3.0.1", "eslint-loader": "^2.1.0", "eslint-plugin-graphql": "^2.1.1", From 98cae1e03464547ffdde196ccf9c46bb825eb024 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 4 Sep 2018 02:57:39 +0200 Subject: [PATCH 045/100] working front page pagination --- gatsby-node.js | 132 +++++++++++++----- package.json | 3 +- src/templates/Archive.jsx | 2 +- src/{pages/index.jsx => templates/Posts.jsx} | 20 ++- .../Posts.module.scss} | 0 5 files changed, 113 insertions(+), 44 deletions(-) rename src/{pages/index.jsx => templates/Posts.jsx} (78%) rename src/{pages/index.module.scss => templates/Posts.module.scss} (100%) diff --git a/gatsby-node.js b/gatsby-node.js index 195523e5..8c7c758e 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,5 +1,6 @@ const path = require('path') const { createFilePath } = require('gatsby-source-filesystem') +const { paginate } = require('gatsby-awesome-pagination') // Create slug & date for posts from file path values exports.onCreateNode = ({ node, actions, getNode }) => { @@ -46,9 +47,6 @@ exports.createPages = ({ graphql, actions }) => { const { createPage } = actions return new Promise((resolve, reject) => { - const postTemplate = path.resolve('src/templates/Post.jsx') - const archiveTemplate = path.resolve('src/templates/Archive.jsx') - resolve( graphql( ` @@ -76,47 +74,105 @@ exports.createPages = ({ graphql, actions }) => { reject(result.errors) } - // Create Posts const posts = result.data.allMarkdownRemark.edges - posts.forEach(post => { - createPage({ - path: `${post.node.fields.slug}`, - component: postTemplate, - context: { - slug: post.node.fields.slug - } - }) - }) + // Generate posts & posts index + generateContent(createPage, posts) - // Category & Tag Pages - const tagSet = new Set() - const tagMap = new Map() - - posts.forEach(post => { - if (post.node.frontmatter.tags) { - post.node.frontmatter.tags.forEach(tag => { - tagSet.add(tag) - - const array = tagMap.has(tag) ? tagMap.get(tag) : [] - array.push(post) - tagMap.set(tag, array) - }) - } - }) - - const tagList = Array.from(tagSet) - - tagList.forEach(tag => { - createPage({ - path: `/tag/${tag}/`, - component: archiveTemplate, - context: { tag } - }) - }) + // Generate Tag Pages + createTagPages(createPage, posts) resolve() }) ) }) } + +const generateContent = (createPage, posts) => { + const postTemplate = path.resolve('src/templates/Post.jsx') + const postsTemplate = path.resolve('src/templates/Posts.jsx') + + // Create Post pages + posts.forEach(post => { + createPage({ + path: `${post.node.fields.slug}`, + component: postTemplate, + context: { + slug: post.node.fields.slug + } + }) + }) + + // Create paginated front page + paginate({ + createPage, + items: posts, + itemsPerPage: 5, + pathPrefix: '/', + component: postsTemplate + }) +} + +const createTagPages = (createPage, posts) => { + const archiveTemplate = path.resolve('src/templates/Archive.jsx') + + const tagSet = new Set() + const tagMap = new Map() + + posts.forEach(post => { + if (post.node.frontmatter.tags) { + post.node.frontmatter.tags.forEach(tag => { + tagSet.add(tag) + + const array = tagMap.has(tag) ? tagMap.get(tag) : [] + array.push(post) + tagMap.set(tag, array) + }) + } + }) + + const tagList = Array.from(tagSet) + + tagList.forEach(tag => { + // Create paginated tag pages + // paginate({ + // createPage, + // items: tagList, // An array of objects + // itemsPerPage: 5, + // pathPrefix: `/tag/${tag.toLowerCase()}`, + // component: archiveTemplate + // }) + createPage({ + path: `/tag/${tag}/`, + component: archiveTemplate, + context: { tag } + }) + }) + + // Object.keys(posts).forEach(tagName => { + // const pageSize = 5 + // const pagesSum = Math.ceil(posts[tagName].length / pageSize) + + // for (let page = 1; page <= pagesSum; page++) { + // createPage({ + // path: + // page === 1 + // ? `/tag/${tagName.toLowerCase()}` + // : `/tag/${tagName.toLowerCase()}/page/${page}`, + // component: tagTemplate, + // context: { + // posts: paginate(posts[tagName], pageSize, page), + // tag: tagName, + // pagesSum, + // page + // } + // }) + // } + // }) +} + +// function paginate(array, page_size, page_number) { +// return array +// .slice(0) +// .slice((page_number - 1) * page_size, page_number * page_size) +// } diff --git a/package.json b/package.json index afd00c46..138fb069 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,8 @@ "last 3 versions" ], "dependencies": { - "gatsby": "^2.0.0-rc.8", + "gatsby": "^2.0.0-rc.9", + "gatsby-awesome-pagination": "^0.1.1", "gatsby-image": "^2.0.0-rc.1", "gatsby-plugin-catch-links": "^2.0.2-rc.1", "gatsby-plugin-lunr": "^1.1.0", diff --git a/src/templates/Archive.jsx b/src/templates/Archive.jsx index 5ec53736..07e6fb89 100644 --- a/src/templates/Archive.jsx +++ b/src/templates/Archive.jsx @@ -39,7 +39,7 @@ Archive.propTypes = { export default Archive export const archiveQuery = graphql` - query($tag: String) { + query($tag: String!) { tag: allMarkdownRemark( filter: { frontmatter: { tags: { eq: $tag } } } sort: { order: DESC, fields: [fields___date] } diff --git a/src/pages/index.jsx b/src/templates/Posts.jsx similarity index 78% rename from src/pages/index.jsx rename to src/templates/Posts.jsx index 2151e2e2..7af576c7 100644 --- a/src/pages/index.jsx +++ b/src/templates/Posts.jsx @@ -9,10 +9,11 @@ import PostContent from '../components/atoms/PostContent' import PostMore from '../components/atoms/PostMore' import PostLinkActions from '../components/atoms/PostLinkActions' import postStyles from '../templates/Post.module.scss' -import styles from './index.module.scss' +import styles from './Posts.module.scss' -const IndexPage = ({ data, location }) => { +const IndexPage = ({ data, location, pageContext }) => { const edges = data.allMarkdownRemark.edges + const { previousPagePath, nextPagePath } = pageContext const Posts = edges.map(({ node }) => { const { type, linkurl, title, image } = node.frontmatter @@ -40,6 +41,12 @@ const IndexPage = ({ data, location }) => { )} +
    + {previousPagePath ? ( + Previous + ) : null} + {nextPagePath ? Next : null} +
    ) }) @@ -49,14 +56,19 @@ const IndexPage = ({ data, location }) => { IndexPage.propTypes = { data: PropTypes.object.isRequired, + pageContext: PropTypes.object.isRequired, location: PropTypes.object.isRequired } export default IndexPage export const indexQuery = graphql` - query { - allMarkdownRemark(sort: { order: DESC, fields: [fields___date] }) { + query($skip: Int!, $limit: Int!) { + allMarkdownRemark( + sort: { order: DESC, fields: [fields___date] } + skip: $skip + limit: $limit + ) { edges { node { id diff --git a/src/pages/index.module.scss b/src/templates/Posts.module.scss similarity index 100% rename from src/pages/index.module.scss rename to src/templates/Posts.module.scss From 936baaff7e27425b658ba2127ed58016d732cfcc Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 6 Sep 2018 19:23:34 +0200 Subject: [PATCH 046/100] package updates, kill constructor --- package.json | 10 +++--- src/components/atoms/Modal.jsx | 18 +++++------ src/components/atoms/PostActions.jsx | 20 +++++------- src/components/atoms/Typekit.jsx | 16 +++++----- src/components/molecules/Head.jsx | 18 ++++++----- src/components/molecules/Menu.jsx | 40 ++++++++++-------------- src/components/molecules/ModalThanks.jsx | 22 +++++++------ src/components/molecules/Search.jsx | 22 +++++-------- src/components/molecules/Subscribe.jsx | 22 +++++++------ src/components/molecules/Vcard.jsx | 38 +++++++++++----------- src/components/organisms/Footer.jsx | 36 ++++++++++----------- src/components/organisms/Header.jsx | 6 +--- 12 files changed, 125 insertions(+), 143 deletions(-) diff --git a/package.json b/package.json index 138fb069..d4c50115 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "last 3 versions" ], "dependencies": { - "gatsby": "^2.0.0-rc.9", + "gatsby": "^2.0.0-rc.13", "gatsby-awesome-pagination": "^0.1.1", "gatsby-image": "^2.0.0-rc.1", "gatsby-plugin-catch-links": "^2.0.2-rc.1", @@ -30,7 +30,7 @@ "gatsby-plugin-matomo": "^0.5.0", "gatsby-plugin-meta-redirect": "^1.1.0", "gatsby-plugin-react-helmet": "^3.0.0-rc.1", - "gatsby-plugin-sass": "^2.0.0-rc.1", + "gatsby-plugin-sass": "^2.0.0-rc.2", "gatsby-plugin-sharp": "^2.0.0-rc.3", "gatsby-plugin-sitemap": "^2.0.0-rc.1", "gatsby-redirect-from": "0.1.0", @@ -42,15 +42,15 @@ "gatsby-source-filesystem": "^2.0.1-rc.1", "gatsby-transformer-remark": "^2.1.1-rc.1", "gatsby-transformer-sharp": "^2.1.1-rc.2", - "gatsby-transformer-yaml": "^2.1.1-rc.1", + "gatsby-transformer-yaml": "^2.1.1-rc.2", "graphql": "^0.13.2", "intersection-observer": "^0.5.0", "node-sass": "^4.9.3", "nord": "^0.2.1", "prismjs": "^1.15.0", - "react": "^16.4.2", + "react": "^16.5.0", "react-clipboard.js": "^2.0.0", - "react-dom": "^16.4.2", + "react-dom": "^16.5.0", "react-helmet": "^5.2.0", "react-modal": "^3.5.1", "react-qr-svg": "^2.1.0", diff --git a/src/components/atoms/Modal.jsx b/src/components/atoms/Modal.jsx index 69d6ec16..2fb59437 100644 --- a/src/components/atoms/Modal.jsx +++ b/src/components/atoms/Modal.jsx @@ -6,7 +6,14 @@ import styles from './Modal.module.scss' ReactModal.setAppElement('#___gatsby') -class Modal extends PureComponent { +export default class Modal extends PureComponent { + static propTypes = { + title: PropTypes.string, + isOpen: PropTypes.bool, + handleCloseModal: PropTypes.func.isRequired, + children: PropTypes.node.isRequired + } + render() { if (!this.props.isOpen) { return null @@ -31,12 +38,3 @@ class Modal extends PureComponent { ) } } - -Modal.propTypes = { - title: PropTypes.string, - isOpen: PropTypes.bool, - handleCloseModal: PropTypes.func.isRequired, - children: PropTypes.node.isRequired -} - -export default Modal diff --git a/src/components/atoms/PostActions.jsx b/src/components/atoms/PostActions.jsx index 86ab3523..68bfa23f 100644 --- a/src/components/atoms/PostActions.jsx +++ b/src/components/atoms/PostActions.jsx @@ -6,13 +6,14 @@ import styles from './PostActions.module.scss' import Twitter from '../svg/Twitter' import Bitcoin from '../svg/Bitcoin' -class PostActions extends PureComponent { - constructor(props) { - super(props) +export default class PostActions extends PureComponent { + state = { + showModal: false + } - this.state = { - showModal: false - } + static propTypes = { + slug: PropTypes.string.isRequired, + url: PropTypes.string.isRequired } toggleModal = () => { @@ -55,10 +56,3 @@ class PostActions extends PureComponent { ) } } - -PostActions.propTypes = { - slug: PropTypes.string.isRequired, - url: PropTypes.string.isRequired -} - -export default PostActions diff --git a/src/components/atoms/Typekit.jsx b/src/components/atoms/Typekit.jsx index 4c2e0665..82fe3a53 100644 --- a/src/components/atoms/Typekit.jsx +++ b/src/components/atoms/Typekit.jsx @@ -17,15 +17,17 @@ const TypekitScript = typekitID => ( ) +const query = graphql` + query { + contentYaml { + typekitID + } + } +` + const Typekit = () => ( { const { typekitID } = data.contentYaml diff --git a/src/components/molecules/Head.jsx b/src/components/molecules/Head.jsx index 7b44b594..72129fc2 100644 --- a/src/components/molecules/Head.jsx +++ b/src/components/molecules/Head.jsx @@ -3,16 +3,18 @@ import Helmet from 'react-helmet' import { StaticQuery, graphql } from 'gatsby' import Typekit from '../atoms/Typekit' +const query = graphql` + query { + contentYaml { + title + tagline + } + } +` + const Head = () => ( { const { title, tagline } = data.contentYaml diff --git a/src/components/molecules/Menu.jsx b/src/components/molecules/Menu.jsx index 32dbe285..3d9ac089 100644 --- a/src/components/molecules/Menu.jsx +++ b/src/components/molecules/Menu.jsx @@ -4,14 +4,24 @@ import { Link, StaticQuery, graphql } from 'gatsby' import Hamburger from '../atoms/Hamburger' import styles from './Menu.module.scss' -class Menu extends PureComponent { - constructor() { - super() - - this.state = { - menuOpen: false +const query = graphql` + query { + allMarkdownRemark(sort: { fields: [fields___date], order: DESC }) { + edges { + node { + frontmatter { + type + } + } + } } } +` + +export default class Menu extends PureComponent { + state = { + menuOpen: false + } toggleMenu = () => { this.setState(prevState => ({ @@ -28,21 +38,7 @@ class Menu extends PureComponent { { const posts = data.allMarkdownRemark.edges const typeSet = new Set() @@ -75,5 +71,3 @@ class Menu extends PureComponent { ) } } - -export default Menu diff --git a/src/components/molecules/ModalThanks.jsx b/src/components/molecules/ModalThanks.jsx index 1a65a027..3d94da2d 100644 --- a/src/components/molecules/ModalThanks.jsx +++ b/src/components/molecules/ModalThanks.jsx @@ -7,18 +7,20 @@ import Modal from '../atoms/Modal' import IconClipboard from '../svg/Clipboard' import styles from './ModalThanks.module.scss' +const query = graphql` + query { + contentYaml { + author { + bitcoin + ether + } + } + } +` + const ModalThanks = ({ ...props }) => ( { const { author } = data.contentYaml diff --git a/src/components/molecules/Search.jsx b/src/components/molecules/Search.jsx index 9f62f552..88185b10 100644 --- a/src/components/molecules/Search.jsx +++ b/src/components/molecules/Search.jsx @@ -8,15 +8,15 @@ import SearchResults from '../atoms/SearchResults' import styles from './Search.module.scss' -class Search extends PureComponent { - constructor(props) { - super(props) +export default class Search extends PureComponent { + state = { + searchOpen: false, + query: '', + results: [] + } - this.state = { - searchOpen: false, - query: '', - results: [] - } + static propTypes = { + lng: PropTypes.string.isRequired } toggleSearch = () => { @@ -86,9 +86,3 @@ class Search extends PureComponent { ) } } - -Search.propTypes = { - lng: PropTypes.string.isRequired -} - -export default Search diff --git a/src/components/molecules/Subscribe.jsx b/src/components/molecules/Subscribe.jsx index e84f1b66..67dfe93f 100644 --- a/src/components/molecules/Subscribe.jsx +++ b/src/components/molecules/Subscribe.jsx @@ -3,18 +3,20 @@ import { StaticQuery, graphql } from 'gatsby' import IconLinks from './IconLinks' import styles from './Subscribe.module.scss' +const query = graphql` + query { + contentYaml { + author { + rss + jsonfeed + } + } + } +` + const Subscribe = () => ( { const { rss, jsonfeed } = data.contentYaml.author diff --git a/src/components/molecules/Vcard.jsx b/src/components/molecules/Vcard.jsx index 168ff7a9..3cb67cf0 100644 --- a/src/components/molecules/Vcard.jsx +++ b/src/components/molecules/Vcard.jsx @@ -4,28 +4,30 @@ import Img from 'gatsby-image' import IconLinks from './IconLinks' import styles from './Vcard.module.scss' -const Vcard = () => ( - ( + { const { twitter, diff --git a/src/components/organisms/Footer.jsx b/src/components/organisms/Footer.jsx index abaf0489..3327ac2b 100644 --- a/src/components/organisms/Footer.jsx +++ b/src/components/organisms/Footer.jsx @@ -11,15 +11,23 @@ import Bitcoin from '../svg/Bitcoin' import styles from './Footer.module.scss' -class Footer extends PureComponent { - constructor(props) { - super(props) - - this.state = { - year: null, - showModal: false +const query = graphql` + query { + contentYaml { + author { + name + uri + bitcoin + } } } +` + +export default class Footer extends PureComponent { + state = { + year: null, + showModal: false + } toggleModal = () => { this.setState({ showModal: !this.state.showModal }) @@ -33,17 +41,7 @@ class Footer extends PureComponent { render() { return ( { const { name, uri, bitcoin } = data.contentYaml.author @@ -90,5 +88,3 @@ class Footer extends PureComponent { ) } } - -export default Footer diff --git a/src/components/organisms/Header.jsx b/src/components/organisms/Header.jsx index 0330aa68..b9104bd2 100644 --- a/src/components/organisms/Header.jsx +++ b/src/components/organisms/Header.jsx @@ -6,7 +6,7 @@ import Menu from '../molecules/Menu' import styles from './Header.module.scss' -class Header extends PureComponent { +export default class Header extends PureComponent { render() { return (
    @@ -28,7 +28,3 @@ class Header extends PureComponent { ) } } - -Header.propTypes = {} - -export default Header From 6f7ec405e4738c59e9687517f1e3321e1e68380c Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 6 Sep 2018 19:29:49 +0200 Subject: [PATCH 047/100] link fix --- src/styles/global.scss | 13 +++++++------ src/templates/Post.module.scss | 3 ++- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/styles/global.scss b/src/styles/global.scss index 39bb5437..fd906d85 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,10 +1,12 @@ @import 'variables'; @import 'mixins'; -*, -*::before, -*::after { - box-sizing: border-box; +* { + &, + &::before, + &::after { + box-sizing: border-box; + } } html, @@ -176,8 +178,7 @@ a { &:active { transition: none; - color: darken($link-color, 30%); - box-shadow: inset 0 -1px 0 darken($link-color, 30%); + color: darken($link-color, 10%); } } diff --git a/src/templates/Post.module.scss b/src/templates/Post.module.scss index 69b8b26f..a2f27400 100644 --- a/src/templates/Post.module.scss +++ b/src/templates/Post.module.scss @@ -19,7 +19,8 @@ padding-top: 0; } - &:only-child { + &:only-child, + &:last-child { border: 0; &::before { From 04f1b2bd9a0a1aaaaf818895c5623c04201ef335 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 6 Sep 2018 20:27:18 +0200 Subject: [PATCH 048/100] pagination component --- src/components/molecules/Pagination.jsx | 29 +++++++++++++++++++ .../molecules/Pagination.module.scss | 16 ++++++++++ src/templates/Posts.jsx | 15 +++++----- 3 files changed, 52 insertions(+), 8 deletions(-) create mode 100644 src/components/molecules/Pagination.jsx create mode 100644 src/components/molecules/Pagination.module.scss diff --git a/src/components/molecules/Pagination.jsx b/src/components/molecules/Pagination.jsx new file mode 100644 index 00000000..71c34780 --- /dev/null +++ b/src/components/molecules/Pagination.jsx @@ -0,0 +1,29 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { Link } from 'gatsby' +import styles from './Pagination.module.scss' + +const Pagination = ({ pageContext }) => { + const { previousPagePath, nextPagePath } = pageContext + + return ( +
    + {previousPagePath ? ( + + « Newer Posts + + ) : null} + {nextPagePath ? ( + + Older Posts » + + ) : null} +
    + ) +} + +Pagination.propTypes = { + pageContext: PropTypes.object.isRequired +} + +export default Pagination diff --git a/src/components/molecules/Pagination.module.scss b/src/components/molecules/Pagination.module.scss new file mode 100644 index 00000000..0dcbda2f --- /dev/null +++ b/src/components/molecules/Pagination.module.scss @@ -0,0 +1,16 @@ +@import 'variables'; + +.pagination { + display: flex; + margin-top: $spacer * 2; + margin-bottom: $spacer * 2; +} + +.paginationLink { + flex: 1 1 50%; + display: block; + + &:last-child { + text-align: right; + } +} diff --git a/src/templates/Posts.jsx b/src/templates/Posts.jsx index 7af576c7..b0a9e73d 100644 --- a/src/templates/Posts.jsx +++ b/src/templates/Posts.jsx @@ -8,12 +8,12 @@ import PostLead from '../components/atoms/PostLead' import PostContent from '../components/atoms/PostContent' import PostMore from '../components/atoms/PostMore' import PostLinkActions from '../components/atoms/PostLinkActions' +import Pagination from '../components/molecules/Pagination' import postStyles from '../templates/Post.module.scss' import styles from './Posts.module.scss' const IndexPage = ({ data, location, pageContext }) => { const edges = data.allMarkdownRemark.edges - const { previousPagePath, nextPagePath } = pageContext const Posts = edges.map(({ node }) => { const { type, linkurl, title, image } = node.frontmatter @@ -41,17 +41,16 @@ const IndexPage = ({ data, location, pageContext }) => { )} -
    - {previousPagePath ? ( - Previous - ) : null} - {nextPagePath ? Next : null} -
    ) }) - return {Posts} + return ( + + {Posts} + + + ) } IndexPage.propTypes = { From 85cfced721a0e5b9bc41a4dd413649902853e7d4 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 6 Sep 2018 22:28:28 +0200 Subject: [PATCH 049/100] featured component --- content/meta.yml | 1 + content/posts/2010-07-03-momcorp.md | 6 +- ...2015-08-02-simple-tor-setup-on-mac-os-x.md | 2 + .../posts/2015-09-13-css-app-store-badges.md | 3 +- gatsby-config.js | 4 +- gatsby-node.js | 7 ++- src/components/atoms/Image.jsx | 2 +- src/components/molecules/Featured.jsx | 57 +++++++++++++++++++ src/components/molecules/Featured.module.scss | 46 +++++++++++++++ src/templates/Posts.jsx | 3 + 10 files changed, 125 insertions(+), 6 deletions(-) create mode 100644 src/components/molecules/Featured.jsx create mode 100644 src/components/molecules/Featured.module.scss diff --git a/content/meta.yml b/content/meta.yml index 957ec9b4..f78ab9f3 100644 --- a/content/meta.yml +++ b/content/meta.yml @@ -28,3 +28,4 @@ author: typekitID: msu4qap +itemsPerPage: 15 diff --git a/content/posts/2010-07-03-momcorp.md b/content/posts/2010-07-03-momcorp.md index 6e5124ab..faec1a86 100644 --- a/content/posts/2010-07-03-momcorp.md +++ b/content/posts/2010-07-03-momcorp.md @@ -7,7 +7,9 @@ download: ../media/momcorp_wall_by_kremalicious.zip author: Matthias Kretschmann date: 2010-07-03 17:12:53+00:00 - + +featured: true + tags: - goodies - wallpaper @@ -16,7 +18,7 @@ tags: coinhive: true --- -The recent Futurama episode [Attack of the Killer App](http://en.wikipedia.org/wiki/Attack_of_the_Killer_App) mocked a phone and a company you probably all have heard of. I've made some wallpapers with the logo of MomCorp presented everywhere in this episode. +The Futurama episode [Attack of the Killer App](http://en.wikipedia.org/wiki/Attack_of_the_Killer_App) mocked a phone and a company you probably all have heard of. I've made some wallpapers with the logo of MomCorp presented everywhere in this episode. The wallpaper comes in four versions with two color variations and two text variations with Mom's favorite tagline. Here's an overview: diff --git a/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md b/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md index 8e82b453..9aeb3779 100644 --- a/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md +++ b/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md @@ -7,6 +7,8 @@ author: Matthias Kretschmann date: 2015-08-02 21:57:30.912218000 +02:00 updated: 2018-07-11 00:52:46+02:00 +featured: true + tags: - goodies - tutorial diff --git a/content/posts/2015-09-13-css-app-store-badges.md b/content/posts/2015-09-13-css-app-store-badges.md index 422d24fb..627efddd 100644 --- a/content/posts/2015-09-13-css-app-store-badges.md +++ b/content/posts/2015-09-13-css-app-store-badges.md @@ -7,7 +7,8 @@ image: ../media/teaser-appstorebadges.png author: Matthias Kretschmann date: 2015-09-13 18:55:18.418548000 +02:00 -category: +featured: true + tags: - goodies - css diff --git a/gatsby-config.js b/gatsby-config.js index 892046d9..606ba197 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -49,10 +49,12 @@ module.exports = { resolve: 'gatsby-remark-images', options: { maxWidth: 940, + quality: 80, + withWebp: true, linkImagesToOriginal: false, // sizeByPixelDensity: true, showCaptions: true, - backgroundColor: '#dfe8ef' + backgroundColor: '#e7eef4' } }, { diff --git a/gatsby-node.js b/gatsby-node.js index 8c7c758e..931852bf 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,7 +1,12 @@ const path = require('path') +const fs = require('fs') +const yaml = require('js-yaml') const { createFilePath } = require('gatsby-source-filesystem') const { paginate } = require('gatsby-awesome-pagination') +const meta = yaml.load(fs.readFileSync('./content/meta.yml', 'utf8')) +const { itemsPerPage } = meta + // Create slug & date for posts from file path values exports.onCreateNode = ({ node, actions, getNode }) => { const { createNodeField } = actions @@ -107,7 +112,7 @@ const generateContent = (createPage, posts) => { paginate({ createPage, items: posts, - itemsPerPage: 5, + itemsPerPage: itemsPerPage, pathPrefix: '/', component: postsTemplate }) diff --git a/src/components/atoms/Image.jsx b/src/components/atoms/Image.jsx index f8cea4c1..e961ab57 100644 --- a/src/components/atoms/Image.jsx +++ b/src/components/atoms/Image.jsx @@ -24,7 +24,7 @@ Image.propTypes = { export const projectImage = graphql` fragment ImageFluid on ImageSharp { fluid(maxWidth: 940, quality: 85) { - ...GatsbyImageSharpFluid_withWebp + ...GatsbyImageSharpFluid_withWebp_noBase64 } } ` diff --git a/src/components/molecules/Featured.jsx b/src/components/molecules/Featured.jsx new file mode 100644 index 00000000..ae423e8c --- /dev/null +++ b/src/components/molecules/Featured.jsx @@ -0,0 +1,57 @@ +import React from 'react' +import { Link, graphql, StaticQuery } from 'gatsby' +import Image from '../atoms/Image' +import styles from './Featured.module.scss' + +const query = graphql` + query { + allMarkdownRemark( + filter: { frontmatter: { featured: { eq: true } } } + sort: { fields: [fields___date], order: DESC } + ) { + edges { + node { + id + frontmatter { + title + image { + childImageSharp { + fluid(maxWidth: 260, maxHeight: 100, cropFocus: CENTER) { + ...GatsbyImageSharpFluid_withWebp_noBase64 + } + } + } + } + fields { + slug + } + } + } + } + } +` + +const Featured = () => ( + ( +
    + {data.allMarkdownRemark.edges.map(({ node }) => { + const { title, image } = node.frontmatter + const { slug } = node.fields + + return ( +
    + + {title} +

    {title}

    + +
    + ) + })} +
    + )} + /> +) + +export default Featured diff --git a/src/components/molecules/Featured.module.scss b/src/components/molecules/Featured.module.scss new file mode 100644 index 00000000..f41fcb8b --- /dev/null +++ b/src/components/molecules/Featured.module.scss @@ -0,0 +1,46 @@ +@import 'variables'; +@import 'mixins'; + +.featured { + @include breakoutviewport; + + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin-top: $spacer * 2; + margin-bottom: $spacer * 2; +} + +.featuredTitle { + transition: .1s ease-out; + font-size: $font-size-small; + margin: 0; + position: absolute; + top: 25%; + min-width: 45%; + text-align: right; + padding: $spacer / 3; + background: rgba($link-color, .85); + color: #fff; + text-shadow: 0 1px 0 #000; + left: 0; + opacity: 0; + transform: translate3d(0, -20px, 0); +} + +.featuredItem { + flex: 0 0 31%; + position: relative; + margin-bottom: 3%; + + a:hover { + > div { + border-color: $link-color !important; + } + + .featuredTitle { + opacity: 1; + transform: translate3d(0, 0, 0); + } + } +} diff --git a/src/templates/Posts.jsx b/src/templates/Posts.jsx index b0a9e73d..7ffeaa63 100644 --- a/src/templates/Posts.jsx +++ b/src/templates/Posts.jsx @@ -9,11 +9,13 @@ import PostContent from '../components/atoms/PostContent' import PostMore from '../components/atoms/PostMore' import PostLinkActions from '../components/atoms/PostLinkActions' import Pagination from '../components/molecules/Pagination' +import Featured from '../components/molecules/Featured' import postStyles from '../templates/Post.module.scss' import styles from './Posts.module.scss' const IndexPage = ({ data, location, pageContext }) => { const edges = data.allMarkdownRemark.edges + const { humanPageNumber } = pageContext const Posts = edges.map(({ node }) => { const { type, linkurl, title, image } = node.frontmatter @@ -47,6 +49,7 @@ const IndexPage = ({ data, location, pageContext }) => { return ( + {humanPageNumber === 1 && } {Posts} From 592bdad6e69d740c96f5d5fd6f4a4dcee74d9ac3 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 7 Sep 2018 00:35:57 +0200 Subject: [PATCH 050/100] featured tweaks --- content/posts/2009-02-17-out-of-whale-oil.md | 2 -- content/posts/2010-07-03-momcorp.md | 2 -- content/posts/2015-09-13-css-app-store-badges.md | 2 -- src/components/molecules/Featured.module.scss | 4 +++- 4 files changed, 3 insertions(+), 7 deletions(-) diff --git a/content/posts/2009-02-17-out-of-whale-oil.md b/content/posts/2009-02-17-out-of-whale-oil.md index a3523b26..713c144a 100644 --- a/content/posts/2009-02-17-out-of-whale-oil.md +++ b/content/posts/2009-02-17-out-of-whale-oil.md @@ -8,8 +8,6 @@ author: Matthias Kretschmann date: 2009-02-17 20:11:55+00:00 -featured: true - tags: - goodies - wallpaper diff --git a/content/posts/2010-07-03-momcorp.md b/content/posts/2010-07-03-momcorp.md index faec1a86..936d2c5b 100644 --- a/content/posts/2010-07-03-momcorp.md +++ b/content/posts/2010-07-03-momcorp.md @@ -8,8 +8,6 @@ author: Matthias Kretschmann date: 2010-07-03 17:12:53+00:00 -featured: true - tags: - goodies - wallpaper diff --git a/content/posts/2015-09-13-css-app-store-badges.md b/content/posts/2015-09-13-css-app-store-badges.md index 627efddd..b8c542e9 100644 --- a/content/posts/2015-09-13-css-app-store-badges.md +++ b/content/posts/2015-09-13-css-app-store-badges.md @@ -7,8 +7,6 @@ image: ../media/teaser-appstorebadges.png author: Matthias Kretschmann date: 2015-09-13 18:55:18.418548000 +02:00 -featured: true - tags: - goodies - css diff --git a/src/components/molecules/Featured.module.scss b/src/components/molecules/Featured.module.scss index f41fcb8b..b77ffea1 100644 --- a/src/components/molecules/Featured.module.scss +++ b/src/components/molecules/Featured.module.scss @@ -3,12 +3,14 @@ .featured { @include breakoutviewport; + @include divider; + margin-bottom: 0; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: $spacer * 2; - margin-bottom: $spacer * 2; + padding-bottom: $spacer * 2; } .featuredTitle { From 0180ad26b41b282fbea5aec8f7e6902de617918e Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 7 Sep 2018 00:36:08 +0200 Subject: [PATCH 051/100] archive tweaks --- content/meta.yml | 2 +- gatsby-node.js | 18 ++---- package.json | 2 + src/components/atoms/PostLead.module.scss | 4 +- src/components/atoms/PostTitle.module.scss | 1 - src/components/molecules/Pagination.jsx | 12 ++-- .../molecules/Pagination.module.scss | 4 ++ src/pages/photos.jsx | 3 +- src/pages/photos.module.scss | 5 ++ src/styles/_mixins.scss | 11 +--- src/templates/Archive.jsx | 61 ------------------- src/templates/Archive.module.scss | 9 --- src/templates/Post.module.scss | 26 +------- src/templates/Posts.jsx | 27 +++++--- src/templates/Posts.module.scss | 28 +++++++++ 15 files changed, 75 insertions(+), 138 deletions(-) delete mode 100644 src/templates/Archive.jsx delete mode 100644 src/templates/Archive.module.scss diff --git a/content/meta.yml b/content/meta.yml index f78ab9f3..708a32d4 100644 --- a/content/meta.yml +++ b/content/meta.yml @@ -28,4 +28,4 @@ author: typekitID: msu4qap -itemsPerPage: 15 +itemsPerPage: 10 diff --git a/gatsby-node.js b/gatsby-node.js index 931852bf..8db122a2 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -93,9 +93,10 @@ exports.createPages = ({ graphql, actions }) => { }) } +const postsTemplate = path.resolve('src/templates/Posts.jsx') + const generateContent = (createPage, posts) => { const postTemplate = path.resolve('src/templates/Post.jsx') - const postsTemplate = path.resolve('src/templates/Posts.jsx') // Create Post pages posts.forEach(post => { @@ -119,8 +120,6 @@ const generateContent = (createPage, posts) => { } const createTagPages = (createPage, posts) => { - const archiveTemplate = path.resolve('src/templates/Archive.jsx') - const tagSet = new Set() const tagMap = new Map() @@ -139,17 +138,10 @@ const createTagPages = (createPage, posts) => { const tagList = Array.from(tagSet) tagList.forEach(tag => { - // Create paginated tag pages - // paginate({ - // createPage, - // items: tagList, // An array of objects - // itemsPerPage: 5, - // pathPrefix: `/tag/${tag.toLowerCase()}`, - // component: archiveTemplate - // }) + // Create tag pages createPage({ path: `/tag/${tag}/`, - component: archiveTemplate, + component: postsTemplate, context: { tag } }) }) @@ -164,7 +156,7 @@ const createTagPages = (createPage, posts) => { // page === 1 // ? `/tag/${tagName.toLowerCase()}` // : `/tag/${tagName.toLowerCase()}/page/${page}`, - // component: tagTemplate, + // component: postsTemplate, // context: { // posts: paginate(posts[tagName], pageSize, page), // tag: tagName, diff --git a/package.json b/package.json index d4c50115..553181fe 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,8 @@ "gatsby": "^2.0.0-rc.13", "gatsby-awesome-pagination": "^0.1.1", "gatsby-image": "^2.0.0-rc.1", + "gatsby-paginate": "^1.0.16", + "gatsby-pagination": "^1.2.0", "gatsby-plugin-catch-links": "^2.0.2-rc.1", "gatsby-plugin-lunr": "^1.1.0", "gatsby-plugin-matomo": "^0.5.0", diff --git a/src/components/atoms/PostLead.module.scss b/src/components/atoms/PostLead.module.scss index 8701c272..1791e74a 100644 --- a/src/components/atoms/PostLead.module.scss +++ b/src/components/atoms/PostLead.module.scss @@ -1,5 +1,5 @@ -@import 'mixins'; +@import 'variables'; .lead { - @include lead(); + font-size: $font-size-large; } diff --git a/src/components/atoms/PostTitle.module.scss b/src/components/atoms/PostTitle.module.scss index 0e9c34f8..e1a1edd3 100644 --- a/src/components/atoms/PostTitle.module.scss +++ b/src/components/atoms/PostTitle.module.scss @@ -6,7 +6,6 @@ .hentry__title { font-size: $font-size-h1; - text-align: center; color: $color-headings; margin-top: 0; margin-bottom: $spacer; diff --git a/src/components/molecules/Pagination.jsx b/src/components/molecules/Pagination.jsx index 71c34780..d128ad77 100644 --- a/src/components/molecules/Pagination.jsx +++ b/src/components/molecules/Pagination.jsx @@ -8,14 +8,14 @@ const Pagination = ({ pageContext }) => { return (
    - {previousPagePath ? ( - - « Newer Posts - - ) : null} {nextPagePath ? ( - Older Posts » + « Older Posts + + ) : null} + {previousPagePath ? ( + + Newer Posts » ) : null}
    diff --git a/src/components/molecules/Pagination.module.scss b/src/components/molecules/Pagination.module.scss index 0dcbda2f..34b76656 100644 --- a/src/components/molecules/Pagination.module.scss +++ b/src/components/molecules/Pagination.module.scss @@ -13,4 +13,8 @@ &:last-child { text-align: right; } + + &:only-child { + text-align: left; + } } diff --git a/src/pages/photos.jsx b/src/pages/photos.jsx index 9fee5e12..11af1766 100644 --- a/src/pages/photos.jsx +++ b/src/pages/photos.jsx @@ -5,7 +5,6 @@ import Layout from '../components/Layout' import Image from '../components/atoms/Image' import styles from './photos.module.scss' -import stylesArchive from '../templates/Archive.module.scss' const Photos = ({ data, location }) => { const edges = data.photos.edges @@ -27,7 +26,7 @@ const Photos = ({ data, location }) => { return ( -

    Photos

    +

    Photos

    {PhotoThumbs}
     ) diff --git a/src/pages/photos.module.scss b/src/pages/photos.module.scss index dc35045f..a9884e54 100644 --- a/src/pages/photos.module.scss +++ b/src/pages/photos.module.scss @@ -16,3 +16,8 @@ display: block; } } + +.pageTitle { + composes: archiveTitle from '../templates/Posts.module.scss'; + margin-bottom: $spacer * 2; +} diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 1faa57f7..e240910b 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -84,7 +84,7 @@ @mixin divider() { position: relative; - border-bottom: 1px dashed #afc3cb; + border-bottom: 1px dashed lighten($brand-grey-light, 7%); margin-top: $spacer * $line-height; margin-bottom: $spacer * $line-height; @@ -101,7 +101,7 @@ @mixin divider-top() { position: relative; - border-top: 1px dashed #afc3cb; + border-top: 1px dashed lighten($brand-grey-light, 7%); margin-top: $spacer * $line-height; margin-bottom: $spacer * $line-height; @@ -126,13 +126,6 @@ margin-left: -100%; } -// Lead paragraph -///////////////////////////////////// - -@mixin lead() { - font-size: $font-size-large; -} - // Layout breakout ///////////////////////////////////// diff --git a/src/templates/Archive.jsx b/src/templates/Archive.jsx deleted file mode 100644 index 07e6fb89..00000000 --- a/src/templates/Archive.jsx +++ /dev/null @@ -1,61 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import { Link, graphql } from 'gatsby' -import Layout from '../components/Layout' -import styles from './Archive.module.scss' - -const Archive = ({ data, location, pageContext }) => { - let posts - let archiveTitle - - if (pageContext.category) { - posts = data.category.edges - archiveTitle = pageContext.category - } else { - posts = data.tag.edges - archiveTitle = pageContext.tag - } - - const Posts = posts.map(post => ( -
  • - {post.node.frontmatter.title} -
    • - )) - - return ( - -

    {archiveTitle}

    -
      {Posts}
    -     - ) -} - -Archive.propTypes = { - data: PropTypes.object.isRequired, - location: PropTypes.object.isRequired, - pageContext: PropTypes.object.isRequired -} - -export default Archive - -export const archiveQuery = graphql` - query($tag: String!) { - tag: allMarkdownRemark( - filter: { frontmatter: { tags: { eq: $tag } } } - sort: { order: DESC, fields: [fields___date] } - ) { - edges { - node { - id - frontmatter { - title - } - fields { - slug - date(formatString: "MMMM DD, YYYY") - } - } - } - } - } -` diff --git a/src/templates/Archive.module.scss b/src/templates/Archive.module.scss deleted file mode 100644 index 01d5eadd..00000000 --- a/src/templates/Archive.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import 'variables'; -@import 'mixins'; - -.archiveTitle { - @include heading-band(); - - font-size: $font-size-h3; - margin-top: 0; -} diff --git a/src/templates/Post.module.scss b/src/templates/Post.module.scss index a2f27400..e839130f 100644 --- a/src/templates/Post.module.scss +++ b/src/templates/Post.module.scss @@ -2,31 +2,9 @@ @import 'mixins'; .hentry { - @include divider; - - margin-top: 0; - margin-bottom: 0; - padding-top: $spacer * 2; - padding-bottom: $spacer * 2; width: 100%; - - @media (min-width: $screen-sm) { - padding-top: $spacer * 3; - padding-bottom: $spacer * 3; - } - - &:first-child { - padding-top: 0; - } - - &:only-child, - &:last-child { - border: 0; - - &::before { - display: none; - } - } + padding-top: $spacer; + padding-bottom: $spacer * 3; } // Post/photo teaser diff --git a/src/templates/Posts.jsx b/src/templates/Posts.jsx index 7ffeaa63..070abb93 100644 --- a/src/templates/Posts.jsx +++ b/src/templates/Posts.jsx @@ -10,19 +10,18 @@ import PostMore from '../components/atoms/PostMore' import PostLinkActions from '../components/atoms/PostLinkActions' import Pagination from '../components/molecules/Pagination' import Featured from '../components/molecules/Featured' -import postStyles from '../templates/Post.module.scss' import styles from './Posts.module.scss' -const IndexPage = ({ data, location, pageContext }) => { +const Posts = ({ data, location, pageContext }) => { const edges = data.allMarkdownRemark.edges - const { humanPageNumber } = pageContext + const { tag, previousPagePath, humanPageNumber, numberOfPages } = pageContext - const Posts = edges.map(({ node }) => { + const PostsList = edges.map(({ node }) => { const { type, linkurl, title, image } = node.frontmatter const { slug } = node.fields return ( -
    +
    {image && ( @@ -49,24 +48,31 @@ const IndexPage = ({ data, location, pageContext }) => { return ( - {humanPageNumber === 1 && } - {Posts} + {location.pathname === '/' && } + {tag &&

    {tag}

    } + {previousPagePath && ( +

    {`Page ${humanPageNumber} / ${numberOfPages}`}

    + )} + {PostsList}     ) } -IndexPage.propTypes = { +Posts.propTypes = { data: PropTypes.object.isRequired, pageContext: PropTypes.object.isRequired, location: PropTypes.object.isRequired } -export default IndexPage +export default Posts export const indexQuery = graphql` - query($skip: Int!, $limit: Int!) { + query($tag: String, $skip: Int, $limit: Int) { allMarkdownRemark( + filter: { frontmatter: { tags: { eq: $tag } } } sort: { order: DESC, fields: [fields___date] } skip: $skip limit: $limit @@ -85,6 +91,7 @@ export const indexQuery = graphql` ...ImageFluid } } + tags } fields { slug diff --git a/src/templates/Posts.module.scss b/src/templates/Posts.module.scss index 58c5ee54..5e0f4114 100644 --- a/src/templates/Posts.module.scss +++ b/src/templates/Posts.module.scss @@ -1,6 +1,34 @@ @import 'variables'; @import 'mixins'; +.hentry { + composes: hentry from '../templates/Post.module.scss'; + + @include divider; + + margin-top: 0; + margin-bottom: 0; + padding-top: $spacer * 2; + padding-bottom: $spacer * 2; + + @media (min-width: $screen-sm) { + padding-top: $spacer * 3; + padding-bottom: $spacer * 3; + } +} + +.archiveTitle { + @include heading-band(); + + font-size: $font-size-h4; + margin-top: 0; + margin-bottom: 0; + + @media (min-width: $screen-md) { + margin-left: -117%; + } +} + // Post/photo teaser ///////////////////////////////////// From a19a603923455e693b70f87206b27607a5efd90f Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 7 Sep 2018 01:00:13 +0200 Subject: [PATCH 052/100] photo titles --- src/styles/global.scss | 1 - src/templates/Post.jsx | 2 +- src/templates/Post.module.scss | 2 +- src/templates/Posts.jsx | 13 +++++-- src/templates/Posts.module.scss | 67 ++++++++++++++++++++------------- 5 files changed, 52 insertions(+), 33 deletions(-) diff --git a/src/styles/global.scss b/src/styles/global.scss index fd906d85..f55417c2 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -173,7 +173,6 @@ a { &:focus { outline: 0; color: lighten($link-color, 10%); - transform: translate3d(0, -.1rem, 0); } &:active { diff --git a/src/templates/Post.jsx b/src/templates/Post.jsx index e42e5493..487a4391 100644 --- a/src/templates/Post.jsx +++ b/src/templates/Post.jsx @@ -26,7 +26,7 @@ const Post = ({ data, location }) => { {image && ( -
    +
    {title}
    )} diff --git a/src/templates/Post.module.scss b/src/templates/Post.module.scss index e839130f..c66e1e4e 100644 --- a/src/templates/Post.module.scss +++ b/src/templates/Post.module.scss @@ -10,7 +10,7 @@ // Post/photo teaser ///////////////////////////////////// -.hentry__teaser { +.hentryImage { @include breakoutviewport(); max-width: none; diff --git a/src/templates/Posts.jsx b/src/templates/Posts.jsx index 070abb93..d9aee64c 100644 --- a/src/templates/Posts.jsx +++ b/src/templates/Posts.jsx @@ -22,17 +22,24 @@ const Posts = ({ data, location, pageContext }) => { return (
    - + {type !== 'photo' && ( + + )} {image && ( -
    +
    {title} + {type === 'photo' && ( +
    + {title} +
    + )}
    )} - + {type === 'post' && } {type === 'post' && Continue Reading} diff --git a/src/templates/Posts.module.scss b/src/templates/Posts.module.scss index 5e0f4114..5e91cd2a 100644 --- a/src/templates/Posts.module.scss +++ b/src/templates/Posts.module.scss @@ -15,12 +15,51 @@ padding-top: $spacer * 3; padding-bottom: $spacer * 3; } + + a { + position: relative; + display: block; + } +} + +.hentryImageTitle { + transition: .1s ease-out; + font-size: $font-size-h3; + font-family: $font-family-headings; + line-height: $line-height-headings; + font-weight: $font-weight-headings; + letter-spacing: -.02em; + margin: 0; + position: absolute; + top: 10%; + padding: $spacer / 3 $spacer; + background: rgba($link-color, .85); + color: #fff; + text-shadow: 0 1px 0 #000; + left: 0; + opacity: 0; + transform: translate3d(0, -20px, 0); +} + +.hentryImage { + composes: hentryImage from './Post.module.scss'; + + a:hover { + > div { + border-color: $link-color !important; + } + + .hentryImageTitle { + opacity: 1; + transform: translate3d(0, 0, 0); + } + } } .archiveTitle { @include heading-band(); - font-size: $font-size-h4; + font-size: $font-size-h3; margin-top: 0; margin-bottom: 0; @@ -28,29 +67,3 @@ margin-left: -117%; } } - -// Post/photo teaser -///////////////////////////////////// - -.hentry__image { - @include breakoutviewport(); - - max-width: none; - display: block; - margin-top: $spacer * 1.5; - margin-bottom: $spacer * 1.5; - - > div { - @include media-frame(); - - border-radius: 0; - - @media (min-width: $screen-sm) { - border-radius: $border-radius; - } - } - - img { - border-radius: 0; - } -} From 970b18995c17906b8285485dc4bf328137f0e717 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 7 Sep 2018 01:45:53 +0200 Subject: [PATCH 053/100] first try at exif data --- _src/_layouts/archive.html | 29 ------------ _src/_layouts/base.html | 20 --------- _src/_layouts/link.html | 40 ----------------- _src/_layouts/page.html | 22 --------- _src/_layouts/photo.html | 41 ----------------- _src/_layouts/post.html | 33 -------------- package.json | 1 + src/components/atoms/Exif.jsx | 65 +++++++++++++++++++++++++++ src/components/atoms/Exif.module.scss | 0 src/templates/Post.jsx | 8 ++++ 10 files changed, 74 insertions(+), 185 deletions(-) delete mode 100644 _src/_layouts/archive.html delete mode 100644 _src/_layouts/base.html delete mode 100644 _src/_layouts/link.html delete mode 100644 _src/_layouts/page.html delete mode 100644 _src/_layouts/photo.html delete mode 100644 _src/_layouts/post.html create mode 100644 src/components/atoms/Exif.jsx create mode 100644 src/components/atoms/Exif.module.scss diff --git a/_src/_layouts/archive.html b/_src/_layouts/archive.html deleted file mode 100644 index 1161f4f8..00000000 --- a/_src/_layouts/archive.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -layout: base ---- - -
    - - {% if page.type == 'category' %} -

    {{ page.title }}

    - {% elsif page.type == 'tag' %} -

    #{{ page.title }}

    - {% else %} -

    {{ page.type }} archive for {{ page.title }}

    - {% endif %} - - {% if page.path contains "photos" %}
    {% endif %} - {% for post in page.posts %} - - {% if post.layout == "photo" %} - {% include photos.html %} - {% else %} - {% include articles.html %} - {% endif %} - - {% endfor %} - {% if page.path contains "photos" %}
    {% endif %} - -
    - -{% include paginator.html %} diff --git a/_src/_layouts/base.html b/_src/_layouts/base.html deleted file mode 100644 index a2578742..00000000 --- a/_src/_layouts/base.html +++ /dev/null @@ -1,20 +0,0 @@ - -{% include head.html %} - -{% capture id %}{{ page.url | replace:'/','-' | replace_first:'-','' | replace:'.html','' | replace:'-index','' }}{% endcapture %} - - - - {% include header.html %} - -
    -
    -
    - {{ content }} -
    -
    -
    - - - -{% include footer.html %} diff --git a/_src/_layouts/link.html b/_src/_layouts/link.html deleted file mode 100644 index 14391012..00000000 --- a/_src/_layouts/link.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -layout: base ---- - -
    - - - -
    diff --git a/_src/_layouts/page.html b/_src/_layouts/page.html deleted file mode 100644 index a8162166..00000000 --- a/_src/_layouts/page.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -layout: base ---- - -
    - -
    -
    -

    {{ page.title | titlecase }}

    -
    - -
    - {% if page.image %} - {% include picture.html %} - {% endif %} - - {{ content }} -
    - -
    - -
    diff --git a/_src/_layouts/photo.html b/_src/_layouts/photo.html deleted file mode 100644 index 26490e63..00000000 --- a/_src/_layouts/photo.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -layout: base - -js: photos.min.js ---- - -
    - -
    - -
    -

    {{ page.title | titlecase }}

    -
    - -
    - - {% include picture.html %} - - -
    - -
    - {{ content }} -
    - - {% include entry_meta.html %} - - {% include relatedphotos.html %} - -
    - -
    diff --git a/_src/_layouts/post.html b/_src/_layouts/post.html deleted file mode 100644 index fdd25d7c..00000000 --- a/_src/_layouts/post.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -layout: base ---- - -
    - -
    -
    -

    {{ page.title | titlecase }}

    -
    - {{ page.excerpt }} -
    -
    - -
    - {% if page.image %} -
    - {% include picture.html %} -
    - {% endif %} - - {{ content | remove: page.excerpt }} -
    - - {% include actions.html %} - - {% include entry_meta.html %} - - {% include relatedposts.html %} - -
    - -
    diff --git a/package.json b/package.json index 553181fe..8d5fbb30 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "last 3 versions" ], "dependencies": { + "exif-js": "^2.3.0", "gatsby": "^2.0.0-rc.13", "gatsby-awesome-pagination": "^0.1.1", "gatsby-image": "^2.0.0-rc.1", diff --git a/src/components/atoms/Exif.jsx b/src/components/atoms/Exif.jsx new file mode 100644 index 00000000..27e1955d --- /dev/null +++ b/src/components/atoms/Exif.jsx @@ -0,0 +1,65 @@ +import React, { PureComponent } from 'react' +import EXIF from 'exif-js' +import styles from './Exif.module.scss' + +export default class Exif extends PureComponent { + state = { + modelvalue: null, + shutterspeedvalue: null, + aperturevalue: null, + exposurevalue: null, + isovalue: null, + focallengthvalue: null + } + + componentDidMount() { + this.getExif(this.props.image) + } + + getExif = image => { + EXIF.getData(image, function() { + // Get individual data + const modelvalue = EXIF.getTag(this, 'Model') + const shutterspeedvalue = EXIF.getTag(this, 'ExposureTime') + const aperturevalue = EXIF.getTag(this, 'FNumber') + const exposurevalue = EXIF.getTag(this, 'ExposureBias') + const isovalue = EXIF.getTag(this, 'ISOSpeedRatings') + const focallengthvalue = EXIF.getTag(this, 'FocalLength') + + console.log(modelvalue) + + this.setState({ + modelvalue, + shutterspeedvalue, + aperturevalue, + exposurevalue, + isovalue, + focallengthvalue + }) + }) + } + + render() { + const { + modelvalue, + shutterspeedvalue, + aperturevalue, + exposurevalue, + isovalue, + focallengthvalue + } = this.state + + return ( + + ) + } +} diff --git a/src/components/atoms/Exif.module.scss b/src/components/atoms/Exif.module.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/templates/Post.jsx b/src/templates/Post.jsx index 487a4391..59427eb8 100644 --- a/src/templates/Post.jsx +++ b/src/templates/Post.jsx @@ -9,6 +9,7 @@ import PostLead from '../components/atoms/PostLead' import PostContent from '../components/atoms/PostContent' import PostMeta from '../components/molecules/PostMeta' import PostActions from '../components/atoms/PostActions' +import Exif from '../components/atoms/Exif' import styles from './Post.module.scss' const Post = ({ data, location }) => { @@ -31,6 +32,10 @@ const Post = ({ data, location }) => {
    )} + {type === 'photo' && ( + + )} + @@ -67,6 +72,9 @@ export const pageQuery = graphql` image { childImageSharp { ...ImageFluid + original { + src + } } } author From 4acd2f227bfb0165a963f842c3742746f3a11b56 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 7 Sep 2018 13:08:01 +0200 Subject: [PATCH 054/100] exif try with fast-exif --- .../post-kbd.styl | 0 gatsby-config.js | 2 +- gatsby-node.js | 30 +++++ package.json | 10 +- src/components/atoms/Exif.jsx | 125 +++++++++--------- src/components/atoms/Exif.module.scss | 17 +++ src/templates/Post.jsx | 19 ++- src/templates/Posts.module.scss | 24 ++-- 8 files changed, 142 insertions(+), 85 deletions(-) rename {_src/_assets/styl => content/posts/2012-07-16-using-kbd-for-fun-and-profit}/post-kbd.styl (100%) diff --git a/_src/_assets/styl/post-kbd.styl b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.styl similarity index 100% rename from _src/_assets/styl/post-kbd.styl rename to content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.styl diff --git a/gatsby-config.js b/gatsby-config.js index 606ba197..724cc322 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -110,8 +110,8 @@ module.exports = { }, 'gatsby-plugin-react-helmet', 'gatsby-transformer-yaml', - 'gatsby-transformer-sharp', 'gatsby-plugin-sharp', + 'gatsby-transformer-sharp', 'gatsby-plugin-sitemap', 'gatsby-plugin-catch-links', 'gatsby-redirect-from', diff --git a/gatsby-node.js b/gatsby-node.js index 8db122a2..406e53de 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -3,6 +3,7 @@ const fs = require('fs') const yaml = require('js-yaml') const { createFilePath } = require('gatsby-source-filesystem') const { paginate } = require('gatsby-awesome-pagination') +const fastExif = require('fast-exif') const meta = yaml.load(fs.readFileSync('./content/meta.yml', 'utf8')) const { itemsPerPage } = meta @@ -46,6 +47,35 @@ exports.onCreateNode = ({ node, actions, getNode }) => { value: date }) } + + // exif + if (node.internal.mediaType === 'image/jpeg') { + fastExif + .read(node.absolutePath) + .then(exifData => { + const iso = exifData.exif.ISO || null + const model = exifData.image.Model || null + const fstop = exifData.exif.FNumber || null + const shutterspeed = exifData.exif.ExposureTime || null + const focalLength = exifData.exif.FocalLength || null + const exposure = exifData.exif.ExposureBiasValue || null + + // add exif fields to type File + createNodeField({ + node, + name: 'exif', + value: { + iso, + model, + fstop, + shutterspeed, + focalLength, + exposure + } + }) + }) + .catch(() => null) // just silently fail when exif can't be extracted + } } exports.createPages = ({ graphql, actions }) => { diff --git a/package.json b/package.json index 8d5fbb30..8352ea71 100644 --- a/package.json +++ b/package.json @@ -22,12 +22,10 @@ "last 3 versions" ], "dependencies": { - "exif-js": "^2.3.0", - "gatsby": "^2.0.0-rc.13", + "fast-exif": "^1.0.1", + "gatsby": "^2.0.0-rc.15", "gatsby-awesome-pagination": "^0.1.1", "gatsby-image": "^2.0.0-rc.1", - "gatsby-paginate": "^1.0.16", - "gatsby-pagination": "^1.2.0", "gatsby-plugin-catch-links": "^2.0.2-rc.1", "gatsby-plugin-lunr": "^1.1.0", "gatsby-plugin-matomo": "^0.5.0", @@ -42,9 +40,9 @@ "gatsby-remark-images": "^2.0.1-rc.1", "gatsby-remark-prismjs": "^3.0.0-rc.2", "gatsby-remark-smartypants": "^2.0.0-rc.1", - "gatsby-source-filesystem": "^2.0.1-rc.1", + "gatsby-source-filesystem": "^2.0.1-rc.2", "gatsby-transformer-remark": "^2.1.1-rc.1", - "gatsby-transformer-sharp": "^2.1.1-rc.2", + "gatsby-transformer-sharp": "^2.1.1-rc.3", "gatsby-transformer-yaml": "^2.1.1-rc.2", "graphql": "^0.13.2", "intersection-observer": "^0.5.0", diff --git a/src/components/atoms/Exif.jsx b/src/components/atoms/Exif.jsx index 27e1955d..fe446d25 100644 --- a/src/components/atoms/Exif.jsx +++ b/src/components/atoms/Exif.jsx @@ -1,65 +1,72 @@ -import React, { PureComponent } from 'react' -import EXIF from 'exif-js' +import React from 'react' +import PropTypes from 'prop-types' import styles from './Exif.module.scss' -export default class Exif extends PureComponent { - state = { - modelvalue: null, - shutterspeedvalue: null, - aperturevalue: null, - exposurevalue: null, - isovalue: null, - focallengthvalue: null - } +const getFraction = decimal => { + for (var denominator = 1; (decimal * denominator) % 1 !== 0; denominator++); + return { numerator: decimal * denominator, denominator: denominator } +} - componentDidMount() { - this.getExif(this.props.image) - } +const ExposureFormatted = ({ exposure }) => { + const exposureShortened = exposure.toFixed(0) - getExif = image => { - EXIF.getData(image, function() { - // Get individual data - const modelvalue = EXIF.getTag(this, 'Model') - const shutterspeedvalue = EXIF.getTag(this, 'ExposureTime') - const aperturevalue = EXIF.getTag(this, 'FNumber') - const exposurevalue = EXIF.getTag(this, 'ExposureBias') - const isovalue = EXIF.getTag(this, 'ISOSpeedRatings') - const focallengthvalue = EXIF.getTag(this, 'FocalLength') - - console.log(modelvalue) - - this.setState({ - modelvalue, - shutterspeedvalue, - aperturevalue, - exposurevalue, - isovalue, - focallengthvalue - }) - }) - } - - render() { - const { - modelvalue, - shutterspeedvalue, - aperturevalue, - exposurevalue, - isovalue, - focallengthvalue - } = this.state - - return ( - - ) + if (exposureShortened === 0) { + return `+/- ${exposureShortened}` + } else if (exposureShortened > 0) { + return `+ ${exposureShortened}` + } else { + return exposureShortened } } + +const Exif = ({ exif }) => { + const { iso, model, fstop, shutterspeed, focalLength, exposure } = exif + + return ( + + ) +} + +Exif.propTypes = { + exif: PropTypes.object +} + +export default Exif diff --git a/src/components/atoms/Exif.module.scss b/src/components/atoms/Exif.module.scss index e69de29b..83a1b0b0 100644 --- a/src/components/atoms/Exif.module.scss +++ b/src/components/atoms/Exif.module.scss @@ -0,0 +1,17 @@ +@import 'variables'; + +.exif { + font-size: $font-size-small; + color: $brand-grey-light; + margin-top: -($spacer); + margin-bottom: $spacer * 2; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + text-align: center; + + span { + flex: 1; + white-space: nowrap; + } +} diff --git a/src/templates/Post.jsx b/src/templates/Post.jsx index 59427eb8..4c36b27c 100644 --- a/src/templates/Post.jsx +++ b/src/templates/Post.jsx @@ -7,8 +7,8 @@ import Image from '../components/atoms/Image' import PostTitle from '../components/atoms/PostTitle' import PostLead from '../components/atoms/PostLead' import PostContent from '../components/atoms/PostContent' -import PostMeta from '../components/molecules/PostMeta' import PostActions from '../components/atoms/PostActions' +import PostMeta from '../components/molecules/PostMeta' import Exif from '../components/atoms/Exif' import styles from './Post.module.scss' @@ -32,9 +32,7 @@ const Post = ({ data, location }) => {
    )} - {type === 'photo' && ( - - )} + {image && image.fields && } @@ -62,7 +60,7 @@ Post.propTypes = { export default Post export const pageQuery = graphql` - query BlogPostByPath($slug: String!) { + query BlogPostBySlug($slug: String!) { markdownRemark(fields: { slug: { eq: $slug } }) { html excerpt @@ -72,8 +70,15 @@ export const pageQuery = graphql` image { childImageSharp { ...ImageFluid - original { - src + } + fields { + exif { + iso + model + fstop + shutterspeed + focalLength + exposure } } } diff --git a/src/templates/Posts.module.scss b/src/templates/Posts.module.scss index 5e91cd2a..13baf887 100644 --- a/src/templates/Posts.module.scss +++ b/src/templates/Posts.module.scss @@ -15,11 +15,6 @@ padding-top: $spacer * 3; padding-bottom: $spacer * 3; } - - a { - position: relative; - display: block; - } } .hentryImageTitle { @@ -44,14 +39,19 @@ .hentryImage { composes: hentryImage from './Post.module.scss'; - a:hover { - > div { - border-color: $link-color !important; - } + a { + position: relative; + display: block; - .hentryImageTitle { - opacity: 1; - transform: translate3d(0, 0, 0); + &:hover { + > div { + border-color: $link-color !important; + } + + .hentryImageTitle { + opacity: 1; + transform: translate3d(0, 0, 0); + } } } } From 4fc6639fbd46242c59ac88bb452148237ddf4bef Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 9 Sep 2018 18:16:13 +0200 Subject: [PATCH 055/100] restore 404 page --- _src/_assets/styl/_page-404.styl | 68 ---------------------------- src/components/Layout.module.scss | 1 + src/pages/404.jsx | 14 +++--- src/pages/404.module.scss | 75 +++++++++++++++++++++++++++++++ 4 files changed, 84 insertions(+), 74 deletions(-) delete mode 100644 _src/_assets/styl/_page-404.styl create mode 100644 src/pages/404.module.scss diff --git a/_src/_assets/styl/_page-404.styl b/_src/_assets/styl/_page-404.styl deleted file mode 100644 index 53a98593..00000000 --- a/_src/_assets/styl/_page-404.styl +++ /dev/null @@ -1,68 +0,0 @@ -// -// kremalicious3 -// -------------- -// Page - 404 -// - -.page-404 - @extend .textcenter - - .entry-title - @extend .hide - -.srverror-title - font-size: 2em - margin-bottom: ($spacer/4) - color: $text-color-light - -.srverror-text - @extend .text-dimmed - font-size: 1.2em - letter-spacing: .01em - -// HAL needs a size -$hal-size = 72px - -.hal-9000 - @extend .textcenter, .aligncenter - width: $hal-size - height: $hal-size - border-radius: $hal-size - background: #444 - padding: 1.5em - margin-top: $spacer - margin-bottom: $spacer - position: relative - border: 4px solid #ccc - box-shadow: inset 0 0 10px #000 - - // eye - &:before - content: "" - width: 100% - height: 100% - border-radius: 100% - display: block - background: red - box-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red, 0 0 20px red, 0 0 25px red, 0 0 30px red, 0 0 40px red - animation: halpulse 7s infinite - - // gloss - &:after - content: "" - position: absolute - width: $hal-size - height: $hal-size - border-radius: $hal-size - position: absolute - left: 0 - top: 0 - background-image: linear-gradient(135deg, rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.07) 40%,rgba(255,255,255,0) 41%) - -@keyframes halpulse - 0% - opacity: 1 - 50% - opacity: .6 - 100% - opacity: 1 diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss index 3dd567cd..425df431 100644 --- a/src/components/Layout.module.scss +++ b/src/components/Layout.module.scss @@ -29,6 +29,7 @@ background-color: $page-background-color; border-top: 1px solid rgba(255, 255, 255, .7); border-bottom: 1px solid rgba(255, 255, 255, .7); + padding-bottom: $spacer * 2; box-shadow: 0 1px 4px rgba($brand-main, .1), 0 -1px 4px rgba($brand-main, .2); transform: translate3d(0, 0, 0); diff --git a/src/pages/404.jsx b/src/pages/404.jsx index 81e096d8..04eb5d97 100644 --- a/src/pages/404.jsx +++ b/src/pages/404.jsx @@ -1,17 +1,19 @@ import React from 'react' import PropTypes from 'prop-types' +import { Link } from 'gatsby' import Layout from '../components/Layout' +import styles from './404.module.scss' const NotFound = ({ location }) => ( -
    +
    -

    I am sorry Dave,

    -

    I am afraid I can not do that.

    +
    +

    I am sorry Dave,

    +

    I am afraid I can not do that.

    - - How about a nice search? - + Back to homepage +
    ) diff --git a/src/pages/404.module.scss b/src/pages/404.module.scss new file mode 100644 index 00000000..2de7984d --- /dev/null +++ b/src/pages/404.module.scss @@ -0,0 +1,75 @@ +@import 'variables'; + +.wrapper { + text-align: center; +} + +.title { + font-size: $font-size-h3; + margin-top: 0; + margin-bottom: $spacer / 4; +} + +.text { + font-size: $font-size-base; + color: $brand-grey-light; +} + +// HAL needs a size +$hal-size: 72px; + +.hal9000 { + width: $hal-size; + height: $hal-size; + border-radius: $hal-size; + background: #444; + padding: 1.5em; + margin: $spacer auto; + position: relative; + border: 4px solid #ccc; + box-shadow: inset 0 0 10px #000; + + // eye + &::before { + content: ''; + width: 100%; + height: 100%; + border-radius: 100%; + display: block; + background: red; + box-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red, 0 0 20px red, + 0 0 25px red, 0 0 30px red, 0 0 40px red; + animation: halpulse 7s infinite; + } + + // gloss + &::after { + content: ''; + position: absolute; + width: $hal-size; + height: $hal-size; + border-radius: $hal-size; + left: 0; + top: 0; + background-image: linear-gradient( + 135deg, + rgba(255, 255, 255, .07) 0%, + rgba(255, 255, 255, .07) 40%, + rgba(255, 255, 255, 0) 41% + ); + } +} + +@keyframes halpulse { + 0% { + opacity: 1; + } + + 50% { + opacity: .6; + } + + 100% { + opacity: 1; + } +} From 1e6860d0f11be277adac2f30919c83db4dfd6372 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 9 Sep 2018 21:20:19 +0200 Subject: [PATCH 056/100] node refactor --- gatsby-node.js | 48 ++++++++++++++++++++++++++---------------------- 1 file changed, 26 insertions(+), 22 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index 406e53de..05f2b404 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -53,31 +53,35 @@ exports.onCreateNode = ({ node, actions, getNode }) => { fastExif .read(node.absolutePath) .then(exifData => { - const iso = exifData.exif.ISO || null - const model = exifData.image.Model || null - const fstop = exifData.exif.FNumber || null - const shutterspeed = exifData.exif.ExposureTime || null - const focalLength = exifData.exif.FocalLength || null - const exposure = exifData.exif.ExposureBiasValue || null - - // add exif fields to type File - createNodeField({ - node, - name: 'exif', - value: { - iso, - model, - fstop, - shutterspeed, - focalLength, - exposure - } - }) + generateExif(exifData, createNodeField, node) }) .catch(() => null) // just silently fail when exif can't be extracted } } +const generateExif = (exifData, createNodeField, node) => { + const iso = exifData.exif.ISO || null + const model = exifData.image.Model || null + const fstop = exifData.exif.FNumber || null + const shutterspeed = exifData.exif.ExposureTime || null + const focalLength = exifData.exif.FocalLength || null + const exposure = exifData.exif.ExposureBiasValue || null + + // add exif fields to type File + createNodeField({ + node, + name: 'exif', + value: { + iso, + model, + fstop, + shutterspeed, + focalLength, + exposure + } + }) +} + exports.createPages = ({ graphql, actions }) => { const { createPage } = actions @@ -115,7 +119,7 @@ exports.createPages = ({ graphql, actions }) => { generateContent(createPage, posts) // Generate Tag Pages - createTagPages(createPage, posts) + generateTagPages(createPage, posts) resolve() }) @@ -149,7 +153,7 @@ const generateContent = (createPage, posts) => { }) } -const createTagPages = (createPage, posts) => { +const generateTagPages = (createPage, posts) => { const tagSet = new Set() const tagMap = new Map() From 84cbd6109ff5397638f45d5b0e4e041393f425ce Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 11 Sep 2018 23:27:05 +0200 Subject: [PATCH 057/100] package updates --- package.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 8352ea71..89563e15 100644 --- a/package.json +++ b/package.json @@ -23,27 +23,27 @@ ], "dependencies": { "fast-exif": "^1.0.1", - "gatsby": "^2.0.0-rc.15", + "gatsby": "^2.0.0-rc.21", "gatsby-awesome-pagination": "^0.1.1", - "gatsby-image": "^2.0.0-rc.1", + "gatsby-image": "^2.0.0-rc.2", "gatsby-plugin-catch-links": "^2.0.2-rc.1", "gatsby-plugin-lunr": "^1.1.0", "gatsby-plugin-matomo": "^0.5.0", "gatsby-plugin-meta-redirect": "^1.1.0", "gatsby-plugin-react-helmet": "^3.0.0-rc.1", "gatsby-plugin-sass": "^2.0.0-rc.2", - "gatsby-plugin-sharp": "^2.0.0-rc.3", + "gatsby-plugin-sharp": "^2.0.0-rc.7", "gatsby-plugin-sitemap": "^2.0.0-rc.1", "gatsby-redirect-from": "0.1.0", "gatsby-remark-autolink-headers": "^2.0.0-rc.1", - "gatsby-remark-copy-linked-files": "^2.0.0-rc.1", - "gatsby-remark-images": "^2.0.1-rc.1", + "gatsby-remark-copy-linked-files": "^2.0.0-rc.5", + "gatsby-remark-images": "^2.0.1-rc.5", "gatsby-remark-prismjs": "^3.0.0-rc.2", "gatsby-remark-smartypants": "^2.0.0-rc.1", - "gatsby-source-filesystem": "^2.0.1-rc.2", - "gatsby-transformer-remark": "^2.1.1-rc.1", + "gatsby-source-filesystem": "^2.0.1-rc.6", + "gatsby-transformer-remark": "^2.1.1-rc.5", "gatsby-transformer-sharp": "^2.1.1-rc.3", - "gatsby-transformer-yaml": "^2.1.1-rc.2", + "gatsby-transformer-yaml": "^2.1.1-rc.6", "graphql": "^0.13.2", "intersection-observer": "^0.5.0", "node-sass": "^4.9.3", From 752405020a50ef9039f276322793f4a1accfe8c8 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 12 Sep 2018 21:03:35 +0200 Subject: [PATCH 058/100] exif tweaks --- gatsby-node.js | 42 +++++++++++++++---- src/components/atoms/Exif.jsx | 60 +++------------------------ src/components/atoms/Exif.module.scss | 23 ++++++++-- src/components/atoms/Image.jsx | 2 +- 4 files changed, 61 insertions(+), 66 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index 05f2b404..68308fd8 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -51,21 +51,49 @@ exports.onCreateNode = ({ node, actions, getNode }) => { // exif if (node.internal.mediaType === 'image/jpeg') { fastExif - .read(node.absolutePath) + .read(node.absolutePath, true) .then(exifData => { + if (!exifData) return generateExif(exifData, createNodeField, node) }) .catch(() => null) // just silently fail when exif can't be extracted } } +const getFraction = decimal => { + for (var denominator = 1; (decimal * denominator) % 1 !== 0; denominator++); + return { numerator: decimal * denominator, denominator: denominator } +} + const generateExif = (exifData, createNodeField, node) => { - const iso = exifData.exif.ISO || null - const model = exifData.image.Model || null - const fstop = exifData.exif.FNumber || null - const shutterspeed = exifData.exif.ExposureTime || null - const focalLength = exifData.exif.FocalLength || null - const exposure = exifData.exif.ExposureBiasValue || null + const { Model } = exifData.image + const { + ISO, + FNumber, + ExposureTime, + FocalLength, + ExposureBiasValue + } = exifData.exif + + const shutterspeedNumerator = getFraction(ExposureTime).numerator + const shutterspeedDenominator = getFraction(ExposureTime).denominator + const exposureShortened = parseFloat(ExposureBiasValue.toFixed(2)) + + const model = Model + const iso = `ISO ${ISO}` + const fstop = `ƒ ${FNumber}` + const shutterspeed = `${shutterspeedNumerator}/${shutterspeedDenominator}s` + const focalLength = `${FocalLength}mm` + + let exposure + + if (ExposureBiasValue === 0) { + exposure = `+/- ${exposureShortened} ev` + } else if (ExposureBiasValue > 0) { + exposure = `+ ${exposureShortened} ev` + } else { + exposure = `${exposureShortened} ev` + } // add exif fields to type File createNodeField({ diff --git a/src/components/atoms/Exif.jsx b/src/components/atoms/Exif.jsx index fe446d25..0efeed4c 100644 --- a/src/components/atoms/Exif.jsx +++ b/src/components/atoms/Exif.jsx @@ -2,65 +2,17 @@ import React from 'react' import PropTypes from 'prop-types' import styles from './Exif.module.scss' -const getFraction = decimal => { - for (var denominator = 1; (decimal * denominator) % 1 !== 0; denominator++); - return { numerator: decimal * denominator, denominator: denominator } -} - -const ExposureFormatted = ({ exposure }) => { - const exposureShortened = exposure.toFixed(0) - - if (exposureShortened === 0) { - return `+/- ${exposureShortened}` - } else if (exposureShortened > 0) { - return `+ ${exposureShortened}` - } else { - return exposureShortened - } -} - const Exif = ({ exif }) => { const { iso, model, fstop, shutterspeed, focalLength, exposure } = exif return ( ) } diff --git a/src/components/atoms/Exif.module.scss b/src/components/atoms/Exif.module.scss index 83a1b0b0..14255300 100644 --- a/src/components/atoms/Exif.module.scss +++ b/src/components/atoms/Exif.module.scss @@ -1,17 +1,32 @@ @import 'variables'; +@import 'mixins'; .exif { - font-size: $font-size-small; + font-size: $font-size-mini; color: $brand-grey-light; - margin-top: -($spacer); + margin-top: -($spacer * 1.5); margin-bottom: $spacer * 2; display: flex; flex-wrap: wrap; - justify-content: space-between; text-align: center; span { - flex: 1; + display: block; + flex: 0 0 33%; white-space: nowrap; + padding: $spacer / 4; + + &:first-child { + flex-basis: 100%; + } + } + + @media (min-width: $screen-sm) { + span { + &, + &:first-child { + flex: 1 1 auto; + } + } } } diff --git a/src/components/atoms/Image.jsx b/src/components/atoms/Image.jsx index e961ab57..80686bc1 100644 --- a/src/components/atoms/Image.jsx +++ b/src/components/atoms/Image.jsx @@ -8,7 +8,7 @@ const Image = ({ fluid, fixed, alt }) => ( {alt} Date: Wed, 12 Sep 2018 21:50:54 +0200 Subject: [PATCH 059/100] add gatsby-plugin-matomo --- gatsby-config.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/gatsby-config.js b/gatsby-config.js index 724cc322..3a67cf71 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -108,6 +108,14 @@ module.exports = { } } }, + { + resolve: 'gatsby-plugin-matomo', + options: { + siteId: '1', + matomoUrl: 'https://analytics.kremalicious.com', + siteUrl: `${url}` + } + }, 'gatsby-plugin-react-helmet', 'gatsby-transformer-yaml', 'gatsby-plugin-sharp', From 184078231f950ed454449f5a9f49cf39739817c0 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 12 Sep 2018 22:36:50 +0200 Subject: [PATCH 060/100] exif fixes --- gatsby-node.js | 13 ++++--------- package.json | 1 + src/components/molecules/PostMeta.module.scss | 1 - 3 files changed, 5 insertions(+), 10 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index 68308fd8..ca24f560 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -4,6 +4,7 @@ const yaml = require('js-yaml') const { createFilePath } = require('gatsby-source-filesystem') const { paginate } = require('gatsby-awesome-pagination') const fastExif = require('fast-exif') +const { Fraction } = require('fractional') const meta = yaml.load(fs.readFileSync('./content/meta.yml', 'utf8')) const { itemsPerPage } = meta @@ -60,11 +61,6 @@ exports.onCreateNode = ({ node, actions, getNode }) => { } } -const getFraction = decimal => { - for (var denominator = 1; (decimal * denominator) % 1 !== 0; denominator++); - return { numerator: decimal * denominator, denominator: denominator } -} - const generateExif = (exifData, createNodeField, node) => { const { Model } = exifData.image const { @@ -75,14 +71,13 @@ const generateExif = (exifData, createNodeField, node) => { ExposureBiasValue } = exifData.exif - const shutterspeedNumerator = getFraction(ExposureTime).numerator - const shutterspeedDenominator = getFraction(ExposureTime).denominator + const { numerator, denominator } = new Fraction(ExposureTime) const exposureShortened = parseFloat(ExposureBiasValue.toFixed(2)) - const model = Model + const model = `${Model}` const iso = `ISO ${ISO}` const fstop = `ƒ ${FNumber}` - const shutterspeed = `${shutterspeedNumerator}/${shutterspeedDenominator}s` + const shutterspeed = `${numerator}/${denominator}s` const focalLength = `${FocalLength}mm` let exposure diff --git a/package.json b/package.json index 89563e15..946b406a 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ ], "dependencies": { "fast-exif": "^1.0.1", + "fractional": "^1.0.0", "gatsby": "^2.0.0-rc.21", "gatsby-awesome-pagination": "^0.1.1", "gatsby-image": "^2.0.0-rc.2", diff --git a/src/components/molecules/PostMeta.module.scss b/src/components/molecules/PostMeta.module.scss index 8ca48462..7a7a9b80 100644 --- a/src/components/molecules/PostMeta.module.scss +++ b/src/components/molecules/PostMeta.module.scss @@ -36,7 +36,6 @@ ///////////////////////////////////// .type { - margin-bottom: $spacer / 2; text-align: center; a { From f1cfb20d275364a2bf2352e1aa864534614e8d72 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 12 Sep 2018 22:53:51 +0200 Subject: [PATCH 061/100] layout tweaks --- src/components/Layout.module.scss | 2 +- src/components/organisms/Footer.module.scss | 2 +- src/components/organisms/Header.module.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss index 425df431..fe6b2f61 100644 --- a/src/components/Layout.module.scss +++ b/src/components/Layout.module.scss @@ -38,7 +38,7 @@ transform: translate3d(0, ($spacer * 8), 0); } - @media (min-width: $screen-sm) { + @media (min-width: $screen-sm) and (min-height: 500px) { margin-top: $spacer * 2.65; margin-bottom: $spacer * 20; // height of footer position: relative; diff --git a/src/components/organisms/Footer.module.scss b/src/components/organisms/Footer.module.scss index 85c7587b..2d968f87 100644 --- a/src/components/organisms/Footer.module.scss +++ b/src/components/organisms/Footer.module.scss @@ -7,7 +7,7 @@ color: $text-color-light; line-height: $spacer; - @media (min-width: $screen-sm) { + @media (min-width: $screen-sm) and (min-height: 500px) { position: fixed; width: 100%; border: 0; diff --git a/src/components/organisms/Header.module.scss b/src/components/organisms/Header.module.scss index 4e3db502..bcd4973b 100644 --- a/src/components/organisms/Header.module.scss +++ b/src/components/organisms/Header.module.scss @@ -5,7 +5,7 @@ margin-top: ($spacer/2); margin-bottom: ($spacer/2); - @media (min-width: $screen-sm) { + @media (min-width: $screen-sm) and (min-height: 500px) { position: fixed; width: 100%; z-index: 1; From f12cb6d1d9f2cdd5366ee039df9fed3d96dc2772 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 12 Sep 2018 22:53:59 +0200 Subject: [PATCH 062/100] manual menu --- content/menu.yml | 5 ++++ src/components/molecules/Menu.jsx | 28 ++++++++--------------- src/components/molecules/Menu.module.scss | 7 +++++- 3 files changed, 20 insertions(+), 20 deletions(-) create mode 100644 content/menu.yml diff --git a/content/menu.yml b/content/menu.yml new file mode 100644 index 00000000..8abb38bd --- /dev/null +++ b/content/menu.yml @@ -0,0 +1,5 @@ +- title: Photos + link: /photos + +- title: Goodies + link: /tag/goodies diff --git a/src/components/molecules/Menu.jsx b/src/components/molecules/Menu.jsx index 3d9ac089..e97c37cc 100644 --- a/src/components/molecules/Menu.jsx +++ b/src/components/molecules/Menu.jsx @@ -6,12 +6,11 @@ import styles from './Menu.module.scss' const query = graphql` query { - allMarkdownRemark(sort: { fields: [fields___date], order: DESC }) { + allMenuYaml { edges { node { - frontmatter { - type - } + title + link } } } @@ -40,21 +39,12 @@ export default class Menu extends PureComponent { { - const posts = data.allMarkdownRemark.edges - const typeSet = new Set() + const { edges } = data.allMenuYaml - posts.forEach(post => { - if (post.node.frontmatter.type) { - typeSet.add(post.node.frontmatter.type) - } - }) - - const typeList = Array.from(typeSet) - - const Types = typeList.map(type => ( -
  • - - {type}s + const MenuItems = edges.map(({ node }) => ( +
  • + + {node.title}
    • )) @@ -62,7 +52,7 @@ export default class Menu extends PureComponent { return ( -
      {Types}
    +
      {MenuItems}
     ) }} diff --git a/src/components/molecules/Menu.module.scss b/src/components/molecules/Menu.module.scss index e435d202..5159c38f 100644 --- a/src/components/molecules/Menu.module.scss +++ b/src/components/molecules/Menu.module.scss @@ -2,11 +2,16 @@ @import 'mixins'; .menu { + @include divider-top; + + margin-top: 0; + padding-top: $spacer / 2; position: absolute; - top: calc(100% + #{$spacer}); + top: calc(100% + #{$spacer / 2}); left: 0; display: flex; flex-wrap: wrap; + justify-content: center; width: 100%; li { From c9056e00158260d214359846d302820228e1b6f9 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 12 Sep 2018 23:36:05 +0200 Subject: [PATCH 063/100] shutterspeed fraction fix --- gatsby-node.js | 6 +++--- package.json | 2 +- src/components/atoms/Exif.module.scss | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index ca24f560..887bec45 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -4,7 +4,7 @@ const yaml = require('js-yaml') const { createFilePath } = require('gatsby-source-filesystem') const { paginate } = require('gatsby-awesome-pagination') const fastExif = require('fast-exif') -const { Fraction } = require('fractional') +const Fraction = require('fraction.js') const meta = yaml.load(fs.readFileSync('./content/meta.yml', 'utf8')) const { itemsPerPage } = meta @@ -71,13 +71,13 @@ const generateExif = (exifData, createNodeField, node) => { ExposureBiasValue } = exifData.exif - const { numerator, denominator } = new Fraction(ExposureTime) + const { n, d } = new Fraction(ExposureTime) const exposureShortened = parseFloat(ExposureBiasValue.toFixed(2)) const model = `${Model}` const iso = `ISO ${ISO}` const fstop = `ƒ ${FNumber}` - const shutterspeed = `${numerator}/${denominator}s` + const shutterspeed = `${n}/${d}s` const focalLength = `${FocalLength}mm` let exposure diff --git a/package.json b/package.json index 946b406a..d783707a 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ ], "dependencies": { "fast-exif": "^1.0.1", - "fractional": "^1.0.0", + "fraction.js": "^4.0.9", "gatsby": "^2.0.0-rc.21", "gatsby-awesome-pagination": "^0.1.1", "gatsby-image": "^2.0.0-rc.2", diff --git a/src/components/atoms/Exif.module.scss b/src/components/atoms/Exif.module.scss index 14255300..d463b4af 100644 --- a/src/components/atoms/Exif.module.scss +++ b/src/components/atoms/Exif.module.scss @@ -4,7 +4,7 @@ .exif { font-size: $font-size-mini; color: $brand-grey-light; - margin-top: -($spacer * 1.5); + margin-top: -($spacer * 1.25); margin-bottom: $spacer * 2; display: flex; flex-wrap: wrap; From b5cf1560f57788670b4ff7345addcc8530c2efa6 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 12 Sep 2018 23:48:59 +0200 Subject: [PATCH 064/100] cleanup --- .prettierrc | 8 +- _src/_assets/js/photos.js | 59 ---- _src/_assets/styl/_kremalicious/actions.styl | 96 ------ _src/_assets/styl/_kremalicious/alerts.styl | 38 --- .../styl/_kremalicious/animations.styl | 64 ---- _src/_assets/styl/_kremalicious/buttons.styl | 201 ----------- .../styl/_kremalicious/content-featured.styl | 62 ---- .../styl/_kremalicious/content-link.styl | 24 -- .../styl/_kremalicious/content-photo.styl | 103 ------ .../styl/_kremalicious/content-related.styl | 48 --- _src/_assets/styl/_kremalicious/content.styl | 204 ----------- _src/_assets/styl/_kremalicious/footer.styl | 97 ------ _src/_assets/styl/_kremalicious/forms.styl | 189 ----------- _src/_assets/styl/_kremalicious/grid.styl | 217 ------------ .../_assets/styl/_kremalicious/hamburger.styl | 47 --- _src/_assets/styl/_kremalicious/header.styl | 73 ---- _src/_assets/styl/_kremalicious/icons.styl | 23 -- _src/_assets/styl/_kremalicious/layout.styl | 92 ----- _src/_assets/styl/_kremalicious/media.styl | 53 --- _src/_assets/styl/_kremalicious/mixins.styl | 265 --------------- .../styl/_kremalicious/navigation.styl | 105 ------ _src/_assets/styl/_kremalicious/print.styl | 80 ----- .../styl/_kremalicious/scaffolding.styl | 23 -- _src/_assets/styl/_kremalicious/search.styl | 86 ----- _src/_assets/styl/_kremalicious/syntax.styl | 69 ---- _src/_assets/styl/_kremalicious/tables.styl | 68 ---- _src/_assets/styl/_kremalicious/tagcloud.styl | 4 - _src/_assets/styl/_kremalicious/tooltips.styl | 52 --- .../styl/_kremalicious/typography.styl | 321 ------------------ .../_assets/styl/_kremalicious/variables.styl | 166 --------- _src/_assets/styl/_kremalicious/vex.styl | 121 ------- _src/_assets/styl/kremalicious3.styl | 67 ---- _src/_includes/actions.html | 23 -- _src/_includes/articles.html | 108 ------ _src/_includes/entry_meta.html | 31 -- _src/_includes/featured.html | 15 - _src/_includes/footer.html | 69 ---- _src/_includes/head.html | 103 ------ _src/_includes/header.html | 57 ---- _src/_includes/paginator.html | 43 --- _src/_includes/photos.html | 7 - _src/_includes/picture.html | 27 -- _src/_includes/relatedphotos.html | 17 - _src/_includes/relatedposts.html | 24 -- _src/_includes/scripts.html | 111 ------ _src/{_assets/styl => }/_page-styleguide.styl | 0 _src/{_includes => }/opengraph.html | 0 _src/{_includes => }/twittercards.html | 0 48 files changed, 4 insertions(+), 3756 deletions(-) delete mode 100644 _src/_assets/js/photos.js delete mode 100644 _src/_assets/styl/_kremalicious/actions.styl delete mode 100644 _src/_assets/styl/_kremalicious/alerts.styl delete mode 100644 _src/_assets/styl/_kremalicious/animations.styl delete mode 100644 _src/_assets/styl/_kremalicious/buttons.styl delete mode 100644 _src/_assets/styl/_kremalicious/content-featured.styl delete mode 100644 _src/_assets/styl/_kremalicious/content-link.styl delete mode 100644 _src/_assets/styl/_kremalicious/content-photo.styl delete mode 100644 _src/_assets/styl/_kremalicious/content-related.styl delete mode 100644 _src/_assets/styl/_kremalicious/content.styl delete mode 100644 _src/_assets/styl/_kremalicious/footer.styl delete mode 100644 _src/_assets/styl/_kremalicious/forms.styl delete mode 100644 _src/_assets/styl/_kremalicious/grid.styl delete mode 100644 _src/_assets/styl/_kremalicious/hamburger.styl delete mode 100644 _src/_assets/styl/_kremalicious/header.styl delete mode 100644 _src/_assets/styl/_kremalicious/icons.styl delete mode 100644 _src/_assets/styl/_kremalicious/layout.styl delete mode 100644 _src/_assets/styl/_kremalicious/media.styl delete mode 100644 _src/_assets/styl/_kremalicious/mixins.styl delete mode 100644 _src/_assets/styl/_kremalicious/navigation.styl delete mode 100644 _src/_assets/styl/_kremalicious/print.styl delete mode 100644 _src/_assets/styl/_kremalicious/scaffolding.styl delete mode 100644 _src/_assets/styl/_kremalicious/search.styl delete mode 100644 _src/_assets/styl/_kremalicious/syntax.styl delete mode 100644 _src/_assets/styl/_kremalicious/tables.styl delete mode 100644 _src/_assets/styl/_kremalicious/tagcloud.styl delete mode 100644 _src/_assets/styl/_kremalicious/tooltips.styl delete mode 100644 _src/_assets/styl/_kremalicious/typography.styl delete mode 100644 _src/_assets/styl/_kremalicious/variables.styl delete mode 100644 _src/_assets/styl/_kremalicious/vex.styl delete mode 100644 _src/_assets/styl/kremalicious3.styl delete mode 100644 _src/_includes/actions.html delete mode 100644 _src/_includes/articles.html delete mode 100644 _src/_includes/entry_meta.html delete mode 100644 _src/_includes/featured.html delete mode 100644 _src/_includes/footer.html delete mode 100644 _src/_includes/head.html delete mode 100644 _src/_includes/header.html delete mode 100644 _src/_includes/paginator.html delete mode 100644 _src/_includes/photos.html delete mode 100644 _src/_includes/picture.html delete mode 100644 _src/_includes/relatedphotos.html delete mode 100644 _src/_includes/relatedposts.html delete mode 100644 _src/_includes/scripts.html rename _src/{_assets/styl => }/_page-styleguide.styl (100%) rename _src/{_includes => }/opengraph.html (100%) rename _src/{_includes => }/twittercards.html (100%) diff --git a/.prettierrc b/.prettierrc index 21137834..49955e2e 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,5 @@ { - "semi": false, - "singleQuote": true, - "trailingComma": "none" - } + "semi": false, + "singleQuote": true, + "trailingComma": "none" +} diff --git a/_src/_assets/js/photos.js b/_src/_assets/js/photos.js deleted file mode 100644 index 81e73294..00000000 --- a/_src/_assets/js/photos.js +++ /dev/null @@ -1,59 +0,0 @@ -/* global EXIF */ - -/* eslint-disable spaced-comment */ -//=include exif-js/exif.js -/* eslint-enable spaced-comment */ - -window.addEventListener('load', getExif, false) - -function getExif() { - const image = document.querySelector('.hentry__teaser img') - - EXIF.getData(image, function () { - // Get individual data - const modelvalue = EXIF.getTag(this, 'Model') - const shutterspeedvalue = EXIF.getTag(this, 'ExposureTime') - const aperturevalue = EXIF.getTag(this, 'FNumber') - const exposurevalue = EXIF.getTag(this, 'ExposureBias') - const isovalue = EXIF.getTag(this, 'ISOSpeedRatings') - const focallengthvalue = EXIF.getTag(this, 'FocalLength') - - // Inject data - if (modelvalue) { - const model = document.querySelector('.exif__model') - model.innerHTML = modelvalue - } - - if (shutterspeedvalue) { - const shutterspeed = document.querySelector('.exif__shutterspeed') - shutterspeed.innerHTML = `${shutterspeedvalue.numerator}/${shutterspeedvalue.denominator}s` - } - - if (aperturevalue) { - const aperture = document.querySelector('.exif__aperture') - aperture.innerHTML = `ƒ ${aperturevalue}` - } - - if (exposurevalue || exposurevalue === 0) { - const exposure = document.querySelector('.exif__exposure') - - if (exposurevalue === 0) { - exposure.innerHTML = `+/- ${exposurevalue}` - } else if (exposurevalue > 0) { - exposure.innerHTML = `+ ${exposurevalue}` - } else { - exposure.innerHTML = `- ${exposurevalue}` - } - } - - if (isovalue) { - const iso = document.querySelector('.exif__iso') - iso.innerHTML = `ISO ${isovalue}` - } - - if (focallengthvalue) { - const focallength = document.querySelector('.exif__focallength') - focallength.innerHTML = `${focallengthvalue}mm` - } - }) -} diff --git a/_src/_assets/styl/_kremalicious/actions.styl b/_src/_assets/styl/_kremalicious/actions.styl deleted file mode 100644 index 2e76f1ad..00000000 --- a/_src/_assets/styl/_kremalicious/actions.styl +++ /dev/null @@ -1,96 +0,0 @@ -.actions - @extend .divider-top, .divider-bottom, .small - margin-top: ($spacer * 2) - padding: $spacer 0 - - .grid - margin-bottom: 0 - - @media $screen-sm - .grid__col:last-child - display: flex - justify-content: flex-end - -.action - padding-left: 32px - display: inline-block - - .icon - margin-right: 8px - margin-left: -32px - margin-bottom: -3px - -.action__title - font-size: $font-size-base - line-height: $line-height - margin-top: 0 - color: $text-color - margin-bottom: 0 - display: inline-block - -.action__text - display: block - margin-bottom: 0 - -.donate - .btc - @extend .mini - display: inline-block - width: 80px - white-space: nowrap - overflow: hidden - text-overflow: ellipsis - -.vex-bitcoin - @extend .textcenter - - .vex-content - max-width: 46em - - h4 - font-size: $font-size-h5 - margin-top: 0 - margin-bottom: ($spacer / 4) - color: $brand-grey - - .qr - margin-bottom: ($spacer / 2) - - pre - @extend .small - margin: 0 - position: relative - padding-right: 2.4rem - - code - padding: ($spacer / 2) - padding-right: 0 - font-size: .65rem - - .btn - position: absolute - right: 0 - top: 0 - bottom: 0 - border: 0 - box-shadow: none - border-top-left-radius: 0 - border-bottom-left-radius: 0 - background: alpha($brand-grey, 30%) - - svg - width: 1rem - height: 1rem - fill: $brand-grey - transition: .15s ease-out - - &:hover - background: alpha($brand-grey, 30%) - svg - fill: $brand-grey-dimmed - - &.success - background: darken($alert-success, 50%) - - svg - fill: $brand-dark diff --git a/_src/_assets/styl/_kremalicious/alerts.styl b/_src/_assets/styl/_kremalicious/alerts.styl deleted file mode 100644 index cbb26da4..00000000 --- a/_src/_assets/styl/_kremalicious/alerts.styl +++ /dev/null @@ -1,38 +0,0 @@ -// -// kremalicious3 -// -------------- -// Alerts -// - -$alert-info = #f7f1e4 -$alert-success = #dff0d8 -$alert-error = #f2dede - -.alert - padding: $spacer - margin-bottom: $spacer - border-radius: $border-radius-base - border: 1px solid transparent - box-shadow: 0 1px 3px rgba($brand-grey, .1), inset 0 1px 0 #fff - - > p, - > ul - margin-bottom: 0 - > p + p - margin-top: $spacer - -.alert-success - color: darken($alert-success, 60%) - background: $alert-success - border-color: darken($alert-success, 10%) - -.alert-danger, -.alert-error - color: darken($alert-error, 60%) - background: $alert-error - border-color: darken($alert-error, 10%) - -.alert-info - color: darken($alert-info, 60%) - background: $alert-info - border-color: darken($alert-info, 10%) diff --git a/_src/_assets/styl/_kremalicious/animations.styl b/_src/_assets/styl/_kremalicious/animations.styl deleted file mode 100644 index 00ed28cc..00000000 --- a/_src/_assets/styl/_kremalicious/animations.styl +++ /dev/null @@ -1,64 +0,0 @@ -// -// kremalicious3 -// -------------- -// Animations -// - -// Buttery Smooth(tm) -//////////////////////////////////// - -gpuacceleration() - -webkit-transform: translate3d(0,0,0) - -webkit-backface-visibility: hidden - -webkit-perspective: 1000 - -.gpuacceleration - gpuacceleration() - - -// Slide Up -//////////////////////////////////// - -@keyframes slideUp - 0% - transform: translate3d(0, 100px, 0) - opacity: 0 - - 100% - transform: translate3d(0, 0, 0) - opacity: 1 - -.animation-slideup - animation: slideUp .2s cubic-bezier(.06,.85,.54,1) - -// -// Bounce -// -// taken and adapted from -// http://daneden.github.io/animate.css/ -//////////////////////////////////// - -// Down -@keyframes slideDown - 0% - transform: translate3d(0, -100px, 0) - - 100% - transform: none - -.animation-slidedown - animation: slideDown .2s cubic-bezier(.06,.85,.54,1) - -// Up -@keyframes bounceOutUp - 20% - transform: translate3d(0, -10px, 0) - - 40%, 45% - transform: translate3d(0, 20px, 0) - - 100% - transform: translate3d(0, -100px, 0) - -.animation-bounceOutUp - animation: bounceOutUp .5s both diff --git a/_src/_assets/styl/_kremalicious/buttons.styl b/_src/_assets/styl/_kremalicious/buttons.styl deleted file mode 100644 index f7095c89..00000000 --- a/_src/_assets/styl/_kremalicious/buttons.styl +++ /dev/null @@ -1,201 +0,0 @@ -// -// kremalicious3 -// -------------- -// Buttons -// - -// Reset default button element -button - padding: 0 - cursor: pointer - background: transparent - border: 0 - -webkit-appearance: none - - &:active - background: $link-color - transition: none - text-shadow: none - -.btn, -a.btn - @extend .textcenter - display: inline-block - margin-bottom: 0 - font-weight: normal - vertical-align: middle - touch-action: manipulation - cursor: pointer - background-image: none // Reset unusual Firefox-on-Android default style - white-space: nowrap - user-select: none - transition: all .2s ease-in-out - - // Default Button - button-size($padding-base-vertical, $padding-base-horizontal, $font-size-small, $line-height, $border-radius-base) - background-color: rgba(255,255,255,.1) - border: 1px solid rgba(94,131,162,.3) - border-bottom-color: rgba(94,131,162,.4) - font-family: $headings-font-family - font-weight: $headings-font-weight - color: $brand-grey - text-transform: uppercase - box-shadow: 0 1px 3px alpha($brand-grey-light, .1), inset 0 1px 0 rgba(255,255,255,.7) - - @media $screen-sm - max-width: 20rem - - &:hover, - &:focus - outline: 0 - background-color: rgba(255,255,255,.5) - - &:active - color: $brand-grey - border-color: rgba(94,131,162,.3) - background-color: transparent - box-shadow: 0 1px 0 #fff - transition: none - outline: 0 - - &:focus - outline: 0 - border-color: $input-border-focus - - // Disabled State - &.disabled, - &[disabled], - fieldset[disabled] & - cursor: not-allowed - pointer-events: none // Future-proof disabling of clicks - opacity: .6 - box-shadow: none - - // grid buttons - &.col2, - &.col3 - margin-bottom: ($spacer/2) - - @media $screen-sm - margin-bottom: 0 - span - font-size: .9em - color: rgba(19, 56, 50, .6) - margin-left: .3em - -// Primary Button -.btn-primary, -a.btn-primary - color: darken($link-color, 50%) - text-shadow: 0 1px 0 rgba(255,255,255,.3) - background: lighten($link-color, 15%) - border-color: $link-color - box-shadow: 0 1px 3px alpha($brand-grey-light, .4), inset 0 1px 0 rgba(255,255,255,.4) - - &:hover, - &:focus - color: darken($link-color, 50%) - background-color: lighten($link-color, 25%) - text-shadow: 0 1px 0 rgba(255,255,255,.3) - - &:active - color: darken($link-color, 50%) - border-color: darken($link-color, 10%) - background-color: lighten($link-color, 15%) - -.more-link - font-family: $headings-font-family - font-weight: $headings-font-weight - font-size: $font-size-small - color: $link-color - text-transform: uppercase - - // icon - .icon - top: .15em - position: relative - width: 18px - height: 18px - -.btn-block - display: block - - -// Close button -///////////////////////////////////// - -.close - @extend .textcenter, .transition - display: block - color: lighten($brand-grey-light, 50%) - line-height: 1 - font-size: $font-size-large - padding: 3px - cursor: pointer - - button.& - cursor: pointer - background: transparent - border: 0 - -webkit-appearance: none - - &:hover, - &:focus - color: lighten($brand-grey-light, 20%) - cursor: pointer - outline: 0 - - &:active - background: none - color: $brand-grey-light - transition: none - - -// some helper classes for old content -///////////////////////////////////// - -.content-download - @extend .grid, .grid--gutters - text-align: center - display: block - margin-top: 0 - - @media $screen-xs - display: flex - margin-top: -($gutter-space) - - a - @extend .btn, .grid__col - margin: $gutter-space 0 0 $gutter-space - - &:only-child - margin-left: auto - margin-right: auto - - span - font-size: $font-size-mini - color: $text-color-light - - .icon-download, - .icon-heart, - .icon-wordpress, - .icon-github, - .icon-eye - &:before - content: "" - width: 18px - height: 18px - display: inline-block - margin-right: 5px - margin-bottom: -3px - opacity: .35 - background: url('/assets/img/arrow-with-circle-down.svg') no-repeat left center - - .icon-heart:before - background-image: url('/assets/img/heart.svg') - - .icon-github:before - background-image: url('/assets/img/github.svg') - - .icon-eye:before - background-image: url('/assets/img/eye.svg') diff --git a/_src/_assets/styl/_kremalicious/content-featured.styl b/_src/_assets/styl/_kremalicious/content-featured.styl deleted file mode 100644 index a480b8cb..00000000 --- a/_src/_assets/styl/_kremalicious/content-featured.styl +++ /dev/null @@ -1,62 +0,0 @@ -// -// kremalicious3 -// -------------- -// Content - Featured Posts -// - -.featured - @extend .breakoutviewport - padding-bottom: $spacer - - .grid - margin-bottom: 0 - - @media $screen-sm - padding-bottom: ($spacer*3) - - .hentry__teaser - max-width: 100%; - - @media $screen-xs - margin-left: 0 - margin-right: 0 - -.featured-link - @extend .link--nounderline - display: block - position: relative - - &:hover, - &:focus - img - border-color: $link-color - -.featured-title - @extend .transition - transition-property: transform, opacity - margin: 0 - position: absolute - top: 25% - min-width: 45% - text-align: right - font-family: $headings-font-family - font-weight: $headings-font-weight - font-style: normal - font-size: $font-size-small - padding: ($spacer/3) - background: $link-color - background: alpha($link-color, .85) - color: #fff - text-shadow: 0 1px 0 #000 - left: 0 - - opacity: 0 - transform: translate3d(0, -20px, 0) - - .featured-link:hover & - opacity: 1 - transform: translate3d(0, 0, 0) - -img.featured-image - display: block - margin-bottom: 0 diff --git a/_src/_assets/styl/_kremalicious/content-link.styl b/_src/_assets/styl/_kremalicious/content-link.styl deleted file mode 100644 index 8882b0d6..00000000 --- a/_src/_assets/styl/_kremalicious/content-link.styl +++ /dev/null @@ -1,24 +0,0 @@ -// -// kremalicious3 -// -------------- -// Content - Link Post -// - -.linkurl - @extend .text-dimmed, .ellipsis, .aligncenter - font-family: $font-family-base - font-size: $font-size-mini - padding: ($spacer/3) 0 - max-width: 70% - - @media $screen-sm - max-width: 50% - -.permalink-link - @extend .alignright - .icon - fill: $link-color - width: 18px - - &:hover .icon - fill: $link-color-hover diff --git a/_src/_assets/styl/_kremalicious/content-photo.styl b/_src/_assets/styl/_kremalicious/content-photo.styl deleted file mode 100644 index 25f3cc62..00000000 --- a/_src/_assets/styl/_kremalicious/content-photo.styl +++ /dev/null @@ -1,103 +0,0 @@ -// -// kremalicious3 -// -------------- -// Content - Photo Post -// - -.hentry.format-photo - @extend .textcenter - - .entry-title - margin-bottom: 0 - - figure - position: relative - display: inline-block - - img, - figcaption - margin-bottom: 0 - - figcaption - @extend .transition, .h4 - transition-property: transform, opacity - position: absolute - min-width: 45% - text-align: right - padding: ($spacer/3) - background: $link-color - background: alpha($link-color, .7) - color: #fff - text-shadow: 0 1px 0 #000 - - left: 0 - top: $spacer * 4 - opacity: 0 - transform: translate3d(0, -20px, 0) - - &:hover figcaption - opacity: 1 - transform: translate3d(0, 0, 0) - - .entry-content - text-align: left - margin-top: $spacer - - .page-single & - padding-top: 0 - padding-bottom: ($spacer*3) - - @media $screen-sm - padding-top: 0 - padding-bottom: ($spacer*6) - - figure img - max-height: none - - -.photo-link - display: block; - - img - @extend .media-frame - - &, - &:hover, - &:focus, - &:active - box-shadow: none - - &:hover, - &:focus - img - border-color: $link-color-hover - border-radius: $border-radius-base - - &:active - background: none - -// -// EXIF metadata display -// -.exif - @extend .small, .text-dimmed - text-align: left - position: absolute - bottom: -($spacer * 1.25) - left: $spacer - right: $spacer - - .container - display: flex - flex-wrap: wrap - justify-content: space-between - -// -// Photo background change adjustment -// -.ab-dark - .entry-content - @extend .text-dimmed - - .byline, time, .comments - color: $text-color-light diff --git a/_src/_assets/styl/_kremalicious/content-related.styl b/_src/_assets/styl/_kremalicious/content-related.styl deleted file mode 100644 index a4537473..00000000 --- a/_src/_assets/styl/_kremalicious/content-related.styl +++ /dev/null @@ -1,48 +0,0 @@ -// -// kremalicious3 -// -------------- -// Content - Related Posts -// - -.related-posts - .grid - margin-top: 0 - -.related-posts-title - @extend .heading-band, .h3 - margin-bottom: $spacer - -.related-post - img - @extend .media-frame - - .post-title - @extend .h5, .transition, .text-dimmed - margin-top: ($spacer / 3) - margin-bottom: 0 - padding: 0 2px - - .post-title-link - @extend .transition, .link--nounderline - display: block - - &:hover, - &:focus - .post-title - color: $link-color - img - border-color: $link-color-hover - - &:active - .post-title - color: #fff - transition: none - - -// -// Related Photos -// -.related-photos - @extend .divider-top - margin-top: $spacer * 2 - padding-top: $spacer * 3 diff --git a/_src/_assets/styl/_kremalicious/content.styl b/_src/_assets/styl/_kremalicious/content.styl deleted file mode 100644 index e1f2fe86..00000000 --- a/_src/_assets/styl/_kremalicious/content.styl +++ /dev/null @@ -1,204 +0,0 @@ -// -// kremalicious3 -// -------------- -// Generic Content -// - - -// Page Title -///////////////////////////////////// - -.page-title - @extend .h2, .heading-band - color: $brand-grey-light - margin-top: -($spacer*2) - margin-bottom: $spacer - - .hash - @extend .h3 - color: darken($page-bg, 15%) - margin-right: 2px - -.hentry - @extend .divider-bottom - padding-top: ($spacer*2) - padding-bottom: ($spacer*2) - width: 100% - - &:first-child - padding-top: 0 - - @media $screen-sm - padding-top: ($spacer*3) - padding-bottom: ($spacer*3) - - .page-single & - border: none - - &:before - @extend .hide - - -// Post Header -///////////////////////////////////// - -.entry-header - .page-single & - @media $screen-md - breakoutviewport() - - -// Post Title -///////////////////////////////////// - -.entry-title - @extend .h1, .textcenter - color: $headings-color - margin-top: 0 - margin-bottom: $spacer - - a - @extend .link--nounderline - - .format-link & - @extend .h3 - - -// Post Lead -///////////////////////////////////// - -.entry-lead - @extend .large, .textcenter - color: $brand-grey - line-height: $line-height-large - - -// Post/photo teaser -///////////////////////////////////// - -.hentry__teaser - @extend .breakoutviewport - max-width: none - display: block - margin-top: ($spacer*1.5) - margin-bottom: ($spacer*1.5) - - img - @extend .media-frame - border-radius: 0 - - @media $screen-sm - border-radius: $border-radius-base - -.hentry__teaser--link - &:hover, - &:focus - img - border-color: $link-color - -// Post Content -///////////////////////////////////// - -.entry-content - h1, - h2 - @extend .heading-band - - h1 - @extend .h2 - h2 - @extend .h3 - h3 - @extend .h4 - - p:last-child - margin-bottom: 0 - - -// Post meta -///////////////////////////////////// - -.entry-meta - @extend .small - margin-top: ($spacer*2) - - a - @extend .link--nounderline - -.byline, -.time, -.tags, -.categories - @extend .textcenter - -.byline, -.time - @extend .text-dimmed, .italic - -.byline - margin-bottom: 0 - - .by - display: block - -.time - margin-bottom: ($spacer*2) - - -// Categories & Tags -///////////////////////////////////// - -.categories - margin-bottom: ($spacer/2) - -.category - @extend .h6, .textcenter, .mini, .link--nounderline - color: $text-color - line-height: 1 - text-transform: uppercase - border: 1px solid $text-color - border-radius: $border-radius-base - padding: 4px 8px - margin: 0 - display: inline-block - - &:hover, - &:focus - color: $link-color - border-color: $link-color - - &:active - background: $link-color - top: 0 - color: #fff - -.tag - @extend .link--nounderline - color: $text-color - margin-right: 5px - - &:before - @extend .text-dimmed - content: '#' - margin-right: 1px - -.avatar - width: 80px - height: 80px - border-radius: 80px - border: 2px solid #fff - - -// Goodies download -///////////////////////////////////// - -.goodie-actions - @extend .aligncenter - max-width: 640px - - p, - .btn - margin-bottom: 0 - - .btn - display: block diff --git a/_src/_assets/styl/_kremalicious/footer.styl b/_src/_assets/styl/_kremalicious/footer.styl deleted file mode 100644 index a0dbe22f..00000000 --- a/_src/_assets/styl/_kremalicious/footer.styl +++ /dev/null @@ -1,97 +0,0 @@ -// -// kremalicious3 -// -------------- -// Footer -// - -.site__footer - @extend .textcenter - padding-top: ($spacer*2) - - .avatar - margin-bottom: ($spacer / 2) - - &, - .footer-description - color: $text-color-light - line-height: $spacer - - a - @extend .link--nounderline - -.footer-description - @extend .h5 - margin-top: 0 - margin-bottom: ($spacer / 4) - - a - display: block - -.footer-copyright - @extend .divider-top - padding-top: $spacer - padding-bottom: $spacer - - p - margin-bottom: 0 - font-size: $font-size-mini - - .icon - width: 15px - height: 15px - margin-right: .2em - margin-bottom: -2px - -// Subscribe component -.subscribe - margin: $spacer auto - p - @extend .textcenter - margin: 0 - -.link - @extend .textcenter, .link--nounderline - width: 2rem - padding: $padding-small-vertical - margin: 0 - display: inline-block - color: $text-color-light - - &:first-child - margin-left: 0 - - &:last-child - margin-right: 0 - - .icon - transition: color .3s ease-in-out - display: block - margin: 0 auto - -.rss:hover .icon - fill: #e15a00 -.json:hover .icon - fill: #8BE028 -.twitter:hover .icon - fill: #019ad2 -.google:hover .icon - fill: #c63b1e -.facebook:hover .icon - fill: #3b5998 -.github:hover .icon - fill: #333 - -.subscribe-title - @extend .h5, .text-dimmed - margin-bottom: ($spacer/2) - -.footer__btc - margin-left: ($spacer / 2) - .icon - width: 10px - margin-right: 0 - code - font-size: .55rem - background: none - color: $link-color - padding: 0 diff --git a/_src/_assets/styl/_kremalicious/forms.styl b/_src/_assets/styl/_kremalicious/forms.styl deleted file mode 100644 index 277bc1b7..00000000 --- a/_src/_assets/styl/_kremalicious/forms.styl +++ /dev/null @@ -1,189 +0,0 @@ -// -// kremalicious3 -// -------------- -// Forms -// - - -// Normalize non-controls -///////////////////////////////////// - -fieldset - padding: 0 - margin: 0 - border: 0 - min-width: 0 - -legend - display: block - width: 100% - padding: 0 - margin-bottom: $spacer - font-size: ($font-size-base * 1.5) - line-height: inherit - border: 0 - -label - @extend .bold - display: inline-block - margin-bottom: 5px - cursor: pointer - - -// Normalize form controls -///////////////////////////////////// - -// Override content-box in Normalize (* isn't specific enough) -input[type="search"] - box-sizing: border-box - -// Position radios and checkboxes better -input[type="radio"], -input[type="checkbox"] - margin: 4px 0 0 - margin-top: 1px \9 // IE8-9 - line-height: normal - -// Set the height of file controls to match text inputs -input[type="file"] - display: block - -// Make range inputs behave like textual form controls -input[type="range"] - display: block - width: 100% - -// Make multiple select elements height not fixed -select[multiple], -select[size] - height: auto - - -// Common form controls -///////////////////////////////////// - -.form-control - display: block - width: 100% - padding: $padding-base-vertical $padding-base-horizontal - font-size: $input-font-size - font-weight: $input-font-weight - line-height: $line-height - color: $input-color - background-color: $input-bg - background-image: none // Reset unusual Firefox-on-Android default style - border: 0 - border-radius: $input-border-radius - box-shadow: none - transition: all ease-in-out .15s - -webkit-appearance: none // screw you, iOS default inset box-shadow - - // Placeholder - placeholder($input-color-placeholder) - - &:hover - lighten($input-bg, 30%) - - &:focus - background-color: $input-bg-focus - border-color: $input-border-focus - outline: 0 - placeholder(lighten($input-color-placeholder, 25%)) - - // Disabled and read-only inputs - // - // HTML5 says that controls under a fieldset > legend:first-child won't be - // disabled if the fieldset is disabled. Due to implementation difficulty, we - // don't honor that edge case; we style them as disabled anyway. - &[disabled], - &[readonly], - fieldset[disabled] & - cursor: not-allowed - background-color: $input-bg-disabled - opacity: 1 // iOS fix for unreadable disabled content - - -// Form groups -///////////////////////////////////// - -.form-group - margin-bottom: $spacer - - -// Search inputs -///////////////////////////////////// - -input[type="search"] - -webkit-appearance: none // This overrides the extra rounded corners on search inputs in iOS - - -// Checkboxes and radios -///////////////////////////////////// - -.radio, -.checkbox - display: block - min-height: $spacer // clear the floating input if there is no label text - margin-top: 10px - margin-bottom: 10px - - label - padding-left: 20px - margin-bottom: 0 - font-weight: normal - cursor: pointer - -.radio input[type="radio"], -.radio-inline input[type="radio"], -.checkbox input[type="checkbox"], -.checkbox-inline input[type="checkbox"] - float: left - margin-left: -20px - -.radio + .radio, -.checkbox + .checkbox - margin-top: -5px // Move up sibling radios or checkboxes for tighter spacing - -// Radios and checkboxes on same line -.radio-inline, -.checkbox-inline - display: inline-block - padding-left: 20px - margin-bottom: 0 - vertical-align: middle - font-weight: normal - cursor: pointer - -.radio-inline + .radio-inline, -.checkbox-inline + .checkbox-inline - margin-top: 0 - margin-left: 10px // space out consecutive inline controls - -// Disabled Behavior -input[type="radio"], -input[type="checkbox"], -.radio, -.radio-inline, -.checkbox, -.checkbox-inline - &[disabled], - fieldset[disabled] & - cursor: not-allowed - - -// Form control sizing -///////////////////////////////////// - -input-small() - input-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small) - placeholder(font-size $font-size-small, line-height $line-height-small) - -input-large() - input-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large) - placeholder(font-size $font-size-large, line-height $line-height-large) - -.input-small - input-small() - -.input-large - input-large() diff --git a/_src/_assets/styl/_kremalicious/grid.styl b/_src/_assets/styl/_kremalicious/grid.styl deleted file mode 100644 index 6fe40f25..00000000 --- a/_src/_assets/styl/_kremalicious/grid.styl +++ /dev/null @@ -1,217 +0,0 @@ -// -// kremalicious3 -// -------------- -// Grid -// - - -*, -*:before, -*:after - box-sizing: border-box - - -// -// Base -// -.grid - display: flex - flex-wrap: wrap - list-style: none - margin: 0 - padding: 0 - -.grid__col - flex: 1 - // Firefox grid fix for whatever reason - min-height: 0 - min-width: 0 - - -// -// Alignment per row -// -.grid--top - align-items: flex-start - -.grid--bottom - align-items: flex-end - -.grid--center - align-items: center - -.grid--justifycenter - justify-content: center - - -// -// Alignment per cell -// -.grid__col--top - align-self: flex-start - -.grid__col--bottom - align-self: flex-end - -.grid__col--center - align-self: center - - -// -// Gutters -// -.grid--gutters - margin: -($gutter-space) 0 $gutter-space (-($gutter-space)) - - > .grid__col - padding: $gutter-space 0 0 $gutter-space - -@media $screen-xs - .grid-small--gutters - margin: -($gutter-space) 0 $gutter-space (-($gutter-space)) - - > .grid__col - padding: $gutter-space 0 0 $gutter-space - -@media $screen-sm - .grid-medium--gutters - margin: -($gutter-space) 0 $gutter-space (-($gutter-space)) - - > .grid__col - padding: $gutter-space 0 0 $gutter-space - -@media $screen-lg - .grid-large--gutters - margin: -($gutter-space) 0 $gutter-space (-($gutter-space)) - - > .grid__col - padding: $gutter-space 0 0 $gutter-space - - -// -// Columns -// -.grid--fit - > .grid__col - flex: 1 - -.grid--full - > .grid__col - flex: 0 0 100% - -.grid--1of6 - > .grid__col - flex: 0 0 16.5% - -.grid--2of6, -.grid--third - > .grid__col - flex: 0 0 33.3333% - -.grid--3of6, -.grid--half - > .grid__col - flex: 0 0 50% - -.grid--4of6 - > .grid__col - flex: 0 0 66% - -.grid--5of6 - > .grid__col - flex: 0 0 82.5% - - -@media $screen-xs - .grid-small--fit - > .grid__col - flex: 1 - - .grid-small--full - > .grid__col - flex: 0 0 100% - - .grid-small--1of6 - > .grid__col - flex: 0 0 16.5% - - .grid-small--2of6, - .grid-small--third - > .grid__col - flex: 0 0 33.3333% - - .grid-small--3of6, - .grid-small--half - > .grid__col - flex: 0 0 50% - - .grid-small--4of6 - > .grid__col - flex: 0 0 66% - - .grid-small--5of6 - > .grid__col - flex: 0 0 82.5% - - -@media $screen-sm - .grid-medium--fit - > .grid__col - flex: 1 - - .grid-medium--full - > .grid__col - flex: 0 0 100% - - .grid-medium--1of6 - > .grid__col - flex: 0 0 16.5% - - .grid-medium--2of6, - .grid-medium--third - > .grid__col - flex: 0 0 33.3333% - - .grid-medium--3of6, - .grid-medium--half - > .grid__col - flex: 0 0 50% - - .grid-medium--4of6 - > .grid__col - flex: 0 0 66% - - .grid-medium--5of6 - > .grid__col - flex: 0 0 82.5% - -@media $screen-lg - .grid-large--fit - > .grid__col - flex: 1 - - .grid-large--full - > .grid__col - flex: 0 0 100% - - .grid-large--1of6 - > .grid__col - flex: 0 0 16.5% - - .grid-large--2of6, - .grid-large--third - > .grid__col - flex: 0 0 33.3333% - - .grid-large--3of6, - .grid-large--half - > .grid__col - flex: 0 0 50% - - .grid-large--4of6 - > .grid__col - flex: 0 0 66% - - .grid-large--5of6 - > .grid__col - flex: 0 0 82.5% diff --git a/_src/_assets/styl/_kremalicious/hamburger.styl b/_src/_assets/styl/_kremalicious/hamburger.styl deleted file mode 100644 index 7335d746..00000000 --- a/_src/_assets/styl/_kremalicious/hamburger.styl +++ /dev/null @@ -1,47 +0,0 @@ -.hamburger - @extend .transition - width: 18px - height: 18px - position: relative - transform: rotate(0deg) - cursor: pointer - margin-top: 6px - - span - @extend .transition - display: block - position: absolute - height: 3px - width: 100% - background: $text-color-light - border-radius: 20px - opacity: 1 - left: 0 - transform: rotate(0deg) - - &:nth-child(1) - top: 0px - transform-origin: left center - - &:nth-child(2) - top: 5px - transform-origin: left center - - &:nth-child(3) - top: 10px - transform-origin: left center - - - // open state - .has-menu-open & - &:nth-child(1) - transform: rotate(45deg) - top: -1px - - &:nth-child(2) - width: 0% - opacity: 0 - - &:nth-child(3) - transform: rotate(-45deg) - top: 12px diff --git a/_src/_assets/styl/_kremalicious/header.styl b/_src/_assets/styl/_kremalicious/header.styl deleted file mode 100644 index f1030f36..00000000 --- a/_src/_assets/styl/_kremalicious/header.styl +++ /dev/null @@ -1,73 +0,0 @@ -// -// kremalicious3 -// -------------- -// Header -// - -.site__header - margin-top: ($spacer/2) - margin-bottom: ($spacer/2) - - @media $screen-sm - margin-top: $spacer - margin-bottom: $spacer - - .grid - @extend .breakoutviewport - padding-left: $spacer - padding-right: $spacer - position: relative - - @media $screen-md - padding-left: 0 - padding-right: 0 - - > .banner, - > .nav-main - padding-top: 0 - - - -// Logo -///////////////////////////////////// - -.logo - display: block - background-image: url('../img/logo.png') - background-repeat: no-repeat - background-position: left top - width: 47px - height: 31px - - @media $screen-sm - width: 183px - - @media $highDPI - background-image: url('../img/logo@2x.png') - background-size: 183px 62px - - @media $highDPI_3x - background-image: url('../img/logo@3x.png') - background-size: 183px 62px - -.header__title - margin: 0 - // display toned down logo - // by default - @extend .logo - -.header__logo - @extend .ir, .link--nounderline - // repeat logo - // but display hover version - @extend .logo - background-position: left bottom - - // hide by default - opacity: 0 - // show smooooothly on hover - &:hover - opacity: 1 - - &:active - top: 0 diff --git a/_src/_assets/styl/_kremalicious/icons.styl b/_src/_assets/styl/_kremalicious/icons.styl deleted file mode 100644 index 13a75ea3..00000000 --- a/_src/_assets/styl/_kremalicious/icons.styl +++ /dev/null @@ -1,23 +0,0 @@ -// -// kremalicious3 -// -------------- -// Icons -// - -svg - &.icon - @extend .transition - height: 20px - width: 20px - display: inline-block - fill: $text-color-light - vertical-align: baseline - - .btn & - height: 18px - width: 18px - margin: 4px 4px -3px 4px - - // Fix jQuery bug: http://bugs.jquery.com/ticket/11352 - use - pointer-events: none diff --git a/_src/_assets/styl/_kremalicious/layout.styl b/_src/_assets/styl/_kremalicious/layout.styl deleted file mode 100644 index f5bc31e3..00000000 --- a/_src/_assets/styl/_kremalicious/layout.styl +++ /dev/null @@ -1,92 +0,0 @@ -// -// kremalicious3 -// -------------- -// Layout -// - -.site__content, -.header__content -.footer__content - padding: 0 $spacer - width: 100% - - @media $screen-md - padding: 0 ($spacer * 2) - -.container - max-width: 35rem - margin-left: auto - margin-right: auto - -.site__document - padding-top: ($spacer*2) - - @media $screen-md - padding-top: ($spacer*3) - - -// topbar and footer as fixed -// site background -///////////////////////////////////// - -.site__document - background-color: $page-bg - border-top: 1px solid rgba(255,255,255,.7) - border-bottom: 1px solid rgba(255,255,255,.7) - box-shadow: 0 1px 4px alpha($brand-dark, .1), 0 -1px 4px alpha($brand-dark, .2) - - transform: translate3d(0,-($spacer*7.7),0) - - @media $screen-xs - transform: translate3d(0,-($spacer*7.2),0) - - @media $screen-sm - transform: translate3d(0,-($spacer*6),0) - - @media $screen-md - transform: translate3d(0,-($spacer*5),0) - - .has-menu-open & - transform: translate3d(0,0,0) - -.site__footer - margin-top: -($spacer*6.5) - - @media $screen-md - margin-top: 0 - - .has-menu-open & - margin-top: 0 - -@media $screen-md and (min-height: 650px) - .site - position: relative - - .site__document - @extend .transition - position: relative - z-index: 2 - margin-bottom: 32rem - transform: translate3d(0,($spacer*3),0) - - .has-menu-open & - transform: translate3d(0,($spacer*8),0) - - .site__header, - .site__footer - position: fixed - border: none - width: 100% - - .site__header - z-index: 1 - top: 0 - border: none - - .site__footer - z-index: 0 - bottom: 0 - box-shadow: none - - .has-menu-open & - hide() diff --git a/_src/_assets/styl/_kremalicious/media.styl b/_src/_assets/styl/_kremalicious/media.styl deleted file mode 100644 index e9f6e843..00000000 --- a/_src/_assets/styl/_kremalicious/media.styl +++ /dev/null @@ -1,53 +0,0 @@ -// -// kremalicious3 -// -------------- -// Media -// - - -// Responsive Media -///////////////////////////////////// - -figure, img, svg, video, audio, embed, canvas, picture - max-width: 100% - height: auto - margin: 0 auto - display: block - border-radius: $border-radius-base - -// Images -///////////////////////////////////// - -img - vertical-align: middle - - -// Media Positioning -///////////////////////////////////// - -img.alignleft, -img.alignright, -img.aligncenter - float: none - display: block - margin: $spacer auto - -@media $screen-sm - img.alignleft - margin: 0 $spacer $spacer 0 - img.alignright - margin: 0 0 $spacer $spacer - - -// Image frame style -///////////////////////////////////// - -.media-frame - @extend .transition - border-top: 2px solid transparent - border-bottom: 2px solid transparent - border-radius: $border-radius-base - box-shadow: 0 1px 3px alpha($brand-grey,.2) - - @media $screen-sm - border: 2px solid transparent diff --git a/_src/_assets/styl/_kremalicious/mixins.styl b/_src/_assets/styl/_kremalicious/mixins.styl deleted file mode 100644 index d0f3f7c9..00000000 --- a/_src/_assets/styl/_kremalicious/mixins.styl +++ /dev/null @@ -1,265 +0,0 @@ -// -// kremalicious3 -// -------------- -// Mixins -// - - -// Micro Clearfix -///////////////////////////////////// - -clearfix() - &:before, - &:after - content: " " - display: table - &:after - clear: both - -.clearfix - clearfix() - - -// Floats -///////////////////////////////////// - -alignright() - float: right - -alignleft() - float: left - -.alignright - alignright() - -.alignleft - alignleft() - - -// Centering Blocks -///////////////////////////////////// - -aligncenter() - display: block - margin-left: auto - margin-right: auto - -.aligncenter - aligncenter() - - -// Centering Text -///////////////////////////////////// - -textcenter() - text-align: center - -.textcenter - textcenter() - - -// Toggling content -///////////////////////////////////// - -// Hide from both screenreaders and browsers: h5bp.com/u -hide() - display: none !important - visibility: hidden - -show() - display: block - visibility: visible - -.hide - hide() - -.show - show() - -// Hide only visually, but have it available for screenreaders: h5bp.com/v -visuallyhidden() - border: 0 - clip: rect(0 0 0 0) - height: 1px - margin: -1px - overflow: hidden - padding: 0 - position: absolute - width: 1px - - // Extends the .visuallyhidden class to allow the - // element to be focusable when navigated to via the keyboard: h5bp.com/p - &.focusable:active, - &.focusable:focus - clip: auto - height: auto - margin: 0 - overflow: visible - position: static - width: auto - -.visuallyhidden - visuallyhidden() - -// Hide visually and from screenreaders, but maintain layout -.invisible - visibility: hidden - - -// CSS image replacement -///////////////////////////////////// - -.ir, -.hide-text - font: 0/0 a - color: transparent - text-shadow: none - background-color: transparent - border: 0 - - -// Text overflow -///////////////////////////////////// - -ellipsis() - text-overflow: ellipsis - overflow: hidden - white-space: nowrap - -.ellipsis - ellipsis() - - -// Default transition -///////////////////////////////////// - -transition() - transition: all ease-in-out .15s - -.transition - transition() - -// Dashed Dividers -///////////////////////////////////// - -.divider-top, -.divider-bottom - position: relative - - &:before - content: "" - position: absolute - left: 0 - height: 1px - -.divider-top - border-top: 1px dashed #afc3cb - padding-top: 1em - - &:after - content: "" - position: absolute - left: 0 - height: 1px - top: 0 - width: 100% - border-top: 1px dashed #fff - -.divider-bottom - border-bottom: 1px dashed #afc3cb - padding-bottom: 1em - - &:before - bottom: -2px - width: 100% - border-bottom: 1px dashed #fff - -// Heading band -///////////////////////////////////// - -.heading-band - display: inline-block - clear: both - background: rgba(255,255,255,.5) - padding: ($spacer/2) $spacer ($spacer/2) 100% - margin-left: -100% - - -// Lead paragraph -///////////////////////////////////// - -.lead - font-size: $font-size-large - line-height: ($spacer*1.15) - - -// Layout breakout -///////////////////////////////////// - -breakoutviewport() - margin-left: calc(-50vw + 50%) - margin-right: calc(-50vw + 50%) - - @media $screen-md - breakoutviewport--base() - -breakoutviewport--base() - margin-left: -($gutter-space * 4) - margin-right: -($gutter-space * 4) - -breakoutviewport--full() - margin-left: calc(-50vw + 50%) - margin-right: calc(-50vw + 50%) - -.breakoutviewport - breakoutviewport() - -.breakoutviewport--base - breakoutviewport--base() - -.breakoutviewport--full - breakoutviewport--full() - -// Button sizing -///////////////////////////////////// - -button-size(padding-vertical, padding-horizontal, font-size, line-height, border-radius) - padding: padding-vertical padding-horizontal - font-size: font-size - line-height: line-height - border-radius: border-radius - - -// Form control sizing -///////////////////////////////////// - -input-size(padding-vertical, padding-horizontal, font-size, line-height, border-radius) - padding: padding-vertical padding-horizontal - font-size: font-size - line-height: line-height - border-radius: border-radius - - input[type="search"]& - background-size: font-size - background-position: padding-vertical center - padding-left: (padding-vertical*4) - - select& - line-height: input-height - - textarea&, - select[multiple]& - height: auto - - -// Placeholder text -///////////////////////////////////// - -placeholder($color = $input-color-placeholder) - &::-moz-placeholder // Firefox - color $color - opacity 1 // Override Firefox's unusual default opacity; See https//github.com/twbs/bootstrap/pull/11526 - &:-ms-input-placeholder // Internet Explorer 10+ - color $color - &::-webkit-input-placeholder // Safari and Chrome - color $color diff --git a/_src/_assets/styl/_kremalicious/navigation.styl b/_src/_assets/styl/_kremalicious/navigation.styl deleted file mode 100644 index 0b59b025..00000000 --- a/_src/_assets/styl/_kremalicious/navigation.styl +++ /dev/null @@ -1,105 +0,0 @@ -// -// kremalicious3 -// -------------- -// Navigation -// - -.menu-btn, -.search-btn - @extend .textcenter - line-height: 1em - vertical-align: middle - display: inline-block - margin: 0 - position: absolute - right: $spacer - top: -($spacer/4) - - @media $screen-md - right: 0 - - &:focus - outline: 0 - - &:hover, - &:focus - .icon - fill: $link-color - .hamburger span - background: $link-color - - &:active - background: transparent - transition: none - - .icon - fill: darken($link-color, 30%) - .hamburger span - background: darken($link-color, 30%) - -.menu-btn - margin-right: -.5em - padding: .5em .7em - - -// Main Navigation -///////////////////////////////////// - -.nav-popover - @extend .divider-top, .list-unstyled - padding: $spacer 0 - margin-top: $spacer - margin-bottom: 0 - display: flex // .nav-popver overwrite - margin-left: 0 // .grid overwrite - - .grid__col - padding-top: 0 - - opacity: 0 - - .has-menu-open & - opacity: 1 - -.nav-link - @extend .link--nounderline, .category - font-size: $font-size-small - text-shadow: 0 1px 0 rgba(#fff, .5) - padding: $padding-base-horizontal - margin-bottom: 0 - margin-top: 0 - display: block - border: none - - -// Paginator -///////////////////////////////////// - -.paginator - @extend .textcenter - padding-top: ($spacer*2) - padding-bottom: ($spacer*2) - - .icon - margin-bottom: -5px - -.paginator__link - @extend .link--nounderline - width: 2rem - height: 2rem - line-height: 1.7 - display: inline-block - border-radius: 50% - - &:hover, - &:focus - background: rgba(255,255,255,.3) - - &.active - @extend .text-dimmed - cursor: default - pointer-events: none - background: rgba(255,255,255,.3) - -.paginator-title - @extend .page-title diff --git a/_src/_assets/styl/_kremalicious/print.styl b/_src/_assets/styl/_kremalicious/print.styl deleted file mode 100644 index 9b9a2809..00000000 --- a/_src/_assets/styl/_kremalicious/print.styl +++ /dev/null @@ -1,80 +0,0 @@ -// -// kremalicious3 -// -------------- -// Print -// - - -@media print - - * - background: transparent - color: black !important - box-shadow:none !important - text-shadow: none !important - - .entry-content a[href]:after - content: " (" attr(href) ")" - text-transform: none - font-size: $font-size-small - - // hide stuff in article view - .related-posts, - .footer .grid:first-child, - .hentry:before, - .topbar - hide() - - .hentry - border: none - - .footer - color: #ccc !important - - .footer-copyright - border-top: 1px solid #000 !important - - &:after - hide() - - abbr[title]:after - content: " (" attr(title) ")" - - // Don't show links for images, or javascript/internal links - .ir a:after, - a[href^="javascript:"]:after, - a[href^="#"]:after - content: "" - - pre, - blockquote - page-break-inside: avoid - - thead - display: table-header-group - - tr, - img - page-break-inside: avoid - - img - max-width: 100% !important - - @page - margin: 5.5cm - - p, - h2, - h3 - orphans: 3 - widows: 3 - - .hentry - h1 - page-break-before: always - &:first-child h1 - page-break-before: avoid - - h2, - h3 - page-break-after: avoid diff --git a/_src/_assets/styl/_kremalicious/scaffolding.styl b/_src/_assets/styl/_kremalicious/scaffolding.styl deleted file mode 100644 index c0ebd647..00000000 --- a/_src/_assets/styl/_kremalicious/scaffolding.styl +++ /dev/null @@ -1,23 +0,0 @@ -// -// kremalicious3 -// -------------- -// Scaffolding -// - - -// Body -///////////////////////////////////// -body - background: $body-bg - - -// Reset fonts for relevant elements -///////////////////////////////////// - -input, -button, -select, -textarea - font-family: inherit - font-size: inherit - line-height: inherit diff --git a/_src/_assets/styl/_kremalicious/search.styl b/_src/_assets/styl/_kremalicious/search.styl deleted file mode 100644 index 93b67152..00000000 --- a/_src/_assets/styl/_kremalicious/search.styl +++ /dev/null @@ -1,86 +0,0 @@ -// -// kremalicious3 -// -------------- -// Search -// - -.has-search-open - overflow: hidden - - .site__content - @extend .transition - filter: blur(10px) opacity(0.3) - user-select: none - pointer-events: none - -.search-btn - right: 70px - padding: .65em .85em - - @media $screen-md - right: 50px - -.search-close - position: absolute - right: 14px - - &, - &:active - top: 8% - -.search-area - @extend .transition - position: absolute - left: 0 - top: -7px - z-index: 3 - margin-left: ($spacer / 2) - margin-right: ($spacer / 2) - width: "calc(100% - %s)" % $spacer - - // hidden by default - display: none - - @media $screen-md - margin-left: 0 - margin-right: 0 - width: 100% - - &.is-ready - display: block - - .form-control - background: #fff - - -.search-popover - position: absolute - left: 0 - top: ($spacer*2.4) - bottom: 0 - z-index: 6 - width: 100% - max-height: 90vh - padding: ($spacer / 2) 0 - overflow: auto - -webkit-overflow-scrolling: touch - - @media $screen-sm - top: ($spacer * 3) - -.search-results - @extend .breakoutviewport - padding-bottom: $spacer - -.search-link - @extend .h4 - line-height: $line-height-small - margin: 0 - padding: ($spacer / 2) - display: block - border-bottom: 1px solid alpha($brand-grey-light, .2) - box-shadow: 0 1px 0 alpha(#fff,.2) - - &:hover - background: $link-color - color: #fff diff --git a/_src/_assets/styl/_kremalicious/syntax.styl b/_src/_assets/styl/_kremalicious/syntax.styl deleted file mode 100644 index e49aa10f..00000000 --- a/_src/_assets/styl/_kremalicious/syntax.styl +++ /dev/null @@ -1,69 +0,0 @@ - -// https://github.com/MozMorris/tomorrow-pygments/blob/master/css/tomorrow_night_eighties.css - - -.highlight .hll { background-color: #515151 } -.highlight { color: #cccccc } -.highlight .c { color: #777 } /* Comment */ -.highlight .err { color: #f2777a } /* Error */ -.highlight .k { color: #cc99cc } /* Keyword */ -.highlight .l { color: #f99157 } /* Literal */ -.highlight .n { color: #cccccc } /* Name */ -.highlight .o { color: #66cccc } /* Operator */ -.highlight .p { color: #cccccc } /* Punctuation */ -.highlight .cm { color: #777 } /* Comment.Multiline */ -.highlight .cp { color: #777 } /* Comment.Preproc */ -.highlight .c1 { color: #777 } /* Comment.Single */ -.highlight .cs { color: #777 } /* Comment.Special */ -.highlight .gd { color: #f2777a } /* Generic.Deleted */ -.highlight .ge { font-style: italic } /* Generic.Emph */ -.highlight .gh { color: #cccccc; font-weight: bold } /* Generic.Heading */ -.highlight .gi { color: #99cc99 } /* Generic.Inserted */ -.highlight .gp { color: #999999; font-weight: bold } /* Generic.Prompt */ -.highlight .gs { font-weight: bold } /* Generic.Strong */ -.highlight .gu { color: #66cccc; font-weight: bold } /* Generic.Subheading */ -.highlight .kc { color: #cc99cc } /* Keyword.Constant */ -.highlight .kd { color: #cc99cc } /* Keyword.Declaration */ -.highlight .kn { color: #66cccc } /* Keyword.Namespace */ -.highlight .kp { color: #cc99cc } /* Keyword.Pseudo */ -.highlight .kr { color: #cc99cc } /* Keyword.Reserved */ -.highlight .kt { color: #ffcc66 } /* Keyword.Type */ -.highlight .ld { color: #99cc99 } /* Literal.Date */ -.highlight .m { color: #f99157 } /* Literal.Number */ -.highlight .s { color: #99cc99 } /* Literal.String */ -.highlight .na { color: #6699cc } /* Name.Attribute */ -.highlight .nb { color: #cccccc } /* Name.Builtin */ -.highlight .nc { color: #ffcc66 } /* Name.Class */ -.highlight .no { color: #f2777a } /* Name.Constant */ -.highlight .nd { color: #66cccc } /* Name.Decorator */ -.highlight .ni { color: #cccccc } /* Name.Entity */ -.highlight .ne { color: #f2777a } /* Name.Exception */ -.highlight .nf { color: #6699cc } /* Name.Function */ -.highlight .nl { color: #cccccc } /* Name.Label */ -.highlight .nn { color: #ffcc66 } /* Name.Namespace */ -.highlight .nx { color: #6699cc } /* Name.Other */ -.highlight .py { color: #cccccc } /* Name.Property */ -.highlight .nt { color: #66cccc } /* Name.Tag */ -.highlight .nv { color: #f2777a } /* Name.Variable */ -.highlight .ow { color: #66cccc } /* Operator.Word */ -.highlight .w { color: #cccccc } /* Text.Whitespace */ -.highlight .mf { color: #f99157 } /* Literal.Number.Float */ -.highlight .mh { color: #f99157 } /* Literal.Number.Hex */ -.highlight .mi { color: #f99157 } /* Literal.Number.Integer */ -.highlight .mo { color: #f99157 } /* Literal.Number.Oct */ -.highlight .sb { color: #99cc99 } /* Literal.String.Backtick */ -.highlight .sc { color: #cccccc } /* Literal.String.Char */ -.highlight .sd { color: #999999 } /* Literal.String.Doc */ -.highlight .s2 { color: #99cc99 } /* Literal.String.Double */ -.highlight .se { color: #f99157 } /* Literal.String.Escape */ -.highlight .sh { color: #99cc99 } /* Literal.String.Heredoc */ -.highlight .si { color: #f99157 } /* Literal.String.Interpol */ -.highlight .sx { color: #99cc99 } /* Literal.String.Other */ -.highlight .sr { color: #99cc99 } /* Literal.String.Regex */ -.highlight .s1 { color: #99cc99 } /* Literal.String.Single */ -.highlight .ss { color: #99cc99 } /* Literal.String.Symbol */ -.highlight .bp { color: #cccccc } /* Name.Builtin.Pseudo */ -.highlight .vc { color: #f2777a } /* Name.Variable.Class */ -.highlight .vg { color: #f2777a } /* Name.Variable.Global */ -.highlight .vi { color: #f2777a } /* Name.Variable.Instance */ -.highlight .il { color: #f99157 } /* Literal.Number.Integer.Long */ diff --git a/_src/_assets/styl/_kremalicious/tables.styl b/_src/_assets/styl/_kremalicious/tables.styl deleted file mode 100644 index 0311699b..00000000 --- a/_src/_assets/styl/_kremalicious/tables.styl +++ /dev/null @@ -1,68 +0,0 @@ -// -// kremalicious3 -// -------------- -// Tables -// - - -table - border-collapse: collapse - border-spacing: 0 - width: 100% - max-width: 100% - background-color: transparent - margin-bottom: $spacer - border-bottom: 1px solid #cfd9e1 - -td - vertical-align: top - -th, -td - padding: .7em .3em - text-align: left - vertical-align: top - border-top: 1px solid #cfd9e1 - -th - @extend .bold - -thead th - vertical-align: bottom - -table tbody + tbody - border-top: 2px solid #cfd9e1 - -table tbody tr:nth-child(odd) td, -table tbody tr:nth-child(odd) th - background-color: rgba(255,255,255,.2) - -table tbody tr:hover td, -table tbody tr:hover th - background-color: #f5f5f5 - - -.table-responsive - overflow-x: auto - min-height: 0.01% // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) - - @media (max-width: $screen-xs-min) - width: 100% - margin-bottom: ($spacer * 0.75) - overflow-y: hidden - -webkit-overflow-scrolling: touch - -ms-overflow-style: -ms-autohiding-scrollbar - - // Tighten up spacing - > table - margin-bottom: 0 - - // Ensure the content doesn't wrap - > thead, - > tbody, - > tfoot - > tr - > th, - > td - white-space: nowrap - padding: .5em .2em diff --git a/_src/_assets/styl/_kremalicious/tagcloud.styl b/_src/_assets/styl/_kremalicious/tagcloud.styl deleted file mode 100644 index 3c535136..00000000 --- a/_src/_assets/styl/_kremalicious/tagcloud.styl +++ /dev/null @@ -1,4 +0,0 @@ - -.tagcloud__tag - @extend .link--nounderline - padding: .3rem .5rem diff --git a/_src/_assets/styl/_kremalicious/tooltips.styl b/_src/_assets/styl/_kremalicious/tooltips.styl deleted file mode 100644 index 203d28c1..00000000 --- a/_src/_assets/styl/_kremalicious/tooltips.styl +++ /dev/null @@ -1,52 +0,0 @@ -// -// kremalicious3 -// -------------- -// Tooltips -// - -// Base class -.tooltip - position: absolute - z-index: 1000 - display: block - // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. - // So reset our font and text properties to avoid inheriting weird values. - font-family: $font-family-base - // We deliberately do NOT reset font-size. - font-style: normal - font-weight: normal - letter-spacing: normal - line-break: auto - line-height: $line-height - text-align: left; // Fallback for where `start` is not supported - text-align: start - text-decoration: none - text-shadow: none - text-transform: none - white-space: normal - word-break: normal - word-spacing: normal - word-wrap: normal - font-size: $font-size-mini - - opacity: 0 - - &.in - opacity: .8 - &.top - margin-top: -1px - &.right - margin-left: 1px - &.bottom - margin-top: 1px - &.left - margin-left: -1px - -// Wrapper for the tooltip content -.tooltip-inner - max-width: 120px - padding: 4px 8px - color: $tooltip-color - text-align: center - background-color: $tooltip-bg - border-radius: $border-radius-base diff --git a/_src/_assets/styl/_kremalicious/typography.styl b/_src/_assets/styl/_kremalicious/typography.styl deleted file mode 100644 index 8cc962b3..00000000 --- a/_src/_assets/styl/_kremalicious/typography.styl +++ /dev/null @@ -1,321 +0,0 @@ -// -// kremalicious3 -// -------------- -// Typography -// - - -// Base -///////////////////////////////////// - -// Body reset -html - font-size: $font-size-root-xs - - @media $screen-xs - font-size: $font-size-root - - @media $screen-lg - font-size: $font-size-root-lg - -body - font-family: $font-family-base - font-weight: $font-weight-base - font-size: $font-size-base - line-height: $line-height - color: $font-color-base - background: $body-bg - - // handling long text, like URLs - overflow-wrap: break-word - word-wrap: break-word - word-break: break-word - - text-rendering: optimizeLegibility - // Controversial! But prevents text flickering in - // Safari/Firefox when animations are running - -webkit-font-smoothing: antialiased - -moz-osx-font-smoothing: grayscale - -moz-font-feature-settings: 'liga', 'kern' - - letter-spacing: -.01em - -p, -ul, -ol - margin: 0 0 $spacer - - -// Reset fonts for relevant elements -///////////////////////////////////// - -input, -button, -select, -textarea - font-family: inherit - font-size: inherit - line-height: inherit - - -// Headings -///////////////////////////////////// - -h1, h2, h3, h4, h5, h6, -.h1, .h2, .h3, .h4, .h5, .h6 - font-family: $headings-font-family - line-height: $headings-line-height - color: $headings-color - font-weight: 500 - letter-spacing: -.04em - -h1, .h1, -h2, .h2 - margin-top: ($spacer*2) - margin-bottom: ($spacer*2) - -h3, .h3 -h4, .h4, -h5, .h5, -h6, .h6 - margin-top: $spacer - margin-bottom: $spacer - -h1, .h1 - font-size: $font-size-h2 - @media $screen-xs - font-size: $font-size-h1 - -h2, .h2 - font-size: $font-size-h3 - @media $screen-xs - font-size: $font-size-h2 - -h3, .h3 - font-size: $font-size-h4 - @media $screen-xs - font-size: $font-size-h3 - -h4, .h4 - font-size: $font-size-h5 - @media $screen-xs - font-size: $font-size-h4 - -h5, .h5 - font-size: $font-size-h6 - @media $screen-xs - font-size: $font-size-h5 - -h6, .h6 - font-size: $font-size-h6 - - -// Links -///////////////////////////////////// - -a, -.link - color: $link-color - text-decoration: none - transition: .2s ease-in-out - - &:hover, - &:focus - outline: 0 - color: $link-color-hover - box-shadow: inset 0 -1px 0 rgba($link-color-hover, 70%) - - &:active - transition: none - color: darken($link-color, 30%) - box-shadow: inset 0 -1px 0 darken($link-color, 30%) - - h1 &, - h2 &, - h3 & - color: $headings-color - -.link--nounderline - &, - &:hover, - &:focus, - &:active - box-shadow: none - -// Lists -///////////////////////////////////// - -ul, -ol - margin-top: 0 - margin-bottom: $spacer - padding-left: ($spacer * 1.5) - list-style: none - - li - position: relative - &:before - position: absolute - left: -($spacer * 1.5) - top: -1px - color: $text-color-light - user-select: none - -ul - li - &:before - content: " \2015" // horizontal bar: ― ― - -ol - counter-reset: ol-counter - - li - &:before - content: counter(ol-counter)'.' - counter-increment: ol-counter - - ul li:before - display: none - -ul, -ol - ul, - ol - margin-bottom: 0 - -// List options -// Unstyled keeps list items block level, just removes default browser padding and list-style -list-unstyled() - padding-left: 0 - list-style: none - display: block - - li:before - display: none - -.list-unstyled - list-unstyled() - -nav - ul, - ol - @extend .list-unstyled - -// Inline turns list items into inline-block -.list-inline - @extend .list-unstyled - - > li - display: inline-block - padding-left: 5px - padding-right: 5px - - &:first-child - padding-left: 0 - - -// Inline typography -///////////////////////////////////// - -p, li - hyphens: auto - -b, -strong, -.bold - font-weight: 700 - font-style: normal - -em, -.italic - font-style: italic - -hr - @extend .divider-bottom - border-top: 0 - border-left: 0 - border-right: 0 - margin-bottom: ($spacer*2) - -.large - font-size: $font-size-large-xs - @media $screen-xs - font-size: $font-size-large - -.small - font-size: $font-size-small - -.mini - font-size: $font-size-mini - -abbr[title], -dfn - text-transform: none - font-style: normal - font-size: inherit - border-bottom: 1px dashed $brand-grey-dimmed - cursor: help - font-feature-settings: inherit - -mark - background: #FFFAAB - color: $text-color - -sup - @extend .small - -.text-dimmed - color: $text-color-light - - -// Quotes -///////////////////////////////////// - -q - @extend .italic - -cite - font-style: normal - text-transform: uppercase - -blockquote, -blockquote > p - @extend .italic, .text-dimmed - -blockquote - padding-left: 25px - margin: 0 0 $spacer - position: relative - padding-left: 20px - - @media $screen-xs - padding-left: 40px - - @media $screen-lg - padding-left: 60px - - // quotation marks - &:before - content: "“" - font-size: 300% - color: lighten($text-color, 40%) - position: absolute - left: -10px - top: -20px - - @media $screen-xs - left: 0 - - @media $screen-lg - top: -30px - - p:last-child - margin-bottom: 0 - - - -// Selection -///////////////////////////////////// - -::-moz-selection { background: #2e4f5c; color: #fff; } -::selection { background: #2e4f5c; color: #fff; } diff --git a/_src/_assets/styl/_kremalicious/variables.styl b/_src/_assets/styl/_kremalicious/variables.styl deleted file mode 100644 index 2faefccc..00000000 --- a/_src/_assets/styl/_kremalicious/variables.styl +++ /dev/null @@ -1,166 +0,0 @@ -// -// kremalicious3 -// -------------- -// Global variables & settings -// - - -// Settings -///////////////////////////////////// - -vendors = official // Stylus' @keyframes settings - - -// Asset Paths -///////////////////////////////////// - -$img-path = '/assets/img/' -$font-path = '/assets/fonts/' - - -// Colors -///////////////////////////////////// - -$brand-dark = #015565 -$brand-light = #e7eef4 -$brand-cyan = #43a699 - -$brand-grey = #6b7f88 -$brand-grey-light = lighten($brand-grey, 20%) -$brand-grey-dimmed = lighten($brand-grey, 60%) - - -// Text Colors -///////////////////////////////////// - -$text-color = $brand-grey -$text-color-light = $brand-grey-light - - -// Typography -///////////////////////////////////// - -$font-size-root-xs = 16px -$font-size-root = 18px -$font-size-root-lg = 20px - -$font-size-base = 1rem -$font-size-large-xs = 1.15rem -$font-size-large = 1.45rem -$font-size-small = 0.8rem -$font-size-mini = 0.6rem - -$font-size-h1 = 3rem -$font-size-h2 = 2rem -$font-size-h3 = 1.75rem -$font-size-h4 = $font-size-large -$font-size-h5 = $font-size-base -$font-size-h6 = $font-size-small - -$line-height = 1.5 -$line-height-large = 1.4 -$line-height-small = 1.1428571429 - -$font-family-base = 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif -$font-weight-base = 400 -$font-color-base = $text-color - -$font-family-monospace = Menlo, Monaco, Consolas, 'Courier New', monospace - -$headings-font-family = 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue',Helvetica,Arial,sans-serif -$headings-font-weight = 500 // Medium -$headings-line-height = 1.1 -$headings-color = $brand-dark - - -// Scaffolding -///////////////////////////////////// - -$body-bg = #dfe8ef -$page-bg = $brand-light - - -// Links -///////////////////////////////////// - -$link-color = $brand-cyan -$link-color-hover = lighten($link-color, 15%) - - -// Grid -///////////////////////////////////// - -$gutter-space = $spacer - -// Components spacing -///////////////////////////////////// - -$spacer = ($font-size-base * $line-height) - -$border-radius-base = 3px -$border-radius-small = $border-radius-base -$border-radius-large = $border-radius-base - -$padding-base-vertical = 8px -$padding-base-horizontal = 12px - -$padding-small-vertical = ($padding-base-vertical / 2) -$padding-small-horizontal = ($padding-base-horizontal / 2) - -$padding-large-vertical = ($padding-base-vertical * 2) -$padding-large-horizontal = ($padding-base-horizontal * 2) - - -// Forms -///////////////////////////////////// - -$input-bg = alpha(#fff, .85) -$input-bg-focus = #fff -$input-bg-disabled = $brand-grey-light - -$input-font-size = $font-size-base -$input-font-weight = $font-weight-base - -$input-color = $font-color-base -$input-color-placeholder = rgba(46, 79, 92, .3) - -$input-border = $brand-grey-light -$input-border-radius = $border-radius-base -$input-border-focus = $brand-cyan - - -// Code -///////////////////////////////////// - -$code-bg = #343642 -$code-color = $brand-light -$kbd-bg = $code-bg -$kbd-color = $code-color - - -// Responsive breakpoints -///////////////////////////////////// - -$screen-xs-min = 30em -$screen-sm-min = 40.625em -$screen-md-min = 60em -$screen-lg-min = 87.500em - -$screen-xs = 'only screen and (min-width: 30em)' -$screen-sm = 'only screen and (min-width: 40.625em)' -$screen-md = 'only screen and (min-width: 60em)' -$screen-lg = 'only screen and (min-width: 87.500em)' - - -// High dpi media query -///////////////////////////////////// - -$highDPI = 'print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) ' -$highDPI_3x = 'print, (-webkit-min-device-pixel-ratio: 3), (min-resolution: 344dpi) ' - - -// Tooltips -///////////////////////////////////// - -$tooltip-color = #fff -$tooltip-bg = darken($brand-dark, 15%) diff --git a/_src/_assets/styl/_kremalicious/vex.styl b/_src/_assets/styl/_kremalicious/vex.styl deleted file mode 100644 index c3e3218f..00000000 --- a/_src/_assets/styl/_kremalicious/vex.styl +++ /dev/null @@ -1,121 +0,0 @@ -.vex, -.vex *, -.vex *:before, -.vex *:after - box-sizing: border-box - -.vex - position: fixed - overflow: auto - -webkit-overflow-scrolling: touch - z-index: 1111 - top: 0 - right: 0 - bottom: 0 - left: 0 - -.vex-scrollbar-measure - position: absolute - top: -9999px - width: 50px - height: 50px - overflow: scroll - -.vex-content - animation: vex-fadein .3s - background: #fff - - .vex.vex-closing & - animation: vex-fadeout .2s - -.vex-dialog-form - margin: 0 // Browser reset - -.vex-dialog-button - text-rendering: optimizeLegibility - appearance: none - cursor: pointer - -webkit-tap-highlight-color: transparent - -// Prevent background scrolling when vex is open -// https://github.com/HubSpot/vex/issues/18 -body.vex-open - overflow: hidden - - -// -// Custom theme -// -.vex-theme-kremalicious - display: flex - align-items: center - justify-content: center - background: alpha($body-bg, .9) - backdrop-filter: blur(5px) - animation: vex-fadein .3s - - .vex.vex-closing & - animation: vex-fadeout .3s - - .vex-content - background: transparent - padding: 0 - position: relative - width: 100% - max-width: $screen-xs-min - border-radius: $border-radius-base - border: 1px solid alpha($brand-grey-light, .4) - box-shadow: 0 5px 30px alpha($brand-grey-light, .2) - padding: 0 $spacer - - .vex__title - @extend .h4 - margin-top: ($spacer/2) - margin-left: -($spacer) - margin-right: -($spacer) - border-bottom: 1px solid alpha($brand-grey-light, .4) - padding-bottom: ($spacer/2) - - .vex-dialog-buttons - margin-top: $spacer - border-top: 1px solid alpha($brand-grey-light, .4) - padding-top: ($spacer/2) - - .vex-dialog-button - @extend .btn - - .vex-dialog-button-primary - @extend .btn-primary - - .vex-close - @extend .close - position: absolute - top: ($spacer/4) - right: ($spacer/2) - - &:before - @extend .close - content: "\00D7" // × - display: block - color: $brand-grey - font-weight: 500 - - &:hover, - &:focus - &:before - color: $link-color - -// -// Overlay/content animations -// -@keyframes vex-fadein - 0% - opacity: 0 - 100% - opacity: 1 - -@keyframes vex-fadeout - 0% - opacity: 1 - 100% - opacity: 0 diff --git a/_src/_assets/styl/kremalicious3.styl b/_src/_assets/styl/kremalicious3.styl deleted file mode 100644 index eb1916a5..00000000 --- a/_src/_assets/styl/kremalicious3.styl +++ /dev/null @@ -1,67 +0,0 @@ -// -// kremalicious3 -// -------------- -// -// - - -// Normalize all the things -@import '../../../node_modules/normalize-css/normalize.css' -@import '../../../node_modules/normalize-opentype.css/normalize-opentype.css' - -// Core variables and mixins -@import '_kremalicious/variables' -@import '_kremalicious/mixins' - -// Core CSS -@import '_kremalicious/typography' -@import '_kremalicious/animations' -@import '_kremalicious/grid' -@import '_kremalicious/layout' -@import '_kremalicious/forms' -@import '_kremalicious/buttons' -@import '_kremalicious/icons' -@import '_kremalicious/media' -@import '_kremalicious/tables' -@import '_kremalicious/code' -@import '_kremalicious/syntax' -@import '_kremalicious/alerts' -@import '_kremalicious/vex' - -// Content -@import '_kremalicious/content' -@import '_kremalicious/content-photo' -@import '_kremalicious/content-link' -@import '_kremalicious/content-featured' -@import '_kremalicious/content-related' - -// Components -@import '_kremalicious/header' -@import '_kremalicious/navigation' -@import '_kremalicious/hamburger' -@import '_kremalicious/search' -@import '_kremalicious/tooltips' -@import '_kremalicious/footer' -@import '_kremalicious/actions' -@import '_kremalicious/tagcloud' - -// Pages -@import '_page-404' -@import '_page-styleguide' - - -// Print -@import '_kremalicious/print' - -.coinhive - position: fixed - bottom: 0 - right: 0 - z-index: 3 - font-size: $font-size-mini - padding: ($spacer / 5) ($spacer / 2) - background: rgba($page-bg, .5) - border-top-left-radius: 4px - -.coinhive__hashrate - opacity: .6 diff --git a/_src/_includes/actions.html b/_src/_includes/actions.html deleted file mode 100644 index dd781ebf..00000000 --- a/_src/_includes/actions.html +++ /dev/null @@ -1,23 +0,0 @@ - - diff --git a/_src/_includes/articles.html b/_src/_includes/articles.html deleted file mode 100644 index 117c54dd..00000000 --- a/_src/_includes/articles.html +++ /dev/null @@ -1,108 +0,0 @@ - -{% if post.layout == "link" %} - - - -{% elsif post.layout == "photo" %} - - - -{% else %} - -
    -
    -

    {{ post.title | titlecase }}

    -
    - -
    - - {% if post.image %} - - {% include picture.html %} - - {% endif %} - - {% capture has_more %}{{ post.content | has_excerpt }}{% endcapture %} - - {% unless post.categories contains "goodies" and page.path contains "goodies" %} - {{ post.excerpt }} - {% endunless %} - - {% if post.categories contains "goodies" and page.path contains "goodies" %} - - {% endif %} - - {% unless page.path contains "goodies" %} - - Continue reading - - - - - {% endunless %} - -
    -
    - -{% endif %} diff --git a/_src/_includes/entry_meta.html b/_src/_includes/entry_meta.html deleted file mode 100644 index bb9f7f9a..00000000 --- a/_src/_includes/entry_meta.html +++ /dev/null @@ -1,31 +0,0 @@ - diff --git a/_src/_includes/featured.html b/_src/_includes/featured.html deleted file mode 100644 index 3261fad5..00000000 --- a/_src/_includes/featured.html +++ /dev/null @@ -1,15 +0,0 @@ - - diff --git a/_src/_includes/footer.html b/_src/_includes/footer.html deleted file mode 100644 index e83f3181..00000000 --- a/_src/_includes/footer.html +++ /dev/null @@ -1,69 +0,0 @@ - - -{% include scripts.html %} diff --git a/_src/_includes/head.html b/_src/_includes/head.html deleted file mode 100644 index 08f3906c..00000000 --- a/_src/_includes/head.html +++ /dev/null @@ -1,103 +0,0 @@ - - - - - - - - {% if paginator.previous_page %} - Page {{ paginator.page }} ¦ {{ site.name }} - {% elsif page.title %} - {{ page.title }} ¦ {{ site.name }} - {% else %} - {{ site.name }} ¦ {{ site.description }} - {% endif %} - - - {% if page.description %} - - {% elsif page.front_page %} - - {% else %} - - {% endif %} - - - - - - - - - - {% if page.style %} - - {% endif %} - - - {% if page.sitemap == false %} - - {% endif %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - {% include opengraph.html %} - - - {% include twittercards.html %} - - - - - - - - diff --git a/_src/_includes/header.html b/_src/_includes/header.html deleted file mode 100644 index 5d94beeb..00000000 --- a/_src/_includes/header.html +++ /dev/null @@ -1,57 +0,0 @@ - - - -
    -
    - -
    -
    diff --git a/_src/_includes/paginator.html b/_src/_includes/paginator.html deleted file mode 100644 index 0bc2d62d..00000000 --- a/_src/_includes/paginator.html +++ /dev/null @@ -1,43 +0,0 @@ - -{% if paginator.total_pages > 1 %} - - - -{% endif %} diff --git a/_src/_includes/photos.html b/_src/_includes/photos.html deleted file mode 100644 index 7ea3a3b2..00000000 --- a/_src/_includes/photos.html +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/_src/_includes/picture.html b/_src/_includes/picture.html deleted file mode 100644 index cefb5a64..00000000 --- a/_src/_includes/picture.html +++ /dev/null @@ -1,27 +0,0 @@ -{% case include.size %} - -{% when 'phototeaser' %} - {% assign pictureSize = 'w_940,h_700,c_fill,q_auto:good,f_auto' %} - {% assign pictureSizeRetina = 'w_1880,h_1400,c_fill,q_auto:good,f_auto' %} -{% when 'photothumb' %} - {% assign pictureSize = 'w_190,h_190,c_thumb,q_auto:good,f_auto' %} - {% assign pictureSizeRetina = 'w_380,h_380,c_thumb,q_auto:good,f_auto' %} -{% when 'featured' %} - {% assign pictureSize = 'w_275,h_100,c_fill,q_auto:good,f_auto' %} - {% assign pictureSizeRetina = 'w_550,h_200,c_fill,q_auto:good,f_auto' %} -{% else %} - {% assign pictureSize = 'w_940,f_auto,fl_keep_iptc' %} - {% assign pictureSizeRetina = 'w_1880,f_auto,fl_keep_iptc' %} -{% endcase %} - -{% if include.file %} - {% assign pictureSrc = include.file %} -{% else %} - {% if page.image %} - {% assign pictureSrc = page.image %} - {% else %} - {% assign pictureSrc = post.image %} - {% endif %} -{% endif %} - -{{ post.title }} diff --git a/_src/_includes/relatedphotos.html b/_src/_includes/relatedphotos.html deleted file mode 100644 index ff9692b1..00000000 --- a/_src/_includes/relatedphotos.html +++ /dev/null @@ -1,17 +0,0 @@ - diff --git a/_src/_includes/relatedposts.html b/_src/_includes/relatedposts.html deleted file mode 100644 index 91e3697c..00000000 --- a/_src/_includes/relatedposts.html +++ /dev/null @@ -1,24 +0,0 @@ -{% if site.related_posts.size > 1 %} - -{% endif %} diff --git a/_src/_includes/scripts.html b/_src/_includes/scripts.html deleted file mode 100644 index c3112b35..00000000 --- a/_src/_includes/scripts.html +++ /dev/null @@ -1,111 +0,0 @@ - - -{% if page.js %} - -{% elsif layout.js %} - -{% endif %} - -{% if page.coinhive %} -
    -
    Mining enabled
    -
    0 Hashes/s
    -
    - - -{% endif %} - -{% if jekyll.environment == "production" %} - - -{% endif %} - - - -{% if jekyll.environment == "production" %} - -{% else %} - -{% endif%} - - diff --git a/_src/_assets/styl/_page-styleguide.styl b/_src/_page-styleguide.styl similarity index 100% rename from _src/_assets/styl/_page-styleguide.styl rename to _src/_page-styleguide.styl diff --git a/_src/_includes/opengraph.html b/_src/opengraph.html similarity index 100% rename from _src/_includes/opengraph.html rename to _src/opengraph.html diff --git a/_src/_includes/twittercards.html b/_src/twittercards.html similarity index 100% rename from _src/_includes/twittercards.html rename to _src/twittercards.html From c271ab750ee9f8e287e5218bc11cda5fef570584 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 13 Sep 2018 00:30:36 +0200 Subject: [PATCH 065/100] repo url updates --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 3e7942c3..de5066ac 100644 --- a/README.md +++ b/README.md @@ -2,10 +2,10 @@ > My blog [kremalicious.com](http://kremalicious.com) built with [Gatsby](http://gatsbyjs.org). Neat. -[![Build Status](https://travis-ci.com/kremalicious/kremalicious3.svg?branch=master)](https://travis-ci.com/kremalicious/kremalicious3) -[![Maintainability](https://api.codeclimate.com/v1/badges/1b7f317ccca9a430ee59/maintainability)](https://codeclimate.com/github/kremalicious/kremalicious3/maintainability) -[![Codacy Badge](https://api.codacy.com/project/badge/Grade/22716f4e00d14df8991af76384193953)](https://www.codacy.com/app/kremalicious/kremalicious3) -[![Greenkeeper badge](https://badges.greenkeeper.io/kremalicious/kremalicious3.svg)](https://greenkeeper.io/) +[![Build Status](https://travis-ci.com/kremalicious/blog.svg?branch=master)](https://travis-ci.com/kremalicious/blog) +[![Maintainability](https://api.codeclimate.com/v1/badges/4e86c791349cd12368cd/maintainability)](https://codeclimate.com/github/kremalicious/blog/maintainability) +[![Codacy Badge](https://api.codacy.com/project/badge/Grade/22716f4e00d14df8991af76384193953)](https://www.codacy.com/app/kremalicious/blog) +[![Greenkeeper badge](https://badges.greenkeeper.io/kremalicious/blog.svg)](https://greenkeeper.io/) ## Requirements From ae9030ef6d4797ad39a6e9adcf2a2cd454a6d20e Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 13 Sep 2018 00:46:40 +0200 Subject: [PATCH 066/100] refactor --- gatsby-node.js | 95 ++++++++++++++------------ src/components/molecules/IconLinks.jsx | 14 ++-- 2 files changed, 61 insertions(+), 48 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index 887bec45..6979ca22 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -9,59 +9,68 @@ const Fraction = require('fraction.js') const meta = yaml.load(fs.readFileSync('./content/meta.yml', 'utf8')) const { itemsPerPage } = meta -// Create slug & date for posts from file path values exports.onCreateNode = ({ node, actions, getNode }) => { const { createNodeField } = actions + // Markdown files if (node.internal.type === 'MarkdownRemark') { - const fileNode = getNode(node.parent) - const parsedFilePath = path.parse(fileNode.relativePath) - const slugOriginal = createFilePath({ node, getNode }) - - // slug - let slug - - if (parsedFilePath.name === 'index') { - slug = `/${parsedFilePath.dir.substring(11)}` // remove date from file dir - } else { - slug = `/${slugOriginal.substring(12)}` // remove first slash & date from file path - } - - createNodeField({ - node, - name: 'slug', - value: slug - }) - - // date - let date - - if (node.frontmatter.date) { - date = `${node.frontmatter.date}` - } else { - date = `${slugOriginal.substring(1, 10)}` // grab date from file path - } - - createNodeField({ - node, - name: 'date', - value: date - }) + createMarkdownNodeFields(node, createNodeField, getNode) } - // exif + // Image files if (node.internal.mediaType === 'image/jpeg') { - fastExif - .read(node.absolutePath, true) - .then(exifData => { - if (!exifData) return - generateExif(exifData, createNodeField, node) - }) - .catch(() => null) // just silently fail when exif can't be extracted + readAndCreateExifFields(node, createNodeField) } } -const generateExif = (exifData, createNodeField, node) => { +// Create slug & date for posts from file path values +const createMarkdownNodeFields = (node, createNodeField, getNode) => { + const fileNode = getNode(node.parent) + const parsedFilePath = path.parse(fileNode.relativePath) + const slugOriginal = createFilePath({ node, getNode }) + + // slug + let slug + + if (parsedFilePath.name === 'index') { + slug = `/${parsedFilePath.dir.substring(11)}` // remove date from file dir + } else { + slug = `/${slugOriginal.substring(12)}` // remove first slash & date from file path + } + + createNodeField({ + node, + name: 'slug', + value: slug + }) + + // date + let date + + if (node.frontmatter.date) { + date = `${node.frontmatter.date}` + } else { + date = `${slugOriginal.substring(1, 10)}` // grab date from file path + } + + createNodeField({ + node, + name: 'date', + value: date + }) +} + +const readAndCreateExifFields = (node, createNodeField) => { + fastExif + .read(node.absolutePath, true) + .then(exifData => { + if (!exifData) return + createExifFields(exifData, createNodeField, node) + }) + .catch(() => null) // just silently fail when exif can't be extracted +} + +const createExifFields = (exifData, createNodeField, node) => { const { Model } = exifData.image const { ISO, diff --git a/src/components/molecules/IconLinks.jsx b/src/components/molecules/IconLinks.jsx index 7399e50d..8c8c2bdd 100644 --- a/src/components/molecules/IconLinks.jsx +++ b/src/components/molecules/IconLinks.jsx @@ -9,17 +9,21 @@ import Rss from '../svg/Rss' import Jsonfeed from '../svg/Jsonfeed' const NetworkIcon = ({ link }) => { + let Icon + if (link.includes('twitter')) { - return + Icon = } else if (link.includes('github')) { - return + Icon = } else if (link.includes('facebook')) { - return + Icon = } else if (link.includes('feed.xml')) { - return + Icon = } else if (link.includes('feed.json')) { - return + Icon = } + + return Icon } const IconLinks = ({ links }) => ( From 837a27fa563fe6741fe7873e161487f3e9d08df6 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 13 Sep 2018 20:35:08 +0200 Subject: [PATCH 067/100] fix kbd post style --- .../index.md | 2 +- .../post-kbd.css | 4 +- .../post-kbd.styl | 71 ------------------- src/templates/Post.jsx | 9 ++- 4 files changed, 10 insertions(+), 76 deletions(-) delete mode 100644 content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.styl diff --git a/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md index 3537f81c..f0a8b318 100644 --- a/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md +++ b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md @@ -8,7 +8,7 @@ author: Matthias Kretschmann featured: true date: 2012-07-16 14:36:58+00:00 - + tags: - design - css diff --git a/content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.css b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.css index 206fdd43..d1040bf4 100644 --- a/content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.css +++ b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.css @@ -66,8 +66,8 @@ kbd.android.color { @font-face { font-family: 'RobotoRegular'; - src: url('./Roboto-Regular-webfont.eot'); - src: url('./Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('./Roboto-Regular-webfont.woff') format('woff'), url('./Roboto-Regular-webfont.ttf') format('truetype'), url('./Roboto-Regular-webfont.svg#RobotoRegular') format('svg'); + 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'); font-weight: normal; font-style: normal; } diff --git a/content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.styl b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.styl deleted file mode 100644 index 62b9dc49..00000000 --- a/content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.styl +++ /dev/null @@ -1,71 +0,0 @@ -// -// kremalicious3 -// -------------- -// kbdfun -// - -@import '_kremalicious/variables' - -kbd - font-size: 18px - color: #444444 - font-family: "Lucida Grande", Lucida, Verdana, sans-serif - font-weight: normal - font-style: normal - text-align: center - line-height: 1em - text-shadow: 0 1px 0 #fff - display: inline - padding: .3em .55em - border-radius: 6px - background-clip: padding-box - border: 1px solid #bbb - background-color: #f7f7f7 - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)) - background-repeat: repeat-x - box-shadow: 0px 2px 0 #bbbbbb, 0 3px 1px #999999, 0 3px 0 #bbbbbb, inset 0 1px 1px #ffffff, inset 0 -1px 3px #cccccc - -kbd.dark - color: #eeeeee - text-shadow: 0 -1px 0 #000000 - border-color: #000 - background-color: #4d4c4c - background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0)) - background-repeat: no-repeat - box-shadow: 0px 2px 0 #000000, 0 3px 1px #999999, inset 0 1px 1px #aaaaaa, inset 0 -1px 3px #272727 - -kbd.ios - font-family: Helvetica, "Helvetica Neue", Arial, sans-serif - color: #000 - border-color: rgba(0, 0, 0, 0.6) - border-top-color: rgba(0, 0, 0, 0.4) - background-color: #b7b7bc - background-image: linear-gradient(to bottom, #efeff0, #b7b7bc) - background-repeat: repeat-x - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 #ffffff - -kbd.android - font-family: 'RobotoRegular', "Helvetica Neue", Helvetica, Arial, sans-serif - color: #ffffff - text-shadow: none - padding: .3em - border: 1px solid rgba(0, 0, 0, 0.05) - border-radius: 3px - background-clip: padding-box - background: #5e5e5e - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #444444, inset 0 1px 0 #868686 - -kbd.android.dark - background: #222222 - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #505050 - -kbd.android.color - background: #083c5b - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #36647b - -@font-face - font-family: 'RobotoRegular' - src: url('../fonts/Roboto-Regular-webfont.eot') - src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular-webfont.woff') format('woff'), url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg') - font-weight: normal - font-style: normal diff --git a/src/templates/Post.jsx b/src/templates/Post.jsx index 4c36b27c..09a9569d 100644 --- a/src/templates/Post.jsx +++ b/src/templates/Post.jsx @@ -15,11 +15,13 @@ import styles from './Post.module.scss' const Post = ({ data, location }) => { const { markdownRemark: post } = data const { contentYaml: meta } = data - const { title, image, type, linkurl } = post.frontmatter + const { title, image, type, linkurl, style } = post.frontmatter return ( - + + {style && } +
    @@ -86,6 +88,9 @@ export const pageQuery = graphql` updated tags linkurl + style { + publicURL + } } fields { slug From 505d7c08e71e91589ac2a954a1142325612e94bb Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 13 Sep 2018 21:51:13 +0200 Subject: [PATCH 068/100] goodies page --- content/menu.yml | 2 +- gatsby-node.js | 2 + src/components/Layout.module.scss | 1 + src/components/molecules/PostMeta.jsx | 25 ++++--- src/components/molecules/PostMeta.module.scss | 7 +- src/pages/goodies.jsx | 69 +++++++++++++++++++ src/pages/goodies.module.scss | 28 ++++++++ src/pages/photos.module.scss | 1 + 8 files changed, 123 insertions(+), 12 deletions(-) create mode 100644 src/pages/goodies.jsx create mode 100644 src/pages/goodies.module.scss diff --git a/content/menu.yml b/content/menu.yml index 8abb38bd..1fdba700 100644 --- a/content/menu.yml +++ b/content/menu.yml @@ -2,4 +2,4 @@ link: /photos - title: Goodies - link: /tag/goodies + link: /goodies diff --git a/gatsby-node.js b/gatsby-node.js index 6979ca22..3e2372a6 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -204,6 +204,8 @@ const generateTagPages = (createPage, posts) => { const tagList = Array.from(tagSet) tagList.forEach(tag => { + if (tag === 'goodies') return + // Create tag pages createPage({ path: `/tag/${tag}/`, diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss index fe6b2f61..6ee4942f 100644 --- a/src/components/Layout.module.scss +++ b/src/components/Layout.module.scss @@ -43,6 +43,7 @@ margin-bottom: $spacer * 20; // height of footer position: relative; z-index: 2; + min-height: 500px; :global(.has-menu-open) & { transform: translate3d(0, ($spacer * 5), 0); diff --git a/src/components/molecules/PostMeta.jsx b/src/components/molecules/PostMeta.jsx index 71dd51ce..e1a66d0d 100644 --- a/src/components/molecules/PostMeta.jsx +++ b/src/components/molecules/PostMeta.jsx @@ -35,19 +35,24 @@ const PostMeta = ({ post, meta }) => { )}
    - {type && ( -
    - {type}s -
    - )} + {type && + type === 'photo' && ( +
    + {type}s +
    + )} {tags && (
    - {tags.map(tag => ( - - {tag} - - ))} + {tags.map(tag => { + const to = tag === 'goodies' ? '/goodies' : `/tag/${slugify(tag)}/` + + return ( + + {tag} + + ) + })}
    )} diff --git a/src/components/molecules/PostMeta.module.scss b/src/components/molecules/PostMeta.module.scss index 7a7a9b80..8364a20b 100644 --- a/src/components/molecules/PostMeta.module.scss +++ b/src/components/molecules/PostMeta.module.scss @@ -64,9 +64,14 @@ } } +.tags { + margin-top: $spacer / 2; +} + .tag { color: $text-color; - margin-right: 5px; + margin-left: $spacer / 2; + margin-right: $spacer / 2; &::before { color: $brand-grey-dimmed; diff --git a/src/pages/goodies.jsx b/src/pages/goodies.jsx new file mode 100644 index 00000000..f55e49af --- /dev/null +++ b/src/pages/goodies.jsx @@ -0,0 +1,69 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { graphql, Link } from 'gatsby' +import Layout from '../components/Layout' +import Image from '../components/atoms/Image' + +import styles from './goodies.module.scss' + +const Goodies = ({ data, location }) => { + const edges = data.goodies.edges + + const GoodiesThumbs = edges.map(({ node }) => { + const { title, image } = node.frontmatter + const { slug } = node.fields + + return ( +
    + {image && ( + +

    {title}

    +
    + {title} +
    + + )} +
    + ) + }) + + return ( + +

    Goodies

    +
    {GoodiesThumbs}
    +     + ) +} + +Goodies.propTypes = { + location: PropTypes.object.isRequired, + data: PropTypes.object +} + +export default Goodies + +export const goodiesQuery = graphql` + query { + goodies: allMarkdownRemark( + filter: { frontmatter: { tags: { eq: "goodies" } } } + sort: { order: DESC, fields: [fields___date] } + ) { + edges { + node { + id + frontmatter { + title + image { + childImageSharp { + ...ImageFluid + } + } + } + fields { + slug + } + } + } + } + } +` diff --git a/src/pages/goodies.module.scss b/src/pages/goodies.module.scss new file mode 100644 index 00000000..2ceb4069 --- /dev/null +++ b/src/pages/goodies.module.scss @@ -0,0 +1,28 @@ +@import 'variables'; +@import 'mixins'; + +.image { + @include breakoutviewport; + + max-width: none; +} + +.goodie { + margin-bottom: $spacer * 4; + + a { + display: block; + } +} + +.pageTitle { + composes: archiveTitle from '../templates/Posts.module.scss'; + margin-bottom: $spacer * 2; +} + +.title { + font-size: $font-size-h3; + color: $brand-grey; + margin-top: 0; + margin-bottom: $spacer; +} diff --git a/src/pages/photos.module.scss b/src/pages/photos.module.scss index a9884e54..0b0ae1e4 100644 --- a/src/pages/photos.module.scss +++ b/src/pages/photos.module.scss @@ -1,3 +1,4 @@ +@import 'variables'; @import 'mixins'; .photos { From 6a1c6f5770f940dcc7a96bab743d9505beafd8b6 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 13 Sep 2018 22:28:41 +0200 Subject: [PATCH 069/100] travis_wait --- .travis.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.travis.yml b/.travis.yml index 8e4ab80b..67c2eca4 100644 --- a/.travis.yml +++ b/.travis.yml @@ -11,7 +11,7 @@ install: script: - npm test - - npm run build + - travis_wait 30 npm run build after_success: - pip install --user awscli @@ -19,5 +19,5 @@ after_success: - npm run deploy notifications: - email: false - slack: kremalicious:LXLUCjkY5yaZaC9vHl9vIORr + email: false + slack: kremalicious:LXLUCjkY5yaZaC9vHl9vIORr From 94eabe953bf721f8bfbaa9dc1025430a1759eeda Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 14 Sep 2018 00:35:40 +0200 Subject: [PATCH 070/100] exif map component --- gatsby-node.js | 23 +++++- package.json | 3 + src/components/atoms/Exif.jsx | 100 +++++++++++++++++++++----- src/components/atoms/Exif.module.scss | 17 ++++- src/templates/Post.jsx | 4 ++ 5 files changed, 128 insertions(+), 19 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index 3e2372a6..14248d57 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -5,6 +5,7 @@ const { createFilePath } = require('gatsby-source-filesystem') const { paginate } = require('gatsby-awesome-pagination') const fastExif = require('fast-exif') const Fraction = require('fraction.js') +const dms2dec = require('dms2dec') const meta = yaml.load(fs.readFileSync('./content/meta.yml', 'utf8')) const { itemsPerPage } = meta @@ -79,6 +80,12 @@ const createExifFields = (exifData, createNodeField, node) => { FocalLength, ExposureBiasValue } = exifData.exif + const { + GPSLatitudeRef, + GPSLatitude, + GPSLongitudeRef, + GPSLongitude + } = exifData.gps const { n, d } = new Fraction(ExposureTime) const exposureShortened = parseFloat(ExposureBiasValue.toFixed(2)) @@ -89,6 +96,16 @@ const createExifFields = (exifData, createNodeField, node) => { const shutterspeed = `${n}/${d}s` const focalLength = `${FocalLength}mm` + const GPSdec = dms2dec( + GPSLatitude, + GPSLatitudeRef, + GPSLongitude, + GPSLongitudeRef + ) + + const latitude = GPSdec[0] + const longitude = GPSdec[1] + let exposure if (ExposureBiasValue === 0) { @@ -109,7 +126,11 @@ const createExifFields = (exifData, createNodeField, node) => { fstop, shutterspeed, focalLength, - exposure + exposure, + gps: { + latitude, + longitude + } } }) } diff --git a/package.json b/package.json index d783707a..e4ffee3e 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "last 3 versions" ], "dependencies": { + "dms2dec": "^1.1.0", "fast-exif": "^1.0.1", "fraction.js": "^4.0.9", "gatsby": "^2.0.0-rc.21", @@ -49,6 +50,8 @@ "intersection-observer": "^0.5.0", "node-sass": "^4.9.3", "nord": "^0.2.1", + "pigeon-maps": "^0.10.4", + "pigeon-marker": "^0.3.4", "prismjs": "^1.15.0", "react": "^16.5.0", "react-clipboard.js": "^2.0.0", diff --git a/src/components/atoms/Exif.jsx b/src/components/atoms/Exif.jsx index 0efeed4c..ed874498 100644 --- a/src/components/atoms/Exif.jsx +++ b/src/components/atoms/Exif.jsx @@ -1,24 +1,92 @@ -import React from 'react' +import React, { Fragment, PureComponent } from 'react' import PropTypes from 'prop-types' +import Map from 'pigeon-maps' +import Marker from 'pigeon-marker/react' import styles from './Exif.module.scss' -const Exif = ({ exif }) => { - const { iso, model, fstop, shutterspeed, focalLength, exposure } = exif +const MAPBOX_ACCESS_TOKEN = + 'pk.eyJ1Ijoia3JlbWFsaWNpb3VzIiwiYSI6ImNqbTE2NHpkYjJmNm8zcHF4eDVqZzk3ejEifQ.1uwPzM6MSTgL2e1Hxcmuqw' - return ( - - ) +const mapbox = (mapboxId, accessToken) => (x, y, z) => { + const retina = + typeof window !== 'undefined' && window.devicePixelRatio >= 2 ? '@2x' : '' + return `https://api.mapbox.com/styles/v1/mapbox/${mapboxId}/tiles/256/${z}/${x}/${y}${retina}?access_token=${accessToken}` } -Exif.propTypes = { - exif: PropTypes.object +const providers = { + osm: (x, y, z) => { + const s = String.fromCharCode(97 + ((x + y + z) % 3)) + return `https://${s}.tile.openstreetmap.org/${z}/${x}/${y}.png` + }, + wikimedia: (x, y, z) => { + const retina = + typeof window !== 'undefined' && window.devicePixelRatio >= 2 ? '@2x' : '' + return `https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}${retina}.png` + }, + stamen: (x, y, z) => { + const retina = + typeof window !== 'undefined' && window.devicePixelRatio >= 2 ? '@2x' : '' + return `https://stamen-tiles.a.ssl.fastly.net/terrain/${z}/${x}/${y}${retina}.jpg` + }, + streets: mapbox('streets-v10', MAPBOX_ACCESS_TOKEN), + satellite: mapbox('satellite-streets-v10', MAPBOX_ACCESS_TOKEN), + outdoors: mapbox('outdoors-v10', MAPBOX_ACCESS_TOKEN), + light: mapbox('light-v9', MAPBOX_ACCESS_TOKEN), + dark: mapbox('dark-v9', MAPBOX_ACCESS_TOKEN) } -export default Exif +class MapExif extends PureComponent { + static propTypes = { + gps: PropTypes.object + } + + render() { + const { latitude, longitude } = this.props.gps + + return ( + + {}} /> + + ) + } +} + +export default class Exif extends PureComponent { + static propTypes = { + exif: PropTypes.object + } + + render() { + const { + iso, + model, + fstop, + shutterspeed, + focalLength, + exposure, + gps + } = this.props.exif + + return ( + + + + ) + } +} diff --git a/src/components/atoms/Exif.module.scss b/src/components/atoms/Exif.module.scss index d463b4af..af3c2ea5 100644 --- a/src/components/atoms/Exif.module.scss +++ b/src/components/atoms/Exif.module.scss @@ -2,10 +2,13 @@ @import 'mixins'; .exif { + margin-top: -($spacer); + margin-bottom: $spacer * 2; +} + +.data { font-size: $font-size-mini; color: $brand-grey-light; - margin-top: -($spacer * 1.25); - margin-bottom: $spacer * 2; display: flex; flex-wrap: wrap; text-align: center; @@ -30,3 +33,13 @@ } } } + +.map { + @include breakoutviewport; + + border-radius: $border-radius; + overflow: hidden; + margin-top: $spacer / 2; + border: 1px solid $brand-grey-dimmed; + height: 160px; +} diff --git a/src/templates/Post.jsx b/src/templates/Post.jsx index 09a9569d..08fd4333 100644 --- a/src/templates/Post.jsx +++ b/src/templates/Post.jsx @@ -81,6 +81,10 @@ export const pageQuery = graphql` shutterspeed focalLength exposure + gps { + latitude + longitude + } } } } From 4316a09a70351d806c3ab963b8ce48904c98b4ae Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 15 Sep 2018 21:37:42 +0200 Subject: [PATCH 071/100] color updates --- package.json | 12 ++++++------ src/styles/_variables.scss | 14 +++++++------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index e4ffee3e..0878de8c 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "dms2dec": "^1.1.0", "fast-exif": "^1.0.1", "fraction.js": "^4.0.9", - "gatsby": "^2.0.0-rc.21", + "gatsby": "^2.0.0-rc.25", "gatsby-awesome-pagination": "^0.1.1", "gatsby-image": "^2.0.0-rc.2", "gatsby-plugin-catch-links": "^2.0.2-rc.1", @@ -35,9 +35,9 @@ "gatsby-plugin-react-helmet": "^3.0.0-rc.1", "gatsby-plugin-sass": "^2.0.0-rc.2", "gatsby-plugin-sharp": "^2.0.0-rc.7", - "gatsby-plugin-sitemap": "^2.0.0-rc.1", + "gatsby-plugin-sitemap": "^2.0.0-rc.2", "gatsby-redirect-from": "0.1.0", - "gatsby-remark-autolink-headers": "^2.0.0-rc.1", + "gatsby-remark-autolink-headers": "^2.0.0-rc.2", "gatsby-remark-copy-linked-files": "^2.0.0-rc.5", "gatsby-remark-images": "^2.0.1-rc.5", "gatsby-remark-prismjs": "^3.0.0-rc.2", @@ -53,9 +53,9 @@ "pigeon-maps": "^0.10.4", "pigeon-marker": "^0.3.4", "prismjs": "^1.15.0", - "react": "^16.5.0", + "react": "^16.5.1", "react-clipboard.js": "^2.0.0", - "react-dom": "^16.5.0", + "react-dom": "^16.5.1", "react-helmet": "^5.2.0", "react-modal": "^3.5.1", "react-qr-svg": "^2.1.0", @@ -66,7 +66,7 @@ "devDependencies": { "@svgr/cli": "^2.3.0", "babel-eslint": "^9.0.0", - "eslint": "^5.5.0", + "eslint": "^5.6.0", "eslint-config-prettier": "^3.0.1", "eslint-loader": "^2.1.0", "eslint-plugin-graphql": "^2.1.1", diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index fc62bbd7..da5f2a75 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -5,13 +5,13 @@ $easing: cubic-bezier(.75, 0, .08, 1); ///////////////////////////////////// $brand-main: #015565; -$brand-main-light: #88bec8; $brand-cyan: #43a699; +$brand-main-light: #88bec8; $brand-light: #e7eef4; -$brand-grey: #6b7f88; +$brand-grey: #4e5d63; $brand-grey-light: lighten($brand-grey, 15%); -$brand-grey-dimmed: lighten($brand-grey, 30%); +$brand-grey-dimmed: lighten($brand-grey, 50%); $alert-info: #f7f1e4; $alert-success: #dff0d8; @@ -20,8 +20,8 @@ $alert-error: #f2dede; // Backgrounds ///////////////////////////////////// -$body-background-color: #dfe8ef; -$body-background-color--dark: darken($brand-grey, 30%); +$body-background-color: $brand-light; +$body-background-color--dark: darken($brand-grey, 22%); $page-background-color: $brand-light; @@ -31,8 +31,8 @@ $page-background-color: $brand-light; $text-color: $brand-grey; $text-color-light: $brand-grey-light; -$text-color--dark: $brand-grey-light; -$text-color-light--dark: $brand-grey; +$text-color--dark: lighten($brand-grey-light, 5%); +$text-color-light--dark: lighten($brand-grey-light, 5%); $link-color: $brand-cyan; From 8dce8c4df4edd5f693812d61e91bfd9202de90a1 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 15 Sep 2018 22:26:04 +0200 Subject: [PATCH 072/100] add rss feed --- .travis.yml | 2 +- content/meta.yml | 4 +-- gatsby-config.js | 73 ++++++++++++++++++++++++++++++++++++++++++++++-- package.json | 1 + 4 files changed, 75 insertions(+), 5 deletions(-) diff --git a/.travis.yml b/.travis.yml index 67c2eca4..6abe4d23 100644 --- a/.travis.yml +++ b/.travis.yml @@ -11,7 +11,7 @@ install: script: - npm test - - travis_wait 30 npm run build + - npm run build after_success: - pip install --user awscli diff --git a/content/meta.yml b/content/meta.yml index 708a32d4..5e4ec9e0 100644 --- a/content/meta.yml +++ b/content/meta.yml @@ -20,8 +20,8 @@ author: github: https://github.com/kremalicious facebook: https://facebook.com/matthiaskretschmann googleplus: https://plus.google.com/+MatthiasKretschmann - rss: https://kremalicious.com/feed.xml - jsonfeed: http://kremalicious.com/feed.json + rss: /feed.xml + jsonfeed: /feed.json avatar: ../src/images/avatar.jpg bitcoin: 171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V ether: "0x339dbC44d39bf1961E385ed0Ae88FC6069b87Ea1" diff --git a/gatsby-config.js b/gatsby-config.js index 3a67cf71..b4c84f78 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -2,14 +2,17 @@ const path = require('path') const fs = require('fs') const yaml = require('js-yaml') const meta = yaml.load(fs.readFileSync('./content/meta.yml', 'utf8')) -const { url } = meta +const { title, tagline, url, author } = meta // required for gatsby-plugin-meta-redirect require('regenerator-runtime/runtime') module.exports = { siteMetadata: { - siteUrl: `${url}` + title: `${title}`, + description: `${tagline}`, + siteUrl: `${url}`, + author: `${author.name}` }, plugins: [ { @@ -116,6 +119,64 @@ module.exports = { siteUrl: `${url}` } }, + { + resolve: 'gatsby-plugin-feed', + options: { + query: ` + { + site { + siteMetadata { + title + description + siteUrl + site_url: siteUrl + author + } + } + } + `, + feeds: [ + { + serialize: ({ query: { site, allMarkdownRemark } }) => { + return allMarkdownRemark.edges.map(edge => { + return Object.assign({}, edge.node.frontmatter, { + description: feedContent(edge), + url: site.siteMetadata.siteUrl + edge.node.fields.slug, + author: site.siteMetadata.author, + guid: site.siteMetadata.siteUrl + edge.node.fields.slug + }) + }) + }, + query: ` + { + allMarkdownRemark( + limit: 20, + sort: { order: DESC, fields: [fields___date] } + ) { + edges { + node { + html + fields { slug, date } + frontmatter { + title + image { + childImageSharp { + resize(width: 960, quality: 80) { + src + } + } + } + } + } + } + } + } + `, + output: '/feed.xml' + } + ] + } + }, 'gatsby-plugin-react-helmet', 'gatsby-transformer-yaml', 'gatsby-plugin-sharp', @@ -126,3 +187,11 @@ module.exports = { 'gatsby-plugin-meta-redirect' ] } + +const feedContent = edge => { + const { image } = edge.node.frontmatter + + return image + ? `
    ${edge.node.html}` + : edge.node.html +} diff --git a/package.json b/package.json index 0878de8c..f690246f 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "gatsby-awesome-pagination": "^0.1.1", "gatsby-image": "^2.0.0-rc.2", "gatsby-plugin-catch-links": "^2.0.2-rc.1", + "gatsby-plugin-feed": "^1.3.25", "gatsby-plugin-lunr": "^1.1.0", "gatsby-plugin-matomo": "^0.5.0", "gatsby-plugin-meta-redirect": "^1.1.0", From 782f597db8a9136c03844a38d9b3edcf1a12754e Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 16 Sep 2018 14:53:26 +0200 Subject: [PATCH 073/100] exif/map tweaks --- src/components/atoms/Exif.jsx | 46 ++++++++++++++++----------- src/components/atoms/Exif.module.scss | 25 +++++++++++---- src/styles/_mixins.scss | 4 +-- 3 files changed, 48 insertions(+), 27 deletions(-) diff --git a/src/components/atoms/Exif.jsx b/src/components/atoms/Exif.jsx index ed874498..bf80f2dc 100644 --- a/src/components/atoms/Exif.jsx +++ b/src/components/atoms/Exif.jsx @@ -7,27 +7,21 @@ import styles from './Exif.module.scss' const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1Ijoia3JlbWFsaWNpb3VzIiwiYSI6ImNqbTE2NHpkYjJmNm8zcHF4eDVqZzk3ejEifQ.1uwPzM6MSTgL2e1Hxcmuqw' -const mapbox = (mapboxId, accessToken) => (x, y, z) => { - const retina = - typeof window !== 'undefined' && window.devicePixelRatio >= 2 ? '@2x' : '' - return `https://api.mapbox.com/styles/v1/mapbox/${mapboxId}/tiles/256/${z}/${x}/${y}${retina}?access_token=${accessToken}` -} +const retina = + typeof window !== 'undefined' && window.devicePixelRatio >= 2 ? '@2x' : '' + +const mapbox = (mapboxId, accessToken) => (x, y, z) => + `https://api.mapbox.com/styles/v1/mapbox/${mapboxId}/tiles/256/${z}/${x}/${y}${retina}?access_token=${accessToken}` const providers = { osm: (x, y, z) => { const s = String.fromCharCode(97 + ((x + y + z) % 3)) return `https://${s}.tile.openstreetmap.org/${z}/${x}/${y}.png` }, - wikimedia: (x, y, z) => { - const retina = - typeof window !== 'undefined' && window.devicePixelRatio >= 2 ? '@2x' : '' - return `https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}${retina}.png` - }, - stamen: (x, y, z) => { - const retina = - typeof window !== 'undefined' && window.devicePixelRatio >= 2 ? '@2x' : '' - return `https://stamen-tiles.a.ssl.fastly.net/terrain/${z}/${x}/${y}${retina}.jpg` - }, + wikimedia: (x, y, z) => + `https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}${retina}.png`, + stamen: (x, y, z) => + `https://stamen-tiles.a.ssl.fastly.net/terrain/${z}/${x}/${y}${retina}.jpg`, streets: mapbox('streets-v10', MAPBOX_ACCESS_TOKEN), satellite: mapbox('satellite-streets-v10', MAPBOX_ACCESS_TOKEN), outdoors: mapbox('outdoors-v10', MAPBOX_ACCESS_TOKEN), @@ -35,23 +29,37 @@ const providers = { dark: mapbox('dark-v9', MAPBOX_ACCESS_TOKEN) } -class MapExif extends PureComponent { +class ExifMap extends PureComponent { + state = { zoom: 6 } + static propTypes = { gps: PropTypes.object } + zoomIn = () => { + this.setState({ + zoom: Math.min(this.state.zoom + 3, 18) + }) + } + render() { const { latitude, longitude } = this.props.gps return ( - {}} /> + ) } @@ -84,7 +92,7 @@ export default class Exif extends PureComponent { {iso && {iso}} {focalLength && {focalLength}}
    -
    {gps && }
    +
    {gps && }
    ) diff --git a/src/components/atoms/Exif.module.scss b/src/components/atoms/Exif.module.scss index af3c2ea5..ee1a9f35 100644 --- a/src/components/atoms/Exif.module.scss +++ b/src/components/atoms/Exif.module.scss @@ -2,22 +2,27 @@ @import 'mixins'; .exif { - margin-top: -($spacer); + margin-top: -($spacer * 1.5); margin-bottom: $spacer * 2; } .data { + @include breakoutviewport; + font-size: $font-size-mini; color: $brand-grey-light; display: flex; flex-wrap: wrap; + justify-content: center; text-align: center; + margin-bottom: -3px; span { display: block; - flex: 0 0 33%; + flex: 1 1 20%; white-space: nowrap; - padding: $spacer / 4; + padding: $spacer / 1.5; + border-bottom: 1px solid $brand-grey-dimmed; &:first-child { flex-basis: 100%; @@ -25,21 +30,29 @@ } @media (min-width: $screen-sm) { + margin-bottom: 0; + span { + border-left: 1px solid $brand-grey-dimmed; + border-bottom: 0; + padding: $spacer; + &, &:first-child { flex: 1 1 auto; } + + &:first-child { + border-left: 0; + } } } } .map { @include breakoutviewport; + @include media-frame; - border-radius: $border-radius; overflow: hidden; - margin-top: $spacer / 2; - border: 1px solid $brand-grey-dimmed; height: 160px; } diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index e240910b..c84ed71d 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -84,7 +84,7 @@ @mixin divider() { position: relative; - border-bottom: 1px dashed lighten($brand-grey-light, 7%); + border-bottom: 1px dashed lighten($brand-grey-light, 20%); margin-top: $spacer * $line-height; margin-bottom: $spacer * $line-height; @@ -101,7 +101,7 @@ @mixin divider-top() { position: relative; - border-top: 1px dashed lighten($brand-grey-light, 7%); + border-top: 1px dashed lighten($brand-grey-light, 20%); margin-top: $spacer * $line-height; margin-bottom: $spacer * $line-height; From e77b33d6a6c2cfbd0432905df040b8d497bcab5b Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 16 Sep 2018 15:08:52 +0200 Subject: [PATCH 074/100] page template --- src/pages/404.jsx | 15 ++++++++------- src/pages/404.module.scss | 1 + src/pages/goodies.jsx | 9 ++++----- src/pages/goodies.module.scss | 5 ----- src/pages/photos.jsx | 9 ++++----- src/pages/photos.module.scss | 5 ----- src/templates/Page.jsx | 22 ++++++++++++++++++++++ src/templates/Page.module.scss | 6 ++++++ 8 files changed, 45 insertions(+), 27 deletions(-) create mode 100644 src/templates/Page.jsx create mode 100644 src/templates/Page.module.scss diff --git a/src/pages/404.jsx b/src/pages/404.jsx index 04eb5d97..f6c05830 100644 --- a/src/pages/404.jsx +++ b/src/pages/404.jsx @@ -1,20 +1,21 @@ import React from 'react' import PropTypes from 'prop-types' import { Link } from 'gatsby' -import Layout from '../components/Layout' +import Page from '../templates/Page' import styles from './404.module.scss' -const NotFound = ({ location }) => ( - +const NotFound = () => ( +
    -

    I am sorry Dave,

    -

    I am afraid I can not do that.

    - + {/* eslint-disable-next-line quotes */} +

    {"I'm sorry Dave"}

    {' '} + {/* eslint-disable-next-line quotes */} +

    {"I'm afraid I can't do that"}

    Back to homepage
    - + ) NotFound.propTypes = { diff --git a/src/pages/404.module.scss b/src/pages/404.module.scss index 2de7984d..af5d4245 100644 --- a/src/pages/404.module.scss +++ b/src/pages/404.module.scss @@ -2,6 +2,7 @@ .wrapper { text-align: center; + margin-bottom: $spacer * 4; } .title { diff --git a/src/pages/goodies.jsx b/src/pages/goodies.jsx index f55e49af..f45f0f9b 100644 --- a/src/pages/goodies.jsx +++ b/src/pages/goodies.jsx @@ -1,12 +1,12 @@ import React from 'react' import PropTypes from 'prop-types' import { graphql, Link } from 'gatsby' -import Layout from '../components/Layout' import Image from '../components/atoms/Image' +import Page from '../templates/Page' import styles from './goodies.module.scss' -const Goodies = ({ data, location }) => { +const Goodies = ({ data }) => { const edges = data.goodies.edges const GoodiesThumbs = edges.map(({ node }) => { @@ -28,10 +28,9 @@ const Goodies = ({ data, location }) => { }) return ( - -

    Goodies

    +
    {GoodiesThumbs}
    -     + ) } diff --git a/src/pages/goodies.module.scss b/src/pages/goodies.module.scss index 2ceb4069..99099531 100644 --- a/src/pages/goodies.module.scss +++ b/src/pages/goodies.module.scss @@ -15,11 +15,6 @@ } } -.pageTitle { - composes: archiveTitle from '../templates/Posts.module.scss'; - margin-bottom: $spacer * 2; -} - .title { font-size: $font-size-h3; color: $brand-grey; diff --git a/src/pages/photos.jsx b/src/pages/photos.jsx index 11af1766..c92ad9af 100644 --- a/src/pages/photos.jsx +++ b/src/pages/photos.jsx @@ -1,12 +1,12 @@ import React from 'react' import PropTypes from 'prop-types' import { graphql, Link } from 'gatsby' -import Layout from '../components/Layout' import Image from '../components/atoms/Image' +import Page from '../templates/Page' import styles from './photos.module.scss' -const Photos = ({ data, location }) => { +const Photos = ({ data }) => { const edges = data.photos.edges const PhotoThumbs = edges.map(({ node }) => { @@ -25,10 +25,9 @@ const Photos = ({ data, location }) => { }) return ( - -

    Photos

    +
    {PhotoThumbs}
    -     + ) } diff --git a/src/pages/photos.module.scss b/src/pages/photos.module.scss index 0b0ae1e4..60346609 100644 --- a/src/pages/photos.module.scss +++ b/src/pages/photos.module.scss @@ -17,8 +17,3 @@ display: block; } } - -.pageTitle { - composes: archiveTitle from '../templates/Posts.module.scss'; - margin-bottom: $spacer * 2; -} diff --git a/src/templates/Page.jsx b/src/templates/Page.jsx new file mode 100644 index 00000000..311daab2 --- /dev/null +++ b/src/templates/Page.jsx @@ -0,0 +1,22 @@ +import React from 'react' +import PropTypes from 'prop-types' +import Layout from '../components/Layout' + +import styles from './Page.module.scss' + +const Page = ({ title, location, children }) => { + return ( + +

    {title}

    + {children} +     + ) +} + +Page.propTypes = { + location: PropTypes.object, + children: PropTypes.any.isRequired, + title: PropTypes.string.isRequired +} + +export default Page diff --git a/src/templates/Page.module.scss b/src/templates/Page.module.scss new file mode 100644 index 00000000..94fd577b --- /dev/null +++ b/src/templates/Page.module.scss @@ -0,0 +1,6 @@ +@import 'variables'; + +.pageTitle { + composes: archiveTitle from '../templates/Posts.module.scss'; + margin-bottom: $spacer * 2; +} From a7da995680344616f7624a410efd4b4bd78e6243 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 16 Sep 2018 15:39:31 +0200 Subject: [PATCH 075/100] PostImage component --- src/components/atoms/Image.jsx | 4 +- src/components/atoms/Image.module.scss | 5 ++ src/components/atoms/PostImage.jsx | 26 ++++++++++ src/components/atoms/PostImage.module.scss | 60 ++++++++++++++++++++++ src/pages/goodies.jsx | 6 +-- src/templates/Post.jsx | 8 +-- src/templates/Post.module.scss | 26 ---------- src/templates/Posts.jsx | 13 +++-- src/templates/Posts.module.scss | 39 -------------- 9 files changed, 103 insertions(+), 84 deletions(-) create mode 100644 src/components/atoms/PostImage.jsx create mode 100644 src/components/atoms/PostImage.module.scss diff --git a/src/components/atoms/Image.jsx b/src/components/atoms/Image.jsx index 80686bc1..3db63015 100644 --- a/src/components/atoms/Image.jsx +++ b/src/components/atoms/Image.jsx @@ -18,10 +18,10 @@ const Image = ({ fluid, fixed, alt }) => ( Image.propTypes = { fluid: PropTypes.object, fixed: PropTypes.object, - alt: PropTypes.string + alt: PropTypes.string.isRequired } -export const projectImage = graphql` +export const imageSizeDefault = graphql` fragment ImageFluid on ImageSharp { fluid(maxWidth: 940, quality: 85) { ...GatsbyImageSharpFluid_withWebp_noBase64 diff --git a/src/components/atoms/Image.module.scss b/src/components/atoms/Image.module.scss index e39de2ae..f1062ffa 100644 --- a/src/components/atoms/Image.module.scss +++ b/src/components/atoms/Image.module.scss @@ -13,6 +13,7 @@ margin-left: auto; margin-right: auto; + margin-bottom: $spacer; display: block; @media (min-width: 940px) { @@ -20,4 +21,8 @@ border-radius: .25rem; overflow: hidden; } + + a:hover & { + border-color: $link-color !important; + } } diff --git a/src/components/atoms/PostImage.jsx b/src/components/atoms/PostImage.jsx new file mode 100644 index 00000000..4232c0d0 --- /dev/null +++ b/src/components/atoms/PostImage.jsx @@ -0,0 +1,26 @@ +import React from 'react' +import PropTypes from 'prop-types' +import Image from './Image' +import styles from './PostImage.module.scss' + +const PostImage = ({ title, fluid, fixed, alt }) => ( +
    + {alt} + {title && ( +
    {title}
    + )} +
    +) + +PostImage.propTypes = { + fluid: PropTypes.object, + fixed: PropTypes.object, + alt: PropTypes.string.isRequired, + title: PropTypes.string +} + +export default PostImage diff --git a/src/components/atoms/PostImage.module.scss b/src/components/atoms/PostImage.module.scss new file mode 100644 index 00000000..4bd818f0 --- /dev/null +++ b/src/components/atoms/PostImage.module.scss @@ -0,0 +1,60 @@ +@import 'variables'; +@import 'mixins'; + +.postImageTitle { + transition: .1s ease-out; + font-size: $font-size-h3; + font-family: $font-family-headings; + line-height: $line-height-headings; + font-weight: $font-weight-headings; + letter-spacing: -.02em; + margin: 0; + position: absolute; + top: 10%; + padding: $spacer / 3 $spacer; + background: rgba($link-color, .85); + color: #fff; + text-shadow: 0 1px 0 #000; + left: 0; + opacity: 0; + transform: translate3d(0, -20px, 0); +} + +.postImage { + @include breakoutviewport(); + + max-width: none; + display: block; + margin-top: $spacer * 1.5; + margin-bottom: $spacer * 1.5; + + > div { + @include media-frame(); + + border-radius: 0; + + @media (min-width: $screen-sm) { + border-radius: $border-radius; + } + } + + a & { + position: relative; + display: block; + } + + a:hover & { + > div { + border-color: $link-color !important; + } + + .postImageTitle { + opacity: 1; + transform: translate3d(0, 0, 0); + } + } + + img { + border-radius: 0; + } +} diff --git a/src/pages/goodies.jsx b/src/pages/goodies.jsx index f45f0f9b..c59704cc 100644 --- a/src/pages/goodies.jsx +++ b/src/pages/goodies.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import { graphql, Link } from 'gatsby' -import Image from '../components/atoms/Image' +import PostImage from '../components/atoms/PostImage' import Page from '../templates/Page' import styles from './goodies.module.scss' @@ -18,9 +18,7 @@ const Goodies = ({ data }) => { {image && (

    {title}

    -
    - {title} -
    + )}
    diff --git a/src/templates/Post.jsx b/src/templates/Post.jsx index 08fd4333..487df9d1 100644 --- a/src/templates/Post.jsx +++ b/src/templates/Post.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import Helmet from 'react-helmet' import { graphql } from 'gatsby' import Layout from '../components/Layout' -import Image from '../components/atoms/Image' +import PostImage from '../components/atoms/PostImage' import PostTitle from '../components/atoms/PostTitle' import PostLead from '../components/atoms/PostLead' import PostContent from '../components/atoms/PostContent' @@ -28,11 +28,7 @@ const Post = ({ data, location }) => { - {image && ( -
    - {title} -
    - )} + {image && } {image && image.fields && } diff --git a/src/templates/Post.module.scss b/src/templates/Post.module.scss index c66e1e4e..55ce5096 100644 --- a/src/templates/Post.module.scss +++ b/src/templates/Post.module.scss @@ -6,29 +6,3 @@ padding-top: $spacer; padding-bottom: $spacer * 3; } - -// Post/photo teaser -///////////////////////////////////// - -.hentryImage { - @include breakoutviewport(); - - max-width: none; - display: block; - margin-top: $spacer * 1.5; - margin-bottom: $spacer * 1.5; - - > div { - @include media-frame(); - - border-radius: 0; - - @media (min-width: $screen-sm) { - border-radius: $border-radius; - } - } - - img { - border-radius: 0; - } -} diff --git a/src/templates/Posts.jsx b/src/templates/Posts.jsx index d9aee64c..b1103037 100644 --- a/src/templates/Posts.jsx +++ b/src/templates/Posts.jsx @@ -2,7 +2,7 @@ import React, { Fragment } from 'react' import PropTypes from 'prop-types' import { Link, graphql } from 'gatsby' import Layout from '../components/Layout' -import Image from '../components/atoms/Image' +import PostImage from '../components/atoms/PostImage' import PostTitle from '../components/atoms/PostTitle' import PostLead from '../components/atoms/PostLead' import PostContent from '../components/atoms/PostContent' @@ -29,12 +29,11 @@ const Posts = ({ data, location, pageContext }) => { {image && (
    - {title} - {type === 'photo' && ( -
    - {title} -
    - )} +
    )} diff --git a/src/templates/Posts.module.scss b/src/templates/Posts.module.scss index 13baf887..c75f4677 100644 --- a/src/templates/Posts.module.scss +++ b/src/templates/Posts.module.scss @@ -17,45 +17,6 @@ } } -.hentryImageTitle { - transition: .1s ease-out; - font-size: $font-size-h3; - font-family: $font-family-headings; - line-height: $line-height-headings; - font-weight: $font-weight-headings; - letter-spacing: -.02em; - margin: 0; - position: absolute; - top: 10%; - padding: $spacer / 3 $spacer; - background: rgba($link-color, .85); - color: #fff; - text-shadow: 0 1px 0 #000; - left: 0; - opacity: 0; - transform: translate3d(0, -20px, 0); -} - -.hentryImage { - composes: hentryImage from './Post.module.scss'; - - a { - position: relative; - display: block; - - &:hover { - > div { - border-color: $link-color !important; - } - - .hentryImageTitle { - opacity: 1; - transform: translate3d(0, 0, 0); - } - } - } -} - .archiveTitle { @include heading-band(); From 4e5a99fc703ea9fa25dc7cd228f863777f2d2674 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 16 Sep 2018 15:45:06 +0200 Subject: [PATCH 076/100] more page template simplification --- src/pages/goodies.jsx | 6 +----- src/pages/photos.jsx | 4 ++-- src/templates/Page.jsx | 9 +++++---- 3 files changed, 8 insertions(+), 11 deletions(-) diff --git a/src/pages/goodies.jsx b/src/pages/goodies.jsx index c59704cc..044a49ff 100644 --- a/src/pages/goodies.jsx +++ b/src/pages/goodies.jsx @@ -25,11 +25,7 @@ const Goodies = ({ data }) => { ) }) - return ( - -
    {GoodiesThumbs}
    -     - ) + return {GoodiesThumbs} } Goodies.propTypes = { diff --git a/src/pages/photos.jsx b/src/pages/photos.jsx index c92ad9af..a97214f9 100644 --- a/src/pages/photos.jsx +++ b/src/pages/photos.jsx @@ -25,8 +25,8 @@ const Photos = ({ data }) => { }) return ( - -
    {PhotoThumbs}
    + + {PhotoThumbs} ) } diff --git a/src/templates/Page.jsx b/src/templates/Page.jsx index 311daab2..d0395275 100644 --- a/src/templates/Page.jsx +++ b/src/templates/Page.jsx @@ -4,19 +4,20 @@ import Layout from '../components/Layout' import styles from './Page.module.scss' -const Page = ({ title, location, children }) => { +const Page = ({ title, location, section, children }) => { return (

    {title}

    - {children} + {section ?
    {children}
    : children}     ) } Page.propTypes = { - location: PropTypes.object, + title: PropTypes.string.isRequired, children: PropTypes.any.isRequired, - title: PropTypes.string.isRequired + section: PropTypes.object, + location: PropTypes.object } export default Page From 01b51b8b1a11241f42033b8235b3d8e256c61d20 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 18 Sep 2018 11:10:36 +0200 Subject: [PATCH 077/100] =?UTF-8?q?gatsby=20v2=20stable=20=F0=9F=8E=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 44 ++++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index f690246f..5e161850 100644 --- a/package.json +++ b/package.json @@ -25,28 +25,28 @@ "dms2dec": "^1.1.0", "fast-exif": "^1.0.1", "fraction.js": "^4.0.9", - "gatsby": "^2.0.0-rc.25", - "gatsby-awesome-pagination": "^0.1.1", - "gatsby-image": "^2.0.0-rc.2", - "gatsby-plugin-catch-links": "^2.0.2-rc.1", - "gatsby-plugin-feed": "^1.3.25", - "gatsby-plugin-lunr": "^1.1.0", + "gatsby": "^2.0.0", + "gatsby-awesome-pagination": "^0.2.1", + "gatsby-image": "^2.0.5", + "gatsby-plugin-catch-links": "^2.0.2", + "gatsby-plugin-feed": "^2.0.5", + "gatsby-plugin-lunr": "^1.2.0", "gatsby-plugin-matomo": "^0.5.0", "gatsby-plugin-meta-redirect": "^1.1.0", - "gatsby-plugin-react-helmet": "^3.0.0-rc.1", - "gatsby-plugin-sass": "^2.0.0-rc.2", - "gatsby-plugin-sharp": "^2.0.0-rc.7", - "gatsby-plugin-sitemap": "^2.0.0-rc.2", - "gatsby-redirect-from": "0.1.0", - "gatsby-remark-autolink-headers": "^2.0.0-rc.2", - "gatsby-remark-copy-linked-files": "^2.0.0-rc.5", - "gatsby-remark-images": "^2.0.1-rc.5", - "gatsby-remark-prismjs": "^3.0.0-rc.2", - "gatsby-remark-smartypants": "^2.0.0-rc.1", - "gatsby-source-filesystem": "^2.0.1-rc.6", - "gatsby-transformer-remark": "^2.1.1-rc.5", - "gatsby-transformer-sharp": "^2.1.1-rc.3", - "gatsby-transformer-yaml": "^2.1.1-rc.6", + "gatsby-plugin-react-helmet": "^3.0.0", + "gatsby-plugin-sass": "^2.0.1", + "gatsby-plugin-sharp": "^2.0.5", + "gatsby-plugin-sitemap": "^2.0.1", + "gatsby-redirect-from": "^0.1.1", + "gatsby-remark-autolink-headers": "^2.0.5", + "gatsby-remark-copy-linked-files": "^2.0.5", + "gatsby-remark-images": "^2.0.1", + "gatsby-remark-prismjs": "^3.0.0", + "gatsby-remark-smartypants": "^2.0.5", + "gatsby-source-filesystem": "^2.0.1", + "gatsby-transformer-remark": "^2.1.1", + "gatsby-transformer-sharp": "^2.1.1", + "gatsby-transformer-yaml": "^2.1.1", "graphql": "^0.13.2", "intersection-observer": "^0.5.0", "node-sass": "^4.9.3", @@ -55,7 +55,7 @@ "pigeon-marker": "^0.3.4", "prismjs": "^1.15.0", "react": "^16.5.1", - "react-clipboard.js": "^2.0.0", + "react-clipboard.js": "^2.0.1", "react-dom": "^16.5.1", "react-helmet": "^5.2.0", "react-modal": "^3.5.1", @@ -65,7 +65,7 @@ "slugify": "^1.3.1" }, "devDependencies": { - "@svgr/cli": "^2.3.0", + "@svgr/cli": "^2.4.1", "babel-eslint": "^9.0.0", "eslint": "^5.6.0", "eslint-config-prettier": "^3.0.1", From fd89b12d4a9971adc913ccd9a9b9f7f9718ce250 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 23 Sep 2018 22:42:59 +0200 Subject: [PATCH 078/100] package updates --- package.json | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 5e161850..e6c5fee6 100644 --- a/package.json +++ b/package.json @@ -25,9 +25,9 @@ "dms2dec": "^1.1.0", "fast-exif": "^1.0.1", "fraction.js": "^4.0.9", - "gatsby": "^2.0.0", + "gatsby": "^2.0.7", "gatsby-awesome-pagination": "^0.2.1", - "gatsby-image": "^2.0.5", + "gatsby-image": "^2.0.8", "gatsby-plugin-catch-links": "^2.0.2", "gatsby-plugin-feed": "^2.0.5", "gatsby-plugin-lunr": "^1.2.0", @@ -38,13 +38,13 @@ "gatsby-plugin-sharp": "^2.0.5", "gatsby-plugin-sitemap": "^2.0.1", "gatsby-redirect-from": "^0.1.1", - "gatsby-remark-autolink-headers": "^2.0.5", + "gatsby-remark-autolink-headers": "^2.0.6", "gatsby-remark-copy-linked-files": "^2.0.5", "gatsby-remark-images": "^2.0.1", "gatsby-remark-prismjs": "^3.0.0", "gatsby-remark-smartypants": "^2.0.5", "gatsby-source-filesystem": "^2.0.1", - "gatsby-transformer-remark": "^2.1.1", + "gatsby-transformer-remark": "^2.1.3", "gatsby-transformer-sharp": "^2.1.1", "gatsby-transformer-yaml": "^2.1.1", "graphql": "^0.13.2", @@ -54,9 +54,9 @@ "pigeon-maps": "^0.10.4", "pigeon-marker": "^0.3.4", "prismjs": "^1.15.0", - "react": "^16.5.1", + "react": "^16.5.2", "react-clipboard.js": "^2.0.1", - "react-dom": "^16.5.1", + "react-dom": "^16.5.2", "react-helmet": "^5.2.0", "react-modal": "^3.5.1", "react-qr-svg": "^2.1.0", @@ -68,12 +68,12 @@ "@svgr/cli": "^2.4.1", "babel-eslint": "^9.0.0", "eslint": "^5.6.0", - "eslint-config-prettier": "^3.0.1", - "eslint-loader": "^2.1.0", + "eslint-config-prettier": "^3.1.0", + "eslint-loader": "^2.1.1", "eslint-plugin-graphql": "^2.1.1", "eslint-plugin-prettier": "^2.6.2", "eslint-plugin-react": "^7.11.1", - "prettier": "^1.14.2", + "prettier": "^1.14.3", "prettier-stylelint": "^0.4.2", "stylelint": "^9.5.0", "stylelint-config-css-modules": "^1.3.0", From 8cadf6df4a6b2882c6aa044861e5c6b05c9299d9 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 23 Sep 2018 23:03:56 +0200 Subject: [PATCH 079/100] small fixes --- src/components/atoms/SearchResults.module.scss | 5 +++++ src/components/molecules/Search.module.scss | 4 ++-- src/images/{google+.svg => googleplus.svg} | 0 src/pages/photos.module.scss | 7 +++++++ 4 files changed, 14 insertions(+), 2 deletions(-) rename src/images/{google+.svg => googleplus.svg} (100%) diff --git a/src/components/atoms/SearchResults.module.scss b/src/components/atoms/SearchResults.module.scss index e32e90b0..c26802bf 100644 --- a/src/components/atoms/SearchResults.module.scss +++ b/src/components/atoms/SearchResults.module.scss @@ -15,6 +15,11 @@ margin-top: $spacer; + li { + margin-left: $spacer; + margin-right: $spacer; + } + li::before { top: $spacer / 7; } diff --git a/src/components/molecules/Search.module.scss b/src/components/molecules/Search.module.scss index 74e2792e..aacdff2c 100644 --- a/src/components/molecules/Search.module.scss +++ b/src/components/molecules/Search.module.scss @@ -25,7 +25,7 @@ &.appearActive, &.enterActive { opacity: 1; - transition: 200ms cubic-bezier(.4, 1.72, .61, .7); + transition: .2s ease-out; transform: translate3d(0, 0, 0); } } @@ -36,7 +36,7 @@ &.exitActive { opacity: .01; - transition: 200ms ease-in; + transition: .2s ease-in; transform: translate3d(0, -100px, 0); } } diff --git a/src/images/google+.svg b/src/images/googleplus.svg similarity index 100% rename from src/images/google+.svg rename to src/images/googleplus.svg diff --git a/src/pages/photos.module.scss b/src/pages/photos.module.scss index 60346609..4bffb426 100644 --- a/src/pages/photos.module.scss +++ b/src/pages/photos.module.scss @@ -7,6 +7,13 @@ display: flex; flex-wrap: wrap; justify-content: space-between; + padding-left: $spacer; + padding-right: $spacer; + + @media (min-width: $screen-md) { + padding-left: 0; + padding-right: 0; + } } .photo { From 875fcc304ff8adfdcb3214d6497dea52c13e2fa0 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 24 Sep 2018 01:09:50 +0200 Subject: [PATCH 080/100] add markdownlint --- .markdownlint.json | 8 +++++ ...lever-text-effects-with-css-text-shadow.md | 2 +- .../index.md | 7 ++++- gatsby-browser.js | 10 +++---- package.json | 10 +++++-- scripts/.babelrc | 3 ++ scripts/new.js | 30 +++++++++++++++++++ scripts/new.md | 13 ++++++++ 8 files changed, 73 insertions(+), 10 deletions(-) create mode 100644 .markdownlint.json create mode 100644 scripts/.babelrc create mode 100644 scripts/new.js create mode 100644 scripts/new.md diff --git a/.markdownlint.json b/.markdownlint.json new file mode 100644 index 00000000..ca4fcadb --- /dev/null +++ b/.markdownlint.json @@ -0,0 +1,8 @@ +{ + "default": true, + "line_length": false, + "no-inline-html": false, + "fenced-code-language": false, + "first-line-h1": false, + "first-heading-h1": false +} diff --git a/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md b/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md index 1989e835..8a61d857 100644 --- a/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md +++ b/content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md @@ -6,7 +6,7 @@ author: Matthias Kretschmann date: "2008-04-17 01:32:13+00:00" -category: +category: tags: - design - css diff --git a/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md index f0a8b318..8cb443a4 100644 --- a/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md +++ b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md @@ -31,7 +31,6 @@ They are completely styled with CSS3 so they're sharp on all screens no matter h ## Usage - ### CSS Just drop in the `kbdftw.css` in your `head`: @@ -62,6 +61,7 @@ The default styling are light keys with Lucida Grande as font: ```html Q ``` + becomes Q Add a dark class to get the dark keys: @@ -69,6 +69,7 @@ Add a dark class to get the dark keys: ```html Q ``` + becomes Q Adding an ios or android class gives a replica of those system keys. Android uses three different colors on the default keyboard. @@ -76,21 +77,25 @@ Adding an ios or android class gives a replica of those system keys. Android use ```html Q ``` + becomes Q ```html Q ``` + becomes Q ```html Q ``` + becomes Q ```html Q ``` + becomes Q I've let the default `display: inline` intact so all padding on the `kbd` elements won't affect the line-height of the surrounding text. This leads to problems when you want to use them over multiple lines so just make them `display: inline-block` in this scenario. diff --git a/gatsby-browser.js b/gatsby-browser.js index 78851ef5..80bfcec0 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,8 +1,6 @@ -require('./src/styles/global.scss') +import './src/styles/global.scss' -exports.onClientEntry = () => { - // IntersectionObserver polyfill for gatsby-image (Safari, IE) - if (typeof window.IntersectionObserver === 'undefined') { - require('intersection-observer') - } +// IntersectionObserver polyfill for gatsby-image (Safari, IE) +if (typeof window.IntersectionObserver === 'undefined') { + import('intersection-observer') } diff --git a/package.json b/package.json index e6c5fee6..1b9eb159 100644 --- a/package.json +++ b/package.json @@ -13,10 +13,12 @@ "format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'", "lint:js": "eslint ./gatsby-*.js && eslint ./src/**/*.jsx", "lint:css": "stylelint ./src/**/*.{css,scss}", - "lint": "npm run svg && npm run lint:js && npm run lint:css", + "lint:md": "markdownlint ./content/posts/**/*.md && markdownlint ./README.md", + "lint": "npm run svg && npm run lint:md && npm run lint:js && npm run lint:css", "test": "npm run lint", "deploy": "./scripts/deploy.sh", - "svg": "./scripts/svg.sh" + "svg": "./scripts/svg.sh", + "new": "babel-node ./scripts/new.js" }, "browserslist": [ "last 3 versions" @@ -65,6 +67,8 @@ "slugify": "^1.3.1" }, "devDependencies": { + "@babel/node": "^7.0.0", + "@babel/preset-env": "^7.1.0", "@svgr/cli": "^2.4.1", "babel-eslint": "^9.0.0", "eslint": "^5.6.0", @@ -73,6 +77,8 @@ "eslint-plugin-graphql": "^2.1.1", "eslint-plugin-prettier": "^2.6.2", "eslint-plugin-react": "^7.11.1", + "markdownlint": "^0.11.0", + "markdownlint-cli": "^0.13.0", "prettier": "^1.14.3", "prettier-stylelint": "^0.4.2", "stylelint": "^9.5.0", diff --git a/scripts/.babelrc b/scripts/.babelrc new file mode 100644 index 00000000..0ef5ffc2 --- /dev/null +++ b/scripts/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/env"] +} diff --git a/scripts/new.js b/scripts/new.js new file mode 100644 index 00000000..3bd4079c --- /dev/null +++ b/scripts/new.js @@ -0,0 +1,30 @@ +import fs from 'fs' +import path from 'path' +import prepend from 'prepend' +import slugify from 'slugify' +import ora from 'ora' + +const templatePath = path.join(__dirname, 'new.md') +const template = fs.readFileSync(templatePath).toString() + +const spinner = ora('Adding new project').start() + +if (!process.argv[2]) { + spinner.fail('Use the format `npm run new -- Title of post`') +} + +const title = process.argv[2] +spinner.text = `Adding '${title}'.` + +const titleSlug = slugify(title, { lower: true }) +const postsPath = path.join(__dirname, 'content', 'posts') +const newContents = template + .split('TITLE') + .join(title) + .split('DATE') + .join(Date.now()) + +// prepend(projects, newContents, error => { +// if (error) spinner.fail(error) +// spinner.succeed(`Added '${title}' to top of projects.yml file.`) +// }) diff --git a/scripts/new.md b/scripts/new.md new file mode 100644 index 00000000..c4d993ed --- /dev/null +++ b/scripts/new.md @@ -0,0 +1,13 @@ +--- +type: post + +title: TITLE +author: Matthias Kretschmann + +date: DATE + +tags: + - tag +--- + +Beep Boop. From bf25fe9ad5e9416d2e17f7a8957761f7c1e4be33 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 24 Sep 2018 21:03:27 +0200 Subject: [PATCH 081/100] post fixes --- ...canon-canoscan-lide-500f-for-intel-macs.md | 1 - ...s-on-a-mac-for-htaccess-protected-sites.md | 1 - ...guide-to-icons-how-to-smashing-magazine.md | 3 +- ...ing-the-image-icons-in-mac-os-x-leopard.md | 1 - ...anoscan-lide-500f-with-mac-os-x-leopard.md | 1 - ...can-images-directly-into-apple-aperture.md | 1 - .../2008-06-11-safari-4-developer-preview.md | 3 +- ...mac-file-server-and-time-machine-volume.md | 78 +++++++++---------- ...reate-a-mobile-encrypted-aperture-vault.md | 1 - ...rchitect-and-facade-theming-for-leopard.md | 3 +- content/posts/2009-06-24-adiumeetie.md | 3 +- ...2015-08-02-simple-tor-setup-on-mac-os-x.md | 1 - src/styles/_alerts.scss | 6 +- src/styles/_code.scss | 3 +- src/styles/_content.scss | 12 --- src/styles/global.scss | 1 - 16 files changed, 49 insertions(+), 70 deletions(-) delete mode 100644 src/styles/_content.scss diff --git a/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md b/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md index 6399ec99..ede51b9a 100644 --- a/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md +++ b/content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md @@ -7,7 +7,6 @@ date: 2007-06-11 18:44:28+00:00 tags: - photography - tutorial -- osx - macos redirect_from: diff --git a/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md b/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md index d7d8b061..ee1b6a0a 100644 --- a/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md +++ b/content/posts/2008-02-26-how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites.md @@ -11,7 +11,6 @@ category: tags: - design - tutorial -- osx - macos coinhive: true diff --git a/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md b/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md index 25315ce3..4947abbe 100644 --- a/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md +++ b/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md @@ -6,10 +6,9 @@ linkurl: http://www.smashingmagazine.com/2008/04/04/mac-os-x-leopard-designers-g author: Matthias Kretschmann date: 2008-04-04 10:47:23+00:00 - + tags: - design - - osx - macos - icon --- diff --git a/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md b/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md index 95e09205..338577c8 100644 --- a/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md +++ b/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md @@ -10,7 +10,6 @@ coinhive: true tags: - design - tutorial - - osx - macos - icon --- diff --git a/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md b/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md index 3bc6348f..0c26c46f 100644 --- a/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md +++ b/content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md @@ -11,7 +11,6 @@ coinhive: true tags: - photography - tutorial - - osx - macos --- diff --git a/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md b/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md index ff386eed..0087aa5a 100644 --- a/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md +++ b/content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md @@ -12,7 +12,6 @@ tags: - photography - aperture - tutorial - - osx - macos --- diff --git a/content/posts/2008-06-11-safari-4-developer-preview.md b/content/posts/2008-06-11-safari-4-developer-preview.md index f48c21a9..b3efb34d 100644 --- a/content/posts/2008-06-11-safari-4-developer-preview.md +++ b/content/posts/2008-06-11-safari-4-developer-preview.md @@ -6,10 +6,9 @@ author: Matthias Kretschmann date: 2008-06-11 10:37:07+00:00 -category: +category: tags: - design - - osx - macos - css --- diff --git a/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md b/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md index 1223e8ce..24b63a4a 100644 --- a/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md +++ b/content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md @@ -11,7 +11,6 @@ updated: 2016-06-12 14:29:11+00:00 tags: - design - tutorial - - osx - macos - ubuntu @@ -39,15 +38,15 @@ Personally I use a fresh installation of Ubuntu 8.04 Hardy Heron Desktop version Here are the steps involved in setting up your Ubuntu box as a Mac file server: -1. Modify and install Netatalk (Open Source AFP implementation) -2. Configure Netatalk -3. Configure shared volumes (and Time Machine volume) -4. Install Avahi (Open Source Bonjour implementation) -5. Configure Avahi and advertise services -6. Configure TimeMachine -7. Conclusion, Problems and more informations -8. Downloading and using the Server Display Icons -9. Translations Of This Article +- [1. Modify and install Netatalk](#1-modify-and-install-netatalk) +- [2. Configure Netatalk](#2-configure-netatalk) +- [3. Configure shared Volumes](#3-configure-shared-volumes) +- [4. Install Avahi](#4-install-avahi) +- [5. Configure Avahi and advertise services](#5-configure-avahi-and-advertise-services) +- [6. Configure Time Machine](#6-configure-time-machine) +- [7. Conclusion, Problems and more informations](#7-conclusion-problems-and-more-informations) +- [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 @@ -61,7 +60,7 @@ Alessandro has built [a nice .deb package for i386 machines](http://dl.getdropbo Now fire up your Terminal under Applications > Accessories and execute the following lines (separately). You have to type Y for yes when Terminal asks you if it should continue: -```shell +```bash sudo apt-get build-dep netatalk sudo apt-get install cracklib2-dev fakeroot libssl-dev sudo apt-get source netatalk @@ -72,7 +71,7 @@ Now you have downloaded the source code of Netatalk to your home folder, install Next you have to build the Netatalk package with the encryption option enabled: -```shell +```bash sudo DEB_BUILD_OPTIONS=ssl dpkg-buildpackage -rfakeroot ``` @@ -82,13 +81,13 @@ Depending on your hardware this may take a while but you can enjoy the geeky bui If everything went through without errors (except the signing warnings, can be ignored) you can install the recently created package: -```shell +```bash sudo dpkg -i ~/netatalk_2*.deb ``` To stop Ubuntu from overwriting your custom Netatalk package you should set its state to hold. This will cause the Netatalk package being grayed out in the Software Update dialogue: -```shell +```bash echo "netatalk hold" | sudo dpkg --set-selections ``` @@ -98,7 +97,7 @@ Now you have successfully build and installed your custom Netatalk package which ![Netatalk icon](../media/netatalk.png)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: -```shell +```bash sudo vi /etc/default/netatalk ``` @@ -117,7 +116,7 @@ Here it's very important to run the cnid_meta daemon because this service will h Press Ctrl + S to save the document or choose File > Save. Next we have to edit the main config file for AFP sharing called afpd.conf: -```shell +```bash sudo vi /etc/netatalk/afpd.conf ``` @@ -133,7 +132,7 @@ Press Ctrl + S to save the document or choose File > Save. ![Time Machine Volume icon](../media/timemachinedisk97.png)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: -```shell +```bash sudo vi /etc/netatalk/AppleVolumes.default ``` @@ -145,7 +144,7 @@ Scroll to the bottom of the document and define your Volume shares. By adding th Because we want to use the Ubuntu machine as a backup server for Time Machine you should define a second volume just for Time Machine. Create a new folder in your home directory first and name it TimeMachine (or anything you like). Then add the following line to your AppleVolumes.default. This is one line so be sure that there’s no line break in your AppleVolumes.default file: -```` +``` /home/username/TimeMachine TimeMachine allow:username1,username2 cnidscheme:cdb options:usedots,upriv ``` @@ -161,25 +160,24 @@ Press Ctrl + S to save the document or choose File > Save. Of course you can def Finally restart Netatalk to activate the changes: -```shell +```bash 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 ![Bonjour icon](../media/bonjour97.png)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: -```shell +```bash sudo apt-get install avahi-daemon sudo apt-get install libnss-mdns ``` To make everything work properly you have to edit the nsswitch.conf file: -```shell +```bash sudo vi /etc/nsswitch.conf ``` @@ -195,7 +193,7 @@ Press Ctrl + S to save the document or choose File > Save. ![Bonjour icon](../media/bonjour97.png)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: -```shell +```bash sudo vi /etc/avahi/services/afpd.service ``` @@ -222,7 +220,7 @@ update: The last part is used to assign a specific (Apple) hardware model to you Finally restart the avahi daemon to activate all changes: -```shell +```bash sudo /etc/init.d/avahi-daemon restart ``` @@ -244,7 +242,7 @@ update: If you've followed the revised version of this article your Linux box sh ![Time Machine icon](../media/timemachine97.png)**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): -```shell +```bash defaults write com.apple.systempreferences TMShowUnsupportedNetworkVolumes 1 ``` @@ -276,7 +274,7 @@ In short, you have to create the backup disk image on your Desktop and copy it t First open up the Console from your Applications > Utilities folder and open the Time Machine preferences. In Time Machine preferences set your backup volume back to none. After that reselect your mounted Time Machine volume. The counter should start and Time Machine's big button will change to on. When the backup tries to start and fail have a look at your Console (Click All Messages in the sidepane). There should be a line telling you the name of the disk image: -```shell +```bash Creating disk image /Volumes/TimeMachine/computername_0014e3856bd0.sparsebundle ``` @@ -301,26 +299,26 @@ In short you have to allow communications over port 548 and 5353. ## "Connection Failed" If you get one of those errors: -```` +``` Connection Failed - There was an error connection to the server. Check the server name or IP address and try again - ``` + or + +``` +There was an error connecting to the server. Check the server name or IP address and try again. If you are unable to resolve the problem contact your system administrator. ``` -There was an error connecting to the server. Check the server name or IP address and try again. If you are unable to resolve the problem contact your system administrator. - -```` you should first be sure you have either no firewall on your Ubuntu box in use or have it configured to allow AFP communications as suggested in the above paragraph. Remember that this error can be caused by a myriad of problems and just a lot of other configurations on your side. So you should try a minimal way: On my Ubuntu boxes I have no other file sharing protocol like samba or NFS enabled (even not installed) so the samba hostname and the AFP hostname can't interfere with each other. Also I've left the Workgroup field blank under System > Administration > Network > General tab. If you still can't connect to your Ubuntu box you can edit your /etc/hosts file as [I've pointed out in the comments](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-417): -```shell +```bash sudo vi /etc/hosts -```` +``` Add the following two lines at the very top of the file. @@ -339,9 +337,9 @@ But for those people still having problems with these error messages: On Mac OS ## -5014 error -Some people have problems when connecting to an AFP share and get a -5014 error. [As J5 pointed out in the comments](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-5021) you have to delete the hidden .AppleDB folders on your Ubuntu box and restart netatalk afterwards: +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: -```shell +```bash sudo /etc/init.d/netatalk restart ``` @@ -349,13 +347,13 @@ sudo /etc/init.d/netatalk restart 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/)): -```shell +```bash mount -t afp afp://username:password@hostname/ShareName /Volumes/ShareMount ``` Replace everything instead of /Volumes with your matching names. You can test if your network share was properly mounted by doing -```shell +```bash ls /Volumes ``` @@ -365,7 +363,7 @@ Now you can close the Terminal and select "Restore from Time Machine Backup" fro ## Netatalk backup disk reaching maximum capacity -As [Seron](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-15122) pointed out in the comments, 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." +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. @@ -393,7 +391,7 @@ Because I've just modified Apple's standard icons these icons are just available Download Server Display Icons zip

    -# 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 +415,7 @@ update: A solution for the icon problem is here: [Simon Wheatley figured out](ht ![Oh no!](../media/coffee-cup-empty.png) -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](http://www.kremalicious.com/feed/), discuss this article or buy me my next coffee. +Congratulations! You finally arrived at the end of my article. There's a good chance that your coffee or tea cup is now empty. But before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-Feed](/feed/), discuss this article or buy me my next coffee. # 9. Translations Of This Article diff --git a/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md b/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md index 96a52d78..eba3204c 100644 --- a/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md +++ b/content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md @@ -10,7 +10,6 @@ tags: - photography - aperture - tutorial - - osx - macos coinhive: true diff --git a/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md b/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md index 4a9a8f3d..62a65620 100644 --- a/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md +++ b/content/posts/2008-08-28-architect-and-facade-theming-for-leopard.md @@ -5,10 +5,9 @@ title: 'Architect and Façade: Theming For Leopard' author: Matthias Kretschmann date: 2008-08-28 09:54:06+00:00 - + tags: - design - - osx - macos --- diff --git a/content/posts/2009-06-24-adiumeetie.md b/content/posts/2009-06-24-adiumeetie.md index bdeb3601..fe50b99a 100644 --- a/content/posts/2009-06-24-adiumeetie.md +++ b/content/posts/2009-06-24-adiumeetie.md @@ -7,11 +7,10 @@ download: ../media/adiumeetie-by-kremalicious.zip author: Matthias Kretschmann date: 2009-06-24 21:00:38+00:00 - + tags: - goodies - icon - - osx - macos --- diff --git a/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md b/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md index 9aeb3779..d9a5c815 100644 --- a/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md +++ b/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x.md @@ -13,7 +13,6 @@ tags: - goodies - tutorial - tor - - osx - macos coinhive: true diff --git a/src/styles/_alerts.scss b/src/styles/_alerts.scss index e3b499a7..9e6a1548 100644 --- a/src/styles/_alerts.scss +++ b/src/styles/_alerts.scss @@ -1,12 +1,16 @@ @import 'variables'; .alert { - padding: $spacer; + padding: $spacer / 2; margin-bottom: $spacer; border-radius: $border-radius; border: 1px solid transparent; box-shadow: 0 1px 3px rgba($brand-grey, .1), inset 0 1px 0 #fff; + @media (min-width: $screen-sm) { + padding: $spacer; + } + > p, > ul { margin-bottom: 0; diff --git a/src/styles/_code.scss b/src/styles/_code.scss index b0f3a95b..abebbf2e 100644 --- a/src/styles/_code.scss +++ b/src/styles/_code.scss @@ -64,7 +64,8 @@ pre { } } -pre > code.language-shell { +pre > code.language-shell, +pre > code.language-bash { padding-left: $spacer / 2; display: block; diff --git a/src/styles/_content.scss b/src/styles/_content.scss deleted file mode 100644 index 9efdfab5..00000000 --- a/src/styles/_content.scss +++ /dev/null @@ -1,12 +0,0 @@ -// Goodies download -///////////////////////////////////// - -.goodie-actions { - text-align: center; - max-width: 640px; - - .btn { - margin-bottom: 0; - display: block; - } -} diff --git a/src/styles/global.scss b/src/styles/global.scss index f55417c2..5b3e04e0 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -312,4 +312,3 @@ hr { @import 'code'; @import 'buttons'; @import 'alerts'; -@import 'content'; From 6c8dc9855fc32bbb4dc1c5000e232dd0d7f8059a Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 24 Sep 2018 22:28:07 +0200 Subject: [PATCH 082/100] switch to gatsby-plugin-svgr --- gatsby-config.js | 6 ++++++ package.json | 8 ++++---- scripts/svg.sh | 12 ------------ src/components/atoms/PostActions.jsx | 4 ++-- src/components/atoms/PostLinkActions.jsx | 4 ++-- src/components/atoms/PostMore.jsx | 2 +- src/components/atoms/PostTitle.jsx | 2 +- src/components/atoms/SearchButton.jsx | 2 +- src/components/molecules/IconLinks.jsx | 10 +++++----- src/components/molecules/ModalThanks.jsx | 2 +- src/components/organisms/Footer.jsx | 4 ++-- 11 files changed, 25 insertions(+), 31 deletions(-) delete mode 100755 scripts/svg.sh diff --git a/gatsby-config.js b/gatsby-config.js index b4c84f78..eb917eef 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -78,6 +78,12 @@ module.exports = { includePaths: [`${__dirname}/node_modules`, `${__dirname}/src/styles`] } }, + { + resolve: 'gatsby-plugin-svgr', + options: { + icon: true + } + }, { resolve: 'gatsby-plugin-lunr', options: { diff --git a/package.json b/package.json index 1b9eb159..46cac1aa 100644 --- a/package.json +++ b/package.json @@ -7,14 +7,14 @@ "license": "MIT", "main": "index.js", "scripts": { - "start": "npm run svg && gatsby develop", - "build": "npm run svg && gatsby build", + "start": "gatsby develop", + "build": "gatsby build", "format": "prettier --write 'src/**/*.{js,jsx}'", "format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'", "lint:js": "eslint ./gatsby-*.js && eslint ./src/**/*.jsx", "lint:css": "stylelint ./src/**/*.{css,scss}", "lint:md": "markdownlint ./content/posts/**/*.md && markdownlint ./README.md", - "lint": "npm run svg && npm run lint:md && npm run lint:js && npm run lint:css", + "lint": "npm run lint:md && npm run lint:js && npm run lint:css", "test": "npm run lint", "deploy": "./scripts/deploy.sh", "svg": "./scripts/svg.sh", @@ -39,6 +39,7 @@ "gatsby-plugin-sass": "^2.0.1", "gatsby-plugin-sharp": "^2.0.5", "gatsby-plugin-sitemap": "^2.0.1", + "gatsby-plugin-svgr": "^2.0.0-alpha", "gatsby-redirect-from": "^0.1.1", "gatsby-remark-autolink-headers": "^2.0.6", "gatsby-remark-copy-linked-files": "^2.0.5", @@ -69,7 +70,6 @@ "devDependencies": { "@babel/node": "^7.0.0", "@babel/preset-env": "^7.1.0", - "@svgr/cli": "^2.4.1", "babel-eslint": "^9.0.0", "eslint": "^5.6.0", "eslint-config-prettier": "^3.1.0", diff --git a/scripts/svg.sh b/scripts/svg.sh deleted file mode 100755 index 4eb422a8..00000000 --- a/scripts/svg.sh +++ /dev/null @@ -1,12 +0,0 @@ -#!/usr/bin/env bash -set -e - -SRC='./src/images' -OUT='./src/components/svg' - -printf "Creating SVG components...\\n\\n" - -# Usage: svgr [-d out-dir] [src-dir] -./node_modules/@svgr/cli/bin/svgr --icon -d $OUT $SRC - -printf "\\n🎉 Successfully created SVG components\\n\\n" diff --git a/src/components/atoms/PostActions.jsx b/src/components/atoms/PostActions.jsx index 68bfa23f..c1f10b44 100644 --- a/src/components/atoms/PostActions.jsx +++ b/src/components/atoms/PostActions.jsx @@ -3,8 +3,8 @@ import PropTypes from 'prop-types' import ModalThanks from '../molecules/ModalThanks' import styles from './PostActions.module.scss' -import Twitter from '../svg/Twitter' -import Bitcoin from '../svg/Bitcoin' +import { ReactComponent as Twitter } from '../../images/twitter.svg' +import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg' export default class PostActions extends PureComponent { state = { diff --git a/src/components/atoms/PostLinkActions.jsx b/src/components/atoms/PostLinkActions.jsx index 55a1e077..9727af9a 100644 --- a/src/components/atoms/PostLinkActions.jsx +++ b/src/components/atoms/PostLinkActions.jsx @@ -1,8 +1,8 @@ import React from 'react' import PropTypes from 'prop-types' import { Link } from 'gatsby' -import Forward from '../svg/Forward' -import Infinity from '../svg/Infinity' +import { ReactComponent as Forward } from '../../images/forward.svg' +import { ReactComponent as Infinity } from '../../images/infinity.svg' import styles from './PostLinkActions.module.scss' import stylesPostMore from './PostMore.module.scss' diff --git a/src/components/atoms/PostMore.jsx b/src/components/atoms/PostMore.jsx index 730a3d60..8cc84ed6 100644 --- a/src/components/atoms/PostMore.jsx +++ b/src/components/atoms/PostMore.jsx @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { Link } from 'gatsby' import styles from './PostMore.module.scss' -import Caret from '../svg/ChevronRight' +import { ReactComponent as Caret } from '../../images/chevron-right.svg' const PostMore = ({ to, children }) => ( diff --git a/src/components/atoms/PostTitle.jsx b/src/components/atoms/PostTitle.jsx index 1185ddea..27d7a715 100644 --- a/src/components/atoms/PostTitle.jsx +++ b/src/components/atoms/PostTitle.jsx @@ -1,7 +1,7 @@ import React, { Fragment } from 'react' import PropTypes from 'prop-types' import { Link } from 'gatsby' -import Forward from '../svg/Forward' +import { ReactComponent as Forward } from '../../images/forward.svg' import styles from './PostTitle.module.scss' const PostTitle = ({ type, slug, linkurl, title }) => { diff --git a/src/components/atoms/SearchButton.jsx b/src/components/atoms/SearchButton.jsx index 5cd78c80..baf8062c 100644 --- a/src/components/atoms/SearchButton.jsx +++ b/src/components/atoms/SearchButton.jsx @@ -1,5 +1,5 @@ import React from 'react' -import SearchIcon from '../svg/MagnifyingGlass' +import { ReactComponent as SearchIcon } from '../../images/magnifying-glass.svg' import styles from './SearchButton.module.scss' const SearchButton = props => ( diff --git a/src/components/molecules/IconLinks.jsx b/src/components/molecules/IconLinks.jsx index 8c8c2bdd..99488a2e 100644 --- a/src/components/molecules/IconLinks.jsx +++ b/src/components/molecules/IconLinks.jsx @@ -2,11 +2,11 @@ import React from 'react' import PropTypes from 'prop-types' import styles from './IconLinks.module.scss' -import Twitter from '../svg/Twitter' -import Github from '../svg/Github' -import Facebook from '../svg/Facebook' -import Rss from '../svg/Rss' -import Jsonfeed from '../svg/Jsonfeed' +import { ReactComponent as Twitter } from '../../images/twitter.svg' +import { ReactComponent as Github } from '../../images/github.svg' +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 diff --git a/src/components/molecules/ModalThanks.jsx b/src/components/molecules/ModalThanks.jsx index 3d94da2d..56a1ca2d 100644 --- a/src/components/molecules/ModalThanks.jsx +++ b/src/components/molecules/ModalThanks.jsx @@ -4,7 +4,7 @@ import { QRCode } from 'react-qr-svg' import Clipboard from 'react-clipboard.js' import Modal from '../atoms/Modal' -import IconClipboard from '../svg/Clipboard' +import { ReactComponent as IconClipboard } from '../../images/clipboard.svg' import styles from './ModalThanks.module.scss' const query = graphql` diff --git a/src/components/organisms/Footer.jsx b/src/components/organisms/Footer.jsx index 3327ac2b..f73e7f6a 100644 --- a/src/components/organisms/Footer.jsx +++ b/src/components/organisms/Footer.jsx @@ -6,8 +6,8 @@ import Vcard from '../molecules/Vcard' import Subscribe from '../molecules/Subscribe' import ModalThanks from '../molecules/ModalThanks' -import Github from '../svg/Github' -import Bitcoin from '../svg/Bitcoin' +import { ReactComponent as Github } from '../../images/github.svg' +import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg' import styles from './Footer.module.scss' From 034eebc045c26214a0ddf467c681aabf78a990ae Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 24 Sep 2018 23:50:39 +0200 Subject: [PATCH 083/100] SEO component --- package.json | 12 +-- src/components/atoms/SEO.jsx | 145 +++++++++++++++++++++++++++++++++++ src/templates/Post.jsx | 12 ++- src/templates/Posts.jsx | 2 + 4 files changed, 158 insertions(+), 13 deletions(-) create mode 100644 src/components/atoms/SEO.jsx diff --git a/package.json b/package.json index 46cac1aa..a4d18313 100644 --- a/package.json +++ b/package.json @@ -27,10 +27,10 @@ "dms2dec": "^1.1.0", "fast-exif": "^1.0.1", "fraction.js": "^4.0.9", - "gatsby": "^2.0.7", + "gatsby": "^2.0.8", "gatsby-awesome-pagination": "^0.2.1", - "gatsby-image": "^2.0.8", - "gatsby-plugin-catch-links": "^2.0.2", + "gatsby-image": "^2.0.9", + "gatsby-plugin-catch-links": "^2.0.3", "gatsby-plugin-feed": "^2.0.5", "gatsby-plugin-lunr": "^1.2.0", "gatsby-plugin-matomo": "^0.5.0", @@ -43,12 +43,12 @@ "gatsby-redirect-from": "^0.1.1", "gatsby-remark-autolink-headers": "^2.0.6", "gatsby-remark-copy-linked-files": "^2.0.5", - "gatsby-remark-images": "^2.0.1", + "gatsby-remark-images": "^2.0.2", "gatsby-remark-prismjs": "^3.0.0", "gatsby-remark-smartypants": "^2.0.5", "gatsby-source-filesystem": "^2.0.1", "gatsby-transformer-remark": "^2.1.3", - "gatsby-transformer-sharp": "^2.1.1", + "gatsby-transformer-sharp": "^2.1.2", "gatsby-transformer-yaml": "^2.1.1", "graphql": "^0.13.2", "intersection-observer": "^0.5.0", @@ -84,7 +84,7 @@ "stylelint": "^9.5.0", "stylelint-config-css-modules": "^1.3.0", "stylelint-config-standard": "^18.2.0", - "stylelint-scss": "^3.3.0" + "stylelint-scss": "^3.3.1" }, "engines": { "node": "^10.0.0" diff --git a/src/components/atoms/SEO.jsx b/src/components/atoms/SEO.jsx new file mode 100644 index 00000000..e9d8c320 --- /dev/null +++ b/src/components/atoms/SEO.jsx @@ -0,0 +1,145 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { StaticQuery, graphql } from 'gatsby' +import Helmet from 'react-helmet' + +const query = graphql` + query { + contentYaml { + title + tagline + url + author { + name + twitter + avatar { + childImageSharp { + resize(width: 160) { + src + } + } + } + } + } + } +` + +class SEO extends Component { + static propTypes = { + post: PropTypes.object, + slug: PropTypes.string, + postSEO: PropTypes.bool + } + + render() { + return ( + { + const siteMeta = data.contentYaml + const { post, slug, postSEO } = this.props + let title + let description + let image + let postURL + + if (postSEO) { + const postMeta = post.frontmatter + title = `${postMeta.title} ¦ ${siteMeta.tagline}` + description = postMeta.description + ? postMeta.description + : post.excerpt + image = postMeta.image.childImageSharp.fluid.src + postURL = `${siteMeta.url}${slug}` + } else { + title = `${siteMeta.title} ¦ ${siteMeta.tagline}` + description = siteMeta.tagline + image = siteMeta.author.avatar.childImageSharp.resize.src + } + + image = `${siteMeta.url}${image}` + const blogURL = siteMeta.url + const url = postSEO ? postURL : blogURL + + const schemaOrgJSONLD = [ + { + '@context': 'http://schema.org', + '@type': 'WebSite', + url: blogURL, + name: title, + alternateName: siteMeta.titleAlt ? siteMeta.titleAlt : '' + } + ] + + if (postSEO) { + schemaOrgJSONLD.push( + { + '@context': 'http://schema.org', + '@type': 'BreadcrumbList', + itemListElement: [ + { + '@type': 'ListItem', + position: 1, + item: { + '@id': postURL, + name: title, + image + } + } + ] + }, + { + '@context': 'http://schema.org', + '@type': 'BlogPosting', + url: blogURL, + name: title, + alternateName: siteMeta.titleAlt ? siteMeta.titleAlt : '', + headline: title, + image: { + '@type': 'ImageObject', + url: image + }, + description + } + ) + } + + return ( + + + + {/* General tags */} + + + + + {/* Schema.org tags */} + + + {/* OpenGraph tags */} + + {postSEO && } + + + + + {/* Twitter Card tags */} + + + + + + + ) + }} + /> + ) + } +} + +export default SEO diff --git a/src/templates/Post.jsx b/src/templates/Post.jsx index 487df9d1..9c9cc07a 100644 --- a/src/templates/Post.jsx +++ b/src/templates/Post.jsx @@ -8,6 +8,7 @@ import PostTitle from '../components/atoms/PostTitle' import PostLead from '../components/atoms/PostLead' import PostContent from '../components/atoms/PostContent' import PostActions from '../components/atoms/PostActions' +import SEO from '../components/atoms/SEO' import PostMeta from '../components/molecules/PostMeta' import Exif from '../components/atoms/Exif' import styles from './Post.module.scss' @@ -16,6 +17,7 @@ const Post = ({ data, location }) => { const { markdownRemark: post } = data const { contentYaml: meta } = data const { title, image, type, linkurl, style } = post.frontmatter + const { slug } = post.fields return ( @@ -23,19 +25,15 @@ const Post = ({ data, location }) => { {style && } + +
    - - {image && } - {image && image.fields && } - - - - +
    diff --git a/src/templates/Posts.jsx b/src/templates/Posts.jsx index b1103037..1618e15a 100644 --- a/src/templates/Posts.jsx +++ b/src/templates/Posts.jsx @@ -8,6 +8,7 @@ import PostLead from '../components/atoms/PostLead' import PostContent from '../components/atoms/PostContent' import PostMore from '../components/atoms/PostMore' import PostLinkActions from '../components/atoms/PostLinkActions' +import SEO from '../components/atoms/SEO' import Pagination from '../components/molecules/Pagination' import Featured from '../components/molecules/Featured' import styles from './Posts.module.scss' @@ -54,6 +55,7 @@ const Posts = ({ data, location, pageContext }) => { return ( + {location.pathname === '/' && } {tag &&

    {tag}

    } {previousPagePath && ( From 1b91d3d29003279a2f70fb83e598206801b154ad Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 24 Sep 2018 23:50:48 +0200 Subject: [PATCH 084/100] setup manual redirects --- gatsby-node.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/gatsby-node.js b/gatsby-node.js index 14248d57..82f31a4f 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -10,6 +10,11 @@ const dms2dec = require('dms2dec') const meta = yaml.load(fs.readFileSync('./content/meta.yml', 'utf8')) const { itemsPerPage } = meta +const redirects = [ + { f: '/feed', t: '/feed.xml' }, + { f: '/feed/', t: '/feed.xml' } +] + exports.onCreateNode = ({ node, actions, getNode }) => { const { createNodeField } = actions @@ -136,7 +141,7 @@ const createExifFields = (exifData, createNodeField, node) => { } exports.createPages = ({ graphql, actions }) => { - const { createPage } = actions + const { createPage, createRedirect } = actions return new Promise((resolve, reject) => { resolve( @@ -174,6 +179,15 @@ exports.createPages = ({ graphql, actions }) => { // Generate Tag Pages generateTagPages(createPage, posts) + // create manual redirects + redirects.forEach(({ f, t }) => { + createRedirect({ + fromPath: f, + redirectInBrowser: true, + toPath: t + }) + }) + resolve() }) ) From 4f3de419e1db25406fba56c11f1c516e67a0f978 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 25 Sep 2018 00:34:12 +0200 Subject: [PATCH 085/100] fix SEO component --- src/components/atoms/SEO.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/atoms/SEO.jsx b/src/components/atoms/SEO.jsx index e9d8c320..b50eec4f 100644 --- a/src/components/atoms/SEO.jsx +++ b/src/components/atoms/SEO.jsx @@ -49,7 +49,9 @@ class SEO extends Component { description = postMeta.description ? postMeta.description : post.excerpt - image = postMeta.image.childImageSharp.fluid.src + image = postMeta.image + ? postMeta.image.childImageSharp.fluid.src + : siteMeta.author.avatar.childImageSharp.resize.src postURL = `${siteMeta.url}${slug}` } else { title = `${siteMeta.title} ¦ ${siteMeta.tagline}` From 0c60576f264018990d4d3381b721f0a4aa322921 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 25 Sep 2018 01:08:08 +0200 Subject: [PATCH 086/100] trying to fix feed images --- gatsby-config.js | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/gatsby-config.js b/gatsby-config.js index eb917eef..5b4fec85 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -144,20 +144,21 @@ module.exports = { feeds: [ { serialize: ({ query: { site, allMarkdownRemark } }) => { - return allMarkdownRemark.edges.map(edge => { - return Object.assign({}, edge.node.frontmatter, { - description: feedContent(edge), - url: site.siteMetadata.siteUrl + edge.node.fields.slug, - author: site.siteMetadata.author, - guid: site.siteMetadata.siteUrl + edge.node.fields.slug - }) - }) + return allMarkdownRemark.edges.map(edge => ({ + title: edge.node.frontmatter.title, + date: edge.node.fields.date, + description: feedContent(edge), + url: site.siteMetadata.siteUrl + edge.node.fields.slug, + categories: edge.node.frontmatter.tags, + author: site.siteMetadata.author, + guid: site.siteMetadata.siteUrl + edge.node.fields.slug + })) }, query: ` { allMarkdownRemark( - limit: 20, - sort: { order: DESC, fields: [fields___date] } + sort: { order: DESC, fields: [fields___date] }, + limit: 20 ) { edges { node { @@ -167,7 +168,7 @@ module.exports = { title image { childImageSharp { - resize(width: 960, quality: 80) { + resize(width: 940, quality: 85) { src } } @@ -196,8 +197,11 @@ module.exports = { const feedContent = edge => { const { image } = edge.node.frontmatter + const { html } = edge.node + const footer = + '
    This post was published on kremalicious.com' return image - ? `
    ${edge.node.html}` - : edge.node.html + ? `
    ${html}${footer}` + : `${html}${footer}` } From 3aabf39c2772188fd29a8e8fb74727755285fea9 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 25 Sep 2018 01:39:38 +0200 Subject: [PATCH 087/100] slight refactor --- src/components/atoms/SEO.jsx | 269 ++++++++++++++++++++--------------- 1 file changed, 156 insertions(+), 113 deletions(-) diff --git a/src/components/atoms/SEO.jsx b/src/components/atoms/SEO.jsx index b50eec4f..c31030fc 100644 --- a/src/components/atoms/SEO.jsx +++ b/src/components/atoms/SEO.jsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React from 'react' import PropTypes from 'prop-types' import { StaticQuery, graphql } from 'gatsby' import Helmet from 'react-helmet' @@ -24,124 +24,167 @@ const query = graphql` } ` -class SEO extends Component { - static propTypes = { - post: PropTypes.object, - slug: PropTypes.string, - postSEO: PropTypes.bool - } +const createSchemaOrg = ( + blogURL, + title, + siteMeta, + postSEO, + postURL, + image, + description +) => { + const schemaOrgJSONLD = [ + { + '@context': 'http://schema.org', + '@type': 'WebSite', + url: blogURL, + name: title, + alternateName: siteMeta.titleAlt ? siteMeta.titleAlt : '' + } + ] - render() { - return ( - { - const siteMeta = data.contentYaml - const { post, slug, postSEO } = this.props - let title - let description - let image - let postURL - - if (postSEO) { - const postMeta = post.frontmatter - title = `${postMeta.title} ¦ ${siteMeta.tagline}` - description = postMeta.description - ? postMeta.description - : post.excerpt - image = postMeta.image - ? postMeta.image.childImageSharp.fluid.src - : siteMeta.author.avatar.childImageSharp.resize.src - postURL = `${siteMeta.url}${slug}` - } else { - title = `${siteMeta.title} ¦ ${siteMeta.tagline}` - description = siteMeta.tagline - image = siteMeta.author.avatar.childImageSharp.resize.src - } - - image = `${siteMeta.url}${image}` - const blogURL = siteMeta.url - const url = postSEO ? postURL : blogURL - - const schemaOrgJSONLD = [ - { - '@context': 'http://schema.org', - '@type': 'WebSite', - url: blogURL, + if (postSEO) { + schemaOrgJSONLD.push( + { + '@context': 'http://schema.org', + '@type': 'BreadcrumbList', + itemListElement: [ + { + '@type': 'ListItem', + position: 1, + item: { + '@id': postURL, name: title, - alternateName: siteMeta.titleAlt ? siteMeta.titleAlt : '' + image } - ] - - if (postSEO) { - schemaOrgJSONLD.push( - { - '@context': 'http://schema.org', - '@type': 'BreadcrumbList', - itemListElement: [ - { - '@type': 'ListItem', - position: 1, - item: { - '@id': postURL, - name: title, - image - } - } - ] - }, - { - '@context': 'http://schema.org', - '@type': 'BlogPosting', - url: blogURL, - name: title, - alternateName: siteMeta.titleAlt ? siteMeta.titleAlt : '', - headline: title, - image: { - '@type': 'ImageObject', - url: image - }, - description - } - ) } - - return ( - - - - {/* General tags */} - - - - - {/* Schema.org tags */} - - - {/* OpenGraph tags */} - - {postSEO && } - - - - - {/* Twitter Card tags */} - - - - - - - ) - }} - /> + ] + }, + { + '@context': 'http://schema.org', + '@type': 'BlogPosting', + url: blogURL, + name: title, + alternateName: siteMeta.titleAlt ? siteMeta.titleAlt : '', + headline: title, + image: { + '@type': 'ImageObject', + url: image + }, + description + } ) } + return schemaOrgJSONLD +} + +const MetaTags = ({ + description, + image, + url, + schema, + postSEO, + title, + siteMeta +}) => ( + + + + {/* General tags */} + + + + + {/* Schema.org tags */} + + + {/* OpenGraph tags */} + + {postSEO && } + + + + + {/* Twitter Card tags */} + + + + + + +) + +MetaTags.propTypes = { + description: PropTypes.string, + image: PropTypes.string, + url: PropTypes.string, + schema: PropTypes.string, + postSEO: PropTypes.bool, + title: PropTypes.string, + siteMeta: PropTypes.object +} + +const SEO = ({ post, slug, postSEO }) => ( + { + const siteMeta = data.contentYaml + let title + let description + let image + let postURL + + if (postSEO) { + const postMeta = post.frontmatter + title = `${postMeta.title} ¦ ${siteMeta.tagline}` + description = postMeta.description ? postMeta.description : post.excerpt + image = postMeta.image + ? postMeta.image.childImageSharp.fluid.src + : siteMeta.author.avatar.childImageSharp.resize.src + postURL = `${siteMeta.url}${slug}` + } else { + title = `${siteMeta.title} ¦ ${siteMeta.tagline}` + description = siteMeta.tagline + image = siteMeta.author.avatar.childImageSharp.resize.src + } + + image = `${siteMeta.url}${image}` + const blogURL = siteMeta.url + const url = postSEO ? postURL : blogURL + + let schema = createSchemaOrg( + blogURL, + title, + siteMeta, + postSEO, + postURL, + image, + description + ) + schema = JSON.stringify(schema) + + return ( + + ) + }} + /> +) + +SEO.propTypes = { + post: PropTypes.object, + slug: PropTypes.string, + postSEO: PropTypes.bool } export default SEO From 088089e684e5827ee86727140c8c5998ec4743ca Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 25 Sep 2018 22:32:38 +0200 Subject: [PATCH 088/100] coinhive component --- _src/_page-styleguide.styl | 52 --------- _src/feed.json | 34 ------ _src/feed.xml | 102 ----------------- _src/opengraph.html | 36 ------ _src/twittercards.html | 26 ----- package.json | 4 +- src/components/atoms/Coinhive.jsx | 127 ++++++++++++++++++++++ src/components/atoms/Coinhive.module.scss | 18 +++ src/components/atoms/Transitions.js | 30 +++++ src/templates/Post.jsx | 41 ++++--- 10 files changed, 202 insertions(+), 268 deletions(-) delete mode 100644 _src/_page-styleguide.styl delete mode 100644 _src/feed.json delete mode 100644 _src/feed.xml delete mode 100644 _src/opengraph.html delete mode 100644 _src/twittercards.html create mode 100644 src/components/atoms/Coinhive.jsx create mode 100644 src/components/atoms/Coinhive.module.scss create mode 100644 src/components/atoms/Transitions.js diff --git a/_src/_page-styleguide.styl b/_src/_page-styleguide.styl deleted file mode 100644 index 38268d41..00000000 --- a/_src/_page-styleguide.styl +++ /dev/null @@ -1,52 +0,0 @@ - -// -// Colors -// -.color__swatch - padding: $spacer - border: 1px solid $brand-grey-dimmed - margin-bottom: ($spacer / 3) - border-radius: $border-radius-large - -.color__name, -.color__hex - @extend .small - font-family: $font-family-monospace - display: block - -// colors -.brand-dark - background: $brand-dark - -.brand-light - background: $brand-light - -.brand-cyan - background: $brand-cyan - -.brand-grey - background: $brand-grey - -.brand-grey-light - background: $brand-grey-light - -.brand-grey-dimmed - background: $brand-grey-dimmed - -// -// Fonts -// - -.font__name - font-size: 5vw - -.font__name--brandon - font-family: $headings-font-family - line-height: $headings-line-height - color: $headings-color - font-weight: $headings-font-weight - -.font__name--fftisa - font-family: $font-family-base - color: $text-color - font-weight: $font-weight-base diff --git a/_src/feed.json b/_src/feed.json deleted file mode 100644 index 885bc0b8..00000000 --- a/_src/feed.json +++ /dev/null @@ -1,34 +0,0 @@ ---- -layout: null ---- -{ - "version": "https://jsonfeed.org/version/1", - "title": {{ site.name | smartify | jsonify }}, - {% if site.description %}"description": {{ site.description | smartify | jsonify }},{% endif %} - "home_page_url": "{{ site.url }}", - "feed_url": "{{ site.url }}/feed.json", - "icon": "{{ site.url }}/assets/img/touch-icon-192x192.png", - "favicon": "{{ site.url }}/assets/img/favicon-32x32.png", - "expired": false, - "author": { - "name": {{ site.author.name | smartify | jsonify }}, - "url": "{{ site.author.uri }}", - "avatar": "https://kremalicious.com/assets/img/avatar.jpeg" - }, - "items": [ - {% for post in site.posts %} - { - "title": {{ post.title | smartify | jsonify }}, - "date_published": "{{ post.date }}", - {% if post.updated %}"date_modified": "{{ post.updated }}",{% endif %} - "id": "{{ post.id }}", - "url": "{{ site.url }}{{ post.url }}", - {% if post.linkurl %}"external_url": "{{ post.linkurl }}",{% endif %} - "author": "{{ site.author.name }}", - "summary": {{ post.excerpt | smartify | jsonify }}, - {% if post.image %}"image": "{{ site.media_url }}/w_940/media/{{ post.image }}",{% endif %} - "content_html": {{ post.content | jsonify }} - }{% unless forloop.last == true %},{% endunless %} - {% endfor %} - ] -} diff --git a/_src/feed.xml b/_src/feed.xml deleted file mode 100644 index fee4147e..00000000 --- a/_src/feed.xml +++ /dev/null @@ -1,102 +0,0 @@ ---- -redirect_from: - - /home/feed/ - - /feed/atom/ - - /comments/feed/ ---- - - - Jekyll - - - - {{ site.time | date_to_xmlschema }} - {{ site.url }}/ - - {% if site.name %} - {{ site.name | xml_escape }} - {% endif %} - - {% if site.description %} - {{ site.description | xml_escape }} - {% endif %} - - {% if site.author %} - - {% if site.author.name %} - {{ site.author.name | xml_escape }} - {% else %} - {{ site.author | xml_escape }} - {% endif %} - {% if site.author.email %} - {{ site.author.email | xml_escape }} - {% endif %} - {% if site.author.uri %} - {{ site.author.uri | xml_escape }} - {% endif %} - - {% endif %} - - {% for post in site.posts limit:100 %} - - {% if post.layout == "link" %} - {{ post.title | markdownify | strip_html | strip_newlines | xml_escape | titlecase }} → - - {% else %} - {{ post.title | markdownify | strip_html | strip_newlines | xml_escape | titlecase }} - - {% endif %} - - {{ post.date | date_to_xmlschema }} - - {% if post.updated %} - {{ post.updated | date_to_xmlschema }} - {% else %} - {{ post.date | date_to_xmlschema }} - {% endif %} - - {{ post.id | prepend: site.url | xml_escape }} - - {% if post.image %} - <img src="{{ site.media_url }}/w_940/media/{{ post.image }}" /> - {% endif %} - - {{ post.content | markdownify | xml_escape }} - - {% if post.layout == "link" %} - <a href="{{ post.linkurl | xml_escape }}">Go to source &#187;</a> <br /> - <a href="{{ site.url }}{{ post.url | xml_escape }}" title="Permalink for this post">&#8734;</a> - {% endif %} - - - {% if post.author %} - - {% if post.author.name %} - {{ post.author.name | xml_escape }} - {% else %} - {{ post.author | xml_escape }} - {% endif %} - {% if post.author.email %} - {{ post.author.email | xml_escape }} - {% endif %} - {% if post.author.url %} - {{ post.author.url | xml_escape }} - {% endif %} - - {% endif %} - - {% if post.category %} - - {% endif %} - - {% for tag in post.tags %} - - {% endfor %} - - {% if post.excerpt %} - {{ post.excerpt | markdownify | strip_html | strip_newlines | xml_escape }} - {% endif %} - - - {% endfor %} - diff --git a/_src/opengraph.html b/_src/opengraph.html deleted file mode 100644 index cbec20ed..00000000 --- a/_src/opengraph.html +++ /dev/null @@ -1,36 +0,0 @@ - - -{% if page.title %} - -{% else %} - -{% endif %} -{% if page.title %} - - -{% else %} - -{% endif %} -{% if page.description %} - -{% elsif page.front_page %} - -{% else %} - -{% endif %} -{% if page.url %} - -{% endif %} -{% if page.date %} - -{% endif %} -{% if page.image %} - -{% else %} - -{% endif %} -{% if page.categories %} - {% for category in page.categories limit:1 %} - - {% endfor %} -{% endif %} diff --git a/_src/twittercards.html b/_src/twittercards.html deleted file mode 100644 index 709b2303..00000000 --- a/_src/twittercards.html +++ /dev/null @@ -1,26 +0,0 @@ - -{% if page.category == "photos" %} - -{% else %} - -{% endif %} - - -{% if page.title %} - -{% else %} - -{% endif %} -{% if page.url %} - -{% endif %} -{% if page.description %} - -{% else %} - -{% endif %} -{% if page.image %} - -{% else %} - -{% endif %} diff --git a/package.json b/package.json index a4d18313..fbfe4120 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "gatsby-transformer-yaml": "^2.1.1", "graphql": "^0.13.2", "intersection-observer": "^0.5.0", + "load-script": "^1.0.0", "node-sass": "^4.9.3", "nord": "^0.2.1", "pigeon-maps": "^0.10.4", @@ -61,7 +62,8 @@ "react-clipboard.js": "^2.0.1", "react-dom": "^16.5.2", "react-helmet": "^5.2.0", - "react-modal": "^3.5.1", + "react-modal": "^3.6.1", + "react-pose": "^3.3.4", "react-qr-svg": "^2.1.0", "react-time": "^4.3.0", "react-transition-group": "^2.4.0", diff --git a/src/components/atoms/Coinhive.jsx b/src/components/atoms/Coinhive.jsx new file mode 100644 index 00000000..d3b43333 --- /dev/null +++ b/src/components/atoms/Coinhive.jsx @@ -0,0 +1,127 @@ +/* global CoinHive */ + +import React, { PureComponent } from 'react' +import loadScript from 'load-script' +import posed, { PoseGroup } from 'react-pose' +import { fadeIn } from './Transitions' +import styles from './Coinhive.module.scss' + +const config = { + threads: 2, + throttle: 0.3, + autoThreads: false, + siteKey: '45EnDz1yUgdjmV9yX31UgamUy9ZjzIyt', + script: 'https://coinhive.com/lib/coinhive.min.js' +} + +const Animation = posed.div(fadeIn) + +export default class CoinHiveClient extends PureComponent { + state = { + miner: null, + hashrate: 0, + started: false, + intervalId: null + } + + intervalId = null + + buildMiner = () => { + if (this.state.miner && this.state.miner.isRunning()) { + this.stop() + } + + return new Promise(resolve => { + loadScript(config.script, error => { + if (error) { + return + } + resolve( + CoinHive.Anonymous(config.siteKey, { + throttle: config.throttle, + threads: config.threads, + autoThreads: config.autoThreads + }) + ) + }) + }) + } + + componentDidMount() { + this.buildMiner() + .then(miner => { + this.setState({ miner }) + + if (this.state.miner && !this.state.miner.isMobile()) { + this.start() + this.report() + } + }) + .catch(() => null) + } + + componentWillUnmount() { + this.destroy() + } + + start() { + this.state.miner.start() + this.setState({ started: true }) + } + + stop() { + this.state.miner.stop() + this.setState({ started: false }) + } + + destroy() { + if (!this.state.miner) return + + this.state.miner.stop() + delete this.state.miner + clearInterval(this.state.intervalId) + } + + hashrate() { + return this.state.miner.getHashesPerSecond().toFixed(2) + } + + report() { + if (!this.state.miner) return + + let intervalId = setInterval( + () => this.setState({ hashrate: this.hashrate() }), + 1500 + ) + this.setState({ intervalId }) + } + + toggleMiner = () => { + if (this.state.started) { + this.stop() + } else { + this.start() + } + } + + render() { + return ( + this.state.miner && ( + + +
    + Mining {this.state.started ? 'enabled' : 'disabled'} +
    +
    + {this.state.hashrate} Hashes/s +
    +     +     + ) + ) + } +} diff --git a/src/components/atoms/Coinhive.module.scss b/src/components/atoms/Coinhive.module.scss new file mode 100644 index 00000000..d602e998 --- /dev/null +++ b/src/components/atoms/Coinhive.module.scss @@ -0,0 +1,18 @@ +@import 'variables'; + +.coinhive { + position: fixed; + bottom: 0; + right: 0; + z-index: 10; + font-size: $font-size-mini; + padding: ($spacer / 3) ($spacer / 2); + background: rgba($page-background-color, .5); + border-top-left-radius: 4px; + line-height: 1.2; + cursor: pointer; +} + +.hashrate { + opacity: .6; +} diff --git a/src/components/atoms/Transitions.js b/src/components/atoms/Transitions.js new file mode 100644 index 00000000..c2b4c86d --- /dev/null +++ b/src/components/atoms/Transitions.js @@ -0,0 +1,30 @@ +export const fadeIn = { + enter: { + opacity: 1 + }, + exit: { + opacity: 0 + } +} + +export const moveInTop = { + enter: { + y: 0, + transition: { type: 'spring' } + }, + exit: { + y: '-2rem', + transition: { type: 'spring' } + } +} + +export const moveInBottom = { + enter: { + y: 0, + transition: { type: 'spring' } + }, + exit: { + y: '2rem', + transition: { type: 'spring' } + } +} diff --git a/src/templates/Post.jsx b/src/templates/Post.jsx index 9c9cc07a..b2517903 100644 --- a/src/templates/Post.jsx +++ b/src/templates/Post.jsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Fragment } from 'react' import PropTypes from 'prop-types' import Helmet from 'react-helmet' import { graphql } from 'gatsby' @@ -9,6 +9,7 @@ import PostLead from '../components/atoms/PostLead' import PostContent from '../components/atoms/PostContent' import PostActions from '../components/atoms/PostActions' import SEO from '../components/atoms/SEO' +import Coinhive from '../components/atoms/Coinhive' import PostMeta from '../components/molecules/PostMeta' import Exif from '../components/atoms/Exif' import styles from './Post.module.scss' @@ -16,27 +17,32 @@ import styles from './Post.module.scss' const Post = ({ data, location }) => { const { markdownRemark: post } = data const { contentYaml: meta } = data - const { title, image, type, linkurl, style } = post.frontmatter + const { title, image, type, linkurl, style, coinhive } = post.frontmatter const { slug } = post.fields return ( - - - {style && } - + + + + {style && } + - + -
    - - - {image && } - {image && image.fields && } - - - -
    -     +
    + + + {image && ( + + )} + {image && image.fields && } + + + +
    +     + {coinhive && } + ) } @@ -86,6 +92,7 @@ export const pageQuery = graphql` updated tags linkurl + coinhive style { publicURL } From 77afcb72b1ddb65be2ac2f2792a95249fab60108 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 25 Sep 2018 22:49:07 +0200 Subject: [PATCH 089/100] fix featured style --- src/components/molecules/Featured.module.scss | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/molecules/Featured.module.scss b/src/components/molecules/Featured.module.scss index b77ffea1..d77e4241 100644 --- a/src/components/molecules/Featured.module.scss +++ b/src/components/molecules/Featured.module.scss @@ -15,7 +15,7 @@ .featuredTitle { transition: .1s ease-out; - font-size: $font-size-small; + font-size: $font-size-base; margin: 0; position: absolute; top: 25%; @@ -35,14 +35,21 @@ position: relative; margin-bottom: 3%; - a:hover { + a { > div { - border-color: $link-color !important; + @include media-frame(); } - .featuredTitle { - opacity: 1; - transform: translate3d(0, 0, 0); + &:hover, + &:focus { + > div { + border-color: $link-color !important; + } + + .featuredTitle { + opacity: 1; + transform: translate3d(0, 0, 0); + } } } } From 6afcb5cb11af8ab97496a4bf82d435325a543d60 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 25 Sep 2018 23:16:05 +0200 Subject: [PATCH 090/100] fixes --- src/templates/Posts.jsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/templates/Posts.jsx b/src/templates/Posts.jsx index 1618e15a..8a7a1201 100644 --- a/src/templates/Posts.jsx +++ b/src/templates/Posts.jsx @@ -28,15 +28,13 @@ const Posts = ({ data, location, pageContext }) => { )} {image && ( -
    - - - -
    + + + )} {type === 'post' && } From 2bba026f0df734ace10f01f96af4a9fc4a95b6c9 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 26 Sep 2018 16:49:45 +0200 Subject: [PATCH 091/100] package updates --- package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index fbfe4120..ecfe2499 100644 --- a/package.json +++ b/package.json @@ -27,9 +27,9 @@ "dms2dec": "^1.1.0", "fast-exif": "^1.0.1", "fraction.js": "^4.0.9", - "gatsby": "^2.0.8", + "gatsby": "^2.0.9", "gatsby-awesome-pagination": "^0.2.1", - "gatsby-image": "^2.0.9", + "gatsby-image": "^2.0.10", "gatsby-plugin-catch-links": "^2.0.3", "gatsby-plugin-feed": "^2.0.5", "gatsby-plugin-lunr": "^1.2.0", @@ -43,11 +43,11 @@ "gatsby-redirect-from": "^0.1.1", "gatsby-remark-autolink-headers": "^2.0.6", "gatsby-remark-copy-linked-files": "^2.0.5", - "gatsby-remark-images": "^2.0.2", - "gatsby-remark-prismjs": "^3.0.0", + "gatsby-remark-images": "^2.0.3", + "gatsby-remark-prismjs": "^3.0.1", "gatsby-remark-smartypants": "^2.0.5", "gatsby-source-filesystem": "^2.0.1", - "gatsby-transformer-remark": "^2.1.3", + "gatsby-transformer-remark": "^2.1.4", "gatsby-transformer-sharp": "^2.1.2", "gatsby-transformer-yaml": "^2.1.1", "graphql": "^0.13.2", From d24309be463e945fb241cd9263514119288ca850 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 26 Sep 2018 21:16:24 +0200 Subject: [PATCH 092/100] post fixes --- src/components/molecules/PostMeta.module.scss | 2 +- src/pages/goodies.module.scss | 20 ++++++++++++++++--- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/components/molecules/PostMeta.module.scss b/src/components/molecules/PostMeta.module.scss index 8364a20b..d82251d3 100644 --- a/src/components/molecules/PostMeta.module.scss +++ b/src/components/molecules/PostMeta.module.scss @@ -74,7 +74,7 @@ margin-right: $spacer / 2; &::before { - color: $brand-grey-dimmed; + color: $brand-grey-light; content: '#'; margin-right: 1px; } diff --git a/src/pages/goodies.module.scss b/src/pages/goodies.module.scss index 99099531..61474506 100644 --- a/src/pages/goodies.module.scss +++ b/src/pages/goodies.module.scss @@ -8,7 +8,23 @@ } .goodie { - margin-bottom: $spacer * 4; + @include divider; + + padding-top: $spacer; + padding-bottom: $spacer * 2; + + &:first-of-type { + padding-top: 0; + } + + &:last-child { + border-bottom: 0; + padding-bottom: 0; + + &::before { + display: none; + } + } a { display: block; @@ -16,8 +32,6 @@ } .title { - font-size: $font-size-h3; - color: $brand-grey; margin-top: 0; margin-bottom: $spacer; } From b0471e9530b77e336b9e99734eb23c0b1b50e499 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 26 Sep 2018 22:28:01 +0200 Subject: [PATCH 093/100] switch to highlights and nord syntax highlighting --- gatsby-config.js | 9 +- package.json | 2 +- src/styles/_code.scss | 20 +- src/styles/_syntax.scss | 1464 +++++++++++++++++++++++++++++++++++++-- 4 files changed, 1424 insertions(+), 71 deletions(-) diff --git a/gatsby-config.js b/gatsby-config.js index 5b4fec85..41faf8f6 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -66,7 +66,14 @@ module.exports = { destinationDir: 'media' } }, - 'gatsby-remark-prismjs', + { + resolve: 'gatsby-remark-highlights', + options: { + codeWrap: { + className: 'nord' + } + } + }, 'gatsby-remark-smartypants', 'gatsby-remark-autolink-headers' ] diff --git a/package.json b/package.json index ecfe2499..a3028e81 100644 --- a/package.json +++ b/package.json @@ -43,8 +43,8 @@ "gatsby-redirect-from": "^0.1.1", "gatsby-remark-autolink-headers": "^2.0.6", "gatsby-remark-copy-linked-files": "^2.0.5", + "gatsby-remark-highlights": "^1.3.4", "gatsby-remark-images": "^2.0.3", - "gatsby-remark-prismjs": "^3.0.1", "gatsby-remark-smartypants": "^2.0.5", "gatsby-source-filesystem": "^2.0.1", "gatsby-transformer-remark": "^2.1.4", diff --git a/src/styles/_code.scss b/src/styles/_code.scss index abebbf2e..6db3a6e7 100644 --- a/src/styles/_code.scss +++ b/src/styles/_code.scss @@ -1,4 +1,5 @@ @import 'variables'; +@import 'nord/src/sass/nord'; code, kbd, @@ -10,12 +11,14 @@ samp { code, kbd { - padding: 2px 4px; + padding: .1em; } code, samp { - color: darken($code-color, 40%); + white-space: normal; + background: $nord4; + color: inherit; background-color: rgba($code-bg, .05); border-radius: $border-radius; } @@ -30,7 +33,7 @@ kbd { pre { display: block; - padding: $spacer / 2; + padding: $spacer / 1.5 $spacer; margin-bottom: $spacer; line-height: $line-height; color: $code-color; @@ -62,10 +65,17 @@ pre { word-break: normal; overflow: auto; } + + .line { + white-space: pre; + overflow-wrap: normal; + word-wrap: normal; + word-break: normal; + } } -pre > code.language-shell, -pre > code.language-bash { +pre .line:only-child .source.shell, +pre .line:only-child .source.bash { padding-left: $spacer / 2; display: block; diff --git a/src/styles/_syntax.scss b/src/styles/_syntax.scss index 485bcaf9..26cdd8b5 100644 --- a/src/styles/_syntax.scss +++ b/src/styles/_syntax.scss @@ -1,96 +1,1432 @@ -@import 'nord/src/sass/nord'; +/* stylelint-disable */ -/* Code blocks */ -pre[class*='language-'] { - background: $nord0; - color: $nord4; -} +/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +title Editor + +project nord-atom-syntax + +repository https://github.com/arcticicestudio/nord-atom-syntax + +author Arctic Ice Studio + +email development@arcticicestudio.com + +copyright Copyright (C) 2017 + +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +*/ +.nord { + margin-left: -($spacer); + margin-right: -($spacer); -pre[class*='language-'], -code[class*='language-'] { - ::-moz-selection, - ::selection { - background: $nord4; + > pre { + margin-left: 0; + margin-right: 0; } } -/* Inline code */ -:not(pre) > code[class*='language-'] { - padding: .1em; - border-radius: .3em; - white-space: normal; - background: $nord4; - color: inherit; +.editor { + background-color: #2e3440; + color: #d8dee9; } -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: $nord3; +.editor .bracket-matcher .region { + border: 1px solid #88c0d0; + box-sizing: border-box; } -.token.punctuation { - color: $nord9; +.editor .cursor { + border-left: 2px solid #d8dee9; } -.namespace { - opacity: .7; +.editor .indent-guide { + box-shadow: inset 1px 0 #434c5e; } -.token.property, -.token.tag, -.token.boolean, -.token.number, -.token.constant, -.token.symbol, -.token.deleted { - color: $nord9; +.editor .invisible { + color: #4c566a; } -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.builtin, -.token.inserted { - color: $nord7; +.editor .invisible-character { + color: #4c566a; } -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string { - color: $nord7; +.editor .line.cursor-line { + background-color: rgba(67, 76, 94, .32); } -.token.atrule, -.token.attr-value, -.token.keyword { - color: $nord14; +.editor .selection .region { + background-color: rgba(67, 76, 94, .8); } -.token.function, -.token.class-name { - color: $nord12; +.editor .wrap-guide { + background-color: #4c566a; } -.token.regex, -.token.important, -.token.variable { - color: $nord13; +.editor .find-result .region.region.region, +.editor .current-result .region.region.region { + background-color: rgba(136, 192, 208, .3); + transition: border-color 400ms; } -.token.important, -.token.bold { +.editor .current-result .region.region.region { + background-color: rgba(136, 192, 208, .38); + border: 2px solid #88c0d0; + transition-duration: 400ms; +} + +.editor .find-result .region.region.region { + border: 2px solid transparent; +} + +.editor .gutter { + font-weight: 300; + -webkit-font-smoothing: antialiased; + background-color: #2e3440; + margin-right: 0; + border-right: 0; + padding-right: 0; +} + +.editor .gutter .line-numbers { + background: transparent !important; +} + +.editor .gutter .line-number { + background: transparent; + color: rgba(216, 222, 233, .4); + padding-right: 0; +} + +.editor .gutter .line-number.git-line-added { + color: #a3be8c; + border-left-color: #a3be8c; +} + +.editor .gutter .line-number.git-line-added.cursor-line, +.editor .gutter .line-number.git-line-added.cursor-line-no-selection { + color: #a3be8c; + border-left-color: #a3be8c; +} + +.editor .gutter .line-number.git-line-modified { + color: #ebcb8b; + border-left-color: #ebcb8b; +} + +.editor .gutter .line-number.git-line-modified.cursor-line, +.editor .gutter .line-number.git-line-modified.cursor-line-no-selection { + color: #ebcb8b; + border-left-color: #ebcb8b; +} + +.editor .gutter .line-number.git-line-removed { + color: #bf616a; + border-left-color: #bf616a; +} + +.editor .gutter .line-number.git-line-removed.cursor-line, +.editor .gutter .line-number.git-line-removed.cursor-line-no-selection { + color: #bf616a; + border-left-color: #bf616a; +} + +.editor .gutter .line-number.cursor-line, +.editor .gutter .line-number.cursor-line-no-selection { + color: #eceff4; + font-weight: 600; +} + +.editor .gutter .line-number .icon-right { + opacity: 1; + color: rgba(216, 222, 233, .4); + transition: all 400ms ease; +} + +.editor .gutter .line-number .icon-right:hover { + color: #eceff4; +} + +.editor .gutter .line-number.folded, +.editor .gutter .line-number::after, +.editor .fold-marker::after { + color: #eceff4; +} + +.editor .gutter .line-number.folded .icon-right, +.editor .gutter .line-number::after .icon-right, +.editor .fold-marker::after .icon-right { + opacity: .5; + color: #88c0d0; + transition: all 400ms ease; +} + +.editor .gutter .line-number.folded .icon-right:hover, +.editor .gutter .line-number::after .icon-right:hover, +.editor .fold-marker::after .icon-right:hover { + opacity: 1; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Syntax + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + */ + +/*+------+ + + Base + + +------+*/ +.source { + -webkit-font-smoothing: auto; + color: #d8dee9; +} + +.none { + color: #d8dee9; +} + +/*+----------+ + + Entities + + +----------+*/ +.comment { + color: #4c566a; +} + +.comment .markup.link { + color: #4c566a; + text-decoration: none; +} + +.comment .markup.link:hover { + text-decoration: underline; +} + +.constant { + color: #8fbcbb; +} + +.constant.character.escape { + color: #d08770; +} + +.constant.numeric, +.constant.other.color { + color: #b48ead; +} + +.constant.language { + color: #81a1c1; +} + +.constant.other.symbol { + color: #8fbcbb; +} + +.constant.other.placeholder { + color: #d08770; +} + +.constant.variable { + color: #d8dee9; +} + +.entity.name.function { + color: #88c0d0; +} + +.entity.name.class, +.entity.name.type.class { + color: #8fbcbb; +} + +.entity.name.section { + color: #81a1c1; +} + +.entity.name.tag { + color: #81a1c1; +} + +.entity.name.type { + color: #8fbcbb; +} + +.entity.other.inherited-class { + color: #8fbcbb; font-weight: bold; } -.token.italic { +.entity.other.attribute-name { + color: #8fbcbb; +} + +.entity.other.attribute-name.id { + color: #8fbcbb; + text-decoration: underline; +} + +.invalid.deprecated { + color: #ebcb8b !important; + text-decoration: line-through !important; +} + +.invalid.illegal { + color: #d8dee9 !important; + background-color: #bf616a !important; +} + +.keyword { + color: #81a1c1; +} + +.keyword.control { + color: #81a1c1; +} + +.keyword.operator { + color: #81a1c1; +} + +.keyword.other.special-method { + color: #88c0d0; font-style: italic; } -.token.entity { - cursor: help; +.keyword.other.unit { + color: #81a1c1; +} + +.markup.bold { + font-weight: bold; +} + +.markup.changed { + color: #ebcb8b; +} + +.markup.deleted { + color: #bf616a; +} + +.markup.italic { + font-style: italic; +} + +.markup.heading { + color: #88c0d0; +} + +.markup.heading .marker { + color: #81a1c1; +} + +.markup.heading .punctuation.definition.heading { + color: #88c0d0; +} + +.markup.link { + text-decoration: none; +} + +.markup.link:hover { + text-decoration: underline; +} + +.markup.quote { + color: #eceff4; +} + +.markup.raw { + color: #8fbcbb; +} + +.meta { + color: #d8dee9; +} + +.meta.brace { + color: #d8dee9; +} + +.meta.class { + color: #8fbcbb; +} + +.meta.class.body { + color: #d8dee9; +} + +.meta.definition.variable { + color: #d8dee9; +} + +.meta.link { + color: #d8dee9; +} + +.meta.method { + color: #88c0d0; +} + +.meta.method.body { + color: #d8dee9; +} + +.meta.method-call { + color: #d8dee9; +} + +.meta.require { + color: #5e81ac; +} + +.meta.selector { + color: #8fbcbb; +} + +.meta.separator { + color: #d8dee9; +} + +.meta.tag { + color: #81a1c1; +} + +.punctuation { + color: #d8dee9; +} + +.punctuation.definition.array, +.punctuation.definition.function-parameters, +.punctuation.definition.method-parameters, +.punctuation.definition.parameters, +.punctuation.definition.separator, +.punctuation.definition.seperator { + color: #d8dee9; +} + +.punctuation.definition.bold { + font-weight: bold; +} + +.punctuation.definition.comment { + color: #4c566a; +} + +.punctuation.definition.heading, +.punctuation.definition.identity { + color: #88c0d0; +} + +.punctuation.definition.italic { + font-style: italic; +} + +.punctuation.definition.tag { + color: #81a1c1; +} + +.punctuation.section.embedded { + color: #81a1c1; +} + +.punctuation.section.class, +.punctuation.section.inner-class, +.punctuation.section.method { + color: #8fbcbb; +} + +.storage { + color: #81a1c1; +} + +.storage.modifier.import, +.storage.modifier.package { + color: #8fbcbb; +} + +.storage.type.annotation, +.storage.type.primitive { + color: #81a1c1; +} + +.string { + color: #a3be8c; +} + +.string.other.link { + color: #a3be8c; + text-decoration: none; +} + +.string.other.link:hover { + text-decoration: underline; +} + +.string > .punctuation.definition.string { + color: #d8dee9; +} + +.string.regexp { + color: #ebcb8b; +} + +.string.regexp .source.ruby.embedded { + color: #ebcb8b; +} + +.string.unquoted { + color: #d8dee9; +} + +.support.class { + color: #8fbcbb; +} + +.support.function { + color: #88c0d0; +} + +.support.function.any-method { + color: #88c0d0; +} + +.support.type { + color: #8fbcbb; +} + +.underline { + text-decoration: underline; +} + +.variable { + color: #d8dee9; +} + +.variable.interpolation { + color: #d8dee9; + font-style: italic; +} + +.variable.language { + color: #81a1c1; +} + +.variable.parameter { + color: #d8dee9; +} + +/*+--- Languages ---+*/ + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language C/C++ + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-c (https://atom.io/packages/language-c) + + [References] + Standard C++ + (https://isocpp.org) + */ +.source.c .keyword.operator, +.source.cpp .keyword.operator { + color: #81a1c1; +} + +.source.c .meta.preprocessor, +.source.cpp .meta.preprocessor { + color: #5e81ac; +} + +.source.c .punctuation.definition.directive, +.source.cpp .punctuation.definition.directive { + color: #81a1c1; +} + +.source.c .punctuation.separator.pointer-access, +.source.cpp .punctuation.separator.pointer-access { + color: #81a1c1; +} + +.source.c .string.include, +.source.cpp .string.include { + color: #8fbcbb; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language Clojure + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-clojure (https://atom.io/packages/language-clojure) + + [References] + Clojure + (https://clojure.org) + */ +.source.clojure .entity.global { + color: #8fbcbb; +} + +.source.clojure .meta.symbol { + color: #d8dee9; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language CoffeeScript + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-coffee-script (https://atom.io/packages/language-coffee-script) + + [References] + CoffeeScript + (http://coffeescript.org) + */ +.source.coffee .variable.other.instance { + color: #d8dee9; + font-style: italic; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language C# + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-csharp (https://atom.io/packages/language-csharp) + + [References] + Microsoft .NET Framework + (https://www.microsoft.com/net) + */ +.source.cs .entity.name.interface.class { + font-weight: bold; +} + +.source.cs .meta.method.annotation { + color: #d08770; +} + +.source.cs .meta.namespace.body { + color: #8fbcbb; +} + +.source.cs .meta.directive.preprocessor { + color: #5e81ac; +} + +.source.cs .meta .generic.method.identifier { + color: #d8dee9; +} + +.source.cs .punctuation.section.class.begin, +.source.cs .punctuation.section.class.end { + color: #d8dee9; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language CSS + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + Supports LESSCSS and Sass. + + [Language Packages] + > language-css (https://atom.io/packages/language-css) + + [References] + LESSCSS + (http://lesscss.org) + Sass + (http://sass-lang.com) + W3C + (https://www.w3.org/TR/css3-roadmap) + */ +.source.css .meta.at-rule .punctuation.definition.keyword, +.source.css.less .meta.at-rule .punctuation.definition.keyword, +.source.css.scss .meta.at-rule .punctuation.definition.keyword, +.source.css.sass .meta.at-rule .punctuation.definition.keyword { + color: #81a1c1; +} + +.source.css .meta.at-rule > .string.quoted, +.source.css.less .meta.at-rule > .string.quoted, +.source.css.scss .meta.at-rule > .string.quoted, +.source.css.sass .meta.at-rule > .string.quoted { + color: #8fbcbb; +} + +.source.css .meta.property-value .punctuation.definition.constant, +.source.css.less .meta.property-value .punctuation.definition.constant, +.source.css.scss .meta.property-value .punctuation.definition.constant, +.source.css.sass .meta.property-value .punctuation.definition.constant { + color: #81a1c1; +} + +.source.css .support.constant.property-value, +.source.css.less .support.constant.property-value, +.source.css.scss .support.constant.property-value, +.source.css.sass .support.constant.property-value { + color: #81a1c1; +} + +.source.css .support.type.property-name, +.source.css.less .support.type.property-name, +.source.css.scss .support.type.property-name, +.source.css.sass .support.type.property-name { + color: #8fbcbb; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language diff + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-diff (https://atom.io/packages/language-diff) + */ +.source.diff .meta.range.context, +.source.diff .meta.header.from-file { + color: #8fbcbb; +} + +.source.diff .punctuation.definition.separator { + color: #81a1c1; +} + +.source.diff .punctuation.definition.from-file, +.source.diff .punctuation.definition.range { + color: #8fbcbb; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language Elixir + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-elixir (https://atom.io/packages/language-elixir) + + [References] + Elixir + (http://elixir-lang.org) + */ +.source.elixir .variable.other.readwrite.module { + color: #d08770; +} + +.source.elixir .variable.other.readwrite.constant { + color: #8fbcbb; +} + +.source.elixir .punctuation.definition.variable { + color: #d08770; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language GitHub Flavored Markdown + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-gfm (https://atom.io/packages/language-gfm) + + [References] + GitHub + (https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) + */ +.source.gfm .comment.hr { + color: #81a1c1; +} + +.source.gfm .link .entity { + color: #88c0d0; +} + +.source.gfm .punctuation.definition { + color: #81a1c1; +} + +.source.gfm .variable.unordered.list { + color: #81a1c1; +} + +.source.gfm .support { + color: #8fbcbb; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language GLSL + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-glsl (https://atom.io/packages/language-glsl) + + [References] + OpenGL + (https://www.opengl.org/documentation/glsl) + */ +.source.glsl .punctuation.definition.directive { + color: #81a1c1; +} + +.source.glsl .string.include { + color: #8fbcbb; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language Go + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-go (https://atom.io/packages/language-go) + + [References] + Go + (https://golang.org) + */ +.source.go .entity.name.package { + color: #8fbcbb; +} + +.source.go .storage.type.string { + color: #8fbcbb; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language HAML + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-haml (https://atom.io/packages/language-haml) + + [References] + HAML + (http://haml.info) + */ +.text.haml .meta.prolog { + color: #5e81ac; +} + +.text.haml .meta.section.object { + color: #8fbcbb; +} + +.text.haml .punctuation.definition.prolog { + color: #81a1c1; +} + +.text.haml .punctuation.definition.tag { + color: #81a1c1; +} + +.text.haml .variable.other.instance { + color: #d8dee9; + font-style: italic; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language Haskell + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-haskell (https://atom.io/packages/language-haskell) + + [References] + Haskell + (https://www.haskell.org) + */ +.source.haskell .entity.name.function.infix { + color: #81a1c1; +} + +.source.haskell .identifier { + color: #d8dee9; +} + +.source.haskell .meta.preprocessor { + color: #5e81ac; +} + +.source.haskell .punctuation.definition.directive { + color: #81a1c1; +} + +.source.haskell .support.other.module { + color: #8fbcbb; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language HTML + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-html (https://atom.io/packages/language-html) + + [References] + W3C + (https://www.w3.org/html/) + */ +.text.html.basic .constant.other.inline-data { + color: #d8dee9; + font-style: italic; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language Java + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + Supports Java, Scala and Java Properties. + + [Index] + > Java + > Scala + > Java Properties + + [Language Packages] + > language-java (https://atom.io/packages/language-java) + > language-scala (https://atom.io/packages/language-scala) + + [References] + Java + (https://java.com) + (http://openjdk.java.net) + Scala + (http://scala-lang.org) + */ + +/*+------+ + + Java + + +------+*/ +.source.java .comment.block.javadoc .variable.parameter { + color: #88c0d0; +} + +.source.java .keyword.operator.instanceof { + color: #81a1c1; +} + +.source.java .keyword.other.documentation.javadoc { + color: #8fbcbb; +} + +.source.java .punctuation.bracket.angle { + color: #81a1c1; +} + +.source.java .storage.modifier.import, +.source.java .storage.modifier.package { + color: #8fbcbb; +} + +.source.java .storage.type { + color: #8fbcbb; +} + +.source.java .storage.type.annotation { + color: #d08770; +} + +.source.java .storage.type.primitive { + color: #81a1c1; +} + +/*+-------+ + + Scala + + +-------+*/ +.source.scala .entity.name.package { + color: #8fbcbb; +} + +.source.scala .meta.import { + color: #8fbcbb; +} + +.source.scala .meta.import .variable { + color: #8fbcbb; +} + +.source.scala .scala.type { + color: #8fbcbb; +} + +.source.scala .scala.type .class { + color: #8fbcbb; +} + +/*+-----------------+ + + Java Properties + + +-----------------+*/ +.source.java-properties .meta.key-pair { + color: #81a1c1; +} + +.source.java-properties .meta.key-pair > .punctuation { + color: #d8dee9; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language JavaScript + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + Support for + - ES15/16 + - ESNext + - Atom's Etch + - Facebook's React, Flow and GraphQL + + [Language Packages] + > language-babel (https://atom.io/packages/language-babel) + > language-javascript (https://atom.io/packages/language-javascript) + + [References] + Babel + (https://babeljs.io) + ESNext + (https://github.com/esnext/esnext) + Atom + (https://github.com/atom/etch) + Facebook + (https://facebook.github.io/react) + (https://flowtype.org) + (http://graphql.org) + */ +.source.js.jsx .variable.other.class { + color: #8fbcbb; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language JSON + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-json (https://atom.io/packages/language-json) + + [References] + JSON + (http://www.json.org) + */ +.source.json .meta.structure.dictionary.json > .string.quoted.json { + color: #8fbcbb; +} + +.source.json +.meta.structure.dictionary.json > .string.quoted.json > .punctuation.string { + color: #d8dee9; +} + +.source.json .meta.structure.dictionary.json > .constant.language.json, +.source.json .meta.structure.array.json > .constant.language.json { + color: #81a1c1; +} + +.source.json +.meta.structure.dictionary.json > .value.json > .string.quoted.json, +.source.json .meta.structure.array.json > .value.json > .string.quoted.json { + color: #a3be8c; +} + +.source.json +.meta.structure.dictionary.json > .value.json > .string.quoted.json > .punctuation, +.source.json +.meta.structure.array.json > .value.json > .string.quoted.json > .punctuation { + color: #d8dee9; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language Julia + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-julia (https://atom.io/packages/language-julia) + + [References] + Julia Language + (http://julialang.org) + */ +.source.julia .support.function.macro { + color: #d08770; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language LESSCSS + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-less (https://atom.io/packages/language-less) + + [References] + LESSCSS + (http://lesscss.org) + */ +.source.css.less .mixin { + color: #88c0d0; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language PHP + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-php (https://atom.io/packages/language-php) + + [References] + PHP + (https://secure.php.net) + Laravel + https://laravel.com/docs/blade + */ +.source.php .meta.function-call { + color: #88c0d0; +} + +.source.php .meta.function-call.static { + font-style: italic; +} + +.source.php .meta.string-contents { + color: #a3be8c; +} + +.source.php .punctuation.definition.variable { + color: #81a1c1; +} + +.source.php .support.other.namespace.use { + color: #8fbcbb; +} + +.text.html.php.blade .keyword { + color: #d08770; +} + +.text.html.php.blade .keyword.operator { + color: #81a1c1; +} + +.text.html.php.blade .support.function.construct { + color: #5e81ac; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language Python + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-python (https://atom.io/packages/language-python) + + [References] + Ruby + (https://www.python.org) + */ +.source.python .variable.parameter { + color: #d8dee9; +} + +.source.python .meta.function-call { + color: #88c0d0; +} + +.source.python .meta.function-call.arguments { + color: #d8dee9; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language RestructuredText + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-gfm (https://atom.io/packages/language-restructuredtext) + + [References] + Docutils + http://docutils.sourceforge.net/rst.html + */ +.text.restructuredtext .entity.name.tag { + color: #81a1c1; +} + +.text.restructuredtext .markup.bold, +.text.restructuredtext .markup.italic { + color: #81a1c1; +} + +.text.restructuredtext .markup.other.command { + color: #8fbcbb; + font-style: italic; +} + +.text.restructuredtext .punctuation.definition { + color: #81a1c1; +} + +.text.restructuredtext .punctuation.definition.heading { + color: #81a1c1; +} + +.text.restructuredtext .punctuation.separator.line-block { + color: #81a1c1; +} + +.text.restructuredtext .string.other.link.title { + color: #88c0d0; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language Ruby + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-ruby (https://atom.io/packages/language-ruby) + + [References] + Ruby + (https://www.ruby-lang.org) + */ +.source.ruby .constant.other.symbol > .punctuation { + color: #81a1c1; +} + +.source.ruby .variable.other.constant { + color: #8fbcbb; +} + +.source.ruby .punctuation.definition.variable { + color: #81a1c1; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language ShellScript + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-shellscript (https://atom.io/packages/language-shellscript) + */ +.source.shell .punctuation.definition.variable { + color: #81a1c1; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language YAML + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-yaml (https://atom.io/packages/language-yaml) + + [References] + YAML + (http://yaml.org) + */ +.source.yaml .entity.name.tag { + color: #8fbcbb; +} + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Language XML + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + + [Language Packages] + > language-xml (https://atom.io/packages/language-xml) + + [References] + W3C + (https://www.w3.org/TR/xml) + */ +.text.xml .constant.character.entity, +.text.xml .constant.character .punctuation.definition { + color: #d08770; +} + +.text.xml .entity.name.tag.namespace { + color: #8fbcbb; +} + +.text.xml .string.unquoted.cdata { + color: #4c566a; +} + +.text.xml .string.unquoted.cdata .punctuation.definition { + color: #4c566a; + font-weight: bold; +} + +/*+----------------+ + + Theme Settings + + +----------------+*/ + +/* + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + title Syntax Theme Settings + + project nord-atom-syntax + + repository https://github.com/arcticicestudio/nord-atom-syntax + + author Arctic Ice Studio + + email development@arcticicestudio.com + + copyright Copyright (C) 2017 + + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + */ + +/*+-------------+ + + Accessibility + + +---------------+*/ + +/*+--- Custom Comment Contrast ---+*/ +.theme-nord-atom-syntax-accessibility-custom-comment-contrast .comment { + color: #4c566a; +} + +.theme-nord-atom-syntax-accessibility-custom-comment-contrast +.comment +.markup.link { + color: #4c566a; +} + +.theme-nord-atom-syntax-accessibility-custom-comment-contrast +.punctuation.comment { + color: #4c566a; } From c86cf0ef5aaca57364e7fe3da64692c08faac110 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 26 Sep 2018 23:12:29 +0200 Subject: [PATCH 094/100] increase items per page --- content/meta.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/meta.yml b/content/meta.yml index 5e4ec9e0..75529cc2 100644 --- a/content/meta.yml +++ b/content/meta.yml @@ -28,4 +28,4 @@ author: typekitID: msu4qap -itemsPerPage: 10 +itemsPerPage: 20 From 84c3c29d6faef3540263d7a57c5ec51bbbefe35a Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 27 Sep 2018 20:03:03 +0200 Subject: [PATCH 095/100] package updates --- package.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index a3028e81..5ca208a0 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "dms2dec": "^1.1.0", "fast-exif": "^1.0.1", "fraction.js": "^4.0.9", - "gatsby": "^2.0.9", + "gatsby": "^2.0.11", "gatsby-awesome-pagination": "^0.2.1", "gatsby-image": "^2.0.10", "gatsby-plugin-catch-links": "^2.0.3", @@ -55,7 +55,7 @@ "load-script": "^1.0.0", "node-sass": "^4.9.3", "nord": "^0.2.1", - "pigeon-maps": "^0.10.4", + "pigeon-maps": "^0.11.0", "pigeon-marker": "^0.3.4", "prismjs": "^1.15.0", "react": "^16.5.2", @@ -66,24 +66,24 @@ "react-pose": "^3.3.4", "react-qr-svg": "^2.1.0", "react-time": "^4.3.0", - "react-transition-group": "^2.4.0", + "react-transition-group": "^2.5.0", "slugify": "^1.3.1" }, "devDependencies": { "@babel/node": "^7.0.0", "@babel/preset-env": "^7.1.0", - "babel-eslint": "^9.0.0", + "babel-eslint": "^10.0.1", "eslint": "^5.6.0", "eslint-config-prettier": "^3.1.0", "eslint-loader": "^2.1.1", "eslint-plugin-graphql": "^2.1.1", - "eslint-plugin-prettier": "^2.6.2", + "eslint-plugin-prettier": "^2.7.0", "eslint-plugin-react": "^7.11.1", "markdownlint": "^0.11.0", "markdownlint-cli": "^0.13.0", "prettier": "^1.14.3", "prettier-stylelint": "^0.4.2", - "stylelint": "^9.5.0", + "stylelint": "^9.6.0", "stylelint-config-css-modules": "^1.3.0", "stylelint-config-standard": "^18.2.0", "stylelint-scss": "^3.3.1" From 1e8b3831b505dccf9d8419d4b3ce9c83d1ff3a2f Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 27 Sep 2018 21:14:22 +0200 Subject: [PATCH 096/100] fixes & plugins --- gatsby-config.js | 37 ++++++++++++++++++++++- package.json | 2 ++ src/components/Layout.module.scss | 6 +--- src/components/atoms/SEO.jsx | 5 ++- src/components/molecules/Head.jsx | 12 ++------ src/components/molecules/Menu.module.scss | 4 +-- 6 files changed, 48 insertions(+), 18 deletions(-) diff --git a/gatsby-config.js b/gatsby-config.js index 41faf8f6..ed2d4711 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -132,6 +132,39 @@ module.exports = { siteUrl: `${url}` } }, + { + resolve: 'gatsby-plugin-favicon', + options: { + logo: './src/images/apple-touch-icon.png', + + // WebApp Manifest Configuration + appName: title.toLowerCase(), + appDescription: tagline, + developerName: null, + developerURL: null, + dir: 'auto', + lang: 'en-US', + background: '#e7eef4', + theme_color: '#88bec8', + display: 'minimal-ui', + orientation: 'any', + start_url: '/?homescreen=1', + version: '1.0', + + icons: { + android: true, + appleIcon: true, + appleStartup: true, + coast: false, + favicons: true, + firefox: true, + opengraph: false, + twitter: false, + yandex: false, + windows: false + } + } + }, { resolve: 'gatsby-plugin-feed', options: { @@ -198,7 +231,9 @@ module.exports = { 'gatsby-plugin-sitemap', 'gatsby-plugin-catch-links', 'gatsby-redirect-from', - 'gatsby-plugin-meta-redirect' + 'gatsby-plugin-meta-redirect', + 'gatsby-plugin-sitemap', + 'gatsby-plugin-offline' ] } diff --git a/package.json b/package.json index 5ca208a0..75057f07 100644 --- a/package.json +++ b/package.json @@ -31,10 +31,12 @@ "gatsby-awesome-pagination": "^0.2.1", "gatsby-image": "^2.0.10", "gatsby-plugin-catch-links": "^2.0.3", + "gatsby-plugin-favicon": "^3.1.4", "gatsby-plugin-feed": "^2.0.5", "gatsby-plugin-lunr": "^1.2.0", "gatsby-plugin-matomo": "^0.5.0", "gatsby-plugin-meta-redirect": "^1.1.0", + "gatsby-plugin-offline": "^2.0.5", "gatsby-plugin-react-helmet": "^3.0.0", "gatsby-plugin-sass": "^2.0.1", "gatsby-plugin-sharp": "^2.0.5", diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss index 6ee4942f..d66ea172 100644 --- a/src/components/Layout.module.scss +++ b/src/components/Layout.module.scss @@ -35,7 +35,7 @@ transform: translate3d(0, 0, 0); :global(.has-menu-open) & { - transform: translate3d(0, ($spacer * 8), 0); + transform: translate3d(0, ($spacer * 3), 0); } @media (min-width: $screen-sm) and (min-height: 500px) { @@ -44,9 +44,5 @@ position: relative; z-index: 2; min-height: 500px; - - :global(.has-menu-open) & { - transform: translate3d(0, ($spacer * 5), 0); - } } } diff --git a/src/components/atoms/SEO.jsx b/src/components/atoms/SEO.jsx index c31030fc..a72b53c1 100644 --- a/src/components/atoms/SEO.jsx +++ b/src/components/atoms/SEO.jsx @@ -87,7 +87,10 @@ const MetaTags = ({ title, siteMeta }) => ( - + {/* General tags */} diff --git a/src/components/molecules/Head.jsx b/src/components/molecules/Head.jsx index 72129fc2..fd14b4c2 100644 --- a/src/components/molecules/Head.jsx +++ b/src/components/molecules/Head.jsx @@ -16,18 +16,12 @@ const Head = () => ( { - const { title, tagline } = data.contentYaml + const { title } = data.contentYaml return ( - - + + diff --git a/src/components/molecules/Menu.module.scss b/src/components/molecules/Menu.module.scss index 5159c38f..f63b747e 100644 --- a/src/components/molecules/Menu.module.scss +++ b/src/components/molecules/Menu.module.scss @@ -16,9 +16,9 @@ li { list-style: none; - flex: 0 0 100%; + flex: 0 0 50%; - @media (min-width: $screen-sm) { + @media (min-width: $screen-xs) { flex-basis: 33%; } From 4606b31e30eb714bc45a6d8bd1cabadf65e9bce4 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 27 Sep 2018 21:33:25 +0200 Subject: [PATCH 097/100] fixes --- _aws/redirects.xml | 1 - gatsby-config.js | 4 ++-- src/components/atoms/Hamburger.jsx | 7 ++++++- src/components/atoms/PostLead.jsx | 10 +++++++--- src/components/atoms/PostLead.module.scss | 4 ++++ src/components/atoms/SearchButton.jsx | 7 ++++++- src/components/molecules/IconLinks.jsx | 2 +- src/components/organisms/Footer.jsx | 5 +++-- src/templates/Posts.jsx | 2 +- 9 files changed, 30 insertions(+), 12 deletions(-) diff --git a/_aws/redirects.xml b/_aws/redirects.xml index f16c9e70..c77e87b3 100644 --- a/_aws/redirects.xml +++ b/_aws/redirects.xml @@ -1,4 +1,3 @@ - diff --git a/gatsby-config.js b/gatsby-config.js index ed2d4711..e6f395a1 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -140,8 +140,8 @@ module.exports = { // WebApp Manifest Configuration appName: title.toLowerCase(), appDescription: tagline, - developerName: null, - developerURL: null, + developerName: author.name, + developerURL: author.uri, dir: 'auto', lang: 'en-US', background: '#e7eef4', diff --git a/src/components/atoms/Hamburger.jsx b/src/components/atoms/Hamburger.jsx index f5c0d87f..e173872d 100644 --- a/src/components/atoms/Hamburger.jsx +++ b/src/components/atoms/Hamburger.jsx @@ -2,7 +2,12 @@ import React from 'react' import styles from './Hamburger.module.scss' const Hamburger = props => ( - ) diff --git a/src/components/molecules/IconLinks.jsx b/src/components/molecules/IconLinks.jsx index 99488a2e..16c51224 100644 --- a/src/components/molecules/IconLinks.jsx +++ b/src/components/molecules/IconLinks.jsx @@ -29,7 +29,7 @@ const NetworkIcon = ({ link }) => { const IconLinks = ({ links }) => (

    {links.map(link => ( - + ))} diff --git a/src/components/organisms/Footer.jsx b/src/components/organisms/Footer.jsx index f73e7f6a..c675df47 100644 --- a/src/components/organisms/Footer.jsx +++ b/src/components/organisms/Footer.jsx @@ -18,6 +18,7 @@ const query = graphql` name uri bitcoin + github } } } @@ -43,7 +44,7 @@ export default class Footer extends PureComponent { { - const { name, uri, bitcoin } = data.contentYaml.author + const { name, uri, bitcoin, github } = data.contentYaml.author return (