RubyGems - jekyll-polymer-magazine - Versions diffs - 0.1.0 - Mend

jekyll-polymer-magazine 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (994) hide show

data/assets/bower_components/app-layout/app-box/demo/index.html ADDED

@@ -0,0 +1,40 @@
+<!--
+@license
+Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <title>app-box demos</title>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../../paper-styles/demo-pages.html">
+</head>
+<style>
+  a {
+    display: block;
+    margin-bottom: 10px;
+  }
+</style>
+<body unresolved>
+  <div class="horizontal-section-container">
+    <div>
+      <h4>app-box demos</h4>
+      <div class="horizontal-section">
+        <a href="document-scroll.html">Document Scroll</a>
+        <a href="scrolling-region.html">Scrolling Region</a>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

data/assets/bower_components/app-layout/app-box/demo/scrolling-region.html ADDED

@@ -0,0 +1,230 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <title>app-box using a custom scrolling region</title>
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../app-toolbar/app-toolbar.html">
+  <link rel="import" href="../../demo/sample-content.html">
+  <link rel="import" href="../../app-scroll-effects/effects/parallax-background.html">
+  <link rel="import" href="../app-box.html">
+  <style is="custom-style">
+    body {
+      margin: 0;
+      font-family: 'Roboto', 'Noto', sans-serif;
+      background-color: #eee;
+    }
+    header {
+      background-color: white;
+      height: 128px;
+    }
+    #scrollingRegion {
+      position: fixed;
+      left: 100px;
+      right: 100px;
+      top: 50px;
+      bottom: 50px;
+      overflow-y: auto;
+      background-color: #fff;
+      box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
+      scroll-behavior: smooth;
+    }
+    app-toolbar {
+      font-size: 18px;
+      font-weight: 400;
+      letter-spacing: 5px;
+      text-align: center;
+      color: #1a237e;
+    }
+    .nav {
+      height: 64px;
+      margin: 0;
+      padding: 0;
+      text-align: center;
+      background-color: rgba(255, 255, 255, 0.9);
+    }
+    .nav li {
+      display: inline-block;
+      list-style: none;
+    }
+    .nav a {
+      display: inline-block;
+      font-weight: 12px;
+      line-height: 64px;
+      text-decoration: none;
+      color: black;
+      font-weight: 300;
+      margin: 0 10px;
+    }
+    .nav a:hover {
+      color: #444;
+      border-bottom: 1px solid #999;
+    }
+    [threshold-triggered] {
+      position: fixed;
+      top: 50px;
+      left: 100px;
+      right: 100px;
+      z-index: 1;
+    }
+    .first, .second, .third, .fourth {
+      height: 640px;
+    }
+    .second {
+      --app-box-background-front-layer: {
+        background-image: url(//app-layout-assets.appspot.com/assets/bg2.jpg);
+        background-position: bottom;
+        padding-bottom: 120px;
+        margin-top: -20px;
+        height: 100%;
+      };
+    }
+    .third {
+      --app-box-background-front-layer: {
+        background-image: url(//app-layout-assets.appspot.com/assets/bg3.jpg);
+        background-position: bottom;
+        padding-bottom: 120px;
+        margin-top: -20px;
+        height: 100%;
+      };
+    }
+    .fourth {
+      --app-box-background-front-layer: {
+        background-image: url(//app-layout-assets.appspot.com/assets/bg4.jpg);
+        background-position: bottom;
+        padding-bottom: 120px;
+        margin-top: -20px;
+        height: 100%;
+      };
+    }
+    section {
+      padding-top: 100px;
+    }
+    article {
+      font-weight: 100;
+      max-width: 500px;
+      text-align: center;
+      margin: 0 auto 100px auto;
+    }
+    article h2 {
+      font-weight: 100;
+      font-size: 50px;
+      margin: 5px;
+    }
+    article p {
+      font-size: 18px;
+      line-height: 30px;
+    }
+    article hr {
+      width: 100px;
+      height: 1px;
+      border: none;
+      margin: 20px auto;
+      background-color: black;
+    }
+  </style>
+</head>
+<body class="fullbleed" unresolved>
+    <div class="overlay" id="scrollingRegion">
+      <header>
+        <app-toolbar>
+          <div main-title>POLYMER</div>
+        </app-toolbar>
+        <app-box scroll-target="scrollingRegion" threshold="64">
+          <ul role="navigation" class="nav">
+            <li><a href="#speed">Speed</a></li>
+            <li><a href="#modern">Modern</a></li>
+            <li><a href="#standard">Standard</a></li>
+            <li><a href="#create">Create</a></li>
+          </ul>
+        </app-box>
+      </header>
+      <section id="speed">
+        <article>
+          <hr />
+          <h2>Built for Speed</h2>
+          <p>Polymer 1.0 replaces the shadow DOM polyfill with a lightweight shim, uses a new, faster data-binding system, and significantly reduces code size.</p>
+        </article>
+        <!-- This app-box uses `#scrollingRegion` as the scroller element -->
+        <app-box class="first" scroll-target="scrollingRegion" effects="parallax-background">
+          <!--
+            app-box allows to style the mixin `--app-box-background-front-layer` or create a custom background in the light DOM.
+            In this case, we create a custom background by adding the attribute `background` to the `img` in
+            the light DOM.
+          -->
+          <img background src="//app-layout-assets.appspot.com/assets/bg1.jpg" style="width:100%; height: 900px" />
+        </app-box>
+      </section>
+      <section id="modern">
+        <article>
+          <hr />
+          <h2>For Modern Browsers</h2>
+          <p>Polymer is built from the ground up for modern browsers, using the latest web platform APIs. Polyfills provide support on evergreen browsers for APIs that aren't universal yet.</p>
+        </article>
+          <!--
+            This app-box uses the class `.second` and the mixin `--app-box-background-front-layer` to assign the background image.
+          -->
+        <app-box class="second" scroll-target="scrollingRegion" effects="parallax-background"></app-box>
+      </section>
+      <section id="standard">
+        <article>
+          <hr />
+          <h2>Using Web Components</h2>
+          <p>Polymer leverages web components, a new set of standards designed to provide reusable components for the web.</p>
+        </article>
+        <app-box class="third" scroll-target="scrollingRegion" effects="parallax-background"></app-box>
+      </section>
+      <section id="create">
+        <article>
+          <hr />
+          <h2>Create your own elements</h2>
+          <p>The Polymer library makes it easy to create your own powerful elements. Give your element some markup and properties, and then use it on a site. Polymer provides useful features like templating and data binding to reduce the amount of boilerplate you need to write.</p>
+        </article>
+        <app-box class="fourth" scroll-target="scrollingRegion" effects="parallax-background"></app-box>
+      </section>
+    </div>
+</body>
+</html>

data/assets/bower_components/app-layout/app-drawer-layout/README.md ADDED

@@ -0,0 +1,93 @@
+##&lt;app-drawer-layout&gt;
+app-drawer-layout is a wrapper element that positions an app-drawer and other content. When
+the viewport width is smaller than `responsiveWidth`, this element changes to narrow layout.
+In narrow layout, the drawer will be stacked on top of the main content. The drawer will slide
+in/out to hide/reveal the main content.
+By default the drawer is aligned to the start, which is left in LTR layouts:
+```html
+<app-drawer-layout>
+  <app-drawer>
+    drawer content
+  </app-drawer>
+  <div>
+    main content
+  </div>
+</app-drawer-layout>
+```
+Align the drawer at the end:
+```html
+<app-drawer-layout>
+  <app-drawer align="end">
+     drawer content
+  </app-drawer>
+  <div>
+    main content
+  </div>
+</app-drawer-layout>
+```
+With an app-header-layout:
+```html
+<app-drawer-layout>
+  <app-drawer>
+    drawer-content
+  </app-drawer>
+  <app-header-layout>
+    <app-header>
+      <app-toolbar>
+        <div main-title>App name</div>
+      </app-toolbar>
+    </app-header>
+    main content
+  </app-header-layout>
+</app-drawer-layout>
+```
+Add the `drawer-toggle` attribute to elements inside `app-drawer-layout` that toggle the drawer on tap events:
+```html
+<app-drawer-layout>
+  <app-drawer>
+    drawer-content
+  </app-drawer>
+  <app-header-layout>
+    <app-header>
+      <app-toolbar>
+        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
+        <div main-title>App name</div>
+      </app-toolbar>
+    </app-header>
+    main content
+  </app-header-layout>
+</app-drawer-layout>
+```
+Add the `fullbleed` attribute to app-drawer-layout to make it fit the size of its container:
+```html
+<app-drawer-layout fullbleed>
+  <app-drawer>
+     drawer content
+  </app-drawer>
+  <div>
+    main content
+  </div>
+</app-drawer-layout>
+```
+### Styling
+Custom property                          | Description                          | Default
+-----------------------------------------|--------------------------------------|---------
+`--app-drawer-layout-content-transition` | Transition for the content container | none

data/assets/bower_components/app-layout/app-drawer-layout/app-drawer-layout.html ADDED

@@ -0,0 +1,277 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../../iron-media-query/iron-media-query.html">
+<link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.html">
+<link rel="import" href="../app-drawer/app-drawer.html">
+<!--
+app-drawer-layout is a wrapper element that positions an app-drawer and other content. When
+the viewport width is smaller than `responsiveWidth`, this element changes to narrow layout.
+In narrow layout, the drawer will be stacked on top of the main content. The drawer will slide
+in/out to hide/reveal the main content.
+By default the drawer is aligned to the start, which is left in LTR layouts:
+```html
+<app-drawer-layout>
+  <app-drawer>
+    drawer content
+  </app-drawer>
+  <div>
+    main content
+  </div>
+</app-drawer-layout>
+```
+Align the drawer at the end:
+```html
+<app-drawer-layout>
+  <app-drawer align="end">
+     drawer content
+  </app-drawer>
+  <div>
+    main content
+  </div>
+</app-drawer-layout>
+```
+With an app-header-layout:
+```html
+<app-drawer-layout>
+  <app-drawer>
+    drawer-content
+  </app-drawer>
+  <app-header-layout>
+    <app-header>
+      <app-toolbar>
+        <div main-title>App name</div>
+      </app-toolbar>
+    </app-header>
+    main content
+  </app-header-layout>
+</app-drawer-layout>
+```
+Add the `drawer-toggle` attribute to elements inside `app-drawer-layout` that toggle the drawer on tap events:
+```html
+<app-drawer-layout>
+  <app-drawer>
+    drawer-content
+  </app-drawer>
+  <app-header-layout>
+    <app-header>
+      <app-toolbar>
+        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
+        <div main-title>App name</div>
+      </app-toolbar>
+    </app-header>
+    main content
+  </app-header-layout>
+</app-drawer-layout>
+```
+Add the `fullbleed` attribute to app-drawer-layout to make it fit the size of its container:
+```html
+<app-drawer-layout fullbleed>
+  <app-drawer>
+     drawer content
+  </app-drawer>
+  <div>
+    main content
+  </div>
+</app-drawer-layout>
+```
+### Styling
+Custom property                          | Description                          | Default
+-----------------------------------------|--------------------------------------|---------
+`--app-drawer-layout-content-transition` | Transition for the content container | none
+@group App Elements
+@element app-drawer-layout
+@demo app-drawer-layout/demo/simple-drawer.html Simple Demo
+@demo app-drawer-layout/demo/two-drawers.html Two drawers
+-->
+<dom-module id="app-drawer-layout">
+  <template>
+    <style>
+      :host {
+        display: block;
+      }
+      :host([fullbleed]) {
+        @apply(--layout-fit);
+      }
+      #contentContainer {
+        position: relative;
+        height: 100%;
+        transition: var(--app-drawer-layout-content-transition, none);
+      }
+      #contentContainer:not(.narrow) > ::content [drawer-toggle] {
+        display: none;
+      }
+    </style>
+    <div id="contentContainer">
+      <content select=":not(app-drawer)"></content>
+    </div>
+    <content id="drawerContent" select="app-drawer"></content>
+    <iron-media-query
+        query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]"
+        on-query-matches-changed="_onQueryMatchesChanged"></iron-media-query>
+  </template>
+  <script>
+    Polymer({
+      is: 'app-drawer-layout',
+      behaviors: [
+        Polymer.IronResizableBehavior
+      ],
+      properties: {
+        /**
+         * If true, ignore `responsiveWidth` setting and force the narrow layout.
+         */
+        forceNarrow: {
+          type: Boolean,
+          value: false
+        },
+        /**
+         * If the viewport's width is smaller than this value, the panel will change to narrow
+         * layout. In the mode the drawer will be closed.
+         */
+        responsiveWidth: {
+          type: String,
+          value: '640px'
+        },
+        /**
+         * Returns true if it is in narrow layout. This is useful if you need to show/hide
+         * elements based on the layout.
+         */
+        narrow: {
+          type: Boolean,
+          readOnly: true,
+          notify: true
+        },
+        /**
+         * If true, the drawer will initially be opened when in narrow layout mode.
+         */
+        openedWhenNarrow: {
+          type: Boolean,
+          value: false
+        }
+      },
+      listeners: {
+        'tap': '_tapHandler',
+        'app-drawer-attached': '_resetDrawerState',
+        'app-drawer-reset-layout': 'resetLayout',
+        'iron-resize': 'resetLayout'
+      },
+      observers: [
+        'resetLayout(narrow, isAttached)',
+        '_narrowChanged(narrow, isAttached)'
+      ],
+      /**
+       * A reference to the app-drawer element.
+       *
+       * @property drawer
+       */
+      get drawer() {
+        return Polymer.dom(this.$.drawerContent).getDistributedNodes()[0];
+      },
+      _tapHandler: function(e) {
+        var target = Polymer.dom(e).localTarget;
+        if (target && target.hasAttribute('drawer-toggle')) {
+          var drawer = this.drawer;
+          if (drawer && !drawer.persistent) {
+            drawer.toggle();
+          }
+        }
+      },
+      resetLayout: function() {
+        this.debounce('_resetLayout', function() {
+          var drawer = this.drawer;
+          var contentContainer = this.$.contentContainer;
+          if (this.narrow || !drawer) {
+            contentContainer.style.marginLeft = '';
+            contentContainer.style.marginRight = '';
+          } else {
+            var drawerWidth = drawer.getWidth();
+            if (drawer.position == 'right') {
+              contentContainer.style.marginLeft = '';
+              contentContainer.style.marginRight = drawerWidth + 'px';
+            } else {
+              contentContainer.style.marginLeft = drawerWidth + 'px';
+              contentContainer.style.marginRight = '';
+            }
+          }
+        });
+      },
+      _resetDrawerState: function() {
+        this.debounce('_resetDrawerState', function() {
+          var drawer = this.drawer;
+          if (!drawer) {
+            return;
+          }
+          if (this.narrow) {
+            drawer.opened = this.openedWhenNarrow;
+            drawer.persistent = false;
+          } else {
+            drawer.opened = drawer.persistent = true;
+          }
+        });
+      },
+      _narrowChanged: function(narrow) {
+        this.toggleClass('narrow', narrow, this.$.contentContainer);
+        this._resetDrawerState();
+        this.notifyResize();
+      },
+      _onQueryMatchesChanged: function(event) {
+        this._setNarrow(event.detail.value);
+      },
+      _computeMediaQuery: function(forceNarrow, responsiveWidth) {
+        return forceNarrow ? '(min-width: 0px)' : '(max-width: ' + responsiveWidth + ')';
+      }
+    });
+  </script>
+</dom-module>