Add major projects to main menu

bytecodealliance · Mar 1, 2020 · e8f5014 · e8f5014
1 parent 49874f7
commit e8f5014
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 30 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -8,5 +8,10 @@
 <script>
     document.getElementById("menu-button").addEventListener("click", function() {
         document.getElementById("nav-entries").classList.toggle("show");
-    })
+    });
+    // document.querySelector("projects-nav > a").addEventListener("click", function(e) {
+    //     e.preventDefault;
+    //     document.getElementById("projects-nav").classList.toggle("open");
+    //     return false;
+    // });
 </script>
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -1,5 +1,5 @@
 <nav id="site-nav">
-    <a href="{{ site.baseurl }}/" class="brand w--current"><img
+    <a href="{{ site.baseurl }}/" class="brand"><img
             src="{{ site.baseurl }}/images/bytecode-alliance-logo.svg" width="164" alt="Bytecode Alliance logo">
     </a>
 
@@ -10,6 +10,16 @@
             <li><a href="{{ site.baseurl }}/mission">Mission &amp; Values</a></li>
             <li><a href="{{ site.baseurl }}/press/formation">Press Releases</a></li>
             <li><a href="{{ site.baseurl }}/articles">Articles</a></li>
+            <li id="projects-nav">
+                <a>Projects</a>
+                <ul>
+                    <li><a href="https://wasmtime.dev">Wasmtime</a></li>
+                    <li><a href="https://github.com/bytecodealliance/wasmtime/cranelift/">Cranelift</a></li>
+                    <li><a href="https://github.com/bytecodealliance/lucet/">Lucet</a></li>
+                    <li><a href="https://github.com/bytecodealliance/wasm-micro-runtime">WAMR</a></li>
+                    <li><a href="https://enarx.io/">Enarx <br>(associated)</a></li>
+                </ul>
+            </li>
             <li class="github-link"><a href="https://github.com/bytecodealliance/">
                     <img src="{{ site.baseurl }}/images/github-icon.svg" alt="GitHub link" class="github">
                     <span>GitHub</span>

diff --git a/css/style.css b/css/style.css
@@ -78,10 +78,14 @@ p {
   font-weight: 500;
 }
 
-#site-nav .container ul {
+#site-nav {
   height: 66px;
 }
 
+#site-nav #nav-entries {
+  position: relative;
+}
+
 #site-nav #menu-button {
   display: none;
   position: fixed;
@@ -116,8 +120,8 @@ p {
 
 #site-nav ul li {
   list-style: none;
-  display: inline-block;
-  margin: 22px 20px 0 21px;
+  float: left;
+  margin: 22px 18px 0 27px;
 }
 #site-nav ul li a {
   position: relative;
@@ -140,31 +144,15 @@ body[id^="posts-"] nav a[href^="/articles"] {
 }
 
 #site-nav ul li.github-link {
-  position: relative;
-  top: -3px;
-  margin: 0;
-  padding: 0 14px;
+  margin: 18px 14px 0 20px;
+  padding: 0;
 }
 
-#site-nav ul li:hover {
+#site-nav a:hover {
   -webkit-filter: brightness(60%);
   filter: brightness(60%);
 }
 
-#site-nav ul li.w--current {
-  border-bottom: 2px solid #373753;
-  -webkit-transition: -webkit-filter 200ms ease;
-  transition: -webkit-filter 200ms ease;
-  transition: filter 200ms ease;
-  transition: filter 200ms ease, -webkit-filter 200ms ease;
-  color: #373753;
-}
-
-#site-nav ul li.w--current:hover {
-  -webkit-filter: brightness(80%);
-  filter: brightness(80%);
-}
-
 #site-nav .github-link {
   padding: 10px 14px;
 }
@@ -186,7 +174,31 @@ body[id^="posts-"] nav a[href^="/articles"] {
   filter: brightness(80%);
 }
 
-@media (max-width: 991px) {
+#projects-nav > a {
+  cursor: default;
+}
+
+#projects-nav ul {
+  display: none;
+  float: none;
+  position: absolute;
+  right: 18px;
+  background: white;
+  /* font-size: 90%; */
+}
+
+
+#projects-nav:hover ul {
+  display: block;
+  white-space: nowrap;
+}
+
+#projects-nav ul li {
+  float: none;
+  border-bottom: 1px solid #f2f2f2;
+}
+
+@media (max-width: 870px) {
   #site-nav #menu-button {
     display: block;
   }
@@ -199,7 +211,7 @@ body[id^="posts-"] nav a[href^="/articles"] {
     display: block;
   }
 
-  #site-nav .container ul {
+  #site-nav .container > ul {
     position: relative;
     clear: both;
     float: none;
@@ -211,11 +223,9 @@ body[id^="posts-"] nav a[href^="/articles"] {
   #site-nav ul li,
   #site-nav ul li.github-link {
     position: relative;
-    display: block;
+    float: none;
     margin: 0;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    padding-left: 34px;
+    padding: 10px 0 10px 34px;
     border-bottom: 1px solid #f2f2f2;
   }
   #site-nav ul li.github-link {
@@ -235,9 +245,22 @@ body[id^="posts-"] nav a[href^="/articles"] {
     width: 20px;
     height: 20px;
   }
+
   #site-nav .github-link span {
     display: inline;
   }
+
+  #site-nav #projects-nav {
+    padding-bottom: 0;
+    border-bottom: none;
+  }
+
+  #projects-nav ul {
+    display: block;
+    position: relative;
+    margin-top: 10px;
+    border-top: 1px solid #f2f2f2;
+  }
 }
 
 @media screen and (max-width: 767px) {