style updates per request in issue #17

ProjectEvergreen · May 11, 2022 · 8e51ea6 · 8e51ea6
1 parent 5a4e9af
commit 8e51ea6
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 19 deletions.
diff --git a/docs/components/header.js b/docs/components/header.js
@@ -22,24 +22,31 @@ template.innerHTML = `
       width: 90px;
       height: 20px;
     }
+
+    header div.container {
+      max-width: 1200px;
+      margin: auto;
+    }
   </style>
 
   <header>
-    <div>
-      <a href="/">
-        <img src="/www/assets/wcc-logo.jpg" alt="WCC logo" class="logo"/>
-      </a>
-
-      <a href="https://github.com/ProjectEvergreen/wcc" class="social">
-        <img
-          src="https://img.shields.io/github/stars/ProjectEvergreen/wcc.svg?style=social&logo=github&label=github"
-          alt="WCC GitHub badge"
-          class="github-badge"
-        />
-      </a>
-    </div>
+    <div class="container">
+      <div>
+        <a href="/">
+          <img src="/www/assets/wcc-logo.jpg" alt="WCC logo" class="logo"/>
+        </a>
 
-    <wcc-navigation></wcc-navigation>
+        <a href="https://github.com/ProjectEvergreen/wcc" class="social">
+          <img
+            src="https://img.shields.io/github/stars/ProjectEvergreen/wcc.svg?style=social&logo=github&label=github"
+            alt="WCC GitHub badge"
+            class="github-badge"
+          />
+        </a>
+      </div>
+
+      <wcc-navigation></wcc-navigation>
+    </div>
   </header>
 `;
 
@@ -56,4 +63,4 @@ export {
   Header
 };
 
-customElements.define('wcc-header', Header);
+customElements.define('wcc-header', Header);
diff --git a/docs/index.js b/docs/index.js
@@ -9,8 +9,14 @@ template.innerHTML = `
       --accent: #367588;
     }
 
+    body {
+      display: flex;
+      flex-direction: column;
+    }
+
     main {
-      margin-bottom: 20px;
+      max-width: 1200px;
+      margin: 20px auto;
     }
 
     a:visited {
@@ -25,8 +31,6 @@ template.innerHTML = `
   </main>
 
   <wcc-footer></wcc-footer>
-
-  </main>
 `;
 
 class Home extends HTMLElement {
@@ -39,4 +43,4 @@ class Home extends HTMLElement {
   }
 }
 
-export default Home;
+export default Home;