diff --git a/colors.css b/colors.css new file mode 100644 index 0000000..f48e716 --- /dev/null +++ b/colors.css @@ -0,0 +1,3 @@ + + +/*# sourceMappingURL=colors.css.map */ diff --git a/colors.css.map b/colors.css.map new file mode 100644 index 0000000..6ee84d1 --- /dev/null +++ b/colors.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"colors.css"} \ No newline at end of file diff --git a/colors.scss b/colors.scss new file mode 100644 index 0000000..5c32430 --- /dev/null +++ b/colors.scss @@ -0,0 +1,271 @@ +@mixin tailwindColors { + /* Colors from Tailwind CSS: https://github.com/tailwindlabs/tailwindcss + + MIT License + + Copyright (c) Tailwind Labs, Inc. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + */ + --color-black: #000; + --color-white: #fff; + --color-slate-50: #f8fafc; + --color-slate-100: #f1f5f9; + --color-slate-200: #e2e8f0; + --color-slate-300: #cbd5e1; + --color-slate-400: #94a3b8; + --color-slate-500: #64748b; + --color-slate-600: #475569; + --color-slate-700: #334155; + --color-slate-800: #1e293b; + --color-slate-900: #0f172a; + --color-slate-950: #020617; + --color-gray-50: #f9fafb; + --color-gray-100: #f3f4f6; + --color-gray-200: #e5e7eb; + --color-gray-300: #d1d5db; + --color-gray-400: #9ca3af; + --color-gray-500: #6b7280; + --color-gray-600: #4b5563; + --color-gray-700: #374151; + --color-gray-800: #1f2937; + --color-gray-900: #111827; + --color-gray-950: #030712; + --color-zinc-50: #fafafa; + --color-zinc-100: #f4f4f5; + --color-zinc-200: #e4e4e7; + --color-zinc-300: #d4d4d8; + --color-zinc-400: #a1a1aa; + --color-zinc-500: #71717a; + --color-zinc-600: #52525b; + --color-zinc-700: #3f3f46; + --color-zinc-800: #27272a; + --color-zinc-900: #18181b; + --color-zinc-950: #09090b; + --color-neutral-50: #fafafa; + --color-neutral-100: #f5f5f5; + --color-neutral-200: #e5e5e5; + --color-neutral-300: #d4d4d4; + --color-neutral-400: #a3a3a3; + --color-neutral-500: #737373; + --color-neutral-600: #525252; + --color-neutral-700: #404040; + --color-neutral-800: #262626; + --color-neutral-900: #171717; + --color-neutral-950: #0a0a0a; + --color-stone-50: #fafaf9; + --color-stone-100: #f5f5f4; + --color-stone-200: #e7e5e4; + --color-stone-300: #d6d3d1; + --color-stone-400: #a8a29e; + --color-stone-500: #78716c; + --color-stone-600: #57534e; + --color-stone-700: #44403c; + --color-stone-800: #292524; + --color-stone-900: #1c1917; + --color-stone-950: #0c0a09; + --color-red-50: #fef2f2; + --color-red-100: #fee2e2; + --color-red-200: #fecaca; + --color-red-300: #fca5a5; + --color-red-400: #f87171; + --color-red-500: #ef4444; + --color-red-600: #dc2626; + --color-red-700: #b91c1c; + --color-red-800: #991b1b; + --color-red-900: #7f1d1d; + --color-red-950: #450a0a; + --color-orange-50: #fff7ed; + --color-orange-100: #ffedd5; + --color-orange-200: #fed7aa; + --color-orange-300: #fdba74; + --color-orange-400: #fb923c; + --color-orange-500: #f97316; + --color-orange-600: #ea580c; + --color-orange-700: #c2410c; + --color-orange-800: #9a3412; + --color-orange-900: #7c2d12; + --color-orange-950: #431407; + --color-amber-50: #fffbeb; + --color-amber-100: #fef3c7; + --color-amber-200: #fde68a; + --color-amber-300: #fcd34d; + --color-amber-400: #fbbf24; + --color-amber-500: #f59e0b; + --color-amber-600: #d97706; + --color-amber-700: #b45309; + --color-amber-800: #92400e; + --color-amber-900: #78350f; + --color-amber-950: #451a03; + --color-yellow-50: #fefce8; + --color-yellow-100: #fef9c3; + --color-yellow-200: #fef08a; + --color-yellow-300: #fde047; + --color-yellow-400: #facc15; + --color-yellow-500: #eab308; + --color-yellow-600: #ca8a04; + --color-yellow-700: #a16207; + --color-yellow-800: #854d0e; + --color-yellow-900: #713f12; + --color-yellow-950: #422006; + --color-lime-50: #f7fee7; + --color-lime-100: #ecfccb; + --color-lime-200: #d9f99d; + --color-lime-300: #bef264; + --color-lime-400: #a3e635; + --color-lime-500: #84cc16; + --color-lime-600: #65a30d; + --color-lime-700: #4d7c0f; + --color-lime-800: #3f6212; + --color-lime-900: #365314; + --color-lime-950: #1a2e05; + --color-green-50: #f0fdf4; + --color-green-100: #dcfce7; + --color-green-200: #bbf7d0; + --color-green-300: #86efac; + --color-green-400: #4ade80; + --color-green-500: #22c55e; + --color-green-600: #16a34a; + --color-green-700: #15803d; + --color-green-800: #166534; + --color-green-900: #14532d; + --color-green-950: #052e16; + --color-emerald-50: #ecfdf5; + --color-emerald-100: #d1fae5; + --color-emerald-200: #a7f3d0; + --color-emerald-300: #6ee7b7; + --color-emerald-400: #34d399; + --color-emerald-500: #10b981; + --color-emerald-600: #059669; + --color-emerald-700: #047857; + --color-emerald-800: #065f46; + --color-emerald-900: #064e3b; + --color-emerald-950: #022c22; + --color-teal-50: #f0fdfa; + --color-teal-100: #ccfbf1; + --color-teal-200: #99f6e4; + --color-teal-300: #5eead4; + --color-teal-400: #2dd4bf; + --color-teal-500: #14b8a6; + --color-teal-600: #0d9488; + --color-teal-700: #0f766e; + --color-teal-800: #115e59; + --color-teal-900: #134e4a; + --color-teal-950: #042f2e; + --color-cyan-50: #ecfeff; + --color-cyan-100: #cffafe; + --color-cyan-200: #a5f3fc; + --color-cyan-300: #67e8f9; + --color-cyan-400: #22d3ee; + --color-cyan-500: #06b6d4; + --color-cyan-600: #0891b2; + --color-cyan-700: #0e7490; + --color-cyan-800: #155e75; + --color-cyan-900: #164e63; + --color-cyan-950: #083344; + --color-sky-50: #f0f9ff; + --color-sky-100: #e0f2fe; + --color-sky-200: #bae6fd; + --color-sky-300: #7dd3fc; + --color-sky-400: #38bdf8; + --color-sky-500: #0ea5e9; + --color-sky-600: #0284c7; + --color-sky-700: #0369a1; + --color-sky-800: #075985; + --color-sky-900: #0c4a6e; + --color-sky-950: #082f49; + --color-blue-50: #eff6ff; + --color-blue-100: #dbeafe; + --color-blue-200: #bfdbfe; + --color-blue-300: #93c5fd; + --color-blue-400: #60a5fa; + --color-blue-500: #3b82f6; + --color-blue-600: #2563eb; + --color-blue-700: #1d4ed8; + --color-blue-800: #1e40af; + --color-blue-900: #1e3a8a; + --color-blue-950: #172554; + --color-indigo-50: #eef2ff; + --color-indigo-100: #e0e7ff; + --color-indigo-200: #c7d2fe; + --color-indigo-300: #a5b4fc; + --color-indigo-400: #818cf8; + --color-indigo-500: #6366f1; + --color-indigo-600: #4f46e5; + --color-indigo-700: #4338ca; + --color-indigo-800: #3730a3; + --color-indigo-900: #312e81; + --color-indigo-950: #1e1b4b; + --color-violet-50: #f5f3ff; + --color-violet-100: #ede9fe; + --color-violet-200: #ddd6fe; + --color-violet-300: #c4b5fd; + --color-violet-400: #a78bfa; + --color-violet-500: #8b5cf6; + --color-violet-600: #7c3aed; + --color-violet-700: #6d28d9; + --color-violet-800: #5b21b6; + --color-violet-900: #4c1d95; + --color-violet-950: #2e1065; + --color-purple-50: #faf5ff; + --color-purple-100: #f3e8ff; + --color-purple-200: #e9d5ff; + --color-purple-300: #d8b4fe; + --color-purple-400: #c084fc; + --color-purple-500: #a855f7; + --color-purple-600: #9333ea; + --color-purple-700: #7e22ce; + --color-purple-800: #6b21a8; + --color-purple-900: #581c87; + --color-purple-950: #3b0764; + --color-fuchsia-50: #fdf4ff; + --color-fuchsia-100: #fae8ff; + --color-fuchsia-200: #f5d0fe; + --color-fuchsia-300: #f0abfc; + --color-fuchsia-400: #e879f9; + --color-fuchsia-500: #d946ef; + --color-fuchsia-600: #c026d3; + --color-fuchsia-700: #a21caf; + --color-fuchsia-800: #86198f; + --color-fuchsia-900: #701a75; + --color-fuchsia-950: #4a044e; + --color-pink-50: #fdf2f8; + --color-pink-100: #fce7f3; + --color-pink-200: #fbcfe8; + --color-pink-300: #f9a8d4; + --color-pink-400: #f472b6; + --color-pink-500: #ec4899; + --color-pink-600: #db2777; + --color-pink-700: #be185d; + --color-pink-800: #9d174d; + --color-pink-900: #831843; + --color-pink-950: #500724; + --color-rose-50: #fff1f2; + --color-rose-100: #ffe4e6; + --color-rose-200: #fecdd3; + --color-rose-300: #fda4af; + --color-rose-400: #fb7185; + --color-rose-500: #f43f5e; + --color-rose-600: #e11d48; + --color-rose-700: #be123c; + --color-rose-800: #9f1239; + --color-rose-900: #881337; + --color-rose-950: #4c0519; + /* End: Colors from Tailwind CSS */ +} \ No newline at end of file diff --git a/elevators.js b/elevators.js index 02c98f1..068a1b3 100644 --- a/elevators.js +++ b/elevators.js @@ -6,7 +6,7 @@ let geolocationPermission = false; let geolocation = null; const openStations = new Set(); let sortByDistance = false; -const version = '0.5.1' +const version = '0.5.2' const minorVersion = version.split('.').splice(0, 2).join('.'); const numberFormat = new Intl.NumberFormat('de-DE', { maximumFractionDigits: 1 diff --git a/style.css b/style.css index 22f5887..fbe5b55 100644 --- a/style.css +++ b/style.css @@ -268,9 +268,6 @@ --color-rose-900: #881337; --color-rose-950: #4c0519; /* End: Colors from Tailwind CSS */ - --color-red: #971616; - --color-orange: #cc6300; - --color-green: #19942e; --bg-type-u: #006ab3; --bg-type-s: #1a962b; --bg-type-a: #f39100; @@ -280,17 +277,25 @@ --bg-type-a-disabled: #dfd8cf; --bg-type-r-disabled: #b3b3b3; --color-type-disabled: var(--color-gray-400); + --color-line-U1: #006ab3; + --color-line-U2: #e2001a; + --color-line-U3: #ffdd00; + --color-line-U4: #0098a1; + --color-line-S1: #1a962b; + --color-line-S2: #b51143; + --color-line-S3: #622181; + --color-line-S4: #be148e; + --color-line-S5: #0089bb; + --color-line-S6: #d3da00; --bg: var(--color-gray-50); --text: var(--color-gray-950); --text-secondary: var(--color-gray-700); - --nav-bg: hsl(210, 60%, 50%); - --nav-bg-hover: hsl(210, 60%, 30%); - --nav-bg-visited: hsl(250, 60%, 50%); - --nav-text-visited: hsl(250, 60%, 93%); - --nav-text: hsl(210, 60%, 93%); - --link: hsl(210, 60%, 30%); - --link-hover: hsl(210, 60%, 10%); - --link-visited: hsl(250, 60%, 30%); + --nav-bg: var(--color-indigo-400); + --nav-bg-hover: var(--color-indigo-200); + --nav-bg-visited: var(--color-purple-400); + --link: var(--color-indigo-600); + --link-hover: var(--color-indigo-800); + --link-visited: var(--color-purple-600); --station-bg: var(--color-gray-50); --station-bg-hover: var(--color-gray-400); --station-border: var(--color-gray-400); @@ -308,25 +313,25 @@ } @media (prefers-color-scheme: dark) { :root { - --bg: var(--color-gray-950); - --text: var(--color-gray-50); - --text-secondary: var(--color-gray-400); - --nav-bg: hsl(210, 60%, 30%); - --nav-bg-hover: hsl(210, 60%, 10%); - --nav-bg-visited: hsl(250, 60%, 30%); - --link: hsl(210, 60%, 60%); - --link-hover: hsl(210, 60%, 60%); - --link-visited: hsl(250, 60%, 70%); - --station-bg: var(--color-gray-950); - --station-bg-hover: var(--color-gray-600); - --station-border: var(--color-gray-600); - --station-border-hover: var(--color-gray-400); - --elevator-bg: var(--color-gray-900); --bg-type-u-disabled: #627f93; --bg-type-s-disabled: #688b6d; --bg-type-a-disabled: #aa987f; --bg-type-r-disabled: #333333; --color-type-disabled: var(--color-gray-200); + --bg: var(--color-gray-950); + --text: var(--color-gray-50); + --text-secondary: var(--color-gray-400); + --nav-bg: var(--color-indigo-800); + --nav-bg-hover: var(--color-indigo-950); + --nav-bg-visited: var(--color-purple-800); + --link: var(--color-indigo-400); + --link-hover: var(--color-indigo-200); + --link-visited: var(--color-purple-400); + --station-bg: var(--color-gray-950); + --station-bg-hover: var(--color-gray-600); + --station-border: var(--color-gray-600); + --station-border-hover: var(--color-gray-400); + --elevator-bg: var(--color-gray-900); } } @@ -371,15 +376,15 @@ body.has-dialog { } .text-red { - color: var(--color-red); + color: var(--color-red-800); } .text-orange { - color: var(--color-orange); + color: var(--color-orange-500); } .text-green { - color: var(--color-green); + color: var(--color-green-600); } body { @@ -397,7 +402,7 @@ a { color: var(--link); text-decoration: none; } -a:hover { +a:hover, a:visited:hover { text-decoration: underline; color: var(--link-hover); } @@ -415,18 +420,18 @@ nav ul { } nav ul li a { font-weight: bold; - color: var(--nav-text); + color: var(--text); text-decoration: none; background-color: var(--nav-bg); padding: var(--space-m) var(--space-l); cursor: pointer; } -nav ul li a:hover { +nav ul li a:hover, nav ul li a:visited:hover { text-decoration: underline; background-color: var(--nav-bg-hover); } nav ul li a:visited { - color: var(--nav-text-visited); + color: var(--text); background-color: var(--nav-bg-visited); } @@ -515,7 +520,7 @@ button.loadOSM { } div#errorMessage { - border: solid 2px var(--color-red); + border: solid 2px var(--color-red-600); border-radius: var(--item-radius); padding: var(--space-xl) var(--space-xl); margin-top: var(--space-l); @@ -838,55 +843,58 @@ span.lineChip, span.typeChip, button.typeChip { } span.lineChip[data-type=U], span.typeChip[data-type=U], button.typeChip[data-type=U] { background-color: var(--bg-type-u); - color: #ffffff; + color: var(--color-white); } span.lineChip[data-type=U][data-line=U1], span.typeChip[data-type=U][data-line=U1], button.typeChip[data-type=U][data-line=U1] { - background-color: #006ab3; + background-color: var(--color-line-U1); } span.lineChip[data-type=U][data-line=U2], span.typeChip[data-type=U][data-line=U2], button.typeChip[data-type=U][data-line=U2] { - background-color: #e2001a; + background-color: var(--color-line-U2); } span.lineChip[data-type=U][data-line=U3], span.typeChip[data-type=U][data-line=U3], button.typeChip[data-type=U][data-line=U3] { - background-color: #ffdd00; - color: #000000; + background-color: var(--color-line-U3); + color: var(--color-black); } span.lineChip[data-type=U][data-line=U4], span.typeChip[data-type=U][data-line=U4], button.typeChip[data-type=U][data-line=U4] { - background-color: #0098a1; + background-color: var(--color-line-U4); +} +span.lineChip[data-type=U][data-line=U5], span.typeChip[data-type=U][data-line=U5], button.typeChip[data-type=U][data-line=U5] { + background-color: var(--color-line-U5); } span.lineChip[data-type=S], span.typeChip[data-type=S], button.typeChip[data-type=S] { background-color: var(--bg-type-s); - color: #ffffff; + color: var(--color-white); } span.lineChip[data-type=S][data-line=S1], span.typeChip[data-type=S][data-line=S1], button.typeChip[data-type=S][data-line=S1] { - background-color: #1a962b; + background-color: var(--color-line-S1); } span.lineChip[data-type=S][data-line=S2], span.typeChip[data-type=S][data-line=S2], button.typeChip[data-type=S][data-line=S2] { - background-color: #b51143; + background-color: var(--color-line-S2); } span.lineChip[data-type=S][data-line=S3], span.typeChip[data-type=S][data-line=S3], button.typeChip[data-type=S][data-line=S3] { - background-color: #622181; + background-color: var(--color-line-S3); } span.lineChip[data-type=S][data-line=S4], span.typeChip[data-type=S][data-line=S4], button.typeChip[data-type=S][data-line=S4] { - background-color: #be148e; + background-color: var(--color-line-S4); } span.lineChip[data-type=S][data-line=S5], span.typeChip[data-type=S][data-line=S5], button.typeChip[data-type=S][data-line=S5] { - background-color: #0089bb; + background-color: var(--color-line-S5); } span.lineChip[data-type=S][data-line=S6], span.typeChip[data-type=S][data-line=S6], button.typeChip[data-type=S][data-line=S6] { - background-color: #d3da00; - color: #000000; + background-color: var(--color-line-S6); + color: var(--color-black); } span.lineChip[data-type=A], span.typeChip[data-type=A], button.typeChip[data-type=A] { background-color: var(--bg-type-a); - color: #ffffff; + color: var(--color-white); } span.lineChip[data-type=R], span.typeChip[data-type=R], button.typeChip[data-type=R] { background-color: var(--bg-type-r); - color: #ffffff; + color: var(--color-white); } @media (prefers-color-scheme: dark) { span.lineChip[data-type=R], span.typeChip[data-type=R], button.typeChip[data-type=R] { - border: solid 2px #ffffff; + border: solid 2px var(--color-white); } } diff --git a/style.css.map b/style.css.map index 2edf010..c832b55 100644 --- a/style.css.map +++ b/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAMA;AAEE;;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAwBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EAEA;EACA;EACA;EAOA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EA0BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhCA;EArTF;IAsTI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;;;;AAgBF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAGA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAOV;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAKJ;EACE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;;AAEA;EAPF;IAQI;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;AAMR;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAjCF;IAkCI;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;;AACA;EATF;IAUI;IACA;IACA;;;AAIF;EACE;EACA;;AACA;EAHF;IAII;;;AAKJ;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGE;EADF;IAEI;;;AAKF;EADF;IAEI;;;AAKJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAOA;EACE;;AAMR;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAKF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAIJ;EACE;EACA;EAEA;;AAEA;EANF;IAOI;;;;AAYpB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQV;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;;AAVA;EACE;;AAWF;EAIE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["style.scss","colors.scss"],"names":[],"mappings":"AAMA;ACLE;;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAwBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;ED/PA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EA8BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AApCA;EAlDF;IAoDI;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;;;;AAeF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAGA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAOV;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAKJ;EACE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;;AAEA;EAPF;IAQI;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;AAMR;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAjCF;IAkCI;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;;AACA;EATF;IAUI;IACA;IACA;;;AAIF;EACE;EACA;;AACA;EAHF;IAII;;;AAKJ;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGE;EADF;IAEI;;;AAKF;EADF;IAEI;;;AAKJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAOA;EACE;;AAMR;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAKF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAIJ;EACE;EACA;EAEA;;AAEA;EANF;IAOI;;;;AAYpB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQV;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;;AAVA;EACE;;AAWF;EAIE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE","file":"style.css"} \ No newline at end of file diff --git a/style.scss b/style.scss index 30972ac..5c449bd 100644 --- a/style.scss +++ b/style.scss @@ -1,287 +1,13 @@ -@use 'sass:color'; +@import "colors"; $mobileBreakpoint: 576px; $smallBreakpoint: 400px; $mediumBreakpoint: 800px; :root { + @include tailwindColors(); - /* Colors from Tailwind CSS: https://github.com/tailwindlabs/tailwindcss - - MIT License - - Copyright (c) Tailwind Labs, Inc. - - Permission is hereby granted, free of charge, to any person obtaining a copy - of this software and associated documentation files (the "Software"), to deal - in the Software without restriction, including without limitation the rights - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - copies of the Software, and to permit persons to whom the Software is - furnished to do so, subject to the following conditions: - - The above copyright notice and this permission notice shall be included in all - copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - SOFTWARE. - */ - --color-black: #000; - --color-white: #fff; - --color-slate-50: #f8fafc; - --color-slate-100: #f1f5f9; - --color-slate-200: #e2e8f0; - --color-slate-300: #cbd5e1; - --color-slate-400: #94a3b8; - --color-slate-500: #64748b; - --color-slate-600: #475569; - --color-slate-700: #334155; - --color-slate-800: #1e293b; - --color-slate-900: #0f172a; - --color-slate-950: #020617; - --color-gray-50: #f9fafb; - --color-gray-100: #f3f4f6; - --color-gray-200: #e5e7eb; - --color-gray-300: #d1d5db; - --color-gray-400: #9ca3af; - --color-gray-500: #6b7280; - --color-gray-600: #4b5563; - --color-gray-700: #374151; - --color-gray-800: #1f2937; - --color-gray-900: #111827; - --color-gray-950: #030712; - --color-zinc-50: #fafafa; - --color-zinc-100: #f4f4f5; - --color-zinc-200: #e4e4e7; - --color-zinc-300: #d4d4d8; - --color-zinc-400: #a1a1aa; - --color-zinc-500: #71717a; - --color-zinc-600: #52525b; - --color-zinc-700: #3f3f46; - --color-zinc-800: #27272a; - --color-zinc-900: #18181b; - --color-zinc-950: #09090b; - --color-neutral-50: #fafafa; - --color-neutral-100: #f5f5f5; - --color-neutral-200: #e5e5e5; - --color-neutral-300: #d4d4d4; - --color-neutral-400: #a3a3a3; - --color-neutral-500: #737373; - --color-neutral-600: #525252; - --color-neutral-700: #404040; - --color-neutral-800: #262626; - --color-neutral-900: #171717; - --color-neutral-950: #0a0a0a; - --color-stone-50: #fafaf9; - --color-stone-100: #f5f5f4; - --color-stone-200: #e7e5e4; - --color-stone-300: #d6d3d1; - --color-stone-400: #a8a29e; - --color-stone-500: #78716c; - --color-stone-600: #57534e; - --color-stone-700: #44403c; - --color-stone-800: #292524; - --color-stone-900: #1c1917; - --color-stone-950: #0c0a09; - --color-red-50: #fef2f2; - --color-red-100: #fee2e2; - --color-red-200: #fecaca; - --color-red-300: #fca5a5; - --color-red-400: #f87171; - --color-red-500: #ef4444; - --color-red-600: #dc2626; - --color-red-700: #b91c1c; - --color-red-800: #991b1b; - --color-red-900: #7f1d1d; - --color-red-950: #450a0a; - --color-orange-50: #fff7ed; - --color-orange-100: #ffedd5; - --color-orange-200: #fed7aa; - --color-orange-300: #fdba74; - --color-orange-400: #fb923c; - --color-orange-500: #f97316; - --color-orange-600: #ea580c; - --color-orange-700: #c2410c; - --color-orange-800: #9a3412; - --color-orange-900: #7c2d12; - --color-orange-950: #431407; - --color-amber-50: #fffbeb; - --color-amber-100: #fef3c7; - --color-amber-200: #fde68a; - --color-amber-300: #fcd34d; - --color-amber-400: #fbbf24; - --color-amber-500: #f59e0b; - --color-amber-600: #d97706; - --color-amber-700: #b45309; - --color-amber-800: #92400e; - --color-amber-900: #78350f; - --color-amber-950: #451a03; - --color-yellow-50: #fefce8; - --color-yellow-100: #fef9c3; - --color-yellow-200: #fef08a; - --color-yellow-300: #fde047; - --color-yellow-400: #facc15; - --color-yellow-500: #eab308; - --color-yellow-600: #ca8a04; - --color-yellow-700: #a16207; - --color-yellow-800: #854d0e; - --color-yellow-900: #713f12; - --color-yellow-950: #422006; - --color-lime-50: #f7fee7; - --color-lime-100: #ecfccb; - --color-lime-200: #d9f99d; - --color-lime-300: #bef264; - --color-lime-400: #a3e635; - --color-lime-500: #84cc16; - --color-lime-600: #65a30d; - --color-lime-700: #4d7c0f; - --color-lime-800: #3f6212; - --color-lime-900: #365314; - --color-lime-950: #1a2e05; - --color-green-50: #f0fdf4; - --color-green-100: #dcfce7; - --color-green-200: #bbf7d0; - --color-green-300: #86efac; - --color-green-400: #4ade80; - --color-green-500: #22c55e; - --color-green-600: #16a34a; - --color-green-700: #15803d; - --color-green-800: #166534; - --color-green-900: #14532d; - --color-green-950: #052e16; - --color-emerald-50: #ecfdf5; - --color-emerald-100: #d1fae5; - --color-emerald-200: #a7f3d0; - --color-emerald-300: #6ee7b7; - --color-emerald-400: #34d399; - --color-emerald-500: #10b981; - --color-emerald-600: #059669; - --color-emerald-700: #047857; - --color-emerald-800: #065f46; - --color-emerald-900: #064e3b; - --color-emerald-950: #022c22; - --color-teal-50: #f0fdfa; - --color-teal-100: #ccfbf1; - --color-teal-200: #99f6e4; - --color-teal-300: #5eead4; - --color-teal-400: #2dd4bf; - --color-teal-500: #14b8a6; - --color-teal-600: #0d9488; - --color-teal-700: #0f766e; - --color-teal-800: #115e59; - --color-teal-900: #134e4a; - --color-teal-950: #042f2e; - --color-cyan-50: #ecfeff; - --color-cyan-100: #cffafe; - --color-cyan-200: #a5f3fc; - --color-cyan-300: #67e8f9; - --color-cyan-400: #22d3ee; - --color-cyan-500: #06b6d4; - --color-cyan-600: #0891b2; - --color-cyan-700: #0e7490; - --color-cyan-800: #155e75; - --color-cyan-900: #164e63; - --color-cyan-950: #083344; - --color-sky-50: #f0f9ff; - --color-sky-100: #e0f2fe; - --color-sky-200: #bae6fd; - --color-sky-300: #7dd3fc; - --color-sky-400: #38bdf8; - --color-sky-500: #0ea5e9; - --color-sky-600: #0284c7; - --color-sky-700: #0369a1; - --color-sky-800: #075985; - --color-sky-900: #0c4a6e; - --color-sky-950: #082f49; - --color-blue-50: #eff6ff; - --color-blue-100: #dbeafe; - --color-blue-200: #bfdbfe; - --color-blue-300: #93c5fd; - --color-blue-400: #60a5fa; - --color-blue-500: #3b82f6; - --color-blue-600: #2563eb; - --color-blue-700: #1d4ed8; - --color-blue-800: #1e40af; - --color-blue-900: #1e3a8a; - --color-blue-950: #172554; - --color-indigo-50: #eef2ff; - --color-indigo-100: #e0e7ff; - --color-indigo-200: #c7d2fe; - --color-indigo-300: #a5b4fc; - --color-indigo-400: #818cf8; - --color-indigo-500: #6366f1; - --color-indigo-600: #4f46e5; - --color-indigo-700: #4338ca; - --color-indigo-800: #3730a3; - --color-indigo-900: #312e81; - --color-indigo-950: #1e1b4b; - --color-violet-50: #f5f3ff; - --color-violet-100: #ede9fe; - --color-violet-200: #ddd6fe; - --color-violet-300: #c4b5fd; - --color-violet-400: #a78bfa; - --color-violet-500: #8b5cf6; - --color-violet-600: #7c3aed; - --color-violet-700: #6d28d9; - --color-violet-800: #5b21b6; - --color-violet-900: #4c1d95; - --color-violet-950: #2e1065; - --color-purple-50: #faf5ff; - --color-purple-100: #f3e8ff; - --color-purple-200: #e9d5ff; - --color-purple-300: #d8b4fe; - --color-purple-400: #c084fc; - --color-purple-500: #a855f7; - --color-purple-600: #9333ea; - --color-purple-700: #7e22ce; - --color-purple-800: #6b21a8; - --color-purple-900: #581c87; - --color-purple-950: #3b0764; - --color-fuchsia-50: #fdf4ff; - --color-fuchsia-100: #fae8ff; - --color-fuchsia-200: #f5d0fe; - --color-fuchsia-300: #f0abfc; - --color-fuchsia-400: #e879f9; - --color-fuchsia-500: #d946ef; - --color-fuchsia-600: #c026d3; - --color-fuchsia-700: #a21caf; - --color-fuchsia-800: #86198f; - --color-fuchsia-900: #701a75; - --color-fuchsia-950: #4a044e; - --color-pink-50: #fdf2f8; - --color-pink-100: #fce7f3; - --color-pink-200: #fbcfe8; - --color-pink-300: #f9a8d4; - --color-pink-400: #f472b6; - --color-pink-500: #ec4899; - --color-pink-600: #db2777; - --color-pink-700: #be185d; - --color-pink-800: #9d174d; - --color-pink-900: #831843; - --color-pink-950: #500724; - --color-rose-50: #fff1f2; - --color-rose-100: #ffe4e6; - --color-rose-200: #fecdd3; - --color-rose-300: #fda4af; - --color-rose-400: #fb7185; - --color-rose-500: #f43f5e; - --color-rose-600: #e11d48; - --color-rose-700: #be123c; - --color-rose-800: #9f1239; - --color-rose-900: #881337; - --color-rose-950: #4c0519; - - /* End: Colors from Tailwind CSS */ - - --color-red: #971616; - --color-orange: #cc6300; - --color-green: #19942e; - - + // LineType Colors $colorTypeU: #006ab3; $colorTypeS: #1a962b; $colorTypeA: #f39100; @@ -296,17 +22,32 @@ $mediumBreakpoint: 800px; --bg-type-r-disabled: #{scale-color($colorTypeR, $saturation: -80%, $lightness: +70%)}; --color-type-disabled: var(--color-gray-400); + // Line Colors + --color-line-U1: #006ab3; + --color-line-U2: #e2001a; + --color-line-U3: #ffdd00; + --color-line-U4: #0098a1; + --color-line-S1: #1a962b; + --color-line-S2: #b51143; + --color-line-S3: #622181; + --color-line-S4: #be148e; + --color-line-S5: #0089bb; + --color-line-S6: #d3da00; + + + // Component Styles --bg: var(--color-gray-50); --text: var(--color-gray-950); --text-secondary: var(--color-gray-700); - --nav-bg: hsl(210, 60%, 50%); - --nav-bg-hover: hsl(210, 60%, 30%); - --nav-bg-visited: hsl(250, 60%, 50%); - --nav-text-visited: hsl(250, 60%, 93%); - --nav-text: hsl(210, 60%, 93%); - --link: hsl(210, 60%, 30%); - --link-hover: hsl(210, 60%, 10%); - --link-visited: hsl(250, 60%, 30%); + + --nav-bg: var(--color-indigo-400); + --nav-bg-hover: var(--color-indigo-200); + --nav-bg-visited: var(--color-purple-400); + + --link: var(--color-indigo-600); + --link-hover: var(--color-indigo-800); + --link-visited: var(--color-purple-600); + --station-bg: var(--color-gray-50); --station-bg-hover: var(--color-gray-400); --station-border: var(--color-gray-400); @@ -314,27 +55,31 @@ $mediumBreakpoint: 800px; --elevator-bg: var(--color-gray-100); @media (prefers-color-scheme: dark) { - --bg: var(--color-gray-950); - --text: var(--color-gray-50); - --text-secondary: var(--color-gray-400); - --nav-bg: hsl(210, 60%, 30%); - --nav-bg-hover: hsl(210, 60%, 10%); - --nav-bg-visited: hsl(250, 60%, 30%); - --link: hsl(210, 60%, 60%); - --link-hover: hsl(210, 60%, 60%); - --link-visited: hsl(250, 60%, 70%); - --station-bg: var(--color-gray-950); - --station-bg-hover: var(--color-gray-600); - --station-border: var(--color-gray-600); - --station-border-hover: var(--color-gray-400); - --elevator-bg: var(--color-gray-900); - + // LineType Colors --bg-type-u-disabled: #{scale-color($colorTypeU, $saturation: -80%, $lightness: +20%)}; --bg-type-s-disabled: #{scale-color($colorTypeS, $saturation: -80%, $lightness: +20%)}; --bg-type-a-disabled: #{scale-color($colorTypeA, $saturation: -80%, $lightness: +20%)}; --bg-type-r-disabled: #{scale-color($colorTypeR, $saturation: -80%, $lightness: +20%)}; --color-type-disabled: var(--color-gray-200); + // Component Styles + --bg: var(--color-gray-950); + --text: var(--color-gray-50); + --text-secondary: var(--color-gray-400); + + --nav-bg: var(--color-indigo-800); + --nav-bg-hover: var(--color-indigo-950); + --nav-bg-visited: var(--color-purple-800); + + --link: var(--color-indigo-400); + --link-hover: var(--color-indigo-200); + --link-visited: var(--color-purple-400); + + --station-bg: var(--color-gray-950); + --station-bg-hover: var(--color-gray-600); + --station-border: var(--color-gray-600); + --station-border-hover: var(--color-gray-400); + --elevator-bg: var(--color-gray-900); } --elevator-list-gap: 3rem; @@ -396,15 +141,15 @@ body { } .text-red { - color: var(--color-red); + color: var(--color-red-800); } .text-orange { - color: var(--color-orange); + color: var(--color-orange-500); } .text-green { - color: var(--color-green); + color: var(--color-green-600); } body { @@ -424,7 +169,7 @@ a { color: var(--link); text-decoration: none; - &:hover { + &:hover, &:visited:hover { text-decoration: underline; color: var(--link-hover); } @@ -446,20 +191,20 @@ nav { li { a { font-weight: bold; - color: var(--nav-text); + color: var(--text); text-decoration: none; background-color: var(--nav-bg); padding: var(--space-m) var(--space-l); cursor: pointer; - &:hover { + &:hover, &:visited:hover { text-decoration: underline; background-color: var(--nav-bg-hover); } &:visited { - color: var(--nav-text-visited); + color: var(--text); background-color: var(--nav-bg-visited); } } @@ -558,7 +303,7 @@ button.loadOSM { } div#errorMessage { - border: solid 2px var(--color-red); + border: solid 2px var(--color-red-600); border-radius: var(--item-radius); padding: var(--space-xl) var(--space-xl); margin-top: var(--space-l); @@ -939,67 +684,71 @@ span.lineChip, span.typeChip, button.typeChip { &[data-type="U"] { background-color: var(--bg-type-u); - color: #ffffff; + color: var(--color-white); &[data-line="U1"] { - background-color: #006ab3; + background-color: var(--color-line-U1); } &[data-line="U2"] { - background-color: #e2001a; + background-color: var(--color-line-U2); } &[data-line="U3"] { - background-color: #ffdd00; - color: #000000; + background-color: var(--color-line-U3); + color: var(--color-black); } &[data-line="U4"] { - background-color: #0098a1; + background-color: var(--color-line-U4); + } + + &[data-line="U5"] { + background-color: var(--color-line-U5); } } &[data-type="S"] { background-color: var(--bg-type-s); - color: #ffffff; + color: var(--color-white); &[data-line="S1"] { - background-color: #1a962b; + background-color: var(--color-line-S1); } &[data-line="S2"] { - background-color: #b51143; + background-color: var(--color-line-S2); } &[data-line="S3"] { - background-color: #622181; + background-color: var(--color-line-S3); } &[data-line="S4"] { - background-color: #be148e; + background-color: var(--color-line-S4); } &[data-line="S5"] { - background-color: #0089bb; + background-color: var(--color-line-S5); } &[data-line="S6"] { - background-color: #d3da00; - color: #000000; + background-color: var(--color-line-S6); + color: var(--color-black); } } &[data-type="A"] { background-color: var(--bg-type-a); - color: #ffffff; + color: var(--color-white); } &[data-type="R"] { background-color: var(--bg-type-r); - color: #ffffff; + color: var(--color-white); @media (prefers-color-scheme: dark) { - border: solid 2px #ffffff; + border: solid 2px var(--color-white); } } }