Add mobile support, general css improvement

Author: stbinan

css/mobile.css

@@ -0,0 +1,119 @@
+.left .nav-trigger {
+display: none; }
+.left .menu-icon {
+display: none; }
+@media screen and (max-width: 1000px) {
+.right {
+max-width: 650px;
+}
+.post .body pre code {
+max-width: 600px;
+}
+}
+@media screen and (max-width: 750px) {
+body, html {height: 100%;}
+code {max-width: 100%;}
+html, body, p, th, td, li {
+font-size: medium !important;
+}
+.right {
+width: 95%;
+max-width: 100%;
+margin-left: 0px;
+padding-right: 10px;
+padding-left: 10px;
+}
+.editable-edit {
+position: absolute;
+margin-left: -40px;
+padding: 8px 40px;
+}
+.editable {
+width: 100% !important;
+}
+.editbg {
+z-index: 0 !important;
+}
+.left {
+position: fixed;
+left: -300px;
+height: 100%;
+z-index: 1;
+margin-left: -20px;
+margin-top: 0px;
+}
+.left label[for="nav-trigger"] {
+display: block;
+cursor: pointer;
+position: absolute;
+z-index: 24;
+margin-top: 10px;
+margin-left: 310px;
+}
+.left .menu-icon {
+background-color: #333;
+display: block;
+float: left;
+border: 1px solid #e8e8e8;
+border-radius: 5px;
+width: 36px;
+height: 26px;
+line-height: 0;
+padding-top: 10px;
+text-align: center; }
+.left .menu-icon > svg path {
+  fill: #ccc; }
+.left input ~ .trigger {
+background-color: #eee;
+overflow: auto;
+position: absolute;
+width: 100%;
+left: 0px;
+padding-top: 100px;
+margin-top: -100px;
+z-index: 20;
+clear: both;
+display: block;
+height: 100%;
+padding-left: 25px;
+padding-right: 30px;
+transition: 0.3s all cubic-bezier(0.77, 0, 0.175, 1);
+border-right: 2px solid #eee;
+}
+.left input:checked ~ .trigger {
+box-shadow: 0px 0px 30px #999;
+left: 310px;
+}
+.lastcomments {
+background-color: transparent;
+}
+.lastcomments .lastcomment {
+font-size: 85% !important;
+}
+.ae-ui .ae-toolbar-add {
+left: 0px !important;
+}
+.post {
+min-width: 300px;
+}
+.post .body pre {
+width: 100%;
+}
+.post .body pre code {
+max-width: 100%;
+padding: 5px 5px;
+white-space: pre-wrap;
+}
+.post .body code {
+max-width: 100%;
+white-space: pre-wrap;
+}
+
+}
+
+/* Fix publish bar */
+@media screen and (max-width: 410px) {
+.publishbar small {
+display: none;
+}
+}