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 | |
| parent | c3045b163e74b42c0a0e71c646740c76d3bb5ba1 (diff) | |
chore: move htdocs to repo root
Diffstat (limited to 'htdocs/src/scss/abstracts')
| -rw-r--r-- | htdocs/src/scss/abstracts/_functions.scss | 4 | ||||
| -rw-r--r-- | htdocs/src/scss/abstracts/_mixins.scss | 2 | ||||
| -rw-r--r-- | htdocs/src/scss/abstracts/_placeholders.scss | 32 | ||||
| -rw-r--r-- | htdocs/src/scss/abstracts/_variables.scss | 103 | ||||
| -rw-r--r-- | htdocs/src/scss/abstracts/functions/_convert.scss | 16 | ||||
| -rw-r--r-- | htdocs/src/scss/abstracts/functions/_css-vars.scss | 8 | ||||
| -rw-r--r-- | htdocs/src/scss/abstracts/functions/_encode.scss | 14 | ||||
| -rw-r--r-- | htdocs/src/scss/abstracts/functions/_str-replace.scss | 20 | ||||
| -rw-r--r-- | htdocs/src/scss/abstracts/mixins/_css-vars.scss | 20 | ||||
| -rw-r--r-- | htdocs/src/scss/abstracts/mixins/_media-queries.scss | 81 |
10 files changed, 0 insertions, 300 deletions
diff --git a/htdocs/src/scss/abstracts/_functions.scss b/htdocs/src/scss/abstracts/_functions.scss deleted file mode 100644 index 672e5e7..0000000 --- a/htdocs/src/scss/abstracts/_functions.scss +++ /dev/null @@ -1,4 +0,0 @@ -@forward "./functions/convert"; -@forward "./functions/css-vars"; -@forward "./functions/str-replace"; -@forward "./functions/encode"; diff --git a/htdocs/src/scss/abstracts/_mixins.scss b/htdocs/src/scss/abstracts/_mixins.scss deleted file mode 100644 index fd28631..0000000 --- a/htdocs/src/scss/abstracts/_mixins.scss +++ /dev/null @@ -1,2 +0,0 @@ -@forward "./mixins/css-vars"; -@forward "./mixins/media-queries"; diff --git a/htdocs/src/scss/abstracts/_placeholders.scss b/htdocs/src/scss/abstracts/_placeholders.scss deleted file mode 100644 index 079cae7..0000000 --- a/htdocs/src/scss/abstracts/_placeholders.scss +++ /dev/null @@ -1,32 +0,0 @@ -/// List Reset -%reset-list { - list-style-type: none; - margin: 0; - padding: 0; - - li { - margin-bottom: 0; - } -} - -/// Ordered List Reset -%reset-ordered-list { - @extend %reset-list; - - li { - counter-increment: none; - display: list-item; - - &::before { - display: none; - } - } -} - -/// Display an inline list with flexbox -%flex-list { - @extend %reset-list; - - display: flex; - flex-flow: row wrap; -} 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%); diff --git a/htdocs/src/scss/abstracts/functions/_convert.scss b/htdocs/src/scss/abstracts/functions/_convert.scss deleted file mode 100644 index 9f51dc7..0000000 --- a/htdocs/src/scss/abstracts/functions/_convert.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use "sass:math"; - -/// Convert px to rem or em. -/// @param {Number} $px Value in px -/// @param {String} $to Unit. Either "rem" or "em" -/// @param {Number} $standard 1rem (or 1em) = 16px -/// @return {Number} Value in rem or em -@function convert-px($px, $to: "rem", $standard: 16) { - @if $to == "rem" { - @return math.div($px, $standard) + 0rem; // stylelint-disable-line - } @else if $to == "em" { - @return math.div($px, $standard) + 0em; // stylelint-disable-line - } @else { - @error "`$to` must be either `rem` or `em`."; - } -} diff --git a/htdocs/src/scss/abstracts/functions/_css-vars.scss b/htdocs/src/scss/abstracts/functions/_css-vars.scss deleted file mode 100644 index 89e1a15..0000000 --- a/htdocs/src/scss/abstracts/functions/_css-vars.scss +++ /dev/null @@ -1,8 +0,0 @@ -/// Retrieve a CSS variable value with prefix -/// @see https://dev.to/felipperegazio/css-custom-properties-vars-with-sass-scss-a-practical-architecture-strategy-1m88 -/// @param {String} $name Variable name -/// @param {String} $prefix Variable prefix -/// @return {String} Variable in CSS format -@function get-var($name, $prefix: dap) { - @return var(--#{$prefix}-#{$name}); -} diff --git a/htdocs/src/scss/abstracts/functions/_encode.scss b/htdocs/src/scss/abstracts/functions/_encode.scss deleted file mode 100644 index 4350185..0000000 --- a/htdocs/src/scss/abstracts/functions/_encode.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use "str-replace" as fun; - -/// Encode a SVG. -/// @param {String} $svg A complete svg (`<svg>...</svg>`). -/// @return The encoded svg, ready to use for background-image. -@function encode-svg($svg) { - $svg-encoding: (("<", "%3C"), (">", "%3E"), ("#", "%23")); - - @each $char, $encoded in $svg-encoding { - $svg: fun.str-replace($svg, $char, $encoded); - } - - @return "data:image/svg+xml;utf8," + $svg; -} diff --git a/htdocs/src/scss/abstracts/functions/_str-replace.scss b/htdocs/src/scss/abstracts/functions/_str-replace.scss deleted file mode 100644 index 624bf33..0000000 --- a/htdocs/src/scss/abstracts/functions/_str-replace.scss +++ /dev/null @@ -1,20 +0,0 @@ -/// Replace `$search` with `$replace` in `$string` -/// @author Hugo Giraudel -/// @param {String} $string - Initial string -/// @param {String} $search - Substring to replace -/// @param {String} $replace ('') - New value -/// @return {String} - Updated string -@function str-replace($string, $search, $replace: "") { - $index: str-index($string, $search); - - @if $index { - @return str-slice($string, 1, $index - 1) + $replace + - str-replace( - str-slice($string, $index + str-length($search)), - $search, - $replace - ); - } - - @return $string; -} diff --git a/htdocs/src/scss/abstracts/mixins/_css-vars.scss b/htdocs/src/scss/abstracts/mixins/_css-vars.scss deleted file mode 100644 index 8e31c96..0000000 --- a/htdocs/src/scss/abstracts/mixins/_css-vars.scss +++ /dev/null @@ -1,20 +0,0 @@ -/// Declare a set of CSS variables properly prefixed. -/// -/// @see https://dev.to/felipperegazio/css-custom-properties-vars-with-sass-scss-a-practical-architecture-strategy-1m88 -/// -/// @param {List} $variables - A list of variable name and value. -/// @param {Bool} $root - Set vars at root. -/// @param {String} $prefix - The variables prefix. -@mixin set-vars($variables, $root: true, $prefix: "dap") { - @if $root { - :root { - @each $name, $value in $variables { - --#{$prefix}-#{$name}: #{$value}; - } - } - } @else { - @each $name, $value in $variables { - --#{$prefix}-#{$name}: #{$value}; - } - } -} diff --git a/htdocs/src/scss/abstracts/mixins/_media-queries.scss b/htdocs/src/scss/abstracts/mixins/_media-queries.scss deleted file mode 100644 index fcaea4b..0000000 --- a/htdocs/src/scss/abstracts/mixins/_media-queries.scss +++ /dev/null @@ -1,81 +0,0 @@ -@use "../variables" as var; - -/// Media query: media type -/// @param {String} $type - Media type: all, screen, print, retina. -/// @example scss - `@media only screen` equivalent is: -/// @include media("screen"); -@mixin media($type) { - @if $type == "retina" { - $type: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; - } @else if $type == "screen" or $type == "print" { - $type: "only #{$type}"; - } - - @media #{$type} { - @content; - } -} - -/// Media query: min-width / max-width -/// @param {String} $from - min-width breakpoint. -/// @param {String} $until - max-width breakpoint. -/// @example scss - `@media (min-width: "md")` equivalent is: -/// @include dimensions("md"); -@mixin dimensions($from: null, $until: null) { - $query: ""; - - @if $from { - @if type-of($from) == "string" { - $size: map-get(var.$breakpoints, $from); - $query: "(min-width: #{$size})"; - } @else { - @error "`$from` must be a string."; - } - } - - @if $from and $until { - $query: $query + " and "; - } - - @if $until { - @if type-of($until) == "string" { - $size: map-get(var.$breakpoints, $until); - $size: calc(#{$size} - 1px); - $query: $query + "(max-width: #{$size})"; - } @else { - @error "`$until` must be a string."; - } - } - - @media #{$query} { - @content; - } -} - -/// Media query: prefers-reduced-motion -/// @param {String} $value - Media query value: `no-preference` or `reduce`. -/// @example scss - @media (prefers-reduced-motion: "reduce") equivalent is: -/// @include motion("reduce"); -@mixin motion($value) { - @if $value == "no-preference" or $value == "reduce" { - @media (prefers-reduced-motion: #{$value}) { - @content; - } - } @else { - @error "Allowed values are `no-preference` and `reduce`."; - } -} - -/// Media query: any-pointer -/// @param {String} $value - Media query value: `fine`, `coarse` or `none`. -/// @example scss - @media (any-pointer: "fine") equivalent is: -/// @include pointer("fine"); -@mixin pointer($value) { - @if $value == "fine" or $value == "coarse" or $value == "none" { - @media (any-pointer: #{$value}) { - @content; - } - } @else { - @error "Allowed values are `fine`, `coarse` and `none`."; - } -} |
