1e80ab31ee
Using pixels to define font sizes has an important problem: it ignores user settings. No matter whether users set their font size to 16px (the default font size in most browsers), to 18px (like I do) or to 32 px (like users with huge screens or with a visual disability); the size will not change. Even if most browsers can zoom to somehow overcome this issue, it's still annoying. And, in our case, we use relative units most of the time but absolute units in some places. This leads to situations where some of the text gets larger when users increase their font size while some of the text remains the same. Sometimes this results in titles having a smaller size than regular text below it. The solution is using relative units everywhere. Quoting the Web Accessibility Initiative guide for styles [1]: > The user needs to be able to resize the text to 200% of its size > anywhere on the page, without the text being cut off or overlapping > other text. The font size should be defined in relative units, such as > percentages, em or rem. It is not possible to zoom text set in pixels > independently from the rest of the page in some browsers. [1] https://www.w3.org/WAI/tutorials/page-structure/styling/
157 lines
3.1 KiB
SCSS
157 lines
3.1 KiB
SCSS
// CONSUL Settings
|
|
// -----------------------------
|
|
//
|
|
// Table of Contents:
|
|
//
|
|
// 1. CONSUL variables
|
|
// 2. Foundation settings overrides
|
|
//
|
|
|
|
// 1. CONSUL variables
|
|
// --------------------
|
|
|
|
$base-font-size: rem-calc(17);
|
|
$base-line: rem-calc(26);
|
|
$small-font-size: rem-calc(14);
|
|
$line-height: rem-calc(24);
|
|
$tiny-font-size: rem-calc(12);
|
|
|
|
$brand: #004a83;
|
|
$brand-secondary: darken($brand, 10%);
|
|
$dark: $brand-secondary;
|
|
|
|
$text: #222;
|
|
$text-medium: #515151;
|
|
$text-light: #bfbfbf;
|
|
|
|
$border: #dee0e3;
|
|
|
|
$link: $brand;
|
|
$link-hover: darken($link, 20%);
|
|
|
|
$debates: $brand;
|
|
|
|
$like: #7bd2a8;
|
|
$unlike: #ef8585;
|
|
|
|
$delete: #f04124;
|
|
$check: #46db91;
|
|
|
|
$proposals: #ffa42d;
|
|
$proposals-dark: #794500;
|
|
|
|
$budget: #7e328a;
|
|
$budget-hover: #7571bf;
|
|
|
|
$highlight: #e7f2fc;
|
|
$highlight-soft: #f3f8fd;
|
|
$light: #f5f7fa;
|
|
$featured: #ffdc5c;
|
|
|
|
$footer-border: #bfc1c3;
|
|
|
|
$success-bg: #dff0d8;
|
|
$success-border: #d6e9c6;
|
|
$color-success: #3c763d;
|
|
|
|
$info-bg: #d9edf7;
|
|
$info-border: #bce8f1;
|
|
$color-info: #31708f;
|
|
|
|
$warning-bg: #fcf8e3;
|
|
$warning-border: #faebcc;
|
|
$color-warning: #8a6d3b;
|
|
|
|
$alert-bg: #f2dede;
|
|
$alert-border: #ebccd1;
|
|
$color-alert: #a94442;
|
|
|
|
$pdf-primary: #0300ff;
|
|
$pdf-secondary: #ff9e00;
|
|
|
|
$outline-focus: 3px solid #ffbf47;
|
|
|
|
$input-height: $line-height * 2;
|
|
|
|
$icon-width: $line-height * 2;
|
|
|
|
$off-screen-left: -1000rem;
|
|
|
|
$sdg-icon-min-width: 40px;
|
|
|
|
$sdg-colors: (
|
|
1: #e5243b,
|
|
2: #dda63a,
|
|
3: #4c9f38,
|
|
4: #c5192d,
|
|
5: #ff3a21,
|
|
6: #26bde2,
|
|
7: #fcc30b,
|
|
8: #a21942,
|
|
9: #fd6925,
|
|
10: #dd1367,
|
|
11: #fd9d24,
|
|
12: #bf8b2e,
|
|
13: #3f7e44,
|
|
14: #0a97d9,
|
|
15: #56c02b,
|
|
16: #00689d,
|
|
17: #19486a
|
|
);
|
|
|
|
// 2. Foundation settings overrides
|
|
// ---------------------------------
|
|
|
|
$black: #222;
|
|
$white: #fdfdfd;
|
|
|
|
$body-font-family: "Source Sans Pro", "Helvetica", "Arial", sans-serif !important;
|
|
|
|
$header-font-family: $body-font-family;
|
|
|
|
$global-radius: rem-calc(3);
|
|
|
|
$button-radius: $global-radius;
|
|
|
|
$font-family-serif: Georgia, "Times New Roman", Times, serif;
|
|
|
|
$header-styles: (
|
|
small: (
|
|
"h1": ("font-size": 34),
|
|
"h2": ("font-size": 24),
|
|
"h3": ("font-size": 20),
|
|
"h4": ("font-size": 18),
|
|
"h5": ("font-size": 16),
|
|
"h6": ("font-size": 14),
|
|
),
|
|
medium: (
|
|
"h1": ("font-size": 44),
|
|
"h2": ("font-size": 34),
|
|
"h3": ("font-size": 24),
|
|
"h4": ("font-size": 19),
|
|
"h5": ("font-size": 16),
|
|
"h6": ("font-size": 13),
|
|
),
|
|
);
|
|
|
|
$small-font-size: rem-calc(14);
|
|
|
|
$abbr-underline: none;
|
|
|
|
$tab-background-active: $white;
|
|
|
|
$accordion-item-color: foreground($accordion-background, $text);
|
|
$accordion-content-color: foreground($accordion-background, $text);
|
|
|
|
$tab-item-font-size: $base-font-size;
|
|
$tab-item-padding: $line-height / 2 0;
|
|
$tab-content-border: $border;
|
|
|
|
$orbit-bullet-diameter: 0.8rem;
|
|
|
|
$pagination-radius: $global-radius;
|
|
|
|
$show-header-for-stacked: true;
|
|
|
|
$tooltip-background-color: $brand;
|