54 lines
1.9 KiB
SCSS
54 lines
1.9 KiB
SCSS
/* Coolors Exported Palette - coolors.co/4f4e4d-1b998b-fffd82-ff9b71-e84855 */
|
|
|
|
/* HSL */
|
|
// $color1: hsla(30%, 1%, 31%, 1);
|
|
// $color2: hsla(173%, 70%, 35%, 1);
|
|
// $color3: hsla(59%, 100%, 75%, 1);
|
|
// $color4: hsla(18%, 100%, 72%, 1);
|
|
// $color5: hsla(355%, 78%, 60%, 1);
|
|
|
|
/* RGB */
|
|
$color1: rgba(79, 78, 77, 1);
|
|
$color2: rgba(27, 153, 139, 1);
|
|
$color3: rgba(255, 253, 130, 1);
|
|
$color4: rgba(255, 155, 113, 1);
|
|
$color5: rgba(232, 72, 85, 1);
|
|
|
|
$fg-primary: #222;
|
|
$bg-primary: #f0f0f0;
|
|
|
|
$screen-x-small: 320px;
|
|
$screen-small: 640px;
|
|
$screen-wide: 1200px;
|
|
$screen-ultrawide: 1600px;
|
|
|
|
/** ### forSize
|
|
* This mixin allows us to apply some rules selectively based on the screen
|
|
* size. There are three primary sizes: `small`, `medium`, and `large`, which
|
|
* are mutually exclusive. Additionally there are two additional sizes:
|
|
* `notSmall` and `ultraLarge`. `notSmall`, as the name implies matches any
|
|
* value which is not the small screen size, so it overlaps with medium,
|
|
* large, and ultraLarge. `ultraLarge` defines a wider minimum screen size
|
|
* than large, but neither large nor ultraLarge specify maximum widths,
|
|
* so ultraLarge is a strict subset of large. A screen large enough to match
|
|
* ultraLarge will also match large (compare with medium and large: matching
|
|
* medium means it will not match large, and vice versa). */
|
|
@mixin for-size($size) {
|
|
|
|
@if $size == xsmall {
|
|
@media screen and (max-width: $screen-x-small) { @content; }
|
|
} @else if $size == small {
|
|
@media screen and (max-width: $screen-small) { @content; }
|
|
} @else if $size == not-small {
|
|
@media screen and (min-width: $screen-small + 1) { @content; }
|
|
} @else if $size == medium {
|
|
@media screen and (min-width: $screen-small + 1) and (max-width: $screen-wide - 1) { @content; }
|
|
} @else if $size == large {
|
|
@media screen and (min-width: $screen-wide) { @content; }
|
|
} @else if $size == ultra-large {
|
|
@media screen and (min-width: $screen-ultrawide) { @content; }
|
|
}
|
|
}
|
|
|
|
|