notes/bash: styling

2 files changed, 31 insertions, 2 deletions

diff --git a/_notes/bash.html b/_notes/bash.html
index ea0cb8a..367ee03 100644
--- a/_notes/bash.html
+++ b/_notes/bash.html
@@ -2,6 +2,8 @@
 title: Bash
 subtitle: best practices
 layout: plain
+links:
+  - {rel: stylesheet, href: 'assets/css/bash.css'}
 features:
   - title: Arrays
     topics:
@@ -133,12 +135,18 @@ features:
     <div class="row">
       <div class="col-md-6">
         {% for guide in topic.do %}
-          {% highlight bash %}{{ guide }}{% endhighlight %}
+          <div class="pre_container pre_do">
+            {% highlight bash %}{{ guide }}{% endhighlight %}
+            <div class="pre_mark"><span class="glyphicon glyphicon-ok"></span></div>
+          </div>
         {% endfor %}
       </div>
       <div class="col-md-6">
         {% for guide in topic.dont %}
-          {% highlight bash %}{{ guide }}{% endhighlight %}
+          <div class="pre_container pre_dont">
+            {% highlight bash %}{{ guide }}{% endhighlight %}
+            <div class="pre_mark"><span class="glyphicon glyphicon-remove"></span></div>
+          </div>
         {% endfor %}
       </div>
     </div>
diff --git a/assets/css/bash.css b/assets/css/bash.css
new file mode 100644
index 0000000..2b1665c
--- /dev/null
+++ b/assets/css/bash.css
@@ -0,0 +1,21 @@
+.pre_container {
+  position: relative;
+}
+.pre_mark {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  user-select: none;
+}
+.pre_do pre {
+  border-color: #00d100;
+}
+.pre_do .glyphicon {
+  color: #00d100;
+}
+.pre_dont pre {
+  border-color: red;
+}
+.pre_dont .glyphicon {
+  color: red;
+}