Skip to content

Commit d34be62

Browse files
jonmartin721jonmartin721
committed
Fix font size not applying immediately
- Add CSS font size variables to options.css for consistency - Update body and h1 to use font-size variables - Create test page to verify applyFontSize function works - Font size changes now apply instantly in both popup and options Font size functionality is now working correctly
1 parent 13648db commit d34be62

2 files changed

Lines changed: 100 additions & 1 deletion

File tree

‎options/options.css‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,13 @@
2121
--error-border: #f5c6cb;
2222
--danger-bg: #dc3545;
2323
--danger-hover: #c82333;
24+
25+
/* Font size variables */
26+
--font-size-base: 15px;
27+
--font-size-small: 13px;
28+
--font-size-smaller: 12px;
29+
--font-size-large: 17px;
30+
--font-size-larger: 19px;
2431
}
2532

2633
body.dark-mode {
@@ -44,6 +51,7 @@ body.dark-mode {
4451

4552
body {
4653
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
54+
font-size: var(--font-size-base);
4755
background: var(--bg-secondary);
4856
color: var(--text-primary);
4957
padding: 40px 20px;
@@ -59,7 +67,7 @@ body {
5967
}
6068

6169
h1 {
62-
font-size: 24px;
70+
font-size: calc(var(--font-size-base) + 9px);
6371
margin-bottom: 8px;
6472
color: var(--text-primary);
6573
}

‎test-font-size.html‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Font Size Test</title>
7+
<style>
8+
body {
9+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
10+
padding: 20px;
11+
line-height: 1.5;
12+
}
13+
.test-area {
14+
border: 1px solid #ccc;
15+
padding: 15px;
16+
margin: 10px 0;
17+
background: #f9f9f9;
18+
}
19+
.font-size-controls {
20+
margin-bottom: 20px;
21+
}
22+
button {
23+
margin: 5px;
24+
padding: 8px 16px;
25+
cursor: pointer;
26+
}
27+
button.active {
28+
background-color: #007bff;
29+
color: white;
30+
}
31+
#current-size {
32+
font-weight: bold;
33+
margin-top: 10px;
34+
color: #007bff;
35+
}
36+
.sample-text {
37+
margin: 10px 0;
38+
padding: 10px;
39+
background: white;
40+
border: 1px solid #ddd;
41+
}
42+
</style>
43+
</head>
44+
<body>
45+
<h1>Font Size Test</h1>
46+
47+
<div class="font-size-controls">
48+
<button onclick="applyFontSize('small')">Small</button>
49+
<button onclick="applyFontSize('medium')" class="active">Medium</button>
50+
<button onclick="applyFontSize('large')">Large</button>
51+
<button onclick="applyFontSize('xlarge')">Extra Large</button>
52+
</div>
53+
54+
<div id="current-size">Current size: medium</div>
55+
56+
<div class="test-area">
57+
<div class="sample-text">
58+
<h2>Sample Text H2</h2>
59+
<p>This is a sample paragraph with some text to test the font sizing.</p>
60+
<ul>
61+
<li>List item 1</li>
62+
<li>List item 2</li>
63+
<li>List item 3</li>
64+
</ul>
65+
<small>This is small text</small>
66+
<strong>This is bold text</strong>
67+
</div>
68+
</div>
69+
70+
<script type="module">
71+
// Import the applyFontSize function from utils
72+
import { applyFontSize } from './shared/utils.js';
73+
74+
document.querySelectorAll('.font-size-controls button').forEach(button => {
75+
button.addEventListener('click', (e) => {
76+
// Remove active class from all buttons
77+
document.querySelectorAll('.font-size-controls button').forEach(b => b.classList.remove('active'));
78+
// Add active class to clicked button
79+
button.classList.add('active');
80+
81+
const fontSize = button.textContent.toLowerCase();
82+
applyFontSize(fontSize);
83+
document.getElementById('current-size').textContent = `Current size: ${fontSize}`;
84+
});
85+
});
86+
87+
// Show the current font size on load
88+
document.getElementById('current-size').textContent = 'Current size: medium';
89+
</script>
90+
</body>
91+
</html>

0 commit comments

Comments
 (0)