From 57a3020b78ed67cb77f537e685ac5caaff478db8 Mon Sep 17 00:00:00 2001 From: Olivier Lacan Date: Wed, 24 May 2017 11:38:52 -0400 Subject: [PATCH] Sweating the details with styles --- source/assets/stylesheets/anchors.sass | 3 +- .../assets/stylesheets/application.css.sass | 30 ++++---- source/assets/stylesheets/layout.sass | 12 ++++ source/assets/stylesheets/sections.sass | 71 +++++++++++++------ source/en/1.0.0/index.html.haml | 63 ++++++++-------- 5 files changed, 116 insertions(+), 63 deletions(-) diff --git a/source/assets/stylesheets/anchors.sass b/source/assets/stylesheets/anchors.sass index 1d05765..bde83e2 100644 --- a/source/assets/stylesheets/anchors.sass +++ b/source/assets/stylesheets/anchors.sass @@ -13,4 +13,5 @@ padding-right: 0.1em .anchor:hover - text-decoration: none + a + text-decoration: none diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass index 6daa2b5..92146fa 100644 --- a/source/assets/stylesheets/application.css.sass +++ b/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 - float: left +.about + text-align: center .about - float: right - -.about, .license margin-top: 0 -.locales, .mark - margin-bottom: -2em - margin-top: 2em - margin-right: 2em +header + .locales, .mark + margin-bottom: -2em + margin-top: 2em + margin-right: 2em -.mark - margin-left: 3em - float: left + .mark + margin-left: 3em + float: left + +.footer + line-height: 2.2 + + .mark + float: left .locales float: right diff --git a/source/assets/stylesheets/layout.sass b/source/assets/stylesheets/layout.sass index 7df30f1..e0be2b5 100644 --- a/source/assets/stylesheets/layout.sass +++ b/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 diff --git a/source/assets/stylesheets/sections.sass b/source/assets/stylesheets/sections.sass index 1fc8ff0..517179e 100644 --- a/source/assets/stylesheets/sections.sass +++ b/source/assets/stylesheets/sections.sass @@ -1,6 +1,6 @@ div.header - padding-top: 6em - padding-bottom: 1em + padding-top: 5em + 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 - color: $color-white - text-decoration: underline + p + a + 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 - color: $color-gold - text-decoration: underline + code + color: $color-black + 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 - padding: 0.4em 1.1em + border-bottom: 1px solid transparentize($color-bark, 0.8) + 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: "" diff --git a/source/en/1.0.0/index.html.haml b/source/en/1.0.0/index.html.haml index b90616a..05ad279 100644 --- a/source/en/1.0.0/index.html.haml +++ b/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 #{current_page.metadata[:page][:version]} + = 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 - = link_to "Semantic Versioning.", semver + Mention whether you follow #{link_to "Semantic Versioning", semver}. %a.anchor{ href: "#types", aria_hidden: "true" } %h4#types Types of changes %ul %li - Added for new features. + %code Added + for new features. %li - Changed for changes in existing functionality. + %code Changed + for changes in existing functionality. %li - Deprecated for once-stable features removed in - upcoming releases. + %code Deprecated + for soon-to-be removed features. %li - Removed for deprecated features removed in this - release. + %code Removed + for now removed features. %li - Fixed for any bug fixes. + %code Fixed + for any bug fixes. %li - Security to invite users to upgrade in case of - vulnerabilities. + %code Security + 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 Unreleased section at the top to - track upcoming changes. + Keep an Unreleased section at the top to track upcoming + 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, - 2012, which makes *no* sense), while many people in the rest of the - world write a robotic-looking "2 June 2012", yet pronounce it - differently. "2012-06-02" works logically from largest to smallest, - doesn't overlap in ambiguous ways with other date formats, and is an - [ISO standard][iso]. Thus, it is the recommended date format for - changelogs. + In the U.S., people put the month first (06-02-2012 for + June 2nd, 2012), while many people in the rest of the world write a + robotic-looking 2 June 2012, yet pronounce it + differently. 2012-06-02 works logically from largest to + smallest, doesn't overlap in ambiguous ways with other date formats, + and is an #{link_to "ISO standard", iso}. Thus, it is the + recommended date format for changelogs. - %p - There’s more. Help me collect those unicorn tears by + %aside + 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 #{link_to "pitch in", gh}. + %p + So please #{link_to "pitch in", gh}. .press - %h3 Press + %h3 Conversations %p I went on #{link_to "The Changelog podcast", thechangelog} about why maintainers and contributors should care, and the