From 1c6149a23532bbd1c43bc014ed704d04ff936818 Mon Sep 17 00:00:00 2001 From: Leonard Lamprecht Date: Wed, 30 Dec 2015 11:30:34 +0100 Subject: [PATCH] Position background differently on big screens --- source/assets/css/foundation/_site.scss | 56 ++++++++++++++++----- source/assets/css/regions/_contentinfo.scss | 2 + 2 files changed, 45 insertions(+), 13 deletions(-) diff --git a/source/assets/css/foundation/_site.scss b/source/assets/css/foundation/_site.scss index c5074ea..8d3fcc7 100644 --- a/source/assets/css/foundation/_site.scss +++ b/source/assets/css/foundation/_site.scss @@ -1,10 +1,20 @@ -* { @include box-sizing(border-box); } +* { + @include box-sizing(border-box); +} @include establish-baseline; -%reset-margin { margin: 0; } -%reset-border { border: 0; } -%reset-padding { padding: 0; } +%reset-margin { + margin: 0; +} + +%reset-border { + border: 0; +} + +%reset-padding { + padding: 0; +} %text { font-family: $font-family-text; @@ -14,26 +24,46 @@ html { @extend %text; overflow-x: hidden; + text: { rendering: optimizeLegibility; align: center; } - background: image-url("textures/grey-prism.svg") center; + + background: image-url('textures/grey-prism.svg'); -webkit-tap-highlight-color: rgba($black, 0); - &.toolkit-baseline { @include debug-vertical-alignment; } + &.toolkit-baseline { + @include debug-vertical-alignment; + } + } -body { background: none; } +body { + background: none; +} -@mixin theme-selection { background: $color-background-shade; } - -::-moz-selection { @include theme-selection; } -::selection { @include theme-selection; } +@mixin theme-selection { + background: $color-background-shade; +} +::-moz-selection { + @include theme-selection; +} +::selection { + @include theme-selection; +} @include breakpoint($tablet-large) { - html, - body { height: 100%; } + + html, body { + height: 100%; + } + + html { + background-repeat: repeat-x; + background-position: left top; + } + } diff --git a/source/assets/css/regions/_contentinfo.scss b/source/assets/css/regions/_contentinfo.scss index e288d57..bd8d9a9 100644 --- a/source/assets/css/regions/_contentinfo.scss +++ b/source/assets/css/regions/_contentinfo.scss @@ -2,6 +2,7 @@ @include padding-leader; @include padding-trailer; color: $color-text-weak; + background: image-url('textures/grey-prism.svg') left top repeat-x; .container { @include padding-leader; @@ -30,6 +31,7 @@ &:hover, &:focus { color: $color-text-strong; } } + } .contentinfo-tools,