Add icons

src/_includes/layouts/main.html

@@ -15,6 +15,6 @@
 		{{ content }}
 		
 		<!---------------->
-		<link rel="stylesheet" href="/static/main.css" />
+		<link rel="stylesheet" href="static/main.css" />
 	</body>
 </html>

src/index.html

@@ -45,7 +45,7 @@ title: Pepperminty Wiki
 
 <div class="feature-list">
 	<figure class="feature">
-		<img alt="placeholder" src="https://starbeamrainbowlabs.com/images/placeholder/?width=256&amp;height=256" />
+		<img class="invert-when-dark" alt="placeholder" src="static/images/icon-file.png" />
 		<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 alt="placeholder" src="https://starbeamrainbowlabs.com/images/placeholder/?width=256&amp;height=256" />
+		<img class="invert-when-dark" alt="placeholder" src="static/images/icon-cloud-download.png" />
 		<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 alt="placeholder" src="https://starbeamrainbowlabs.com/images/placeholder/?width=256&amp;height=256" />
+		<img class="invert-when-dark" alt="placeholder" src="static/images/markdown.svg" />
 		<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 alt="placeholder" src="https://starbeamrainbowlabs.com/images/placeholder/?width=256&amp;height=256" />
+		<img class="invert-when-dark" alt="placeholder" src="static/images/icon-magnifying-glass.png" />
 		<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 alt="placeholder" src="https://starbeamrainbowlabs.com/images/placeholder/?width=256&amp;height=256" />
+		<img class="invert-when-dark" alt="placeholder" src="static/images/icon-clock.png" />
 		<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 alt="placeholder" src="https://starbeamrainbowlabs.com/images/placeholder/?width=256&amp;height=256" />
+		<img class="invert-when-dark" alt="placeholder" src="static/images/icon-image.png" />
 		<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 alt="placeholder" src="https://starbeamrainbowlabs.com/images/placeholder/?width=256&amp;height=256" />
+		<img class="invert-when-dark" alt="placeholder" src="static/images/icon-question-mark.png" />
 		<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 alt="placeholder" src="https://starbeamrainbowlabs.com/images/placeholder/?width=256&amp;height=256" />
+		<img class="invert-when-dark" alt="placeholder" src="static/images/icon-list-rich.png" />
 		<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,10 +110,10 @@ title: Pepperminty Wiki
 	</figure>
 	
 	<figure class="feature">
-		<img alt="placeholder" src="https://starbeamrainbowlabs.com/images/placeholder/?width=256&amp;height=256" />
+		<img class="invert-when-dark" alt="placeholder" src="static/images/icon-comment.png" />
 		<figcaption>
-			<strong>File upload</strong>
-			Upload images, videos, audio and more and embed them in your pages!
+			<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>
 		</figcaption>
 	</figure>
 </div>
@@ -199,9 +199,10 @@ title: Pepperminty Wiki
 <footer class="panel padding-wide-ntop">
 	<ol class="list-thin">
 		<li id="footnote-fulltext-search"><strong>Full-text search:</strong> Tested on an Intel® Core™ i7-7500U with 5 million words from Wikipedia spread across 2011 pages. Average search time for a single-word query that returned ~307 results was ~110ms.</li>
+		<li id="footnote-threaded-comments">The PHP <code>mail()</code> function is used to send email notifications. This requires PHP to be configured to send emails correctly.</li>
 	</ol>
 	<br />
 	<p class="centre-text">Created with ♥ by <a href="https://starbeamrainbowlabs.com/"><img class="logo medium" src="static/images/sbrl.png" alt="SBRL logo" aria-hidden="true" /> Starbeamrainbowlabs</a></p>
-	<p class="centre-text">Page content shown in screenshots <a href="https://starbeamrainbowlabs.com/blog/article.php?article=posts/375-next-gen-search-2-test-data.html">pulled</a> from <a href="https://dumps.wikimedia.org/">Wikipedia database dumps</a></p>
+	<p class="centre-text">Page content shown in screenshots <a href="https://starbeamrainbowlabs.com/blog/article.php?article=posts/375-next-gen-search-2-test-data.html">pulled</a> from <a href="https://dumps.wikimedia.org/">Wikipedia database dumps</a> | Icons from <a href="https://useiconic.com/open">Open Iconic</a></p>
 	<p class="centre-text"><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img class="logo" title="This website is licenced under the Creative Commons Attribution-ShareAlike 4.0 International License" alt="This website is licenced under Creative Commons Attribution-ShareAlike 4.0 International License" src="static/images/cc-by-sa.svg" /></a></p>
 </footer>

src/static/css/main.css

@@ -26,10 +26,12 @@
 		--shadow: rgba(5, 5, 5, 0.5);
 	}
 	
-	a { color: hsl(208, 67%, 67%); }
-	a:hover { color: hsl(214, 67%, 75%); }
-	a:active, a:focus { color: hsl(214, 87%, 85%); }
-	a:visited { color: hsl(264, 77%, 65%); }
+	a					{ color: hsl(208, 67%, 67%);	}
+	a:hover				{ color: hsl(214, 67%, 75%);	}
+	a:active, a:focus	{ color: hsl(214, 87%, 85%);	}
+	a:visited			{ color: hsl(264, 77%, 65%);	}
+	
+	.invert-when-dark	{ filter: invert(100%);			}
 }
 
 html, body {

src/static/images/markdown.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="208" height="128" viewBox="0 0 208 128"><rect width="198" height="118" x="5" y="5" ry="10" stroke="#000" stroke-width="10" fill="none"/><path d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"/><script xmlns="" type="text/javascript" id="useragent-switcher">navigator.__defineGetter__("userAgent", function() {return "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.9 Safari/537.36"})</script></svg>