Create SVG browser header and replace in carousel. Manage strange SVG resizing issues...

diff --git a/framework/application/views/helpers/HomeServices.php b/framework/application/views/helpers/HomeServices.php
index a964ce252b0622549845cc21a2aa45e9d9e092e9..c764b539b3e13df09b517300390fc04c6d5a4cb3 100644 (file)
--- a/framework/application/views/helpers/HomeServices.php
+++ b/framework/application/views/helpers/HomeServices.php
@@ -15,6 +15,21 @@ class Fluidbook_View_Helper_HomeServices extends Fluidbook_View_Helper_HomeLayer
         $res .= '</div>'; // .text\r
 \r
         $res .= '<div class="carousel">';\r
+        $res .= '<div class="window-top-wrapper">';\r
+\r
+        $res .= '<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+                    viewBox="0 0 755 24" xml:space="preserve">\r
+                <style type="text/css">\r
+                    .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#475462;}\r
+                    .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#151E26;}\r
+                </style>\r
+                <path class="st0" d="M0,24V5c0-2.8,2.2-5,5-5h745c2.8,0,5,2.2,5,5v19"/>\r
+                <circle class="st1" cx="16" cy="12" r="3"/>\r
+                <circle class="st1" cx="26" cy="12" r="3"/>\r
+                <circle class="st1" cx="36" cy="12" r="3"/>\r
+                </svg>';\r
+\r
+        $res .= '</div>'; // .window-top-wrapper\r
 \r
         $res .= '<div class="services-examples">';\r
 \r

diff --git a/less/214-home-services.less b/less/214-home-services.less
index 07cd340bbb0f7835b397a358aca91760e541dfb2..726ad7f80cf7ed54e48706cfc3ee7c703e07a964 100644 (file)
--- a/less/214-home-services.less
+++ b/less/214-home-services.less
@@ -27,6 +27,22 @@ section.services {
   }
 }
 
+// Responsive inline SVG (see: https://thatemil.com/blog/2014/04/06/intrinsic-sizing-of-svg-in-responsive-web-design/)
+.window-top-wrapper {
+  padding-top: percentage(24/755); // Intrinsic ratio so SVG scales properly at all sizes
+  position: relative;
+  max-width: 755px;
+  margin: 0 auto;
+
+  svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
 .services-examples {
   position: relative;
   width: 100%;