. (#5)

Author: pshihn

Diff for: index.html

@@ -119,7 +119,7 @@ <h1>Rough Notation</h1>
       Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or
       just turned off.
     </p>
-    <p>Rough Notation is <span class="acircle">3.7kb</span> in size when gzipped, and the code is available on
+    <p>Rough Notation is <span class="acircle">3.8kb</span> in size when gzipped, and the code is available on
       GitHub.</p>
     <p>
       <a target="_blank" href="https://github.com/pshihn/rough-notation" rel="noopener">
@@ -176,7 +176,7 @@ <h3>Strike-Through</h3>
         </p>
       </div>
     </section>
-    <section id="crossSection" style="background: #FFFDE7;">
+    <section id="crossSection" style="background: #E0F2F1;">
       <div class="sizedPanel">
         <h3>Crossed-Off</h3>
         <p>To symbolize rejection, use a <span>crossed-off</span> effect on an element.</p>
@@ -185,6 +185,22 @@ <h3>Crossed-Off</h3>
         </p>
       </div>
     </section>
+    <section id="bracketSection" style="background: #FFFDE7;">
+      <div class="sizedPanel">
+        <h3>Brackets</h3>
+        <p>Create a hand-drawn bracket around a block (like a paragraph of text) on one or multiple sides of the block.
+        </p>
+        <p class="blockp">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan nisi hendrerit augue molestie tempus.
+          Phasellus purus quam, aliquet nec commodo quis, pharetra ut orci. Donec laoreet ligula nisl,
+          placerat molestie mauris luctus id. Fusce dapibus non libero nec lobortis. Nullam iaculis nisl ac eros
+          consequat, sit amet placerat massa vulputate.
+        </p>
+        <p>
+          <button>annotate</button>
+        </p>
+      </div>
+    </section>
     <section id="multilineSection" style="background: #FFF8F1;">
       <div class="sizedPanel">
         <h3>Multiple lines</h3>

Diff for: package-lock.json

@@ -17,6 +17,6 @@
   },
   "homepage": "https://github.com/pshihn/rough-notation-web#readme",
   "dependencies": {
-    "rough-notation": "^0.3.3"
+    "rough-notation": "^0.4.0"
   }
 }