Add glorious @tylerfortune8 styling for 1.0.0

CHANGELOG.md

@@ -6,9 +6,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 ### Added
-- "Why keep a changelog?" section
-- "Who needs a changelog?" section
-- "How do I make a changelog?" section
+- "Why keep a changelog?" section.
+- "Who needs a changelog?" section.
+- "How do I make a changelog?" section.
+- "Frequently Asked Questions" section.
 - New "Guiding Principles" sub-section to "How do I make a changelog?".
 - Simplified and Traditional Chinese translations from @tianshuo.
 - German translation from @mpbzh.
@@ -24,9 +25,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Start versioning based on the current English version at 0.3.0 to help
 translation authors keep things up-to-date.
 - Rewrite "What makes unicorns cry?" section.
-- Rewrite "Ignoring Deprecations" sub-section to clarify the ideal scenario.
-- Improve "Commit log diffs" sub-section to further argument against them.
-- Merge "Why can’t people just use a git log diff?" with "Commit log diffs"
+- Rewrite "Ignoring Deprecations" sub-section to clarify the ideal
+  scenario.
+- Improve "Commit log diffs" sub-section to further argument against
+  them.
+- Merge "Why can’t people just use a git log diff?" with "Commit log
+  diffs"
 - Fix typos in Simplified Chinese and Traditional Chinese translations.
 - Fix typos in Brazilian Portugese translation.
 - Fix typos in Turkish translation.
@@ -46,8 +50,8 @@ translation authors keep things up-to-date.
 
 ## [0.2.0] - 2015-10-06
 ### Changed
-- Remove exclusionary mentions of "open source" since this project can benefit
-both "open" and "closed" source projects equally.
+- Remove exclusionary mentions of "open source" since this project can
+benefit both "open" and "closed" source projects equally.
 
 ## [0.1.0] - 2015-10-06
 ### Added
@@ -113,7 +117,8 @@ notable changes.
 
 ## 0.0.1 - 2014-05-31
 ### Added
-- This CHANGELOG file to hopefully serve as an evolving example of a standardized open source project CHANGELOG.
+- This CHANGELOG file to hopefully serve as an evolving example of a
+  standardized open source project CHANGELOG.
 - CNAME file to enable GitHub Pages custom domain
 - README now contains answers to common questions about CHANGELOGs
 - Good examples and basic guidelines, including proper date formatting.

config.rb

@@ -21,6 +21,7 @@ $languages = {
     und <a href='#{issues_url}'>bei der Übersetzung mithelfen</a>."
   },
   "en"    => {
+    default: true,
     name: "English",
     notice: ""
   },
@@ -120,19 +121,6 @@ class CustomMarkdownRenderer < Redcarpet::Render::HTML
     %Q[<nav role="navigation" class="toc">#{@header}</nav>]
   end
 
-  def preprocess(full_document)
-    version_regex = /Version \*\*\d.\d.\d\*\*/
-    top = full_document.split("<pre").first.split(version_regex).last
-    bottom = full_document.split("</pre>").last
-
-    @header = Redcarpet::Markdown.new(
-      Redcarpet::Render::HTML_TOC.new(nesting_level: 3),
-      { with_toc_data: true }
-    ).render(top + bottom).html_safe
-
-    full_document
-  end
-
   def header(text, header_level)
     slug = text.parameterize
     tag_name = "h#{header_level}"

source/assets/images/keep-a-changelog-mark.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 187.05 184.89"><defs><style>.cls-1{fill:#f4e0c2;}</style></defs><title>Artboard 1 copy 3</title><path class="cls-1" d="M62.09,6.5c-15.39,3.08-27.7,10.71-36.6,22.67C14.11,44.48,7.71,63.39,5.36,88.69c-.92,10,.06,20.05,1.34,31.18a73.74,73.74,0,0,0,15.86,38.56c6.9,8.56,14.82,14.18,24.2,17.19a88.55,88.55,0,0,0,24.67,4.25,45.42,45.42,0,0,0,5.88-.25l3.08-.31c4.24-.43,8.49-.86,12.73-1.37a158.36,158.36,0,0,0,54.68-16.7c14.84-7.75,25.22-19.18,30.84-34,2.62-6.88,3.87-12.67,3.87-18.08a33.91,33.91,0,0,0-.47-5.64c-3-17.59-9.14-32.75-18.9-46.33-12.09-16.83-24.32-28.68-38.48-37.31C103.11,6.76,82.64,2.38,62.09,6.5Zm29.73,8.13c20.19,4.42,38,14.81,52.92,30.87,16.92,18.2,26.56,37.31,29.49,58.42.53,3.91-.09,8.24-.71,12-2.87,17.21-12.3,30.05-28,38.16a155.31,155.31,0,0,1-53,16.14c-4.13.49-8.28.91-13,1.39l-.65.07a50.59,50.59,0,0,1-12.26-.23h0c-5.11-.72-10.89-1.55-16.45-2.87-13.07-3.11-22.7-12-29.42-27.06-5.06-11.37-7.68-24-8-38.7a132.53,132.53,0,0,1,8.5-50.28C25.83,40.4,32.46,27,46.85,19.86,61,12.82,75.74,11.11,91.83,14.63Z"/><path class="cls-1" d="M39.83,44.82C28.74,60.48,23,78.7,22.74,99a74.87,74.87,0,0,0,5.94,32.45c8,19,22.58,30.06,42.21,32,20.68,2,41-2.82,60.49-14.33a60.07,60.07,0,0,0,20.5-19.41,52.54,52.54,0,0,0,8.64-28.54c0-16-7.51-33.07-22.55-50.76a47.36,47.36,0,0,0-5.21-5.23c-23-19.78-44.72-25.81-66.87-18.4C54.05,30.67,45.78,36.43,39.83,44.82ZM148.43,121a50.36,50.36,0,0,1-21.5,22.1c-16.67,9.11-31.92,13.14-47.77,12.67H79c-11.47.45-21.38-2.36-30.31-8.6-5.18-3.61-9.18-8.89-12.24-16.15A80.91,80.91,0,0,1,30,99.42a93.56,93.56,0,0,1,7.57-35.9,89.91,89.91,0,0,1,6.47-12l1.2-2C50.2,41.33,58,37.4,68.19,34c16-5.27,31.72-2.55,49.55,8.56C130.93,50.82,141.12,63,148,78.87,154.56,93.81,154.69,108,148.43,121Z"/><path class="cls-1" d="M104.8,48c-17.06-7.52-32.45-5.88-45.72,4.88C48.76,61.24,42.58,73,39.63,89.81a53.56,53.56,0,0,0,5,34.12c7.85,15.19,20.7,23,37.17,22.56h.06c21.88-1.15,37.79-9.24,48.62-24.76a41.46,41.46,0,0,0,7.84-24,43,43,0,0,0-1.79-12.12C131.2,67.6,120.54,54.95,104.8,48ZM81.6,138.55h-.29c-7.43.59-14.75-1.67-21.77-6.73A27.13,27.13,0,0,1,50,119.1a56.51,56.51,0,0,1-3.8-20.17,62.68,62.68,0,0,1,5.52-25c5-11.51,12.75-18.51,23.78-21.4,9.07-2.36,18.1-1.45,27.59,2.8,13.78,6.16,22.73,17.25,26.62,33s-2,31.1-15.28,40.11C103.49,135.83,92.75,139.14,81.6,138.55Z"/><path class="cls-1" d="M83.47,105.25v14.12H74.93V68.46h8.54V96.28l9.11-9.89h11.16L89.9,100.87l16.81,18.5H95.9Z"/></svg>

source/assets/javascripts/all.js

@@ -1 +1,32 @@
-//= require_tree .
+document.addEventListener("DOMContentLoaded", function(){
+  var select = document.querySelector('.locales select');
+  select.addEventListener('change', function(event){
+    origin = window.location.origin;
+    languageCode = event.currentTarget.selectedOptions[0].value
+    window.location.replace(origin + "/" + languageCode)
+  });
+
+  var faqHeaders = document.querySelectorAll('.frequently-asked-questions h4');
+
+  for(header of faqHeaders){
+    header.addEventListener('click', toggleVisibility);
+  }
+
+  function toggleVisibility(event) {
+    element = event.target;
+    element.classList.toggle('is-visible')
+
+    lastParagraph = element.nextElementSibling;
+    paragraphs = [];
+    paragraphs.push(lastParagraph);
+
+    while (lastParagraph.nextElementSibling.tagName == "P") {
+      lastParagraph = lastParagraph.nextElementSibling;
+      paragraphs.push(lastParagraph)
+    }
+
+    for(paragraph of paragraphs) {
+      paragraph.classList.toggle('is-visible');
+    }
+  }
+});

source/assets/stylesheets/anchors.sass

@@ -0,0 +1,16 @@
+.anchor
+  display: none
+  font-style: normal
+  font-weight: normal
+  position: absolute
+  right: 100%
+  top: 0
+
+.anchor::before
+  line-height: 3.2
+  content: "∞"
+  color: $color-ocre
+  padding-right: 0.1em
+
+.anchor:hover
+  text-decoration: none

source/assets/stylesheets/application.css.sass

@@ -1,71 +1,47 @@
-$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
+$base-font-family: 'Muli', "Helvetica Neue", Helvetica, Arial, sans-serif
 $source-code-font-family: "Source Code Pro", monospace
 
 $color-black: #342828
+$color-white: #FFFFFF
 $color-ocre: #E05735
-$color-gold: #EFA33C
+$color-gold: #faa930
+$color-bark: #3F2B2D
 $color-sand: #F2DDBC
 $color-light-sand: lighten($color-sand, 10%)
 
+@import "layout"
+@import "anchors"
+@import "sections"
+
 html
   font: 16px/1.4 $base-font-family
   color: #342828
-  background-color: #F2DDBC
+  background-color: $color-sand
 
 a
   color: $color-ocre
-  font-weight: bold
   text-decoration: none
 
 a:hover
   text-decoration: underline
 
-.toc
-  position: fixed
-  z-index: 9999
-  top: 10%
-  left: 0
-
-  ul
-    list-style-position: inside
-    list-style-type: decimal-leading-zero
-    padding: 0 0 0 1em
-    li
-      padding-left: 1em
-      line-height: 2
-      a
-        padding: 0 1em
-        line-height: 2
-        display: none
-
-        span
-          display: none
-
-    li:hover
-      color: $color-sand
-      background: $color-black
-    li:hover a
-      color: $color-sand
-      font-weight: bold
-      background-color: $color-black
-      display: inline-block
-
 h1
   color: $color-ocre
-  font-size: 4.7em
+  font-size: 3.2em
   font-weight: bold
   font-family: $base-font-family
   margin-bottom: 0
   line-height: 1
   text-transform: lowercase
+  width: 50%
 
 h2
-  font-size: 1.4em
+  font-size: 1.2em
   margin-top: 0.2em
   margin-bottom: 2em
 
 h1, h2
-  text-align: center
+  text-align: left
 
 h3
   font-size: 1.3em
@@ -77,56 +53,11 @@ h3
 h3:hover .anchor, h3:focus .anchor
   display: block
 
-.anchor
-  display: none
-  font-style: normal
-  font-weight: normal
-  position: absolute
-  right: 100%
-  top: 0
-
-.anchor::before
-  content: '¶'
-
-.anchor:hover
-  text-decoration: none
-
 h3 ~ p
   margin-top: 0
 
-article
-  margin: 0 auto
-  width: 640px
-
-article p
-  font-size: 1.3em
-
-article code
-  border-radius: 0.315em
-  border: 1px solid #ccc
-  padding: 0 0.3em 0.040em
-  font-size: 0.9em
-
-article img
-  margin: 0 auto
-  max-width: 100%
-  text-align: center
-  display: block
-  box-shadow: rgba(0, 0, 0, 0.37) 0px 0px 6px
-  border-radius: 7px
-  padding: 0.4em 0.9em
-
-article ul
-  font-size: 1.1em
-  line-height: 1.5
-  list-style-type: square
-  padding-left: 1em
-
-footer
-  font-size: .7em
-  border-top: 1px solid #e9e6e1
-  margin-top: 1em
-  margin-bottom: 2em
+h1, h2, h3
+  margin-top: 0
   padding-top: 1em
 
 .license
@@ -138,18 +69,23 @@ footer
 .about, .license
   margin-top: 0
 
-.changelog
-  border: 1px solid #aaa
-  margin: 0 0.5em
-  padding: 1em
-  overflow-x: auto
-  height: 20em
-  font-size: 0.9em
+.locales, .mark
+  margin-bottom: -2em
+  margin-top: 2em
+  margin-right: 2em
+
+.mark
+  margin-left: 3em
+  float: left
+
+.locales
+  float: right
 
 .locales li
+  float: right
+  font-size: 0.7em
   display: inline
   list-style-type: none
-  padding-right: 20px
   white-space: nowrap
 
 pre, code

source/assets/stylesheets/layout.sass

@@ -0,0 +1,31 @@
+$break-small: em(480px)
+$break-medium: em(800px)
+$break-large: em(1024px)
+
+article
+  margin: 0 auto
+  width: 65em
+
+.main
+  background-color: $color-white
+  margin-bottom: 2em
+
+  div
+    padding-left: 20%
+    padding-right: 20%
+    padding-bottom: 3em
+
+article p
+  font-size: 1.3em
+
+article code
+  border-radius: 0.315em
+  border: 1px solid #ccc
+  padding: 0 0.3em 0.040em
+  font-size: 0.9em
+
+article ul
+  font-size: 1.1em
+  line-height: 1.5
+  list-style-type: square
+  padding-left: 1em

source/assets/stylesheets/sections.sass

@@ -0,0 +1,151 @@
+div.header
+  padding-top: 6em
+  padding-bottom: 1em
+  background-color: $color-ocre
+  background-image: image-url("bg-hero@2x.png")
+  background-size: 100%
+
+  h1
+    color: $color-sand
+
+  h2
+    font-weight: normal
+
+  .title
+    width: 80%
+    margin: 0 auto
+
+  .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)
+
+div.answers
+  margin-top: 12em
+  padding-left: 25%
+  padding-right: 25%
+  background-color: $color-white
+
+  h3
+    font-size: 1.7em
+    color: $color-ocre
+
+  a
+    color: $color-gold
+
+  p
+    font-size: 1em
+
+.good-practices
+  background-color: $color-gold
+  background-image: image-url("bg-img1@2x.png")
+  background-position: bottom left
+  background-repeat: no-repeat
+  background-size: 100%
+
+  h3
+    font-size: 1.6em
+    font-weight: bold
+    width: 50%
+
+  h4
+    padding-left: 13em
+
+  ul
+    font-size: 1em
+    padding-left: 14em
+
+  a
+    color: $color-white
+    text-decoration: underline
+
+div.bad-practices
+  color: $color-white
+  background-color: $color-bark
+  background-image: image-url("bg-img2@2x.png")
+  background-position: bottom left
+  background-repeat: no-repeat
+  background-size: 100%
+
+  a
+    color: $color-gold
+    text-decoration: underline
+
+  h3
+    padding-top: 3em
+    font-size: 1.7em
+    color: $color-gold
+    float: left
+    width: 35%
+
+  h4, p
+    padding-left: 12em
+  p
+    clear: left
+    font-size: 1em
+
+div.effort
+  padding-left: 25%
+  padding-right: 25%
+  background-color: $color-white
+
+  h3
+    font-size: 1.6em
+    font-weight: bold
+    color: $color-ocre
+
+div.frequently-asked-questions
+  padding-left: 25%
+  padding-right: 25%
+  background-color: $color-white
+
+  h2
+    color: $color-ocre
+
+  h4
+    cursor: pointer
+    border-bottom: 1px solid black
+    padding: 0.4em 1.1em
+
+    &:after
+      content: "⌄"
+      text-align: right
+      float: right
+      font-size: 2.8em
+      line-height: 0.4
+      margin-right: -0.3em
+
+
+    &.is-visible:after
+      content: "-"
+
+  h4 ~ p
+    display: none
+    font-size: 0.9em
+
+  h4 ~ p.is-visible
+    display: inherit
+
+.footer
+  font-size: .6em
+  font-weight: normal
+  border-top: 1px solid #e9e6e1
+  padding-top: 1em
+  padding-left: 2em
+  padding-right: 2em
+
+  background-color: $color-ocre
+  color: $color-white
+
+  a
+    color: $color-black
+
+  &:after
+    content: ""
+    display: table
+    clear: both

source/assets/stylesheets/table-of-contents.sass

@@ -0,0 +1,29 @@
+.toc
+  position: fixed
+  z-index: 9999
+  top: 10%
+  left: 0
+
+  ul
+    list-style-position: inside
+    list-style-type: decimal-leading-zero
+    padding: 0 0 0 1em
+    li
+      padding-left: 1em
+      line-height: 2
+      a
+        padding: 0 1em
+        line-height: 2
+        display: none
+
+        span
+          display: none
+
+    li:hover
+      color: $color-sand
+      background: $color-black
+    li:hover a
+      color: $color-sand
+      font-weight: bold
+      background-color: $color-black
+      display: inline-block

source/layouts/layout.html.haml

@@ -1,41 +1,42 @@
 !!! 5
 %html
-  %head{lang: current_page.data.language}
-    %meta{charset: 'utf-8'}
-    %meta{content: 'IE=edge', 'http-equiv' => 'X-UA-Compatible'}
-    %meta{name: 'viewport', content: 'width=device-width, initial-scale=1.0'}
-    %meta{name: 'description', content: current_page.data.description}
+  %head{ lang: current_page.data.language }
+    %meta{ charset: 'utf-8' }
+    %meta{ content: 'IE=edge', 'http-equiv' => 'X-UA-Compatible' }
+    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0' }
+    %meta{ name: 'description', content: current_page.data.description }
 
     -# Open Graph
 
-    %meta{property: 'og:article:publisher', content: config.publisher_url}
-    %meta{property: 'og:title', content: current_page.data.title}
-    %meta{property: 'og:type', content: 'article'}
-    %meta{property: 'og:url', content: path_to_url(current_page.url)}
-    %meta{property: 'og:description', content: current_page.data.description}
+    %meta{ property: 'og:article:publisher', content: config.publisher_url }
+    %meta{ property: 'og:title', content: current_page.data.title }
+    %meta{ property: 'og:type', content: 'article' }
+    %meta{ property: 'og:url', content: path_to_url(current_page.url) }
+    %meta{ property: 'og:description', content: current_page.data.description }
     = yield_content :og
 
     -# Icons
 
-    %link{rel: 'canonical', href: path_to_url(current_page.url)}
+    %link{ rel: 'canonical', href: path_to_url(current_page.url) }
 
     %title= current_page.data.title
+
+    %link{ rel: "stylesheet", href: "https://fonts.googleapis.com/css?family=Muli:400,700" }
     = stylesheet_link_tag '//fonts.googleapis.com/css?family=Source+Code+Pro:400,700'
     = stylesheet_link_tag 'application'
-
-    :javascript
-      try{Typekit.load();}catch(e){}
+    = javascript_include_tag 'all'
 
   %body
     %article
-      %header{role: "banner"}
-        %nav.locales{role: "navigation"}
-          %ul
+      %header{ role: "banner" }
+        = image_tag "keep-a-changelog-mark.svg", width: 100, class: "mark"
+        %nav.locales{ role: "navigation" }
+          %select
             - $languages.each do |language|
-              %li= link_to "#{language.last[:name]}", "/#{language.first}/",
-              { rel: "alternate", lang: "#{language}", hreflang: "#{language}" }
+              - selected = current_page.metadata[:page][:language] == language.first
+              %option{ selected: selected, label: language.last[:name], value: language.first }
 
-      .main{role: "main"}
+      .main{ role: "main" }
         - if current_page.metadata[:page][:version] != $last_version
           - code = current_page.metadata[:page][:language]
           - versions = Dir.entries("source/#{code}") - %w[. ..]
@@ -55,14 +56,14 @@
 
         = yield
 
-      %footer.clearfix{role: "banner"}
-        %p.license
-          This project is
-          #{link_to "MIT Licensed", "http://choosealicense.com/licenses/mit/"}.
-        %p.about
-          #{link_to "Typed", "https://github.com/olivierlacan/keep-a-changelog/"}
-          with trepidation by
-          #{link_to "Olivier Lacan", "http://olivierlacan.com/"}.
+        %footer.footer.clearfix{ role: "banner" }
+          %p.license
+            This project is
+            #{link_to "MIT Licensed", "http://choosealicense.com/licenses/mit/"}.
+          %p.about
+            #{link_to "Typed", "https://github.com/olivierlacan/keep-a-changelog/"}
+            with trepidation by
+            #{link_to "Olivier Lacan", "http://olivierlacan.com/"}.
 
   - unless config.gauges_id.blank?
     :javascript