Skip to content

Commit 830a0f0

Browse files
rfcardoso07rfcardoso07
committed
Improve CSS definitions for font styling
1 parent 9eb9d65 commit 830a0f0

File tree

1 file changed

+226
-1
lines changed

1 file changed

+226
-1
lines changed

‎src/css/custom.css

+226-1
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,46 @@
55
*/
66

77
/* You can override the default Infima variables here. */
8+
9+
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
10+
11+
/*---------------------------------------------------------
12+
Root Variables: Base Typography and Colors
13+
---------------------------------------------------------*/
814
:root {
15+
/* Base font families */
16+
--ifm-font-family-base: 'Nunito Sans', sans-serif;
17+
--ifm-heading-font-family: 'Nunito Sans', sans-serif;
18+
19+
/* Base sizes and line-height */
20+
--ifm-font-size-base: 16px;
21+
--ifm-line-height: 1.6;
22+
23+
/* Heading sizes */
24+
--ifm-h1-font-size: 2.75rem;
25+
--ifm-h2-font-size: 2.25rem;
26+
--ifm-h3-font-size: 1.75rem;
27+
--ifm-h4-font-size: 1.5rem;
28+
--ifm-h5-font-size: 1.25rem;
29+
--ifm-h6-font-size: 1rem;
30+
31+
/* Primary Colors */
932
--ifm-color-primary: #64C9D1;
1033
--ifm-color-primary-dark: #404040;
1134
--ifm-color-primary-darker: #277148;
1235
--ifm-color-primary-darkest: #205d3b;
1336
--ifm-color-primary-light: #33925d;
1437
--ifm-color-primary-lighter: #359962;
1538
--ifm-color-primary-lightest: #3cad6e;
39+
40+
/* Code and Highlighting */
1641
--ifm-code-font-size: 95%;
1742
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
1843
}
1944

20-
/* For readability concerns, you should choose a lighter palette in dark mode. */
45+
/*---------------------------------------------------------
46+
Dark Mode Variables
47+
---------------------------------------------------------*/
2148
[data-theme='dark'] {
2249
--ifm-color-primary: #64C9D1;
2350
--ifm-color-primary-dark: #404040;
@@ -28,3 +55,201 @@
2855
--ifm-color-primary-lightest: #4fddbf;
2956
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
3057
}
58+
59+
/*---------------------------------------------------------
60+
Dark Mode Overrides for Enhanced Readability & Modern Look
61+
---------------------------------------------------------*/
62+
[data-theme='dark'] body {
63+
background-color: #121212;
64+
color: #e0e0e0;
65+
}
66+
67+
[data-theme='dark'] h1,
68+
[data-theme='dark'] h2,
69+
[data-theme='dark'] h3,
70+
[data-theme='dark'] h4,
71+
[data-theme='dark'] h5,
72+
[data-theme='dark'] h6 {
73+
color: #ffffff;
74+
}
75+
76+
[data-theme='dark'] p {
77+
color: #d0d0d0;
78+
}
79+
80+
[data-theme='dark'] a {
81+
color: var(--ifm-color-primary);
82+
}
83+
84+
[data-theme='dark'] code {
85+
background-color: #2d2d2d;
86+
color: #e0e0e0;
87+
}
88+
89+
[data-theme='dark'] pre {
90+
background-color: #1e1e1e;
91+
color: #e0e0e0;
92+
}
93+
94+
[data-theme='dark'] blockquote {
95+
border-left: 4px solid #444;
96+
color: #cccccc;
97+
}
98+
99+
/*---------------------------------------------------------
100+
Base Body Styles
101+
---------------------------------------------------------*/
102+
body {
103+
font-family: var(--ifm-font-family-base);
104+
font-size: var(--ifm-font-size-base);
105+
line-height: var(--ifm-line-height);
106+
color: #333;
107+
background-color: #fff;
108+
margin: 0;
109+
padding: 0;
110+
}
111+
112+
/*---------------------------------------------------------
113+
Heading Styles
114+
---------------------------------------------------------*/
115+
h1, h2, h3, h4, h5, h6 {
116+
font-family: var(--ifm-heading-font-family);
117+
margin-top: 1.2em;
118+
margin-bottom: 0.5em;
119+
color: #222;
120+
font-weight: 700;
121+
}
122+
123+
h1 {
124+
font-size: var(--ifm-h1-font-size);
125+
border-bottom: 2px solid #eaeaea;
126+
padding-bottom: 0.3em;
127+
}
128+
129+
h2 {
130+
font-size: var(--ifm-h2-font-size);
131+
border-bottom: 1px solid #eaeaea;
132+
padding-bottom: 0.25em;
133+
}
134+
135+
h3 {
136+
font-size: var(--ifm-h3-font-size);
137+
}
138+
139+
h4 {
140+
font-size: var(--ifm-h4-font-size);
141+
font-weight: 600;
142+
}
143+
144+
h5 {
145+
font-size: var(--ifm-h5-font-size);
146+
font-style: italic;
147+
font-weight: 600;
148+
}
149+
150+
h6 {
151+
font-size: var(--ifm-h6-font-size);
152+
font-style: italic;
153+
font-weight: 600;
154+
}
155+
156+
/*---------------------------------------------------------
157+
Paragraph & Link Styles
158+
---------------------------------------------------------*/
159+
p {
160+
margin-bottom: 1em;
161+
font-size: 1rem;
162+
}
163+
164+
a {
165+
color: var(--ifm-color-primary);
166+
text-decoration: none;
167+
transition: color 0.2s;
168+
}
169+
170+
a:hover {
171+
text-decoration: underline;
172+
}
173+
174+
/*---------------------------------------------------------
175+
Code and Preformatted Text Styles
176+
---------------------------------------------------------*/
177+
/* Inline code styling */
178+
code {
179+
font-family: var(--ifm-font-family-base);
180+
font-size: 0.95em;
181+
background-color: #f5f5f5;
182+
padding: 0.2em 0.4em;
183+
border-radius: 4px;
184+
}
185+
186+
/* Block code styling */
187+
pre {
188+
font-family: var(--ifm-font-family-base);
189+
background-color: #f0f0f0;
190+
padding: 1em;
191+
overflow-x: auto;
192+
border-radius: 6px;
193+
font-size: 0.95em;
194+
}
195+
196+
/*---------------------------------------------------------
197+
Blockquotes
198+
---------------------------------------------------------*/
199+
blockquote {
200+
font-style: italic;
201+
border-left: 4px solid #eaeaea;
202+
margin: 1.5em 0;
203+
padding-left: 1em;
204+
color: #555;
205+
}
206+
207+
/*---------------------------------------------------------
208+
Redocusaurus (API Docs) Adjustments
209+
---------------------------------------------------------*/
210+
.redocusaurus .redoc-wrap {
211+
font-family: var(--ifm-font-family-base) !important;
212+
font-size: 1rem !important;
213+
}
214+
215+
/*---------------------------------------------------------
216+
Navbar & Footer Customization
217+
---------------------------------------------------------*/
218+
.navbar__title,
219+
.navbar__logo {
220+
font-family: var(--ifm-heading-font-family);
221+
}
222+
223+
.footer {
224+
font-family: var(--ifm-font-family-base);
225+
}
226+
227+
/*---------------------------------------------------------
228+
Utility Classes for Modern Text Variations
229+
---------------------------------------------------------*/
230+
.bold {
231+
font-weight: 700;
232+
}
233+
234+
.italic {
235+
font-style: italic;
236+
}
237+
238+
.light {
239+
font-weight: 300;
240+
}
241+
242+
/*---------------------------------------------------------
243+
Responsive Adjustments for Headings
244+
---------------------------------------------------------*/
245+
@media (max-width: 768px) {
246+
h1 {
247+
font-size: 2.25rem;
248+
}
249+
h2 {
250+
font-size: 1.75rem;
251+
}
252+
h3 {
253+
font-size: 1.5rem;
254+
}
255+
}

0 commit comments

Comments
 (0)