float and aside style fixes

Author: jamesknelson

example/src/document.mdx

@@ -167,6 +167,23 @@ export default function Reference() {
 Step 2: Create `navigation`
 ---------------------------
 
+<Doc.Float minWidth='50%'>
+<Doc.Gutter>
+<div style={{ border: '2px solid green' }}>
+<header>
+<Doc.Gutter half>
+<h4>Test</h4>
+</Doc.Gutter>
+</header>
+<Doc.Gutter half>
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+</Doc.Gutter>
+</div>
+</Doc.Gutter>
+</Doc.Float>
+
 Navi does all of the hard work within a `Navigation` object. This is where Navi watches for history events, matches URLs to pages and content, and turns all of this info into an object that you can use.
 
 To create a `Navigation`, just call `createBrowserNavigation()` within `index.js`, passing in the `pages` object that you defined earlier. Once you have a `Navigation`, just wait for its initial content to become available -- and then render it!

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontarm/doc",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "A set of components for creating rich, responsive documents built around MDX.",
   "author": "James K Nelson <[email protected]>",
   "license": "MIT",

src/DocLayout.module.scss

@@ -97,13 +97,16 @@
   }
 
   // When a gutter is manually specified around a block, use that instead
-  // of applying gutter styles -- but still use the specified max width
-  // -- even if inside an Aside.
-  .Gutter & {
-    @include when-twin-column {
+  // of applying gutter styles.
+  @include when-twin-column {
+    .Gutter & {
       margin-left: 0;
       margin-right: 0;
     }
+    .Aside .Gutter &,
+    .Float .Gutter & {
+      width: 100%;
+    }
   }
 }