get basic layout working

assets/javascripts/image-tag-whitelist.js

@@ -1,9 +1,70 @@
 (function () {
-  Discourse.Markdown.whiteListTag('figure', 'class', 'left-half');
-  Discourse.Markdown.whiteListTag('figure', 'class', 'right-half');
-  Discourse.Markdown.whiteListTag('figure', 'class', 'left-third');
-  Discourse.Markdown.whiteListTag('figure', 'class', 'right-third');
-  Discourse.Markdown.whiteListTag('figure', 'class', 'left-quarter');
-  Discourse.Markdown.whiteListTag('figure', 'class', 'right-quarter');
-  Discourse.Markdown.whiteListTag('figure', 'data-max-width', /\d+\%?$/ );
+  Discourse.Markdown.whiteListTag('figure', 'class', 'quarter');
+  Discourse.Markdown.whiteListTag('figure', 'class', 'third');
+  Discourse.Markdown.whiteListTag('figure', 'class', 'half');
+  Discourse.Markdown.whiteListTag('figure', 'class', 'two-thirds');
+  Discourse.Markdown.whiteListTag('figure', 'class', 'three-quarters');
+  Discourse.Markdown.whiteListTag('figure', 'class', 'right');
+  Discourse.Markdown.whiteListTag('figure', 'class', 'last');
+
+  // quarter
+  Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(quarter|right)\s+(right|quarter)\s*$/);
+  Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(quarter|last)\s+(quarter|last)\s*$/);
+  Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(quarter|last|right)\s+(quarter|last|right)\s+(quarter|last|right)\s*$/);
+
+  // third
+  Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(third|right)\s+(right|third)\s*$/);
+  Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(third|last)\s+(third|last)\s*$/);
+  Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(third|last|right)\s+(third|last|right)\s+(third|last|right)\s*$/);
+
+  // half
+  Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(half|right)\s+(right|half)\s*$/);
+  Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(half|last)\s+(half|last)\s*$/);
+  Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(half|last|right)\s+(half|last|right)\s+(half|last|right)\s*$/);
+
+  // two-thirds
+  Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(two-thirds|right)\s+(right|two-thirds)\s*$/);
+  Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(two-thirds|last)\s+(two-thirds|last)\s*$/);
+  Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(two-thirds|last|right)\s+(two-thirds|last|right)\s+(two-thirds|last|right)\s*$/);
+
+  // three-quarters
+  Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(three-quarters|right)\s+(right|three-quarters)\s*$/);
+  Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(three-quarters|last)\s+(three-quarters|last)\s*$/);
+  Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(three-quarters|last|right)\s+(three-quarters|last|right)\s+(three-quarters|last|right)\s*$/);
+
+  // paragraphs
+  Discourse.Markdown.whiteListTag('div', 'class', 'quarter');
+  Discourse.Markdown.whiteListTag('div', 'class', 'third');
+  Discourse.Markdown.whiteListTag('div', 'class', 'half');
+  Discourse.Markdown.whiteListTag('div', 'class', 'two-thirds');
+  Discourse.Markdown.whiteListTag('div', 'class', 'three-quarters');
+  Discourse.Markdown.whiteListTag('div', 'class', 'right');
+  Discourse.Markdown.whiteListTag('div', 'class', 'last');
+
+  // quarter
+  Discourse.Markdown.whiteListTag('div', 'class', /^\s*(quarter|right)\s+(right|quarter)\s*$/);
+  Discourse.Markdown.whiteListTag('div', 'class', /^\s*(quarter|last)\s+(quarter|last)\s*$/);
+  Discourse.Markdown.whiteListTag('div', 'class', /^\s*(quarter|last|right)\s+(quarter|last|right)\s+(quarter|last|right)\s*$/);
+
+  // third
+  Discourse.Markdown.whiteListTag('div', 'class', /^\s*(third|right)\s+(right|third)\s*$/);
+  Discourse.Markdown.whiteListTag('div', 'class', /^\s*(third|last)\s+(third|last)\s*$/);
+  Discourse.Markdown.whiteListTag('div', 'class', /^\s*(third|last|right)\s+(third|last|right)\s+(third|last|right)\s*$/);
+
+  // half
+  Discourse.Markdown.whiteListTag('div', 'class', /^\s*(half|right)\s+(right|half)\s*$/);
+  Discourse.Markdown.whiteListTag('div', 'class', /^\s*(half|last)\s+(half|last)\s*$/);
+  Discourse.Markdown.whiteListTag('div', 'class', /^\s*(half|last|right)\s+(half|last|right)\s+(half|last|right)\s*$/);
+
+  // two-thirds
+  Discourse.Markdown.whiteListTag('div', 'class', /^\s*(two-thirds|right)\s+(right|two-thirds)\s*$/);
+  Discourse.Markdown.whiteListTag('div', 'class', /^\s*(two-thirds|last)\s+(two-thirds|last)\s*$/);
+  Discourse.Markdown.whiteListTag('div', 'class', /^\s*(two-thirds|last|right)\s+(two-thirds|last|right)\s+(two-thirds|last|right)\s*$/);
+
+  // three-quarters
+  Discourse.Markdown.whiteListTag('div', 'class', /^\s*(three-quarters|right)\s+(right|three-quarters)\s*$/);
+  Discourse.Markdown.whiteListTag('div', 'class', /^\s*(three-quarters|last)\s+(three-quarters|last)\s*$/);
+  Discourse.Markdown.whiteListTag('div', 'class', /^\s*(three-quarters|last|right)\s+(three-quarters|last|right)\s+(three-quarters|last|right)\s*$/);
+
+  Discourse.Markdown.whiteListTag('hr', 'class', 'clear');
 })();

assets/stylesheets/aligned-images.scss

@@ -1,4 +1,4 @@
-$figure-margin: 14px;
+$post-margin: 14px;
 
 .cooked {
   box-sizing: border-box;
@@ -11,21 +11,29 @@ $figure-margin: 14px;
   box-sizing: inherit;
 }
 
-.cooked > *:first-child {
-  margin-top: $figure-margin;
-}
+//.cooked > *:first-child {
+//  margin-top: $post-margin;
+//}
 
 .cooked p {
-  padding-right: $figure-margin;
+  margin-top: 0;
 }
 
 .cooked hr {
   clear: both;
 }
 
+.cooked .clear {
+  clear: both;
+  background: #fff; // Change this to the bg color variable
+  margin: 0;
+  height: 0;
+  border: none;
+}
+
 figure {
   width: 100%;
-  margin: $figure-margin 0;
+  margin: 0 0 $post-margin 0;
 }
 
 .post-menu-area {
@@ -37,38 +45,127 @@ figure img {
   height: auto;
 }
 
-.left-half {
+// quarter
+// ==============
+
+.quarter {
+  width: calc(25% - (3/4 * #{$post-margin}));;
+  float: left;
+  margin-right: $post-margin;
+}
+
+.quarter.right {
+  float: right;
+  margin-right: 0;
+  margin-left: $post-margin;
+}
+
+.quarter.last {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.quarter.right.last {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+// third
+// ===============
+
+.third {
+  width: calc(33.3333% - (2/3 * #{$post-margin}));
+  float: left;
+  margin-right: $post-margin;
+}
+
+.third.right {
+  float: right;
+  margin-right: 0;
+  margin-left: $post-margin;
+}
+
+.third.last {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.third.right.last {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+// half
+// ==================
+
+.half {
+  width: calc(50% - (1/2 * #{$post-margin}));
   float: left;
-  width: 50%;
-  padding-right: $figure-margin;
+  margin-right: $post-margin;
 }
 
-.right-half {
+.half.right {
   float: right;
-  width: 50%;
-  padding-right: $figure-margin;
+  margin-right: 0;
+  margin-left: $post-margin;
+}
+
+.half.last {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.half.right.last {
+  margin-left: 0;
+  margin-right: 0;
 }
 
-.left-third {
+// two thirds
+// ==================
+
+.two-thirds {
+  width: calc(66.6666% - (1/3 * #{$post-margin}));
   float: left;
-  width: 33.3333%;
-  padding-right: $figure-margin;
+  margin-right: $post-margin;
 }
 
-.right-third {
+.two-thirds.right {
   float: right;
-  width: 33.3333%;
-  padding-right: $figure-margin;
+  margin-right: 0;
+  margin-left: $post-margin;
+}
+
+.two-thirds.last {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.two-thirds.right.last {
+  margin-left: 0;
+  margin-right: 0;
 }
 
-.left-quarter {
+// three quarters
+// ==================
+
+.three-quarters {
+  width: calc(75% - (1/4 * #{$post-margin}));
   float: left;
-  width: 25%;
-  padding-right: $figure-margin;
+  margin-right: $post-margin;
 }
 
-.right-quarter {
+.three-quarters.right {
   float: right;
-  width: 25%;
-  padding-right: $figure-margin;
+  margin-right: 0;
+  margin-left: $post-margin;
 }
+
+.three-quarters.last {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.three-quarters.right.last {
+  margin-left: 0;
+  margin-right:0;
+}