get started on the signup form

content/pages/signup.md

@@ -13,3 +13,10 @@ thank you and gosh bless.
 Please ensure that you have read the <a href="/pages/conduct/"><b>Code of Conduct</b></a> before you sign up. Thank you!
 </div>
 
+<script src="https://unpkg.com/htmx.org@1.5.0"></script>
+
+To begin the form, press start.
+
+<a class="button" href="#one" hx-push-url="true" hx-get="/signup-pages/one.html" hx-target="#content">
+start!
+</a>

public/elasticlunr.min.js

@@ -1,6 +1,6 @@
 /**
  * elasticlunr - http://weixsong.github.io
- * Lightweight full-text search engine in Javascript for browser search and offline search. - 0.9.6
+ * Lightweight full-text search engine in Javascript for browser search and offline search. - 0.9.5
  *
  * Copyright (C) 2017 Oliver Nightingale
  * Copyright (C) 2017 Wei Song

sass/main.scss

@@ -113,6 +113,47 @@ a:hover {
     background: #faecc0;
 }
 
+.button {
+    background: #292828;
+    border: 2px solid #3B4552;
+    border-radius: 4px;
+    box-shadow: 0px 2px 0px #3B4552;
+
+    padding: 2px 18px;
+
+    color: #d8d8d8;
+    font-size: 1em;
+    font-weight: bold;
+}
+.button:active {
+    box-shadow: 0px #3B4552;
+}
+
+.button.htmx-request {
+    opacity: .5;
+    transition: opacity 100ms ease-in-out;
+}
+
+.big {
+    font-size: 4em;
+    font-weight: 100;
+}
+
+label {
+    font-weight: bold;
+}
+input {
+    background: #292828;
+    border: 2px solid #3B4552;
+    border-radius: 4px;
+
+    padding: 2px 8px;
+    margin: 8px 0; 
+
+    color: #d8d8d8;
+    font-size: 1em;
+    font-weight: bold; 
+}
 
 /* fonts start here */
 

static/signup-pages/one.html

@@ -0,0 +1,18 @@
+<div id="one" class="progress">
+    <em class="big">1</em> outta six
+</div>
+<p>
+    Let's get started, first off <b>pick a username</b>. 
+    Make sure it's clean enough to show on the front page.
+    If you're not happy with your choice, we can change it
+    for you later on.
+</p>
+
+<form>
+    <label for="uname">Username:</label><br>
+    <input type="text" id="uname" name="uname"><br>
+</form>
+
+<a class="button" href="#" hx-get="/signup-pages/two.html" hx-target="#content">
+    next
+</a>

static/signup-pages/two.html

@@ -0,0 +1 @@
+aaa

templates/page.html

@@ -5,7 +5,7 @@
     <div class="section-display">
         <div><h1 class="title">{{ page.title }}</h1></div>
     </div>
-    <div class="section-text">
+    <div class="section-text" id="content">
     <p><i class='bx bx-home-alt'></i><a href="/">go home</a></p>
         {{ page.content | safe }}
     </div>