95 lines
2.7 KiB
SCSS
95 lines
2.7 KiB
SCSS
// -----------------------------------------------------------------------------
|
|
// This file contains all application-wide Sass variables.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
:root,
|
|
[data-theme="default"] {
|
|
// --color-primary: rgb(18, 120, 175);
|
|
--color-primary: black;
|
|
--color-inline-code: hsl(0, 81%, 35%);
|
|
|
|
/* color contrasts */
|
|
--color-bg: rgb(248, 248, 248);
|
|
--color-contrast-lower: hsl(0, 0%, 95%);
|
|
--color-contrast-low: hsl(240, 1%, 83%);
|
|
--color-contrast-medium-low: hsl(240, 1%, 65%);
|
|
--color-contrast-medium: hsl(240, 1%, 48%);
|
|
--color-contrast-medium-high: hsl(240, 2%, 34%);
|
|
--color-contrast-high: hsl(240, 4%, 20%);
|
|
--color-contrast-higher: black;
|
|
|
|
--color-text: var(--color-contrast-high);
|
|
|
|
--font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
|
|
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
|
|
--font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
|
|
--font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
|
|
--font-size-xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
|
|
--font-size-xxl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
|
|
--font-size-xxxl: clamp(3.05rem, 3.54vw + 2.17rem, 5rem);
|
|
}
|
|
|
|
[data-theme] {
|
|
background-color: var(--color-bg);
|
|
color: var(--color-contrast-high);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
// --color-primary: rgb(86, 184, 237);
|
|
|
|
--color-primary: white;
|
|
--color-inline-code: hsl(0, 81%, 70%);
|
|
|
|
/* color contrasts */
|
|
--color-bg: rgb(18, 18, 18);
|
|
--color-contrast-lower: hsl(240, 6%, 15%);
|
|
--color-contrast-low: hsl(252, 4%, 25%);
|
|
--color-contrast-medium-low: hsl(240, 2%, 34%);
|
|
--color-contrast-medium: hsl(240, 1%, 57%);
|
|
--color-contrast-medium-high: hsl(240, 1%, 65%);
|
|
--color-contrast-high: hsl(0, 0%, 89%);
|
|
--color-contrast-higher: white;
|
|
|
|
--color-text: var(--color-contrast-high);
|
|
}
|
|
|
|
// Fonts
|
|
|
|
/// Regular font family
|
|
/// @type List
|
|
$text-font-stack: "Roboto", "Helvetica Neue Light", "Helvetica Neue",
|
|
"Helvetica", "Arial", sans-serif;
|
|
|
|
/// Code (monospace) font family
|
|
/// @type List
|
|
$code-font-stack: "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
|
|
"Monaco", monospace;
|
|
|
|
// Containers
|
|
|
|
/// Container's maximum width
|
|
/// @type Length
|
|
$max-width: 1180px;
|
|
|
|
// Responsiveness
|
|
|
|
/// Breakpoints map
|
|
/// @prop {String} keys - Keys are identifiers mapped to a given length
|
|
/// @prop {Map} values - Values are actual breakpoints expressed in pixels
|
|
$breakpoints: (
|
|
"x-small": 320px,
|
|
"small": 576px,
|
|
"medium": 768px,
|
|
"m-large": 900px,
|
|
"large": 1024px,
|
|
"x-large": 1200px,
|
|
);
|
|
|
|
// Assets
|
|
|
|
/// Relative or absolute URL where all assets are served from
|
|
/// @type String
|
|
/// @example scss - When using a CDN
|
|
/// $base-url: 'https://cdn.example.com/assets/';
|
|
$base-url: "/assets/";
|