mirror of
https://github.com/olivierlacan/keep-a-changelog.git
synced 2025-07-29 16:54:12 +02:00
Merge pull request #207 from Calinou/responsive-design
Make the website use responsive design
This commit is contained in:
commit
6f72147e44
@ -33,7 +33,6 @@ h1
|
|||||||
margin-bottom: 0
|
margin-bottom: 0
|
||||||
line-height: 1
|
line-height: 1
|
||||||
text-transform: lowercase
|
text-transform: lowercase
|
||||||
width: 50%
|
|
||||||
|
|
||||||
h2
|
h2
|
||||||
font-size: 1.2em
|
font-size: 1.2em
|
||||||
@ -97,3 +96,7 @@ pre, code
|
|||||||
font-family: $source-code-font-family
|
font-family: $source-code-font-family
|
||||||
code
|
code
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
|
|
||||||
|
@media (min-width: 1077px)
|
||||||
|
h1
|
||||||
|
width: 50%
|
||||||
|
@ -2,26 +2,28 @@ $break-small: em(480px)
|
|||||||
$break-medium: em(800px)
|
$break-medium: em(800px)
|
||||||
$break-large: em(1024px)
|
$break-large: em(1024px)
|
||||||
|
|
||||||
|
body
|
||||||
|
margin: 0
|
||||||
|
|
||||||
article
|
article
|
||||||
margin: 0 auto
|
margin: 0 auto
|
||||||
width: 65em
|
max-width: 65em
|
||||||
|
|
||||||
.main
|
.main
|
||||||
background-color: $color-white
|
background-color: $color-white
|
||||||
margin-bottom: 2em
|
|
||||||
|
|
||||||
div
|
div
|
||||||
padding-left: 20%
|
padding-left: 5%
|
||||||
padding-right: 20%
|
padding-right: 5%
|
||||||
padding-bottom: 3em
|
padding-bottom: 3em
|
||||||
|
|
||||||
aside
|
aside
|
||||||
background-color: lighten(desaturate($color-bark, 5%), 10%)
|
background-color: lighten(desaturate($color-bark, 5%), 10%)
|
||||||
margin-bottom: -3em
|
margin-bottom: -3em
|
||||||
margin-left: -35%
|
margin-left: -5%
|
||||||
margin-right: -35%
|
margin-right: -5%
|
||||||
margin-top: 3em
|
margin-top: 3em
|
||||||
padding: 2em 20%
|
padding: 2em 5%
|
||||||
text-align: center
|
text-align: center
|
||||||
|
|
||||||
aside &
|
aside &
|
||||||
@ -41,3 +43,19 @@ article ul
|
|||||||
line-height: 1.5
|
line-height: 1.5
|
||||||
list-style-type: square
|
list-style-type: square
|
||||||
padding-left: 1em
|
padding-left: 1em
|
||||||
|
|
||||||
|
@media (min-width: 1077px)
|
||||||
|
body
|
||||||
|
margin: 8px
|
||||||
|
|
||||||
|
.main
|
||||||
|
margin-bottom: 2em
|
||||||
|
|
||||||
|
div
|
||||||
|
padding-left: 20%
|
||||||
|
padding-right: 20%
|
||||||
|
|
||||||
|
aside
|
||||||
|
margin-left: -35%
|
||||||
|
margin-right: -35%
|
||||||
|
padding: 2em 20%
|
||||||
|
@ -3,7 +3,7 @@ div.header
|
|||||||
padding-bottom: 0.1em
|
padding-bottom: 0.1em
|
||||||
background-color: $color-ocre
|
background-color: $color-ocre
|
||||||
background-image: image-url("bg-hero@2x.png")
|
background-image: image-url("bg-hero@2x.png")
|
||||||
background-size: 100%
|
background-size: cover
|
||||||
|
|
||||||
h1
|
h1
|
||||||
color: $color-sand
|
color: $color-sand
|
||||||
@ -33,8 +33,8 @@ div.header
|
|||||||
|
|
||||||
div.answers
|
div.answers
|
||||||
margin-top: 12em
|
margin-top: 12em
|
||||||
padding-left: 25%
|
padding-left: 5%
|
||||||
padding-right: 25%
|
padding-right: 5%
|
||||||
background-color: $color-white
|
background-color: $color-white
|
||||||
|
|
||||||
h3
|
h3
|
||||||
@ -61,14 +61,9 @@ div.answers
|
|||||||
h3
|
h3
|
||||||
font-size: 1.6em
|
font-size: 1.6em
|
||||||
font-weight: bold
|
font-weight: bold
|
||||||
width: 50%
|
|
||||||
|
|
||||||
h4
|
|
||||||
padding-left: 15em
|
|
||||||
|
|
||||||
ul
|
ul
|
||||||
font-size: 1em
|
font-size: 1em
|
||||||
padding-left: 16em
|
|
||||||
|
|
||||||
p
|
p
|
||||||
a
|
a
|
||||||
@ -102,18 +97,16 @@ div.bad-practices
|
|||||||
font-size: 1.7em
|
font-size: 1.7em
|
||||||
color: $color-gold
|
color: $color-gold
|
||||||
float: left
|
float: left
|
||||||
width: 35%
|
|
||||||
|
|
||||||
h4, p
|
|
||||||
padding-left: 12em
|
|
||||||
p
|
p
|
||||||
clear: left
|
clear: left
|
||||||
font-size: 1em
|
font-size: 1em
|
||||||
|
|
||||||
div.effort
|
div.effort
|
||||||
padding-top: 2em
|
padding-top: 2em
|
||||||
padding-left: 25%
|
padding-left: 5%
|
||||||
padding-right: 25%
|
padding-right: 5%
|
||||||
background-color: $color-white
|
background-color: $color-white
|
||||||
|
|
||||||
h3
|
h3
|
||||||
@ -123,8 +116,8 @@ div.effort
|
|||||||
|
|
||||||
div.frequently-asked-questions
|
div.frequently-asked-questions
|
||||||
padding-top: 2em
|
padding-top: 2em
|
||||||
padding-left: 25%
|
padding-left: 5%
|
||||||
padding-right: 25%
|
padding-right: 5%
|
||||||
background-color: $color-white
|
background-color: $color-white
|
||||||
|
|
||||||
h2
|
h2
|
||||||
@ -178,3 +171,31 @@ div.frequently-asked-questions
|
|||||||
content: ""
|
content: ""
|
||||||
display: table
|
display: table
|
||||||
clear: both
|
clear: both
|
||||||
|
|
||||||
|
@media (min-width: 1077px)
|
||||||
|
div.answers
|
||||||
|
padding-left: 25%
|
||||||
|
padding-right: 25%
|
||||||
|
|
||||||
|
div.effort
|
||||||
|
padding-left: 25%
|
||||||
|
padding-right: 25%
|
||||||
|
|
||||||
|
div.frequently-asked-questions
|
||||||
|
padding-left: 25%
|
||||||
|
padding-right: 25%
|
||||||
|
|
||||||
|
.good-practices
|
||||||
|
h3
|
||||||
|
width: 50%
|
||||||
|
h4
|
||||||
|
padding-left: 15em
|
||||||
|
ul
|
||||||
|
padding-left: 16em
|
||||||
|
|
||||||
|
.bad-practices
|
||||||
|
h3
|
||||||
|
width: 35%
|
||||||
|
|
||||||
|
h4, p
|
||||||
|
padding-left: 12em
|
||||||
|
Loading…
x
Reference in New Issue
Block a user