feat: intro footer element (microsoft#14)

* feat: styles * feat: introduce footer
sand4rt · Aug 4, 2020 · b3d181e · b3d181e
1 parent f9f0b38
commit b3d181e
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 1 deletion.
diff --git a/src/main.js b/src/main.js
@@ -9,6 +9,24 @@ import {GlossaryItem} from './markdownFile.js';
 import {onDOMEvent} from './utils.js';
 import {scrollIntoView} from './third_party/scroll-into-view-if-needed.js';
 
+const footerElement = html`
+  <div class="footer-container">
+    <div class="footer">
+      <div>
+        <ul>
+          <li><a href="https://github.com/microsoft/playwright">GitHub</a></li>
+          <li><a href="https://github.com/microsoft/playwright/releases/">Changelog</a></li>
+          <li><a href="https://join.slack.com/t/playwright/shared_invite/enQtOTEyMTUxMzgxMjIwLThjMDUxZmIyNTRiMTJjNjIyMzdmZDA3MTQxZWUwZTFjZjQwNGYxZGM5MzRmNzZlMWI5ZWUyOTkzMjE5Njg1NDg">Slack</a></li>
+          <li><a href="https://stackoverflow.com/tags/playwright">Stack Overflow</a></li>
+        </ul>
+      </div>
+      <div>
+        <img class="microsoft-logo" src="https://code.visualstudio.com/assets/images/microsoft-logo.png" height="20" alt="Microsoft logo">
+      </div>
+    </div>
+  </div>
+`;
+
 window.addEventListener('DOMContentLoaded', async() => {
   const project = await GithubProject.create({
     owner: 'microsoft',
@@ -67,6 +85,7 @@ window.addEventListener('DOMContentLoaded', async() => {
       ${documentationSidebar}
       ${documentationView}
     </div>
+    ${footerElement}
     ${glasspaneElement}
   `);
 

diff --git a/src/style.css b/src/style.css
@@ -5,6 +5,7 @@
 
 :root {
   --sidebar-width: 240px;
+  --content-width: 1280px;
   --header-height: 41px;
   --monospace: Consolas, Menlo, monospace;
   --non-monospace: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -34,7 +35,7 @@ body {
 }
 
 .container {
-  max-width: 1280px;
+  max-width: var(--content-width);
   margin: 0 auto;
 }
 
@@ -365,6 +366,36 @@ my-button > svg {
   -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
 }
 
+.footer-container {
+  width: 100%;
+  background-color: #434449;
+  font-size: 14px;
+  position: relative;
+}
+.footer {
+  margin: 50px auto 0;
+  padding: 30px 30px;
+  max-width: var(--content-width);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.footer ul {
+  list-style: none;
+  padding: 0;
+  display: inline-block;
+}
+.footer ul li {
+  display: inline-block;
+  margin-right: 15px;
+}
+.footer ul li a {
+  color: #d1d1d1;
+}
+.footer ul li a:hover {
+  text-decoration: underline;
+}
+
 /*
  * Mobile viewport styles
  */