Basic styling on pages

static/site.css

@@ -0,0 +1,107 @@
+@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
+
+* {
+  --theme-color: #713c8c;
+  --theme-color-highlight: #9b52bf;
+}
+
+body {
+  margin: 0px;
+  font-family: "Quicksand", sans-serif;
+}
+nav {
+  padding: 5px;
+  border-bottom: solid 1px black;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+h1 {
+  margin: 0px;
+}
+h1 > a {
+  color: #000;
+  text-decoration: none;
+}
+nav > ul {
+  margin: 0px;
+  padding: 0px;
+  flex-grow: 1;
+  display: flex;
+  list-style: none;
+  justify-content: flex-end;
+}
+nav > ul > li > * {
+  padding: 5px;
+  margin: 0px 5px;
+}
+nav > ul > li.title > a {
+  border: none;
+  justify-self: start;
+}
+
+main {
+  padding: 1em;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  max-width: 400px;
+}
+.textinput {
+  display: inline-block;
+  padding: 6px;
+  border: solid 1px black;
+  border-radius: 8px;
+/*  max-width: 300px;*/
+}
+
+form {
+  padding: 1em;
+}
+
+form > * {
+  margin: 5px 0px;
+}
+
+form[action*=login] .textinput {
+  display: flex;
+
+  outline: solid 2px transparent;
+  transition: outline 0.2s;
+}
+form[action*=login] .textinput input {
+  flex-grow: 1;
+}
+form[action*=login] .textinput:focus-within {
+  outline: solid 2px var(--theme-color);
+}
+form[action*=login] .textinput span.prefix,
+form[action*=login] .textinput span.suffix {
+  user-select: none;
+  flex-basis: 1.5em;
+  text-align: center;
+}
+.textinput > input {
+  appearance: none;
+  border: none;
+}
+.textinput > input:focus-visible{
+  outline: none;
+}
+
+button, a.button {
+  padding: 5px;
+  border-radius: 10px;
+  border: none;
+  color: #fff;
+  background-color: var(--theme-color);
+  font-weight: bold;
+}
+
+button:hover, a.button:hover {
+  cursor: pointer;
+  background-color: var(--theme-color-highlight);
+}