Merge pull request tc39#51 from tc39/lastChanges

Fixes tc39#94 - menu / submenu jumps

Author: codehag

_includes/proposals.html

@@ -3,7 +3,7 @@
   <h2 class="section-headline text-end">State of Proposals</h2>
   <div class="featurelist">
     <h3>Stage 3</h3>
-    <i>
+    <i class="featurelist__desc">
       Proposals that have been reviewed, and are being considered as
       candidates for the spec are considered to be stage 3.
     </i>

_layouts/default.html

@@ -25,7 +25,7 @@ <h1 class="page-title">Specifying JavaScript.</h1>
     </section>
     <section class="footer">
       <span class="footer-item">
-        <a href="https://github.com/tc39" class="btn menu-btn">github</a>
+        <a href="https://github.com/tc39" class="btn menu-btn">GitHub</a>
       </span>
 
     </section>
@@ -36,7 +36,7 @@ <h1 class="page-title">Specifying JavaScript.</h1>
       <label for="one" class="alert-message">
         <strong> Attention</strong> This site is in <strong>beta</strong>! We are
         looking for feedback. Please add issues to our <a
-                    href="https://github.com/tc39/tc39-web-draft/issues" target="_blank">github page</a>!!
+                    href="https://github.com/tc39/tc39-web-draft/issues" target="_blank">GitHub page</a>!!
         <span class="close">×</span>
       </label>
     </div>

_layouts/menu.html

@@ -3,7 +3,7 @@
 </a>
 <ul class="menu" id="menu">
   <li class="menu-item has-submenu">
-    <a href="#tc39" class="menu-link">TC39</a>
+    <a href="#" class="menu-link">TC39</a>
     <button class="submenu-toggle" tabindex="-1">
       <span class="sr-only">Toggle submenu for TC39</span>
     </button>
@@ -17,7 +17,7 @@
     </ul>
   </li>
   <li class="menu-item has-submenu">
-    <a href="#specs" class="menu-link">Specs</a>
+    <a href="#" class="menu-link">Specs</a>
     <button class="submenu-toggle" tabindex="-1">
       <span class="sr-only">Toggle submenu for Specs</span>
     </button>
@@ -31,7 +31,7 @@
     </ul>
   </li>
   <li class="menu-item has-submenu">
-    <a href="#contribute" class="menu-link">Contribute</a>
+    <a href="#" class="menu-link">Contribute</a>
     <button class="submenu-toggle" tabindex="-1">
       <span class="sr-only">Toggle submenu for Contribute</span>
     </button>

_sass/_featurelist.scss

@@ -61,4 +61,10 @@
       transform: rotateX(180deg);
     }
   }
+  &__desc {
+    margin-top: 2em;
+    margin-bottom: 4.5em;
+    display: block;
+    font-size: 1.1em;
+  }
 }

_sass/_page-header.scss

@@ -17,6 +17,7 @@
   @media (min-width: $bp-desktop) {
     $spacing: 90px;
     .page-menu {
+      font-size: 1.1em;
       margin-left: $spacing;
       [dir="rtl"] & {
         margin-left: 0;

_sass/_page-menu.scss

@@ -2,7 +2,7 @@ $svg-height: 24;
 $trans-timing: 600ms;
 
 @mixin svgMenuIcon($color: currentColor, $height: $svg-height) {
-  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="'+$height+'" viewBox="0 0 24 24" fill="none" stroke="'+$color+'" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>') no-repeat 50%;
+  background: url(/assets/img/menu.svg) no-repeat 50%;
 }
 
 @mixin rotateSubmenuToggle() {
@@ -17,8 +17,6 @@ $trans-timing: 600ms;
   width: 100%;
   .submenu {
     background: $color-submenu-bg;
-    border-left: 1px solid $color-spacer;
-    border-right: 1px solid $color-spacer;
     flex: 0 0 100%;
     list-style: none;
     margin: 0;
@@ -100,13 +98,13 @@ $trans-timing: 600ms;
       }
     }
     &-link {
-      border-bottom: 1px solid $color-spacer;
       color: $color-nav;
       display: block;
       flex: 0 0 calc(100% - 2rem);
       font-weight: normal;
       padding: 10px 10px;
       text-decoration: none;
+      min-width: 180px;
       &:focus {
         ~.submenu-toggle {
           @include rotateSubmenuToggle();
@@ -142,15 +140,23 @@ $trans-timing: 600ms;
     border-bottom: 2px solid $color-spacer;
     .submenu {
       background: $color-bg;
-      border-left-width: 2px;
-      border-right-width: 2px;
+      border-top: 2px solid $color-spacer;
       font-size: 16px;
       position: absolute;
       &-toggle {
         display: none;
       }
+      &-item {
+        border-bottom: 1px solid $color-spacer;
+        border-left: 4px solid $color-primary;
+      }
       &-item:last-child {
-        border-bottom: 2px solid $color-spacer;
+        border-bottom: 1px solid transparent;
+      }
+      &-item:hover,
+      &-item:focus {
+        min-width: 120px;
+        display: inline-block;
       }
     }
     .menu {
@@ -176,17 +182,11 @@ $trans-timing: 600ms;
         }
       }
       &-link {
-        border-bottom: 4px solid transparent;
         flex: none;
         &:hover,
         &:focus {
-          border-bottom-color: $color-primary;
         }
       }
     }
   }
-
-  @media (min-width: $bp-desktop) {
-    font-size: 24px;
-  }
 }

_sass/_popup.scss

@@ -25,12 +25,12 @@ input[type=checkbox]:checked + label {
   border: 1px solid rgba(#34495e, 0.25);
   color: #b94b45;
   border-radius: 3px;
-  line-height:30px;
+  line-height: 30px;
   position: absolute;
   top: 0; left: 0;
-  display:block;
-  width:100%;
-  padding: 12px;
+  display: block;
+  width: 100%;
+  padding: 20px 44px;
   box-sizing: border-box;
   color: rgba(255, 255, 255, .9);
   box-shadow: 0px 10px 50px rgba(0,0,0,.6);

_sass/_utils.scss

@@ -1,4 +1,4 @@
-.hidden{
+.hidden {
   display:none;
 }
 

_sass/_variables.scss

@@ -1,14 +1,14 @@
 $color-tc39: #f90;
-$color-primary: #83c9b5;
+$color-primary: #77ccbb;
 $color-bg: #fefefe;
 $color-spacer: #eee;
 $color-text: #000;
 $color-nav: #444;
-$color-submenu-bg: #f9f9f9;
+$color-submenu-bg: #fcfcfc;
 $font-weight-light: 300;
 $font-weight-regular: 400;
-$font-weight-semi-bold: 600;
+$font-weight-semi-bold: 550;
 $grid-gutter: 40px;
 $spacing-paragraph: 40px;
-$bp-tablet: 660px;
-$bp-desktop: 920px;
+$bp-tablet: 920px;
+$bp-desktop: 1200px;