diff --git a/README.md b/README.md
index d7e726a..12ebc3f 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,26 @@
# ZeroBlog
Demo for decentralized, self publishing blogging platform.
+<<<<<<< HEAD
## Screenshot
ZeroNet address: http://127.0.0.1:43110/1BLogC9LN4oPDcruNz3qo1ysa133E9AGg8
+=======
+You can clone it from [here](zero://15mSYzsDxzarssqtV1pFPKqoCTaLdjVB2f/).
+
+If you want to upgrade your present ZeroBlog to this one. Backup your blog first, then edit the `content.json` in your blog root directory and change the `"cloned_from": "..."` to `"cloned_from": "15mSYzsDxzarssqtV1pFPKqoCTaLdjVB2f"` and sign it, then go to ZeroHello, from the site option (click the 3-dot button near your blog) and choose `Upgrade code`. That's all.
+>>>>>>> 2317591271c6f9d71fc1b67584cd2ecfb3b80917
+
+If you want to use the dark theme, open `index.html` in the zite root folder and add this line:
+
+```diff
+...
+
++
+...
+```
+Then sign and publish your zite.
To change the avatar replace the image /img/avatar.png with a new png, 60 by 60 pixels is recommended.
\ No newline at end of file
diff --git a/alloy-editor/meditor.css b/alloy-editor/meditor.css
index ddf2ab6..cb69106 100644
--- a/alloy-editor/meditor.css
+++ b/alloy-editor/meditor.css
@@ -8,7 +8,7 @@
.meditor-editmode.markdown { border-color: #9C27B0; background-color: #9C27B0; color: white; }
.meditor-markdown {
width: 100%; font-family: monospace; font-size: 14px; line-height: 1.6; box-sizing: border-box; padding: 10px;
- border: 1px solid #bbb; border-radius: 3px; box-shadow: inset 0px 4px 5px -5px rgba(0, 0, 0, 0.4); overflow: hidden;
+ border: 1px solid #bbb; border-radius: 3px; box-shadow: inset 0px 4px 5px -5px rgba(0, 0, 0, 0.4); overflow: auto;
}
.ae-icon-h2:before { content: "T"; display: inline-block; line-height: 0px; vertical-align: 3px; font-size: 23px; font-family: serif; }
@@ -27,4 +27,4 @@
h2.empty:before { content: "Heading"; color: #DDD; position: absolute; pointer-events: none; }
h3.empty:before { content: "Sub-Heading"; color: #DDD; position: absolute; pointer-events: none; }
-.meditor hr:first-of-type { display: block !important; position: absolute; margin: 0px; border-bottom: 1px dashed #DEDEDE; width: 100% }
\ No newline at end of file
+.meditor hr:first-of-type { display: block !important; position: absolute; margin: 0px; border-bottom: 1px dashed #DEDEDE; width: 100% }
diff --git a/css/Follow.css b/css/Follow.css
index df8f615..9bdb39a 100644
--- a/css/Follow.css
+++ b/css/Follow.css
@@ -13,7 +13,7 @@
.feed-follow {
font-size: 14px; display: inline-block; padding: 7px 14px; font-weight: normal; display: none;
- border-radius: 4px; border: 1px solid #EEE; border-bottom: 1px solid #DDD; transition: all 0.3s
+ border-radius: 4px; border: 1px solid #333; border-bottom: 1px solid #333; transition: all 0.3s
}
.feed-follow .text-follow, .feed-follow .text-following {
max-width: 0px; opacity: 0; overflow: hidden; display: inline-block; vertical-align: bottom; transition: all 0.3s; white-space: nowrap;
diff --git a/css/Menu.css b/css/Menu.css
index c450a2c..b526fb0 100644
--- a/css/Menu.css
+++ b/css/Menu.css
@@ -2,7 +2,7 @@
background-color: white; padding: 10px 0px; position: absolute; top: 0px; left: 0px; max-height: 0px; overflow: hidden; transform: translate(0px, -30px); pointer-events: none;
box-shadow: 0px 2px 8px rgba(0,0,0,0.3); border-radius: 2px; opacity: 0; transition: opacity 0.2s ease-out, transform 1s ease-out, max-height 0.2s ease-in-out;
}
-.menu.visible { opacity: 1; max-height: 350px; transform: translate(0px, 0px); transition: opacity 0.1s ease-out, transform 0.3s ease-out, max-height 0.3s ease-in-out; pointer-events: all }
+.menu.visible { opacity: 1; max-height: 350px; transform: translate(0px, 0px); transition: opacity 0.1s ease-out, transform 0.3s ease-out, max-height 0.3s ease-in-out; pointer-events: all; z-index: 110; }
.menu-item { display: block; text-decoration: none; color: black; padding: 6px 24px; transition: all 0.2s; border-bottom: none; font-weight: normal; padding-left: 30px; }
.menu-item-separator { margin-top: 5px; border-top: 1px solid #eee }
@@ -12,4 +12,4 @@
.menu-item.selected:before {
content: "L"; display: inline-block; transform: rotateZ(45deg) scaleX(-1);
font-weight: bold; position: absolute; margin-left: -17px; font-size: 12px; margin-top: 2px;
-}
\ No newline at end of file
+}
diff --git a/css/ZeroBlog.css b/css/ZeroBlog.css
index 9434101..e472e8f 100644
--- a/css/ZeroBlog.css
+++ b/css/ZeroBlog.css
@@ -1,18 +1,25 @@
/* Design based on medium */
+<<<<<<< HEAD
body { background-color: white; color: #333332; margin: 10px; padding: 0px; font-family: 'Roboto Light', sans-serif; height: 15000px; overflow: hidden; backface-visibility: hidden }
-body.loaded { height: auto; overflow: auto }
+body.loaded { height: auto; overflow: auto; max-width: 960px; margin-left: auto; margin-right: auto; }
+=======
+body {
+ background-color: white; color: #333332; margin: 10px; padding: 0px; font-family: 'Roboto Light', sans-serif; backface-visibility: hidden;
+ height: auto; overflow: auto; max-width: 960px; margin-left: auto; margin-right: auto
+}
+>>>>>>> aae7bb934016d38f8a2dc03f143fbfba11ef1c68
h1, h2, h3, h4 { font-family: 'Roboto Light', sans-serif; font-weight: normal; margin: 0px; padding: 0px }
h1 { font-size: 32px; line-height: 1.2em; font-weight: bold; letter-spacing: -0.5px; margin-bottom: 5px }
-h2 { margin-top: 2em }
-h3 { font-size: 24px; margin-top: 2em }
+h2 { font-size: 24px; margin-top: 2em }
+h3 { font-size: 18px; margin-top: 2em }
h1 + h2, h2 + h3 { margin-top: inherit }
p { margin-top: 0.9em; margin-bottom: 0.9em }
hr { margin: 20px 0px; border: none; border-bottom: 1px solid #eee; margin-left: auto; margin-right: auto; width: 120px; }
small { font-size: 80%; color: #999; }
-a { border-bottom: 1px solid #3498db; text-decoration: none; color: black; font-weight: bold }
+a { text-decoration: none; color: #3498db; font-weight: bold; word-wrap: break-word; }
a.nolink { border-bottom: none }
a:hover { color: #3498db }
@@ -78,23 +85,42 @@ a:hover { color: #3498db }
.icon-help.active { background-color: #EEE }
/* -- Left -- */
-
-.left { float: left; position: absolute; width: 220px; padding-left: 20px; padding-right: 20px; margin-top: 60px; text-align: right }
-.right { float: left; padding-left: 60px; margin-left: 240px; max-width: 700px; padding-right: 60px; padding-top: 60px }
-
+<<<<<<< HEAD
+
+.left { float: left; display: inline-block; width: 25%; margin-top: 60px; text-align: right }
+.right { display: inline-block; width: 75%; padding-top: 60px }
+.left .trigger { padding-left: 20px; }
+.right .posts, .right .post-full, .right .pager, .right .footer { padding-left: 60px; }
+=======
+.left, .footer { display: none }
+body.loaded .footer { display: block }
+body.loaded .left { float: left; display: inline-block; width: 280px; margin-top: 60px; text-align: right }
+.right { display: inline-block; width: calc(100% - 280px); padding-top: 60px }
+.left .trigger { padding: 0 20px; }
+.right .posts, .right .post-full, .right .pager, .right .footer { padding: 0 30px; }
+>>>>>>> aae7bb934016d38f8a2dc03f143fbfba11ef1c68
.left .avatar {
background-color: #F0F0F0; width: 60px; height: 60px; border-radius: 100%; margin-bottom: 10px;
background-position: center center; background-size: 70%; display: inline-block; image-rendering: pixelated;
}
.left h1 a.nolink { font-family: Tinos; display: inline-block; padding: 1px }
.left h1 a.editable-edit { float: none }
-.left h2 { font-size: 15px; font-family: Tinos; line-height: 1.6em; color: #AAA; margin-top: 14px; letter-spacing: 0.2px }
+.left h2 { font-size: 15px; font-family: Tinos; line-height: 1.6em; color: #AAA; margin-top: 14px; letter-spacing: 0.2px; color: #000; }
+.left p {
+ word-wrap: break-word;
+}
.left ul, .left li { padding: 0px; margin: 0px; list-style-type: none; line-height: 2em }
-.left hr { margin-left: 100px; margin-right: 0px; width: auto }
+.left hr { margin-left: 100px; margin-right: 0px; width: auto; border-bottom: 1px solid #333 }
/*.left .links { width: 230px; margin-left: -60px }*/
.left .links.editor { text-align: left !important }
+.tags-label { cursor: pointer; font-size: bold; color: #3498db; font-weight: bold; }
+
+<<<<<<< HEAD
.lastcomments { background-color: #FAFAFA; margin-left: -25px; padding-right: 15px; padding-bottom: 5px; padding-top: 3px; margin-top: 40px; margin-right: -15px; display: none }
+=======
+.lastcomments { background-color: transparent; margin-left: -25px; padding-right: 15px; padding-bottom: 5px; padding-top: 3px; margin-top: 40px; margin-right: -15px; display: none }
+>>>>>>> 4ae29cf5bae9d4a0daa836e26ab3c5b39a7d5fe3
.lastcomments h3 { margin-top: 20px; }
.lastcomments .lastcomment { font-size: 85%; margin-top: 20px; margin-bottom: 30px; margin-left: 20px; overflow: hidden }
.lastcomments .lastcomment .user_name { font-weight: bold; }
@@ -128,7 +154,7 @@ a:hover { color: #3498db }
.post .details .like .num { margin-left: 21px; color: #CCC; transition: all 0.3s }
.post .details .like:hover .num { color: #FA6C8D }
.post .details .like.loading { pointer-events: none; animation: bounce .3s infinite alternate ease-out; animation-delay: 1s; }
-.post .body { font-size: 21.5px; line-height: 1.6; font-family: Tinos; margin-top: 20px }
+.post .body { font-size: 15px; line-height: 1.6; font-family: Tinos; margin-top: 20px }
.post .body h1 { text-align: center; margin-top: 50px }
.post .body h1:before { content: " "; border-top: 1px solid #EEE; width: 120px; display: block; margin-left: auto; margin-right: auto; margin-bottom: 50px; }
@@ -139,15 +165,17 @@ a:hover { color: #3498db }
.post .body a img { margin-bottom: -8px }
.post .body img { max-width: 100% }
-.post .body table { border-collapse: collapse; margin-bottom: 10px; margin: auto }
+.post .body table { display: block; width: 100%; overflow: auto; border-spacing: 0; border-collapse: collapse; margin-bottom: 10px; margin: auto }
.post .body td, .post .body th { padding: 5px 10px; border: 1px solid #EEE; border-collapse: collapse; text-align: left }
code {
- background-color: #f5f5f5; border: 1px solid #ccc; padding: 0px 5px; overflow: auto; border-radius: 2px; display: inline-block;
+ background-color: #f5f5f5; border: 1px solid #ccc; padding: 0px 5px; overflow: auto; border-radius: 2px; display: inline;
color: #444; font-weight: normal; font-size: 13px; vertical-align: text-bottom; border-bottom-width: 2px;
+ max-width: 660px;
+ overflow: auto;
}
-.post .body pre { table-layout: fixed; width: auto; display: table; white-space: normal; }
-.post .body pre code { padding: 10px 20px; white-space: pre; max-width: 850px; display: block }
+.post .body pre { table-layout: fixed; width: auto; max-width: 100%; overflow: auto; white-space: normal; }
+.post .body pre code { padding: 10px 20px; white-space: pre; display: block; overflow: auto }
blockquote { border-left: 3px solid #333; margin-left: 0px; padding-left: 1em }
/*.post .more {
@@ -200,3 +228,16 @@ blockquote { border-left: 3px solid #333; margin-left: 0px; padding-left: 1em }
0% { transform: translateY(0); }
100% { transform: translateY(-3px); }
}
+
+@media screen and (min-width: 840px) {
+.page-post .left {
+ opacity: 0.1;
+ transition: 0.4s;
+}
+.page-post .left.tag-page {
+ opacity: 1;
+}
+.page-post .left:hover {
+ opacity: 1;
+}
+}
diff --git a/css/all.css b/css/all.css
index 206b982..ac142bf 100644
--- a/css/all.css
+++ b/css/all.css
@@ -115,12 +115,14 @@ input.text:focus, textarea:focus { border-color: #5FC0EA; outline: none; backgro
/* Design based on medium */
-body { background-color: white; color: #333332; margin: 10px; padding: 0px; font-family: 'Roboto Light', sans-serif; height: 15000px; overflow: hidden; -webkit-backface-visibility: hidden ; -moz-backface-visibility: hidden ; -o-backface-visibility: hidden ; -ms-backface-visibility: hidden ; backface-visibility: hidden }
-body.loaded { height: auto; overflow: auto }
+body {
+ background-color: white; color: #333332; margin: 10px; padding: 0px; font-family: 'Roboto Light', sans-serif; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden ;
+ height: auto; overflow: auto; max-width: 960px; margin-left: auto; margin-right: auto
+}
h1, h2, h3, h4 { font-family: 'Roboto Light', sans-serif; font-weight: normal; margin: 0px; padding: 0px }
h1 { font-size: 32px; line-height: 1.2em; font-weight: bold; letter-spacing: -0.5px; margin-bottom: 5px }
-h2 { margin-top: 2em }
-h3 { font-size: 24px; margin-top: 2em }
+h2 { font-size: 24px; margin-top: 2em }
+h3 { font-size: 18px; margin-top: 2em }
h1 + h2, h2 + h3 { margin-top: inherit }
p { margin-top: 0.9em; margin-bottom: 0.9em }
@@ -193,10 +195,12 @@ a:hover { color: #3498db }
.icon-help.active { background-color: #EEE }
/* -- Left -- */
-
-.left { float: left; position: absolute; width: 220px; padding-left: 20px; padding-right: 20px; margin-top: 60px; text-align: right }
-.right { float: left; padding-left: 60px; margin-left: 240px; max-width: 700px; padding-right: 60px; padding-top: 60px }
-
+.left, .footer { display: none }
+body.loaded .footer { display: block }
+body.loaded .left { float: left; display: inline-block; width: 25%; margin-top: 60px; text-align: right }
+.right { display: inline-block; width: 75%; padding-top: 60px }
+.left .trigger { padding: 0 20px; }
+.right .posts, .right .post-full, .right .pager, .right .footer { padding: 0 30px; }
.left .avatar {
background-color: #F0F0F0; width: 60px; height: 60px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100% ; margin-bottom: 10px;
background-position: center center; background-size: 70%; display: inline-block; image-rendering: pixelated;
@@ -209,6 +213,8 @@ a:hover { color: #3498db }
/*.left .links { width: 230px; margin-left: -60px }*/
.left .links.editor { text-align: left !important }
+.tags-label { cursor: pointer; font-size: bold; color: #3498db; font-weight: bold; }
+
.lastcomments { background-color: #FAFAFA; margin-left: -25px; padding-right: 15px; padding-bottom: 5px; padding-top: 3px; margin-top: 40px; margin-right: -15px; display: none }
.lastcomments h3 { margin-top: 20px; }
.lastcomments .lastcomment { font-size: 85%; margin-top: 20px; margin-bottom: 30px; margin-left: 20px; overflow: hidden }
@@ -243,7 +249,7 @@ a:hover { color: #3498db }
.post .details .like .num { margin-left: 21px; color: #CCC; -webkit-transition: all 0.3s ; -moz-transition: all 0.3s ; -o-transition: all 0.3s ; -ms-transition: all 0.3s ; transition: all 0.3s }
.post .details .like:hover .num { color: #FA6C8D }
.post .details .like.loading { pointer-events: none; -webkit-animation: bounce .3s infinite alternate ease-out; -moz-animation: bounce .3s infinite alternate ease-out; -o-animation: bounce .3s infinite alternate ease-out; -ms-animation: bounce .3s infinite alternate ease-out; animation: bounce .3s infinite alternate ease-out ; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; -ms-animation-delay: 1s; animation-delay: 1s ; }
-.post .body { font-size: 21.5px; line-height: 1.6; font-family: Tinos; margin-top: 20px }
+.post .body { font-size: 15px; line-height: 1.6; font-family: Tinos; margin-top: 20px }
.post .body h1 { text-align: center; margin-top: 50px }
.post .body h1:before { content: " "; border-top: 1px solid #EEE; width: 120px; display: block; margin-left: auto; margin-right: auto; margin-bottom: 50px; }
@@ -254,15 +260,20 @@ a:hover { color: #3498db }
.post .body a img { margin-bottom: -8px }
.post .body img { max-width: 100% }
-.post .body table { border-collapse: collapse; margin-bottom: 10px; margin: auto }
+.post .body table { display: block; width: 100%; overflow: auto; border-spacing: 0; border-collapse: collapse; margin-bottom: 10px; margin: auto }
.post .body td, .post .body th { padding: 5px 10px; border: 1px solid #EEE; border-collapse: collapse; text-align: left }
code {
background-color: #f5f5f5; border: 1px solid #ccc; padding: 0px 5px; overflow: auto; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px ; display: inline-block;
color: #444; font-weight: normal; font-size: 13px; vertical-align: text-bottom; border-bottom-width: 2px;
}
+<<<<<<< HEAD
.post .body pre { table-layout: fixed; width: auto; display: table; white-space: normal; }
.post .body pre code { padding: 10px 20px; white-space: pre; max-width: 850px; display: block }
+=======
+.post .body pre { table-layout: fixed; width: auto; max-width: 100%; overflow: auto; white-space: normal; }
+.post .body pre code { padding: 10px 20px; white-space: pre; display: block; overflow: auto }
+>>>>>>> aae7bb934016d38f8a2dc03f143fbfba11ef1c68
blockquote { border-left: 3px solid #333; margin-left: 0px; padding-left: 1em }
/*.post .more {
@@ -325,6 +336,19 @@ blockquote { border-left: 3px solid #333; margin-left: 0px; padding-left: 1em }
}
+@media screen and (min-width: 750px) {
+.page-post .left {
+ opacity: 0.1;
+ -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; -ms-transition: 0.4s; transition: 0.4s ;
+}
+.page-post .left.tag-page {
+ opacity: 1;
+}
+.page-post .left:hover {
+ opacity: 1;
+}
+}
+
/* ---- /1BLogC9LN4oPDcruNz3qo1ysa133E9AGg8/css/fonts.css ---- */
@@ -521,7 +545,135 @@ github.com style (c) Vasily Polovnyov
.icon-up { font-weight: normal !important; font-size: 15px; font-family: Tahoma; vertical-align: -4px; padding-right: 5px; display: inline; height: 1px; }
+<<<<<<< HEAD
/* ---- /1BLogC9LN4oPDcruNz3qo1ysa133E9AGg8/css/zoom.css ---- */
+=======
+/* ---- /1NvpGge1v1DVL2q1KRrejveqXj8zrj6HBW/css/mobile.css ---- */
+
+
+.left .nav-trigger {
+display: none; }
+.left .menu-icon {
+display: none; }
+@media screen and (max-width: 750px) {
+body, html {height: 100%;}
+code {max-width: calc(100% 10px);}
+html, body, p, th, td, li {
+font-size: medium !important;
+}
+.right {
+width: 100%;
+margin-left: 0px;
+max-width: 750px;
+}
+.left .trigger { padding: 0 10px; }
+.right .posts, .right .post-full, .right .pager, .right .footer {
+padding: 0 10px;
+}
+.editable-edit {
+position: absolute;
+margin-left: -40px;
+padding: 8px 40px;
+}
+.editable {
+width: 100% !important;
+}
+.editbg {
+z-index: 0 !important;
+}
+body.loaded .left {
+position: fixed;
+left: -300px;
+height: 100%;
+z-index: 1;
+margin-left: -20px;
+margin-top: 0px;
+width: 240px;
+}
+.left .trigger {
+ padding-left: 0;
+}
+.left label[for="nav-trigger"] {
+display: block;
+cursor: pointer;
+position: absolute;
+z-index: 24;
+margin-top: 10px;
+margin-left: 340px;
+}
+.left .menu-icon {
+background-color: #333;
+display: block;
+float: left;
+border: 1px solid #e8e8e8;
+-webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; 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;
+-webkit-transition: 0.3s all cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: 0.3s all cubic-bezier(0.77, 0, 0.175, 1); -o-transition: 0.3s all cubic-bezier(0.77, 0, 0.175, 1); -ms-transition: 0.3s all cubic-bezier(0.77, 0, 0.175, 1); transition: 0.3s all cubic-bezier(0.77, 0, 0.175, 1) ;
+border-right: 2px solid #eee;
+}
+.left input:checked ~ .trigger {
+-webkit-box-shadow: 0px 0px 30px #999; -moz-box-shadow: 0px 0px 30px #999; -o-box-shadow: 0px 0px 30px #999; -ms-box-shadow: 0px 0px 30px #999; 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: calc(100% - 10px);
+white-space: pre-wrap;
+word-wrap: break-word;
+}
+
+}
+
+/* Fix publish bar */
+@media screen and (max-width: 410px) {
+.publishbar small {
+display: none;
+}
+}
+
+
+
+/* ---- /1NvpGge1v1DVL2q1KRrejveqXj8zrj6HBW/css/zoom.css ---- */
+>>>>>>> aae7bb934016d38f8a2dc03f143fbfba11ef1c68
img[data-action="zoom"] {
diff --git a/css/mobile.css b/css/mobile.css
new file mode 100644
index 0000000..a605121
--- /dev/null
+++ b/css/mobile.css
@@ -0,0 +1,119 @@
+.left .nav-trigger {
+display: none; }
+.left .menu-icon {
+display: none; }
+@media screen and (max-width: 840px) {
+body, html {height: 100%;}
+code {max-width: calc(100% 10px);}
+html, body, p, th, td, li {
+font-size: medium !important;
+}
+.right {
+width: 100%;
+margin-left: 0px;
+max-width: 750px;
+}
+.left .trigger { padding: 0 10px; }
+.right .posts, .right .post-full, .right .pager, .right .footer {
+padding: 0 10px;
+}
+.editable-edit {
+position: absolute;
+margin-left: -40px;
+padding: 8px 40px;
+}
+.editable {
+width: 100% !important;
+}
+.editbg {
+z-index: 0 !important;
+}
+body.loaded .left {
+position: fixed;
+left: -300px;
+height: 100%;
+z-index: 1;
+margin-left: -20px;
+margin-top: 0px;
+width: 240px;
+}
+.left .trigger {
+ padding-left: 0;
+}
+.left label[for="nav-trigger"] {
+display: block;
+cursor: pointer;
+position: absolute;
+z-index: 24;
+margin-top: 10px;
+margin-left: 340px;
+}
+.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-y: auto;
+overflow-x: hidden;
+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: calc(100% - 10px);
+white-space: pre-wrap;
+word-wrap: break-word;
+}
+
+}
+
+/* Fix publish bar */
+@media screen and (max-width: 410px) {
+.publishbar small {
+display: none;
+}
+}
diff --git a/dark.css b/dark.css
new file mode 100644
index 0000000..9f9d594
--- /dev/null
+++ b/dark.css
@@ -0,0 +1,342 @@
+/* general */
+
+* {
+border-color: #333 !important;
+text-shadow: none !important;
+}
+a {
+border-bottom: none;
+color: #8899A6 !important;
+}
+a:hover {
+color: #ccc !important;
+}
+strong {
+color: #ccc;
+}
+textarea {
+outline: 1px solid #333 !important;
+background-color: #161616 !important;
+color: #ccc !important;
+}
+select {
+color: #ccc !important;
+}
+body {
+background-color: #1b1b1b !important;
+color: #ccc;
+}
+
+h1, h2, h3, h4, h5, h6 {
+color: #ccc;
+}
+hr {
+background-color: #333;
+border-bottom: 1px solid #333;
+border-right: 1px solid #333;
+}
+:root {
+background-color: transparent;
+}
+ th {
+ background-color: #303030 !important;
+ color: #ccc !important;
+}
+ tr {
+ background-color: #242424 !important;
+ color: #ccc !important;
+}
+ tr:hover {
+ background-color: #333 !important;
+}
+li:nth-child(2n+1) {
+background-color: transparent !important;
+}
+button {
+background: #333;
+color: #ccc;
+}
+ ::-moz-selection {
+ background: rgba(200,200,200,0.2) !important;
+ color: #ddd !important;
+ }
+ ::selection {
+ background: rgba(200,200,200,0.2) !important;
+ color: #ddd !important;
+ }
+::-webkit-input-placeholder {
+color: #999 !important;
+}
+::-moz-placeholder {
+color: #999 !important;
+opacity: 1;
+}
+
+/* notification */
+
+.notification > .body > .message > div {
+background-color: #444 !important;
+}
+.notification .body {
+background-color: #333;
+}
+.notification {
+color: #ccc;
+}
+.notification .input {
+background-color: #161616 !important;
+}
+.notification .select:hover, .notification .select.active {
+background-color: #444;
+}
+
+/* noscript page */
+.unsupported {
+background-color: #242424;
+box-shadow: 0px 0px 5px #888;
+}
+
+/* blacklist page */
+.content #details {
+background-color: #303030;
+box-shadow: none;
+}
+.content {
+color: #ccc;
+}
+
+/* code theme */
+
+.hljs-tag, .hljs-name, .hljs-attribute {
+color: #F0E68C;
+}
+.hljs-keyword, .hljs-selector-tag, .hljs-subst {
+color: #F0E68C;
+}
+.hljs-built_in, .hljs-builtin-name {
+color: #98FB98;
+}
+pre {
+color: #ddd;
+background-color: #333; /* '!important' affects NullPaste selected text color */
+border: 0px solid #060606 !important;
+overflow: auto;
+}
+pre code {
+color: #ddd;
+background-color: #333 !important;
+border: 0px solid #060606 !important;
+}
+.hljs {
+color: #ddd;
+background-color: #333 !important;
+border: 0px solid #060606 !important;
+}
+code {
+color: #FFA0A0;
+background-color: #333 !important;
+}
+.hljs-title, .hljs-section, .hljs-selector-id, .hljs-selector-class {
+color: #98FB98;
+}
+.hljs-meta {
+color: #98FB98;
+}
+.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr {
+color: #FFA0A0;
+}
+.hljs-string, .hljs-doctag {
+color: #FFA0A0;
+}
+.hljs-comment, .hljs-quote, .hljs-link {
+color: #87CEEB;
+}
+.hljs-symbol, .hljs-bullet {
+color: #FFA858;
+}
+.hljs-tag .hljs-title, .hljs-rules .hljs-property, .django .hljs-tag .hljs-keyword {
+color: #FFA0A0;
+}
+.hljs-string, .hljs-tag .hljs-value, .hljs-phpdoc, .hljs-dartdoc, .tex .hljs-formula {
+color: #ddd;
+}
+.hljs-title, .hljs-id, .scss .hljs-preprocessor {
+color: #F0E68C;
+}
+.hljs-number, .hljs-hexcolor, .ruby .hljs-constant {
+color: #FFA0A0;
+}
+.hljs-deletion {
+background: #422;
+}
+.hljs-addition {
+background: #242;
+}
+.hljs-winutils, .nginx .hljs-title, .hljs-subst, .hljs-request, .hljs-status {
+color: #ddd;
+}
+
+/* ZeroBlog */
+
+.comment-new .button-submit {
+background-color: #333;
+}
+.post {
+background-color: transparent;
+}
+.main a {
+color: #8899a6;
+}
+.feed-follow {
+background-color: #333;
+color: #ccc !important;
+}
+.feed-follow:hover {
+background-color: #444;
+}
+.feed-follow.following .text-following {
+color: #ccc;
+}
+.icon-feed {
+background-color: #999 !important;
+}
+.icon-feed::before {
+border-top: 2px solid #999 !important;
+border-right: 2px solid #999 !important;
+}
+.icon-feed::after {
+border-top: 2px solid #999 !important;
+border-right: 2px solid #999 !important;
+}
+.feed-follow .text-follow, .feed-follow .text-following {
+font-family: Roboto, Helvetica, Arial;
+}
+.post .body h1::before {
+border-top: 1px solid #333;
+}
+.ae-ui .ae-container-input input, .ae-ui .ae-container-input .ae-input {
+color: #ccc !important;
+}
+.ae-ui .ae-container-input {
+background-color: #242424 !important;
+}
+.ae-ui .ae-toolbar, .ae-ui [class^="ae-toolbar-"] {
+background-color: #333 !important;
+color: #ccc !important;
+}
+.tags-label { color: #8899a6; }
+.tags-label:hover { color: #ccc; }
+.post .body {
+font-size: 15px;
+color: #ccc;
+font-family: Helvetica,Arial,sans-serif;
+}
+.post table th {
+background-color: #242424;
+}
+.zoom-overlay {
+background: #101010;
+}
+.zoom-overlay-open .zoom-overlay {
+opacity: 0.9;
+}
+.left h2 {
+color: #ccc;
+}
+.comment, .lastcomments {
+background-color: #1b1b1b;
+}
+.lastcomments .lastcomment .details .postlink {
+border-bottom: 0px solid #BBB;
+}
+.post .details .comments-num .num {
+border-bottom: 0px solid #eee;
+color: #8899A6;
+}
+.bottombar {
+background-color: rgba(255,255,255,0.2);
+}
+.button.publish {
+background-color: #333;
+color: #bbb;
+}
+.button.publish:hover {
+background-color: #222;
+}
+.button {
+background-color: #333;
+color: #ccc;
+}
+ .button.is-hovered, .button:hover {
+ color: #ccc;
+background-color: #444;
+}
+
+.editbg {
+background-color: transparent;
+}
+.markdown-help {
+background-color: #242424;
+}
+@media screen and (max-width: 840px) {
+.left input ~ .trigger {
+background-color: #242424;
+box-shadow: none;
+}
+.left input:checked ~ .trigger {
+box-shadow: 0px 0px 30px #555;
+}
+.trigger .lastcomments {
+background-color: transparent;
+}
+}
+
+/* chromium scrollbar */
+
+@media screen and (min-width: 750px) {
+::-webkit-scrollbar
+ {
+ width: 6px !important;
+ height: 6px !important;
+ }
+ body::-webkit-scrollbar {
+ width: 6px !important;
+}
+
+ ::-webkit-scrollbar-thumb
+ {
+ height: 50px !important;
+ background-color: #666 !important;
+ border-radius: 3px !important;
+ }
+
+ ::-webkit-scrollbar-button
+ {
+ display: none !important;
+ }
+
+body::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
+}
+
+ ::-webkit-scrollbar-track
+ {
+ background-color: #999 !important;
+ }
+
+ ::-webkit-scrollbar-track-piece
+ {
+ background-color: #333 !important;
+ }
+
+ ::-webkit-scrollbar-corner
+ {
+ background-color: #999 !important;
+ }
+
+ ::-webkit-resizer
+ {
+ background-color: #666 !important;
+ }
+
+ }
diff --git a/dbschema.json b/dbschema.json
index 7945db3..9db07c6 100644
--- a/dbschema.json
+++ b/dbschema.json
@@ -14,7 +14,7 @@
"to_keyvalue": [ "cert_user_id" ]
},
"data.json": {
- "to_table": [ "post" ],
+ "to_table": [ "post" ,"tag"],
"to_keyvalue": [ "title", "description", "links", "next_post_id", "demo", "modified", "footer" ]
}
@@ -51,6 +51,15 @@
"indexes": ["CREATE UNIQUE INDEX post_uri ON post(json_id, post_id)", "CREATE INDEX post_id ON post(post_id)"],
"schema_changed": 1426195823
},
+ "tag": {
+ "cols":[
+ ["value","TEXT NOT NULL CHECK(length(value)!=0)"],
+ ["post_id","REFERENCES post(post_id)"],
+ ["json_id", "INTEGER REFERENCES json (json_id)"]
+ ],
+ "indexes": ["CREATE UNIQUE INDEX tag_post_uri ON tag(value,post_id)"],
+ "schema_changed": 1426195822
+ },
"post_vote": {
"cols": [
["post_id", "INTEGER"],
@@ -65,4 +74,4 @@
"Comments": "SELECT 'comment' AS type, date_added, post.title AS title, keyvalue.value || ': ' || comment.body AS body, '?Post:' || comment.post_id || '#Comments' AS url FROM comment LEFT JOIN json USING (json_id) LEFT JOIN json AS json_content ON (json_content.directory = json.directory AND json_content.file_name='content.json') LEFT JOIN keyvalue ON (keyvalue.json_id = json_content.json_id AND key = 'cert_user_id') LEFT JOIN post ON (comment.post_id = post.post_id)",
"Posts": "SELECT post_id AS event_uri, 'post' AS type, date_published AS date_added, title AS title, body AS body, '?Post:' || post_id AS url FROM post"
}
-}
\ No newline at end of file
+}
diff --git a/img/banner-s-dark.png b/img/banner-s-dark.png
new file mode 100644
index 0000000..a89ecba
Binary files /dev/null and b/img/banner-s-dark.png differ
diff --git a/img/banner-s.png b/img/banner-s.png
new file mode 100644
index 0000000..956229a
Binary files /dev/null and b/img/banner-s.png differ
diff --git a/index.html b/index.html
index 8366034..f0dd1b2 100644
--- a/index.html
+++ b/index.html
@@ -46,6 +46,18 @@
+
+
+
+
@@ -53,6 +65,13 @@
+
+
+
+
+
-
+
+