update style and add zigbee2mqtt

balkiantheme/static/css/main-desktop.css

@@ -8,19 +8,18 @@
   margin: 0 auto;
 }
 
-#contentwrapper {
+/* #contentwrapper { */
-  width: 1200px;
+/*   width: 1200px; */
-}
+/*   position:relative; */
+/* } */
 
 
-#content {
+/* #content { */
-  width: 840px;
+/*   padding: 10px 30px; */
-  padding: 10px 30px;
+/*   overflow: display; */
-  float: right;
+/*   margin: 0; */
-  overflow: display;
+/*   border-bottom: dashed 1px #DDD; */
-  margin: 0;
+/* } */
-  border-bottom: dashed 1px #DDD;
-}
 
 #content:after {
     content: ".";
@@ -37,9 +36,8 @@
   width: 10em;
   text-align: center;
   border-radius: 0px 0px 0px 15px;
+  border: solid #428bca;
   padding: 0.5em;
-  background-color: #428bca;
-  color: white;
   font-weight: bold;
 }
 
@@ -75,10 +73,6 @@ header {
   padding-left: 300px;
 }
 
-div.navbar {
-  background-color: black;
-}
-
 .navbar ul {
   list-style-type:none;
   margin:0;
@@ -87,7 +81,6 @@ div.navbar {
 
 .navbar li {
   display:inline;
-  color: white;
   text-align: center;
 }  
 
@@ -95,7 +88,6 @@ div.navbar {
   background-color: #F30;
   color: white;
   text-shadow: 0.1em 0.1em 0.1em black;
-  border-top: 1px solid #555;
   border-bottom: 1px solid #555;
 }
 
@@ -104,8 +96,6 @@ div.navbar {
   display: inline;
   text-decoration: none;
   font-weight: bold;
-  color: #CCC;
-  border-right: 1px solid #555;
   padding: 0.5em 1em;
 }
 .navbar li:first-child a {
@@ -116,7 +106,6 @@ div.navbar {
   color: #000;
   background-color: #fff;
   text-shadow: 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
-  border-top: 1px solid #555;
   border-bottom: 1px solid #555;
   z-index: 100;
 }

balkiantheme/static/css/main-medium.css

@@ -1,35 +1,34 @@
 
-#contentwrapper {
+/* #contentwrapper { */
-  position: relative;
+/*   background-color: rgba(255, 255, 255, 0.5); */
-  background-color: rgba(255, 255, 255, 0.5);
+/*   overflow: display; */
-  overflow: display;
+/*   border: 1px solid #CCC; */
-  border: 1px solid #CCC;
+/*   display: inline-block; */
-  display: inline-block;
+/* } */
+
+/* #sidebar { */
+/*   width: 20%; */
+/*   text-align: right; */
+/*   border-right: dashed 1px #DDD; */
+/*   -webkit-box-sizing: border-box; /\* Safari/Chrome, other WebKit *\/ */
+/*   -moz-box-sizing: border-box;    /\* Firefox, other Gecko *\/ */
+/*   box-sizing: border-box;         /\* Opera/IE 8+ *\/ */
+/* } */
+
+
+/* #content { */
+/*   padding: 10px 10px; */
+/*   margin: 0; */
+/*   border-bottom: dashed 1px #DDD; */
+/*   -webkit-box-sizing: border-box; /\* Safari/Chrome, other WebKit *\/ */
+/*   -moz-box-sizing: border-box;    /\* Firefox, other Gecko *\/ */
+/*   box-sizing: border-box;         /\* Opera/IE 8+ *\/ */
+/* } */
+
+#content .full {
+    width: 100%;
 }
 
-#sidebar {
-  position: relative;
-  float: left;
-  width: 20%;
-  text-align: right;
-  border-right: dashed 1px #DDD;
-  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
-  box-sizing: border-box;         /* Opera/IE 8+ */
-}
-
-
-#content {
-  position: relative;
-  padding: 10px 10px;
-  width: 80%;
-  float: right;
-  margin: 0;
-  border-bottom: dashed 1px #DDD;
-  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
-  box-sizing: border-box;         /* Opera/IE 8+ */
-}
 
 #content:after {
     content: ".";
@@ -83,10 +82,6 @@ header {
   padding-left: 20%;;
 }
 
-div.navbar {
-  background-color: black;
-}
-
 .navbar ul {
   list-style-type:none;
   margin:0;
@@ -103,8 +98,6 @@ div.navbar {
   background-color: #F30;
   color: white;
   text-shadow: 0.1em 0.1em 0.1em black;
-  border-top: 1px solid #555;
-  border-bottom: 1px solid #555;
 }
 
 .navbar li a {
@@ -116,16 +109,12 @@ div.navbar {
   border-right: 1px solid #555;
   padding: 0.5em 1em;
 }
-.navbar li:first-child a {
+
-  border-left: 1px double #ccc;
-}
 .navbar li a:hover {
   position: relative;
   color: #000;
   background-color: #fff;
   text-shadow: 2px 2px #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;
-  border-top: 1px solid #555;
-  border-bottom: 1px solid #555;
   z-index: 10;
 }
 

balkiantheme/static/css/main-xs.css

@@ -64,8 +64,6 @@ div.navbar {
   background-color: #F30;
   color: white;
   text-shadow: 0.1em 0.1em 0.1em black;
-  border-top: 1px solid #555;
-  border-bottom: 1px solid #555;
 }
 
 .navbar li a {
@@ -74,20 +72,14 @@ div.navbar {
   text-decoration: none;
   font-weight: bold;
   color: #CCC;
-  border-right: 1px solid #555;
   padding: 0.5em 1em;
   display: block;
 }
-.navbar li:first-child a {
-  border-left: 1px double #ccc;
-}
 .navbar li a:hover {
   position: relative;
   color: #000;
   background-color: #fff;
   text-shadow: 2px 2px #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;
-  border-top: 1px solid #555;
-  border-bottom: 1px solid #555;
   z-index: 100;
 }
 

balkiantheme/static/css/main.css

@@ -15,22 +15,246 @@ body {
   min-height: 100%;
   position:relative;
   margin: 0 auto;
+  background-color: white;
 }
 
-
+#contentwrapper {
-
-#sidebar {
   position: relative;
-  width: 300px;
+  background-color: rgba(255, 255, 255, 0.5);
-  float: left;
+  overflow: display;
-  padding: 20px;
+  border: 1px solid #CCC;
-  text-align: right;
+  padding-bottom: 14em;
-  border-right: dashed 1px #DDD;
-  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
-  box-sizing: border-box;         /* Opera/IE 8+ */
 }
 
+
+#contentwrapper,
+#content,
+#sidebar { 
+    //change the box model for simplicity
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+#contentwrapper {
+    font-size: 1em;
+    padding: 1.5em;
+    width: 100%;
+}
+
+#content,
+#sidebar {
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+    width: 100%;
+    padding-bottom: 2em;
+}
+
+#content p {
+    font-size: 18px;
+}
+
+@media (max-width: 700px) {
+    #sidebar {
+        display: none;
+    }
+}
+@media (min-width: 700px) {
+
+    #contentwrapper{
+        padding-bottom: 10em;
+        margin-top: 50px
+    }
+    #content {
+        width: 70%;
+        margin: 0;
+    }
+
+    footer {
+        height: 10em;
+        bottom: -0em;
+        position: absolute;
+    }
+
+    #sidebar {
+        width: 28%;
+        text-align: right;
+        padding-left: 50px;
+        position: relative;
+        
+    }
+
+    #badge{
+        position: relative;
+        margin: 0px auto 10px;
+        width: 80%;
+        height: 180px;
+        padding: 0;
+        /* margin-top: -2em; */
+        -webkit-transform: rotate(-4deg);
+        -moz-transform: rotate(-4deg);
+        transform: rotate(-4deg);
+        transition: 0.2s;
+        transition-delay: 0.4s;
+        z-index: 1000;
+    }
+
+    #badge * {
+        width: 100%;
+    }
+
+    /* entire container, keeps perspective */
+
+    .flip-container {
+    perspective: 1000;
+    -webkit-perspective: 1000;
+    }
+
+    #badge:hover {
+    -webkit-transform: translate(5px, 20px) rotate(0.5deg) scale(1.1);
+    -moz-transform: translate(5px, 20px) rotate(0.5deg) scale(1.1);
+    transform: translate(5px, 20px) rotate(0.5deg) scale(1.1);
+    transition-delay: 0s;
+    }
+
+    /* flip the pane when hovered */
+    .flip-container:hover .flipper, .flip-container.hover .flipper {
+    -webkit-transform: rotateY(180deg);
+    -moz-transform: rotateY(180deg);
+    transform: rotateY(180deg);
+    }
+
+    /* .flip-container, .front, .back { */
+    /* width: 100%; */
+    /* } */
+
+    /* flip speed goes here */
+    .flipper {
+    transition: 0.8s;
+    transform-style: preserve-3d;
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+
+    position: relative;
+    }
+
+    /* hide back of pane during swap */
+    .front, .back {
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 1%;
+    padding-bottom: 10%;
+    background-color: black;
+    box-shadow: -5px 5px 5px #555;
+    -webkit-box-shadow: -5px 5px 15px #555;
+    -moz-box-shadow: -5px 5px 15px #555;
+    }
+
+    /* front pane, placed above back */
+    .front {
+    z-index: 3;
+    }
+
+    /* back, initially hidden pane */
+    .back {
+    transform: rotateY(180deg);
+    -webkit-transform: rotateY(180deg);
+    z-index: 4;
+    }
+
+    .sticky:after {
+    content: "";
+    height: 20px;
+    width: 80px;
+    background: rgba(255,255,255,0.5);
+    position: absolute;
+    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
+        -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
+            box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
+    top: 0;
+    right: 8px;
+    margin: -8px -40px 0 0;
+    z-index: 1000;
+    -webkit-transform:rotate(43deg);
+    -moz-transform:rotate(43deg);
+    backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    }
+
+    .sticky:hover:after {
+    content: "";
+    visibility: hidden;
+    }
+
+    .date {
+        position: absolute;
+        right: 5px;
+        width: 10em;
+        text-align: center;
+        border-radius: 0px 0px 0px 15px;
+        padding: 0.5em;
+        background-color: #428bca;
+        color: white;
+        font-weight: bold;
+    }
+
+    h1 + .date {
+        margin-top: -3.5em;
+    }
+
+    h2 + .date {
+        margin-top: -2.5em;
+    }
+
+    .posthead {
+        margin-bottom: 1.5em;
+    }
+
+    .posthead h2, h1 {
+        margin-bottom: 0.5em;
+    }
+
+    .article-entry {
+        /* border-left: 5px solid blue; */
+        padding: 10px;
+        margin: 5px;
+    }
+
+}
+
+@media (min-width: 1200px) {
+    #contentwrapper {
+    width: 1200px;
+    position:relative;
+    }
+
+    #container {
+        width: 1200px;
+        margin: 0 auto;
+    }
+    #badge{
+        height: 270px;
+    }
+
+
+}
+/* #sidebar { */
+/*   position: relative; */
+/*   width: 300px; */
+/*   float: left; */
+/*   padding: 20px; */
+/*   text-align: right; */
+/*   border-right: dashed 1px #DDD; */
+/*   -webkit-box-sizing: border-box; /\* Safari/Chrome, other WebKit *\/ */
+/*   -moz-box-sizing: border-box;    /\* Firefox, other Gecko *\/ */
+/*   box-sizing: border-box;         /\* Opera/IE 8+ *\/ */
+/* } */
+
 .icons {
     text-align: center;
     color: #333;
@@ -73,125 +297,14 @@ body {
 .explanation {
     display:none;
 }
-#badge{
-  position: relative;
-  margin: 0px auto 10px;
-  width: 80%;
-  height: 180px;
-  padding: 0;
-  margin-top: -2em;
-  -webkit-transform: rotate(-4deg);
-  -moz-transform: rotate(-4deg);
-  transform: rotate(-4deg);
-  transition: 0.2s;
-  transition-delay: 0.4s;
-}
-
-/* entire container, keeps perspective */
-
-.flip-container {
-  perspective: 1000;
-  -webkit-perspective: 1000;
-}
-
-#badge:hover {
-  -webkit-transform: translate(5px, 20px) rotate(0.5deg) scale(1.1);
-  -moz-transform: translate(5px, 20px) rotate(0.5deg) scale(1.1);
-  transform: translate(5px, 20px) rotate(0.5deg) scale(1.1);
-  transition-delay: 0s;
-}
-
-/* flip the pane when hovered */
-.flip-container:hover .flipper, .flip-container.hover .flipper {
-  -webkit-transform: rotateY(180deg);
-  -moz-transform: rotateY(180deg);
-  transform: rotateY(180deg);
-}
-
-.flip-container, .front, .back {
-  width: 100%;
-}
-
-/* flip speed goes here */
-.flipper {
-  transition: 0.8s;
-  transform-style: preserve-3d;
-  -webkit-transform-style: preserve-3d;
-  -moz-transform-style: preserve-3d;
-
-  position: relative;
-}
-
-/* hide back of pane during swap */
-.front, .back {
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 1%;
-  padding-bottom: 10%;
-  background-color: black;
-  box-shadow: -5px 5px 5px #555;
-  -webkit-box-shadow: -5px 5px 15px #555;
-  -moz-box-shadow: -5px 5px 15px #555;
-}
-
-/* front pane, placed above back */
-.front {
-  z-index: 3;
-}
-
-/* back, initially hidden pane */
-.back {
-  transform: rotateY(180deg);
-  -webkit-transform: rotateY(180deg);
-  z-index: 4;
-}
-
-.sticky:after {
-  content: "";
-  height: 20px;
-  width: 80px;
-  background: rgba(255,255,255,0.5);
-  position: absolute;
-  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-     -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-          box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-  top: 0;
-  right: 8px;
-  margin: -8px -40px 0 0;
-  z-index: 1000;
-  -webkit-transform:rotate(43deg);
-  -moz-transform:rotate(43deg);
-  backface-visibility: hidden;
-  -moz-backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-}
-
-.sticky:hover:after {
-  content: "";
-  visibility: hidden;
-}
-
-#contentwrapper {
-  position: relative;
-  background-color: rgba(255, 255, 255, 0.5);
-  overflow: display;
-  border: 1px solid #CCC;
-  padding-bottom: 10.5em;
-}
 
 a {
-  color: #069;
+  color: #111;
   text-decoration: none;
 }
 
 footer {
     font-family: Comfortaa;
-    height: 10em;
-    bottom: -0em;
-    position: absolute;
     background-color: #000;
     color: white;
     text-align: center;
@@ -293,7 +406,7 @@ footer a:hover {
 }
 
 .pag-bottom {
-  bottom: -10px;
+  /* bottom: -10px; */
   /*margin: 0 auto;*/
   /*border-radius: 15px 15px 0 0;*/
   /*border: dashed 1px #AAA;*/
@@ -339,12 +452,12 @@ footer a:hover {
   display: block;
   overflow: auto;
   position: relative;
-  background-color: #EEE;
+  background-color: #FEFEFE;
   margin: 0 auto;
   width: 80%;
   padding: 0;
-  border: dashed 1px #AAA;
+  border: solid 1px #CCC;
-  border-radius: 5px 0px 5px 5px;
+  /* border-radius: 5px 0px 5px 5px; */
   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;         /* Opera/IE 8+ */
@@ -371,8 +484,6 @@ footer a:hover {
 
 #navbar {
   position: relative;
-  padding: 0.5em;
-  padding-left: 300px;
 }
 
 .pagination {
@@ -388,13 +499,13 @@ footer a:hover {
 }
 
 .pag-top{
-  margin: -9px auto;
+  margin: 0px auto;
   margin-bottom: 0;
   border-top-width: 0;
 }
 
 .pag-bottom {
-  bottom: -10px;
+  bottom: 0px;
   margin: 0 auto;
   border-bottom-width: 0;
 }
@@ -409,17 +520,21 @@ footer a:hover {
 
 .clear { clear: both; }
 
-.post img {
+.post {
   display: block;
   margin-left: auto;
-  margin-right: auto
+  margin-right: auto;
 }
 
+#content img {
+    max-width: 100%;
+}
+
+
 #headline {
   position: relative;
   margin: 0em;
   font-size: 4em;
-  padding-left: 300px;
   padding-top: 5px;
   font-family: comfortaa;
 }
@@ -472,6 +587,7 @@ a:hover {
   transform-origin: 95% 50%;
   -moz-transform-origin: 95% 50%;
   -webkit-transform-origin: 95% 50%;
+  background-color: #ffd700; */
 }
 
 .tag {
@@ -481,6 +597,7 @@ a:hover {
 .tag * {
   display: inline-block;
   color: black;
+  background-color: #ffd700; */
 }
 
 .hll {
@@ -491,7 +608,6 @@ a:hover {
   font-family: comfortaa;
   border-radius: 10px 0px 0px 10px;
   padding: 5px;
-  background-color: #ffd700;
   color: black;
   font-size: 10px;
   padding-left: 10px;
@@ -504,18 +620,172 @@ a:hover {
 }
 
 .readmore {
-    background: #EAEAEA;
+    /* background: #EAEAEA; */
     padding: 0.5em;
-    color: white;
+    /* color: white; */
-    border-radius: 0.5em;
+    border-radius: 0.5em 0.5em 0em 0em;
+    /* border-bottom: 1px solid; */
     margin: 1em auto;
     display: inline-block;
 }
 
-.readmore:hover {
+.readmore:hover a {
-    background: #DADADA;
+  border-bottom: 1px solid;
+
 }
 
 .readmore a {
     color: black;
 }
+
+#content:after {
+    content: ".";
+    display: block;
+    clear: both;
+    visibility: hidden;
+    line-height: 0;
+    height: 0;
+}
+
+
+#headline {
+  padding-left: 20%;;
+}
+
+a {
+  /* color: #069; */
+  text-decoration: none;
+}
+
+.previouspost {
+  float: left;
+}
+
+
+.about {
+  position: relative;
+  margin: 0 auto;
+  text-align: center;
+  margin-top: 50px;
+  clear: both;
+}
+
+#about li, .about li {
+  line-height:1.5em;
+  border-bottom:1px solid #DDD;
+  float:left;
+  display:inline;
+  width: 33.333%;
+}
+
+@-webkit-keyframes toright {
+  from { 
+    padding-left: 0px;
+    opacity: 0;
+  }
+  to { 
+    padding-left: 150px;
+    opacity: 1;
+  }
+}
+
+@keyframes toright {
+  from { 
+    padding-left: 0px;
+    opacity: 0;
+  }
+  to { 
+    padding-left: 150px;
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes appear{
+  to { 
+    opacity: 1;
+  }
+  from { 
+    opacity: 0;
+  }
+}
+
+@keyframes appear{
+  to { 
+    opacity: 1;
+  }
+  from { 
+    opacity: 0;
+  }
+}
+
+#subheadline {
+  -webkit-animation-name:             toright; 
+  -webkit-animation-duration:         4s; 
+  -webkit-animation-iteration-count:  1;
+  -webkit-animation-timing-function: linear;
+  -webkit-animation-fill-mode: forwards;
+  animation-name:             toright; 
+  animation-duration:         4s; 
+  animation-iteration-count:  1;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+
+.disappear {
+  -webkit-animation-name:             appear; 
+  -webkit-animation-duration:         4s; 
+  -webkit-animation-timing-function: linear;
+  -webkit-animation-iteration-count:  1;
+  -webkit-animation-fill-mode: forwards;
+  animation-name:             appear; 
+  animation-duration:         4s; 
+  animation-iteration-count:  1;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+
+.navbar {
+  font-size: 1.2em;
+  margin: 0; 
+  padding: 0; 
+  list-style-type: none; 
+  list-style-image: none;
+
+}
+
+.navbar li {
+  text-align: center;
+  display: inline-block;
+  margin: 0;
+  padding: 0.5em;
+}  
+
+.navbar li:hover {
+  border-bottom: solid 2px black;
+}
+
+
+.navbar li {
+  margin: 0;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.navbar li:hover {
+  position: relative;
+  color: #000;
+  background-color: #fff;
+  text-shadow: 2px 2px #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;
+}
+
+.navbar li.active {
+    border-bottom: solid 2px #C00;
+}
+
+.navbar a:hover {
+  color: #c00;
+}
+
+.previouspost {
+  float: left;
+}

balkiantheme/templates/base.html

@@ -15,103 +15,47 @@
 
     <!-- Custom CSS -->
     <link rel="stylesheet" media="only screen" href="{{ SITE_URL }}/theme/css/main.css">
-    <link rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 599px)" href="{{ SITE_URL }}/theme/css/main-xs.css">
-    <link rel="stylesheet" media="only screen and (min-width: 600px) and (max-width: 1199px)" href="{{ SITE_URL }}/theme/css/main-medium.css">
-    <link rel="stylesheet" media="only screen and (min-width: 1200px)" href="{{ SITE_URL }}/theme/css/main-desktop.css">
     <link href='http://fonts.googleapis.com/css?family=Open+Sans:300|Comfortaa' rel='stylesheet' type='text/css'>
   </head>
   <body>
     <div id="container" class="container">
-      <header id="header">
-        <div id="navbar" class="navbar navbar-inverse navbar-static-bottom">
-          <div class="container">
-            <div class="navbar-header">
-              <ul class="nav navbar-nav">
-                <li {% if page_name == 'index' %}class="active" {% endif %}>
-                  <a href="/"><i class="fa fa-home fa-large"></i></a>
-                </li>
-                {% for c,carts in categories %}
-                <li {% if ( page_name and page_name == c.page_name) or (category and category == c ) %} class="active"
-                    {% endif %} >
-                  <a href="/{{ c.url }}">{{ c.name | capitalize }}</a>
-                </li>
-                {% endfor %}
-                <li {% if page_name == "tags" or tag %} class="active" {%endif%}>
-                  <a href="/tags.html">Tags</a>
-                </li>
-                {% for p in pages %} {% if "/page" in p.url %}
-                {% else %}
-                {% if p.url != "/index.html" %}
-                <li {% if page and p.url == page.url %} class="active"
-                    {% endif %} >
-                  <a href="/{{ p.url }}">{{ p.title }}</a>
-                </li>
-                {% endif %}
-                {% endif %}
-                {% endfor %}
-                <li>
-                  <a href="//jfernando.es" target="_blank">CV</a>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </header>
       <div id="contentwrapper">
-        <div id="sidebar" >
-          <div id="badge" class="flip-container" ontouchstart="this.classList.toggle('hover');">
-              <div class="flipper sticky">
-                <div class="front">
-                  <!-- front content -->
-                  <img id="avatar" width=100% src="{{ SITE_URL }}/theme/img/me.png">
-                </div>
-                <div class="back">
-                  <!-- back content -->
-                  <img id="picture" width=100% src="{{ SITE_URL }}/theme/img/me-bat.png">
-                </div>
-              </div>
-          </div>
-
-          <div id="about" style="clear:both;">
-            <!-- <h1 class="title">Interests</h1> -->
-            <div class="icons">
-              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa-stack-2x" ></i><i class="fa fa-stack-1x fa-linux"></i></span><span class="explanation">Linux lover</span></span>
-              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-android"></i></span><span class="explanation">Android dev</span></span>
-              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-github-alt"></i> </span><span class="explanation">GitHub user</span></span>
-              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-stack-exchange"></i> </span><span class="explanation">StackExchange fan</span></span>
-              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-music"></i> </span><span class="explanation">Music lover</span></span>
-              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-film"></i> </span><span class="explanation">Movie fan</span></span>
-              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-comments"></i> </span><span class="explanation">Always on IM</span></span>
-              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-laptop"></i> </span><span class="explanation">Always on a PC</span></span>
-              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-pencil"></i> </span><span class="explanation">Occassional writter</span></span>
-              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-moon-o"></i> </span><span class="explanation">Night owl</span></span>
-              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-terminal"></i></span>      <span class="explanation">CLI user</span></span>
-              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-flag"></i></span>      <span class="explanation">Linguist wannabe</span></span>
-              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-code"></i> </span>           <span class="explanation">Love to code</span></span>
-              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-book"></i></span>      <span class="explanation">Keen reader</span></span>
-              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-quote-right"></i></span>      <span class="explanation">Quotes on demand</span></span>
-            </div>
-          </div>
-          
-          <div class="entries">
-            <h2 class="title">Latest entries</h2>
-            <dl>
-                {% for p in articles[:5] %}
-                <dt><a href="{{ SITE_URL }}/{{ p.url }}">{{ p.title }}</a></dt>
-                  {% for c in p.tags %}
-                  <dd class="tag"><a class="label" href="/tag/{{ c }}.html">{{ c }}</a></dd>
-                  {% endfor %}
-                {% endfor %}
-            </dl>
-          </div>
-
-          <!--Sidebar content-->
-        </div>
         <div id="content">
+      <header id="header">
+        <ul class="navbar" id="navbar">
+          <a href="/">
+          <li {% if page_name == 'index' %}class="active" {% endif %}>
+            <i class="fa fa-home fa-large"></i>
+          </li></a>
+          {% for c,carts in categories %}
+          <a href="/{{ c.url }}"><li {% if ( page_name and page_name == c.page_name) or (category and category == c ) %} class="active"
+              {% endif %} >
+            {{ c.name | capitalize }}
+          </li></a>
+          {% endfor %}
+          <a href="/tags.html"><li {% if page_name == "tags" or tag %} class="active" {%endif%}>
+            Tags
+          </li></a>
+          {% for p in pages %} {% if "/page" in p.url %}
+          {% else %}
+          {% if p.url != "/index.html" %}
+          <a href="/{{ p.url }}"><li {% if page and p.url == page.url %} class="active"
+              {% endif %} >
+            {{ p.title }}
+          </li></a>
+          {% endif %}
+          {% endif %}
+          {% endfor %}
+          <a href="//jfernando.es" target="_blank"><li>
+            CV
+          </li></a>
+        </ul>
+      </header>
           <!--Body content-->
           {% block content %}
           {% endblock %}
         </div>
+        {% include "sidebar.html" %}
         <div class="clear"></div>
       </div>
       <footer role="contentinfo">

balkiantheme/templates/index.html

@@ -11,7 +11,7 @@ Welcome
   {% else %}
   <span class="previouspage" style="visibility:hidden;"><i class="icon-chevron-sign-left"></i> Newer Posts</span>
   {% endif %}
-  <span class="page_number ">Page {{ articles_page.number }} of {{ articles_paginator.num_pages }}</span>
+  <!-- <span class="page_number ">Page {{ articles_page.number }} of {{ articles_paginator.num_pages }}</span> -->
   {% if articles_page.has_next() %}
     <span class="nextpage"><a href="/page{{ articles_page.next_page_number() }}"> Older Posts </a> <i class="icon-double-angle-right"></i></span>
   {% else %}
@@ -24,17 +24,19 @@ Welcome
 {% endblock %}
 <!-- This loops through the paginated posts -->
 {% for post in articles_page.object_list %}
-  <div class="posthead">
+  <div class="article-entry">
-    <h2><a href="{{ SITE_URL }}/{{ post.url }}" class="title">{{ post.title }}</a></h2>
+    <div class="posthead">
-  <span class="date">{{ post.date | date_to_string }}</span>
+        <h2><a href="{{ SITE_URL }}/{{ post.url }}" class="title">{{ post.title }}</a></h2>
-  {% for c in post.tags %}
+    <span class="date">{{ post.date | date_to_string }}</span>
-      <a class="tag" href="{{ SITE_URL }}/tag/{{ c }}.html"><span class="label">{{ c }}</span></a>
+    {% for c in post.tags %}
+        <a class="tag" href="{{ SITE_URL }}/tag/{{ c }}.html"><span class="label">{{ c }}</span></a>
   {% endfor %}
   </div>
   <div class="excerpt">
     {{ post.summary }}
   </div>
-  <div class="readmore"><a href="{{ SITE_URL }}/{{ post.url }}"><i class="fa fa-external-link"></i> Read more...</a></div>
+  <div class="readmore"><a href="{{ SITE_URL }}/{{ post.url }}"> Read more...</a></div>
+  </div>
 {% endfor %}
 
 {% if articles_paginator.num_pages > 0 %}

balkiantheme/templates/sidebar.html

@@ -0,0 +1,49 @@
+<div id="sidebar" >
+  <div id="badge" class="flip-container" ontouchstart="this.classList.toggle('hover');">
+    <div class="flipper sticky">
+      <div class="front">
+        <!-- front content -->
+        <img id="avatar" src="{{ SITE_URL }}/theme/img/me.png">
+      </div>
+      <div class="back">
+        <!-- back content -->
+        <img id="picture" src="{{ SITE_URL }}/theme/img/me-bat.png">
+      </div>
+    </div>
+  </div>
+
+  
+  <div class="entries">
+    <h2 class="title">Latest entries</h2>
+    <dl>
+      {% for p in articles[:5] %}
+      <dt><a href="{{ SITE_URL }}/{{ p.url }}">{{ p.title }}</a></dt>
+      {% for c in p.tags %}
+      <dd class="tag"><a class="label" href="/tag/{{ c }}.html">{{ c }}</a></dd>
+      {% endfor %}
+      {% endfor %}
+    </dl>
+  </div>
+  <div class="about" style="clear:both;">
+    <!-- <h2 class="title">About me</h2> -->
+    <div class="icons">
+      <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa-stack-2x" ></i><i class="fa fa-stack-1x fa-linux"></i></span><span class="explanation">Linux lover</span></span>
+      <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-android"></i></span><span class="explanation">Android dev</span></span>
+      <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-github-alt"></i> </span><span class="explanation">GitHub user</span></span>
+      <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-stack-exchange"></i> </span><span class="explanation">StackExchange fan</span></span>
+      <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-music"></i> </span><span class="explanation">Music lover</span></span>
+      <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-film"></i> </span><span class="explanation">Movie fan</span></span>
+      <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-comments"></i> </span><span class="explanation">Always on IM</span></span>
+      <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-laptop"></i> </span><span class="explanation">Always on a PC</span></span>
+      <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-pencil"></i> </span><span class="explanation">Occassional writter</span></span>
+      <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-moon-o"></i> </span><span class="explanation">Night owl</span></span>
+      <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-terminal"></i></span>      <span class="explanation">CLI user</span></span>
+      <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-flag"></i></span>      <span class="explanation">Linguist wannabe</span></span>
+      <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-code"></i> </span>           <span class="explanation">Love to code</span></span>
+      <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-book"></i></span>      <span class="explanation">Keen reader</span></span>
+      <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x" ></i><i class="fa fa-quote-right"></i></span>      <span class="explanation">Quotes on demand</span></span>
+    </div>
+  </div>
+
+  <!--Sidebar content-->
+</div>

content/2019-01-06-zigbee2mqtt.rst

@@ -0,0 +1,95 @@
+Controlling Zigbee devices with MQTT
+====================================
+:date: 2019-01-06 10:00:00 
+:tags: mqtt, iot, zigbee
+
+This is a short tutorial on connecting a zigbee device (an Aqara cube) to an MQTT server, so you can control your zigbee devices from the network.
+
+If you're anything like me, you're probably a sucker for IoT devices.
+For a long time, I've been using WiFi-enabled lights, and Amazon dash buttons to control them.
+To keep these (cheap Chinese) internet enabled devices away from your network and their respective cloud services, you'll probably want to set up a dedicated network in your router (more on this on a future post, maybe).
+Another disadvantage of WiFi devices is that they're relatively power hungry.
+
+A popular alternative is using ZigBee for communication.
+It is a dedicated protocol similar to bluetooth (BLE), with lower power requirements and bitrate.
+
+Take the (super cute) aqara cube as an example.
+It is a small cube that detects rotation on all of its axes, and tapping events.
+Here's a video:
+
+.. youtube::  5YtqG1wEnng
+
+
+To connect to zigbee devices you will need a zigbee enabled gateway (a.k.a. hub), which connects to your WiFi network and your zigbee devices.
+Once again, this means adding an internet-enabled device to your home, and probably a couple of cloud services.
+
+As an alternative, you can set up your own zigbee gateway, and control it to your home automation platform of choice (e.g. home assistant).
+We will cover how to set up a zigbee2mqtt gateway that is also connected to an MQTT server, so you can use MQTT to control your devices and get notifications.
+
+What you need:
+
+- `Aqara cube <https://www.aliexpress.com/item/Original-Xiaomi-Mi-Aqara-Cube-Smart-Home-Controller-6-Action-Operation-Fr-Home-Device-Zigbee-Version/32892947622.html?spm=a2g0s.9042311.0.0.3da24c4dXV8sBI>`__.
+- `CC2531 zigbee sniffer <https://www.aliexpress.com/item/Wireless-Zigbee-CC2531-CC2540-Zigbee-Sniffer-Bluetooth-BLE-4-0-Dongle-Capture-Module-USB-Programmer-Downloader/32907587711.html?spm=a2g0s.9042311.0.0.3da24c4dXV8sBI>`__.
+- `CC-debugger <https://www.aliexpress.com/item/CFSUNBIRD-CC-DEBUGGER-Debugger-and-Programmer-for-RF-System-on-Chips-TI-ORIGINAL-Fast-hipping/32813122315.html?spm=a2g0s.9042311.0.0.3da24c4dXV8sBI>`__.
+
+
+You will need to flash your sniffer.
+For that, you only need to follow the instructions from the `zigbee2mqtt documentation <https://koenkk.github.io/zigbee2mqtt/>`_.
+
+Once you're done flashing, you're ready to set up the zigbee2mqtt server.
+For convenience, I wrote a simple docker-compose to deploy a zigbee2mqtt server and a test mosquitto server:
+
+
+.. code-block:: docker-compose
+      
+      version: '2.1'
+      services:
+	zigbee2mqtt:
+	  image: koenkk/zigbee2mqtt
+	  container_name: zigbee2mqtt 
+	  restart: always
+	  volumes:
+	    - ./z2m-data/:/app/data/
+	  devices:
+	    - "/dev/ttyACM0"
+	  networks:
+	      - hass
+	mqtt:
+	  image: eclipse-mosquitto
+	  ports:
+	     - 1883:1883
+	     - 9001:9001 
+	  networks:
+	      - hass
+	  volumes:
+	    - ./mosquitto.conf:/mosquitto/config/mosquitto.conf
+	hass:
+	  image: homeassistant/home-assistant   
+	  ports:
+	    - "8123:8123"
+	  networks:
+	    - hass
+	  volumes:
+	    - ./hass-config:/config
+	    - "/etc/localtime:/etc/localtime:ro"
+      networks:
+	hass:
+	  driver: overlay
+        
+
+You can test your installation with:
+
+
+.. code-block:: shell
+   
+    ❯ mosquitto_sub -h localhost -p 1883 -t 'zigbee2mqtt/#'
+   online
+   {"battery":17,"voltage":2925,"linkquality":149,"action":"rotate_right","angle":12.8}
+   {"battery":17,"voltage":2925,"linkquality":141,"action":"slide","side":2}
+   {"battery":17,"voltage":2925,"linkquality":120}
+   {"battery":17,"voltage":2925,"linkquality":141,"action":"wakeu
+
+zigbee2mqtt supports the following events for the aqara cube: shake, wakeup, fall, tap, slide, flip180, flip90, rotate_left and rotate_right.
+Every event has additional information, such as the sides involved, or the degrees turned.
+
+Now you are ready to set up home assistant support in zigbee2mqtt following `this guide <https://koenkk.github.io/zigbee2mqtt/integration/home_assistant.html>`_.

content/cheats/openwrt.rst

@@ -0,0 +1,11 @@
+PPTP connections
+#################
+:date: 2017-01-01
+:tags: openwrt, linux, router
+
+PPTP VPN connections will fail on a vanilla openwrt installation.
+You need to install this module:
+
+.. code-block:: shell
+   
+   opkg install kmod-nf-nathelper-extra

pelicanconf.py

@@ -38,7 +38,10 @@ DEFAULT_PAGINATION = 10
 THEME = "balkiantheme"
 
 PLUGIN_PATHS = ["plugins/",]
-PLUGINS = ["neighbors",]
+PLUGINS = [
+        "neighbors",
+        "pelican_youtube",
+        ]
 
 PYGMENTS_RST_OPTIONS = {'linenos': 'table'}