Re-implement columns shortcode as markdown list

assets/_shortcodes.scss

@@ -77,6 +77,22 @@
       min-width: $body-min-width * 0.66;
       padding: 0 $padding-16;
     }
+
+    >ul {
+      list-style: none;
+      display: flex;
+      padding: 0;
+      flex-wrap: wrap;
+
+      >li {
+        @extend .markdown-inner;
+
+        flex: 1 1;
+        margin: $padding-16 0;
+        padding: 0 $padding-16;
+        min-width: $body-min-width * 0.66;
+      }
+    }
   }
 
   // {{< button >}}

exampleSite/content.en/docs/shortcodes/columns.md

@@ -1,42 +1,34 @@
 # Columns
 
-Columns help organize shorter pieces of content horizontally for readability.
+Columns help organize shorter pieces of content horizontally for readability. `columns` shortcode styles markdown list as up to 3 columns.
 
 ## Example
 
-```html
-{{%/* columns [ratio="1:1"] [class="..."] */%}} <!-- begin columns block -->
-# Left Content
+```tpl
+{{%/* columns [ratio="1:1"] [class="..."] */%}}
+- ### Left Content
   Lorem markdownum insigne...
 
-<---> <!-- magic separator, between columns -->
-
-# Mid Content
+- ### Mid Content
   Lorem markdownum insigne...
 
-<---> <!-- magic separator, between columns -->
-
-# Right Content
+- ### Right Content
   Lorem markdownum insigne...
 {{%/* /columns */%}}
 ```
 
 {{% columns %}}
-### Left Content
+- ### Left Content
   Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
   stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
   protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
   Miseratus fonte Ditis conubia.
 
-<--->
-
-### Mid Content
+- ### Mid Content
   Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
   stringit, frustra Saturnius uteroque inter!
 
-<--->
-
-### Right Content
+- ### Right Content
   Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
   stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
   protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
@@ -45,30 +37,24 @@ Miseratus fonte Ditis conubia.
 
 ## Settings size ratio for columns
 
-```html
-{{%/* columns ratio="1:2" */%}} <!-- begin columns block -->
-
-## x1 Column
+```tpl
+{{%/* columns ratio="1:2" */%}}
+- ## x1 Column
   Lorem markdownum insigne...
 
-<---> <!-- magic separator, between columns -->
-
-## x2 Column
+- ## x2 Column
   Lorem markdownum insigne...
-
 {{%/* /columns */%}}
 ```
 
 {{% columns ratio="1:2" %}}
-### x1 Column
+- ### x1 Column
   Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
   stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
   protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
   Miseratus fonte Ditis conubia.
 
-<--->
-
-### x2 Column
+- ### x2 Column
   Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
   stringit, frustra Saturnius uteroque inter!
   
@@ -76,5 +62,4 @@ Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
   stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
   protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
   Miseratus fonte Ditis conubia.
-
 {{% /columns %}}

layouts/_shortcodes/columns.html

@@ -1,4 +1,6 @@
 {{- $ratio := (split (.Get "ratio") ":") -}}
+{{- if strings.Contains .InnerDeindent "<--->" -}}
+{{ warnf "Columns shortcode seprator '<--->' is deprecated, use markdown list instead." -}}
 <div class="book-columns flex flex-wrap{{ with .Get "class" }} {{ . }}{{ end }}">
 {{ range $index, $content := split .InnerDeindent "<--->" }}
   {{- $grow := default 1 (index $ratio $index) -}}
@@ -7,3 +9,13 @@
   </div>
 {{ end }}
 </div>
+{{ else }}
+<div class="book-columns book-columns-{{ .Ordinal }} {{ with .Get "class" }}{{ . }}{{ end }}">
+  <style>{{- range $index, $grow := $ratio -}}
+    .book-columns-{{ $.Ordinal }}>ul>li:nth-child({{ $index | add 1 }}){
+      flex-grow: {{ $grow }};
+    }
+  {{ end -}}</style>
+  {{ .Inner | safeHTML }}
+</div>
+{{ end -}}