port over more core content styles

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
+<img src="../media/nicephore-niepce.jpg" alt="Nicéphore Niépce, ca. 1795" title="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
+<img src="../media/view_from_the_window_at_le_gras_nicephore_niepce.jpg" alt="View from the Window at Le Gras" title="View from the Window at Le Gras">
 
-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).
 

content/posts/2012-07-16-using-kbd-for-fun-and-profit/index.md

@@ -15,10 +15,6 @@ tags:
 coinhive: true
 ---
 
-<style>
-    @import './post-kbd.css';
-</style>
-
 There's this HTML element meant for marking up keyboard keys named `<kbd>`. 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:

gatsby-config.js

@@ -40,7 +40,7 @@ module.exports = {
             options: {
               maxWidth: 940,
               linkImagesToOriginal: false,
-              sizeByPixelDensity: true,
+              // sizeByPixelDensity: true,
               showCaptions: true,
               backgroundColor: '#dfe8ef'
             }

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",

src/components/atoms/PostTitle.module.scss

@@ -1,4 +1,5 @@
 @import 'variables';
+@import 'mixins';
 
 // Post Title
 /////////////////////////////////////

src/components/molecules/PostMeta.jsx

@@ -21,8 +21,10 @@ const PostMeta = ({ post, meta }) => {
       </div>
 
       <div className={styles.time}>
+        {updated && 'published '}
         <Time value={new Date(date)} titleFormat="YYYY/MM/DD HH:mm" relative />
 
+        {updated && ' • updated '}
         {updated && (
           <Time
             value={new Date(updated)}

src/styles/_alerts.scss

@@ -0,0 +1,37 @@
+@import 'variables';
+
+.alert {
+    padding: $spacer;
+    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;
+
+    > 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%);
+}

src/styles/_buttons.scss

@@ -167,8 +167,8 @@ a.btn-primary {
 .content-download {
     text-align: center;
     display: block;
-    margin-top: $spacer * 2;
-    margin-bottom: $spacer * 2;
+    margin-top: $spacer;
+    margin-bottom: $spacer;
 
     @media (min-width: $screen-xs) {
         display: flex;

src/styles/_content.scss

@@ -0,0 +1,98 @@
+@import 'variables';
+@import 'mixins';
+
+.content {
+    h1,
+    h2 {
+        @include heading-band();
+    }
+
+    h1 {
+        font-size: $font-size-h2;
+    }
+
+    h2 {
+        font-size: $font-size-h3;
+    }
+
+    h3 {
+        font-size: $font-size-h4;
+    }
+
+    h4 {
+        font-size: $font-size-h5;
+    }
+
+    p:last-child {
+        margin-bottom: 0;
+    }
+
+    .gatsby-resp-image-figure,
+    .gatsby-resp-image-wrapper {
+        margin-bottom: $spacer;
+    }
+
+    figcaption {
+        font-size: $font-size-small;
+        color: $brand-grey;
+        font-style: italic;
+        text-align: center;
+        margin-top: -$spacer / 2;
+    }
+
+    .anchor {
+        margin-top: $spacer / 3;
+    }
+
+    // Quotes
+    /////////////////////////////////////
+
+    q {
+        font-style: italic;
+    }
+
+    cite {
+        font-style: normal;
+        text-transform: uppercase;
+    }
+
+    // stylelint-disable no-descending-specificity
+    blockquote,
+    blockquote > p {
+        font-style: italic;
+        color: $brand-grey-light;
+    }
+    // stylelint-enable no-descending-specificity
+
+    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($brand-grey-light, 20%);
+            position: absolute;
+            left: -10px;
+            top: -20px;
+
+            @media (min-width: $screen-xs) {
+                left: 0;
+            }
+
+            @media (min-width: $screen-lg) {
+                top: -30px;
+            }
+        }
+    }
+}

src/styles/_mixins.scss

@@ -115,7 +115,6 @@
 
 @mixin lead() {
     font-size: $font-size-large;
-    line-height: $spacer * 1.15;
 }
 
 // Layout breakout

src/styles/_variables.scss

@@ -13,6 +13,10 @@ $brand-grey: #6b7f88;
 $brand-grey-light: lighten($brand-grey, 15%);
 $brand-grey-dimmed: lighten($brand-grey, 30%);
 
+$alert-info: #f7f1e4;
+$alert-success: #dff0d8;
+$alert-error: #f2dede;
+
 // Backgrounds
 /////////////////////////////////////
 

src/styles/base.scss

@@ -279,60 +279,6 @@ hr {
     @include divider();
 }
 
-// Quotes
-/////////////////////////////////////
-
-q {
-    font-style: italic;
-}
-
-cite {
-    font-style: normal;
-    text-transform: uppercase;
-}
-
-blockquote,
-blockquote > p {
-    font-style: italic;
-    color: $brand-grey-light;
-}
-
-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($brand-grey-light, 20%);
-        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
 /////////////////////////////////////
 
@@ -357,3 +303,5 @@ blockquote {
 
 @import 'code';
 @import 'buttons';
+@import 'alerts';
+@import 'content';

src/templates/Post.module.scss

@@ -41,15 +41,8 @@
 // Post Content
 /////////////////////////////////////
 
-.hentry__content {
-    h1,
-    h2 {
-        @include heading-band();
-    }
-
-    p:last-child {
-        margin-bottom: 0;
-    }
+.hentry__lead {
+    @include lead();
 }
 
 // Goodies download