Build css

Author: jgthms

_includes/menu.html

@@ -32,29 +32,6 @@
         <img class="menu-logo-type" src="{{site.url}}/images/css-reference-type.png" alt="CSS Reference type">
       </figure>
     </a>
-    <p class="menu-title">
-      {{site.description}}<br>
-      <small>Created by <a href="https://twitter.com/jgthms">@jgthms</a></small>
-    </p>
-    <p class="menu-share">
-      <strong class="menu-share-label">Share</strong>
-      <a class="menu-share-button is-twitter"
-        data-social-network="Twitter"
-        data-social-action="tweet"
-        data-social-target="{{site.url}}{{page.url}}"
-        href="https://twitter.com/intent/tweet?url={{site.url | url_encode}}&text={{site.share | url_encode}}"
-        rel="external nofollow"
-        target="_blank">
-        {% include svg/twitter.html %}
-      </a>
-      <a class="menu-share-button is-facebook"
-        href="http://www.facebook.com/sharer.php?u={{site.url | url_encode}}"
-        rel="external nofollow"
-        target="_blank">
-        {% include svg/facebook.html %}
-      </a>
-      <a id="menu-nav-open" class="menu-share-nav">Menu</a>
-    </p>
   </header>
   <nav id="menu-nav" class="menu-nav">
     <div class="menu-search">
@@ -73,7 +50,7 @@
       <strong>Close</strong>
     </a>
   </nav>
-  <footer id="menuHello" class="menu-hello">
+  <!-- <footer id="menuHello" class="menu-hello">
     <div id="huggingFace">
       <p>
         CSS Reference is <strong>free</strong> and <br>
@@ -90,5 +67,36 @@
     <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>
+  </footer> -->
 </aside>
+
+<footer class="footer">
+  <p class="footer-title">
+    <strong>{{site.description}}</strong> <small>Created by <a href="https://twitter.com/jgthms">@jgthms</a></small>
+  </p>
+  <p class="footer-share footer-share--contribute">
+    <strong class="footer-share-label">Contribute</strong>
+    <a class="footer-share-button is-github" href="https://github.com/jgthms/css-reference" target="_blank">
+      {% include svg/github.html %}
+    </a>
+  </p>
+  <p class="footer-share footer-share--social">
+    <strong class="footer-share-label">Share</strong>
+    <a class="footer-share-button is-twitter"
+      data-social-network="Twitter"
+      data-social-action="tweet"
+      data-social-target="{{site.url}}{{page.url}}"
+      href="https://twitter.com/intent/tweet?url={{site.url | url_encode}}&text={{site.share | url_encode}}"
+      rel="external nofollow"
+      target="_blank">
+      {% include svg/twitter.html %}
+    </a>
+    <a class="footer-share-button is-facebook"
+      href="http://www.facebook.com/sharer.php?u={{site.url | url_encode}}"
+      rel="external nofollow"
+      target="_blank">
+      {% include svg/facebook.html %}
+    </a>
+    <a id="menu-nav-open" class="footer-share-nav">Menu</a>
+  </p>
+</footer>

_includes/svg/facebook.html

@@ -1,4 +1,4 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg class="svg svg--facebook" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="266.893px" height="266.895px" viewBox="0 0 266.893 266.895" enable-background="new 0 0 266.893 266.895"
    xml:space="preserve">
   <path fill="#3C5A99" d="M248.082,262.307c7.854,0,14.223-6.369,14.223-14.225V18.812

_includes/svg/github.html

@@ -0,0 +1 @@
+<svg class="svg svg--github" width="33" height="32" viewBox="0 0 33 32" xmlns="http://www.w3.org/2000/svg"><path d="M16.2885009,0 C7.2942243,0 0,7.293 0,16.29 C0,23.487 4.66714351,29.592 11.1403426,31.746 C11.9553676,31.896 12.2523768,31.393 12.2523768,30.961 C12.2523768,30.575 12.2383763,29.55 12.2303761,28.191 C7.69923675,29.175 6.74320735,26.007 6.74320735,26.007 C6.00218457,24.125 4.93415172,23.624 4.93415172,23.624 C3.45510624,22.614 5.04615517,22.634 5.04615517,22.634 C6.68120545,22.749 7.54123189,24.313 7.54123189,24.313 C8.99427657,26.802 11.3543491,26.083 12.2823777,25.666 C12.4303822,24.614 12.8513952,23.896 13.3164095,23.489 C9.69929825,23.078 5.89618131,21.68 5.89618131,15.438 C5.89618131,13.66 6.53120083,12.205 7.57323288,11.067 C7.40522771,10.655 6.84621052,8.998 7.7332378,6.756 C7.7332378,6.756 9.10027983,6.318 12.2123755,8.426 C13.5114155,8.064 14.9054583,7.884 16.2905009,7.877 C17.6745435,7.884 19.0675863,8.064 20.3686263,8.426 C23.478722,6.318 24.8437639,6.756 24.8437639,6.756 C25.7327913,8.998 25.1737741,10.655 25.006769,11.067 C26.0508011,12.205 26.6808204,13.66 26.6808204,15.438 C26.6808204,21.696 22.8717033,23.073 19.2435917,23.476 C19.8276097,23.979 20.3486257,24.973 20.3486257,26.493 C20.3486257,28.67 20.3286251,30.427 20.3286251,30.961 C20.3286251,31.397 20.6226341,31.904 21.4486595,31.745 C27.9168584,29.586 32.5800018,23.485 32.5800018,16.29 C32.5800018,7.293 25.2857775,0 16.2885009,0" id="Fill-3"></path></svg>

_includes/svg/twitter.html

@@ -1,4 +1,4 @@
-<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300.00006 244.18703" height="244.19" width="300" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+<svg class="svg svg--twitter" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300.00006 244.18703" height="244.19" width="300" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
   <g transform="translate(-539.18 -568.86)">
     <path d="m633.9 812.04c112.46 0 173.96-93.168 173.96-173.96 0-2.6463-0.0539-5.2806-0.1726-7.903 11.938-8.6302 22.314-19.4 30.498-31.66-10.955 4.8694-22.744 8.1474-35.111 9.6255 12.623-7.5693 22.314-19.543 26.886-33.817-11.813 7.0031-24.895 12.093-38.824 14.841-11.157-11.884-27.041-19.317-44.629-19.317-33.764 0-61.144 27.381-61.144 61.132 0 4.7978 0.5364 9.4646 1.5854 13.941-50.815-2.5569-95.874-26.886-126.03-63.88-5.2508 9.0354-8.2785 19.531-8.2785 30.73 0 21.212 10.794 39.938 27.208 50.893-10.031-0.30992-19.454-3.0635-27.69-7.6468-0.009 0.25652-0.009 0.50661-0.009 0.78077 0 29.61 21.075 54.332 49.051 59.934-5.1376 1.4006-10.543 2.1516-16.122 2.1516-3.9336 0-7.766-0.38716-11.491-1.1026 7.7838 24.293 30.355 41.971 57.115 42.465-20.926 16.402-47.287 26.171-75.937 26.171-4.929 0-9.7983-0.28036-14.584-0.84634 27.059 17.344 59.189 27.464 93.722 27.464" fill="#1da1f2"/>
   </g>

css/website.css

@@ -10,6 +10,7 @@
 @import "../sass/controls"
 @import "../sass/menu"
 @import "../sass/header"
+@import "../sass/footer"
 @import "../sass/property"
 @import "../sass/example"
 @import "../sass/modal"
@@ -18,9 +19,12 @@
 @import "../sass/elements"
 
 .modal
-  z-index: 40
+  z-index: 50
 
 .menu
+  z-index: 40
+
+.footer
   z-index: 30
 
 .list

css/website.sass

@@ -41,8 +41,7 @@ <h2 class="header-title">
             A free visual guide to CSS
           </h2>
           <p class="header-subtitle">
-            <strong>Learn by example</strong>: <a href="{{site.url}}">cssreference.io</a> is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.<br><br>
-            <a href="https://github.com/jgthms/css-reference">Contribute on GitHub</a>
+            <strong>Learn by example</strong>: <a href="{{site.url}}">cssreference.io</a> is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
           </p>
         </div>
       </header>

index.html

@@ -8,7 +8,7 @@
     "build-autoprefix": "postcss --use autoprefixer --output css/website.css css/website.css",
     "build-clean": "rm css/website.css",
     "build-sass": "node-sass --output-style compressed css/website.sass css/website.css",
-    "develop": "node-sass --output-style expanded css/website.sass css/website.css",
+    "develop": "node-sass css/website.sass css/website.css",
     "start": "npm run develop -- --watch"
   },
   "keywords": [

package.json

@@ -0,0 +1,85 @@
+.footer
+  background: #fff
+  bottom: 0
+  box-shadow: 0 0 1rem rgba(#000, 0.2)
+  left: 0
+  position: fixed
+  right: 0
+
+.footer-title
+  align-items: center
+  color: $text-light
+  display: none
+  padding: 0 1rem
+  small
+    font-size: 0.8em
+    margin-left: 0.5em
+    a:hover
+      background: $alpha
+      color: $alpha-invert
+
+.footer-share
+  align-items: center
+  display: flex
+  position: relative
+
+.footer-share--contribute
+  display: none
+
+.footer-share-label
+  margin-right: 0.25rem
+
+.footer-share-button
+  align-items: center
+  display: flex
+  height: 2rem
+  justify-content: center
+  position: relative
+  width: 2rem
+  &:before
+    +overlay
+    background: $background
+    border-radius: 5px
+    content: ""
+    display: block
+    height: 100%
+    opacity: 0
+    transform: scale(1.2)
+    transform-origin: center center
+    transition-duration: $speed
+    transition-property: opacity, transform
+    width: 100%
+  svg
+    height: 1rem
+    position: relative
+    width: 1rem
+  &:hover:before
+    opacity: 1
+    transform: scale(1)
+
+.footer-share-nav
+  font-weight: $weight-bold
+  position: absolute
+  right: 1rem
+  top: 1rem
+
++mobile
+  .footer-share--social
+    padding: 0.5rem 1rem
+
++desktop
+  .footer
+    align-items: stretch
+    display: flex
+    font-size: 0.8rem
+    left: $menu-width
+    padding: 0.25rem
+  .footer-title
+    display: flex
+    flex-grow: 1
+    flex-shrink: 1
+  .footer-share--contribute
+    display: flex
+    margin-right: 0.25rem
+  .footer-share-nav
+    display: none

sass/footer.sass

@@ -73,5 +73,5 @@ $width: 486px
   .header
     justify-content: center
     min-height: 400px
-    padding: 3rem
+    padding: 4rem
     text-align: center