diff options
| author | Armand Philippot <git@armandphilippot.com> | 2021-10-30 22:11:00 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2021-10-30 22:52:23 +0200 |
| commit | 3a3baddad1c801d77dc398d2c6980f3c14f4a47c (patch) | |
| tree | 9e06aef730504470111c010e53a1857f7b01ab83 /htdocs/src/scss/abstracts/_variables.scss | |
| parent | c3045b163e74b42c0a0e71c646740c76d3bb5ba1 (diff) | |
chore: move htdocs to repo root
Diffstat (limited to 'htdocs/src/scss/abstracts/_variables.scss')
| -rw-r--r-- | htdocs/src/scss/abstracts/_variables.scss | 103 |
1 files changed, 0 insertions, 103 deletions
diff --git a/htdocs/src/scss/abstracts/_variables.scss b/htdocs/src/scss/abstracts/_variables.scss deleted file mode 100644 index a8a22a8..0000000 --- a/htdocs/src/scss/abstracts/_variables.scss +++ /dev/null @@ -1,103 +0,0 @@ -@use "sass:math"; -@use "../abstracts/functions" as fun; - -//=========================================================================== -// Ratios -//=========================================================================== - -/// Ratios map -/// @prop {String} keys - Keys are identifiers mapped to a given ratio -/// @prop {Map} value - Value is actual ratio -$ratios: ( - "minor-second": 1.067, - "major-second": 1.125, - "minor-third": 1.2, - "major-third": 1.25, - "perfect-fourth": 1.333, - "augmented-fourth": 1.414, - "perfect-fifth": 1.5, - "golden-number": 1.618, -); - -// Cannot declare the following function in partials due to module loop. -// Also, it will only be used in this file so it is not a problem. - -/// Get ratio -/// @param {String} $name - Ratio name. -/// @return {Integer} The ratio value. -@function get-ratio($name) { - @return map-get($ratios, $name); -} - -//=========================================================================== -// Layout -//=========================================================================== - -/// Breakpoints map -/// @prop {String} keys - Keys are identifiers mapped to a given length -/// @prop {Map} values - Values are actual breakpoints expressed in pixels -$breakpoints: ( - "xs": fun.convert-px(568, "em"), - "sm": fun.convert-px(768, "em"), - "md": fun.convert-px(1024, "em"), - "lg": fun.convert-px(1200, "em"), - "xl": fun.convert-px(1600, "em"), - "2xl": fun.convert-px(1920, "em"), -); - -//=========================================================================== -// Fonts -//=========================================================================== - -/* stylelint-disable -- Fonts name are not keywords, lowercase is not needed. */ -/// Regular font family -/// @type List -$font-family_primary: ("Inter", "Liberation Sans", Arial, sans-serif); - -/// Alternative regular font family -/// @type List -$font-family_secondary: ("Kanit", "Liberation Sans", Arial, sans-serif); - -$line-height: get-ratio("golden-number"); - -$font-size_base: 16px; -$font-size_base-rem: fun.convert-px(16); // font-size_base without unit -$font-size_ratio: get-ratio("minor-third"); -$font-size_sm: $font-size_base-rem * math.pow($font-size_ratio, -1); -$font-size_md: $font-size_base-rem * math.pow($font-size_ratio, 0); -$font-size_lg: $font-size_base-rem * math.pow($font-size_ratio, 1); -$font-size_xl: $font-size_base-rem * math.pow($font-size_ratio, 2); -$font-size_2xl: $font-size_base-rem * math.pow($font-size_ratio, 3); -$font-size_3xl: $font-size_base-rem * math.pow($font-size_ratio, 4); - -//============================================================================ -// Spacings -//============================================================================ - -$spacing_ratio: get-ratio("golden-number"); -$spacing_base: $spacing_ratio * 1rem; - -$spacing_3xs: math.div($spacing_base, 4); -$spacing_2xs: math.div($spacing_base, 3); -$spacing_xs: math.div($spacing_base, 2); -$spacing_sm: math.div($spacing_base, 1.5); -$spacing_md: $spacing_base; -$spacing_lg: $spacing_base * 1.5; - -//============================================================================ -// Colors -//============================================================================ - -$color_black-squeeze: hsl(212, 55%, 97%); -$color_catskill-white: hsl(212, 53%, 92%); -$color_link-water: hsl(212, 51%, 87%); -$color_geyser: hsl(212, 27%, 83%); -$color_gull-gray: hsl(212, 15%, 66%); -$color_pale-sky: hsl(212, 13%, 46%); -$color_nile-blue: hsl(212, 47%, 19%); -$color_firefly: hsl(212, 45%, 11%); -$color_chambray: hsl(212, 45%, 40%); -$color_chathams-blue: hsl(212, 65%, 28%); -$color_chathams-blue-light: hsl(212, 90%, 30%); -$color_chathams-blue-light-opacity-25: hsla(212, 90%, 30%, 0.25); -$color_chathams-blue-dark: hsl(212, 70%, 25%); |
