fix gasp between backgrounds of body and sidebar divs

The issue is the linear-gradient in the body background seems to not working
really correctly with pixel dimensions (in Firefox at least): if you
zoom in / out the page you'll see the body background to not always
correctly update the rendering (and so you'll see a growing gasp for
example).

Due to this issue, there was a gap between the backgrounds of the body and the
sidebar elements. PR linuxfrorg#354 tried to solve this by adjusting the
linear-gradient pixel dimensions, but due to the bug of linear-gradient
implementation, it was not working when window was resized or page zoomed.

As the linear-gradient usage in the body background was clearly already a
workaround to create two vertical color stripes, we replace it with
another workaround using the CSS feature which allows to define multiple
background images with different size and position.

First background image is defined with the sidebar color (using
linear-gradient with only one color) and the width which resolve the
pixel gasp reported in linuxfrorg#354 (which means the width should be the
branding width + body border width). To be able to define a color as an
image, we use again linear-gradient, but, this time it fills all the
stripe with the same color, so we won't have error due to
linear-gradient implementation.

Second image is defined from the first image position for the rest of the body
block with the container color.

This new workaround idea comes from this StackOverflow answer which
explain how to create pixel perfect horizontal stripes:
https://stackoverflow.com/a/24829344

Author: Trim

app/assets/stylesheets/RonRonnement.scss

@@ -9,6 +9,7 @@ $PX_MARGE_GAUCHE: 42px;
 $PX_MARGE_DROITE: 30px;
 $PX_BANDEAU: 7px;
 $PX_BRANDING_LARG: 201px;
+$PX_BODY_BORDER_WIDTH_LEFT_RIGHT: 1px;
 $PX_SITE_PAD_DROIT: 42px;
 $PX_CONT_TOP: 34px;
 

app/assets/stylesheets/contrib/RonRonnement-Classic.scss

@@ -40,6 +40,7 @@ $PX_MARGE_GAUCHE: 42px;
 $PX_MARGE_DROITE: 30px;
 $PX_BANDEAU: 7px;
 $PX_BRANDING_LARG: 201px;
+$PX_BODY_BORDER_WIDTH_LEFT_RIGHT: 1px;
 $PX_SITE_PAD_DROIT: 42px;
 $PX_CONT_TOP: 34px;
 
@@ -88,15 +89,11 @@ body {
   max-width: 150ex;
   margin: 0 auto;
   border: solid $C_BORDER_FONCE;
-  border-width: 0 1px;
-  background: linear-gradient(
-      90deg,
-      $C_CLAIR,
-      $C_CLAIR $PX_BRANDING_LARG,
-      $C_CONTAINER $PX_BRANDING_LARG,
-      $C_CONTAINER
-    )
-    #fff;
+  border-width: 0 $PX_BODY_BORDER_WIDTH_LEFT_RIGHT;
+  background-repeat: no-repeat;
+  background-size: $PX_BRANDING_LARG + $PX_BODY_BORDER_WIDTH_LEFT_RIGHT, auto;
+  background-position: 0, $PX_BRANDING_LARG + $PX_BODY_BORDER_WIDTH_LEFT_RIGHT;
+  background-image: linear-gradient($C_CLAIR, $C_CLAIR), linear-gradient($C_CONTAINER, $C_CONTAINER);
 }
 
 a {
@@ -360,7 +357,6 @@ a.edit_client_app,
   width: $PX_BRANDING_LARG;
   text-align: left;
   font-size: 0.8em;
-  background: $C_CLAIR;
 
   a {
     font-weight: inherit;

app/assets/stylesheets/contrib/RonRonnement-Sepia.scss

@@ -36,6 +36,7 @@ $PX_MARGE_DROITE: 30px;
 $PX_TOP: 16px;
 $PX_BANDEAU: 7px;
 $PX_BRANDING_LARG: 201px;
+$PX_BODY_BORDER_WIDTH_LEFT_RIGHT: 1px;
 $PX_BRANDING_HEIGHT: 186px;
 $PX_SITE_PAD_DROIT: 42px;
 $PX_CONT_TOP: 34px;
@@ -85,8 +86,8 @@ body {
   margin-top: 0;
   margin-bottom: 0;
   padding-top: $PX_TOP;
-  border-left: 1px #333 solid;
-  border-right: 1px #333 solid;
+  border-left: $PX_BODY_BORDER_WIDTH_LEFT_RIGHT #333 solid;
+  border-right: $PX_BODY_BORDER_WIDTH_LEFT_RIGHT #333 solid;
   background: #fff;
 }
 
@@ -285,7 +286,6 @@ input[type="submit"] {
   width: $PX_BRANDING_LARG;
   text-align: left;
   font-size: small;
-  background: $C_CLAIR;
 
   a {
     font-weight: inherit;

app/assets/stylesheets/parts/a_tag.scss

@@ -21,15 +21,11 @@ body {
   max-width: $BODY_MAX_WIDTH;
   margin: 0 auto;
   border: solid #999;
-  border-width: 0 1px;
-  background: linear-gradient(
-      90deg,
-      $C_CLAIR,
-      $C_CLAIR $PX_BRANDING_LARG,
-      $C_CONTAINER $PX_BRANDING_LARG,
-      $C_CONTAINER
-    )
-    #fff;
+  border-width: 0 $PX_BODY_BORDER_WIDTH_LEFT_RIGHT;
+  background-repeat: no-repeat;
+  background-size: $PX_BRANDING_LARG + $PX_BODY_BORDER_WIDTH_LEFT_RIGHT, auto;
+  background-position: 0, $PX_BRANDING_LARG + $PX_BODY_BORDER_WIDTH_LEFT_RIGHT;
+  background-image: linear-gradient($C_CLAIR, $C_CLAIR), linear-gradient($C_CONTAINER, $C_CONTAINER);
 }
 
 a {

app/assets/stylesheets/parts/sidebar.scss

@@ -4,7 +4,6 @@
   text-align: left;
   font-size: 0.8em;
   line-height: 1.3;
-  background: $C_CLAIR;
 
   a {
     font-weight: inherit;