diff --git a/content/software/solvespace.md b/content/software/solvespace.md
index be5ab2c..349e91c 100644
--- a/content/software/solvespace.md
+++ b/content/software/solvespace.md
@@ -7,6 +7,7 @@ template = "page.html"
 layout_css = "col-12 col-md-10 mx-auto"
 +++
 
+
 {% div() %}
 <script src="/js/hammer-2.0.8.js"></script>
 <script src="/js/three-r76.js"></script>
@@ -14,108 +15,96 @@ layout_css = "col-12 col-md-10 mx-auto"
 {% end %}
 
 
-{% centerp(markdown=true) %}
+
+{% layout_centered_simple() %}
 ##### What is SolveSpace?
 {% end %}
 
 <a href="http://solvespace.com/" target="_blank" rel="noopener noreferrer">SolveSpace</a> is a libre and open-source parametric computer-aided design application that uses a NURBS geometric kernel, allowing it to represent curved surfaces exactly. It was originally released by <a href="http://cq.cx/" target="_blank" rel="noopener noreferrer">Jonathan Westhues</a> under the GPLv3 license and is now further developed at M-Labs.
 
 
-{% centerp(markdown=true, css="mt-5") %}
+
+{% layout_centered_simple(css="mt-5") %}
 ##### What can be done with SolveSpace?
 {% end %}
 
 SolveSpace is primarily useful for mechanical design. At M-Labs, we use it to design vacuum chambers as well as custom fittings and fixtures. The models can then be exported as STEP or PDF with dimensions and sent to a machine shop for manufacturing.
 
 
-{% centerp(markdown=true, css="mt-5") %}
+
+{% layout_centered_simple(css="mt-5") %}
 **Fittings and adapters**
 {% end %}
 
 Of course, most vacuum chambers would have some standard flanges. These can be easily modelled using a single sketch and a lathe operation:
 
-{% layoutlr1() %}
 
-<div class="col-12 d-flex flex-column flex-lg-row justify-content-center justify-content-md-between align-items-center">
 
-  <img class="img-fluid" src="/images/kf25-section.png" width="400" height="100%">
+{% layout_treejs(two=true, css="row d-flex align-items-center mt-5 mb-1") %}
+<img class="img-fluid" src="/images/kf25-section.png" width="400" height="100%">
 
-  <div id="kf25"></div>
-  <script src="/js/models/kf25.js"></script>
-  <script>
-    (function () {
-      var node = document.getElementById("kf25");
-      var params = {width: 400, height: 300, scale: 10, offset: new THREE.Vector3(-8, 0, 0)};
-      node.parentNode.replaceChild(solvespace(solvespace_model_kf25, params), node);
-    })();
-  </script>
-
-</div>
+<div id="kf25"></div>
+<script src="/js/models/kf25.js"></script>
+<script>
+  (function () {
+    var node = document.getElementById("kf25");
+    var params = {width: 400, height: 300, scale: 10, offset: new THREE.Vector3(-8, 0, 0)};
+    node.parentNode.replaceChild(solvespace(solvespace_model_kf25, params), node);
+  })();
+</script>
 {% end %}
 
+*(The illustration on the right is "live"; it can be panned, rotated and scaled.)*
 
 
-{% centerp(markdown=true, css="mt-3") %}
-&nbsp;
-{% end %}
-
-(The illustration on the right is "live"; it can be panned, rotated and scaled.)
 
 In a similar way, an NW160 viewport and an adapter with an NW160 flange, a KF40, two KF25 and two KF16 ports were designed:
 
-{% layoutlr1() %}
-<div class="col-12 d-flex flex-column flex-lg-row justify-content-center justify-content-md-between align-items-center">
+{% layout_treejs(two=true) %}
+<div id="viewport"></div>
+<script src="/js/models/viewport.js"></script>
+<script>
+  (function () {
+    var node = document.getElementById("viewport");
+    var params = {width: 400, height: 300, scale: 3};
+    node.parentNode.replaceChild(solvespace(solvespace_model_viewport, params), node);
+  })();
+</script>
 
-  <div id="viewport"></div>
-  <script src="/js/models/viewport.js"></script>
-  <script>
-    (function () {
-      var node = document.getElementById("viewport");
-      var params = {width: 400, height: 300, scale: 3};
-      node.parentNode.replaceChild(solvespace(solvespace_model_viewport, params), node);
-    })();
-  </script>
-
-  <div id="multiport"></div>
-  <script src="/js/models/multiport.js"></script>
-  <script>
-    (function () {
-      var node = document.getElementById("multiport");
-      var params = {width: 400, height: 300, scale: 3};
-      node.parentNode.replaceChild(solvespace(solvespace_model_multiport, params), node);
-    })();
-  </script>
-
-</div>
+<div id="multiport"></div>
+<script src="/js/models/multiport.js"></script>
+<script>
+  (function () {
+    var node = document.getElementById("multiport");
+    var params = {width: 400, height: 300, scale: 3};
+    node.parentNode.replaceChild(solvespace(solvespace_model_multiport, params), node);
+  })();
+</script>
 {% end %}
 
 
 
-{% centerp(markdown=true, css="mt-5") %}
+{% layout_centered_simple(css="mt-5") %}
 **A vacuum chamber**
 {% end %}
 
 The fittings above were designed to be used with a cylindrical vacuum chamber, 200mm long with two NW160 flanges, two KF40 and one KF25 ports:
 
-{% layoutlr1() %}
-<div class="col-12 d-flex flex-column flex-lg-row justify-content-center align-items-center">
-
-  <div id="chamber"></div>
-  <script src="/js/models/chamber.js"></script>
-  <script>
-    (function () {
-      var node = document.getElementById("chamber");
-      var params = {width: 800, height: 600, scale: 3};
-      node.parentNode.replaceChild(solvespace(solvespace_model_chamber, params), node);
-    })();
-  </script>
-
-</div>
+{% layout_treejs() %}
+<div id="chamber"></div>
+<script src="/js/models/chamber.js"></script>
+<script>
+  (function () {
+    var node = document.getElementById("chamber");
+    var params = {width: 800, height: 600, scale: 3};
+    node.parentNode.replaceChild(solvespace(solvespace_model_chamber, params), node);
+  })();
+</script>
 {% end %}
 
 
 
-{% centerp(markdown=true, css="mt-5") %}
+{% layout_centered_simple(css="mt-5") %}
 **Cryocooler refilling fixture**
 {% end %}
 
@@ -123,101 +112,86 @@ To repair a broken Ricor K526S crycooler, it was necessary to disassemble it, wh
 
 First, the cryocooler and its cold head were modelled to verify fits:
 
-{% layoutlr1() %}
-<div class="col-12 d-flex flex-column flex-lg-row justify-content-center justify-content-md-between align-items-center mb-3">
+{% layout_treejs(two=true) %}
+<div id="k526s-body"></div>
+<script src="/js/models/k526s-body.js"></script>
+<script>
+  (function () {
+    var node = document.getElementById("k526s-body");
+    var params = {width: 400, height: 300, scale: 6, offset: new THREE.Vector3(-10, -15, 0)};
+    node.parentNode.replaceChild(solvespace(solvespace_model_k526s_body, params), node);
+  })();
+</script>
 
-  <div id="k526s-body"></div>
-  <script src="/js/models/k526s-body.js"></script>
-  <script>
-    (function () {
-      var node = document.getElementById("k526s-body");
-      var params = {width: 400, height: 300, scale: 6, offset: new THREE.Vector3(-10, -15, 0)};
-      node.parentNode.replaceChild(solvespace(solvespace_model_k526s_body, params), node);
-    })();
-  </script>
-
-  <div id="k526s-head"></div>
-  <script src="/js/models/k526s-head.js"></script>
-  <script>
-    (function () {
-      var node = document.getElementById("k526s-head");
-      var params = {width: 400, height: 300, scale: 8, offset: new THREE.Vector3(25, 0, 0)};
-      node.parentNode.replaceChild(solvespace(solvespace_model_k526s_head, params), node);
-    })();
-  </script>
-
-</div>
+<div id="k526s-head"></div>
+<script src="/js/models/k526s-head.js"></script>
+<script>
+  (function () {
+    var node = document.getElementById("k526s-head");
+    var params = {width: 400, height: 300, scale: 8, offset: new THREE.Vector3(25, 0, 0)};
+    node.parentNode.replaceChild(solvespace(solvespace_model_k526s_head, params), node);
+  })();
+</script>
 {% end %}
 
+
+
 Then, a fixture was designed, shown below with a cutout (blue). It consists of a bracket, a piston case that screws into the bracket (the thread is not modelled), a piston with a retaining screw, a retaining washer, a Swagelok fitting attached to the orange port (not modelled), and a few compression gaskets (also not modelled). The bracket and the piston case hold the cryocooler The retaining washer prevents the piston from being ejected by high pressure helium and, conversely, together with another washer prevents the piston from being sucked in and blocking the gas flow during evacuation.
 
-{% layoutlr1() %}
-<div class="col-12 d-flex flex-column flex-lg-row justify-content-center align-items-center mb-3">
-
-  <div id="k526s-fixture"></div>
-  <script src="/js/models/k526s-fixture.js"></script>
-  <script>
-    (function () {
-      var node = document.getElementById("k526s-fixture");
-      var params = {width: 800, height: 400, scale: 12};
-      node.parentNode.replaceChild(solvespace(solvespace_model_k526s_fixture, params), node);
-    })();
-  </script>
-
-</div>
+{% layout_treejs() %}
+<div id="k526s-fixture"></div>
+<script src="/js/models/k526s-fixture.js"></script>
+<script>
+  (function () {
+    var node = document.getElementById("k526s-fixture");
+    var params = {width: 800, height: 400, scale: 12};
+    node.parentNode.replaceChild(solvespace(solvespace_model_k526s_fixture, params), node);
+  })();
+</script>
 {% end %}
 
+
+
 The KF25 adapter for the cold head is a much simpler device:
 
-{% layoutlr1() %}
-<div class="col-12 d-flex flex-column flex-lg-row justify-content-center justify-content-md-between align-items-center mb-5">
+{% layout_treejs(two=true) %}
+<div id="k526s-adapter"></div>
+<script src="/js/models/k526s-adapter.js"></script>
+<script>
+  (function () {
+    var node = document.getElementById("k526s-adapter");
+    var params = {width: 400, height: 300, scale: 8, offset: new THREE.Vector3(-8, 0, 0)};
+    node.parentNode.replaceChild(solvespace(solvespace_model_k526s_adapter, params), node);
+  })();
+</script>
 
-  <div id="k526s-adapter"></div>
-  <script src="/js/models/k526s-adapter.js"></script>
-  <script>
-    (function () {
-      var node = document.getElementById("k526s-adapter");
-      var params = {width: 400, height: 300, scale: 8, offset: new THREE.Vector3(-8, 0, 0)};
-      node.parentNode.replaceChild(solvespace(solvespace_model_k526s_adapter, params), node);
-    })();
-  </script>
-
-  <div id="k526s-adapter-assy"></div>
-  <script src="/js/models/k526s-adapter-assy.js"></script>
-  <script>
-    (function () {
-      var node = document.getElementById("k526s-adapter-assy");
-      var params = {width: 400, height: 300, scale: 8};
-      node.parentNode.replaceChild(solvespace(solvespace_model_k526s_adapter_assy, params), node);
-    })();
-  </script>
-
-</div>
+<div id="k526s-adapter-assy"></div>
+<script src="/js/models/k526s-adapter-assy.js"></script>
+<script>
+  (function () {
+    var node = document.getElementById("k526s-adapter-assy");
+    var params = {width: 400, height: 300, scale: 8};
+    node.parentNode.replaceChild(solvespace(solvespace_model_k526s_adapter_assy, params), node);
+  })();
+</script>
 {% end %}
 
 
 
-{% centerp(markdown=true) %}
+{% layout_centered_content(css="row d-flex align-items-center mt-5 mb-5 pt-5") %}
 ##### Ongoing development by M-Labs
 {% end %}
 
-
 As originally released, SolveSpace was far ahead almost every other FLOSS CAD by virtue of its parametric nature, exact internal representation of curves and a codebase easy to work with. (The only other FLOSS parametric CAD that uses a NURBS representation, including NURBS booleans, is FreeCAD.) While it was already suitable for practical work, it had a much greater unrealized potential.
 
 Thus, M-Labs has developed many additional features:
 
 - Native Linux (GTK) and OS X ports;
-
 - stippling as well as <a href="https://m-labs.hk/solvespace/images/hiddenline.gif" target="_blank" rel="noopener noreferrer">outline and hidden line</a> styling in preparation for export of shop drawings according to ISO or another standard;
-
 - WebGL export using Three.js, which is how the interactive models on this page work;
-
 - DXF export that preserves the ability to edit the drawing afterwards, by mapping parametric constraints to DXF dimensions and grouping the lines;
-
 - DXF import that automatically infers (some) constraints, such as horizontal/vertical, point-coincident, linear and angular dimensions from DXF geometry and dimensions;
-
 - internationalization;
-
 - and many other minor ones.
 
 
diff --git a/templates/shortcodes/layout_centered_simple.html b/templates/shortcodes/layout_centered_simple.html
new file mode 100644
index 0000000..082d372
--- /dev/null
+++ b/templates/shortcodes/layout_centered_simple.html
@@ -0,0 +1,5 @@
+<div class="text-center {% if css %}{{ css }}{% endif %}">
+
+  {{ body | markdown | safe}}
+
+</div>
\ No newline at end of file
diff --git a/templates/shortcodes/layout_treejs.html b/templates/shortcodes/layout_treejs.html
new file mode 100644
index 0000000..c341367
--- /dev/null
+++ b/templates/shortcodes/layout_treejs.html
@@ -0,0 +1,9 @@
+<div class="{% if css %}{{ css }}{% else %}row d-flex align-items-center mt-5 mb-5{% endif %}">
+
+  <div class="col-12 d-flex flex-column flex-lg-row justify-content-center {% if two %}justify-content-md-between{% else %}justify-content-md-center{% endif %} align-items-center">
+
+      {{ body | safe }}
+
+  </div>
+
+</div>
\ No newline at end of file