This repository has no description
add: new font and styling
author
damedotblog
date
(Jan 16, 2025, 2:23 PM -0500)
commit
483fb852
483fb852c3dc474a08ee8c7b56cf249a8c139d72
parent
6433aae1
6433aae114a3abbaca350dcedd15b1c91d67ee0f
+77
-31
+57
-9
src/App.css
+57
-9
src/App.css
···
1
1
@import './styles/variables.css';
2
2
3
3
.App {
4
-
font-family: Arial, sans-serif;
4
+
font-family: "articulat-cf", sans-serif;
5
+
font-weight: 500;
6
+
font-style: normal;
5
7
margin: 0;
6
8
padding: 20px;
7
9
text-align: center;
10
+
color: #000000;
8
11
background-color: #f4f4f9;
9
12
}
10
13
14
+
h1 {
15
+
margin-top: 1.2em;
16
+
margin-bottom: 1.2em;
17
+
font-size: 1.8em;
18
+
font-family: "articulat-heavy-cf", sans-serif;
19
+
font-weight: 900;
20
+
font-style: normal;
21
+
color: #3B9AF8;
22
+
}
23
+
24
+
h2 {
25
+
margin-top: 1.2em;
26
+
margin-bottom: 1.2em;
27
+
font-size: 1.5em;
28
+
font-family: "articulat-cf", sans-serif;
29
+
font-weight: 800;
30
+
font-style: normal;
31
+
color: #004F84;
32
+
}
33
+
34
+
h3 {
35
+
margin-top: 1.2em;
36
+
margin-bottom: 1.2em;
37
+
font-size: 1.3em;
38
+
font-family: "articulat-cf", sans-serif;
39
+
font-weight: 800;
40
+
font-style: normal;
41
+
color: #004F84;
42
+
}
43
+
44
+
p {
45
+
margin-top: 1.2em;
46
+
margin-bottom: 1.2em;
47
+
font-size: 1em;
48
+
font-family: "articulat-cf", sans-serif;
49
+
font-weight: 500;
50
+
font-style: normal;
51
+
color: #000000;
52
+
}
53
+
54
+
body {
55
+
margin-top: 1.2em;
56
+
margin-bottom: 1.2em;
57
+
font-size: 1em;
58
+
margin: 0;
59
+
font-family: "articulat-cf", sans-serif;
60
+
font-weight: 500;
61
+
font-style: normal;
62
+
background-color: #f0f0f0; /* Light background */
63
+
color: #000000; /* Dark text */
64
+
transition: background-color 0.3s ease, color 0.3s ease;
65
+
}
66
+
11
67
form {
12
68
margin: 20px auto;
13
69
display: flex;
···
45
101
text-align: left;
46
102
display: inline-block;
47
103
margin: 20px auto;
48
-
}
49
-
50
-
body {
51
-
margin: 0;
52
-
font-family: Arial, sans-serif;
53
-
background-color: #f0f0f0; /* Light background */
54
-
color: #000000; /* Dark text */
55
-
transition: background-color 0.3s ease, color 0.3s ease;
56
104
}
57
105
58
106
.dark-mode body {
+16
-18
src/App.jsx
+16
-18
src/App.jsx
···
1
1
// src/App.jsx
2
2
3
-
import React, { useContext } from 'react';
3
+
import React, { useContext, useEffect } from 'react';
4
4
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
5
5
import Navbar from './components/Navbar/Navbar';
6
6
import Footer from './components/Footer/Footer';
···
8
8
import MainApp from './components/MainApp/MainApp';
9
9
import About from './components/About/About';
10
10
import Home from './components/Home/Home';
11
-
import UserProfile from './components/UserProfile/UserProfile'; // Import UserProfile
12
-
import { AuthContext } from './AuthContext'; // Ensure correct path
11
+
import UserProfile from './components/UserProfile/UserProfile';
12
+
import { AuthContext } from './AuthContext';
13
13
14
14
const App = () => {
15
15
const { isAuthenticated, handleLoginSuccess, loading } = useContext(AuthContext);
16
16
17
+
// Load Adobe font stylesheet on app mount
18
+
useEffect(() => {
19
+
const loadAdobeFont = () => {
20
+
const link = document.createElement('link');
21
+
link.rel = 'stylesheet';
22
+
link.href = 'https://use.typekit.net/yhs0sil.css';
23
+
link.type = 'text/css';
24
+
document.head.appendChild(link);
25
+
};
26
+
loadAdobeFont();
27
+
}, []);
28
+
17
29
if (loading) {
18
-
// Optionally, render a loading spinner or placeholder
19
30
return <div>Loading...</div>;
20
31
}
21
32
22
33
return (
23
34
<Router>
24
35
<div className="app-container" style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
25
-
{/* Navbar */}
26
36
<Navbar />
27
-
28
-
{/* Main Content */}
29
37
<div style={{ flex: 1 }}>
30
38
<Routes>
31
-
{/* Public Routes */}
32
39
<Route
33
40
path="/login"
34
41
element={
···
41
48
/>
42
49
<Route path="/about" element={<About />} />
43
50
<Route path="/home" element={<Home />} />
44
-
45
-
{/* Authenticated Routes */}
46
51
<Route
47
52
path="/app/*"
48
53
element={
···
53
58
)
54
59
}
55
60
/>
56
-
57
-
{/* Dynamic User Profile Route */}
58
-
{/* Place this route after all specific routes to prevent conflicts */}
59
61
<Route path="/:username" element={<UserProfile />} />
60
-
61
-
{/* Redirect any unknown routes */}
62
-
<Route path="*" element={<Navigate to={isAuthenticated ? "/app" : "/home"} replace />} />
62
+
<Route path="*" element={<Navigate to={isAuthenticated ? '/app' : '/home'} replace />} />
63
63
</Routes>
64
64
</div>
65
-
66
-
{/* Footer */}
67
65
<Footer />
68
66
</div>
69
67
</Router>
+1
-1
src/components/Login/Login.css
+1
-1
src/components/Login/Login.css
+1
-1
src/components/MainApp/MainApp.css
+1
-1
src/components/MainApp/MainApp.css
+1
-1
src/components/ScoreGenerator/ScoreGenerator.css
+1
-1
src/components/ScoreGenerator/ScoreGenerator.css