Place sections within round-cornered panes.

[mkws-moved-to-github.git] / tools / htdocs / index.html
diff --git a/tools/htdocs/index.html b/tools/htdocs/index.html

index 09f1ddf..811cc3d 100644 (file)
--- a/tools/htdocs/index.html
+++ b/tools/htdocs/index.html
@@ -8,12 +8,16 @@
        }
        h1 { color: #606060 }
        h2 { font-size: 100% }
+      .pane { background: #eee; border-radius: 1em;
+              padding: 0.25em 1em; margin: 0.75em; }
      </style>
    </head>
    <body>
      <img src="images/mkws-logo-300px.jpeg" alt="MKWS logo" =
          style="float:right; margin: 1.5em"/>
      <h1>MKWS: the MasterKey Widget Set</h1>
+
+    <div class="pane">
      <h2>This site contains tools, not content:</h2>
      <ul>
        <li>
@@ -40,15 +44,11 @@
          --
          A stylesheet which styles only MasterKey widgets, and does not
          otherwise interfere with application-site's styles.
-    <!--
-        <p style="color:darkred">
-          Note. This is not yet quite true: the stylesheet needs tweaking
-          to make it more specific to only the MKWS components. At present
-          it spills over into styling parts of the containing site, too.
-        </p>
-    -->
        </li>
      </ul>
+    </div>
+
+    <div class="pane">
      <h2>For examples of how to use the widget-set, see:</h2>
      <ul>
        <li>
@@ -127,6 +127,9 @@
         which has been fitted with a popup MKWS search-box.
        </li>
      </ul>
+    </div>
+
+    <div class="pane">
      <h2>The set of targets can be maintained:</h2>
      <ul>
        <li>
@@ -136,6 +139,9 @@
         and act as the "MK Demo" library administrator.
        </li>
      </ul>
+    </div>
+
+    <div class="pane">
      <h2>Documentation:</h2>
      <ul>
        <li>
@@ -150,5 +156,6 @@
          which can be used to guide the customisation of its CSS styles.
        </li>
      </ul>
+    </div>
    </body>
  </html>