Merge pull request tc39#43 from tc39/add-popup

fixes tc39#31, adds a popup letting people know about the github page

Author: codehag

_layouts/default.html

@@ -31,6 +31,15 @@ <h1 class="page-title">Specifying JavaScript.</h1>
     </section>
     </main>
 
+    <div class="popup">
+      <input type="checkbox" id="one" class="hidden" name="ossm">
+      <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>!!
+        <span class="close">×</span>
+      </label>
+    </div>
     <img src="https://d3nrsflo8ae6b5.cloudfront.net/1x1.png" alt="pixel" />
   </body>
 </html>

_sass/_popup.scss

@@ -0,0 +1,52 @@
+.popup {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+
+input[type=checkbox] + label {
+  position:relative;
+}
+
+input[type=checkbox]:checked + label {
+  animation: closing 0.3s forwards ease-in-out,
+             moving 0.3s forwards ease-in-out;
+}
+
+.close{
+    float:right;
+    color: #b94b45;
+    cursor: hand;
+}
+
+.alert-message{
+  background-color: black;
+  border: 1px solid rgba(#34495e, 0.25);
+  color: #b94b45;
+  border-radius: 3px;
+  line-height:30px;
+  position: absolute;
+  top: 0; left: 0;
+  display:block;
+  width:100%;
+  padding: 12px;
+  box-sizing: border-box;
+  color: rgba(255, 255, 255, .9);
+  box-shadow: 0px 10px 50px rgba(0,0,0,.6);
+  background: black;
+}
+
+@keyframes closing {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes moving {
+  0%, 90% { top: 0; left: 0; }
+  100%  { top: -100px; left: 0; }
+}

_sass/_utils.scss

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

assets/css/style.scss

@@ -9,3 +9,5 @@
 @import "logo-box";
 @import "page-header";
 @import "page-menu";
+@import "popup";
+@import "utils";