docs/_templates/layout.html - mdl-1.x - githubmirror/material-design-lite

docs/_templates/layout.html
166 строк9 KB
Sérgio Gomes
Add magic viewport to all templates and documentation.
15 мар 2016, 15:25
15 мар 2016, 15:2587ba828
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <title>Material Design Lite</title>

    <!-- Add to homescreen -->
    <link rel="manifest" href="manifest.json">

    <!-- Fallback to homescreen for Chrome <39 on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="Material Design Lite">
    <link rel="icon" sizes="192x192" href="{{page.include_prefix}}assets/android-desktop.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Material Design Lite">
    <link rel="apple-touch-icon" href="{{page.include_prefix}}assets/ios-desktop.png">

    <!-- TODO: Tile icon for Win8 (144x144 + tile color) -->
    <!-- <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"> -->
    <!-- <meta name="msapplication-TileColor" content="#3372DF"> -->

    <meta name="theme-color" content="#263238">

    <link rel="shortcut icon" href="{{page.include_prefix}}assets/favicon.png">
    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
    <!--
    <link rel="canonical" href="http://www.example.com/">
    -->

    <!-- Page styles -->
    <link rel="stylesheet" href="{{page.include_prefix}}assets/prism-default.css">
    <link rel="stylesheet" href="{{page.include_prefix}}material.min.css">
    <link rel="stylesheet" href="{{page.include_prefix}}assets/main.css">

    <!-- Fonts -->
    <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  </head>
  <body class="{{page.bodyclass}}">
  <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
  <script>
    // if (document.location.hostname !== 'localhost' &&
    //     document.location.hostname !== '127.0.0.1' &&
    //     document.location.hostname.search('.corp.') === -1) {
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-25993200-9', 'auto');
      // If a specific component page is loaded directly we'll attribute the
      // page view to the specific component's page
      if (window.location.pathname.indexOf('/components/') !== -1 &&
          window.location.hash.indexOf('-section') !== -1) {
        ga('send', 'pageview', '/components/' +
            window.location.hash.split('#')[1].split('/')[0]);
      } else {
        ga('send', 'pageview');
      }
    // }

    // Setup error tracking before anything else runs.
  window.onerror = function(message, file, lineNumber, columnNumber, error) {
    try {
      if (error !== undefined) {
        message = error.stack;
      }
       ga('send', 'event', 'error', file + ':' + lineNumber, String(message));
    } catch (e) {
      // no-op
    }
  };
  </script>
  <div class="image-preloader"></div>
  <div class="docs-layout mdl-layout mdl-js-layout">
    <header class="docs-layout-header mdl-layout__header">
      <div class="mdl-layout__header-row">
        <span class="docs-layout-title mdl-layout-title"><a href="{{page.include_prefix}}">Material<br>Design<br>Lite</a></span>
      </div>
      <div class="docs-navigation__container">
        <nav class="docs-navigation mdl-navigation">
          <a href="{{page.include_prefix}}index.html" class="mdl-navigation__link about">About</a>
          <a href="{{page.include_prefix}}started/index.html" class="mdl-navigation__link started">Getting Started</a>
          <a href="{{page.include_prefix}}templates/index.html" class="mdl-navigation__link templates">Templates</a>
          <a href="{{page.include_prefix}}components/index.html" class="mdl-navigation__link components">Components</a>
          <a href="{{page.include_prefix}}styles/index.html" class="mdl-navigation__link styles">Styles</a>
          <a href="{{page.include_prefix}}customize/index.html" class="mdl-navigation__link customize">Customize</a>
          <a href="{{page.include_prefix}}showcase/index.html" class="mdl-navigation__link showcase">Showcase</a>
          <a href="{{page.include_prefix}}faq/index.html" class="mdl-navigation__link faq">FAQ</a>
          <div class="spacer"></div>
          <a href="https://github.com/google/material-design-lite" class="mdl-navigation__link mdl-navigation__link--icon github"><i class="material-icons">link</i><span>GitHub</span></a>
          <a href="{{page.include_prefix}}started/index.html#download" class="mdl-navigation__link mdl-navigation__link--icon download">
            <i class="material-icons">&#xE2C4;</i><span>Download</span>
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--fab mdl-button--mini-fab mdl-color--lime-A200">
              <i class="material-icons">&#xE2C4;</i>
            </button>
          </a>
        </nav>
      </div>
      <i class="material-icons scrollindicator scrollindicator--right">&#xE315;</i>
      <i class="material-icons scrollindicator scrollindicator--left">&#xE314;</i>
    </header>
    <main class="docs-layout-content mdl-layout__content mdl-color-text--grey-600">
      <div class="content mdl-grid mdl-grid--no-spacing" id="content">
        <div class="subpageheader mdl-cell--12-col">{{page.title}}</div>
        {% block content %}
          {{content|safe}}
        {% endblock %}
      </div>
      <section class="docs-text-styling download mdl-color--grey-800">
        <a href="{{page.include_prefix}}started/index.html#download" class="mdl-color-text--grey-50">Download Kit</a>
      </section>
      <footer class="docs-text-styling docs-footer mdl-mini-footer mdl-color--grey-900">
        <ul>
          <li class="mdl-mini-footer--social-btn">
            <a href="https://twitter.com/googledesign" class="social-btn social-btn__twitter" role="button" title="Twitter"></a>
          </li>
          <li class="mdl-mini-footer--social-btn">
            <a href="https://github.com/google/material-design-lite" class="social-btn social-btn__github" role="button" title="GitHub"></a>
          </li>
          <li class="mdl-mini-footer--social-btn">
            <a href="https://plus.google.com/+googledesign" class="social-btn social-btn__gplus" role="button" title="Google+"></a>
          </li>
        </ul>
        <ul class="docs-link-list">
          <li><a class="mdl-color-text--grey-600" href="https://developers.google.com/web/starter-kit/">Web Starter Kit</a></li>
          <li><a class="mdl-color-text--grey-600" href="https://github.com/google/material-design-lite/issues">Help</a></li>
        </ul>
      </footer>
    </main>
  </div>

    <!-- IE Compatibility shims -->
      <!--[if lt IE 9]>
        <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js""></script>
      <![endif]-->

      <!--[if IE]>
        <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.7/es5-shim.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/flexie/1.0.3/flexie.min.js"></script>
        <link href="{{page.include_prefix}}assets/ie.css" rel="stylesheet">
      <![endif]-->
    <!-- end shims -->


    <!-- Material Design Lite -->
    <script src="{{page.include_prefix}}material.min.js"></script>
    <!-- Add Copy-to-CodePen buttons to code blocks -->
    <script src="{{page.include_prefix}}assets/codepen.js"></script>
    <!-- Enable Prism syntax highlighting -->
    <script src="{{page.include_prefix}}assets/prism.js"></script>
    <script src="{{page.include_prefix}}assets/prism-markup.min.js"></script>
    <script src="{{page.include_prefix}}assets/prism-javascript.min.js"></script>
    <script src="{{page.include_prefix}}assets/prism-css.min.js"></script>
    <script src="{{page.include_prefix}}assets/prism-bash.min.js"></script>
    <script src="{{page.include_prefix}}assets/main.js"></script>
    <!-- Built with love using Material Design Lite -->
  </body>
</html>