Wrap page in container

README.md

@@ -102,13 +102,22 @@ If you need to support the `IE11` Browser, you will need to provide polyfills as
 
 > [**Docs**](https://tools.cornerstonejs.org/installation.html)
 
-## Examples
+## Examples & Docs
 
 > The latest major version has just been published. We are still flushing out our examples. If you have anything you would like to see documented, or you want a specific example from [version 2][version-2] ported, either create an issue or make a pull request ^\_^
 
-#### Tools
+- [Documentation](https://tools.cornerstonejs.org)
+- [Examples](https://tools.cornerstonejs.org/examples)
+- [API](https://tools.cornerstonejs.org/api)
 
-...
+### Tools
+
+#### Annotation Tools
+
+- [Angle](https://tools.cornerstonejs.org/examples/tools/angle.html)
+- [Elliptical ROI](https://tools.cornerstonejs.org/examples/tools/elliptical-roi.html)
+- [Length](https://tools.cornerstonejs.org/examples/tools/length.html)
+- [Rectangle ROI](https://tools.cornerstonejs.org/examples/tools/rectangle-roi.html)
 
 #### 3rd Party Tool Plugins
 
@@ -127,6 +136,7 @@ Thanks goes to these people ([emoji key][emojis]):
 | [<img src="https://avatars2.githubusercontent.com/u/1268698?v=4" width="100px;" alt="Chris Hafey"/><br /><sub><b>Chris Hafey</b></sub>](https://www.linkedin.com/in/chafey)<br />[📖](https://github.com/cornerstonejs/cornerstoneTools/commits?author=chafey "Documentation") [💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=chafey "Code") [📝](#blog-chafey "Blogposts") [📢](#talk-chafey "Talks") | [<img src="https://avatars3.githubusercontent.com/u/607793?v=4" width="100px;" alt="Erik Ziegler"/><br /><sub><b>Erik Ziegler</b></sub>](https://github.com/swederik)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=swederik "Code") [📖](https://github.com/cornerstonejs/cornerstoneTools/commits?author=swederik "Documentation") [👀](#review-swederik "Reviewed Pull Requests") [🚧](#maintenance-swederik "Maintenance") [🚇](#infra-swederik "Infrastructure (Hosting, Build-Tools, etc)") [💬](#question-swederik "Answering Questions") | [<img src="https://avatars1.githubusercontent.com/u/5797588?v=4" width="100px;" alt="Danny Brown"/><br /><sub><b>Danny Brown</b></sub>](http://dannyrb.com/)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=dannyrb "Code") [📖](https://github.com/cornerstonejs/cornerstoneTools/commits?author=dannyrb "Documentation") [👀](#review-dannyrb "Reviewed Pull Requests") [🚧](#maintenance-dannyrb "Maintenance") [🚇](#infra-dannyrb "Infrastructure (Hosting, Build-Tools, etc)") [🔌](#plugin-dannyrb "Plugin/utility libraries") [💬](#question-dannyrb "Answering Questions") | [<img src="https://avatars0.githubusercontent.com/u/25818497?v=4" width="100px;" alt="James Petts"/><br /><sub><b>James Petts</b></sub>](https://github.com/JamesAPetts)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=JamesAPetts "Code") [👀](#review-JamesAPetts "Reviewed Pull Requests") [🔌](#plugin-JamesAPetts "Plugin/utility libraries") [📖](https://github.com/cornerstonejs/cornerstoneTools/commits?author=JamesAPetts "Documentation") [💬](#question-JamesAPetts "Answering Questions") | [<img src="https://avatars0.githubusercontent.com/u/126077?v=4" width="100px;" alt="Steve Pieper"/><br /><sub><b>Steve Pieper</b></sub>](http://www.isomics.com)<br />[💬](#question-pieper "Answering Questions") [🔧](#tool-pieper "Tools") | [<img src="https://avatars3.githubusercontent.com/u/1905961?v=4" width="100px;" alt="Rodrigo Antinarelli"/><br /><sub><b>Rodrigo Antinarelli</b></sub>](https://rodrigoea.com/)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=rodrigolabs "Code") | [<img src="https://avatars2.githubusercontent.com/u/10813109?v=4" width="100px;" alt="Zaid Safadi"/><br /><sub><b>Zaid Safadi</b></sub>](http://blog.zaidsafadi.com/)<br />[💬](#question-Zaid-Safadi "Answering Questions") |
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<img src="https://avatars3.githubusercontent.com/u/2378326?v=4" width="100px;" alt="Gustavo André Lelis"/><br /><sub><b>Gustavo André Lelis</b></sub>](https://github.com/galelis)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=galelis "Code") | [<img src="https://avatars1.githubusercontent.com/u/3926071?v=4" width="100px;" alt="Kofifus"/><br /><sub><b>Kofifus</b></sub>](https://github.com/kofifus)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=kofifus "Code") [🔧](#tool-kofifus "Tools") [🐛](https://github.com/cornerstonejs/cornerstoneTools/issues?q=author%3Akofifus "Bug reports") | [<img src="https://avatars2.githubusercontent.com/u/25580127?v=4" width="100px;" alt="Aloïs Dreyfus"/><br /><sub><b>Aloïs Dreyfus</b></sub>](http://www.linkedin.com/in/alois-dreyfus/)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=adreyfus "Code") | [<img src="https://avatars0.githubusercontent.com/u/616382?v=4" width="100px;" alt="Tim Leslie"/><br /><sub><b>Tim Leslie</b></sub>](http://www.timl.id.au)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=timleslie "Code") | [<img src="https://avatars3.githubusercontent.com/u/7297450?v=4" width="100px;" alt="diego0020"/><br /><sub><b>diego0020</b></sub>](https://github.com/diego0020)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=diego0020 "Code") | [<img src="https://avatars1.githubusercontent.com/u/4920551?v=4" width="100px;" alt="Evren Ozkan"/><br /><sub><b>Evren Ozkan</b></sub>](https://github.com/evren217)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=evren217 "Code") | [<img src="https://avatars2.githubusercontent.com/u/7647745?v=4" width="100px;" alt="Salvador Daniel Pelayo"/><br /><sub><b>Salvador Daniel Pelayo</b></sub>](https://github.com/daniel2101)<br />[💻](https://github.com/cornerstonejs/cornerstoneTools/commits?author=daniel2101 "Code") |
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.

examples/_layouts/tool-simple.html

@@ -2,32 +2,34 @@
 layout: default
 ---
 
-<div class="wrapper">
-  <h1>{{ page.title }}</h1>
-
-  <div class="buttons">
-    <button class="button set-tool-mode is-primary" data-action="Active">
-      Active
-    </button>
-    <button class="button set-tool-mode" data-action="Passive">
-      Passive
-    </button>
-    <button class="button set-tool-mode" data-action="Enabled">Enable</button>
-    <button class="button set-tool-mode" data-action="Disabled">
-      Disable
-    </button>
+<section class="section">
+  <div class="container">
+    <h1>{{ page.title }}</h1>
+
+    <div class="buttons">
+      <button class="button set-tool-mode is-primary" data-action="Active">
+        Active
+      </button>
+      <button class="button set-tool-mode" data-action="Passive">
+        Passive
+      </button>
+      <button class="button set-tool-mode" data-action="Enabled">Enable</button>
+      <button class="button set-tool-mode" data-action="Disabled">
+        Disable
+      </button>
+    </div>
+
+    <div class="cornerstone-element-wrapper">
+      <div
+        class="cornerstone-element"
+        data-index="0"
+        oncontextmenu="return false"
+      ></div>
+    </div>
+
+    {{ content }}
   </div>
-
-  <div class="cornerstone-element-wrapper">
-    <div
-      class="cornerstone-element"
-      data-index="0"
-      oncontextmenu="return false"
-    ></div>
-  </div>
-</div>
-
-{{ content }}
+</section>
 
 <script>
   // NOTE: We pull these in from packaged sources in our header,