balkian
/
balkian.github.com
mirror of https://github.com/balkian/balkian.github.com.git
1
0
Fork 0
Code Issues Releases Wiki Activity

update style and add zigbee2mqtt

Browse Source
pelican
J. Fernando Sánchez 5 years ago
parent 123d74aa5b
commit dbe35d2dde
10 changed files with 648 additions and 304 deletions
Show Stats Download Patch File Download Diff File

33
balkiantheme/static/css/main-desktop.css
Unescape Escape View File

@ -8,19 +8,18 @@
margin: 0 auto;
}
#contentwrapper {
width: 1200px;
}
/* #contentwrapper { */
/* width: 1200px; */
/* position:relative; */
/* } */
#content {
width: 840px;
padding: 10px 30px;
float: right;
overflow: display;
margin: 0;
border-bottom: dashed 1px #DDD;
}
/* #content { */
/* padding: 10px 30px; */
/* overflow: display; */
/* 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;
}

65
balkiantheme/static/css/main-medium.css
Unescape Escape View File

@ -1,36 +1,35 @@
#contentwrapper {
position: relative;
background-color: rgba(255, 255, 255, 0.5);
overflow: display;
border: 1px solid #CCC;
display: inline-block;
}
/* #contentwrapper { */
/* background-color: rgba(255, 255, 255, 0.5); */
/* overflow: display; */
/* border: 1px solid #CCC; */
/* display: inline-block; */
/* } */
#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+ */
}
/* #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 {
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 { */
/* 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%;
}
#content:after {
content: ".";
display: block;
@ -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;
}

10
balkiantheme/static/css/main-xs.css
Unescape Escape View File

@ -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;
}
@ -128,4 +120,4 @@ a {
background-color: white;
border: dashed 1px #AAA;
text-align: center;
}
}

550
balkiantheme/static/css/main.css
Unescape Escape View File

@ -15,22 +15,246 @@ body {
min-height: 100%;
position:relative;
margin: 0 auto;
background-color: white;
}
#contentwrapper {
position: relative;
background-color: rgba(255, 255, 255, 0.5);
overflow: display;
border: 1px solid #CCC;
padding-bottom: 14em;
}
#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+ */
#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-radius: 5px 0px 5px 5px;
border: solid 1px #CCC;
/* 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;
border-radius: 0.5em;
/* color: white; */
border-radius: 0.5em 0.5em 0em 0em;
/* border-bottom: 1px solid; */
margin: 1em auto;
display: inline-block;
}
.readmore:hover {
background: #DADADA;
.readmore:hover a {
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;
}

118
balkiantheme/templates/base.html
Unescape Escape View File

@ -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">

16
balkiantheme/templates/index.html
Unescape Escape View File

@ -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">
<h2><a href="{{ SITE_URL }}/{{ post.url }}" class="title">{{ post.title }}</a></h2>
<span class="date">{{ post.date | date_to_string }}</span>
{% for c in post.tags %}
<a class="tag" href="{{ SITE_URL }}/tag/{{ c }}.html"><span class="label">{{ c }}</span></a>
<div class="article-entry">
<div class="posthead">
<h2><a href="{{ SITE_URL }}/{{ post.url }}" class="title">{{ post.title }}</a></h2>
<span class="date">{{ post.date | date_to_string }}</span>
{% 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 %}

49
balkiantheme/templates/sidebar.html
Unescape Escape View File

@ -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>

95
content/2019-01-06-zigbee2mqtt.rst
Unescape Escape View File

@ -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>`_.

11
content/cheats/openwrt.rst
Unescape Escape View File

@ -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

5
pelicanconf.py
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save