diff options
author | thingsym <thingsym@gmail.com> | 2022-07-08 12:25:07 +0300 |
---|---|---|
committer | thingsym <thingsym@gmail.com> | 2022-07-08 12:25:07 +0300 |
commit | 0709bf4d8ecd1d0c9ad9db237ea99fc581beb15a (patch) | |
tree | f96b59ef903963133ab469e2fe803f0a86aa87e8 /src/scss | |
parent | f2816255e4d518e6bd89f8b08f71d3bd9961c4fb (diff) | |
parent | c963a92d64ee2b3c82e443e8041d71b59a72281d (diff) |
Diffstat (limited to 'src/scss')
-rw-r--r-- | src/scss/_variable.scss | 9 | ||||
-rw-r--r-- | src/scss/foundation/_element.scss | 12 | ||||
-rw-r--r-- | src/scss/function/_calc-font-size.scss | 22 | ||||
-rw-r--r-- | src/scss/function/_calc-stack.scss | 30 | ||||
-rw-r--r-- | src/scss/function/_contrast-color.scss | 2 | ||||
-rw-r--r-- | src/scss/function/_index.scss | 4 | ||||
-rw-r--r-- | src/scss/function/_strip-unit.scss | 2 |
7 files changed, 48 insertions, 33 deletions
diff --git a/src/scss/_variable.scss b/src/scss/_variable.scss index 6c9b578..6a010ae 100644 --- a/src/scss/_variable.scss +++ b/src/scss/_variable.scss @@ -2,10 +2,11 @@ $default-layout-width: 1024px !default; -$default-font-size: 100% !default; -$default-line-space: 8px !default; -$default-line-height: calc-stack.line-height($default-line-space, $default-font-size) !default; -$default-stack: calc-stack.stack($default-line-height, $default-font-size) * 4 !default; +$default-base-font-size: 18px !default; +$default-font-size: 18px !default; +$default-line-space: 6px !default; +$default-line-height: calc-stack.line-height($default-line-space, $default-font-size, $default-base-font-size) !default; +$default-stack: calc-stack.stack($default-line-height, $default-font-size, $default-base-font-size) !default; $default-layout-margin: 0 !default; $default-layout-padding: $default-stack !default; diff --git a/src/scss/foundation/_element.scss b/src/scss/foundation/_element.scss index 3444edf..d5bc1ae 100644 --- a/src/scss/foundation/_element.scss +++ b/src/scss/foundation/_element.scss @@ -50,17 +50,17 @@ h3 { line-height: calc-stack.line-height(variable.$default-line-space, 160%); } h4 { - font-size: 140%; - line-height: calc-stack.line-height(variable.$default-line-space, 140%); + font-size: 125%; + line-height: calc-stack.line-height(variable.$default-line-space, 125%); } h5 { - font-size: 120%; - line-height: calc-stack.line-height(variable.$default-line-space, 120%); -} -h6 { font-size: 100%; line-height: calc-stack.line-height(variable.$default-line-space, 100%); } +h6 { + font-size: 80%; + line-height: calc-stack.line-height(variable.$default-line-space, 80%); +} a { color: var(--custom-link-text-color, variable.$default-link-text-color); diff --git a/src/scss/function/_calc-font-size.scss b/src/scss/function/_calc-font-size.scss index 1e54885..1e5e856 100644 --- a/src/scss/function/_calc-font-size.scss +++ b/src/scss/function/_calc-font-size.scss @@ -1,5 +1,9 @@ @charset "utf-8"; +// Built-In Modules +@use 'sass:math'; + +// Included Modules @use 'strip-unit'; // =================================================================== @@ -7,18 +11,18 @@ // =================================================================== @function px2em($px, $base: 16) { - @return strip-unit.strip-unit($px) / strip-unit.strip-unit($base) * 1em; + @return math.div(strip-unit.strip-unit($px), strip-unit.strip-unit($base)) * 1em; } @function px2rem($px, $base: 16) { - @return strip-unit.strip-unit($px) / strip-unit.strip-unit($base) * 1rem; + @return math.div(strip-unit.strip-unit($px), strip-unit.strip-unit($base)) * 1rem; } // =================================================================== // percent to px -// =================================================================== +// ========================================================n=========== @function percent2px($percent, $base: 16) { - @return strip-unit.strip-unit($base) * (strip-unit.strip-unit($percent) / 100) * 1px; + @return strip-unit.strip-unit($base) * math.div(strip-unit.strip-unit($percent), 100) * 1px; } // =================================================================== @@ -26,11 +30,13 @@ // =================================================================== @function percent2em($percent, $base: 16) { - @return (strip-unit.strip-unit($base) * (strip-unit.strip-unit($percent) / 100)) / strip-unit.strip-unit($base) * 1em; + $ratio: math.div((strip-unit.strip-unit($percent), 100)); + @return math.div(strip-unit.strip-unit($base) * $ratio, strip-unit.strip-unit($base)) * 1em; } @function percent2rem($percent, $base: 16) { - @return (strip-unit.strip-unit($base) * (strip-unit.strip-unit($percent) / 100)) / strip-unit.strip-unit($base) * 1rem; + $ratio: math.div((strip-unit.strip-unit($percent), 100)); + @return math.div((strip-unit.strip-unit($base) * $ratio), strip-unit.strip-unit($base)) * 1rem; } // =================================================================== @@ -38,9 +44,9 @@ // =================================================================== @function em2px($em, $base: 16) { - @return strip-unit.strip-unit($em) * strip-unit.strip-unit($base) * 1px; + @return strip-unit.strip-unit($em) * strip-unit.strip-unit($base) * 1px; } @function rem2px($rem, $base: 16) { - @return strip-unit.strip-unit($rem) * strip-unit.strip-unit($base) * 1px; + @return strip-unit.strip-unit($rem) * strip-unit.strip-unit($base) * 1px; } diff --git a/src/scss/function/_calc-stack.scss b/src/scss/function/_calc-stack.scss index cb9f05e..c9c7b05 100644 --- a/src/scss/function/_calc-stack.scss +++ b/src/scss/function/_calc-stack.scss @@ -7,22 +7,34 @@ @use 'calc-font-size'; @use 'strip-unit'; -@function stack($line-height: 1, $font-size: 16px, $base: 16px) { - $line-height: strip-unit.strip-unit($line-height) * strip-unit.strip-unit($base); - @return $line-height / strip-unit.strip-unit($font-size) * 1rem; +@function stack($line-height: 1, $font-size: 16px, $base-size: 16px) { + @if math.unit($font-size) == '%' { + $font-size: calc-font-size.percent2px($font-size, $base-size); + } @else if math.unit($font-size) == 'em' { + $font-size: calc-font-size.em2px($font-size, $base-size); + } @else if math.unit($font-size) == 'rem' { + $font-size: calc-font-size.rem2px($font-size, $base-size); + } + + $line-height-px-unit: strip-unit.strip-unit($line-height) * strip-unit.strip-unit($font-size); + + $stack: calc-font-size.px2rem($line-height-px-unit, $base-size); + + @return $stack; } -@function line-height($line-space: 4px, $font-size: 16px, $base: 16px) { +@function line-height($line-space: 4px, $font-size: 16px, $base-size: 16px) { @if math.unit($font-size) == '%' { - $font-size: calc-font-size.percent2px($font-size, $base); + $font-size: calc-font-size.percent2px($font-size, $base-size); } @else if math.unit($font-size) == 'em' { - $font-size: calc-font-size.em2px($font-size, $base); - } @else if math.unit($font-size,) == 'rem' { - $font-size: calc-font-size.rem2px($font-size, $base); + $font-size: calc-font-size.em2px($font-size, $base-size); + } @else if math.unit($font-size) == 'rem' { + $font-size: calc-font-size.rem2px($font-size, $base-size); } $font-size: strip-unit.strip-unit($font-size); $line-space: strip-unit.strip-unit($line-space); + $line-height: math.div(($line-space * 2) + $font-size, $font-size); - @return (($line-space * 2) + $font-size) / $font-size; + @return $line-height; } diff --git a/src/scss/function/_contrast-color.scss b/src/scss/function/_contrast-color.scss index 3867958..685d0d5 100644 --- a/src/scss/function/_contrast-color.scss +++ b/src/scss/function/_contrast-color.scss @@ -22,5 +22,5 @@ } @function brightness($color: null) { - @return ((color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114)) / 1000; + @return math.div((color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114), 1000); } diff --git a/src/scss/function/_index.scss b/src/scss/function/_index.scss deleted file mode 100644 index 41e990a..0000000 --- a/src/scss/function/_index.scss +++ /dev/null @@ -1,4 +0,0 @@ -@use 'calc-font-size'; -@use 'calc-stack'; -@use 'strip-unit'; -@use 'contrast-color'; diff --git a/src/scss/function/_strip-unit.scss b/src/scss/function/_strip-unit.scss index 99794b6..dd93185 100644 --- a/src/scss/function/_strip-unit.scss +++ b/src/scss/function/_strip-unit.scss @@ -6,7 +6,7 @@ @function strip-unit($value) { @if meta.type-of($value) == 'number' and math.is-unitless($value) == false { - @return $value / ($value * 0 + 1); + @return math.div($value, $value * 0 + 1); } @else if meta.type-of($value) == 'number' { @return $value; } @else { |