Add some content to the top-bar (#1374)

justinfagnani · web-flow · commit c8f6c1a2ab03 · 2022-10-20T15:13:10.000-07:00
diff --git a/packages/site-client/src/components/wco-top-bar.ts b/packages/site-client/src/components/wco-top-bar.ts
@@ -15,18 +15,72 @@ export class WCOTopBar extends LitElement {
       top: 0;
       left: 0;
       width: 100vw;
-      height: 50px;
-      padding: 10px 20px;
+      height: 70px;
+      padding: 0 20px;
       display: flex;
       align-items: center;
       background: #eee;
       border-bottom: 1px solid #ccc;
-      font-family: sans-serif;
+      box-sizing: border-box;
+      font-weight: 500;
+      color: #222;
     }
+    
+    #title {
+      font-size: 1.5rem;
+      letter-spacing: .05em;
+      text-transform: lowercase;
+    }
+
+    #logo {
+      border-radius: 10%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 48px;
+      background: #444;
+      color: white;
+      font-size: 1.25rem;
+      font-weight: normal;
+      margin-right: 8px;
+      text-transform: initial;
+    }
+
+    nav {
+      display: flex;
+      justify-content: right;
+      align-items: center;
+      flex: 1;
+      height: 100%;
+      font-size: 1.25rem;
+    }
+
+    nav > a {      
+      display: flex;
+      align-items: center;
+      height: 100%;
+      padding: 0 16px;
+      text-decoration: none;
+      color: inherit;
+    }
+
+    nav > a:hover {
+      background: #00000008;
+    }
+
   `;
 
   render() {
-    return html`🚧 webcomponents.org `;
+    return html`
+      <span id="title"><span id="logo">WC</span> WebComponents.org</span>
+      <nav>
+        <a href="/catalog">Catalog</a>
+        <a href="/docs">Docs</a>
+        <a href="/articles">Articles</a>
+        <a href="/community">Community</a>
+      </nav>
+    `;
   }
 }
 
diff --git a/packages/site-content/site/index.html b/packages/site-content/site/index.html
@@ -4,5 +4,10 @@
 scripts:
 - "./js/homepage.js"
 ---
-<wco-top-bar></wco-top-bar>
-<h2>🚧 Under construction! 🚧</h2>
+<section>
+  <h2>🚧 Under construction! 🚧</h2>
+  <p>
+    This version of webcomponents.org is under active development and not
+    ready for use.
+  </p>
+</section>
diff --git a/packages/site-server/src/templates/base.ts b/packages/site-server/src/templates/base.ts
@@ -36,8 +36,6 @@ export const renderPage = (data: {
         margin: 0;
         --mdc-typography-font-family: 'Open Sans', Arial, Helvetica, sans-serif;
         font-family: var(--mdc-typography-font-family);
-        font-size: 14px;
-        line-height: 1.5;
         min-height: 100vh;
       }
       @media (max-width: 500px), (max-height: 500px) {
@@ -50,6 +48,7 @@ export const renderPage = (data: {
     <title>${escapeHTML(data.title)}</title>
   </head>
   <body>
+    <wco-top-bar></wco-top-bar>
     ${data.content}
   </body>
 </html>
