RyderTech/the-bible
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Fix font size controls using CSS classes instead of Tailwind utilities

Browse Source
This commit is contained in:
Ryderjj89
2025-09-13 16:22:40 -04:00
parent 0513f821bd
commit ceae5a5ef9
2 changed files with 33 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/BibleReader.tsx
View File

@@ -55,11 +55,11 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, format
const getFontSizeClass = () => { const getFontSizeClass = () => {
switch (fontSize) { switch (fontSize) {
case 'small': case 'small':
return 'text-sm leading-relaxed'; return 'font-size-small';
case 'large': case 'large':
return 'text-2xl leading-relaxed'; return 'font-size-large';
default: default:
return 'text-lg leading-relaxed'; return 'font-size-medium';
} }
}; };

35
frontend/src/index.css
View File

@@ -16,22 +16,47 @@
@layer components { @layer components {
.bible-text { .bible-text {
@apply text-lg leading-relaxed text-gray-800 dark:text-gray-200; @apply leading-relaxed text-gray-800 dark:text-gray-200;
font-family: 'Georgia', 'Times New Roman', serif; font-family: 'Times New Roman', 'Georgia', serif;
} }
.verse-number { .verse-number {
@apply text-sm font-semibold text-blue-600 dark:text-blue-400 mr-1; @apply font-semibold text-blue-600 dark:text-blue-400 mr-1;
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
} }
.book-title { .book-title {
@apply text-2xl font-bold text-center mb-6 text-gray-900 dark:text-gray-100; @apply text-2xl font-bold text-center mb-6 text-gray-900 dark:text-gray-100;
font-family: 'Georgia', 'Times New Roman', serif; font-family: 'Times New Roman', 'Georgia', serif;
} }
.chapter-title { .chapter-title {
@apply text-xl font-semibold mb-4 text-gray-700 dark:text-gray-300; @apply text-xl font-semibold mb-4 text-gray-700 dark:text-gray-300;
font-family: 'Georgia', 'Times New Roman', serif; font-family: 'Times New Roman', 'Georgia', serif;
}
/* Font size utility classes that override CSS classes */
.font-size-small .bible-text {
@apply text-sm;
}
.font-size-small .verse-number {
@apply text-xs;
}
.font-size-medium .bible-text {
@apply text-lg;
}
.font-size-medium .verse-number {
@apply text-sm;
}
.font-size-large .bible-text {
@apply text-2xl;
}
.font-size-large .verse-number {
@apply text-lg;
} }
} }