frontend: real world movement

2025-01-16 14:23:54 +01:00
parent 66ce257198
commit 11c55a17ea
46 changed files with 1277 additions and 563 deletions
--- a/frontend/src/lib/css/bootstrap-custom.scss
+++ b/frontend/src/lib/css/bootstrap-custom.scss
@@ -0,0 +1,151 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+
+// Core variables
+$theme-colors: (
+  "primary": #d43aff,
+  "secondary": #595b5c,
+  "success": #00b7ef,
+  "warning": rgb(225 29 72),
+  "danger": #eb5424,
+  "light": #9b9b9b,
+  "dark": #2f2f2f,
+);
+
+// Typography
+$font-family-base: "Quicksand", sans-serif;
+$font-family-monospace: "Roboto Mono", monospace;
+$font-size-base: 1rem;
+$line-height-base: 1.8;
+$headings-font-weight: normal;
+$headings-color: #fff;
+
+// Body
+$body-bg: black;
+$body-color: #9b9b9b;
+
+// Links
+$link-color: #00b7ef;
+$link-decoration: none;
+$link-hover-decoration: underline;
+
+// Buttons
+$btn-padding-y: 1.125rem; // 18px
+$btn-padding-x: 1.75rem; // 28px
+$btn-font-weight: 500;
+$btn-letter-spacing: 1px;
+$btn-border-width: 1px;
+$btn-transition: all 0.3s ease-in-out;
+
+// Forms
+$input-bg: #494848;
+$input-color: white;
+$input-border-color: #494848;
+$input-border-radius: 6px;
+$input-padding-y: 0.625rem; // 10px
+$input-padding-x: 0.625rem; // 10px
+$input-font-family: $font-family-monospace;
+$input-font-size: 1rem;
+$input-focus-border-color: lighten($input-border-color, 10%);
+$input-focus-box-shadow: none;
+
+// Cards
+$card-bg: #2f2f2f;
+$card-border-radius: 3px;
+$card-border-width: 0;
+$card-spacer-y: 1.25rem;
+$card-spacer-x: 1.25rem;
+
+// Modals
+$modal-content-bg: #2f2f2f;
+$modal-header-border-color: #595b5c;
+$modal-footer-border-color: #595b5c;
+
+// Navbar
+$navbar-dark-color: #9b9b9b;
+$navbar-dark-hover-color: #fff;
+$navbar-padding-y: 1rem;
+$navbar-nav-link-padding-x: 1rem;
+
+// Utilities
+$border-radius: 3px;
+$border-radius-lg: 6px;
+$box-shadow: none;
+
+// Custom utility classes
+.text-uppercase {
+  letter-spacing: 1px;
+}
+
+// Custom button styles
+.btn {
+  text-transform: uppercase;
+
+  &-dark {
+    @include button-variant(transparent, #595b5c);
+
+    &:hover {
+      border-color: #fff;
+      background-color: transparent;
+    }
+  }
+
+  &-primary {
+    &:hover {
+      background-color: darken(#d43aff, 5%);
+    }
+  }
+}
+
+// Custom input styles
+.form-control {
+  &:focus {
+    background-color: lighten($input-bg, 5%);
+  }
+}
+
+html {
+  padding: 0 30px;
+}
+
+body {
+  max-width: 1200px;
+  margin: 5em auto 0 auto;
+}
+
+h2 {
+  margin: 0 0 45px 0;
+  font-size: 36px;
+}
+
+h3 {
+  margin: 0 0 2rem 0;
+  font-size: 32px;
+}
+
+p {
+  margin: 0 0 45px;
+}
+
+ul {
+  margin: 0 0 32px;
+}
+
+li strong {
+  color: #fff;
+}
+
+pre,
+code {
+  display: inline;
+  font-size: 16px;
+}
+
+// Override Bootstrap's link hover behavior
+a:hover {
+  text-decoration: none;
+  border-bottom-color: #00b7ef;
+}
+// Import Bootstrap after variable overrides
+@import "bootstrap/scss/bootstrap";