From 7034872132051b66a81d8ca107774240ca1f8c05 Mon Sep 17 00:00:00 2001 From: evazion Date: Mon, 25 Oct 2021 05:16:59 -0500 Subject: [PATCH] css: use rem instead of em units instead for font sizes. Use rem units for font sizes so that font sizes are relative to the root element, not the parent element. Fixes an issue where the video duration indicator would be too small on parent/child thumbnails in post show pages. This was because of nesting issues with em units. Em units are relative to their parent element, so if you had a parent element with a font size of 0.8em, and a child element with a font size of 0.8em, then the final computed font size would be 0.8*0.8 = 0.64em. --- app/javascript/src/styles/base/000_vars.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/app/javascript/src/styles/base/000_vars.scss b/app/javascript/src/styles/base/000_vars.scss index bd8f33853..fd9815b81 100644 --- a/app/javascript/src/styles/base/000_vars.scss +++ b/app/javascript/src/styles/base/000_vars.scss @@ -1,13 +1,13 @@ :root { - --text-xs: 0.643em; // 9px - --text-sm: 0.9em; - --text-md: 1em; - --text-lg: 1.16667em; - --text-xl: 1.5em; - --text-xxl: 2em; + --text-xs: 0.5625rem; // 9px + --text-sm: 0.7875rem; // 12.6px + --text-md: 0.875rem; // 14px + --text-lg: 1.0208rem; // 16.3333px + --text-xl: 1.3125rem; // 21px + --text-xxl: 1.75rem; // 28px --header-font: Tahoma, Verdana, Helvetica, sans-serif; --body-font: Verdana, Helvetica, sans-serif; - --monospace-font: 1.2em monospace; + --monospace-font: 0.85rem monospace; // 13.6px } $h1_padding: 0.8em 0 0.25em 0;