scott/crabfit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update components

Browse source
This commit is contained in:
Ben Grant 2022-08-16 14:29:41 +10:00
parent 4382f559f3
commit a67aee24dc
95 changed files with 3901 additions and 12032 deletions
Download patch file Download diff file Expand all files Collapse all files

134
crabfit-frontend/public/index.css
View file

@ -1,5 +1,5 @@
@font-face {
font-family: Karla;
font-family: 'Karla';
src: url('fonts/karla-variable.ttf') format('truetype');
font-weight: 1 999;
}
@ -20,22 +20,146 @@
font-style: normal;
}
:root {
color-scheme: light dark;
/* LIGHT */
--background-light: #FFFFFF;
--text-light: #000000;
--primary-light: #F79E00;
--secondary-light: #F48600;
--tertiary-light: #F4BB60;
--surface-light: #FEF2DD;
--error-light: #D32F2F;
--loading-light: #DDDDDD;
--font-weight-light: 600;
/* DARK */
--background-dark: #111111;
--text-dark: #DDDDDD;
--primary-dark: #F79E00;
--secondary-dark: #F4BB60;
--tertiary-dark: #CC7313;
--surface-dark: #30240F;
--error-dark: #E53935;
--loading-dark: #444444;
--font-weight-dark: 500;
/* Define light defaults */
--background: var(--background-light);
--text: var(--text-light);
--primary: var(--primary-light);
--secondary: var(--secondary-light);
--tertiary: var(--tertiary-light);
--surface: var(--surface-light);
--error: var(--error-light);
--loading: var(--loading-light);
--font-weight: var(--font-weight-light);
}
@media (prefers-color-scheme: dark) {
:root {
--background: var(--background-dark);
--text: var(--text-dark);
--primary: var(--primary-dark);
--secondary: var(--secondary-dark);
--tertiary: var(--tertiary-dark);
--surface: var(--surface-dark);
--error: var(--error-dark);
--loading: var(--loading-dark);
--font-weight: var(--font-weight-dark);
}
}
html {
scroll-behavior: smooth;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
body {
margin: 0;
font-family: 'Karla', sans-serif;
background: var(--background);
color: var(--text);
font-weight: var(--font-weight);
}
.light {
color-scheme: light;
--background: var(--background-light);
--text: var(--text-light);
--primary: var(--primary-light);
--secondary: var(--secondary-light);
--tertiary: var(--tertiary-light);
--surface: var(--surface-light);
--error: var(--error-light);
--loading: var(--loading-light);
--font-weight: var(--font-weight-light);
}
@media not print {
.dark {
color-scheme: dark;
--background: var(--background-dark);
--text: var(--text-dark);
--primary: var(--primary-dark);
--secondary: var(--secondary-dark);
--tertiary: var(--tertiary-dark);
--surface: var(--surface-dark);
--error: var(--error-dark);
--loading: var(--loading-dark);
--font-weight: var(--font-weight-dark);
}
}
@media print {
#app, .light, .dark {
--background: white;
}
}
a {
color: var(--primary);
}
*::-webkit-scrollbar {
width: 16px;
height: 16px;
}
*::-webkit-scrollbar-track {
background: var(--surface);
}
*::-webkit-scrollbar-thumb {
border-radius: 100px;
border: 4px solid var(--surface);
width: 12px;
background: var(--secondary);
}
*::-webkit-scrollbar-thumb:hover {
background: var(--tertiary);
}
*::-webkit-scrollbar-thumb:active {
background: red;
}
/* IE 10+ */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
#root {
font-family: Karla, sans-serif;
#app {
text-align: center;
margin: 20vh auto;
font-size: 1.3em;
font-weight: 600;
}
#root::before {
#app::before {
content: '🦀';
font-size: 1.5em;
display: block;
padding: 20px;
}
#root::after {
#app::after {
display: block;
content: 'Crab Fit doesn\'t work in Internet Explorer. Please try using a modern browser.';
}

46
crabfit-frontend/public/index.html
View file

@ -1,46 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta name="theme-color" content="#F79E00">
<meta
name="keywords"
content="crab, fit, crabfit, schedule, availability, availabilities, when2meet, doodle, meet, plan, time, timezone"
>
<meta
name="description"
content="Enter your availability to find a time that works for everyone!"
>
<meta name="monetization" content="$ilp.uphold.com/HjDULeBk9JnH">
<!--V1.0--><meta http-equiv="origin-trial" content="ApibM5tjM3kUQQ2EQrkRcdTdWJRGAEKaUFzNhFmx+Of5H/cRyWuecMxs//Bikgo3WMSKs5kntElcM+U8kDy9cAEAAABOeyJvcmlnaW4iOiJodHRwczovL2NyYWIuZml0OjQ0MyIsImZlYXR1cmUiOiJEaWdpdGFsR29vZHMiLCJleHBpcnkiOjE2Mzk1MjYzOTl9">
<!--V2.0--><meta http-equiv="origin-trial" content="AiZrT13ogLT63ah6Abb/aG6KhscY5PTf1HNTI2rcqpiFeqiQ3s6+xd+qCe3c+bp3udvvzh5QMHF4GqPAlG110gcAAABQeyJvcmlnaW4iOiJodHRwczovL2NyYWIuZml0OjQ0MyIsImZlYXR1cmUiOiJEaWdpdGFsR29vZHNWMiIsImV4cGlyeSI6MTY0Nzk5MzU5OX0=">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<meta property="og:title" content="Crab Fit">
<meta property="og:description" content="Enter your availability to find a time that works for everyone!">
<meta property="og:url" content="https://crab.fit">
<link rel="stylesheet" href="%PUBLIC_URL%/index.css">
<title>Crab Fit</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-E6S1CDFBCD"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-E6S1CDFBCD');
</script>
</head>
<body>
<noscript>
<div style="font-family: Karla, sans-serif; text-align: center; margin: 20vh 0; display: block;"><h1>🦀 Crab Fit doesn't work without Javascript 🏋️</h1><p>Enable Javascript or try a different browser.</p></div>
</noscript>
<div id="root"></div>
</body>
</html>