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-h5: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem);
--text-h6: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem); --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-body: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
--text-small: 0.875rem; --text-small: 0.875rem;
--text-button: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem); --text-button: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem);
@@ -305,27 +307,27 @@ h1, h2, h3, h4, h5, h6 {
} }
h1, .size-h1 { h1, .size-h1 {
font-size: var(--text-h1); font-size: round(down, var(--text-h1), var(--round-interval));
} }
h2, .size-h2 { h2, .size-h2 {
font-size: var(--text-h2); font-size: round(down, var(--text-h2), var(--round-interval));
} }
h3, .size-h3 { h3, .size-h3 {
font-size: var(--text-h3); font-size: round(down, var(--text-h3), var(--round-interval));
} }
h4, .size-h4 { h4, .size-h4 {
font-size: var(--text-h4); font-size: round(down, var(--text-h4), var(--round-interval));
} }
h5, .size-h5 { h5, .size-h5 {
font-size: var(--text-h5); font-size: round(down, var(--text-h5), var(--round-interval));
} }
h6, .size-h6 { h6, .size-h6 {
font-size: var(--text-h6); font-size: round(down, var(--text-h6), var(--round-interval));
} }
p, ul, ol, li { p, ul, ol, li {
@@ -333,7 +335,7 @@ p, ul, ol, li {
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-feature-settings: "ss01" 1, "ss02" 1; 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); line-height: var(--line-relaxed);
margin: var(--spacing-3) 0 var(--spacing-6) 0; margin: var(--spacing-3) 0 var(--spacing-6) 0;
text-align: left; text-align: left;
@@ -370,7 +372,7 @@ button, .button-primary, .button-secondary, .menu-button, .logo {
line-height: var(--line-normal); line-height: var(--line-normal);
letter-spacing: 0.025rem; letter-spacing: 0.025rem;
padding: 0.875rem 1rem; padding: 0.875rem 1rem;
font-size: var(--text-button); font-size: round(down, var(--text-button), var(--round-interval));
border: none; border: none;
border-radius: var(--radius-xxl); border-radius: var(--radius-xxl);
text-decoration: none; text-decoration: none;
@@ -746,7 +748,7 @@ footer {
font-family: "MD IO", monospace; font-family: "MD IO", monospace;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: var(--text-small); font-size: round(down, var(--text-small), var(--round-interval));
line-height: var(--line-relaxed); line-height: var(--line-relaxed);
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }