Moved css, js files from includes to assets.

assets/css/dark.css

@@ -0,0 +1,49 @@
+/* Dark mode */
+@media (prefers-color-scheme:dark) {
+  body {
+    background-color: #2d383e;
+  }
+
+  h1, h2, h3 {
+    color: white;
+  }
+
+  header {
+    background-color: #182329;
+  }
+
+  main {
+    color: white;
+  }
+
+  .menu {
+    color: white;
+  }
+
+  a {
+    color: #CC99FF;
+  }
+
+  a:hover {
+    color: white;
+    text-decoration: underline;
+  }
+
+  .content {
+    background-color: #182329;
+  }
+
+  main p {
+    color: #C8C8C8;
+  }
+
+  section {
+    background-color: #182329;
+  }
+
+  footer {
+    background-color: #182329;
+    color: #C8C8C8;
+  }
+
+}

assets/css/light.css

@@ -0,0 +1,67 @@
+/* Light mode */
+@media (prefers-color-scheme:light) {
+  body {
+    background-color: #AAAAAA;
+    color: black;
+  }
+
+  h1, h2, h3 {
+    color: black;
+  }
+
+  header {
+    background-color: white;
+  }
+
+  main {
+    color: black;
+  }
+
+  .menu {
+    color: black;
+  }
+
+  .menu * {
+    color: black;
+  }
+
+  li a {
+    color: black;
+  }
+
+  li a:hover {
+    color: #CC99FF;
+    text-decoration: underline;
+  }
+
+  li a:visited {
+
+    /*color: blue;*/
+  }
+
+  .content {
+    background-color: white;
+  }
+
+  main p {
+    color: black;
+  }
+
+  main a, footer a {
+    color: black;
+  }
+
+  main a:hover, footer a:hover {
+    color: black;
+  }
+
+  section {
+    background-color: white;
+  }
+
+  footer {
+    background-color: white;
+    color: black;
+  }
+
+}

assets/css/stylesheet.css

@@ -0,0 +1,168 @@
+/* Quartznet - Main stylesheet */
+html, body {
+  margin: 0px;
+  padding: 0px;
+  border: 0px;
+  width:100%;
+  height:100vh;
+}
+
+h1, h2, h3 {
+  line-height: 1.2;
+}
+
+body {
+  background: url(/assets/textures/blue.jpg);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Symbol", "Segoe UI Emoji", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif;
+  font-size: 18px;
+  font-display: swap;
+  line-height: 1.8;
+}
+
+header {
+  min-height: 50px;
+  padding: 10px 0px;
+}
+
+.title {
+  font-size: 48px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+/* flexbox navbar test*/
+.menu {
+  padding-left: 0;
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.info {
+  flex: 1 1 100%;
+  font-size: 20px;
+  padding-left: 10px;
+  padding-right: 10px;
+  text-align: center;
+}
+
+.item {
+  flex: 0 1 100px;
+  font-size: 18px;
+  padding-left: 10px;
+  padding-right: 10px;
+  text-align: center;
+}
+
+li {
+  list-style-type: none;
+}
+
+li a:hover {
+  text-decoration: underline;
+}
+
+li a:visited {
+  text-decoration: underline;
+}
+
+/* Main content box */
+main {
+  margin-top: 30px;
+  margin-bottom: 30px;
+  margin-top: 30px;
+  min-height: 70vh;
+  /*Extra space to push footer to the bottom when there is not much content*/
+  min-height: calc(100vh - (60px + 215px));
+}
+
+h1, h2, h3 {
+  line-height: 1.2;
+}
+
+/* Different content box types*/
+section {
+  border-radius: 5px;
+  min-height: 380px;
+  margin-bottom: 20px;
+  padding: 20px;
+}
+
+/* Login test */
+.login-form {
+  margin: 0 auto;
+  width: 50%;
+}
+
+.form-control, .btn {
+  min-height: 38px;
+}
+
+.form-label-group {
+  position: relative;
+  margin-bottom: 1rem;
+}
+
+.form-label-group>input, .form-label-group>label {
+  padding: var(--input-padding-y) var(--input-padding-x);
+}
+
+.form-label-group>label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  margin-bottom: 0;  /* Override default `<label>` margin */
+  line-height: 1.5;
+  color: #495057;
+  border: 1px solid transparent;
+  border-radius: .25rem;
+  transition: all .1s ease-in-out;
+}
+
+.form-label-group input::-webkit-input-placeholder {
+  color: transparent;
+}
+
+.form-label-group input:-ms-input-placeholder {
+  color: transparent;
+}
+
+.form-label-group input::-ms-input-placeholder {
+  color: transparent;
+}
+
+.form-label-group input::-moz-placeholder {
+  color: transparent;
+}
+
+.form-label-group input::placeholder {
+  color: transparent;
+}
+
+.form-label-group input:not(:placeholder-shown) {
+  padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
+  padding-bottom: calc(var(--input-padding-y) / 3);
+}
+
+.form-label-group input:not(:placeholder-shown)~label {
+  color: #777;
+  font-size: 12px;
+  padding-top: calc(var(--input-padding-y) / 3);
+  padding-bottom: calc(var(--input-padding-y) / 3);
+}
+/*end login test */
+
+/* Footer at bottom of page */
+footer {
+  font-size: 18px;
+  height: 60px;
+  line-height: 60px;
+  text-align: center;
+  vertical-align: middle;
+}
+
+footer > p {
+  margin: 0 auto;
+  text-align: center;
+}