add blocker to make site opaque when in menu

src/css/layout/_nav.scss

@@ -87,12 +87,25 @@
         top: 40px;
         left: 40px;
       }
+
+      > #blocker {
+        top: 80px;
+        width: 100vw;
+        height: 100vh;
+        position: absolute;
+        display: none;
+      }
+
       &.show {
         > ul {
           display: block;
           opacity: 1;
         }
 
+        > #blocker {
+          display: block;
+        }
+
         > span {
           box-shadow: 0 0 0 142vw _palette(menu), 0 0 0 142vh _palette(menu);
         }
@@ -191,9 +204,15 @@
     @include breakpoint('<=medium') {
       height: 60px;
 
-      > #menu > span {
-        top: 30px;
-        left: 30px;
+      > #menu {
+        > span {
+          top: 30px;
+          left: 30px;
+        }
+
+        > #blocker {
+          top: 60px;
+        }
       }
 
       > #wrapper {

src/index.html

@@ -49,6 +49,7 @@
 <nav id="nav">
   <div id="menu">
     <span></span>
+    <div id="blocker"></div>
     <ul>
       <li data-text="Home"><a href="/">Home</a></li>
       <li data-text="Websites"><a href="#">Websites</a></li>