Sweating the details with styles

source/assets/stylesheets/anchors.sass

@@ -13,4 +13,5 @@
   padding-right: 0.1em
 
 .anchor:hover
-  text-decoration: none
+  a
+    text-decoration: none

source/assets/stylesheets/application.css.sass

@@ -6,7 +6,7 @@ $color-white: #FFFFFF
 $color-ocre: #E05735
 $color-gold: #faa930
 $color-bark: #3F2B2D
-$color-sand: #F2DDBC
+$color-sand: #FEECD3
 $color-light-sand: lighten($color-sand, 10%)
 
 @import "layout"
@@ -60,23 +60,27 @@ h1, h2, h3
   margin-top: 0
   padding-top: 1em
 
-.license
+.about
-  float: left
+  text-align: center
 
 .about
-  float: right
-
-.about, .license
   margin-top: 0
 
-.locales, .mark
+header
-  margin-bottom: -2em
+  .locales, .mark
-  margin-top: 2em
+    margin-bottom: -2em
-  margin-right: 2em
+    margin-top: 2em
+    margin-right: 2em
 
-.mark
+  .mark
-  margin-left: 3em
+    margin-left: 3em
-  float: left
+    float: left
+
+.footer
+  line-height: 2.2
+
+  .mark
+    float: left
 
 .locales
   float: right

source/assets/stylesheets/layout.sass

@@ -15,6 +15,18 @@ article
     padding-right: 20%
     padding-bottom: 3em
 
+    aside
+      background-color: lighten(desaturate($color-bark, 5%), 10%)
+      margin-bottom: -3em
+      margin-left: -35%
+      margin-right: -35%
+      margin-top: 3em
+      padding: 2em 20%
+      text-align: center
+
+    aside &
+      background-position: top
+
 article p
   font-size: 1.3em
 

source/assets/stylesheets/sections.sass

@@ -1,6 +1,6 @@
 div.header
-  padding-top: 6em
+  padding-top: 5em
-  padding-bottom: 1em
+  padding-bottom: 0.1em
   background-color: $color-ocre
   background-image: image-url("bg-hero@2x.png")
   background-size: 100%
@@ -11,19 +11,25 @@ div.header
   h2
     font-weight: normal
 
+  a
+    color: $color-black
+
   .title
     width: 80%
     margin: 0 auto
+    margin-bottom: -2em
 
   .changelog
-    margin: 1em 0.5em
-    padding: 1em
-    overflow-x: auto
-    height: 20em
-    font-size: 0.8em
-    margin-bottom: -16em
     background-color: $color-white
     box-shadow: 0px 4px 12px 0px hsla(0, 0%, 0%, 0.2)
+    font-size: 0.8em
+    height: 20em
+    margin-bottom: -14em
+    margin-left: 0.5em
+    margin-right: 0.5em
+    margin-top: 1em
+    overflow-x: auto
+    padding: 1em
 
 div.answers
   margin-top: 12em
@@ -47,6 +53,10 @@ div.answers
   background-position: bottom left
   background-repeat: no-repeat
   background-size: 100%
+  padding-top: 2em
+
+  a.anchor
+    color: $color-black
 
   h3
     font-size: 1.6em
@@ -54,15 +64,16 @@ div.answers
     width: 50%
 
   h4
-    padding-left: 13em
+    padding-left: 15em
 
   ul
     font-size: 1em
-    padding-left: 14em
+    padding-left: 16em
 
-  a
+  p
-    color: $color-white
+    a
-    text-decoration: underline
+      color: $color-white
+      text-decoration: underline
 
 div.bad-practices
   color: $color-white
@@ -71,13 +82,23 @@ div.bad-practices
   background-position: bottom left
   background-repeat: no-repeat
   background-size: 100%
+  padding-top: 3em
 
-  a
+  code
-    color: $color-gold
+    color: $color-black
-    text-decoration: underline
+    background-color: desaturate(lighten($color-bark, 50%), 10%)
+    border: none
+
+  p, aside
+    a
+      color: $color-gold
+      text-decoration: underline
+
+  aside
+    a
+      text-decoration: none
 
   h3
-    padding-top: 3em
     font-size: 1.7em
     color: $color-gold
     float: left
@@ -90,6 +111,7 @@ div.bad-practices
     font-size: 1em
 
 div.effort
+  padding-top: 2em
   padding-left: 25%
   padding-right: 25%
   background-color: $color-white
@@ -100,6 +122,7 @@ div.effort
     color: $color-ocre
 
 div.frequently-asked-questions
+  padding-top: 2em
   padding-left: 25%
   padding-right: 25%
   background-color: $color-white
@@ -107,10 +130,15 @@ div.frequently-asked-questions
   h2
     color: $color-ocre
 
+  h3
+    color: $color-ocre
+    margin-bottom: 1.5em
+    font-size: 1.7em
+
   h4
     cursor: pointer
-    border-bottom: 1px solid black
+    border-bottom: 1px solid transparentize($color-bark, 0.8)
-    padding: 0.4em 1.1em
+    padding: 0 1.1em 1.3em 0
 
     &:after
       content: "⌄"
@@ -140,10 +168,11 @@ div.frequently-asked-questions
   padding-right: 2em
 
   background-color: $color-ocre
-  color: $color-white
+  color: $color-sand
 
   a
-    color: $color-black
+    color: $color-white
+    text-decoration: underline
 
   &:after
     content: ""

source/en/1.0.0/index.html.haml

@@ -14,14 +14,16 @@ version: 1.0.0
 - thechangelog = "http://5by5.tv/changelog/127"
 - vandamme = "https://github.com/tech-angels/vandamme/"
 - iso = "http://www.iso.org/iso/home/standards/iso8601.htm"
+- ghr = "https://help.github.com/articles/creating-releases/"
 
 .header
   .title
     %h1 Keep a Changelog
-
     %h2 Don’t let your friends dump git logs into changelogs.
 
-  Version <strong>#{current_page.metadata[:page][:version]}</strong>
+  = link_to changelog do
+    Version
+    %strong= current_page.metadata[:page][:version]
 
   %pre.changelog= File.read("CHANGELOG.md")
 
@@ -75,36 +77,40 @@ version: 1.0.0
     %li
       The release date of each versions is displayed.
     %li
-      Mention if the project follows
+      Mention whether you follow #{link_to "Semantic Versioning", semver}.
-      = link_to "Semantic Versioning.", semver
 
   %a.anchor{ href: "#types", aria_hidden: "true" }
   %h4#types Types of changes
 
   %ul
     %li
-      <code>Added</code> for new features.
+      %code Added
+      for new features.
     %li
-      <code>Changed</code> for changes in existing functionality.
+      %code Changed
+      for changes in existing functionality.
     %li
-      <code>Deprecated</code> for once-stable features removed in
+      %code Deprecated
-      upcoming releases.
+      for soon-to-be removed features.
     %li
-      <code>Removed</code> for deprecated features removed in this
+      %code Removed
-      release.
+      for now removed features.
     %li
-      <code>Fixed</code> for any bug fixes.
+      %code Fixed
+      for any bug fixes.
     %li
-      <code>Security</code> to invite users to upgrade in case of
+      %code Security
-      vulnerabilities.
+      in case of vulnerabilities.
 
 .effort
-  %a.anchor{ href: "#effort", aria_hidden: "true" }
+
-  %h3#effort How can I reduce the effort required to maintain a changelog?
+  %h3#effort
+    %a.anchor{ href: "#effort", aria_hidden: "true" }
+    How can I reduce the effort required to maintain a changelog?
 
   %p
-    Keep an <code>Unreleased</code> section at the top to
+    Keep an <code>Unreleased</code> section at the top to track upcoming
-    track upcoming changes.
+    changes.
 
   %p This serves two purposes:
 
@@ -161,16 +167,16 @@ version: 1.0.0
     Confusing Dates
 
   %p
-    In the U.S., people put the month first ("06-02-2012" for June 2nd,
+    In the U.S., people put the month first (<code>06-02-2012</code> for
-    2012, which makes *no* sense), while many people in the rest of the
+    June 2nd, 2012), while many people in the rest of the world write a
-    world write a robotic-looking "2 June 2012", yet pronounce it
+    robotic-looking <code>2 June 2012</code>, yet pronounce it
-    differently. "2012-06-02" works logically from largest to smallest,
+    differently. <code>2012-06-02</code> works logically from largest to
-    doesn't overlap in ambiguous ways with other date formats, and is an
+    smallest, doesn't overlap in ambiguous ways with other date formats,
-    [ISO standard][iso]. Thus, it is the recommended date format for
+    and is an #{link_to "ISO standard", iso}. Thus, it is the
-    changelogs.
+    recommended date format for changelogs.
 
-  %p
+  %aside
-    There’s more. Help me collect those unicorn tears by
+    There’s more. Help me collect these antipatterns by
     = link_to "opening an issue", "#issues"
     or a pull request.
 
@@ -298,10 +304,11 @@ version: 1.0.0
     This is because I want our community to reach a consensus. I believe
     the discussion is as important as the end result.
 
-  %p So please <strong>#{link_to "pitch in", gh}</strong>.
+  %p
+    So please <strong>#{link_to "pitch in", gh}</strong>.
 
 .press
-  %h3 Press
+  %h3 Conversations
   %p
     I went on #{link_to "The Changelog podcast", thechangelog}
     about why maintainers and contributors should care, and the