afm-client/bower_components/tether/examples/viewport/index.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <link rel="stylesheet" href="../resources/css/base.css" />
   5     <link rel="stylesheet" href="./colors.css" />
   6     <style>
   7       * {
   8         box-sizing: border-box;
   9       }
  10
  11       .element {
  12         background-color: #FFDC00;
  13         width: 80%;
  14         max-width: 300px;
  15         padding: 0 15px;
  16         font-size: 20px;
  17         box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
  18       }
  19
  20       @media (max-width: 380px) {
  21         .element {
  22           font-size: 16px;
  23         }
  24       }
  25
  26       .bit {
  27         width: 10vw;
  28         height: 10vw;
  29         float: left;
  30       }
  31     </style>
  32   </head>
  33   <body>
  34     <div class="element">
  35       <p>This element is tethered to the middle of the visible part of the body.</p>
  36
  37       <p>Inspect the element to see how Tether decided
  38       to use <code>position: fixed</code>.</p>
  39     </div>
  40
  41     <script src="../../tether.js"></script>
  42     <script>
  43       new Tether({
  44         element: '.element',
  45         target: document.body,
  46         attachment: 'middle center',
  47         targetAttachment: 'middle center',
  48         targetModifier: 'visible'
  49       });
  50     </script>
  51
  52     <script>
  53       // Random colors bit, don't mind this
  54       colors = ['navy', 'blue', 'aqua', 'teal', 'olive', 'green', 'lime',
  55         'yellow', 'orange', 'red', 'fuchsia', 'purple', 'maroon'];
  56
  57       curColors = null;
  58       for(var i=300; i--;){
  59         if (!curColors || !curColors.length)
  60           curColors = colors.slice(0);
  61
  62         var bit = document.createElement('div')
  63         var index = (Math.random() * curColors.length)|0;
  64         bit.className = 'bit bg-' + curColors[index]
  65         curColors.splice(index, 1);
  66         document.body.appendChild(bit);
  67       }
  68     </script>
  69   </body>
  70 </html>