All: Improve styling and layout of notes in note viewer

ElectronClient/app/theme.js

@@ -81,15 +81,16 @@ const lightStyle = {
 
 	warningBackgroundColor: "#FFD08D",
 
-	codeColor: "#EFF0F1",
-	codeBorderColor: '#CBCBCB',
+	// codeColor: "#EFF0F1",
+	// codeBorderColor: '#CBCBCB',
 
-	htmlColor:'black', // Note: CSS in WebView component only supports named colors or rgb() notation
+	htmlColor:'#333333', // Note: CSS in WebView component only supports named colors or rgb() notation
 	htmlBackgroundColor: 'white',
-	htmlDividerColor: 'rgb(150,150,150)',
-	htmlLinkColor: 'blue',
-	htmlCodeColor: 'rgb(239, 240, 241)',
-	htmlCodeBorderColor: 'rgb(203, 203, 203)',
+	htmlDividerColor: 'rgb(230,230,230)',
+	htmlLinkColor: 'rgb(80,130,190)',
+	htmlCodeBackgroundColor: 'rgb(243, 243, 243)',
+	htmlCodeBorderColor: 'rgb(220, 220, 220)',
+	htmlCodeColor: 'rgb(0,0,0)',
 
 	editorTheme: "chrome",
 	codeThemeCss: "atom-one-light.css",
@@ -118,14 +119,14 @@ const darkStyle = {
 
 	warningBackgroundColor: "#CC6600",
 
-	codeColor: "#2F3031",
-	codeBorderColor: '#464646',
+	// codeColor: "#2F3031",
+	// codeBorderColor: '#464646',
 
 	htmlColor: 'rgb(220,220,220)', // Note: CSS in WebView component only supports named colors or rgb() notation
 	htmlBackgroundColor: 'rgb(29,32,36)',
-	htmlDividerColor: 'rgb(150,150,150)',
+	htmlDividerColor: 'rgb(230,230,230)',
 	htmlLinkColor: 'rgb(166,166,255)',
-	htmlCodeColor: 'rgb(47, 48, 49)',
+	htmlCodeBackgroundColor: 'rgb(47, 48, 49)',
 	htmlCodeBorderColor: 'rgb(70, 70, 70)',
 
 	editorTheme: 'twilight',
@@ -219,8 +220,10 @@ function themeStyle(theme) {
 		textAreaLineHeight: Math.round(17 * editorFontSize / 12),
 
 		// For WebView - must correspond to the properties above
-		htmlFontSize: Math.round(12 * zoomRatio) + 'px',
-		htmlLineHeight: Math.round(20 * zoomRatio) + 'px'
+		htmlFontSize: Math.round(16 * zoomRatio) + 'px',
+		htmlLineHeight: '1.6em', //Math.round(20 * zoomRatio) + 'px'
+
+		htmlCodeFontSize: '.9em',
 	}
 
 	let output = {};

ReactNativeClient/lib/MdToHtml.js

@@ -525,7 +525,13 @@ class MdToHtml {
 			b,strong{font-weight:bolder}small{font-size:80%}img{border-style:none}
 		`;
 
-		const fontFamily = 'sans-serif';
+		// TODO: Apply style changes to global-style (mobile)
+		// TODO: Find good font for Windows and Linux
+		// TODO: Check dark theme
+		// TODO: Check how it works with zoom
+		// TODO: Put more margin around
+
+		const fontFamily = "'Avenir', sans-serif";
 
 		const css = `
 			body {
@@ -539,26 +545,40 @@ class MdToHtml {
 				-webkit-print-color-adjust: exact;
 			}
 			p, h1, h2, h3, h4, h5, h6, ul, table {
-				margin-top: 0;
-				margin-bottom: 14px;
+				margin-top: .4em;
+				margin-bottom: .65em;
+			}
+			h1, h2, h3, h4, h5, h6 {
+				line-height: 1.5em;
 			}
 			h1 {
-				font-size: 1.5em;
+				font-size: 1.9em;
 				font-weight: bold;
+				border-bottom: 1px solid ` + style.htmlDividerColor + `;
+				padding-bottom: .3em;
 			}
 			h2 {
-				font-size: 1.2em;
+				font-size: 1.6em;
 				font-weight: bold;
+				border-bottom: 1px solid ` + style.htmlDividerColor + `;
+				padding-bottom: .1em;
 			}
-			h3, h4, h5, h6 {
+			h3 {
+				font-size: 1.4em;
+			}
+			h4, h5, h6 {
 				font-size: 1em;
 				font-weight: bold;
 			}
 			a {
-				color: ` + style.htmlLinkColor + `
+				color: ` + style.htmlLinkColor + `;
 			}
-			ul {
-				padding-left: 1.3em;
+			ul, ol {
+				padding-left: 0;
+				margin-left: 1.7em;
+			}
+			li {
+				margin-bottom: .4em;
 			}
 			li p {
 				margin-bottom: 0;
@@ -605,7 +625,7 @@ class MdToHtml {
 			}
 			hr {
 				border: none;
-				border-bottom: 1px solid ` + style.htmlDividerColor + `;
+				border-bottom: 2px solid ` + style.htmlDividerColor + `;
 			}
 			img {
 				max-width: 100%;
@@ -613,9 +633,12 @@ class MdToHtml {
 			}
 			.inline-code {
 				border: 1px solid ` + style.htmlCodeBorderColor + `;
-				background-color: ` + style.htmlCodeColor + `;
+				background-color: ` + style.htmlCodeBackgroundColor + `;
 				padding-right: .2em;
 				padding-left: .2em;
+				border-radius: .25em;
+				color: ` + style.htmlCodeColor + `;
+				font-size: ` + style.htmlCodeFontSize + `;
 			}
 
 			.highlighted-keyword {
@@ -679,6 +702,8 @@ class MdToHtml {
 
 		const output = styleHtml + renderedBody;
 
+		// console.info(output);
+
 		this.cachedContent_ = output;
 		this.cachedContentKey_ = cacheKey;
 		return this.cachedContent_;

readme/welcome/1_welcome_to_joplin.md

@@ -1,6 +1,6 @@
 # Welcome to Joplin! 🗒️
 
-Joplin is a free, open source note taking and to-do application, which helps you write and organise your notes, and synchronise them between your devices. The notes are searchable, can be copied, tagged and modified either from the applications directly or from your own text editor. The notes are in [Markdown format](https://joplin.cozic.net/#markdown). Joplin is available as **💻 desktop**, **📱 mobile** and **🔡 terminal** applications.
+Joplin is a free, open source note taking and to-do application, which helps you write and organise your notes, and synchronise them between your devices. The notes are searchable, can be copied, tagged and modified either from the applications directly or from your own text editor. The notes are in [Markdown format](https://joplin.cozic.net/#markdown). Joplin is available as **💻desktop**, **📱mobile** and **🔡terminal** applications.
 
 The notes in this notebook give an overview of what Joplin can do and how to use it. In general the three applications share roughly the same functionalities, and they are not the differences will be clearly indicated.