sencilla 0.3.1 → 0.4.0

data/_sass/sencilla/_base.scss

@@ -15,8 +15,8 @@ dl, dd, ol, ul, figure {
  */
 body {
   font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
-  color: $text-color;
-  background-color: $background-color;
+  color: $text;
+  background-color: $bg;
   -webkit-text-size-adjust: 100%;
   -webkit-font-feature-settings: "kern" 1;
      -moz-font-feature-settings: "kern" 1;
@@ -55,8 +55,22 @@ main {
  * Images
  */
 img {
-  max-width: 100%;
-  vertical-align: middle;
+  display: block;
+  max-width: 80%;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: $spacing-unit;
+  margin-bottom: $spacing-unit;
+  border-radius: 8px;
+  box-shadow: $shadow-body;
+  background-color: $bg;
+  
+  opacity: 0.6;
+  &:hover {
+    opacity: 1;
+  }
+  
 }
 
 
@@ -65,9 +79,16 @@ img {
  * Videos
  */
 iframe {
+  display: block;
   max-width: 100%;
-  vertical-align: middle;
-  margin: $spacing-unit;
+  margin-top: $spacing-unit;
+  margin-bottom: $spacing-unit;
+  margin-left: auto;
+  margin-right: auto;
+  
+  border: 0px;
+  border-radius: 8px;
+  box-shadow: $shadow-body;
 }
 
 
@@ -76,11 +97,13 @@ iframe {
  * Figures
  */
 figure > img {
-  display: block;
 }
 
 figcaption {
-  font-size: $small-font-size;
+  @include relative-font-size(0.7);
+  margin-top: - $spacing-unit * 0.8;
+  text-align: center;
+  color: $text-muted;
 }
 
 
@@ -106,7 +129,7 @@ li {
  */
 h1, h2, h3, h4, h5, h6 {
   font-weight: $base-font-weight;
-  color: $text-color-light
+  color: $text-light
 }
 
 hr {
@@ -114,8 +137,8 @@ hr {
   margin-bottom: $spacing-unit / 2;
   height: 2px;
   border-width: 0px;
-  color: $stroke-color;
-  background-color: $stroke-color;
+  color: $stroke;
+  background-color: $stroke;
 }
 
 
@@ -124,16 +147,16 @@ hr {
  * Links
  */
 a {
-  color: $text-color-light;
+  color: $link;
   text-decoration: none;
 
   &:visited {
-    color: $text-color-dark;
+    color: $link-muted;
     text-decoration: none;
   }
 
   &:hover {
-    color: $text-color;
+    color: $link-hover;
     text-decoration: underline;
   }
     }
@@ -144,9 +167,9 @@ a {
  * Blockquotes
  */
 blockquote {
-  color: $text-color-dark;
+  color: $text-dark;
   margin-left: $spacing-unit / 2;
-  border-left: 6px solid $stroke-color;
+  border-left: 6px solid $stroke;
   padding: $spacing-unit / 2;
   @include relative-font-size(1.25);
   font-style: italic;
@@ -164,6 +187,7 @@ blockquote {
 pre,
 code {
   @include relative-font-size(0.9375);
+  background-color: $box-fill;
 }
 
 code {
@@ -173,6 +197,8 @@ code {
 pre {
   padding: 8px 12px;
   overflow-x: auto;
+  box-shadow: $shadow-body;
+  border-radius: 8px;
 
   > code {
     border: 0;
@@ -187,7 +213,7 @@ pre {
  * Wrapper
  */
 .wrapper {
-  max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
+    max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
   max-width:         calc(#{$content-width} - (#{$spacing-unit} * 2));
   margin-right: auto;
   margin-left: auto;
@@ -195,7 +221,7 @@ pre {
   padding-left: $spacing-unit;
   @extend %clearfix;
 
-  @include media-query($on-laptop) {
+  @include media-query($on-palm) {
     max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
     max-width:         calc(#{$content-width} - (#{$spacing-unit}));
     padding-right: $spacing-unit / 2;
@@ -203,6 +229,23 @@ pre {
   }
 }
 
+.wrapper-wide {
+  max-width: -webkit-calc(#{$nav-width} - (#{$spacing-unit} * 2));
+  max-width:         calc(#{$nav-width} - (#{$spacing-unit} * 2));
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: $spacing-unit * 2;
+  padding-left: $spacing-unit * 2;
+  @extend %clearfix;
+
+  @include media-query($on-palm) {
+  max-width: -webkit-calc(#{$nav-width} - (#{$spacing-unit}));
+  max-width:         calc(#{$nav-width} - (#{$spacing-unit}));
+  padding-right: $spacing-unit / 2;
+  padding-left: $spacing-unit / 2;
+  }
+}
+
 .nav-wrapper {
   max-width: -webkit-calc(#{$nav-width} - (#{$spacing-unit} * 2));
   max-width:         calc(#{$nav-width} - (#{$spacing-unit} * 2));
@@ -212,7 +255,7 @@ pre {
   padding-left: $spacing-unit;
   @extend %clearfix;
 
-  @include media-query($on-laptop) {
+  @include media-query($on-palm) {
     max-width: -webkit-calc(#{$nav-width} - (#{$spacing-unit}));
     max-width:         calc(#{$nav-width} - (#{$spacing-unit}));
     padding-right: $spacing-unit / 2;
@@ -241,7 +284,7 @@ pre {
     width: 16px;
     height: 16px;
     display: inline-block;
-    fill: #{$box-fill-color};
+    fill: #{$box-fill};
     padding-right: 5px;
     vertical-align: text-top;
 }
@@ -262,26 +305,155 @@ table {
   margin-bottom: $spacing-unit;
   width: 100%;
   text-align: $table-text-align;
-  color: $text-color;
+  color: $text;
   border-collapse: collapse;
-  border: 1px solid $stroke-color;
+  box-shadow: $shadow-body;
+  overflow-x: auto;
+
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
 
   tr {
-    &:nth-child(odd) {
-      background-color: $box-fill-color;
+    &:last-child {
+      border-bottom: 0px solid $stroke;
     }
   }
 
   th, td {
     padding: ($spacing-unit / 3) ($spacing-unit / 2);
+    border-collapse: collapse;
+    border-right: 1px solid $stroke;
+    &:last-child {
+    border-right: 0px solid $stroke;
+    }
   }
 
   th {
-    background-color: $box-fill-color-dark;
-    border: 1px solid $stroke-color;
+    background-color: $box-fill;
+    &:first-child {
+    border-radius: 8px 0px 0px 0px;
+    }
+    &:nth-child(even) {
+    border-radius: 0px 0px 0px 0px;
+    }
+    &:nth-child(odd) {
+    border-radius: 8px 0px 0px 0px;
+    }
+    &:last-child {
+    border-radius: 0px 8px 0px 0px;
+    }
   }
 
-  td {
-    border: 1px solid $stroke-color;
+  tr {
+    &:not(:last-child){
+    border-bottom:1px solid $stroke;
   }
+  }
+}
+
+/*
+*
+* Responsive homepage
+*
+*/
+
+* {
+  box-sizing: border-box;
+}
+
+.row::after {
+  content: "";
+  clear: both;
+  display: table;
 }
+
+[class*="col-"] {
+  float: left;
+  padding: 15px;
+}
+
+
+.menu ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.menu li {
+  padding: 8px;
+  margin-bottom: 7px;
+  background-color: #33b5e5;
+  color: #ffffff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+.menu li:hover {
+  background-color: #0099cc;
+}
+
+.aside {
+  background-color: #33b5e5;
+  padding: 15px;
+  color: #ffffff;
+  text-align: center;
+  font-size: 14px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+
+/* For mobile phones: */
+/*[class*="col-"] {
+  width: 100%;
+}
+*/
+
+@media only screen and (max-width: 600px) {
+  /* For tablets: */
+  .col-s-1 {width: 8.33%;}
+  .col-s-2 {width: 16.66%;}
+  .col-s-3 {width: 25%;}
+  .col-s-4 {width: 33.33%;}
+  .col-s-5 {width: 41.66%;}
+  .col-s-6 {width: 50%;}
+  .col-s-7 {width: 58.33%;}
+  .col-s-8 {width: 66.66%;}
+  .col-s-9 {width: 75%;}
+  .col-s-10 {width: 83.33%;}
+  .col-s-11 {width: 91.66%;}
+  .col-s-12 {width: 100%;}
+}
+
+@media only screen and (min-width: 600px) and (max-width: 767px){
+  /* For tablets: */
+  .col-m-1 {width: 8.33%;}
+  .col-m-2 {width: 16.66%;}
+  .col-m-3 {width: 25%;}
+  .col-m-4 {width: 33.33%;}
+  .col-m-5 {width: 41.66%;}
+  .col-m-6 {width: 50%;}
+  .col-m-7 {width: 58.33%;}
+  .col-m-8 {width: 66.66%;}
+  .col-m-9 {width: 75%;}
+  .col-m-10 {width: 83.33%;}
+  .col-m-11 {width: 91.66%;}
+  .col-m-12 {width: 100%;}
+}
+
+@media only screen and (min-width: 768px) {
+  /* For desktop: */
+  .col-1 {width: 8.33%;}
+  .col-2 {width: 16.66%;}
+  .col-3 {width: 25%;}
+  .col-4 {width: 33.33%;}
+  .col-5 {width: 41.66%;}
+  .col-6 {width: 50%;}
+  .col-7 {width: 58.33%;}
+  .col-8 {width: 66.66%;}
+  .col-9 {width: 75%;}
+  .col-10 {width: 83.33%;}
+  .col-11 {width: 91.66%;}
+  .col-12 {width: 100%;}
+}
+
+

data/_sass/sencilla/_layout.scss

@@ -1,14 +1,31 @@
-/**
- * Site header
- */
-.site-header {
-  background-color: $nav-background-color;
-  min-height: $spacing-unit * 1.865;
+/* -------------------- header ----------------------- */
+
+/* 
+* sticky header
+*/
+
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
 
-  // Positioning context for the mobile navigation icon
+/* 
+* header main
+*/
+
+.site-header {
   position: relative;
+  background-color: $nav-bg;
+  min-height: $spacing-unit * 1.865;
+  box-shadow: $shadow;
 }
 
+/* 
+* site title and logo
+*/
+
 .site-title {
   @include relative-font-size(1.625);
   font-weight: 300;
@@ -16,20 +33,29 @@
   margin-bottom: 0;
   float: left;
   text-decoration: none;
-  color: $text-color-light;
+  color: $nav-text;
 
   &,
   &:visited {
-    color: $text-color-light;
+    color: $nav-text;
   }
 }
+
 .site-logo {
- height: 50px;
- vertical-align: middle;
- padding-top: 5px;
- padding-bottom: 5px;
+  display: inline-block;
+  max-height: 50px;
+  width: auto;
+  opacity: 1;
+  box-shadow: none;
+  margin-top: 5px;
+  margin-bottom: 0px;
+  border-radius: 8px;
 }
 
+/* 
+* navigation page links
+*/
+
 .site-nav {
   float: right;
   line-height: $base-line-height * $base-font-size * 2.25;
@@ -41,28 +67,9 @@
     display: none;
   }
 
-  .nav-drop-link {
-    display: block;
-    text-decoration: none;
-    color: $text-color-light;
-    text-align: center;
-    &:visited {
-      color: $text-color-light;
-    }
-    &:hover {
-      color: $text-color-light;
-      background-color: $grey85;
-      text-decoration: underline;
-    }
-  }
-  .nav-item-link {
-    text-decoration: none;
-    color: $text-color-light;
-    &:visited {
-      color: $text-color-light;
-    }
-  }
-
+/*
+* links on the nav panel
+*/
 
   .nav-items {
     position: relative;
@@ -70,39 +77,69 @@
     line-height: $base-line-height;
     padding-top: 18px;
     padding-bottom: 18px;
-    padding-left: 15px;
-    padding-right: 15px ;
+
     &:hover {
-      color: $text-color-light;
-      background-color: $grey9;
+      color: $nav-text;
+      background-color: $nav-hl;
       text-decoration: underline;
     }
+    a{
+    padding: 18px;
+      text-decoration: none;
+      color: $nav-text;
+      &:visited {
+        color: $nav-text;
+      }
+    }
+
   }
 
+/* 
+* main dropdown container
+*/
+
   .dropdown-content {
     display: none;
     position: absolute;
-    left:0;
+    right:0;
     top: 100%;  
-    padding: 0px;
     line-height: $base-line-height;
-    background-color: $grey95;
+    background-color: $nav-hl-dark;
     min-width: 100%;
-    
-/**    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);**/
+    box-shadow: $shadow;
     z-index: 1;
+
+    a {
+    display: block;
+    text-decoration: none;
+    padding: 10px;
+    color: $nav-text;
+    text-align: center;
+    &:visited {
+      color: $nav-text;
     }
+    &:hover {
+      color: $nav-text;
+      background-color: $nav-hl-light;
+      text-decoration: underline;
+    }
+    }
+  }
 
   .nav-items:hover .dropdown-content {
     display: block;
   }
 
+/* 
+* navigation panel on small devices
+*/
+
   @include media-query($on-palm) {
     position: absolute;
     top: 9px;
     right: $spacing-unit / 2;
-    background-color: $background-color;
-    border: 1px solid $stroke-color;
+    background-color: $nav-bg;
+    border: 1px solid $stroke;
     border-radius: 5px;
     text-align: right;
 
@@ -125,7 +162,7 @@
       text-align: center;
 
       > svg {
-        fill: $text-color-light;
+        fill: $text-light;
       }
     }
 
@@ -136,30 +173,12 @@
 
     input:checked ~ .trigger {
       display: block;
-      padding-bottom: 5px;
     }
 
-  .nav-drop-link {
-    display: block;
-    text-decoration: none;
-    color: $text-color-light;
-    text-align: center;
-    &:visited {
-      color: $text-color-light;
-    }
-    }
-  .nav-item-link {
-    text-decoration: none;
-    color: $text-color-light;
-    &:visited {
-      color: $text-color-light;
-    }
-  }
-
-  .nav-items {
+    .nav-items {
     position: relative;
     display: block;
-    padding: 5px 10px;
+    padding: 10px;
       &:not(:last-child) {
         margin-right: 0;
       }
@@ -168,12 +187,10 @@
   .dropdown-content {
     display: none;
     position: left;
-    background-color: $box-fill-color;
-/**    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);**/
+    background-color: $box-fill;
     min-width: 100%;
-    padding: 5px 10px;
     z-index: 1;
-    left: -100%;
+    right: 100%;
     top: 0;
   }
 
@@ -183,101 +200,15 @@
   }
 }
 
+/* ---------- generic pages and posts ----------- */
 
-/**
- * Site footer
- */
-.site-footer {
-  background-color: $nav-background-color;
-/*
-  border-top: 1px solid $stroke-color;
+/* 
+* page
 */
-  padding-top: $spacing-unit / 2;
-  padding-bottom: 0;
-}
-
-/*.footer-heading {
-  @include relative-font-size(1.125);
-  margin-bottom: $spacing-unit / 2;
-}*/
-
-.contact-list,
-.social-media-list {
-  list-style: none;
-  margin-left: 0;
-}
-
-.footer-col-wrapper {
-  @include relative-font-size(0.9375);
-  color: $text-color-dark;
-  margin-left: -$spacing-unit / 2;
-  @extend %clearfix;
-}
-
-.footer-col {
-  float: left;
-/*  margin-bottom: $spacing-unit / 2;*/
-  padding-left: $spacing-unit / 2;
-}
-
-.footer-col-1 {
-/*
-  width: -webkit-calc(30% - (#{$spacing-unit} / 2));
-  width:         calc(30% - (#{$spacing-unit} / 2));
-*/
-  text-align: left;
-  width: -webkit-calc(33% - (#{$spacing-unit} / 2));
-  width:         calc(33% - (#{$spacing-unit} / 2));
-}
-
-.footer-col-2 {
-  text-align: center;
-  width: -webkit-calc(34% - (#{$spacing-unit} / 2));
-  width:         calc(34% - (#{$spacing-unit} / 2));
-}
-
-.footer-col-3 {
-  text-align: right;
-  width: -webkit-calc(33% - (#{$spacing-unit} / 2));
-  width:         calc(33% - (#{$spacing-unit} / 2));
-}
-
-/*
-@include media-query($on-laptop) {
-  .footer-col-1 {
-    float: left;
-    width: -webkit-calc(33% - (#{$spacing-unit} / 2));
-    width:         calc(33% - (#{$spacing-unit} / 2));
-  }
-  .footer-col-2 {
-    float: center;
-    width: -webkit-calc(34% - (#{$spacing-unit} / 2));
-    width:         calc(34% - (#{$spacing-unit} / 2));
-  }
-  .footer-col-3 {
-    float: right;
-    width: -webkit-calc(33% - (#{$spacing-unit} / 2));
-    width:         calc(33% - (#{$spacing-unit} / 2));
-  }
-}
-*/
-
-@include media-query($on-palm) {
-  .footer-col {
-    float: none;
-    text-align: center;
-    width: -webkit-calc(100% - (#{$spacing-unit} / 2));
-    width:         calc(100% - (#{$spacing-unit} / 2));
-  }
-}
-
-
 
-/**
- * Page content
- */
 .page-content {
-  padding: $spacing-unit 0;
+  padding-top: $spacing-unit;
+  padding-bottom: $spacing-unit;
   flex: 1;
 }
 
@@ -300,16 +231,20 @@
 
 .post-meta {
   font-size: $small-font-size;
-  color: $text-color-dark;
+  color: $text-muted;
   a {
-    color: $text-color-dark;
+    color: $text-muted;
+    text-decoration: none;
+
+    &:visited {
+    color: $text-muted;
     text-decoration: none;
 
     &:hover {
-    color: $text-color-dark;
+    color: $link;
     text-decoration: underline;
-  }
-
+    }
+    }
   }
 }
 
@@ -318,11 +253,10 @@
   @include relative-font-size(1.5);
 }
 
-
-
 /**
- * Posts
+ * post
  */
+
 .post-header {
   margin-bottom: $spacing-unit;
 }
@@ -332,7 +266,7 @@
   letter-spacing: -1px;
   line-height: 1;
 
-  @include media-query($on-laptop) {
+  @include media-query($on-tablet) {
     @include relative-font-size(2.25);
   }
 }
@@ -343,7 +277,7 @@
   h2 {
     @include relative-font-size(2);
 
-    @include media-query($on-laptop) {
+    @include media-query($on-tablet) {
       @include relative-font-size(1.75);
     }
   }
@@ -351,7 +285,7 @@
   h3 {
     @include relative-font-size(1.625);
 
-    @include media-query($on-laptop) {
+    @include media-query($on-tablet) {
       @include relative-font-size(1.375);
     }
   }
@@ -359,53 +293,264 @@
   h4 {
     @include relative-font-size(1.25);
 
-    @include media-query($on-laptop) {
+    @include media-query($on-tablet) {
       @include relative-font-size(1.125);
     }
   }
 }
 
-/**
- * Pagination navbar
- */
+/* --------------- profile page ---------------------- */
+
+.profile-common{
+  padding-top: 100px;
+  padding-bottom: 100px;
+  min-height: 700px;
+}
+.db-common{
+  background-color: $dark-bg;
+  color: $dbg-text;
+   
+  h1, h2, h3, h4, h5, h6{
+    color: $dbg-text-light;
+  }
+}
+.db-start{
+  border-radius: 0% 0% 80% 0% / 0% 0% 10% 0% ;
+}
+.db-middle{
+  border-radius: 80% 0% 80% 0% / 10% 0% 10% 0% ;
+}
+.db-end{
+  border-radius: 80% 0% 0% 0% / 10% 0% 0% 0% ;
+}
+
+.lb-common{
+  background-color: $light-bg;
+  color: $lbg-text;
+  h1, h2, h3, h4, h5, h6{
+    color: $lbg-text-light;
+  }
+  a {
+    color: $lbg-text-light;
+    text-decoration: none;
+    &:hover {
+      color: $lbg-text-light;
+      text-decoration: underline;
+    }
+  }
+}
+
+.lb-middle{
+  border-radius: 80% 0% 0% 0% / 0% 0% 10% 0% ;
+}
+.lb-end{
+  border-radius: 0% 0% 0% 0% / 0% 0% 0% 0% ;
+}
+
+.profile{
+  img{
+  /*max-width: 100%;*/
+  max-width: 70%;
+  }
+}
+
+@include media-query($on-palm){
+.profile{
+  img{
+  max-width: 100%;
+  }
+}
+}
+
+/* --------------- home page --------------- */
+
+.home-page {
+  padding-top: $spacing-unit ;
+}
+
+.center{
+  float: center;
+}
+
+.social-links-home {
+  margin-top: $spacing-unit;
+  margin-bottom: $spacing-unit;
+  display: block;
+  text-align: center;
+  background-color: $dbg-shape;
+  border-radius: 48% 87% 69% 65% / 85% 52% 76% 55% ;
+  box-shadow: $shadow;
+  a{
+  text-align: center;
+  display: inline-block;
+  padding: 20px;
+  color: $text;
+  &:visited {
+  color: $text;
+  }
+  &:hover {
+  color: $link-hover;
+  }
+}
+}
+
+.profile-picture {
+  text-align: center;
+  img{
+    opacity: 1;
+    border-radius: 48% 87% 69% 65% / 85% 52% 76% 55% ;
+    //border-radius: 56% 57% 63% 53% / 66% 44% 74% 68% ;
+    //border-radius: 8px;
+    //border-radius: 57% 43% 68% 32% / 40% 60% 40% 60% ;
+ // border-radius: 69% 50% 59% 77% / 68% 50% 79% 72% ;
+  }
+}
+
+/* -------------- pagination ------------------- */
+
+/*
+* pagination tooltips 
+*/
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  top: 150%;
+  left: 50%;
+  margin-left: -60px;
+}
+
+.tooltip .tooltiptext::after {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent black transparent;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
+/*
+* pagination buttons
+*/
+
 .pagination {
+  padding-top: $spacing-unit;
+  padding-bottom: $spacing-unit;
     a {
+      border-radius: 48% 87% 69% 65% / 85% 52% 76% 55% ;
       display: inline-block;
       background-color: $grey85;
       max-width: 300px;
-      padding: $spacing-unit / 4;
-      text-decorations: none;
+      padding: $spacing-unit / 2;
+      text-decoration: none;
+      box-shadow: $shadow;
+      color: $text-light;
       &:hover {
-      text-decoration: underline;
       background-color: $grey8;
-      color: $text-color-light;
+      color: $text-light;
+      box-shadow: $shadow-hover;
       }
       &:visited {
-      background-color: $grey85;
-      color: $text-color-light;
-      text-decoration: underline;
+      color: $text-light;
+      text-decoration: none;
     }
     }
   }
 
-
-/* Tags page */
+/* ----------------- tags page ------------------- */
 
 .tag-btn {
-  margin: 0.3125rem;
+  margin-right: $spacing-unit;
 }
 
 #full-tags-list {
-  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  .tag-entry {
+    margin-top: $spacing-unit ;
+    margin-bottom: $spacing-unit ;
+    margin-left: $spacing-unit / 2;
+    /*margin: 0 0 0.9375rem 1.5625rem;*/
+    .entry-date {
+      color: $text;
+      font-size: $small-font-size;
+    }
+  }
 }
-#full-tags-list .tag-entry {
-  margin: 0 0 0.9375rem 1.5625rem;
+
+
+/* ---------------- Footer ----------------- */
+
+.site-footer {
+  padding-left: $spacing-unit * 1.5;
+  background-color: $footer-color;
+  color: $nav-text-muted;
+  a{
+  color: $nav-text-muted;
+  &:visited{
+  color: $nav-text-muted;
+  }
+  &:hover{
+  color: $nav-text;
+  }
+  }
 }
 
-#full-tags-list .tag-entry a {
+.footer-col-wrapper {
+  margin-left: auto;
+  margin-right: auto;
+  @include relative-font-size(0.9375);
+  @extend %clearfix;
 }
 
-#full-tags-list .tag-entry .entry-date {
-  color: $text-color-light;
-  font-size: 1rem;
+.footer-col {
+  @include relative-font-size(0.8);
+  float: center;
+  padding: 10px;
+}
+
+.footer-col-1 {
+  text-align: left;
+  width: -webkit-calc(33% - (#{$spacing-unit} / 2));
+  width:         calc(33% - (#{$spacing-unit} / 2));
+}
+
+.footer-col-2 {
+  text-align: center;
+  width: -webkit-calc(34% - (#{$spacing-unit} / 2));
+  width:         calc(34% - (#{$spacing-unit} / 2));
+}
+
+.footer-col-3 {
+  text-align: right;
+  width: -webkit-calc(33% - (#{$spacing-unit} / 2));
+  width:         calc(33% - (#{$spacing-unit} / 2));
 }
+
+@include media-query($on-palm) {
+  .footer-col {
+    float: none;
+    text-align: center;
+    width: -webkit-calc(100% - (#{$spacing-unit} / 2));
+    width:         calc(100% - (#{$spacing-unit} / 2));
+  }
+}
+
+