add footer

Author: integerQuant

.stylelintrc.json

@@ -7,7 +7,7 @@
         "ignore": ["consecutive-duplicates-with-different-values"]
       }
     ],
-    "selector-class-pattern": "^[a-z0-9]+(?:-[a-z0-9]+)*(?:__(?:[a-z0-9]+(?:-[a-z0-9]+)*))?$",
-    "no-duplicate-selectors": true
+    "selector-class-pattern": "^[a-z0-9]+(?:-[a-z0-9]+)*(?:__(?:[a-z0-9]+(?:-[a-z0-9]+)*))*(?:--[a-z0-9]+(?:-[a-z0-9]+)*)?$",
+    "no-duplicate-selectors": false
   }
 }

src/ui/App.css

@@ -24,8 +24,8 @@
     --input-border: #334155;
 
     /* slate-700 */
-    --accent-bg: rgb(39, 128, 211);
-    --accent-bg-hover: rgb(79, 158, 231);
+    --accent-bg: #2780d3;
+    --accent-bg-hover: #4f9ee7;
     --radius-lg: 1rem;
     --radius-md: 0.5rem;
     --radius-sm: 0.375rem;
@@ -60,6 +60,13 @@
     --track-bg: #2a2f45;
     --thumb-bg: var(--accent-bg);
 }
+@font-face {
+  font-family: "OCR-A";
+  src: url("/fonts/OCRa.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
 
 
 /* responsive tokens */
@@ -103,7 +110,7 @@ body {
     background-size: 100% 100%, auto, auto, auto, auto;
     background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
     background-attachment: fixed, fixed, fixed, fixed, fixed;
-    font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-family: "Space Grotesk", system-ui, -apple-system, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 /* =========================================
@@ -530,7 +537,6 @@ body {
     font-weight: 500;
     line-height: 1.2;
     color: #cbd5e1;
-    /* slate-300 */
     letter-spacing: -0.03em;
     display: flex;
     align-items: baseline;
@@ -550,8 +556,7 @@ body {
     position: relative;
     appearance: none;
     background-color: rgb(15 23 42 / 70%);
-    /* slate-900/70 */
-    color: #f8fafc;
+    color: #fff;
     border-radius: 0.6rem;
     border: 1px solid rgb(148 163 184 / 28%);
     min-height: 2.4rem;
@@ -573,7 +578,6 @@ body {
 .ui-select-button:hover {
     background-color: rgb(15 23 42 / 90%);
     border-color: rgb(226 232 240 / 40%);
-    /* slate-100/40 */
 }
 
 .ui-select-button:focus {
@@ -582,7 +586,6 @@ body {
     background-color: rgb(15 23 42 / 100%);
 }
 
-/* optional extra state hook if you want to style when open */
 .ui-select-button--open {
     border-color: var(--accent-bg);
 }
@@ -603,7 +606,6 @@ body {
 
 .ui-select-hint {
     color: #94a3b8;
-    /* slate-400 */
     font-size: 0.7rem;
     line-height: 1.2;
 }
@@ -632,15 +634,15 @@ body {
     top: calc(100% + 0.4rem);
     left: 0;
     min-width: 100%;
-    background-color: rgba(0, 0, 0, 0.603);
-    border: 1px solid rgb(148 163 184 / 28%);
+    background-color: hsl(0deg 0% 0% / 60.3%);
+    border: 1px solid hsl(215deg 20% 65% / 28%);
     border-radius: 0.6rem;
     padding: 0.4rem 0;
     max-height: 16rem;
     overflow-y: auto;
     box-shadow:
         0 24px 48px rgb(0 0 0 / 80%),
-        0 0 24px rgba(29, 29, 29, 0.3);
+        0 0 24px hsl(0deg 0% 11% / 30%);
     opacity: 0;
     pointer-events: none;
     transform: translateY(-4px) scale(0.98);
@@ -670,7 +672,7 @@ body {
 
 .ui-select-option.is-active,
 .ui-select-option:hover {
-    background-color: rgba(39, 128, 211, 0.589);
+    background-color: #2780d396;
     border-radius: .5rem;
 }
 
@@ -691,17 +693,6 @@ body {
     color: #94a3b8;
 }
 
-
-
-
-
-
-
-
-
-
-
-
 .tau-custom-wrapper[data-open="false"] {
     pointer-events: none;
 }
@@ -992,7 +983,6 @@ body {
 
 /* Accessibility: respect reduced motion */
 @media (prefers-reduced-motion: reduce) {
-
     .tau-custom-wrapper,
     .tau-custom-wrapper[data-open="true"],
     .tau-select-menu,
@@ -1020,19 +1010,20 @@ body {
 
 
 /* Container that holds the 6 fields in one centered row */
-.fieldsRow {
+.fields-row {
     display: flex;
     justify-content: center;
     align-items: flex-start;
     gap: 20px;
     flex-wrap: nowrap;
+
     /* single row */
 }
 
 
 
 /* Label text */
-.numberField__label {
+.number-field__label {
     font-size: 12px;
     color: #c7c7c7;
 }
@@ -1066,7 +1057,7 @@ body {
 
   /* Reset native styling for consistent theming */
   appearance: none;
-  -webkit-appearance: none;
+  appearance: none;
   background: transparent; /* we style the track pseudo-elements */
   padding: 0; /* avoid unexpected extra space */
   margin: 0;
@@ -1082,7 +1073,7 @@ body {
 }
 
 .number-field__range-vertical::-webkit-slider-thumb {
-  -webkit-appearance: none;
+  appearance: none;
   appearance: none;
   width: var(--thumb-size);
   height: var(--thumb-size);
@@ -1131,7 +1122,7 @@ body {
 .param-grid {
     width: 100%;
     border-radius: 1rem;
-    background-color: rgba(0, 0, 0, 0.342);
+    background-color: hsl(0deg 0% 0% / 34.2%);
     padding: 1rem 0;
     display: flex;
     flex-flow: row nowrap;
@@ -1159,7 +1150,7 @@ body {
     gap: 8px;
 }
 
-@media (max-width: 560px) {
+@media (width <= 560px) {
     .numberField {
         max-width: 3rem;
     }
@@ -1183,4 +1174,29 @@ body {
 
 .reset-label {
     font-weight: 700;
-}
+}
+
+footer {
+  display: flex;
+  justify-content: space-between;
+  background-color: #03030311;
+  align-items: center;
+  margin: 2rem 0;
+  border-top: 1px solid var(--border);
+  padding: 1rem;
+  color: var(--muted);
+  font-size: 14px;
+  font-family: "OCR-A";
+  border-radius: 1rem;
+  align-items: center;
+  backdrop-filter: blur(1px);
+  a {
+    color: inherit;
+    text-decoration: none;
+    font-weight: normal;
+    transition: color 0.15s ease-in-out;
+}
+    a:hover {
+        color: var(--accent-bg-hover);
+    }
+}

src/ui/App.tsx

@@ -5,6 +5,7 @@ import { latestByType, CurveType } from "../defaultParams";
 import TauPresets, { getPresetTenors, TauPresetKey } from "./TauPresets";
 import CurveTypeSelect from "./CurveTypeSelect";
 import FastCurveChart from "./FastCurveChart";
+import Footer from "./Footer";
 
 import "./App.css";
 
@@ -277,7 +278,9 @@ export default function App() {
             line up with anticipated policy moves or cycle turns.
           </p>
         </Section>
+        <Footer/>
       </div>
+      
     </div>
   );
 }

src/ui/Footer.tsx

@@ -0,0 +1,10 @@
+
+export default function Footer() {
+  return (
+    <footer className="site-footer container" id="contact">
+      <span>© {new Date().getFullYear()}       <a href="https://rmtb.dev" className="button">RMTB</a>
+</span>
+      <a href="mailto:rodrigomtorresb@gmail.com" className="button">get in touch</a>
+    </footer>
+  );
+}

src/ui/NumberField.tsx

@@ -32,7 +32,7 @@ export default function NumberField({
 
   return (
     <label className="numberField">
-      <span className="numberField__label">{label}</span>
+      <span className="number-field__label">{label}</span>
 
       <input
         className="number-field__number"