Sync

resources/sass/_variables.scss

@@ -3,6 +3,10 @@
 // Variables should follow the `$component-state-property-size` formula for
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
+$font-family-sans-serif: "PT Sans", system-ui, -apple-system, "Segoe UI", Roboto,
+  Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+  "Noto Color Emoji" !default;
+
 // Color system
 
 // scss-docs-start gray-color-variables
@@ -17,6 +21,7 @@ $gray-700: #495057;
 $gray-800: #343a40;
 $gray-900: #212529;
 $black: #000;
+
 // scss-docs-end gray-color-variables
 
 // fusv-disable
@@ -46,6 +51,12 @@ $yellow: #ffc107;
 $green: #198754;
 $teal: #20c997;
 $cyan: #0dcaf0;
+$highlighter-yellow: #ccf62b;
+$highlighter-pink: #ff90ea;
+$highlighter-orange: #ff962a;
+$highlighter-blue: #507fff;
+$highlighter-purple: #952fff;
+
 // scss-docs-end color-variables
 
 // scss-docs-start colors-map
@@ -64,6 +75,11 @@ $colors: (
   "white": $white,
   "gray": $gray-600,
   "gray-dark": $gray-800,
+  "highlighter-yellow": $highlighter-yellow,
+  "highlighter-pink": $highlighter-pink,
+  "highlighter-orange": $highlighter-orange,
+  "highlighter-blue": $highlighter-blue,
+  "highlighter-purple": $highlighter-purple,
 );
 // scss-docs-end colors-map
 
@@ -298,7 +314,7 @@ $cyans: (
 // fusv-enable
 
 // scss-docs-start theme-color-variables
-$primary: $blue;
+$primary: $highlighter-blue;
 $secondary: $gray-600;
 $success: $green;
 $info: $cyan;
@@ -310,7 +326,7 @@ $dark: $gray-900;
 
 // scss-docs-start theme-colors-map
 $theme-colors: (
-  "primary": $primary,
+  "primary": $highlighter-purple,
   "secondary": $secondary,
   "success": $success,
   "info": $info,
@@ -320,3 +336,15 @@ $theme-colors: (
   "dark": $dark,
 );
 // scss-docs-end theme-colors-map
+
+// Highlighter colors map
+$highlighter-colors: (
+  "highlighter-yellow": $highlighter-yellow,
+  "highlighter-pink": $highlighter-pink,
+  "highlighter-orange": $highlighter-orange,
+  "highlighter-blue": $highlighter-blue,
+  "highlighter-purple": $highlighter-purple,
+);
+
+$theme-colors: map-merge($theme-colors, $highlighter-colors);
+$link-color: $highlighter-purple;

resources/sass/app-front.scss

@@ -0,0 +1,29 @@
+@import url(https://fonts.bunny.net/css?family=pt-sans:400,400i,700|black-ops-one:400|zilla-slab:400,700);
+
+@import "variables";
+
+@import "~bootstrap/scss/bootstrap";
+
+@import "~/bootstrap-icons/font/bootstrap-icons.css";
+
+@import "../css/app-front.css";
+
+.font-family-black-ops-one {
+  font-family: "Black Ops One", system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+.font-family-zilla-slab {
+  font-family: "Zilla Slab", system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+a {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

resources/sass/front-app.scss

@@ -1,7 +0,0 @@
-@import "variables";
-
-@import "~bootstrap/scss/bootstrap";
-
-@import "~/bootstrap-icons/font/bootstrap-icons.css";
-
-@import "../css/front-app.css";