diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass index 4dce326..21c00c6 100644 --- a/source/assets/stylesheets/application.css.sass +++ b/source/assets/stylesheets/application.css.sass @@ -33,7 +33,6 @@ h1 margin-bottom: 0 line-height: 1 text-transform: lowercase - width: 50% h2 font-size: 1.2em @@ -97,3 +96,7 @@ pre, code font-family: $source-code-font-family code white-space: nowrap + +@media (min-width: 1077px) + h1 + width: 50% diff --git a/source/assets/stylesheets/layout.sass b/source/assets/stylesheets/layout.sass index e0be2b5..ddcee3d 100644 --- a/source/assets/stylesheets/layout.sass +++ b/source/assets/stylesheets/layout.sass @@ -2,26 +2,28 @@ $break-small: em(480px) $break-medium: em(800px) $break-large: em(1024px) +body + margin: 0 + article margin: 0 auto - width: 65em + max-width: 65em .main background-color: $color-white - margin-bottom: 2em div - padding-left: 20% - padding-right: 20% + padding-left: 5% + padding-right: 5% padding-bottom: 3em aside background-color: lighten(desaturate($color-bark, 5%), 10%) margin-bottom: -3em - margin-left: -35% - margin-right: -35% + margin-left: -5% + margin-right: -5% margin-top: 3em - padding: 2em 20% + padding: 2em 5% text-align: center aside & @@ -41,3 +43,19 @@ article ul line-height: 1.5 list-style-type: square 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% diff --git a/source/assets/stylesheets/sections.sass b/source/assets/stylesheets/sections.sass index 517179e..eaee539 100644 --- a/source/assets/stylesheets/sections.sass +++ b/source/assets/stylesheets/sections.sass @@ -3,7 +3,7 @@ div.header padding-bottom: 0.1em background-color: $color-ocre background-image: image-url("bg-hero@2x.png") - background-size: 100% + background-size: cover h1 color: $color-sand @@ -33,8 +33,8 @@ div.header div.answers margin-top: 12em - padding-left: 25% - padding-right: 25% + padding-left: 5% + padding-right: 5% background-color: $color-white h3 @@ -61,14 +61,9 @@ div.answers h3 font-size: 1.6em font-weight: bold - width: 50% - - h4 - padding-left: 15em ul font-size: 1em - padding-left: 16em p a @@ -102,18 +97,16 @@ div.bad-practices 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-top: 2em - padding-left: 25% - padding-right: 25% + padding-left: 5% + padding-right: 5% background-color: $color-white h3 @@ -123,8 +116,8 @@ div.effort div.frequently-asked-questions padding-top: 2em - padding-left: 25% - padding-right: 25% + padding-left: 5% + padding-right: 5% background-color: $color-white h2 @@ -178,3 +171,31 @@ div.frequently-asked-questions content: "" display: table 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