Pull latetst changes

.gitignore

@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+.yarn
 dist
 dist-ssr
 *.local

.yarnrc.yaml

@@ -0,0 +1 @@
+nodeLinker: node-modules

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

assets/scss/includes/components/_challenge.scss

@@ -11,17 +11,28 @@
 
 [data-bs-theme="light"] .challenge-button {
   border: none;
-  box-shadow: 0 0 15px var(--bs-secondary);
+  box-shadow: 3px 3px 3px var(--bs-secondary);
 
   &.challenge-solved {
-    background-color: #29c830;
+    background-color: #6e192a;
 
     &:hover {
-      background-color: #37d63e;
+      background-color: #962239;
     }
   }
 }
 
+.challenge-tag {
+  background-color: #f22c54 !important;
+  font-size: 1rem;
+  color: #fff;
+  border-radius: 0;
+}
+
+.challenge-submit {
+  border-radius: 0;
+}
+
 [data-bs-theme="dark"] .challenge-button {
   border: none;
   background-color: var(--bs-gray-dark);
@@ -31,10 +42,28 @@
   }
 
   &.challenge-solved {
-    background-color: #29c830;
+    background-color: #6e192a;
 
     &:hover {
-      background-color: #37d63e;
+      background-color: #962239;
     }
   }
 }
+
+.modal-content {
+  border-radius: 0;
+  background-color: #1e1e1e;
+  color: #aaa;
+}
+
+.nav-tabs .nav-link {
+  border-radius: 0;
+}
+
+.btn-close {
+  color: #aaa;
+}
+
+.challenge-solves {
+  color: #aaa;
+}

assets/scss/includes/components/_graphs.scss

@@ -19,3 +19,7 @@
   min-height: 400px;
   display: block;
 }
+
+#score-graph > div > canvas, .challenge-charts{
+  background-color: #fff;
+}

assets/scss/includes/components/_table.scss

@@ -20,3 +20,11 @@
 .table > thead > th {
   white-space: nowrap;
 }
+
+.table tr {
+  color: #fff;
+}
+
+.table-striped > tbody > tr:nth-of-type(2n+1) > * {
+  color: #fff;
+}

assets/scss/includes/utils/_fonts.scss

@@ -1,12 +1,19 @@
 @use "~/@fontsource/lato/scss/mixins" as Lato;
 @use "~/@fontsource/raleway/scss/mixins" as Raleway;
+@use "~/@fontsource/unifont/scss/mixins" as Unifont;
+@use "~/@fontsource/press-start-2p/scss/mixins" as PressStart2P;
 
 // Include both normal and bold weights
 @include Lato.fontFace($fontDir: "../webfonts", $weight: 400);
 @include Lato.fontFace($fontDir: "../webfonts", $weight: 700);
 
 @include Raleway.fontFace($fontDir: "../webfonts");
 
+@include Unifont.fontFaceCustom($woffPath: "/themes/thc-theme/static/webfonts/unifont-latin-400-normal.woff");
+@include Unifont.fontFaceCustom($woff2Path: "/themes/thc-theme/static/webfonts/unifont-latin-400-normal.woff2");
+
+@include PressStart2P.fontFace($fontDir: "../webfonts");
+
 $fa-font-path: "../webfonts";
 @import "~/@fortawesome/fontawesome-free/scss/fontawesome.scss";
 @import "~/@fortawesome/fontawesome-free/scss/solid.scss";
@@ -15,9 +22,9 @@ $fa-font-path: "../webfonts";
 html,
 body,
 .container {
-  font-family: "Lato", sans-serif;
+  font-family: "Unifont", "Lato", sans-serif;
 }
 
 .jumbotron .container {
-  font-family: "Raleway", sans-serif;
+  font-family: "Press Start 2P", "Raleway", sans-serif;
 }

assets/scss/main.scss

@@ -17,13 +17,20 @@
 @use "includes/icons/award-icons";
 @use "includes/icons/flag-icons";
 
+body {
+  color: #c9c9c9;
+  background-color: #1f1f1f;
+  font-weight: 600;
+}
+
 h1,
 h2 {
   font-weight: 500;
   letter-spacing: 2px;
 }
 
 a {
+  color: #fff;
   text-decoration: none !important;
 }
 
@@ -53,3 +60,186 @@ select {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
   background-size: 8px 10px;
 }
+
+.navbar-dark .navbar-nav .nav-link {
+  color: #fff;
+  text-transform: uppercase;
+}
+
+.navbar-brand {
+  font-family: "Press Start 2P", cursive;
+}
+
+// HMM
+
+.input-filled-valid {
+  background-color: transparent !important;
+  border-color: #a3d39c;
+  box-shadow: 0 0 0 0.1rem #a3d39c;
+  transition:
+    background-color 0.3s,
+    border-color 0.3s;
+}
+
+.input-filled-invalid {
+  background-color: transparent !important;
+  border-color: #d46767;
+  box-shadow: 0 0 0 0.1rem #d46767;
+  transition:
+    background-color 0.3s,
+    border-color 0.3s;
+}
+
+.form-control {
+  background: transparent;
+  border: 1px dashed #ced4da;
+  border-radius: 0;
+  padding: 0.8em !important;
+  color: #aaa;
+  /* Behavior changed in Bootstrap v4.1.3. See https://github.com/twbs/bootstrap/issues/27629 */
+  height: auto !important;
+}
+
+.form-control:focus {
+  background-color: transparent;
+  border-color: #a3d39c;
+  box-shadow: 0 0 0 0.1rem #a3d39c;
+  color: #fff;
+  transition:
+    background-color 0.3s,
+    border-color 0.3s;
+}
+
+.btn-primary{
+  background-color: #f22c54cb;
+  border-color: #f22c54cb;
+}
+
+.btn-primary:hover {
+  background-color: #9e253f;
+  border-color: #9e253f;
+}
+
+.btn-primary:focus {
+  box-shadow: 0 0 0 .25rem #701427cb;
+}
+
+.nav-link {
+  color: #f22c54cb;
+}
+
+.nav-link:hover, .nav-link:focus {
+  color: #fff;
+}
+
+.nav-pills .nav-link.active {
+  background-color: #f22c54cb;
+  color: #fff;
+}
+
+.scanlines {
+  position:fixed;
+  pointer-events: none;
+  width: auto;
+  min-width: 100%;
+  height:100%;
+  z-index: 5;
+  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.08) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
+  background-size: 100% 2px, 3px 100%;
+}
+
+.flicker {
+  pointer-events: none;
+  position: fixed;
+  width: auto;
+  min-width: 100%;
+  height:100%;
+  z-index:15;
+  background: rgba(9, 8, 8, 0.1);
+  animation: flicker 0.3301s infinite;
+}
+
+@keyframes flicker {
+  0% {
+    opacity: 0.119;
+  }
+  5% {
+    opacity: 0.02841;
+  }
+  10% {
+    opacity: 0.35748;
+  }
+  15% {
+    opacity: 0.88852;
+  }
+  20% {
+    opacity: 0.9408;
+  }
+  25% {
+    opacity: 0.35088;
+  }
+  30% {
+    opacity: 0.22426;
+  }
+  35% {
+    opacity: 0.26418;
+  }
+  40% {
+    opacity: 0.09249;
+  }
+  45% {
+    opacity: 0.35312;
+  }
+  50% {
+    opacity: 0.89436;
+  }
+  55% {
+    opacity: 0.9574;
+  }
+  60% {
+    opacity: 0.19754;
+  }
+  65% {
+    opacity: 0.05086;
+  }
+  70% {
+    opacity: 0.12137;
+  }
+  75% {
+    opacity: 0.75791;
+  }
+  80% {
+    opacity: 0.89617;
+  }
+  85% {
+    opacity: 0.90183;
+  }
+  90% {
+    opacity: 0.20657;
+  }
+  95% {
+    opacity: 0.64125;
+  }
+  100% {
+    opacity: 0.78042;
+  }
+}
+
+.scanline {
+  position:fixed;
+  pointer-events: none;
+  top:0%;
+  width: auto;
+  min-width: 100%;
+  height: 2px;
+  z-index: 10;
+  background: rgba(0, 0, 0, .3);
+  opacity: 0.75;
+  animation: scanline 7.77s linear infinite;
+}
+
+@keyframes scanline {
+  0% {
+    top:99%;
+  }
+}

package.json

@@ -12,7 +12,9 @@
   "dependencies": {
     "@ctfdio/ctfd-js": "^0.0.14",
     "@fontsource/lato": "^4.5.3",
+    "@fontsource/press-start-2p": "^4.5.3",
     "@fontsource/raleway": "^4.5.3",
+    "@fontsource/unifont": "^4.5.3",
     "@fortawesome/fontawesome-free": "6.5.1",
     "@popperjs/core": "^2.11.4",
     "alpinejs": "^3.9.1",