From dbe35d2ddec66b69b89e7f8d0c3c0928ec28e4cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=2E=20Fernando=20S=C3=A1nchez?= Date: Tue, 8 Jan 2019 18:27:51 +0100 Subject: [PATCH] update style and add zigbee2mqtt --- balkiantheme/static/css/main-desktop.css | 33 +- balkiantheme/static/css/main-medium.css | 69 ++- balkiantheme/static/css/main-xs.css | 10 +- balkiantheme/static/css/main.css | 552 +++++++++++++++++------ balkiantheme/templates/base.html | 118 ++--- balkiantheme/templates/index.html | 16 +- balkiantheme/templates/sidebar.html | 49 ++ content/2019-01-06-zigbee2mqtt.rst | 95 ++++ content/cheats/openwrt.rst | 11 + pelicanconf.py | 5 +- 10 files changed, 651 insertions(+), 307 deletions(-) create mode 100644 balkiantheme/templates/sidebar.html create mode 100644 content/2019-01-06-zigbee2mqtt.rst create mode 100644 content/cheats/openwrt.rst diff --git a/balkiantheme/static/css/main-desktop.css b/balkiantheme/static/css/main-desktop.css index b1802e6..ec20a90 100755 --- a/balkiantheme/static/css/main-desktop.css +++ b/balkiantheme/static/css/main-desktop.css @@ -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; } diff --git a/balkiantheme/static/css/main-medium.css b/balkiantheme/static/css/main-medium.css index 62dd28a..f5f5126 100644 --- a/balkiantheme/static/css/main-medium.css +++ b/balkiantheme/static/css/main-medium.css @@ -1,35 +1,34 @@ -#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 { */ +/* 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; } diff --git a/balkiantheme/static/css/main-xs.css b/balkiantheme/static/css/main-xs.css index f3b331b..8de2d27 100644 --- a/balkiantheme/static/css/main-xs.css +++ b/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; } @@ -128,4 +120,4 @@ a { background-color: white; border: dashed 1px #AAA; text-align: center; -} \ No newline at end of file +} diff --git a/balkiantheme/static/css/main.css b/balkiantheme/static/css/main.css index 735f32c..7e83ac4 100755 --- a/balkiantheme/static/css/main.css +++ b/balkiantheme/static/css/main.css @@ -15,22 +15,246 @@ body { min-height: 100%; position:relative; margin: 0 auto; + background-color: white; } - - -#sidebar { +#contentwrapper { 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+ */ + background-color: rgba(255, 255, 255, 0.5); + overflow: display; + border: 1px solid #CCC; + padding-bottom: 14em; } + +#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; -} \ No newline at end of file +} + +#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; +} diff --git a/balkiantheme/templates/base.html b/balkiantheme/templates/base.html index 7610ce8..daa8250 100644 --- a/balkiantheme/templates/base.html +++ b/balkiantheme/templates/base.html @@ -15,103 +15,47 @@ - - -
-
-
+ {% block content %} {% endblock %}
+ {% include "sidebar.html" %}