Add android section

src/index.html

@@ -45,7 +45,7 @@ title: Pepperminty Wiki
 
 <div class="feature-list">
 	<figure class="feature">
-		<img class="invert-when-dark" alt="placeholder" src="static/images/icon-file.png" />
+		<img class="invert-when-dark" alt="" src="static/images/icon-file.png" aria-hidden="hidden" />
 		<figcaption>
 			<strong>No database</strong>
 			Simple flat file structure that scales to millions of words and 1000s of pages, and makes for easy backups too!
@@ -53,7 +53,7 @@ title: Pepperminty Wiki
 	</figure>
 	
 	<figure class="feature">
-		<img class="invert-when-dark" alt="placeholder" src="static/images/icon-cloud-download.png" />
+		<img class="invert-when-dark" alt="" src="static/images/icon-cloud-download.png" aria-hidden="hidden" />
 		<figcaption>
 			<strong>Simple installation</strong>
 			Just upload a single file to a clean directory on a PHP-enabled web server, and you're good to go!
@@ -61,7 +61,7 @@ title: Pepperminty Wiki
 	</figure>
 	
 	<figure class="feature">
-		<img class="invert-when-dark" alt="placeholder" src="static/images/markdown.svg" />
+		<img class="invert-when-dark" alt="" src="static/images/markdown.svg" aria-hidden="hidden" />
 		<figcaption>
 			<strong>Markdown syntax</strong>
 			Powered by <a href="https://parsedown.org/">Parsedown</a>, familiar <a href="https://www.markdownguide.org/">Markdown</a> syntax with helpful extensions can be used to format your pages. <!-- Power users can make use of the expressive templating syntax too for ultimate composability.-->
@@ -69,7 +69,7 @@ title: Pepperminty Wiki
 	</figure>
 	
 	<figure class="feature">
-		<img class="invert-when-dark" alt="placeholder" src="static/images/icon-magnifying-glass.png" />
+		<img class="invert-when-dark" alt="" src="static/images/icon-magnifying-glass.png" aria-hidden="hidden" />
 		<figcaption>
 			<strong>Full-text search</strong>
 			Find that obscure nugget of information easily with a performant full-text search engine <sup><a href="#footnote-fulltext-search">1</a></sup>!
@@ -77,7 +77,7 @@ title: Pepperminty Wiki
 	</figure>
 	
 	<figure class="feature">
-		<img class="invert-when-dark" alt="placeholder" src="static/images/icon-clock.png" />
+		<img class="invert-when-dark" alt="" src="static/images/icon-clock.png" aria-hidden="hidden" />
 		<figcaption>
 			<strong>Revision history</strong>
 			Accidentally delete an important part of a page? No worries. Just check the page revision history. Limited only by the size of your hard drive!
@@ -85,7 +85,7 @@ title: Pepperminty Wiki
 	</figure>
 	
 	<figure class="feature">
-		<img class="invert-when-dark" alt="placeholder" src="static/images/icon-image.png" />
+		<img class="invert-when-dark" alt="" src="static/images/icon-image.png" aria-hidden="hidden" />
 		<figcaption>
 			<strong>File upload</strong>
 			Upload images, videos, audio and more and embed them in your pages!
@@ -93,7 +93,7 @@ title: Pepperminty Wiki
 	</figure>
 	
 	<figure class="feature">
-		<img class="invert-when-dark" alt="placeholder" src="static/images/icon-question-mark.png" />
+		<img class="invert-when-dark" alt="" src="static/images/icon-question-mark.png" aria-hidden="hidden" />
 		<figcaption>
 			<strong>Inbuilt help page</strong>
 			Confused on how to use a feature? The inbuilt dynamic help page is here to help! From Markdown extension syntax to redirect pages, the help page will show you the ropes.
@@ -102,7 +102,7 @@ title: Pepperminty Wiki
 	</figure>
 	
 	<figure class="feature">
-		<img class="invert-when-dark" alt="placeholder" src="static/images/icon-list-rich.png" />
+		<img class="invert-when-dark" alt="" src="static/images/icon-list-rich.png" aria-hidden="hidden" />
 		<figcaption>
 			<strong>Page lists</strong>
 			Get an overview of the pages on your wiki with a page list. Tags are supported too, for easy logical categorisation of pages.
@@ -110,14 +110,34 @@ title: Pepperminty Wiki
 	</figure>
 	
 	<figure class="feature">
-		<img class="invert-when-dark" alt="placeholder" src="static/images/icon-comment.png" />
+		<img class="invert-when-dark" alt="" src="static/images/icon-comment.png" aria-hidden="hidden" />
 		<figcaption>
 			<strong>Threaded comments</strong>
-			Want to discuss a page's content? Per-page threaded comments are jujst the thing! Email notifications are sent to users verified email addresses <sup><a href="#footnote-threaded-comments">2</a></sup>
+			Want to discuss a page's content? Per-page threaded comments are just the thing! Email notifications are sent to users verified email addresses <sup><a href="#footnote-threaded-comments">2</a></sup>
 		</figcaption>
 	</figure>
 </div>
 
+<div class="panel-small double margin-vertical padding-medium">
+	<div class="left centre">
+		<img class="invert-when-dark" alt="" src="static/images/icon-phone.svg" />
+		TODO replace this with a screenshot
+	</div>
+	<div class="right">
+		<p><strong>Android App</strong></p>
+		<p>A native android client app enables browsing your wiki at speed on your phone!</p>
+		<p>It's a work in progress, so more features will be added incrementally.</p>
+		<div class="display-items margin-top">
+			<a class="margin-narrow" href="https://play.google.com/store/apps/details?id=com.sbrl.peppermint">
+				<img src="static/images/gplay.svg" alt="Get the app on Google Play" />
+			</a>
+			<a class="margin-narrow" href="https://github.com/sbrl/Pepperminty-Wiki-Client-Android">
+				<img class="invert-when-dark" src="static/images/github.svg" alt="App code on GitHub" />
+			</a>
+		</div>
+	</div>
+</div>
+
 <div class="feature-small panel padding-medium centre-text">
 	<p>And more! Check out the full <a href="https://starbeamrainbowlabs.com/labs/peppermint/__nightdocs/02-Features.html">feature list</a> for an extended list of supported features.</p>
 	<p>Don't see a feature you need? <a href="https://github.com/sbrl/Pepperminty-Wiki/issues/new">Open an issue</a>!</p>

src/static/images/github.svg

@@ -0,0 +1 @@
+<svg preserveAspectRatio="xMidYMid" version="1.1" width="64" height="64" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 3.1596)"><path d="m128 0c-70.684 0-128 57.307-128 128 0 56.554 36.676 104.53 87.535 121.46 6.3971 1.1849 8.7457-2.7767 8.7457-6.1576 0-3.0523-0.1187-13.135-0.17381-23.831-35.61 7.743-43.124-15.102-43.124-15.102-5.8227-14.795-14.212-18.729-14.212-18.729-11.614-7.9444 0.87541-7.7812 0.87541-7.7812 12.854 0.90297 19.622 13.191 19.622 13.191 11.416 19.569 29.944 13.911 37.249 10.641 1.1488-8.273 4.4661-13.92 8.1267-17.116-28.431-3.2367-58.318-14.212-58.318-63.259 0-13.975 5.0002-25.393 13.188-34.357-1.329-3.224-5.7103-16.243 1.24-33.874 0 0 10.749-3.4402 35.209 13.121 10.21-2.8361 21.16-4.2584 32.038-4.3071 10.878 0.04875 21.837 1.471 32.066 4.3071 24.431-16.561 35.165-13.121 35.165-13.121 6.9673 17.631 2.5838 30.65 1.2548 33.874 8.2073 8.964 13.174 20.382 13.174 34.357 0 49.163-29.944 59.988-58.447 63.157 4.5912 3.9722 8.6821 11.762 8.6821 23.704 0 17.127-0.14837 30.911-0.14837 35.127 0 3.4063 2.304 7.3976 8.7923 6.1406 50.831-16.944 87.461-64.908 87.461-121.44 0-70.694-57.309-128-128-128zm-80.061 182.34c-0.28191 0.63589-1.2824 0.82666-2.1938 0.39002-0.9284-0.41757-1.4498-1.2845-1.1488-1.9225 0.27555-0.65497 1.2781-0.83726 2.2044-0.39849 0.93052 0.41757 1.4604 1.293 1.1382 1.931zm6.2962 5.618c-0.61046 0.56595-1.8038 0.30311-2.6135-0.59138-0.83726-0.89237-0.99411-2.0857-0.37518-2.6602 0.62953-0.56595 1.7869-0.30099 2.6262 0.59138 0.83726 0.90297 1.0005 2.0878 0.36246 2.6602zm4.3195 7.1881c-0.78427 0.54475-2.0667 0.0339-2.8594-1.1043-0.78427-1.1382-0.78427-2.5033 0.01696-3.0502 0.79487-0.54686 2.0582-0.0551 2.8615 1.0747 0.78215 1.1573 0.78215 2.5224-0.01908 3.0798zm7.3051 8.3248c-0.7016 0.77368-2.196 0.56595-3.2897-0.48963-1.1192-1.0323-1.4308-2.4969-0.72704-3.2706 0.71008-0.77579 2.2129-0.55747 3.3151 0.48963 1.1107 1.0302 1.4498 2.5054 0.7016 3.2706zm9.4412 2.8104c-0.30947 1.0026-1.7487 1.4583-3.1985 1.0323-1.4477-0.43877-2.3952-1.613-2.1027-2.6262 0.30099-1.009 1.7466-1.4838 3.207-1.028 1.4456 0.43665 2.3952 1.6024 2.0942 2.622zm10.744 1.1921c0.03603 1.0556-1.1934 1.931-2.7153 1.9501-1.5304 0.0339-2.7683-0.8203-2.7852-1.8589 0-1.0662 1.2018-1.9331 2.7322-1.9586 1.5219-0.0297 2.7683 0.81818 2.7683 1.8674zm10.555-0.40461c0.18229 1.0302-0.87541 2.0878-2.3867 2.3698-1.4859 0.27132-2.8615-0.36457-3.0502-1.3862-0.18441-1.0556 0.89237-2.1133 2.3761-2.3867 1.5134-0.26284 2.8679 0.3561 3.0608 1.4032z" fill="#161614"/></g></svg>

src/static/images/gplay.svg

@@ -0,0 +1,11 @@
+<svg version="1.1" width="64" height="64" viewBox="0 0 1032 1032" xmlns="http://www.w3.org/2000/svg"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#A6A6A6;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st4{fill-rule:evenodd;clip-rule:evenodd;fill:url(#d);}
+	.st5{fill-rule:evenodd;clip-rule:evenodd;fill:url(#c);}
+	.st6{fill-rule:evenodd;clip-rule:evenodd;fill:url(#b);}
+	.st7{fill-rule:evenodd;clip-rule:evenodd;fill:url(#a);}
+	.st8{opacity:0.2;fill-rule:evenodd;clip-rule:evenodd;enable-background:new    ;}
+	.st9{opacity:0.12;fill-rule:evenodd;clip-rule:evenodd;enable-background:new    ;}
+	.st10{opacity:0.25;fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;enable-background:new    ;}</style><linearGradient id="d" x1="1682" x2="1624" y1="1340" y2="1310" gradientTransform="matrix(11.6 0 0 -22.6 -19053 30268)" gradientUnits="userSpaceOnUse"><stop stop-color="#00A0FF" offset="0"/><stop stop-color="#00A1FF" offset=".00657"/><stop stop-color="#00BEFF" offset=".26"/><stop stop-color="#00D2FF" offset=".512"/><stop stop-color="#00DFFF" offset=".76"/><stop stop-color="#00E3FF" offset="1"/></linearGradient><linearGradient id="c" x1="1713" x2="1607" y1="1275" y2="1275" gradientTransform="matrix(9.14 0 0 -7.7 -14653 10332)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE000" offset="0"/><stop stop-color="#FFBD00" offset=".409"/><stop stop-color="#FFA500" offset=".775"/><stop stop-color="#FF9C00" offset="1"/></linearGradient><linearGradient id="b" x1="1707" x2="1647" y1="1290" y2="1211" gradientTransform="matrix(15 0 0 -11.6 -24997 15543)" gradientUnits="userSpaceOnUse"><stop stop-color="#FF3A44" offset="0"/><stop stop-color="#C31162" offset="1"/></linearGradient><linearGradient id="a" x1="1661" x2="1688" y1="1366" y2="1330" gradientTransform="matrix(15 0 0 -11.6 -24997 15524)" gradientUnits="userSpaceOnUse"><stop stop-color="#32A071" offset="0"/><stop stop-color="#2DA771" offset=".0685"/><stop stop-color="#15CF74" offset=".476"/><stop stop-color="#06E775" offset=".801"/><stop stop-color="#00F076" offset="1"/></linearGradient><path class="st4" d="m71.3 15.8c-11.6 12.5-18.3 31.6-18.3 56.6v887c0 25 6.7 44.1 18.7 56.1l3.1 2.7 497-497v-11.1l-497-497z" fill="url(#d)"/><path class="st5" d="m737 687-166-166v-11.6l166-166 3.6 2.2 196 111c56.1 31.6 56.1 83.8 0 116l-196 111z" fill="url(#c)"/><path class="st6" d="m740 685-169-169-500 500c18.3 19.6 49 21.8 83.3 2.7l586-333" fill="url(#b)"/><path class="st7" d="m740 346-586-333c-34.3-19.6-65.1-16.9-83.3 2.7l500 499z" fill="url(#a)"/><path class="st8" d="m737 681-582 331c-32.5 18.7-61.5 17.4-80.2 0.4l-3.1 3.1 3.1 2.7c18.7 16.9 47.7 18.3 80.2-0.4l586-333z"/><path class="st9" d="m936 568-200 114 3.6 3.6 196-111c28.1-16 41.9-37 41.9-57.9-1.7 19.2-16 37.4-41.4 52.1z"/><path class="st10" d="m155 19.4 782 444c25.4 14.3 39.7 33 41.9 52.1 0-20.9-13.8-41.9-41.9-57.9l-782-444c-56.1-32.1-102-5.3-102 58.8v5.8c0-64.2 45.5-90.5 102-58.8z"/></svg>