implementing css round() for all font-sizes

This commit is contained in:
sefaria
2026-05-27 11:24:20 +02:00
parent 0f34535ba4
commit ce85432804
+11 -9
View File
@@ -94,6 +94,8 @@
--text-h5: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem);
--text-h6: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
--round-interval: 2px;
--text-body: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
--text-small: 0.875rem;
--text-button: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem);
@@ -305,27 +307,27 @@ h1, h2, h3, h4, h5, h6 {
}
h1, .size-h1 {
font-size: var(--text-h1);
font-size: round(down, var(--text-h1), var(--round-interval));
}
h2, .size-h2 {
font-size: var(--text-h2);
font-size: round(down, var(--text-h2), var(--round-interval));
}
h3, .size-h3 {
font-size: var(--text-h3);
font-size: round(down, var(--text-h3), var(--round-interval));
}
h4, .size-h4 {
font-size: var(--text-h4);
font-size: round(down, var(--text-h4), var(--round-interval));
}
h5, .size-h5 {
font-size: var(--text-h5);
font-size: round(down, var(--text-h5), var(--round-interval));
}
h6, .size-h6 {
font-size: var(--text-h6);
font-size: round(down, var(--text-h6), var(--round-interval));
}
p, ul, ol, li {
@@ -333,7 +335,7 @@ p, ul, ol, li {
font-style: normal;
font-weight: 400;
font-feature-settings: "ss01" 1, "ss02" 1;
font-size: var(--text-body);
font-size: round(down, var(--text-body), var(--round-interval));
line-height: var(--line-relaxed);
margin: var(--spacing-3) 0 var(--spacing-6) 0;
text-align: left;
@@ -370,7 +372,7 @@ button, .button-primary, .button-secondary, .menu-button, .logo {
line-height: var(--line-normal);
letter-spacing: 0.025rem;
padding: 0.875rem 1rem;
font-size: var(--text-button);
font-size: round(down, var(--text-button), var(--round-interval));
border: none;
border-radius: var(--radius-xxl);
text-decoration: none;
@@ -746,7 +748,7 @@ footer {
font-family: "MD IO", monospace;
font-style: normal;
font-weight: 400;
font-size: var(--text-small);
font-size: round(down, var(--text-small), var(--round-interval));
line-height: var(--line-relaxed);
color: var(--color-text-secondary);
}