Toc tag mobile patch

README.md

@@ -1,10 +1,26 @@
 # ZeroBlog
 Demo for decentralized, self publishing blogging platform.
 
+<<<<<<< HEAD
 ## Screenshot
 
 ![Screenshot](http://i.imgur.com/diTYHcm.png) 
 
 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
+...
+ <link rel="stylesheet" href="css/all.css" />
++ <link rel="stylesheet" href="dark.css" />
+...
+```
+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.

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% }
+.meditor hr:first-of-type { display: block !important; position: absolute; margin: 0px; border-bottom: 1px dashed #DEDEDE; width: 100% }

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;

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;
-}
+}

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;
+}
+}