view flowerbed.html @ 5:550dede362d5 default tip

example flowerbed markup
author Jeff Hammel <jhammel@mozilla.com>
date Sat, 25 Dec 2010 16:01:29 -0800
parents
children
line wrap: on
line source

<html>
<head>
<title>flowerbed</title>

<style type="text/css">
dt {
float: left;
clear: left;
font-style: italic;
}

dt::after { content: ": "; 
}

dd {
font-family: monospace;
}

div.app, div.conditions { 
text-align: center;
align: center;
}

div.app { 
width: 200px; 
margin: 10px;
}

div.app {
border: thin black solid;
background: red;
}

div.conditions {
background: lightblue;
}

div.options {
background: orange;
}

ol {
list-style-type: square;
}

div.apps > span:first-child,
div.app > span:first-child
{
font-family: sans-serif;
font-weight: bold;
color: #222;
}

div.apps > span:first-child {
border: thin solid black;
background: red;
}

</style>

</head>
<body>
<div class="apps">
  <span class="name">Your site</span>
  <ol class="apps">
    <li class="app">
      <div class="app">
        <span class="name">config</span>
        <div class="conditions">
          <span class="name">conditions</span>
          <dl></dl>
          <input type="button" value="+"/>
        </div>
        <div class="options">
          <dl>
            <dt>factory</dt>
            <dd>%(self)s</dd>
          </dl>
        </div>
      </div>
    </li>
    <li class="app">
      <div class="app">
        <span class="name">json</span>

        <div class="conditions">
          <span class="name">conditions</span>
          <dl class="conditions">
            <dt>path</dt><dd>/json</dd>
          </dl>
          <input type="button" value="+"/>
        </div>

        <div class="options">
          <span class="name">options</span>
          <dl>
            <dt>factory</dt>
            <dd>%(self)s</dd>
          </dl>
        </div>
      </div>
    </li>
    <li>
      <input type="button" value="+"/>
    </li>
  </ol>
</span>

</body>
</html>