Big website changes (see full commit message for details)

- Moved navbar and footer styling to a seperate file
- New error page (only for dev server)
- Added BSON for Godot and set it as a featured project
- Changed featured projects layout
- Added header to homepage
- Added a scroll indicator to homepage
- Made links underlined
- Removed Twitter from Colormatic Studios links and added Colormatic Git

src/style/nav.scss

@@ -0,0 +1,186 @@
+@use "global.scss";
+
+nav {
+  display: grid;
+  grid-template-columns: 1fr min-content 1fr;
+  align-items: center;
+  padding: 12px;
+  border-bottom: solid 1px global.$text-color;
+  z-index: 1;
+
+  margin: 0 auto;
+  width: 95%;
+  box-sizing: border-box;
+  overflow-wrap: anywhere;
+}
+
+nav .nav-left {
+  justify-self: left;
+  grid-column: 1;
+}
+
+nav .nav-center {
+  justify-self: center;
+  grid-column: 2;
+}
+
+nav .nav-right {
+  justify-self: right;
+  grid-column: 3;
+}
+
+nav ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+}
+
+nav ul li {
+  display: grid;
+  justify-items: center;
+}
+
+nav a,
+nav button {
+  padding: 0 8px;
+  color: global.$text-color;
+  text-decoration: none;
+
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+}
+
+nav a.title {
+  font-size: 140%;
+  font-weight: bold;
+}
+
+nav img.colormatic-logo {
+  width: auto;
+  height: 40px;
+  padding: 4px;
+}
+
+nav button.menu-button {
+  background: none;
+  border: none;
+}
+
+nav .menu-button i {
+  font-size: 230%;
+  transform: translateY(-1px);
+  /*/
+   * Ugly hack to account for the fact that the menu icon is off-center
+   * (Bootstrap please fix)
+  /*/
+}
+
+nav .git-icon i {
+  font-size: 140%;
+}
+
+nav div.inline {
+  display: flex;
+}
+
+@media screen and (max-width: global.$mobile-width) {
+  nav {
+    padding: 6px 0;
+  }
+  nav .git-icon i {
+    font-size: 150%;
+  }
+  nav ul.responsive-hidden {
+    display: none;
+  }
+}
+
+/*/
+ * Navigation modal section
+/*/
+
+span.modalbg.hidden {
+  display: none;
+}
+
+span.modalbg {
+  position: fixed;
+  z-index: 1;
+  padding: 0;
+  margin: auto;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+span.modalbg div {
+  width: 50ch;
+  margin: 100px auto;
+  padding: 16px;
+
+  color: global.$text-color;
+  border-radius: 8px;
+  box-shadow: 1px 1px 8px #00000033;
+  background-color: #ffffffbb;
+  backdrop-filter: blur(5px);
+
+  animation-name: modal-animate-in;
+  animation-duration: 0.4s;
+}
+
+@keyframes modal-animate-in {
+  from {
+    transform: translate(0px, -300px);
+    opacity: 0;
+  }
+  to {
+    transform: translate(0px, 0px);
+    opacity: 1;
+  }
+}
+
+span.modalbg div button.close {
+  float: right;
+  width: min-content;
+  background: none;
+  border: none;
+  outline: none;
+  cursor: pointer;
+
+  font-size: 200%;
+  color: global.$text-color;
+}
+
+span.modalbg div ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+span.modalbg div ul li {
+  margin: 18px 12px;
+}
+
+span.modalbg div ul li a {
+  color: global.$text-color;
+  padding: 8px;
+  text-decoration: none;
+  font-size: 120%;
+}
+
+@media screen and (max-width: global.$mobile-width) {
+  span.modalbg div {
+    width: 30ch;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  span.modalbg div {
+    background-color: #000000bb;
+  }
+}