gutter

Author: dragonstyle

src/format/html/format-html-scss.ts

@@ -446,9 +446,10 @@ function pandocVariablesToThemeDefaults(
   // Resolve any grid variables
   const gridObj = metadata["grid"] as Metadata;
   if (gridObj) {
-    add(explicitVars, "grid-sidebar-column", gridObj["sidebar-width"]);
-    add(explicitVars, "grid-margin-column", gridObj["margin-width"]);
-    add(explicitVars, "grid-body-column", gridObj["body-width"]);
+    add(explicitVars, "grid-sidebar-width", gridObj["sidebar-width"]);
+    add(explicitVars, "grid-margin-width", gridObj["margin-width"]);
+    add(explicitVars, "grid-body-width", gridObj["body-width"]);
+    add(explicitVars, "grid-gutter-width", gridObj["gutter-width"]);
   }
   return explicitVars;
 }

src/resources/formats/html/bootstrap/_bootstrap-mixins.scss

@@ -18,22 +18,22 @@
 }
 
 // GRID CASCADE
-$grid-body-column-max: $grid-body-column !default;
+$grid-body-column-max: $grid-body-width !default;
 $grid-body-column-min: 500px !default;
 
 // Margin variables
-$grid-page-margin: $grid-margin !default;
+$grid-page-margin: $grid-column-gutter-width !default;
 $grid-page-margin-start: $grid-page-margin !default;
 $grid-page-margin-end: $grid-page-margin !default;
 
-$grid-body-margin: $grid-margin !default;
+$grid-body-margin: $grid-column-gutter-width !default;
 $grid-body-margin-start: $grid-body-margin !default;
 $grid-body-margin-end: $grid-body-margin !default;
 
 /* FLOATING GRID */
 $grid-page-margin-float: 5fr !default;
-$grid-float-sidebar-column: $grid-sidebar-column !default;
-$grid-float-margin-column: $grid-margin-column !default;
+$grid-float-sidebar-column: $grid-sidebar-width !default;
+$grid-float-margin-column: $grid-margin-width !default;
 
 /* Float Wide Default Grid */
 
@@ -322,8 +322,8 @@ $grid-float-mid-listing-body: minmax(
 ) !default;
 
 /* DOCKED GRID */
-$grid-docked-sidebar-column: $grid-sidebar-column !default;
-$grid-docked-margin-column: $grid-margin-column !default;
+$grid-docked-sidebar-column: $grid-sidebar-width !default;
+$grid-docked-margin-column: $grid-margin-width !default;
 $grid-docked-body-column: $grid-body-column-max + 200px !default;
 
 /* Docked Wide Default Grid */
@@ -583,8 +583,8 @@ $grid-docked-mid-listing-body: minmax(
 ) !default;
 
 /* DEFAULT (HTML PAGE, NOT IN WEBSITE) GRID */
-$grid-default-sidebar-column: $grid-sidebar-column !default;
-$grid-default-margin-column: $grid-margin-column !default;
+$grid-default-sidebar-column: $grid-sidebar-width !default;
+$grid-default-margin-column: $grid-margin-width !default;
 $grid-default-body-column: $grid-body-column-max + 50px !default;
 
 /* Default Wide Grid */

src/resources/formats/html/bootstrap/_bootstrap-variables.scss

@@ -179,7 +179,11 @@ $input-border-color: theme-override-value(
 );
 
 /* GRID VARIABLES */
-$grid-margin: 1.5em !default;
-$grid-sidebar-column: 250px !default;
-$grid-margin-column: 250px !default;
-$grid-body-column: 800px !default;
+// The left hand sidebar
+$grid-sidebar-width: 250px !default;
+// The main body
+$grid-body-width: 800px !default;
+// The right hand margin bar
+$grid-margin-width: 250px !default;
+// The gutter that appears between the above columns
+$grid-column-gutter-width: 1.5em !default;