Add hello

Author: jgthms

_includes/menu.html

@@ -1,3 +1,12 @@
+<script type="text/javascript">
+window.helloCarbon = function() {
+  var $huggingFace = document.getElementById('huggingFace');
+  var $carbon = document.getElementById('carbon');
+  $huggingFace.style.display = 'none';
+  $carbon.style.display = 'block';
+}
+</script>
+
 <aside class="menu">
   <header class="menu-header">
     <a id="logo" class="menu-logo" href="{{site.url}}">
@@ -46,4 +55,22 @@
       <strong>Close</strong>
     </a>
   </nav>
+  <footer class="menu-hello">
+    <div id="huggingFace">
+      <p>
+        CSS Reference is <strong>free</strong> and <br>
+        always will be!
+      </p>
+      <p>
+        Please whitelist us in <br>
+        your ad blocker.
+      </p>
+      <p>
+        Thank you! <img src="{{site.url}}/images/hugging-face.png" alt="Hugging face emoji">
+      </p>
+    </div>
+    <div id="carbon">
+      <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=cssreferenceio" id="_carbonads_js" onload ="window.helloCarbon()"></script>
+    </div>
+  </footer>
 </aside>

_includes/noscript.html

@@ -0,0 +1,15 @@
+<noscript>
+  <style type="text/css">
+    .menu-hello {
+      min-height: 0;
+    }
+
+    #huggingFace {
+      display: block;
+    }
+
+    #carbon {
+      display: none;
+    }
+  </style>
+</noscript>

_layouts/single.html

@@ -40,5 +40,6 @@
     {% include google-fonts.html %}
     <script src="{{site.url}}/javascript/clipboard.min.js"></script>
     <script src="{{site.url}}/javascript/main.js"></script>
+    {% include noscript.html %}
   </body>
 </html>

css/website.css

@@ -54,5 +54,6 @@ <h2 class="header-title">
     <script src="{{site.url}}/javascript/clipboard.min.js"></script>
     <script src="{{site.url}}/javascript/main.js"></script>
     <script src="{{site.url}}/javascript/index.js"></script>
+    {% include noscript.html %}
   </body>
 </html>

images/hugging-face.png

@@ -9,7 +9,7 @@ $gradient-bottom: linear-gradient($primary, lighten($primary, 5%))
   color: $plum-dark
   display: flex
   justify-content: flex-start
-  padding: 2rem
+  padding: 3rem 2rem
   position: relative
   text-align: left
 
@@ -36,13 +36,11 @@ $width: 486px
   color: $plum-invert
   font-size: 1.4rem
   font-weight: $weight-bold
-  margin-bottom: 0.5rem
-  margin-top: 1rem
+  margin-top: 2rem
   text-shadow: 0 2px 4px rgba(#000, 0.1)
 
 .header-subtitle
   color: $plum-dark
-  margin-top: 1rem
   max-width: 40em
   a
     border-bottom: 1px solid rgba($plum-dark, 0.2)

index.html

@@ -167,10 +167,64 @@
     margin-right: 0.25rem
     margin-top: 1px
 
+.menu-hello
+  background: #fff
+  min-height: 218px
+
+#huggingFace
+  background: #fff
+  color: $text-strong
+  display: none
+  font-size: 16px
+  line-height: 1.4
+  padding: 1.5rem
+  img
+    height: 24px
+    margin-top: -4px
+    vertical-align: middle
+    width: 24px
+  strong
+    position: relative
+    &:before
+      background: hsl(171, 100%, 81%)
+      bottom: 0
+      content: ""
+      height: 2px
+      left: 0
+      position: absolute
+      right: 0
+  p + p
+    margin-top: 0.5em
+
+#carbon
+  display: block
+  font-size: 14px
+  line-height: 1.2
+  min-height: 218px
+
+#carbonads
+  a,
+  img,
+  span
+    display: block
+    max-width: 240px
+  .carbon-wrap
+    a:first-child
+      height: calc(100px + 1rem)
+      padding: 1rem 1rem 0
+    a:last-child
+      padding: 0.5rem 1rem 0
+  .carbon-poweredby
+    color: $text-light
+    padding: 0.5rem 1rem 1rem
+  &:hover
+    .carbon-wrap a:last-child
+      text-decoration: underline
+
 +mobile
-  .menu-logo,
-  .menu-title
-    display: none
+  .menu-header
+    padding: 2rem
+    padding-bottom: 0
   .menu-share
     background: #fff
     bottom: 0
@@ -186,6 +240,14 @@
     position: fixed
     &.is-active
       display: flex
+  #huggingFace
+    padding: 2rem
+  #carbonads
+    .carbon-wrap a:first-child,
+    .carbon-wrap a:last-child,
+    .carbon-poweredby
+      padding-left: 2rem
+      padding-right: 2rem
 
 +desktop
   .menu
@@ -218,5 +280,9 @@
   .menu-list
     a
       padding: 0.5rem 2rem
+  .menu-hello
+    background: #fff
+    flex-grow: 0
+    flex-shrink: 0
   .menu-close
     display: none