Update website

Author: laurent22

Tools/build-website.js

@@ -77,6 +77,7 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
 		background-color: #eee;
 		border: 1px solid #ccc;
 		font-size: .85em;
+		word-break: break-all;
 	}
 	pre code {
 		border: none;
@@ -233,7 +234,7 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
 		display: none;
 	}
 	.footer {
-		padding-top: 1em;
+		padding: 2em;
 		border-top: 1px solid #d4d4d4;
 		margin-top: 2em;
 		color: gray;
@@ -259,6 +260,23 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
 		opacity: 1;
 	}
 
+	@media (min-width: 992px) {
+		.content{
+			display: flex;
+		}
+
+		#toc{
+			display: block!important;
+			align-self: flex-start;
+			width: 300px;
+			position: sticky; top: 20px; left: 0;            
+		}
+
+		.main{
+			width: calc(100% - 300px);
+		}
+	}
+
 	.bottom-links {
 		display: flex;
 		justify-content: center;
@@ -308,9 +326,13 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
 
 <div class="content">
 	{{{tocHtml}}}
+
+	<div class="main">
 `;
 
 const footerHtmlTemplate = `
+</div></div>
+
 <div class="footer">
 Copyright (c) 2016-YYYY Laurent Cozic
 </div>

docs/api/get_started/plugins/index.html

@@ -72,6 +72,7 @@
 		background-color: #eee;
 		border: 1px solid #ccc;
 		font-size: .85em;
+		word-break: break-all;
 	}
 	pre code {
 		border: none;
@@ -228,7 +229,7 @@
 		display: none;
 	}
 	.footer {
-		padding-top: 1em;
+		padding: 2em;
 		border-top: 1px solid #d4d4d4;
 		margin-top: 2em;
 		color: gray;
@@ -254,6 +255,23 @@
 		opacity: 1;
 	}
 
+	@media (min-width: 992px) {
+		.content{
+			display: flex;
+		}
+
+		#toc{
+			display: block!important;
+			align-self: flex-start;
+			width: 300px;
+			position: sticky; top: 20px; left: 0;            
+		}
+
+		.main{
+			width: calc(100% - 300px);
+		}
+	}
+
 	.bottom-links {
 		display: flex;
 		justify-content: center;
@@ -362,6 +380,8 @@
 </li>
 </ul>
 </div>
+
+	<div class="main">
 <h1>Getting started with plugin development<a name="getting-started-with-plugin-development" href="#getting-started-with-plugin-development" class="heading-anchor">🔗</a></h1>
 <p>In this article you will learn the basic steps to build and test a plugin in Joplin.</p>
 <p>## Setting up your environment</p>
@@ -430,6 +450,8 @@ <h1>Next steps<a name="next-steps" href="#next-steps" class="heading-anchor">
 	ga('send', 'pageview');
 </script>
 
+</div></div>
+
 <div class="footer">
 Copyright (c) 2016-2020 Laurent Cozic
 </div>

docs/api/overview/index.html

@@ -72,6 +72,7 @@
 		background-color: #eee;
 		border: 1px solid #ccc;
 		font-size: .85em;
+		word-break: break-all;
 	}
 	pre code {
 		border: none;
@@ -228,7 +229,7 @@
 		display: none;
 	}
 	.footer {
-		padding-top: 1em;
+		padding: 2em;
 		border-top: 1px solid #d4d4d4;
 		margin-top: 2em;
 		color: gray;
@@ -254,6 +255,23 @@
 		opacity: 1;
 	}
 
+	@media (min-width: 992px) {
+		.content{
+			display: flex;
+		}
+
+		#toc{
+			display: block!important;
+			align-self: flex-start;
+			width: 300px;
+			position: sticky; top: 20px; left: 0;            
+		}
+
+		.main{
+			width: calc(100% - 300px);
+		}
+	}
+
 	.bottom-links {
 		display: flex;
 		justify-content: center;
@@ -362,6 +380,8 @@
 </li>
 </ul>
 </div>
+
+	<div class="main">
 <h1>Extending Joplin<a name="extending-joplin" href="#extending-joplin" class="heading-anchor">🔗</a></h1>
 <p>Joplin provides a number of extension points to allow third-party applications to access its data, or to develop plugins.</p>
 <p>The two main extension points are:</p>
@@ -420,6 +440,8 @@ <h1>Extending Joplin<a name="extending-joplin" href="#extending-joplin" class="h
 	ga('send', 'pageview');
 </script>
 
+</div></div>
+
 <div class="footer">
 Copyright (c) 2016-2020 Laurent Cozic
 </div>

docs/api/references/development_mode/index.html

@@ -72,6 +72,7 @@
 		background-color: #eee;
 		border: 1px solid #ccc;
 		font-size: .85em;
+		word-break: break-all;
 	}
 	pre code {
 		border: none;
@@ -228,7 +229,7 @@
 		display: none;
 	}
 	.footer {
-		padding-top: 1em;
+		padding: 2em;
 		border-top: 1px solid #d4d4d4;
 		margin-top: 2em;
 		color: gray;
@@ -254,6 +255,23 @@
 		opacity: 1;
 	}
 
+	@media (min-width: 992px) {
+		.content{
+			display: flex;
+		}
+
+		#toc{
+			display: block!important;
+			align-self: flex-start;
+			width: 300px;
+			position: sticky; top: 20px; left: 0;            
+		}
+
+		.main{
+			width: calc(100% - 300px);
+		}
+	}
+
 	.bottom-links {
 		display: flex;
 		justify-content: center;
@@ -362,6 +380,8 @@
 </li>
 </ul>
 </div>
+
+	<div class="main">
 <h1>Development mode<a name="development-mode" href="#development-mode" class="heading-anchor">🔗</a></h1>
 <p>When experimenting with Joplin, for example when developing a plugin or trying a theme, you might want to run Joplin in development mode. Doing so means that Joplin will run using a different profile, so you can experiment without risking to accidentally change or delete your data.</p>
 <p>To enable Development Mode, open Joplin as normal, then go to <strong>Help =&gt; Copy dev mode command to clipboard</strong>. This will copy a command to the clipboard. Now close Joplin, and start it again in dev mode using the command you've just copied.</p>
@@ -401,6 +421,8 @@ <h1>Development mode<a name="development-mode" href="#development-mode" class="h
 	ga('send', 'pageview');
 </script>
 
+</div></div>
+
 <div class="footer">
 Copyright (c) 2016-2020 Laurent Cozic
 </div>