From 6a52a11c56bd563b519fd554c89ff41b480b5254 Mon Sep 17 00:00:00 2001
From: Henry Fredrick Schreiner <henry.fredrick.schreiner@cern.ch>
Date: Thu, 4 Jan 2018 09:43:42 -0500
Subject: [PATCH] Adding some useful shortcodes

---
 README.md                          | 28 +++++++++++++++++++++++++++-
 layouts/shortcodes/column.html     |  1 +
 layouts/shortcodes/columns.html    |  1 +
 layouts/shortcodes/details.html    |  3 +++
 layouts/shortcodes/endcolumns.html |  1 +
 static/css/main.css                | 23 +++++++++++++++++++++++
 6 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 layouts/shortcodes/column.html
 create mode 100644 layouts/shortcodes/columns.html
 create mode 100644 layouts/shortcodes/details.html
 create mode 100644 layouts/shortcodes/endcolumns.html

diff --git a/README.md b/README.md
index 98fab76..d548a63 100644
--- a/README.md
+++ b/README.md
@@ -120,7 +120,33 @@ 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.
diff --git a/layouts/shortcodes/column.html b/layouts/shortcodes/column.html
new file mode 100644
index 0000000..5e07dfb
--- /dev/null
+++ b/layouts/shortcodes/column.html
@@ -0,0 +1 @@
+</div><div class="right">
diff --git a/layouts/shortcodes/columns.html b/layouts/shortcodes/columns.html
new file mode 100644
index 0000000..fd457bc
--- /dev/null
+++ b/layouts/shortcodes/columns.html
@@ -0,0 +1 @@
+<div class="splitbox"><div class="left">
diff --git a/layouts/shortcodes/details.html b/layouts/shortcodes/details.html
new file mode 100644
index 0000000..3410075
--- /dev/null
+++ b/layouts/shortcodes/details.html
@@ -0,0 +1,3 @@
+<details><summary>{{ .Get 0 }}</summary>
+{{ .Inner }}
+</details>
diff --git a/layouts/shortcodes/endcolumns.html b/layouts/shortcodes/endcolumns.html
new file mode 100644
index 0000000..13c2f9f
--- /dev/null
+++ b/layouts/shortcodes/endcolumns.html
@@ -0,0 +1 @@
+</div><div style="clear:both"></div></div>
diff --git a/static/css/main.css b/static/css/main.css
index d1c70a7..8fcf56a 100644
--- a/static/css/main.css
+++ b/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;}
+}