Merge pull request #168 from henryiii/shortcodes

Adding some useful shortcodes

README.md

@@ -121,6 +121,32 @@ This can be achieved by running the next command prior to calling Hugo:
   
 See at [xor-gate/xor-gate.org](https://github.com/xor-gate/xor-gate.org) an example of how to add it to a continuous integration system.
  
+### Extra shortcodes
+
+There are two extra shortcodes provided (along with the customized figure shortcode):
+
+#### Details
+
+This simply adds the html5 detail attribute, supported on all *modern* browsers. Use it like this:
+
+```
+{{% details "This is the details title (click to expand)" %}}
+This is the content (hidden until clicked).
+{{% /details %}}
+```
+
+#### Split
+
+This adds a two column side-by-side environment (will turn into 1 col for narrow devices):
+
+```
+{{< columns >}}
+This is column 1.
+{{< column >}}
+This is column 2.
+{{< endcolumn >}}
+```
+
 ## About
 
 This is a port of the Jekyll theme [Beautiful Jekyll](https://deanattali.com/beautiful-jekyll/) by [Dean Attali](https://deanattali.com/aboutme#contact). It supports most of the features of the original theme.

layouts/shortcodes/column.html

@@ -0,0 +1 @@
+</div><div class="right">

layouts/shortcodes/columns.html

@@ -0,0 +1 @@
+<div class="splitbox"><div class="left">

layouts/shortcodes/details.html

@@ -0,0 +1,3 @@
+<details><summary>{{ .Get 0 }}</summary>
+{{ .Inner }}
+</details>

layouts/shortcodes/endcolumns.html

@@ -0,0 +1 @@
+</div><div style="clear:both"></div></div>

static/css/main.css

@@ -719,3 +719,26 @@ input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus, .gs
   box-sizing: content-box;
   line-height: normal;
 }
+
+/* IPython split style */
+div.splitbox {width:100%; overflow:auto;}
+
+div.splitbox div.left {
+               width:48%;
+               display:inline-block;
+               float:left;}
+div.splitbox div.right {
+               width:48%;
+               display:inline-block;
+               float:right;}
+
+@media only screen and (max-width: 600px) {
+div.splitbox div.left {
+               width:100%;
+               display:inline-block;
+               float:left;}
+div.splitbox div.right {
+               width:100%;
+               display:inline-block;
+               float:left;}
+}