add example

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "[html]": {
+    "editor.formatOnSave": false
+  },
+}

_config.yml

@@ -5,4 +5,4 @@ theme: just-the-docs
 url: https://evenbetterspecs.github.io
 
 aux_links:
-  Template Repository: https://github.com/just-the-docs/just-the-docs-template
+  GitHub: https://github.com/evenbetterspecs/

_sass/custom/custom.scss

@@ -0,0 +1,40 @@
+.bad,
+.good {
+  background: #e8e8e8;
+  padding: 5px 0px 0px 0;
+
+  &::before {
+    padding: 0 10px;
+  }
+
+  .highlight {
+    margin-top: 3px;
+  }
+}
+
+.bad {
+  color: red;
+
+  &::before {
+    content: "BAD";
+  }
+}
+
+.good {
+  color: green;
+
+  &::before {
+    content: "GOOD";
+  }
+}
+
+.main-content {
+
+  h2 {
+    &:first-child {
+      margin-top: 0;
+    }
+
+    margin-bottom: 0.75em;
+  }
+}

index.html

@@ -0,0 +1,30 @@
+---
+title: Home
+layout: home
+---
+
+<article>
+  <h2 id="describe">
+    <a href="#describe">
+      Describe what you are testing
+    </a>
+  </h2>
+
+  <p>Be clear about what method you are describing. For instance, use the Ruby documentation convention of <code>.</code> when referring to a class method's name and <code>#</code> when referring to an instance method's name.</p>
+
+  <div class="bad">
+{% highlight ruby %}
+describe 'the authenticate method for User' do
+describe 'if the user is an admin' do
+describe 'create url' do
+{% endhighlight %}
+  </div>
+
+  <div class="good">
+{% highlight ruby %}
+describe '.authenticate' do
+describe '#admin?' do
+describe '#create' do
+{% endhighlight %}
+  </div>
+</article>