tyler.durden
/
keep-a-changelog
mirror of https://github.com/olivierlacan/keep-a-changelog.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Sweating the details with styles

This commit is contained in:
Olivier Lacan 2017-05-24 11:38:52 -04:00
parent a0a8e31dfc
commit 57a3020b78
5 changed files with 116 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
source/assets/stylesheets/anchors.sass
View File

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

30
source/assets/stylesheets/application.css.sass
View File

@ -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

12
source/assets/stylesheets/layout.sass
View File

@ -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

71
source/assets/stylesheets/sections.sass
View File

@ -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: ""

63
source/en/1.0.0/index.html.haml
View File

@ -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
= 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
<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
upcoming releases.
%code Deprecated
for soon-to-be removed features.
%li
<code>Removed</code> for deprecated features removed in this
release.
%code Removed
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
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 <code>Unreleased</code> section at the top to
track upcoming changes.
Keep an <code>Unreleased</code> 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 (<code>06-02-2012</code> for
June 2nd, 2012), while many people in the rest of the world write a
robotic-looking <code>2 June 2012</code>, yet pronounce it
differently. <code>2012-06-02</code> 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 <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