Hey, footer lurkers...

 

We get it, you like our site. Why else would you be nosing around in the footer?  It means you've probably read all our content, or want to see more about how this site was designed. Well here's the scoop...

 

The simple facts

Template: Rally  |  Fonts: Proxima Nova & Garamond Premier Pro Display  |  Plugins: Swatches, Tabs

 

scripts used (ADVANCED CODE INJECTION)

 

Dropdown Navigation


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div class="nav2">
  <input id="hamburger" type="checkbox">
  <label for="hamburger" class="checkburger">
    <span class="top-bun"></span>
    <span class="meat"></span>
    <span class="bottom-bun"></span>
  </label>
  <div class="menu">
  <ul>
      <li class="small-social"><p>Start Here</p></li>
    <li><a href="/home">Home</a></li>
       <li><a href="/about">About</a></li>
      <li><a href="/blog">Tutorials</a></li>
           <li><a href="/squarespace-courses">Courses</a></li>
      <li class="small-social"><p>Shop</p></li>
      <li><a href="/sites">Magic Sites</a></li>
    <li><a href="/website-services">Website Services & Lessons</a></li>
      <li class="small-social"><p>More</p></li>
      <li><a href="https://www.facebook.com/groups/squarespacecss/">CSS Resource Group</a></li>
    <li>&nbsp;</li>
    <hr>
    <li class="small-social"><p>#SquarespaceMagic</p></li>
    <li class="small-social"><a href="https://instagram.com/squarespacebasics" target="_blank">Instagram</a></li>
     <li class="small-social"><a href="https://www.youtube.com/channel/UChwnFjMU4lHPflyvZTl9lAA" target="_blank">YouTube</a></li>
    <li class="small-social"><a href="https://www.pinterest.com/brandingbabesco/squarespace/" target="_blank">Pinterest</a></li>
      <li class="small-social"><a href="https://www.facebook.com/groups/squarespacecss/" target="_blank">Facebook</a></li>
  </ul>
  </div>
</div>

 

Hides Cart Until 1 Item Is Added


<script>
 (function () {
   var carts = [].slice.call(document.querySelectorAll('.Cart'));
   carts.forEach(function(cart) {
     hideCart(cart);
   });
   function hideCart(cart) {
 
     var cartQty = cart.querySelector('.sqs-cart-quantity');
 
     // Handler
     function handler(target) {
       if (target.innerHTML === '0') {
         cart.setAttribute('hidden', '');
       } else {
         cart.removeAttribute('hidden');
       }
     }
 
     // Observer handler
     var observer = new MutationObserver(function(mutations) {
       handler(mutations[0].target);
     });
 
     // Hide/show the cart when the page is loaded
     handler(cartQty);
 
     // Hide/show the cart when an item was added/removed
     observer.observe(cartQty, { childList: true });
   }
 
 })();
 
 </script>

 

Makes $0 turn into FREE


 <script>
    var products = document.querySelectorAll('.ProductItem, .ProductList-item'),
      i, len = products.length;
    for (i=0; i<len; i++) {
      var price = products[i].querySelector('.sqs-money-native');
      if (price.textContent === '0.00') {
        price.parentNode.textContent = 'FREE';  
      }
    }
  </script>

 

Custom CSS USED (except plugin styles)

 

/* Custom Font - Another Shabby */
@font-face {font-family: 'Another Shabby';
    src: url('//static1.squarespace.com/static/56b68c77a3360c432ba99425/t/57dcb99d5016e1d637163a97/1474083230084/Anothershabby.ttf');
  font-weight: 400;}

//Header Styles//

.Header-branding-logo
{padding-left: 100px;
padding-right: 100px;}

.Header-inner--top
.SocialLinks {padding-top: 27px;
padding-bottom: 27px; padding-left: 20px; border-left: 1px solid #fff;}

.nav2 input[type="checkbox"]{display:none}

.checkburger
{cursor:pointer;
display:block;
height:auto;
position:absolute;
left:0px;
top:0px;
width:40px;
z-index:1500;
background:#333333;
padding:22px 23px 29px 23px;
border-right: 1px solid #fff;}

#hamburger:checked+label.checkburger
{border-right: none !important;}

.checkburger span
{background:#fff;
display:block;
height:1px;
margin:8px 0 0 0;
transition:.5s ease all;
width:40px;}

#hamburger:checked+label.checkburger .top-bun
{background:#fff;
transform:rotate(45deg) translate(3px,3px);
position: fixed;}

#hamburger:checked+label.checkburger .meat
{width:0px;}

#hamburger:checked+label.checkburger .bottom-bun
{background:#fff;
transform:rotate(-45deg) translate(3px,-3px);
position: fixed;}

.checkburger:checked+label.checkburger
{position:fixed;}

.menu
{color:#fff;
background-color:#333333;
height:0;
overflow:hidden;
position:fixed;
left:0;
top:0;
transition: height .5s ease;
width:360px;
z-index:1400;}

.menu ul
{list-style:none;
margin: 90px auto 0 auto;
padding:0;
width:100%}

.menu li
{margin:0}

.menu li a
{color:#fff;
display:none;
padding:0px 32px;
text-align:left;
font-family: Proxima Nova;
font-weight: 400;
font-size:13px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 30px;}

.small-social
{font-family:garamond-premier-pro-display, Serif;
font-weight:300;
font-size:30px;
padding:0px 32px;
text-transform: Capitalize;
letter-spacing:.1em;
color: #fff;
line-height: 2em;}

.small-social a:link
{font-family: Proxima Nova;
font-weight: 400;
font-size:13px;
padding:0px 0px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 30px;}

.menu li a:hover
{color:#666;}

#hamburger:checked~.menu
{display:block;
height:100%}

#hamburger:checked~.menu ul li a
{display:block}

@media (max-width:640px){.nav2
{display:none}

.Header-inner {padding-bottom:14px}}

.menu ul hr {width: 80%;}

//Random Block Adjustments//

.sqs-block-button .sqs-block-button-element--small
{width: 80%;
line-height: 1.4em;}

.sqs-block-button
{padding-top: 10px;
padding-bottom: 10px;}

.sqs-block-button .sqs-block-button-element--medium
{line-height: 2em;}

.sqs-block-horizontalrule hr {
height: 3px;
margin-left: 45%;
margin-right: 45%;}

.sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-title strong {font-size: 13px; display: block !important; font-family: Proxima Nova, sans-serif; font-weight: 600; letter-spacing: 0.3em;}

.sqs-block-summary-v2 .summary-block-setting-text-size-medium .summary-title
{font-family: garamond-premier-pro-display, Serif; font-weight: 300 !important; letter-spacing: 0.05em; font-size: 20px; line-height: 1.4em;}

.sqs-gallery-design-carousel .sqs-gallery-controls .next
{display: inline-block !important;
position: absolute !important;
top: 40% !important;
left: auto !important;
right: 2% !important;
bottom: auto !important;
font-size: 16px !important;
line-height: 16px !important;}

.sqs-gallery-design-carousel .sqs-gallery-controls .previous
{display: inline-block !important;
position: absolute !important;
top: 40% !important;
left: 2% !important;
right: auto !important;
bottom: auto !important;
font-size: 16px !important;
line-height: 16px !important;}

.sqs-gallery-design-carousel
{padding-right: 5%;
padding-left: 5%;}

.sqs-gallery-design-carousel .sqs-gallery-controls .next::before
{content: "\E005" !important;}

.sqs-gallery-design-carousel .sqs-gallery-controls .previous::before
{content: "\E002" !important;}

.product-quantity-input {
   display:none !important;
 }

.ProductItem-additional
{display: block !important;}

//Footer//

.Footer-blocks--top
{background-color: #666666; padding: 0px;}

.Footer-inner
{padding: 0px;}

//Cookie Notice//
.cookie-notice p
{font-size: 14px;
font-family: Proxima Nova;
letter-spacing: 0.02em;
margin-bottom: 0px !important;
padding-left: 1% !important;
padding-right: 25% !important;
padding-top: 1% !important;}

//Cookie Notice//
.cookie-notice
{z-index: 300000;
padding: 20px;
width: 100% !important; 
height: 20% !important;
background: #333 !important;
color: #ffffff !important;
font-size: 12px;
border: 1px solid #ccc;
position: fixed !important;
bottom: 0px !important;
left: 0px !important;
top: 85% !important;
border: none !important;}

.cookie-notice p
{font-size: 14px;
font-family: Proxima Nova;
letter-spacing: 0.02em;
margin-bottom: 0px !important;
padding-left: 1% !important;
padding-right: 25% !important;
padding-top: 1% !important;}

.cookie-notice .accept
{background-color: #ffffff !important; color: #414042 !important;
font-family: Proxima Nova, Sans-Serif; font-size: 14px;
letter-spacing: 0.3em !important;
font-weight: 500 !important;
text-transform: uppercase !important;
padding: .7em 1.5em .5em 1.5em !important;
border: none !important;
margin-top: 0px !important;
position: fixed !important;
bottom: 5% !important;
left: auto !important;
top: auto !important;
right: 3% !important;}

.cookie-notice .accept:hover
{background-color: #c8c8c8 !important;
color: #ffffff !important;}

@media (max-width:800px)
{.cookie-notice p {font-size: 10px !important;
font-family: Sans-Serif !important;
padding-right: 5% !important;
padding-left: 2% !important;
bottom: 4% !important;
line-height: 1.7em !important;
margin-right: 0 !important;
margin-left: 0 !important; }
  
.cookie-notice .accept
{font-size: 10px;
position: fixed !important;
bottom: 2% !important;
left: 2% !important;
top: auto !important;
right: 2% !important;
width: 96% !important;
margin: 0px !important;
padding: .5em !important;}
  
.cookie-notice
{height: 27% !important;
top: 73% !important;
max-width: 100% !important;
position: fixed !important;
bottom: 0!important;
left: 0px !important;
right: 0px !important;
border: none !important;
padding: 10px !important;
}}

 

//Blog Width//
@media only screen and (min-width: 640px) { .collection-5ad5440788251baeaac7890d .Main.Main--blog-item, .collection-5ad54507f950b7baba1dc488 .Main.Main--blog-item
{padding-right: 20%;
  padding-left: 20%;}}


//Gets Rid of Any Sizing Issues//
html, body {overflow-x: hidden;}


//Adds titles below values on about page//
#block-yui_3_17_2_1_1528840350301_18693 .sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title
{color: #414042;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.3em;
font-weight: 500;
word-wrap: break-word;
overflow: visible;
white-space: normal;}

//Courses Adjustments//

.collection-5b204689758d46d91546668c .ProductList-filter-list::before { 
content: "FILTER BY SERIES: "; font-weight: 700;}

@media only screen and (max-width: 640px) { .ProductList-item {width: 100% !important;}}

@media only screen and (min-width: 640px) {
.collection-5b0da179562fa7ea492c30f5
{.ProductList-item
{width: 23% !important;}
.ProductList .ProductList-item:nth-child(2n+1){clear: none !important;}}}