docs website: Add bigbutton

.docs/css/theme.css

@@ -23,6 +23,8 @@
 	--text-bright: #efefef;
 	--text-alt: #38871e;
 	
+	--shadow: hsla(0, 0%, 25%, 0.25);
+	
 	--highlight: hsl(353, 100%, 36%);
 }
 
@@ -121,7 +123,7 @@ a { font-weight: bold; }
 /* a:not(.nav) { color: hsl(208, 67%, 40%); }
 a:not(.nav):hover { color: hsl(214, 67%, 50%); }
 a:not(.nav):active, a:focus { color: hsl(214, 87%, 60%); } */
-a:not(.nav):visited { color: hsl(240, 77%, 60%); }
+a:not(.nav):not(.bigbutton):visited { color: hsl(240, 77%, 60%); }
 
 pre { page-break-inside: avoid; break-inside: avoid; }
 pre, code {
@@ -208,7 +210,6 @@ footer {
 	font-size: 3em;
 	color: var(--text-alt);
 }
-.bigbox :last-child { margin-bottom: 7em; }
 
 .features-large {
 	margin: 3em 0;
@@ -230,3 +231,37 @@ footer {
 .cssbox-gallery {
 	display: flex;
 }
+
+.bigbutton {
+	display: inline-block;
+	
+	margin: 0;
+	padding: 0.35em 0.45em;
+	border: 0;
+	border-radius: 0.25em;
+	
+	background: var(--bg-alt);
+	
+	color: var(--text-bright);
+	font-size: 1.25em;
+	text-decoration: none;
+	text-align: center;
+	
+	box-shadow: 0 0 0.5em var(--shadow);
+	
+	cursor: pointer;
+	transition: box-shadow 0.25s, transform 0.25s;
+}
+.bigbutton:hover {
+	box-shadow: 0 0.25em 0.65em var(--shadow);
+	transform: translateY(-0.25em);
+}
+.bigbutton:active {
+	box-shadow: 0 0 0.25em var(--shadow);
+	transform: translateY(0.1em);
+}
+.bigbutton.disabled {
+	filter: saturate(25%);
+	opacity: 0.75;
+	cursor: default;
+}

.docs/index.html

@@ -9,6 +9,7 @@ date: 2000-01-01
 	<h1>WorldEditAdditions</h1>
 	<p><em>Extra tools and commands to extend <a href="https://github.com/Uberi/Minetest-WorldEdit">WorldEdit</a> for <a href="https://www.minetest.net/">Minetest</a></em></p>
 	<p>If you can dream of it, it probably belongs here!</p>
+	<p><a href="#get-started" class="bigbutton">Get Started</a></p>
 </section>
 
 <section class="features-large">
@@ -49,7 +50,7 @@ date: 2000-01-01
 </section>
 
 <!-- Potentially we might want some inspiration from https://codepen.io/emared/pen/gWGBLR here -->
-<section class="cssbox-gallery">
+<section class="cssbox">
 	{% cssbox "images/gallery-a.jpeg" %}
 		A scene demonstrating <code>//replacemix</code>, <code>//ellipsoid</code>, <code>//layers</code>, <code>smoothadv</code> (aka <code>convolve</code> and <code>conv</code>), and <code>//floodfill</code> - all of which are provided by WorldEditAdditions.
 	{% endcssbox %}