codeforboston
diff --git a/‎components/Layout/Layout.js‎
Lines changed: 21 additions & 3 deletions b/‎components/Layout/Layout.js‎
Lines changed: 21 additions & 3 deletions
diff --git a/‎components/Layout/Layout.module.css‎
Lines changed: 11 additions & 3 deletions b/‎components/Layout/Layout.module.css‎
Lines changed: 11 additions & 3 deletions
@@ -2,10 +2,11 @@ import Head from "next/head";
 import { NavBar } from "../index";
 import styles from "./Layout.module.css";
 
-export default function Layout({
+// Outer HTML for single- or multi-column layouts
+export const LayoutWrapper = function({
   pageTitle,
   children,
-  title = "Easy To Do Good",
+  title
 }) {
   return (
     <div className={styles.container}>
@@ -17,10 +18,27 @@ export default function Layout({
       </Head>
       <NavBar pageTitle={pageTitle}></NavBar>
       <div className={styles["content-container"]}>
-        <section className={styles.content}>{children}</section>
+        {children}
       </div>
 
       <footer className={styles.footer}>Powered by Democracy</footer>
     </div>
   );
 }
+
+// The default layout is single-column and its content
+// gets wrapped in a <section> which has a white background
+export default function Layout({
+  pageTitle,
+  children,
+  title = "Easy To Do Good",
+}) {
+  return (
+    <LayoutWrapper
+      pageTitle={pageTitle}
+      title={title}
+      >
+      <section className={styles["content-article"]}>{children}</section>
+    </LayoutWrapper>
+  );
+}
@@ -30,13 +30,21 @@
 		justify-content: center;
 		background-color: #e2e1d2;
 		min-height: 50vh;
+    padding: 2rem;
 }
 
 .content {
     margin: 20px;
     padding: 20px;
-		width: 50vw;
-		background-color: #FFFFFF;
-		border-radius: 5px;
+		width: 90vw;
+		background-color: transparent;
+}
+
+.content-article {
+    background-color: #FFFFFF;
+    border-radius: 5px;
     box-shadow: 0 8px 6px -6px grey;
+    margin: 0;
+    padding: 1rem;
 }
+