Add quick links sections

src/index.html

@@ -25,10 +25,23 @@ title: Pepperminty Wiki
 	</div>
 </div>
 
+<section class="panel-small margin-top padding-medium">
+	<h2 id="quick-links">Quick Links</h2>
+	<div class="display-items">
+		<a class="action-button margin-narrow major" href="#features">Features</a>
+		<a class="action-button margin-narrow major" href="#screenshots">Screenshots</a>
+		<a class="action-button margin-narrow major" href="#download">Download</a>
+	</div>
+	<div class="display-items">
+		<a class="action-button margin-narrow major" href="https://starbeamrainbowlabs.com/labs/peppermint/__nightdocs/01-Welcome.html">Documentation</a>
+		<a class="action-button margin-narrow major" href="https://github.com/sbrl/Pepperminty-Wiki">Repository</a>
+		<a class="action-button margin-narrow major" href="https://starbeamrainbowlabs.com/labs/peppermint/build/">Read-Only Demo</a>
+	</div>
+</section>
 
 <!-- Feature list -->
 
-<h2 class="margin-top">Features</h2>
+<h2 class="margin-top" id="features">Features</h2>
 
 <div class="feature-list">
 	<figure class="feature">
@@ -113,7 +126,7 @@ title: Pepperminty Wiki
 
 <!-- Screenshots -->
 
-<h2 class="margin-top">Screenshots</h2>
+<h2 class="margin-top" id="screenshots">Screenshots</h2>
 
 <div class="double lean-left">
 	<img class="left margin-medium lift-from-page" src="static/images/page-dark.png" alt="Screenshot showing the dark theme and the menu off" />
@@ -121,6 +134,7 @@ title: Pepperminty Wiki
 	</div> -->
 	<div class="right centre padding-wide">
 		<p>A dark-theme comes built-in. By using the new <a href="https://caniuse.com/#feat=prefers-color-scheme"><code>prefers-color-scheme</code></a> CSS feature, it's enabled automatically based on your browser preference.</p>
+		<p>Pepperminty Wiki is accessible for users of assistive technologies too. It should be pretty great already, but any accessibility issues should be reported by <a href="https://github.com/sbrl/Pepperminty-Wiki/issues/new">opening an issue</a>.</p>
 	</div>
 </div>
 
@@ -152,7 +166,7 @@ title: Pepperminty Wiki
 <!-- Download -->
 
 <div class="feature-small">
-	<h2 class="margin-top">Download</h2>
+	<h2 class="margin-top" id="download">Download</h2>
 	
 	<div class="padding-horizontal centre-text">
 		<p>Download Pepperminty Wiki in the way that's best for you. Simply upload the <code>index.php</code> file you download to an empty directory on your PHP-enabled web server, and you're away!</p>
@@ -182,13 +196,7 @@ title: Pepperminty Wiki
 
 <!--
 	Things to add:
-	 - Download section: latest release, online downloader, docs for from source
 	 - Demo
-	 - Link to docs (at the top and further down?)
-	 - Link to repo
-	 - Latest version badges (probably near the top)
-	 - Screenshots (don't forget to demo the dark mode too)
-	 - A mention that we (should) be fully accessible - open an issue if there's something that could be improved
 -->
 
 <footer class="panel padding-wide-ntop">

src/static/css/main.css

@@ -35,6 +35,7 @@
 html, body {
 	margin: 0; padding: 0;
 	font-size: 100%;
+	scroll-behavior: smooth;
 }
 body {
 	background: var(--bg-back);
@@ -209,6 +210,7 @@ button, summary                     { cursor: pointer; }
 .margin-medium		{ margin: 2em;			}
 .margin-vertical	{ margin: 2em 0 2em 0;	}
 .margin-top			{ margin-top: 2em;		}
+.margin-narrow		{ margin: 1em;			}
 
 .padding-wide		{ padding: 3em;				}
 .padding-wide-ntop	{ padding: 1em 3em 3em 3em;	}
@@ -228,13 +230,12 @@ button, summary                     { cursor: pointer; }
 	grid-gap: 2em;
 	margin: 4em 2em 4em 2em;
 }
-.feature {
+.feature { margin: 0; /* We add the spacing with grid-gap in feature-list*/ }
+.feature:not(.mini) {
 	display: grid;
 	grid: auto / 1fr 3fr;
 	grid-gap: 0.5em;
 	align-items: center;
-	
-	margin: 0; /* We add the spacing with grid-gap in feature-list*/
 }
 .feature.vertical {
 	grid: auto auto / auto;
@@ -243,5 +244,11 @@ button, summary                     { cursor: pointer; }
 	display: block;
 	margin-bottom: 0.5em;
 }
+
+.display-items {
+	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
+}
 /* .feature img { float: left; } */
 /* .feature figcaption { flex: 1; } */