mirror/Compass
1
0
Fork 0
mirror of https://github.com/CompassConnections/Compass.git synced 2026-04-04 23:03:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix colors

Browse Source
This commit is contained in:
MartinBraquet
2025-09-10 16:16:08 +02:00
parent 4632e68a00
commit f36ccf7bdc
5 changed files with 183 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/components/home/home.tsx
View File

@@ -1,7 +1,6 @@
import {useEffect} from "react";
import {Col} from "web/components/layout/col";
import {Button} from "web/components/buttons/button";
import {signupRedirect} from "web/lib/util/signup";
import {SignUpButton} from "web/components/nav/love-sidebar";
export function AboutBox(props: {
title: string
@@ -48,18 +47,15 @@ export function LoggedOutHome() {
return (
<>
<Col className="mb-4 gap-2 lg:hidden">
<Button
className="flex-1 fixed top-4 left-1/2 transform -translate-x-1/2 w-full"
color="gradient"
<SignUpButton
className="mt-4 flex-1 fixed bottom-[55px] w-full left-0 right-0 z-10 mx-auto px-4"
size="xl"
onClick={signupRedirect}
>
Sign up
</Button>
text="Sign up"
/>
{/*<SignUpAsMatchmaker className="flex-1"/>*/}
</Col>
<h1
className="pt-12 pb-2 text-7xl md:text-8xl xs:text-6xl font-extrabold max-w-4xl leading-tight xl:whitespace-nowrap md:whitespace-nowrap text-center">
className="pt-12 pb-2 text-7xl md:text-8xl xs:text-6xl font-extrabold leading-tight xl:whitespace-nowrap md:whitespace-nowrap text-center">
Don't Swipe.<br/>
<span id="typewriter"></span>
<span id="cursor" className="animate-pulse">|</span>
@@ -67,9 +63,9 @@ export function LoggedOutHome() {
<div className="py-8"></div>
<h3
className="text-2xl font-bold text-center">
A focused platform for real connections—built with purpose and speed.
Find people who share your values, not just your photos.
</h3>
<div className="w-full bg-gray-50 dark:bg-gray-900 py-8 mt-20">
<div className="w-full bg-gray-50 dark:bg-gray-950 py-8 mt-20">
<div className="max-w-6xl mx-auto px-4">
<div className="grid md:grid-cols-3 gap-8 text-center">
<AboutBox title="Radically Transparent" text="No algorithms. Every profile searchable."/>

2
web/components/love-page.tsx
View File

@@ -99,7 +99,7 @@ export function LovePage(props: {
const Profiles = { name: 'Profiles', href: '/', icon: SolidHomeIcon };
const ProfilesHome = { name: 'Profiles', href: '/', icon: HomeIcon };
const faq = { name: 'FAQ', href: '/md/faq', icon: QuestionMarkCircleIcon };
const faq = { name: 'FAQ', href: '/faq', icon: SolidQuestionIcon };
const About = { name: 'About', href: '/about', icon: SolidQuestionIcon };
const AboutQuestionMark = { name: 'About', href: '/about', icon: QuestionMarkCircleIcon };
const Signin = { name: 'Sign in', href: '/signin', icon: UserCircleIcon };

3
web/components/nav/love-bottom-nav-bar.tsx
View File

@@ -149,8 +149,7 @@ function NavBarItem(props: {
}
const currentBasePath = '/' + (currentPage?.split('/')[1] ?? '')
const isCurrentPage =
item.href != null && currentBasePath === item.href.split('?')[0]
const isCurrentPage = currentBasePath === item.href.split('?')[0]
return (
<Link

330
web/styles/globals.css
View File

@@ -3,152 +3,161 @@
@tailwind utilities;
@layer base {
html {
-webkit-tap-highlight-color: transparent;
}
:root {
/* Text / Ink Grey Scale */
--color-ink-0: 255 255 255; /* white */
--color-ink-50: 245 245 245;
--color-ink-100: 230 230 230;
--color-ink-200: 200 200 200;
--color-ink-300: 170 170 170;
--color-ink-400: 140 140 140;
--color-ink-500: 110 110 110;
--color-ink-600: 85 85 85;
--color-ink-700: 60 60 60;
--color-ink-800: 40 40 40;
--color-ink-900: 25 25 25;
--color-ink-950: 12 12 12;
--color-ink-1000: 0 0 0; /* black */
body {
font-family: "Crimson Pro", Georgia, "Times New Roman", Times, serif;
}
/* Background / Canvas Grey Scale */
--color-canvas-0: 255 255 255; /* white */
--color-canvas-50: 245 245 245;
--color-canvas-100: 230 230 230;
--color-canvas-200: 210 210 210;
--color-canvas-300: 190 190 190;
--color-canvas-400: 160 160 160;
--color-canvas-500: 130 130 130;
--color-canvas-600: 100 100 100;
--color-canvas-700: 75 75 75;
--color-canvas-800: 50 50 50;
--color-canvas-900: 30 30 30;
--color-canvas-950: 15 15 15;
--color-canvas-1000: 0 0 0; /* black */
button, input, label {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
--color-primary-950: 23 37 84; /* very dark navy */
--color-primary-900: 30 58 138;
--color-primary-800: 30 64 175;
--color-primary-700: 29 78 216;
--color-primary-600: 37 99 235;
--color-primary-500: 59 130 246; /* standard blue */
--color-primary-400: 96 165 250;
--color-primary-300: 147 197 253;
--color-primary-200: 191 219 254;
--color-primary-100: 219 234 254;
--color-primary-50: 239 246 255; /* very light blue */
html {
-webkit-tap-highlight-color: transparent;
}
--color-yes-0: 255 255 255;
--color-yes-50: 249 249 249;
--color-yes-100: 242 242 242;
--color-yes-200: 217 217 217;
--color-yes-300: 191 191 191;
--color-yes-400: 166 166 166;
--color-yes-500: 140 140 140;
--color-yes-600: 115 115 115;
--color-yes-700: 89 89 89;
--color-yes-800: 64 64 64;
--color-yes-900: 34 34 34;
--color-yes-950: 17 17 17;
--color-yes-1000: 0 0 0;
:root {
/* Text / Ink Grey Scale */
--color-ink-0: 255 255 255; /* white */
--color-ink-50: 245 245 245;
--color-ink-100: 230 230 230;
--color-ink-200: 200 200 200;
--color-ink-300: 170 170 170;
--color-ink-400: 140 140 140;
--color-ink-500: 110 110 110;
--color-ink-600: 85 85 85;
--color-ink-700: 60 60 60;
--color-ink-800: 40 40 40;
--color-ink-900: 25 25 25;
--color-ink-950: 12 12 12;
--color-ink-1000: 0 0 0; /* black */
--color-no-0: 255 255 255;
--color-no-50: 249 249 249;
--color-no-100: 242 242 242;
--color-no-200: 217 217 217;
--color-no-300: 191 191 191;
--color-no-400: 166 166 166;
--color-no-500: 140 140 140;
--color-no-600: 115 115 115;
--color-no-700: 89 89 89;
--color-no-800: 64 64 64;
--color-no-900: 34 34 34;
--color-no-950: 17 17 17;
--color-no-1000: 0 0 0;
/* Background / Canvas Grey Scale */
--color-canvas-0: 255 255 255; /* white */
--color-canvas-50: 245 245 245;
--color-canvas-100: 230 230 230;
--color-canvas-200: 210 210 210;
--color-canvas-300: 190 190 190;
--color-canvas-400: 160 160 160;
--color-canvas-500: 130 130 130;
--color-canvas-600: 100 100 100;
--color-canvas-700: 75 75 75;
--color-canvas-800: 50 50 50;
--color-canvas-900: 30 30 30;
--color-canvas-950: 15 15 15;
--color-canvas-1000: 0 0 0; /* black */
}
.dark {
color-scheme: dark;
--color-primary-950: 23 37 84; /* very dark navy */
--color-primary-900: 30 58 138;
--color-primary-800: 30 64 175;
--color-primary-700: 29 78 216;
--color-primary-600: 37 99 235;
--color-primary-500: 59 130 246; /* standard blue */
--color-primary-400: 96 165 250;
--color-primary-300: 147 197 253;
--color-primary-200: 191 219 254;
--color-primary-100: 219 234 254;
--color-primary-50: 239 246 255; /* very light blue */
--color-ink-1000: 255 255 255; /* white */
--color-ink-950: 250 250 250; /* #FAFAFA */
--color-ink-900: 242 242 242; /* #F2F2F2 */
--color-ink-800: 217 217 217; /* #D9D9D9 */
--color-ink-700: 191 191 191; /* #BFBFBF */
--color-ink-600: 166 166 166; /* #A6A6A6 */
--color-ink-500: 140 140 140; /* #8C8C8C */
--color-ink-400: 115 115 115; /* #737373 */
--color-ink-300: 89 89 89; /* #595959 */
--color-ink-200: 64 64 64; /* #404040 */
--color-ink-100: 34 34 34; /* #222222 */
--color-ink-50: 17 17 17; /* #111111 */
--color-ink-0: 0 0 0; /* black */
--color-yes-0: 255 255 255;
--color-yes-50: 249 249 249;
--color-yes-100: 242 242 242;
--color-yes-200: 217 217 217;
--color-yes-300: 191 191 191;
--color-yes-400: 166 166 166;
--color-yes-500: 140 140 140;
--color-yes-600: 115 115 115;
--color-yes-700: 89 89 89;
--color-yes-800: 64 64 64;
--color-yes-900: 34 34 34;
--color-yes-950: 17 17 17;
--color-yes-1000: 0 0 0;
--color-canvas-0: 32 30 37;
--color-canvas-50: 22 20 25;
--color-canvas-100: 46 41 51;
--color-no-0: 255 255 255;
--color-no-50: 249 249 249;
--color-no-100: 242 242 242;
--color-no-200: 217 217 217;
--color-no-300: 191 191 191;
--color-no-400: 166 166 166;
--color-no-500: 140 140 140;
--color-no-600: 115 115 115;
--color-no-700: 89 89 89;
--color-no-800: 64 64 64;
--color-no-900: 34 34 34;
--color-no-950: 17 17 17;
--color-no-1000: 0 0 0;
--color-primary-950: 239 246 255; /* very light blue */
--color-primary-900: 219 234 254; /* light blue */
--color-primary-800: 191 219 254;
--color-primary-700: 147 197 253;
--color-primary-600: 96 165 250;
--color-primary-500: 59 130 246; /* standard blue */
--color-primary-400: 37 99 235;
--color-primary-300: 29 78 216;
--color-primary-200: 30 64 175;
--color-primary-100: 30 58 138;
--color-primary-50: 23 37 84; /* very dark navy */
}
.dark {
color-scheme: dark;
--color-ink-1000: 255 255 255; /* white */
--color-ink-950: 250 250 250; /* #FAFAFA */
--color-ink-900: 242 242 242; /* #F2F2F2 */
--color-ink-800: 217 217 217; /* #D9D9D9 */
--color-ink-700: 191 191 191; /* #BFBFBF */
--color-ink-600: 166 166 166; /* #A6A6A6 */
--color-ink-500: 140 140 140; /* #8C8C8C */
--color-ink-400: 115 115 115; /* #737373 */
--color-ink-300: 89 89 89; /* #595959 */
--color-ink-200: 64 64 64; /* #404040 */
--color-ink-100: 34 34 34; /* #222222 */
--color-ink-50: 17 17 17; /* #111111 */
--color-ink-0: 0 0 0; /* black */
--color-canvas-0: 32 30 37;
--color-canvas-50: 22 20 25;
--color-canvas-100: 46 41 51;
--color-primary-950: 239 246 255; /* very light blue */
--color-primary-900: 219 234 254; /* light blue */
--color-primary-800: 191 219 254;
--color-primary-700: 147 197 253;
--color-primary-600: 96 165 250;
--color-primary-500: 59 130 246; /* standard blue */
--color-primary-400: 37 99 235;
--color-primary-300: 29 78 216;
--color-primary-200: 30 64 175;
--color-primary-100: 30 58 138;
--color-primary-50: 23 37 84; /* very dark navy */
--color-no-950: 255 255 255; /* white */
--color-no-900: 242 242 242;
--color-no-800: 217 217 217;
--color-no-700: 191 191 191;
--color-no-600: 166 166 166;
--color-no-500: 140 140 140;
--color-no-400: 115 115 115;
--color-no-300: 89 89 89;
--color-no-200: 64 64 64;
--color-no-100: 34 34 34;
--color-no-50: 17 17 17;
--color-no-0: 0 0 0; /* black */
--color-no-950: 255 255 255; /* white */
--color-no-900: 242 242 242;
--color-no-800: 217 217 217;
--color-no-700: 191 191 191;
--color-no-600: 166 166 166;
--color-no-500: 140 140 140;
--color-no-400: 115 115 115;
--color-no-300: 89 89 89;
--color-no-200: 64 64 64;
--color-no-100: 34 34 34;
--color-no-50: 17 17 17;
--color-no-0: 0 0 0; /* black */
--color-yes-950: 255 255 255; /* white */
--color-yes-900: 242 242 242;
--color-yes-800: 217 217 217;
--color-yes-700: 191 191 191;
--color-yes-600: 166 166 166;
--color-yes-500: 140 140 140;
--color-yes-400: 115 115 115;
--color-yes-300: 89 89 89;
--color-yes-200: 64 64 64;
--color-yes-100: 34 34 34;
--color-yes-50: 17 17 17;
--color-yes-0: 0 0 0; /* black */
--color-yes-950: 255 255 255; /* white */
--color-yes-900: 242 242 242;
--color-yes-800: 217 217 217;
--color-yes-700: 191 191 191;
--color-yes-600: 166 166 166;
--color-yes-500: 140 140 140;
--color-yes-400: 115 115 115;
--color-yes-300: 89 89 89;
--color-yes-200: 64 64 64;
--color-yes-100: 34 34 34;
--color-yes-50: 17 17 17;
--color-yes-0: 0 0 0; /* black */
}
}
}
@font-face {
font-family: 'emoji';
src: local('AppleColorEmoji') local('Segoe UI Emoji'),
local('Noto Color Emoji');
/* from official unicode range for emoji: https://util.unicode.org/UnicodeJsps/list-unicodeset.jsp?a=%5B%3AEmoji%3DYes%3A%5D%0D%0A&abb=on&esc=on&g=&i= */
/* but include zero width joiner and variant block selector, like 🏳️‍🌈 */
unicode-range: U+200D, U+FE0?, U+203C, U+2049, U+2122, U+2139, U+2194-2199,
font-family: 'emoji';
src: local('AppleColorEmoji'), local('Segoe UI Emoji'), local('Noto Color Emoji');
/* from official unicode range for emoji: https://util.unicode.org/UnicodeJsps/list-unicodeset.jsp?a=%5B%3AEmoji%3DYes%3A%5D%0D%0A&abb=on&esc=on&g=&i= */
/* but include zero width joiner and variant block selector, like 🏳️‍🌈 */
unicode-range: U+200D, U+FE0?, U+203C, U+2049, U+2122, U+2139, U+2194-2199,
U+21A9, U+21AA, U+231A, U+231B, U+2328, U+23CF, U+23E9-23F3, U+23F8-23FA,
U+24C2, U+25AA, U+25AB, U+25B6, U+25C0, U+25FB-25FE, U+2600-2604, U+260E,
U+2611, U+2614, U+2615, U+2618, U+261D, U+2620, U+2622, U+2623, U+2626,
@@ -176,57 +185,56 @@
}
@font-face {
font-family: 'icomoon';
src: url('../public/fonts/icomoon.eot?v49ui9#iefix')
format('embedded-opentype'),
font-family: 'icomoon';
src: url('../public/fonts/icomoon.eot?v49ui9#iefix') format('embedded-opentype'),
url('../public/fonts/icomoon.ttf?v49ui9') format('truetype'),
url('../public/fonts/icomoon.woff?v49ui9') format('woff'),
url('../public/fonts/icomoon.svg?v49ui9#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
unicode-range: U+1E40;
font-weight: normal;
font-style: normal;
font-display: block;
unicode-range: U+1E40;
}
[class^='icon-'],
[class*=' icon-'] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-mana_3:before {
content: '\1e40';
content: '\1e40';
}
/* For Webkit-inkd browsers (Chrome, Safari and Opera) */
.scrollbar-hide::-webkit-scrollbar {
display: none;
display: none;
}
/* For IE, Edge and Firefox */
.scrollbar-hide {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
text {
font-family: icomoon, var(--font-main), emoji, sans-serif;
font-family: icomoon, var(--font-main), emoji, sans-serif;
}
/* Style all headings globally */
h1, h2, h3, h4, h5, h6 {
font-family: 'Inter', sans-serif; /* Clean modern font */
font-weight: 600; /* Semi-bold for clarity */
/*font-family: 'Inter', sans-serif; !* Clean modern font *!*/
font-weight: 600; /* Semi-bold for clarity */
/*color: #111827; !* Near-black text for readability *!*/
line-height: 1.25;
margin-top: 1.5rem;
@@ -235,23 +243,28 @@ h1, h2, h3, h4, h5, h6 {
/* Size scaling */
h1 {
font-size: 2rem; /* ~32px */
font-size: 2rem; /* ~32px */
}
h2 {
font-size: 1.5rem; /* ~24px */
}
h3 {
font-size: 1.25rem; /* ~20px */
}
h4 {
font-size: 1.125rem; /* ~18px */
}
h5 {
font-size: 1rem; /* ~16px */
font-size: 1rem; /* ~16px */
}
h6 {
font-size: 0.875rem; /* ~14px */
color: #374151; /* Slightly lighter for subheadings */
color: #374151; /* Slightly lighter for subheadings */
}
ul {
@@ -264,6 +277,7 @@ ul {
color: cornflowerblue;
text-decoration: none;
}
.dark .customlink a {
color: rgb(var(--color-primary-700));
}

2
web/tailwind.config.js
View File

@@ -338,7 +338,7 @@ module.exports = {
700: 'hsl(240, 20%, 30%)',
800: 'hsl(240, 30%, 22%)',
900: 'hsl(242, 45%, 15%)',
950: 'hsl(243, 69%, 10%)',
950: 'hsl(264,11%,9%)',
},
warning: '#F0D630',
error: '#E70D3D',