Add mozilla-protocol/assets package (#111)

* Add mozilla-protocol/assets package

- Added assets npm package
- Removed drizzle images
- Removed references to images no longer in use
- Changed reference to icon in the card component

docs/README.md

@@ -225,8 +225,6 @@ dist
 
 By default, Pages will include the surrounding Drizzle UI elements in their layout:
 
-![](./drizzle_default_layout.png)
-
 To use a different [layout template](#layouts), you can assign one in the Page [front-matter](#front-matter):
 
 ```yaml

gulp/config.js

@@ -118,7 +118,10 @@ module.exports = {
             dest: `${dest}/protocol`
         },
         img: {
-            src: `${src}/img/**/*`,
+            src: [
+                `${src}/img/**/*`,
+                `./node_modules/@mozilla-protocol/assets/**/*`
+            ],
             dest: `${dest}/protocol/protocol/img/`
         },
         fonts: {

package.json

@@ -23,6 +23,7 @@
   "devDependencies": {
     "@cloudfour/gulp-tasks": "^2.0.1",
     "@cloudfour/hbs-helpers": "^0.9.0",
+    "@mozilla-protocol/assets": "0.0.3",
     "@mozilla-protocol/colors": "^2.1.0",
     "bower": "^1.8.4",
     "doctoc": "^1.1.1",

src/assets/sass/docs/site.scss

@@ -52,15 +52,8 @@
     }
 
     .protosite-js-nav-toggle {
-        @include image-replaced;
-        background: #000 url('/static/img/icon-menu-white.svg') center center no-repeat;
-        @include background-size(30px auto);
         cursor: pointer;
         display: block;
-        height: 2.2em;
-        overflow: hidden;
-        position: relative;
-        width: 2.2em;
 
         @media #{$media-md} {
             display: none;
@@ -296,8 +289,3 @@
         width: 1.5em;
     }
 }
-
-
-
-
-

src/assets/sass/protocol/components/_card.scss

@@ -60,11 +60,11 @@
     }
 
     &.mzp-has-video .mzp-c-card-tag {
-        background: url('#{$image-path}/card/card-tag-video.svg') center left no-repeat;
+        background: url('#{$image-path}/icons/ui/video.svg') center left no-repeat;
     }
 
     &.mzp-has-audio .mzp-c-card-tag {
-        background: url('#{$image-path}/card/card-tag-audio.svg') center left no-repeat;
+        background: url('#{$image-path}/icons/ui/audio.svg') center left no-repeat;
     }
 
     .mzp-c-card-title {

src/pages/fundamentals/principles.md

@@ -7,9 +7,6 @@ These are the guiding principles that inform our design decisions.
 
 The components, pages, and websites we create should be:
 
-
-<img src="{{@root.baseurl}}/static/img/skinner.png" alt="" title="Not that kind of principle" style="float: right; margin: 0 20px 1em;">
-
 ### Meaningful
 
 Design should reinforce the meaning of content, not distract from it. We prioritize worthwhile communication over decoration. If an aspect of the design doesn’t enhance the content, we should remove it.

src/pages/index.hbs

@@ -9,5 +9,3 @@ order: 0
   websites. This system will evolve and expand as we define more
   pieces of it, but we gotta start somewhere.
 </p>
-
-<img src="{{@root.baseurl}}/static/img/construction-sm.gif" alt="">

src/templates/drizzle/nav.hbs

@@ -8,7 +8,7 @@
 <nav class="protosite-nav-main" id="protosite-nav-main">
   <header class="protosite-nav-main-head">
     <a href="https://www.mozilla.org">
-      <img class="protosite-nav-main-mozlogo" src="{{@root.baseurl}}/static/img/mozilla-wordmark-white.svg" width="100" alt="Mozilla">
+      <img class="protosite-nav-main-mozlogo" src="{{@root.baseurl}}/assets/protocol/protocol/img/logos/mozilla/white.svg" width="100" alt="Mozilla">
     </a>
 
     <a class="protosite-js-nav-toggle" href="#nav">Menu</a>