checkboxes and some tweaks to the docs

docs/docs.css

@@ -7,6 +7,7 @@ body {
 main {
   width: 65rem;
   margin-left: 240px;
+  margin-bottom: 60px;
 }
 
 aside {
@@ -56,7 +57,8 @@ h2 {
 h3 {
   font-size: 2rem;
   margin-top: 20px;
-  width: 120px;
+  display: block;
+  flex: 0 0 120px;
 }
 
 p {
@@ -69,11 +71,15 @@ p {
 }
 
 .component > div {
-  margin: 12px 0 0 32px;
+  margin-left: 32px;
   padding-left: 32px;
   border-left: 1px solid var(--button-shadow);
 }
 
+.component:not(:first) > div {
+  padding-top: 12px;
+}
+
 blockquote {
   margin: 0 0 20px;
   padding: 20px;
@@ -85,10 +91,15 @@ blockquote footer {
 }
 
 .example {
-  margin: 12px 12px 24px;
+  margin: 0 12px 24px;
 }
 
-details {
+.example:first {
+  margin-top: 12px;
+}
+
+details,
+summary {
   margin: 12px 0;
 }
 

docs/index.html

@@ -123,7 +123,6 @@
 
         <div class="example">
           <button class="focused">I am focused</button>
-
           <details>
             <summary>Show code</summary>
             <pre><code>&lt;button&gt;I am focused&lt;/button&gt;</code></pre>
@@ -131,6 +130,36 @@
         </div>
       </div>
     </section>
+
+    <section class="component">
+      <h3 id="checkbox">Checkbox</h3>
+      <div>
+        <blockquote>
+          A <em>check box</em>represents an independent or non-exclusive choice.
+          <footer>&mdash; Microsoft Windows User Experience, 8.3</footer>
+        </blockquote>
+
+        <p>
+          Checkboxes are represented with a sunken panel, populated with a "check" icon when
+          selected, next to a label indicating the choice.
+        </p>
+
+        <p>
+          Note: You <strong>must</strong> include a corresponding label <strong>after</strong>
+          your checkbox, using the <code>&lt;label&gt;</code> element with a <code>for</code> attribute
+          pointed at the <code>id</code> of your input.
+        </p>
+
+        <div class="example">
+          <input type="checkbox" id="example1">
+          <label for="example1">This is a checkbox</label>
+
+          <details>
+            <summary>Show code</summary>
+            <pre><code>&lt;input type="checkbox" id="example1"&gt;
+&lt;label for="example1"&gt;This is a checkbox&lt;/label&gt;</code></pre>
+          </details>
+        </div>
   </main>
 </body>
 </html>

style.css

@@ -191,7 +191,7 @@ legend {
 }
 
 label {
-  display: flex;
+  display: inline-flex;
   align-items: center;
 }
 
@@ -410,7 +410,7 @@ ul.treeview ul > li:last-child::after {
   background: var(--button-highlight);
 }
 
-pre code {
+pre {
   display: block;
   background: var(--button-highlight);
   box-shadow: var(--border-field);
@@ -419,6 +419,14 @@ pre code {
   font-family: monospace;
 }
 
+code {
+  font-family: monospace;
+}
+
+summary:focus {
+  outline: 1px dotted #000000;
+}
+
 ::-webkit-scrollbar {
   width: 16px;
 }