implementing css round() for all font-sizes
This commit is contained in:
+11
-9
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user