ID-126 Provide SVG versions of divider in multiple colours

Author: Mat Mannion

dist/images/id6a-logotype.png

@@ -1,3 +1,112 @@
+.thumbnail > img,
+.thumbnail a > img,
+.carousel-inner > .item > img,
+.carousel-inner > .item > a > img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+.btn-group-lg > .btn {
+  padding: 10px 16px;
+  font-size: 18px;
+  line-height: 1.3333333;
+  border-radius: 0px;
+}
+.btn-group-sm > .btn {
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 0px;
+}
+.btn-group-xs > .btn {
+  padding: 1px 5px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 0px;
+}
+.dl-horizontal dd:before,
+.dl-horizontal dd:after,
+.container:before,
+.container:after,
+.container-fluid:before,
+.container-fluid:after,
+.row:before,
+.row:after,
+.form-horizontal .form-group:before,
+.form-horizontal .form-group:after,
+.btn-toolbar:before,
+.btn-toolbar:after,
+.btn-group-vertical > .btn-group:before,
+.btn-group-vertical > .btn-group:after,
+.nav:before,
+.nav:after,
+.navbar:before,
+.navbar:after,
+.navbar-header:before,
+.navbar-header:after,
+.navbar-collapse:before,
+.navbar-collapse:after,
+.pager:before,
+.pager:after,
+.panel-body:before,
+.panel-body:after,
+.modal-footer:before,
+.modal-footer:after,
+.id7-fixed-width-container:before,
+.id7-fixed-width-container:after,
+.id7-utility-bar:before,
+.id7-utility-bar:after,
+.id7-masthead:before,
+.id7-masthead:after,
+.id7-masthead .id7-masthead-contents:before,
+.id7-masthead .id7-masthead-contents:after,
+.id7-masthead .id7-logo-row:before,
+.id7-masthead .id7-logo-row:after,
+.id7-main-content-area > header:before,
+.id7-main-content-area > header:after,
+.id7-main-content-area > .id7-main-content:before,
+.id7-main-content-area > .id7-main-content:after,
+footer .id7-site-footer:before,
+footer .id7-site-footer:after,
+footer .id7-app-footer:before,
+footer .id7-app-footer:after {
+  content: " ";
+  display: table;
+}
+.dl-horizontal dd:after,
+.container:after,
+.container-fluid:after,
+.row:after,
+.form-horizontal .form-group:after,
+.btn-toolbar:after,
+.btn-group-vertical > .btn-group:after,
+.nav:after,
+.navbar:after,
+.navbar-header:after,
+.navbar-collapse:after,
+.pager:after,
+.panel-body:after,
+.modal-footer:after,
+.id7-fixed-width-container:after,
+.id7-utility-bar:after,
+.id7-masthead:after,
+.id7-masthead .id7-masthead-contents:after,
+.id7-masthead .id7-logo-row:after,
+.id7-main-content-area > header:after,
+.id7-main-content-area > .id7-main-content:after,
+footer .id7-site-footer:after,
+footer .id7-app-footer:after {
+  clear: both;
+}
+.btn-group-lg > .btn {
+  border-radius: 6px;
+}
+.btn-group-sm > .btn {
+  border-radius: 3px;
+}
+.btn-group-xs > .btn {
+  border-radius: 3px;
+}
 .id7-main-content-area .row-spacer > [class*='col-'] {
   padding-top: 20px;
   padding-bottom: 20px;
@@ -347,3 +456,83 @@ html.no-not-selector .id7-main-content-area .slideshow .carousel-controls a:acti
   top: auto;
   left: auto;
 }
+ul.branded {
+  padding-left: 0;
+  list-style: none;
+}
+ul.branded > li {
+  font-weight: bold;
+}
+ul.branded > li:before {
+  display: inline-block;
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-transform: translate(0, 0);
+      -ms-transform: translate(0, 0);
+       -o-transform: translate(0, 0);
+          transform: translate(0, 0);
+  font-size: 12px;
+  content: "\f04b";
+  margin-right: 7.33333333px;
+  position: relative;
+  top: -1.5px;
+}
+ul.branded > li:before.pull-left {
+  margin-right: .3em;
+}
+ul.branded > li:before.pull-right {
+  margin-left: .3em;
+}
+ul.branded > li:nth-child(7n + 1):before {
+  color: #5b3069;
+}
+ul.branded > li:nth-child(7n + 2):before {
+  color: #996b00;
+}
+ul.branded > li:nth-child(7n + 3):before {
+  color: #89102c;
+}
+ul.branded > li:nth-child(7n + 4):before {
+  color: #797906;
+}
+ul.branded > li:nth-child(7n + 5):before {
+  color: #204f79;
+}
+ul.branded > li:nth-child(7n + 6):before {
+  color: #be410c;
+}
+ul.branded > li:nth-child(7n + 7):before {
+  color: #3f4246;
+}
+blockquote.branded {
+  border-left: none;
+  padding: 11px;
+  color: #5b3069;
+  border-top: 1px solid #5b3069;
+  background: url(/dist/images/logo-divider-purple.svg) right bottom no-repeat;
+  -webkit-background-size: 1130px 41px;
+          background-size: 1130px 41px;
+  padding-bottom: 40px;
+  position: relative;
+}
+blockquote.branded footer {
+  color: inherit;
+}
+blockquote.branded footer:before {
+  content: none;
+}
+blockquote.branded footer cite {
+  font-style: normal;
+}
+blockquote.branded footer {
+  position: absolute;
+  left: 0px;
+  height: 40px;
+  overflow: hidden;
+  font-size: 75%;
+  line-height: 1.5;
+  padding: 3px 0;
+}

dist/images/id6a-logotype@2x.png

@@ -1,7 +1,4 @@
-@import '../../../less/bootstrap/variables.less';
-@import '../../../less/bootstrap/mixins.less';
-@import '../../../less/variables.less';
-@import '../../../less/mixins.less';
+@import (reference) '../../../less/id7.less';
 
 .id7-main-content-area {
   .row-spacer {
@@ -210,4 +207,62 @@
       left: auto;
     }
   }
+}
+
+ul.branded {
+  .list-unstyled;
+
+  > li {
+    font-weight: bold;
+
+    &:before {
+      .fa();
+
+      font-size: 12px;
+      content: @fa-var-play;
+      margin-right: (@line-height-computed / 3);
+
+      position: relative;
+      top: -1.5px;
+    }
+
+    &:nth-child(7n + 1):before { color: @id7-brand-purple; }
+    &:nth-child(7n + 2):before { color: @id7-brand-gold; }
+    &:nth-child(7n + 3):before { color: @id7-brand-red; }
+    &:nth-child(7n + 4):before { color: @id7-brand-green; }
+    &:nth-child(7n + 5):before { color: @id7-brand-blue; }
+    &:nth-child(7n + 6):before { color: @id7-brand-orange; }
+    &:nth-child(7n + 7):before { color: @id7-brand-gray; }
+  }
+}
+
+blockquote.branded {
+  border-left: none;
+  padding: (@line-height-computed / 2);
+
+  color: @id7-brand-default;
+  border-top: 1px solid @id7-brand-default;
+  background: url(/dist/images/logo-divider-purple.svg) right bottom no-repeat;
+  background-size: 1130px 41px;
+
+  footer {
+    color: inherit;
+    &:before { content: none; }
+
+    cite {
+      font-style: normal;
+    }
+  }
+
+  padding-bottom: @grid-gutter-width;
+  position: relative;
+  footer {
+    position: absolute;
+    left: 0px;
+    height: @grid-gutter-width;
+    overflow: hidden;
+    font-size: 75%;
+    line-height: @line-height-small;
+    padding: 3px 0;
+  }
 }

dist/images/logo-divider-blue.png

@@ -0,0 +1,48 @@
+---
+layout: default
+title: Branding components
+slug: examples/subsite-branding
+---
+
+<h2>What if you wanted to find out more about our brand?</h2>
+
+<h2>You can.</h2>
+
+<div class="row">
+    <section class="col-sm-6">
+        <p>Have a look at our web pages where you can:</p>
+
+        <ul class="branded">
+            <li>Find out more about our brand events</li>
+            <li>Download our tone of voice guidelines</li>
+            <li>Access our house style</li>
+            <li>Use our brand toolkit</li>
+        </ul>
+
+        <p>If you want any more information or support, contact the marketing team: <a href="mailto:marketing@warwick.ac.uk">marketing@warwick.ac.uk</a></p>
+    </section>
+    <section class="col-sm-6">
+        <p>Staff can attend information sessions including:</p>
+
+        <ul class="branded">
+            <li>Copywriting training</li>
+            <li>Window on Warwick</li>
+            <li>Warwick 365</li>
+            <li>Brand surgeries</li>
+        </ul>
+
+        <blockquote class="branded">
+            <p>"You'll come here with lots of ideas...challenging thoughts, we'll bring focus to those thoughts and then
+                you can take them with you into the outside world."</p>
+
+            <footer>
+                <cite>
+                    <strong>Current student</strong><br>
+                    Brand development focus group
+                </cite>
+            </footer>
+        </blockquote>
+
+        <p>Another line of text to check that the spacing is right.</p>
+    </section>
+</div>

dist/images/logo-divider-gold.png

@@ -21,4 +21,12 @@
 ./svg-to-png.sh print-logo.svg 142 82 print-logo.png false
 
 ./svg-to-png.sh logo-with-descriptor-purple.svg 600 398 logo.png false
-./svg-to-png.sh logo-purple.svg 600 347 logo-no-descriptor.png false
+./svg-to-png.sh logo-purple.svg 600 347 logo-no-descriptor.png false
+
+./svg-to-png.sh logo-divider-purple.svg 1130 40 logo-divider-purple.png false
+./svg-to-png.sh logo-divider-gray.svg 1130 40 logo-divider-gray.png false
+./svg-to-png.sh logo-divider-gold.svg 1130 40 logo-divider-gold.png false
+./svg-to-png.sh logo-divider-orange.svg 1130 40 logo-divider-orange.png false
+./svg-to-png.sh logo-divider-red.svg 1130 40 logo-divider-red.png false
+./svg-to-png.sh logo-divider-green.svg 1130 40 logo-divider-green.png false
+./svg-to-png.sh logo-divider-blue.svg 1130 40 logo-divider-blue.png false