[fixmystreet.com] More realistic asphalt tile image

The black and yellow background image tiles now look more like asphalt
and less like leather.

Also, high-dpi screens now get a double resolution tile, which avoids
noticeable jpeg artifacting on the yellow #front-main in particular.

Fixes #1715.

7 files changed, 33 insertions, 4 deletions

diff --git a/web/cobrands/fixmystreet.com/_colours.scss b/web/cobrands/fixmystreet.com/_colours.scss
index c72e48d45..523d7b95d 100644
--- a/web/cobrands/fixmystreet.com/_colours.scss
+++ b/web/cobrands/fixmystreet.com/_colours.scss
@@ -5,7 +5,7 @@ $primary_b: #F3B11E; // For the box around the front page postcode form only
 $primary_text: #222;
 
 // Tiled main body background
-$base_bg: #1A1A1A url(images/tile.jpg) 0 0 repeat;
+$base_bg: #272727 url(images/tile.jpg) 0 0 repeat;
 $base_fg: #fff;
 
 $map_nav_bg: #222;
@@ -23,3 +23,5 @@ $itemlist_item_background: #f6f6f6;
 $itemlist_item_background_hover: mix(#fff, $primary, 70%);
 
 $layout_front_stats_color: #222;
+
+$high-dpi-screen: '-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi';
diff --git a/web/cobrands/fixmystreet.com/images/tile-y-border.jpg b/web/cobrands/fixmystreet.com/images/tile-y-border.jpg
deleted file mode 100644
index 41565c3f2..000000000
--- a/web/cobrands/fixmystreet.com/images/tile-y-border.jpg
+++ /dev/null
diff --git a/web/cobrands/fixmystreet.com/images/tile-y.jpg b/web/cobrands/fixmystreet.com/images/tile-y.jpg
index 967a1a718..3c8383714 100644
--- a/web/cobrands/fixmystreet.com/images/tile-y.jpg
+++ b/web/cobrands/fixmystreet.com/images/tile-y.jpg
diff --git a/web/cobrands/fixmystreet.com/images/tile-y@2x.jpg b/web/cobrands/fixmystreet.com/images/tile-y@2x.jpg
new file mode 100644
index 000000000..19699e9d7
--- /dev/null
+++ b/web/cobrands/fixmystreet.com/images/tile-y@2x.jpg
diff --git a/web/cobrands/fixmystreet.com/images/tile.jpg b/web/cobrands/fixmystreet.com/images/tile.jpg
index b412774e4..c3cdb76fb 100644
--- a/web/cobrands/fixmystreet.com/images/tile.jpg
+++ b/web/cobrands/fixmystreet.com/images/tile.jpg
diff --git a/web/cobrands/fixmystreet.com/images/tile@2x.jpg b/web/cobrands/fixmystreet.com/images/tile@2x.jpg
new file mode 100644
index 000000000..bf9c57e0f
--- /dev/null
+++ b/web/cobrands/fixmystreet.com/images/tile@2x.jpg
diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss
index 85dbbd83b..ee9d8725e 100644
--- a/web/cobrands/fixmystreet.com/layout.scss
+++ b/web/cobrands/fixmystreet.com/layout.scss
@@ -67,9 +67,21 @@ h3, h4,
 @import "_colours";
 @import "../sass/layout";
 
+body {
+    @media ($high-dpi-screen) {
+        background-image: url(images/tile@2x.jpg);
+        background-size: 500px;
+    }
+}
+
 // Tiled background stripe, not plain colour
 #front-main {
     background: $primary url(images/tile-y.jpg);
+
+    @media ($high-dpi-screen) {
+        background-image: url(images/tile-y@2x.jpg);
+        background-size: 500px;
+    }
 }
 
 .nav-menu--main {
@@ -83,9 +95,14 @@ h3, h4,
 
 #site-header {
     background: none;
-    border-image-source: url(images/tile-y-border.jpg);
-    border-image-slice: 4 0 0;
+    border-image-source: url(images/tile-y.jpg);
+    border-image-slice: 4 0 0 0;
     border-image-repeat: repeat;
+
+    @media ($high-dpi-screen) {
+        border-image-source: url(images/tile-y@2x.jpg);
+        border-image-slice: 8 0 0 0;
+    }
 }
 body.mappage {
     #site-header {
@@ -255,9 +272,14 @@ body.mappage .mysoc-footer {
 
 // FMS Pro advert
 footer {
-  background: $base_bg;
+  background: $base_bg; // (images/tile.jpg)
   margin: -1em;
   padding: 1em 0;
+
+  @media ($high-dpi-screen) {
+    background-image: url(images/tile@2x.jpg);
+    background-size: 500px;
+  }
 }
 
 .fms-pro-promo {
@@ -265,6 +287,11 @@ footer {
   padding: 2em;
   background: $primary url(images/tile-y.jpg) 0 0 repeat;
 
+  @media ($high-dpi-screen) {
+    background-image: url(images/tile-y@2x.jpg);
+    background-size: 500px;
+  }
+
   p {
     font-size: 1.2em;
     max-width: 26em;