diff --git a/docs/documentation/scss-legacy/Breakpoints.html b/docs/documentation/scss-legacy/Breakpoints.html index 49ad986..bcdf420 100644 --- a/docs/documentation/scss-legacy/Breakpoints.html +++ b/docs/documentation/scss-legacy/Breakpoints.html @@ -113,13 +113,13 @@

Breakpoints


diff --git a/docs/documentation/scss-legacy/Breakpoints_attribute-for-breakpoints.html b/docs/documentation/scss-legacy/Breakpoints_attribute-for-breakpoints.html index 7ebe076..4633edf 100644 --- a/docs/documentation/scss-legacy/Breakpoints_attribute-for-breakpoints.html +++ b/docs/documentation/scss-legacy/Breakpoints_attribute-for-breakpoints.html @@ -360,13 +360,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Breakpoints_attributes-for-breakpoints.html b/docs/documentation/scss-legacy/Breakpoints_attributes-for-breakpoints.html index 8d192b2..dd8d406 100644 --- a/docs/documentation/scss-legacy/Breakpoints_attributes-for-breakpoints.html +++ b/docs/documentation/scss-legacy/Breakpoints_attributes-for-breakpoints.html @@ -333,13 +333,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Breakpoints_breakpoint-value.html b/docs/documentation/scss-legacy/Breakpoints_breakpoint-value.html index 20d17fe..bc57c76 100644 --- a/docs/documentation/scss-legacy/Breakpoints_breakpoint-value.html +++ b/docs/documentation/scss-legacy/Breakpoints_breakpoint-value.html @@ -330,13 +330,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Breakpoints_breakpoint.html b/docs/documentation/scss-legacy/Breakpoints_breakpoint.html index 48b405c..b584a02 100644 --- a/docs/documentation/scss-legacy/Breakpoints_breakpoint.html +++ b/docs/documentation/scss-legacy/Breakpoints_breakpoint.html @@ -270,13 +270,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Breakpoints_build-breakpoint-query.html b/docs/documentation/scss-legacy/Breakpoints_build-breakpoint-query.html index 984b7b3..85fde6d 100644 --- a/docs/documentation/scss-legacy/Breakpoints_build-breakpoint-query.html +++ b/docs/documentation/scss-legacy/Breakpoints_build-breakpoint-query.html @@ -335,13 +335,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Breakpoints_build-breakpoint-range.html b/docs/documentation/scss-legacy/Breakpoints_build-breakpoint-range.html index 9353a68..4ec24b7 100644 --- a/docs/documentation/scss-legacy/Breakpoints_build-breakpoint-range.html +++ b/docs/documentation/scss-legacy/Breakpoints_build-breakpoint-range.html @@ -342,13 +342,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Breakpoints_get-auto-breakpoint.html b/docs/documentation/scss-legacy/Breakpoints_get-auto-breakpoint.html index 4342472..a7fba2e 100644 --- a/docs/documentation/scss-legacy/Breakpoints_get-auto-breakpoint.html +++ b/docs/documentation/scss-legacy/Breakpoints_get-auto-breakpoint.html @@ -236,13 +236,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Breakpoints_is-named-breakpoint.html b/docs/documentation/scss-legacy/Breakpoints_is-named-breakpoint.html index 28f7c12..a27ccf4 100644 --- a/docs/documentation/scss-legacy/Breakpoints_is-named-breakpoint.html +++ b/docs/documentation/scss-legacy/Breakpoints_is-named-breakpoint.html @@ -276,13 +276,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint-for-attribute.html b/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint-for-attribute.html index 3a2f6ec..018733c 100644 --- a/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint-for-attribute.html +++ b/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint-for-attribute.html @@ -352,13 +352,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint-for-attributes.html b/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint-for-attributes.html index d7e581d..5a21f83 100644 --- a/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint-for-attributes.html +++ b/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint-for-attributes.html @@ -324,13 +324,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint.html b/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint.html index 42eda00..23cab26 100644 --- a/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint.html +++ b/docs/documentation/scss-legacy/Breakpoints_overwrite-breakpoint.html @@ -209,13 +209,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Breakpoints_reset-auto-breakpoint.html b/docs/documentation/scss-legacy/Breakpoints_reset-auto-breakpoint.html index fe9e640..fd42304 100644 --- a/docs/documentation/scss-legacy/Breakpoints_reset-auto-breakpoint.html +++ b/docs/documentation/scss-legacy/Breakpoints_reset-auto-breakpoint.html @@ -213,13 +213,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Breakpoints_set-auto-breakpoint.html b/docs/documentation/scss-legacy/Breakpoints_set-auto-breakpoint.html index 7a0171d..2c9962f 100644 --- a/docs/documentation/scss-legacy/Breakpoints_set-auto-breakpoint.html +++ b/docs/documentation/scss-legacy/Breakpoints_set-auto-breakpoint.html @@ -278,13 +278,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Content.html b/docs/documentation/scss-legacy/Content.html new file mode 100644 index 0000000..5511b01 --- /dev/null +++ b/docs/documentation/scss-legacy/Content.html @@ -0,0 +1,128 @@ + + + + + JSDoc: Namespace: Content + + + + + + + + + + +
+ +

Namespace: Content

+ + + + + + +
+ +
+ +

Content

+ + +
+ +
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + +
+ + + + + + + + + + + + + + + + + + +
+ +
+ + + + +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/documentation/scss-legacy/Content_base-font-size-value.html b/docs/documentation/scss-legacy/Content_base-font-size-value.html new file mode 100644 index 0000000..637b83a --- /dev/null +++ b/docs/documentation/scss-legacy/Content_base-font-size-value.html @@ -0,0 +1,242 @@ + + + + + JSDoc: Namespace: Content:base-font-size-value + + + + + + + + + + +
+ +

Namespace: Content:base-font-size-value

+ + + + + + +
+ +
+ +

Content:base-font-size-value

+ + +
+ +
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + +
+ + + + + + + + + + + + + + +

Methods

+ + + + + + +

base-font-size-value() → {Number}

+ + + + + +
+

Returns the base font size, which is most likely applied to the html/body elements and acts as the base +for rem calculations.

+
+ + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + + + + + + + + + + +
Returns:
+ + +
+ the currently set jig base font size value +
+ + + +
+
+ Type +
+
+ +Number + + +
+
+ + + + +
Example
+ + 
font-size: base-font-size-value();
+ + + + + + + + + +
+ +
+ + + + +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/documentation/scss-legacy/Content_content-holder.html b/docs/documentation/scss-legacy/Content_content-holder.html new file mode 100644 index 0000000..fb14e53 --- /dev/null +++ b/docs/documentation/scss-legacy/Content_content-holder.html @@ -0,0 +1,334 @@ + + + + + JSDoc: Namespace: Content:content-holder + + + + + + + + + + +
+ +

Namespace: Content:content-holder

+ + + + + + +
+ +
+ +

Content:content-holder

+ + +
+ +
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + +
+ + + + + + + + + + + + + + +

Methods

+ + + + + + +

content-holder($paddedopt, $centeredopt)

+ + + + + +
+

Adds properties to the current element, which make it a "content holder", meaning, that it +adheres to the defined min/max content widths and keeps the content away from the browser edges by +defining margins according to the defined responsive content paddings.

+

Min and max widths are only rendered if they are defined in the jig config, as are content paddings.

+

A content holder can be used as the base container definition for non-breakout elements on a page, +which is not supposed to grow indefinitely horizontally.

+

A content holder can be a grid container at the same time, these things do not exclude themselves and +are even a very common use case.

+
+ + + + + + + + + +
Parameters:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeAttributesDefaultDescription
$padded + + +Boolean + + + + + + <optional>
+ + + + + + 		+ + true + +

if true, config-defined responsive content padding gets applied to the element

$centered + + +Boolean + + + + + + <optional>
+ + + + + + 		+ + true + +

if true, element gets auto-centered using auto margins

+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + + + + + + + + + + + + +
Example
+ + 
@include content-holder();
+ + + + + + + + + +
+ +
+ + + + +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/documentation/scss-legacy/Content_content-padding-value.html b/docs/documentation/scss-legacy/Content_content-padding-value.html new file mode 100644 index 0000000..4666e2b --- /dev/null +++ b/docs/documentation/scss-legacy/Content_content-padding-value.html @@ -0,0 +1,325 @@ + + + + + JSDoc: Namespace: Content:content-padding-value + + + + + + + + + + +
+ +

Namespace: Content:content-padding-value

+ + + + + + +
+ +
+ +

Content:content-padding-value

+ + +
+ +
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + +
+ + + + + + + + + + + + + + +

Methods

+ + + + + + +

content-padding-value($breakpointopt) → {Number}

+ + + + + +
+

Returns the defined content padding for a/the current breakpoint.

+
+ + + + + + + + + +
Parameters:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeAttributesDefaultDescription
$breakpoint + + +String + + + + + + <optional>
+ + + + + + 		+ + 'auto' + +

a defined breakpoint name or "auto", to use the current breakpoint at the point of usage

+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + + + + + + + + +
Throws:
+ + + +
+ +

error if no content padding value could be determined, based on given breakpoint

+ +
+ + + + + +
Returns:
+ + +
+ the determined content padding value +
+ + + +
+
+ Type +
+
+ +Number + + +
+
+ + + + +
Example
+ + 
@include breakpoint(medium){
+  padding-left: content-padding-value();
+}
+margin-right: content-padding-value($breakpoint:'small');
+ + + + + + + + + +
+ +
+ + + + +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/documentation/scss-legacy/Content_content-width-value.html b/docs/documentation/scss-legacy/Content_content-width-value.html new file mode 100644 index 0000000..900317a --- /dev/null +++ b/docs/documentation/scss-legacy/Content_content-width-value.html @@ -0,0 +1,355 @@ + + + + + JSDoc: Namespace: Content:content-width-value + + + + + + + + + + +
+ +

Namespace: Content:content-width-value

+ + + + + + +
+ +
+ +

Content:content-width-value

+ + +
+ +
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + +
+ + + + + + + + + + + + + + +

Methods

+ + + + + + +

content-width-value($min-maxopt, $defaultopt, nullable) → {Number|null}

+ + + + + +
+

Returns the defined min/max content width.

+
+ + + + + + + + + +
Parameters:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeAttributesDefaultDescription
$min-max + + +String + + + + + + <optional>
+ + + + + + 		+ + 'max' + +

either "min" or "max", defines if min or max content-width is returned

$default + + +Number + + + + + + <optional>
+ + + + <nullable>
+ + + + 		+ + null + +

the default value to return if the width definition cannot be found

+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + + + + + + + + + + +
Returns:
+ + +
+ the determined content width value, may be null if width is not defined (depending on default value) +
+ + + +
+
+ Type +
+
+ +Number +| + +null + + +
+
+ + + + +
Example
+ + 
max-width: content-width-value();
+min-width: content-width-value('min', 0);
+ + + + + + + + + +
+ +
+ + + + +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/documentation/scss-legacy/Grid.html b/docs/documentation/scss-legacy/Grid.html index ea682b5..c01b1c3 100644 --- a/docs/documentation/scss-legacy/Grid.html +++ b/docs/documentation/scss-legacy/Grid.html @@ -113,13 +113,13 @@

Grid


diff --git a/docs/documentation/scss-legacy/Grid_grid-container.html b/docs/documentation/scss-legacy/Grid_grid-container.html index a2b8d93..827143e 100644 --- a/docs/documentation/scss-legacy/Grid_grid-container.html +++ b/docs/documentation/scss-legacy/Grid_grid-container.html @@ -213,13 +213,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Grid_grid-item-align.html b/docs/documentation/scss-legacy/Grid_grid-item-align.html index b7b782c..aa31185 100644 --- a/docs/documentation/scss-legacy/Grid_grid-item-align.html +++ b/docs/documentation/scss-legacy/Grid_grid-item-align.html @@ -322,13 +322,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Grid_grid-item.html b/docs/documentation/scss-legacy/Grid_grid-item.html index b502fdb..a513c5a 100644 --- a/docs/documentation/scss-legacy/Grid_grid-item.html +++ b/docs/documentation/scss-legacy/Grid_grid-item.html @@ -500,13 +500,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Grid_gutter-value.html b/docs/documentation/scss-legacy/Grid_gutter-value.html index 13b7e81..5fcc019 100644 --- a/docs/documentation/scss-legacy/Grid_gutter-value.html +++ b/docs/documentation/scss-legacy/Grid_gutter-value.html @@ -431,13 +431,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Spacing.html b/docs/documentation/scss-legacy/Spacing.html index 309da6e..3c8e1a5 100644 --- a/docs/documentation/scss-legacy/Spacing.html +++ b/docs/documentation/scss-legacy/Spacing.html @@ -113,13 +113,13 @@

Spacing


diff --git a/docs/documentation/scss-legacy/Spacing_spacing-based-attribute.html b/docs/documentation/scss-legacy/Spacing_spacing-based-attribute.html index 0f6705b..dc8abab 100644 --- a/docs/documentation/scss-legacy/Spacing_spacing-based-attribute.html +++ b/docs/documentation/scss-legacy/Spacing_spacing-based-attribute.html @@ -364,13 +364,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Spacing_spacing-based-attributes.html b/docs/documentation/scss-legacy/Spacing_spacing-based-attributes.html index 29f1723..75f90c0 100644 --- a/docs/documentation/scss-legacy/Spacing_spacing-based-attributes.html +++ b/docs/documentation/scss-legacy/Spacing_spacing-based-attributes.html @@ -342,13 +342,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Spacing_spacing-value.html b/docs/documentation/scss-legacy/Spacing_spacing-value.html index 72b147f..b58b1e3 100644 --- a/docs/documentation/scss-legacy/Spacing_spacing-value.html +++ b/docs/documentation/scss-legacy/Spacing_spacing-value.html @@ -351,13 +351,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Util.html b/docs/documentation/scss-legacy/Util.html index f377f41..c3bcd4e 100644 --- a/docs/documentation/scss-legacy/Util.html +++ b/docs/documentation/scss-legacy/Util.html @@ -113,13 +113,13 @@

Util


diff --git a/docs/documentation/scss-legacy/Util_map-get-deep.html b/docs/documentation/scss-legacy/Util_map-get-deep.html index 6799efd..42cba16 100644 --- a/docs/documentation/scss-legacy/Util_map-get-deep.html +++ b/docs/documentation/scss-legacy/Util_map-get-deep.html @@ -305,13 +305,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Util_map-next.html b/docs/documentation/scss-legacy/Util_map-next.html index 7a65aa6..0c0f644 100644 --- a/docs/documentation/scss-legacy/Util_map-next.html +++ b/docs/documentation/scss-legacy/Util_map-next.html @@ -304,13 +304,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Util_str-join.html b/docs/documentation/scss-legacy/Util_str-join.html index 215936c..c9f272d 100644 --- a/docs/documentation/scss-legacy/Util_str-join.html +++ b/docs/documentation/scss-legacy/Util_str-join.html @@ -302,13 +302,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Util_strip-unit.html b/docs/documentation/scss-legacy/Util_strip-unit.html index 2b3480b..5f15bcc 100644 --- a/docs/documentation/scss-legacy/Util_strip-unit.html +++ b/docs/documentation/scss-legacy/Util_strip-unit.html @@ -276,13 +276,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Util_to-em.html b/docs/documentation/scss-legacy/Util_to-em.html index 31f6474..efa6166 100644 --- a/docs/documentation/scss-legacy/Util_to-em.html +++ b/docs/documentation/scss-legacy/Util_to-em.html @@ -308,13 +308,13 @@
Example

diff --git a/docs/documentation/scss-legacy/Util_to-rem.html b/docs/documentation/scss-legacy/Util_to-rem.html index a224bc2..a2b727c 100644 --- a/docs/documentation/scss-legacy/Util_to-rem.html +++ b/docs/documentation/scss-legacy/Util_to-rem.html @@ -342,13 +342,13 @@
Example

diff --git a/docs/documentation/scss-legacy/breakpoints.scss.html b/docs/documentation/scss-legacy/breakpoints.scss.html index 7368e2a..d775950 100644 --- a/docs/documentation/scss-legacy/breakpoints.scss.html +++ b/docs/documentation/scss-legacy/breakpoints.scss.html @@ -635,13 +635,13 @@

Source: breakpoints.scss


diff --git a/docs/documentation/scss-legacy/content.scss.html b/docs/documentation/scss-legacy/content.scss.html new file mode 100644 index 0000000..7233719 --- /dev/null +++ b/docs/documentation/scss-legacy/content.scss.html @@ -0,0 +1,218 @@ + + + + + JSDoc: Source: content.scss + + + + + + + + + + +
+ +

Source: content.scss

+ + + + + + +
+
+ 
/**
+ * @namespace Content
+ */
+
+
+
+/**
+ * @namespace Content:content-holder
+ */
+
+/**
+ * Adds properties to the current element, which make it a "content holder", meaning, that it
+ * adheres to the defined min/max content widths and keeps the content away from the browser edges by
+ * defining margins according to the defined responsive content paddings.
+ *
+ * Min and max widths are only rendered if they are defined in the jig config, as are content paddings.
+ *
+ * A content holder can be used as the base container definition for non-breakout elements on a page,
+ * which is not supposed to grow indefinitely horizontally.
+ *
+ * A content holder can be a grid container at the same time, these things do not exclude themselves and
+ * are even a very common use case.
+ *
+ * @memberof Content:content-holder
+ * @function
+ * @name content-holder
+ * @alias content-holder
+ *
+ * @param {Boolean} [$padded=true] - if true, config-defined responsive content padding gets applied to the element
+ * @param {Boolean} [$centered=true] - if true, element gets auto-centered using auto margins
+ *
+ * @example
+ * \@include content-holder();
+ */
+@mixin content-holder($padded:true, $centered:false){
+	$breakpoint-names: map-keys($jig---breakpoint-config);
+	$smallest-breakpoint: nth($breakpoint-names, 1);
+	$largest-breakpoint: nth($breakpoint-names, -1);
+
+	$min-width: content-width-value('min');
+	$max-width: content-width-value('max');
+
+	@if $min-width != null {
+		min-width: $min-width + (2 * content-padding-value($smallest-breakpoint));
+	}
+	@if $max-width != null {
+		max-width: $max-width + (2 * content-padding-value($largest-breakpoint));
+	}
+
+	@if $centered {
+		margin-right: auto;
+		margin-left: auto;
+	}
+
+	@if $padded {
+		$content-padding: map-get($jig---content-config, 'padding');
+
+		@if $content-padding != null {
+			@include attributes-for-breakpoints((
+				'padding-left' : $content-padding,
+				'padding-right' : $content-padding,
+			));
+		}
+	}
+}
+
+
+
+/**
+ * @namespace Content:content-padding-value
+ */
+
+/**
+ * Returns the defined content padding for a/the current breakpoint.
+ *
+ * @memberof Content:content-padding-value
+ * @function
+ * @name content-padding-value
+ * @alias content-padding-value
+ *
+ * @param {String} [$breakpoint='auto'] - a defined breakpoint name or "auto", to use the current breakpoint at the point of usage
+ * @returns {Number} the determined content padding value
+ * @throws error if no content padding value could be determined, based on given breakpoint
+ *
+ * @example
+ * \@include breakpoint(medium){
+ *   padding-left: content-padding-value();
+ * }
+ * margin-right: content-padding-value($breakpoint:'small');
+ */
+@function content-padding-value($breakpoint:'auto'){
+	$padding: map-get($jig---content-config, 'padding');
+	$res: null;
+
+	@if $padding != null {
+		@if type-of($padding) == 'map' {
+			$res: breakpoint-value($padding, $breakpoint);
+		} @else {
+			$res: $padding;
+		}
+	}
+
+	@if $res == null {
+		@error 'jig:content-padding-value | could not resolve content padding, check breakpoint';
+	}
+
+	@return $res;
+}
+
+
+
+/**
+ * @namespace Content:content-width-value
+ */
+
+/**
+ * Returns the defined min/max content width.
+ *
+ * @memberof Content:content-width-value
+ * @function
+ * @name content-width-value
+ * @alias content-width-value
+ *
+ * @param {String} [$min-max='max'] - either "min" or "max", defines if min or max content-width is returned
+ * @param {?Number} [$default=null] - the default value to return if the width definition cannot be found
+ * @returns {Number|null} the determined content width value, may be null if width is not defined (depending on default value)
+ *
+ * @example
+ * max-width: content-width-value();
+ * min-width: content-width-value('min', 0);
+ */
+@function content-width-value($min-max:'max', $default:null){
+	$width: map-get($jig---content-config, 'max-width');
+	@if $min-max == 'min' {
+		$width: map-get($jig---content-config, 'min-width');
+	}
+
+	@if $width == null {
+		$width: $default;
+	}
+
+	@return $width;
+}
+
+
+
+/**
+ * @namespace Content:base-font-size-value
+ */
+
+/**
+ * Returns the base font size, which is most likely applied to the html/body elements and acts as the base
+ * for rem calculations.
+ *
+ * @memberof Content:base-font-size-value
+ * @function
+ * @name base-font-size-value
+ * @alias base-font-size-value
+ *
+ * @returns {Number} the currently set jig base font size value
+ *
+ * @example
+ * font-size: base-font-size-value();
+ */
+@function base-font-size-value(){
+	@return $jig---base-font-size;
+}
+
+
+
+ + + + +
+ + + +
+ + + + + + + diff --git a/docs/documentation/scss-legacy/grid.scss.html b/docs/documentation/scss-legacy/grid.scss.html index 9432610..23f2158 100644 --- a/docs/documentation/scss-legacy/grid.scss.html +++ b/docs/documentation/scss-legacy/grid.scss.html @@ -256,13 +256,13 @@

Source: grid.scss


diff --git a/docs/documentation/scss-legacy/index.html b/docs/documentation/scss-legacy/index.html index caab860..dce0a58 100644 --- a/docs/documentation/scss-legacy/index.html +++ b/docs/documentation/scss-legacy/index.html @@ -311,13 +311,13 @@

Why are the media queries/breakpoints in this project using em instead of re
diff --git a/docs/documentation/scss-legacy/spacing.scss.html b/docs/documentation/scss-legacy/spacing.scss.html index 39dd566..bd97a83 100644 --- a/docs/documentation/scss-legacy/spacing.scss.html +++ b/docs/documentation/scss-legacy/spacing.scss.html @@ -163,13 +163,13 @@

Source: spacing.scss


diff --git a/docs/documentation/scss-legacy/util.scss.html b/docs/documentation/scss-legacy/util.scss.html index 2d6a49e..9ff9ca8 100644 --- a/docs/documentation/scss-legacy/util.scss.html +++ b/docs/documentation/scss-legacy/util.scss.html @@ -287,13 +287,13 @@

Source: util.scss


diff --git a/docs/documentation/scss/Breakpoints.html b/docs/documentation/scss/Breakpoints.html index 0d28f77..6f20901 100644 --- a/docs/documentation/scss/Breakpoints.html +++ b/docs/documentation/scss/Breakpoints.html @@ -113,13 +113,13 @@

Breakpoints


diff --git a/docs/documentation/scss/Breakpoints_attribute-for-breakpoints.html b/docs/documentation/scss/Breakpoints_attribute-for-breakpoints.html index 36f95fe..8fc6d8f 100644 --- a/docs/documentation/scss/Breakpoints_attribute-for-breakpoints.html +++ b/docs/documentation/scss/Breakpoints_attribute-for-breakpoints.html @@ -360,13 +360,13 @@
Example

diff --git a/docs/documentation/scss/Breakpoints_attributes-for-breakpoints.html b/docs/documentation/scss/Breakpoints_attributes-for-breakpoints.html index b119fce..a38fb99 100644 --- a/docs/documentation/scss/Breakpoints_attributes-for-breakpoints.html +++ b/docs/documentation/scss/Breakpoints_attributes-for-breakpoints.html @@ -333,13 +333,13 @@
Example

diff --git a/docs/documentation/scss/Breakpoints_breakpoint-value.html b/docs/documentation/scss/Breakpoints_breakpoint-value.html index 9afe144..ffaceaf 100644 --- a/docs/documentation/scss/Breakpoints_breakpoint-value.html +++ b/docs/documentation/scss/Breakpoints_breakpoint-value.html @@ -330,13 +330,13 @@
Example

diff --git a/docs/documentation/scss/Breakpoints_breakpoint.html b/docs/documentation/scss/Breakpoints_breakpoint.html index 05fe17f..fc0c293 100644 --- a/docs/documentation/scss/Breakpoints_breakpoint.html +++ b/docs/documentation/scss/Breakpoints_breakpoint.html @@ -270,13 +270,13 @@
Example

diff --git a/docs/documentation/scss/Breakpoints_build-breakpoint-query.html b/docs/documentation/scss/Breakpoints_build-breakpoint-query.html index c3640d1..47e5c32 100644 --- a/docs/documentation/scss/Breakpoints_build-breakpoint-query.html +++ b/docs/documentation/scss/Breakpoints_build-breakpoint-query.html @@ -335,13 +335,13 @@
Example

diff --git a/docs/documentation/scss/Breakpoints_build-breakpoint-range.html b/docs/documentation/scss/Breakpoints_build-breakpoint-range.html index 3d7f9b6..9dad1cc 100644 --- a/docs/documentation/scss/Breakpoints_build-breakpoint-range.html +++ b/docs/documentation/scss/Breakpoints_build-breakpoint-range.html @@ -342,13 +342,13 @@
Example

diff --git a/docs/documentation/scss/Breakpoints_get-auto-breakpoint.html b/docs/documentation/scss/Breakpoints_get-auto-breakpoint.html index b76b1b4..d90dab6 100644 --- a/docs/documentation/scss/Breakpoints_get-auto-breakpoint.html +++ b/docs/documentation/scss/Breakpoints_get-auto-breakpoint.html @@ -236,13 +236,13 @@
Example

diff --git a/docs/documentation/scss/Breakpoints_is-named-breakpoint.html b/docs/documentation/scss/Breakpoints_is-named-breakpoint.html index 3a818ef..d9fc0c8 100644 --- a/docs/documentation/scss/Breakpoints_is-named-breakpoint.html +++ b/docs/documentation/scss/Breakpoints_is-named-breakpoint.html @@ -276,13 +276,13 @@
Example

diff --git a/docs/documentation/scss/Breakpoints_overwrite-breakpoint-for-attribute.html b/docs/documentation/scss/Breakpoints_overwrite-breakpoint-for-attribute.html index 2004160..914b13d 100644 --- a/docs/documentation/scss/Breakpoints_overwrite-breakpoint-for-attribute.html +++ b/docs/documentation/scss/Breakpoints_overwrite-breakpoint-for-attribute.html @@ -352,13 +352,13 @@
Example

diff --git a/docs/documentation/scss/Breakpoints_overwrite-breakpoint-for-attributes.html b/docs/documentation/scss/Breakpoints_overwrite-breakpoint-for-attributes.html index ce3bf9c..9e35cae 100644 --- a/docs/documentation/scss/Breakpoints_overwrite-breakpoint-for-attributes.html +++ b/docs/documentation/scss/Breakpoints_overwrite-breakpoint-for-attributes.html @@ -324,13 +324,13 @@
Example

diff --git a/docs/documentation/scss/Breakpoints_overwrite-breakpoint.html b/docs/documentation/scss/Breakpoints_overwrite-breakpoint.html index 9fdbbf7..2a7db40 100644 --- a/docs/documentation/scss/Breakpoints_overwrite-breakpoint.html +++ b/docs/documentation/scss/Breakpoints_overwrite-breakpoint.html @@ -209,13 +209,13 @@
Example

diff --git a/docs/documentation/scss/Breakpoints_reset-auto-breakpoint.html b/docs/documentation/scss/Breakpoints_reset-auto-breakpoint.html index c54ea68..42e28c0 100644 --- a/docs/documentation/scss/Breakpoints_reset-auto-breakpoint.html +++ b/docs/documentation/scss/Breakpoints_reset-auto-breakpoint.html @@ -213,13 +213,13 @@
Example

diff --git a/docs/documentation/scss/Breakpoints_set-auto-breakpoint.html b/docs/documentation/scss/Breakpoints_set-auto-breakpoint.html index 4a33145..6bc38af 100644 --- a/docs/documentation/scss/Breakpoints_set-auto-breakpoint.html +++ b/docs/documentation/scss/Breakpoints_set-auto-breakpoint.html @@ -278,13 +278,13 @@
Example

diff --git a/docs/documentation/scss/Content.html b/docs/documentation/scss/Content.html new file mode 100644 index 0000000..21f045b --- /dev/null +++ b/docs/documentation/scss/Content.html @@ -0,0 +1,128 @@ + + + + + JSDoc: Namespace: Content + + + + + + + + + + +
+ +

Namespace: Content

+ + + + + + +
+ +
+ +

Content

+ + +
+ +
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + +
+ + + + + + + + + + + + + + + + + + +
+ +
+ + + + +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/documentation/scss/Content_base-font-size-value.html b/docs/documentation/scss/Content_base-font-size-value.html new file mode 100644 index 0000000..76ed5ec --- /dev/null +++ b/docs/documentation/scss/Content_base-font-size-value.html @@ -0,0 +1,242 @@ + + + + + JSDoc: Namespace: Content:base-font-size-value + + + + + + + + + + +
+ +

Namespace: Content:base-font-size-value

+ + + + + + +
+ +
+ +

Content:base-font-size-value

+ + +
+ +
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + +
+ + + + + + + + + + + + + + +

Methods

+ + + + + + +

base-font-size-value() → {Number}

+ + + + + +
+

Returns the base font size, which is most likely applied to the html/body elements and acts as the base +for rem calculations.

+
+ + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + + + + + + + + + + +
Returns:
+ + +
+ the currently set jig base font size value +
+ + + +
+
+ Type +
+
+ +Number + + +
+
+ + + + +
Example
+ + 
font-size: base-font-size-value();
+ + + + + + + + + +
+ +
+ + + + +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/documentation/scss/Content_content-holder.html b/docs/documentation/scss/Content_content-holder.html new file mode 100644 index 0000000..53b8150 --- /dev/null +++ b/docs/documentation/scss/Content_content-holder.html @@ -0,0 +1,334 @@ + + + + + JSDoc: Namespace: Content:content-holder + + + + + + + + + + +
+ +

Namespace: Content:content-holder

+ + + + + + +
+ +
+ +

Content:content-holder

+ + +
+ +
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + +
+ + + + + + + + + + + + + + +

Methods

+ + + + + + +

content-holder($paddedopt, $centeredopt)

+ + + + + +
+

Adds properties to the current element, which make it a "content holder", meaning, that it +adheres to the defined min/max content widths and keeps the content away from the browser edges by +defining margins according to the defined responsive content paddings.

+

Min and max widths are only rendered if they are defined in the jig config, as are content paddings.

+

A content holder can be used as the base container definition for non-breakout elements on a page, +which is not supposed to grow indefinitely horizontally.

+

A content holder can be a grid container at the same time, these things do not exclude themselves and +are even a very common use case.

+
+ + + + + + + + + +
Parameters:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeAttributesDefaultDescription
$padded + + +Boolean + + + + + + <optional>
+ + + + + + 		+ + true + +

if true, config-defined responsive content padding gets applied to the element

$centered + + +Boolean + + + + + + <optional>
+ + + + + + 		+ + true + +

if true, element gets auto-centered using auto margins

+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + + + + + + + + + + + + +
Example
+ + 
@include content-holder();
+ + + + + + + + + +
+ +
+ + + + +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/documentation/scss/Content_content-padding-value.html b/docs/documentation/scss/Content_content-padding-value.html new file mode 100644 index 0000000..85072b2 --- /dev/null +++ b/docs/documentation/scss/Content_content-padding-value.html @@ -0,0 +1,325 @@ + + + + + JSDoc: Namespace: Content:content-padding-value + + + + + + + + + + +
+ +

Namespace: Content:content-padding-value

+ + + + + + +
+ +
+ +

Content:content-padding-value

+ + +
+ +
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + +
+ + + + + + + + + + + + + + +

Methods

+ + + + + + +

content-padding-value($breakpointopt) → {Number}

+ + + + + +
+

Returns the defined content padding for a/the current breakpoint.

+
+ + + + + + + + + +
Parameters:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeAttributesDefaultDescription
$breakpoint + + +String + + + + + + <optional>
+ + + + + + 		+ + 'auto' + +

a defined breakpoint name or "auto", to use the current breakpoint at the point of usage

+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + + + + + + + + +
Throws:
+ + + +
+ +

error if no content padding value could be determined, based on given breakpoint

+ +
+ + + + + +
Returns:
+ + +
+ the determined content padding value +
+ + + +
+
+ Type +
+
+ +Number + + +
+
+ + + + +
Example
+ + 
@include breakpoint(medium){
+  padding-left: content-padding-value();
+}
+margin-right: content-padding-value($breakpoint:'small');
+ + + + + + + + + +
+ +
+ + + + +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/documentation/scss/Content_content-width-value.html b/docs/documentation/scss/Content_content-width-value.html new file mode 100644 index 0000000..5f7d65d --- /dev/null +++ b/docs/documentation/scss/Content_content-width-value.html @@ -0,0 +1,355 @@ + + + + + JSDoc: Namespace: Content:content-width-value + + + + + + + + + + +
+ +

Namespace: Content:content-width-value

+ + + + + + +
+ +
+ +

Content:content-width-value

+ + +
+ +
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + +
+ + + + + + + + + + + + + + +

Methods

+ + + + + + +

content-width-value($min-maxopt, $defaultopt, nullable) → {Number|null}

+ + + + + +
+

Returns the defined min/max content width.

+
+ + + + + + + + + +
Parameters:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeAttributesDefaultDescription
$min-max + + +String + + + + + + <optional>
+ + + + + + 		+ + 'max' + +

either "min" or "max", defines if min or max content-width is returned

$default + + +Number + + + + + + <optional>
+ + + + <nullable>
+ + + + 		+ + null + +

the default value to return if the width definition cannot be found

+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + + + + + + + + + + +
Returns:
+ + +
+ the determined content width value, may be null if width is not defined (depending on default value) +
+ + + +
+
+ Type +
+
+ +Number +| + +null + + +
+
+ + + + +
Example
+ + 
max-width: content-width-value();
+min-width: content-width-value('min', 0);
+ + + + + + + + + +
+ +
+ + + + +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/documentation/scss/Grid.html b/docs/documentation/scss/Grid.html index 9059e2f..bb03ecf 100644 --- a/docs/documentation/scss/Grid.html +++ b/docs/documentation/scss/Grid.html @@ -113,13 +113,13 @@

Grid


diff --git a/docs/documentation/scss/Grid_grid-container.html b/docs/documentation/scss/Grid_grid-container.html index e4cedad..1ecedcd 100644 --- a/docs/documentation/scss/Grid_grid-container.html +++ b/docs/documentation/scss/Grid_grid-container.html @@ -213,13 +213,13 @@
Example

diff --git a/docs/documentation/scss/Grid_grid-item-align.html b/docs/documentation/scss/Grid_grid-item-align.html index 63f65bd..1e653bd 100644 --- a/docs/documentation/scss/Grid_grid-item-align.html +++ b/docs/documentation/scss/Grid_grid-item-align.html @@ -322,13 +322,13 @@
Example

diff --git a/docs/documentation/scss/Grid_grid-item.html b/docs/documentation/scss/Grid_grid-item.html index de6d34d..a04cab6 100644 --- a/docs/documentation/scss/Grid_grid-item.html +++ b/docs/documentation/scss/Grid_grid-item.html @@ -500,13 +500,13 @@
Example

diff --git a/docs/documentation/scss/Grid_gutter-value.html b/docs/documentation/scss/Grid_gutter-value.html index e57ac32..83e9a4e 100644 --- a/docs/documentation/scss/Grid_gutter-value.html +++ b/docs/documentation/scss/Grid_gutter-value.html @@ -431,13 +431,13 @@
Example

diff --git a/docs/documentation/scss/Spacing.html b/docs/documentation/scss/Spacing.html index 57075d5..8799941 100644 --- a/docs/documentation/scss/Spacing.html +++ b/docs/documentation/scss/Spacing.html @@ -113,13 +113,13 @@

Spacing


diff --git a/docs/documentation/scss/Spacing_spacing-based-attribute.html b/docs/documentation/scss/Spacing_spacing-based-attribute.html index 072f53c..2f9b139 100644 --- a/docs/documentation/scss/Spacing_spacing-based-attribute.html +++ b/docs/documentation/scss/Spacing_spacing-based-attribute.html @@ -364,13 +364,13 @@
Example

diff --git a/docs/documentation/scss/Spacing_spacing-based-attributes.html b/docs/documentation/scss/Spacing_spacing-based-attributes.html index e492bfd..1d24367 100644 --- a/docs/documentation/scss/Spacing_spacing-based-attributes.html +++ b/docs/documentation/scss/Spacing_spacing-based-attributes.html @@ -342,13 +342,13 @@
Example

diff --git a/docs/documentation/scss/Spacing_spacing-value.html b/docs/documentation/scss/Spacing_spacing-value.html index 4f1dfd7..f36e401 100644 --- a/docs/documentation/scss/Spacing_spacing-value.html +++ b/docs/documentation/scss/Spacing_spacing-value.html @@ -351,13 +351,13 @@
Example

diff --git a/docs/documentation/scss/Util.html b/docs/documentation/scss/Util.html index cddb7e5..e2c2f42 100644 --- a/docs/documentation/scss/Util.html +++ b/docs/documentation/scss/Util.html @@ -113,13 +113,13 @@

Util


diff --git a/docs/documentation/scss/Util_map-next.html b/docs/documentation/scss/Util_map-next.html index 67870a6..65ffdfb 100644 --- a/docs/documentation/scss/Util_map-next.html +++ b/docs/documentation/scss/Util_map-next.html @@ -304,13 +304,13 @@
Example

diff --git a/docs/documentation/scss/Util_str-join.html b/docs/documentation/scss/Util_str-join.html index a20c987..76db8ab 100644 --- a/docs/documentation/scss/Util_str-join.html +++ b/docs/documentation/scss/Util_str-join.html @@ -302,13 +302,13 @@
Example

diff --git a/docs/documentation/scss/Util_strip-unit.html b/docs/documentation/scss/Util_strip-unit.html index fa06a70..857d47c 100644 --- a/docs/documentation/scss/Util_strip-unit.html +++ b/docs/documentation/scss/Util_strip-unit.html @@ -276,13 +276,13 @@
Example

diff --git a/docs/documentation/scss/Util_to-em.html b/docs/documentation/scss/Util_to-em.html index 242bb77..6898211 100644 --- a/docs/documentation/scss/Util_to-em.html +++ b/docs/documentation/scss/Util_to-em.html @@ -308,13 +308,13 @@
Example

diff --git a/docs/documentation/scss/Util_to-rem.html b/docs/documentation/scss/Util_to-rem.html index 315f216..fc70b04 100644 --- a/docs/documentation/scss/Util_to-rem.html +++ b/docs/documentation/scss/Util_to-rem.html @@ -342,13 +342,13 @@
Example

diff --git a/docs/documentation/scss/breakpoints.scss.html b/docs/documentation/scss/breakpoints.scss.html index c9d012f..35f3292 100644 --- a/docs/documentation/scss/breakpoints.scss.html +++ b/docs/documentation/scss/breakpoints.scss.html @@ -644,13 +644,13 @@

Source: breakpoints.scss


diff --git a/docs/documentation/scss/content.scss.html b/docs/documentation/scss/content.scss.html new file mode 100644 index 0000000..354d962 --- /dev/null +++ b/docs/documentation/scss/content.scss.html @@ -0,0 +1,227 @@ + + + + + JSDoc: Source: content.scss + + + + + + + + + + +
+ +

Source: content.scss

+ + + + + + +
+
+ 
/**
+ * @namespace Content
+ */
+
+
+
+@use 'sass:meta';
+@use 'sass:map';
+@use 'sass:list';
+
+@use 'globals' as *;
+@use 'breakpoints';
+
+
+
+/**
+ * @namespace Content:content-holder
+ */
+
+/**
+ * Adds properties to the current element, which make it a "content holder", meaning, that it
+ * adheres to the defined min/max content widths and keeps the content away from the browser edges by
+ * defining margins according to the defined responsive content paddings.
+ *
+ * Min and max widths are only rendered if they are defined in the jig config, as are content paddings.
+ *
+ * A content holder can be used as the base container definition for non-breakout elements on a page,
+ * which is not supposed to grow indefinitely horizontally.
+ *
+ * A content holder can be a grid container at the same time, these things do not exclude themselves and
+ * are even a very common use case.
+ *
+ * @memberof Content:content-holder
+ * @function
+ * @name content-holder
+ * @alias content-holder
+ *
+ * @param {Boolean} [$padded=true] - if true, config-defined responsive content padding gets applied to the element
+ * @param {Boolean} [$centered=true] - if true, element gets auto-centered using auto margins
+ *
+ * @example
+ * \@include content-holder();
+ */
+@mixin content-holder($padded:true, $centered:false){
+	$breakpoint-names: map.keys($jig---breakpoint-config);
+	$smallest-breakpoint: list.nth($breakpoint-names, 1);
+	$largest-breakpoint: list.nth($breakpoint-names, -1);
+
+	$min-width: content-width-value('min');
+	$max-width: content-width-value('max');
+
+	@if $min-width != null {
+		min-width: $min-width + (2 * content-padding-value($smallest-breakpoint));
+	}
+	@if $max-width != null {
+		max-width: $max-width + (2 * content-padding-value($largest-breakpoint));
+	}
+
+	@if $centered {
+		margin-right: auto;
+		margin-left: auto;
+	}
+
+	@if $padded {
+		$content-padding: map.get($jig---content-config, 'padding');
+
+		@if $content-padding != null {
+			@include breakpoints.attributes-for-breakpoints((
+				'padding-left' : $content-padding,
+				'padding-right' : $content-padding,
+			));
+		}
+	}
+}
+
+
+
+/**
+ * @namespace Content:content-padding-value
+ */
+
+/**
+ * Returns the defined content padding for a/the current breakpoint.
+ *
+ * @memberof Content:content-padding-value
+ * @function
+ * @name content-padding-value
+ * @alias content-padding-value
+ *
+ * @param {String} [$breakpoint='auto'] - a defined breakpoint name or "auto", to use the current breakpoint at the point of usage
+ * @returns {Number} the determined content padding value
+ * @throws error if no content padding value could be determined, based on given breakpoint
+ *
+ * @example
+ * \@include breakpoint(medium){
+ *   padding-left: content-padding-value();
+ * }
+ * margin-right: content-padding-value($breakpoint:'small');
+ */
+@function content-padding-value($breakpoint:'auto'){
+	$padding: map.get($jig---content-config, 'padding');
+	$res: null;
+
+	@if $padding != null {
+		@if meta.type-of($padding) == 'map' {
+			$res: breakpoints.breakpoint-value($padding, $breakpoint);
+		} @else {
+			$res: $padding;
+		}
+	}
+
+	@if $res == null {
+		@error 'jig:content-padding-value | could not resolve content padding, check breakpoint';
+	}
+
+	@return $res;
+}
+
+
+
+/**
+ * @namespace Content:content-width-value
+ */
+
+/**
+ * Returns the defined min/max content width.
+ *
+ * @memberof Content:content-width-value
+ * @function
+ * @name content-width-value
+ * @alias content-width-value
+ *
+ * @param {String} [$min-max='max'] - either "min" or "max", defines if min or max content-width is returned
+ * @param {?Number} [$default=null] - the default value to return if the width definition cannot be found
+ * @returns {Number|null} the determined content width value, may be null if width is not defined (depending on default value)
+ *
+ * @example
+ * max-width: content-width-value();
+ * min-width: content-width-value('min', 0);
+ */
+@function content-width-value($min-max:'max', $default:null){
+	$width: map.get($jig---content-config, 'max-width');
+	@if $min-max == 'min' {
+		$width: map.get($jig---content-config, 'min-width');
+	}
+
+	@if $width == null {
+		$width: $default;
+	}
+
+	@return $width;
+}
+
+
+
+/**
+ * @namespace Content:base-font-size-value
+ */
+
+/**
+ * Returns the base font size, which is most likely applied to the html/body elements and acts as the base
+ * for rem calculations.
+ *
+ * @memberof Content:base-font-size-value
+ * @function
+ * @name base-font-size-value
+ * @alias base-font-size-value
+ *
+ * @returns {Number} the currently set jig base font size value
+ *
+ * @example
+ * font-size: base-font-size-value();
+ */
+@function base-font-size-value(){
+	@return $jig---base-font-size;
+}
+
+
+
+ + + + +
+ + + +
+ + + + + + + diff --git a/docs/documentation/scss/grid.scss.html b/docs/documentation/scss/grid.scss.html index 698a11b..3b7c3f4 100644 --- a/docs/documentation/scss/grid.scss.html +++ b/docs/documentation/scss/grid.scss.html @@ -265,13 +265,13 @@

Source: grid.scss


diff --git a/docs/documentation/scss/index.html b/docs/documentation/scss/index.html index fe3f84a..e95081d 100644 --- a/docs/documentation/scss/index.html +++ b/docs/documentation/scss/index.html @@ -311,13 +311,13 @@

Why are the media queries/breakpoints in this project using em instead of re
diff --git a/docs/documentation/scss/spacing.scss.html b/docs/documentation/scss/spacing.scss.html index 92d12dd..fce21f8 100644 --- a/docs/documentation/scss/spacing.scss.html +++ b/docs/documentation/scss/spacing.scss.html @@ -171,13 +171,13 @@

Source: spacing.scss


diff --git a/docs/documentation/scss/util.scss.html b/docs/documentation/scss/util.scss.html index 80e8278..5c722cd 100644 --- a/docs/documentation/scss/util.scss.html +++ b/docs/documentation/scss/util.scss.html @@ -263,13 +263,13 @@

Source: util.scss


diff --git a/docs/documentation/stylus/Breakpoints.html b/docs/documentation/stylus/Breakpoints.html index a0b2276..c05557e 100644 --- a/docs/documentation/stylus/Breakpoints.html +++ b/docs/documentation/stylus/Breakpoints.html @@ -113,13 +113,13 @@

Breakpoints


diff --git a/docs/documentation/stylus/Breakpoints_attribute-for-breakpoints.html b/docs/documentation/stylus/Breakpoints_attribute-for-breakpoints.html index b93d9d7..94a7296 100644 --- a/docs/documentation/stylus/Breakpoints_attribute-for-breakpoints.html +++ b/docs/documentation/stylus/Breakpoints_attribute-for-breakpoints.html @@ -360,13 +360,13 @@
Example

diff --git a/docs/documentation/stylus/Breakpoints_attributes-for-breakpoints.html b/docs/documentation/stylus/Breakpoints_attributes-for-breakpoints.html index f8a1759..bdf8ec7 100644 --- a/docs/documentation/stylus/Breakpoints_attributes-for-breakpoints.html +++ b/docs/documentation/stylus/Breakpoints_attributes-for-breakpoints.html @@ -333,13 +333,13 @@
Example

diff --git a/docs/documentation/stylus/Breakpoints_breakpoint-value.html b/docs/documentation/stylus/Breakpoints_breakpoint-value.html index 507273a..582538c 100644 --- a/docs/documentation/stylus/Breakpoints_breakpoint-value.html +++ b/docs/documentation/stylus/Breakpoints_breakpoint-value.html @@ -330,13 +330,13 @@
Example

diff --git a/docs/documentation/stylus/Breakpoints_breakpoint.html b/docs/documentation/stylus/Breakpoints_breakpoint.html index bedf706..c94a738 100644 --- a/docs/documentation/stylus/Breakpoints_breakpoint.html +++ b/docs/documentation/stylus/Breakpoints_breakpoint.html @@ -275,13 +275,13 @@
Example

diff --git a/docs/documentation/stylus/Breakpoints_build-breakpoint-query.html b/docs/documentation/stylus/Breakpoints_build-breakpoint-query.html index d009b65..cf199e0 100644 --- a/docs/documentation/stylus/Breakpoints_build-breakpoint-query.html +++ b/docs/documentation/stylus/Breakpoints_build-breakpoint-query.html @@ -335,13 +335,13 @@
Example

diff --git a/docs/documentation/stylus/Breakpoints_build-breakpoint-range.html b/docs/documentation/stylus/Breakpoints_build-breakpoint-range.html index 3170b95..db9a0b0 100644 --- a/docs/documentation/stylus/Breakpoints_build-breakpoint-range.html +++ b/docs/documentation/stylus/Breakpoints_build-breakpoint-range.html @@ -342,13 +342,13 @@
Example

diff --git a/docs/documentation/stylus/Breakpoints_get-auto-breakpoint.html b/docs/documentation/stylus/Breakpoints_get-auto-breakpoint.html index 228a58a..b7b490e 100644 --- a/docs/documentation/stylus/Breakpoints_get-auto-breakpoint.html +++ b/docs/documentation/stylus/Breakpoints_get-auto-breakpoint.html @@ -236,13 +236,13 @@
Example

diff --git a/docs/documentation/stylus/Breakpoints_is-named-breakpoint.html b/docs/documentation/stylus/Breakpoints_is-named-breakpoint.html index 5f4854e..949ef74 100644 --- a/docs/documentation/stylus/Breakpoints_is-named-breakpoint.html +++ b/docs/documentation/stylus/Breakpoints_is-named-breakpoint.html @@ -276,13 +276,13 @@
Example

diff --git a/docs/documentation/stylus/Breakpoints_overwrite-breakpoint-for-attribute.html b/docs/documentation/stylus/Breakpoints_overwrite-breakpoint-for-attribute.html index c9af755..cbda71a 100644 --- a/docs/documentation/stylus/Breakpoints_overwrite-breakpoint-for-attribute.html +++ b/docs/documentation/stylus/Breakpoints_overwrite-breakpoint-for-attribute.html @@ -352,13 +352,13 @@
Example

diff --git a/docs/documentation/stylus/Breakpoints_overwrite-breakpoint-for-attributes.html b/docs/documentation/stylus/Breakpoints_overwrite-breakpoint-for-attributes.html index 7cf0967..ae22b63 100644 --- a/docs/documentation/stylus/Breakpoints_overwrite-breakpoint-for-attributes.html +++ b/docs/documentation/stylus/Breakpoints_overwrite-breakpoint-for-attributes.html @@ -324,13 +324,13 @@
Example

diff --git a/docs/documentation/stylus/Breakpoints_overwrite-breakpoint.html b/docs/documentation/stylus/Breakpoints_overwrite-breakpoint.html index 87c1b64..fda156b 100644 --- a/docs/documentation/stylus/Breakpoints_overwrite-breakpoint.html +++ b/docs/documentation/stylus/Breakpoints_overwrite-breakpoint.html @@ -208,13 +208,13 @@
Example

diff --git a/docs/documentation/stylus/Breakpoints_reset-auto-breakpoint.html b/docs/documentation/stylus/Breakpoints_reset-auto-breakpoint.html index 2a1e0ba..888d37d 100644 --- a/docs/documentation/stylus/Breakpoints_reset-auto-breakpoint.html +++ b/docs/documentation/stylus/Breakpoints_reset-auto-breakpoint.html @@ -214,13 +214,13 @@
Example

diff --git a/docs/documentation/stylus/Breakpoints_set-auto-breakpoint.html b/docs/documentation/stylus/Breakpoints_set-auto-breakpoint.html index 8166671..8497a4d 100644 --- a/docs/documentation/stylus/Breakpoints_set-auto-breakpoint.html +++ b/docs/documentation/stylus/Breakpoints_set-auto-breakpoint.html @@ -277,13 +277,13 @@
Example

diff --git a/docs/documentation/stylus/Content.html b/docs/documentation/stylus/Content.html new file mode 100644 index 0000000..2633305 --- /dev/null +++ b/docs/documentation/stylus/Content.html @@ -0,0 +1,128 @@ + + + + + JSDoc: Namespace: Content + + + + + + + + + + +
+ +

Namespace: Content

+ + + + + + +
+ +
+ +

Content

+ + +
+ +
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + +
+ + + + + + + + + + + + + + + + + + +
+ +
+ + + + +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/documentation/stylus/Content_base-font-size-value.html b/docs/documentation/stylus/Content_base-font-size-value.html new file mode 100644 index 0000000..655e5c2 --- /dev/null +++ b/docs/documentation/stylus/Content_base-font-size-value.html @@ -0,0 +1,242 @@ + + + + + JSDoc: Namespace: Content:base-font-size-value + + + + + + + + + + +
+ +

Namespace: Content:base-font-size-value

+ + + + + + +
+ +
+ +

Content:base-font-size-value

+ + +
+ +
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + +
+ + + + + + + + + + + + + + +

Methods

+ + + + + + +

base-font-size-value() → {Number}

+ + + + + +
+

Returns the base font size, which is most likely applied to the html/body elements and acts as the base +for rem calculations.

+
+ + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + + + + + + + + + + +
Returns:
+ + +
+ the currently set jig base font size value +
+ + + +
+
+ Type +
+
+ +Number + + +
+
+ + + + +
Example
+ + 
font-size base-font-size-value()
+ + + + + + + + + +
+ +
+ + + + +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/documentation/stylus/Content_content-holder.html b/docs/documentation/stylus/Content_content-holder.html new file mode 100644 index 0000000..13dc8df --- /dev/null +++ b/docs/documentation/stylus/Content_content-holder.html @@ -0,0 +1,334 @@ + + + + + JSDoc: Namespace: Content:content-holder + + + + + + + + + + +
+ +

Namespace: Content:content-holder

+ + + + + + +
+ +
+ +

Content:content-holder

+ + +
+ +
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + +
+ + + + + + + + + + + + + + +

Methods

+ + + + + + +

content-holder($paddedopt, $centeredopt)

+ + + + + +
+

Adds properties to the current element, which make it a "content holder", meaning, that it +adheres to the defined min/max content widths and keeps the content away from the browser edges by +defining margins according to the defined responsive content paddings.

+

Min and max widths are only rendered if they are defined in the jig config, as are content paddings.

+

A content holder can be used as the base container definition for non-breakout elements on a page, +which is not supposed to grow indefinitely horizontally.

+

A content holder can be a grid container at the same time, these things do not exclude themselves and +are even a very common use case.

+
+ + + + + + + + + +
Parameters:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeAttributesDefaultDescription
$padded + + +Boolean + + + + + + <optional>
+ + + + + + 		+ + true + +

if true, config-defined responsive content padding gets applied to the element

$centered + + +Boolean + + + + + + <optional>
+ + + + + + 		+ + true + +

if true, element gets auto-centered using auto margins

+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + + + + + + + + + + + + +
Example
+ + 
content-holder()
+ + + + + + + + + +
+ +
+ + + + +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/documentation/stylus/Content_content-padding-value.html b/docs/documentation/stylus/Content_content-padding-value.html new file mode 100644 index 0000000..41c13dc --- /dev/null +++ b/docs/documentation/stylus/Content_content-padding-value.html @@ -0,0 +1,324 @@ + + + + + JSDoc: Namespace: Content:content-padding-value + + + + + + + + + + +
+ +

Namespace: Content:content-padding-value

+ + + + + + +
+ +
+ +

Content:content-padding-value

+ + +
+ +
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + +
+ + + + + + + + + + + + + + +

Methods

+ + + + + + +

content-padding-value($breakpointopt) → {Number}

+ + + + + +
+

Returns the defined content padding for a/the current breakpoint.

+
+ + + + + + + + + +
Parameters:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeAttributesDefaultDescription
$breakpoint + + +String + + + + + + <optional>
+ + + + + + 		+ + 'auto' + +

a defined breakpoint name or "auto", to use the current breakpoint at the point of usage

+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + + + + + + + + +
Throws:
+ + + +
+ +

error if no content padding value could be determined, based on given breakpoint

+ +
+ + + + + +
Returns:
+ + +
+ the determined content padding value +
+ + + +
+
+ Type +
+
+ +Number + + +
+
+ + + + +
Example
+ + 
breakpoint(medium)
+  padding-left content-padding-value()
+margin-right content-padding-value($breakpoint:'small')
+ + + + + + + + + +
+ +
+ + + + +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/documentation/stylus/Content_content-width-value.html b/docs/documentation/stylus/Content_content-width-value.html new file mode 100644 index 0000000..d7cb291 --- /dev/null +++ b/docs/documentation/stylus/Content_content-width-value.html @@ -0,0 +1,355 @@ + + + + + JSDoc: Namespace: Content:content-width-value + + + + + + + + + + +
+ +

Namespace: Content:content-width-value

+ + + + + + +
+ +
+ +

Content:content-width-value

+ + +
+ +
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + +
+ + + + + + + + + + + + + + +

Methods

+ + + + + + +

content-width-value($min-maxopt, $defaultopt, nullable) → {Number|null}

+ + + + + +
+

Returns the defined min/max content width.

+
+ + + + + + + + + +
Parameters:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeAttributesDefaultDescription
$min-max + + +String + + + + + + <optional>
+ + + + + + 		+ + 'max' + +

either "min" or "max", defines if min or max content-width is returned

$default + + +Number + + + + + + <optional>
+ + + + <nullable>
+ + + + 		+ + null + +

the default value to return if the width definition cannot be found

+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + + + + + + + + + + +
Returns:
+ + +
+ the determined content width value, may be null if width is not defined (depending on default value) +
+ + + +
+
+ Type +
+
+ +Number +| + +null + + +
+
+ + + + +
Example
+ + 
max-width content-width-value()
+min-width content-width-value('min', 0)
+ + + + + + + + + +
+ +
+ + + + +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/documentation/stylus/Grid.html b/docs/documentation/stylus/Grid.html index 61296ad..3ca9343 100644 --- a/docs/documentation/stylus/Grid.html +++ b/docs/documentation/stylus/Grid.html @@ -113,13 +113,13 @@

Grid


diff --git a/docs/documentation/stylus/Grid_grid-container.html b/docs/documentation/stylus/Grid_grid-container.html index 0c82fa3..7cae5ca 100644 --- a/docs/documentation/stylus/Grid_grid-container.html +++ b/docs/documentation/stylus/Grid_grid-container.html @@ -213,13 +213,13 @@
Example

diff --git a/docs/documentation/stylus/Grid_grid-item-align.html b/docs/documentation/stylus/Grid_grid-item-align.html index 506d3c1..1f25889 100644 --- a/docs/documentation/stylus/Grid_grid-item-align.html +++ b/docs/documentation/stylus/Grid_grid-item-align.html @@ -322,13 +322,13 @@
Example

diff --git a/docs/documentation/stylus/Grid_grid-item.html b/docs/documentation/stylus/Grid_grid-item.html index e5c65c1..8962e11 100644 --- a/docs/documentation/stylus/Grid_grid-item.html +++ b/docs/documentation/stylus/Grid_grid-item.html @@ -500,13 +500,13 @@
Example

diff --git a/docs/documentation/stylus/Grid_gutter-value.html b/docs/documentation/stylus/Grid_gutter-value.html index bf8c307..d9adae3 100644 --- a/docs/documentation/stylus/Grid_gutter-value.html +++ b/docs/documentation/stylus/Grid_gutter-value.html @@ -430,13 +430,13 @@
Example

diff --git a/docs/documentation/stylus/Spacing.html b/docs/documentation/stylus/Spacing.html index d6a9aa4..c788b0e 100644 --- a/docs/documentation/stylus/Spacing.html +++ b/docs/documentation/stylus/Spacing.html @@ -113,13 +113,13 @@

Spacing


diff --git a/docs/documentation/stylus/Spacing_spacing-based-attribute.html b/docs/documentation/stylus/Spacing_spacing-based-attribute.html index 5afaf39..1edf6cf 100644 --- a/docs/documentation/stylus/Spacing_spacing-based-attribute.html +++ b/docs/documentation/stylus/Spacing_spacing-based-attribute.html @@ -364,13 +364,13 @@
Example

diff --git a/docs/documentation/stylus/Spacing_spacing-based-attributes.html b/docs/documentation/stylus/Spacing_spacing-based-attributes.html index be26933..6bb7e6c 100644 --- a/docs/documentation/stylus/Spacing_spacing-based-attributes.html +++ b/docs/documentation/stylus/Spacing_spacing-based-attributes.html @@ -342,13 +342,13 @@
Example

diff --git a/docs/documentation/stylus/Spacing_spacing-value.html b/docs/documentation/stylus/Spacing_spacing-value.html index f819b67..c966d2b 100644 --- a/docs/documentation/stylus/Spacing_spacing-value.html +++ b/docs/documentation/stylus/Spacing_spacing-value.html @@ -351,13 +351,13 @@
Example

diff --git a/docs/documentation/stylus/Util.html b/docs/documentation/stylus/Util.html index fd8c870..feaf390 100644 --- a/docs/documentation/stylus/Util.html +++ b/docs/documentation/stylus/Util.html @@ -113,13 +113,13 @@

Util


diff --git a/docs/documentation/stylus/Util_hash-get-deep.html b/docs/documentation/stylus/Util_hash-get-deep.html index f8282d6..6b271f7 100644 --- a/docs/documentation/stylus/Util_hash-get-deep.html +++ b/docs/documentation/stylus/Util_hash-get-deep.html @@ -305,13 +305,13 @@
Example

diff --git a/docs/documentation/stylus/Util_hash-next.html b/docs/documentation/stylus/Util_hash-next.html index fbede66..533f511 100644 --- a/docs/documentation/stylus/Util_hash-next.html +++ b/docs/documentation/stylus/Util_hash-next.html @@ -304,13 +304,13 @@
Example

diff --git a/docs/documentation/stylus/Util_str-join.html b/docs/documentation/stylus/Util_str-join.html index acb37d5..cf849c2 100644 --- a/docs/documentation/stylus/Util_str-join.html +++ b/docs/documentation/stylus/Util_str-join.html @@ -302,13 +302,13 @@
Example

diff --git a/docs/documentation/stylus/Util_strip-unit.html b/docs/documentation/stylus/Util_strip-unit.html index c498325..a9b5e18 100644 --- a/docs/documentation/stylus/Util_strip-unit.html +++ b/docs/documentation/stylus/Util_strip-unit.html @@ -276,13 +276,13 @@
Example

diff --git a/docs/documentation/stylus/Util_to-em.html b/docs/documentation/stylus/Util_to-em.html index 5aa8e1f..48bfa0f 100644 --- a/docs/documentation/stylus/Util_to-em.html +++ b/docs/documentation/stylus/Util_to-em.html @@ -308,13 +308,13 @@
Example

diff --git a/docs/documentation/stylus/Util_to-rem.html b/docs/documentation/stylus/Util_to-rem.html index 02bdcca..d4ddd8d 100644 --- a/docs/documentation/stylus/Util_to-rem.html +++ b/docs/documentation/stylus/Util_to-rem.html @@ -342,13 +342,13 @@
Example

diff --git a/docs/documentation/stylus/Util_to-str.html b/docs/documentation/stylus/Util_to-str.html index a0bcdb0..a68e4e6 100644 --- a/docs/documentation/stylus/Util_to-str.html +++ b/docs/documentation/stylus/Util_to-str.html @@ -299,13 +299,13 @@
Example

diff --git a/docs/documentation/stylus/breakpoints.styl.html b/docs/documentation/stylus/breakpoints.styl.html index 1b08b4e..f45f825 100644 --- a/docs/documentation/stylus/breakpoints.styl.html +++ b/docs/documentation/stylus/breakpoints.styl.html @@ -575,13 +575,13 @@

Source: breakpoints.styl


diff --git a/docs/documentation/stylus/content.styl.html b/docs/documentation/stylus/content.styl.html new file mode 100644 index 0000000..703229c --- /dev/null +++ b/docs/documentation/stylus/content.styl.html @@ -0,0 +1,204 @@ + + + + + JSDoc: Source: content.styl + + + + + + + + + + +
+ +

Source: content.styl

+ + + + + + +
+
+ 
/**
+ * @namespace Content
+ */
+
+
+
+/**
+ * @namespace Content:content-holder
+ */
+
+/**
+ * Adds properties to the current element, which make it a "content holder", meaning, that it
+ * adheres to the defined min/max content widths and keeps the content away from the browser edges by
+ * defining margins according to the defined responsive content paddings.
+ *
+ * Min and max widths are only rendered if they are defined in the jig config, as are content paddings.
+ *
+ * A content holder can be used as the base container definition for non-breakout elements on a page,
+ * which is not supposed to grow indefinitely horizontally.
+ *
+ * A content holder can be a grid container at the same time, these things do not exclude themselves and
+ * are even a very common use case.
+ *
+ * @memberof Content:content-holder
+ * @function
+ * @name content-holder
+ * @alias content-holder
+ *
+ * @param {Boolean} [$padded=true] - if true, config-defined responsive content padding gets applied to the element
+ * @param {Boolean} [$centered=true] - if true, element gets auto-centered using auto margins
+ *
+ * @example
+ * content-holder()
+ */
+content-holder($padded=true, $centered=false)
+	$breakpoint-names = keys($jig---breakpoint-config)
+	$smallest-breakpoint = $breakpoint-names[0]
+	$largest-breakpoint = last($breakpoint-names)
+
+	$min-width = content-width-value('min')
+	$max-width = content-width-value('max')
+
+	if $min-width != null
+		min-width ($min-width + (2 * content-padding-value($smallest-breakpoint)))
+
+	if $max-width != null
+		max-width ($max-width + (2 * content-padding-value($largest-breakpoint)))
+
+	if $centered
+		margin-right auto
+		margin-left auto
+
+	if $padded
+		$content-padding = $jig---content-config.padding
+
+		if $content-padding != null
+			attributes-for-breakpoints({
+				'padding-left' : $content-padding,
+				'padding-right' : $content-padding,
+			})
+
+
+
+/**
+ * @namespace Content:content-padding-value
+ */
+
+/**
+ * Returns the defined content padding for a/the current breakpoint.
+ *
+ * @memberof Content:content-padding-value
+ * @function
+ * @name content-padding-value
+ * @alias content-padding-value
+ *
+ * @param {String} [$breakpoint='auto'] - a defined breakpoint name or "auto", to use the current breakpoint at the point of usage
+ * @returns {Number} the determined content padding value
+ * @throws error if no content padding value could be determined, based on given breakpoint
+ *
+ * @example
+ * breakpoint(medium)
+ *   padding-left content-padding-value()
+ * margin-right content-padding-value($breakpoint:'small')
+ */
+content-padding-value($breakpoint='auto')
+	$padding = $jig---content-config.padding
+	$res = null
+
+	if $padding != null
+		if type($padding) == 'object'
+			$res = breakpoint-value($padding, $breakpoint)
+		else
+			$res = $padding
+
+	if $res == null
+		error('jig:content-padding-value | could not resolve content padding, check breakpoint')
+
+	return $res
+
+
+
+/**
+ * @namespace Content:content-width-value
+ */
+
+/**
+ * Returns the defined min/max content width.
+ *
+ * @memberof Content:content-width-value
+ * @function
+ * @name content-width-value
+ * @alias content-width-value
+ *
+ * @param {String} [$min-max='max'] - either "min" or "max", defines if min or max content-width is returned
+ * @param {?Number} [$default=null] - the default value to return if the width definition cannot be found
+ * @returns {Number|null} the determined content width value, may be null if width is not defined (depending on default value)
+ *
+ * @example
+ * max-width content-width-value()
+ * min-width content-width-value('min', 0)
+ */
+content-width-value($min-max='max', $default=null)
+	$width = $jig---content-config.max-width
+	if $min-max == 'min'
+		$width = $jig---content-config.min-width
+
+	if $width == null
+		$width = $default
+
+	return $width
+
+
+
+/**
+ * @namespace Content:base-font-size-value
+ */
+
+/**
+ * Returns the base font size, which is most likely applied to the html/body elements and acts as the base
+ * for rem calculations.
+ *
+ * @memberof Content:base-font-size-value
+ * @function
+ * @name base-font-size-value
+ * @alias base-font-size-value
+ *
+ * @returns {Number} the currently set jig base font size value
+ *
+ * @example
+ * font-size base-font-size-value()
+ */
+base-font-size-value()
+	return $jig---base-font-size
+
+
+
+ + + + +
+ + + +
+ + + + + + + diff --git a/docs/documentation/stylus/grid.styl.html b/docs/documentation/stylus/grid.styl.html index e279a9d..96e4d36 100644 --- a/docs/documentation/stylus/grid.styl.html +++ b/docs/documentation/stylus/grid.styl.html @@ -243,13 +243,13 @@

Source: grid.styl


diff --git a/docs/documentation/stylus/index.html b/docs/documentation/stylus/index.html index 8e29c8d..c6e0674 100644 --- a/docs/documentation/stylus/index.html +++ b/docs/documentation/stylus/index.html @@ -311,13 +311,13 @@

Why are the media queries/breakpoints in this project using em instead of re
diff --git a/docs/documentation/stylus/spacing.styl.html b/docs/documentation/stylus/spacing.styl.html index 27f4ea7..f8dab51 100644 --- a/docs/documentation/stylus/spacing.styl.html +++ b/docs/documentation/stylus/spacing.styl.html @@ -156,13 +156,13 @@

Source: spacing.styl


diff --git a/docs/documentation/stylus/util.styl.html b/docs/documentation/stylus/util.styl.html index ef68ea9..a222c1a 100644 --- a/docs/documentation/stylus/util.styl.html +++ b/docs/documentation/stylus/util.styl.html @@ -284,13 +284,13 @@

Source: util.styl


diff --git a/docs/examples/css/main.css b/docs/examples/css/main.css index e855619..d7c6000 100644 --- a/docs/examples/css/main.css +++ b/docs/examples/css/main.css @@ -28,7 +28,7 @@ body { body > * { display: block; - max-width: 1200px; + max-width: 1600px; margin: 0 auto; } diff --git a/docs/examples/css/scss-legacy.css b/docs/examples/css/scss-legacy.css index f8a41cd..0988b3a 100644 --- a/docs/examples/css/scss-legacy.css +++ b/docs/examples/css/scss-legacy.css @@ -1,3 +1,3 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}#basic-grid-example .examples>.scss-legacy,#advanced-grid-example .examples>.scss-legacy,#real-world-grid-example .examples>.scss-legacy{display:grid;grid-auto-flow:row;grid-template-columns:repeat(12, 1fr);grid-row-gap:20px;grid-column-gap:10px;position:relative;padding:10px;border:3px solid red}@media print, screen and (min-width: 48em){#basic-grid-example .examples>.scss-legacy,#advanced-grid-example .examples>.scss-legacy,#real-world-grid-example .examples>.scss-legacy{grid-column-gap:20px}}@media print, screen and (min-width: 80em){#basic-grid-example .examples>.scss-legacy,#advanced-grid-example .examples>.scss-legacy,#real-world-grid-example .examples>.scss-legacy{grid-column-gap:40px}}#basic-grid-example .examples>.scss-legacy:before,#advanced-grid-example .examples>.scss-legacy:before,#real-world-grid-example .examples>.scss-legacy:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center center;background-color:#aaa;background-image:url("../files/img/background-small.jpg");filter:saturate(150%) brightness(38%)}@media print, screen and (min-width: 48em){#basic-grid-example .examples>.scss-legacy:before,#advanced-grid-example .examples>.scss-legacy:before,#real-world-grid-example .examples>.scss-legacy:before{background-color:#ccc;background-image:url("../files/img/background-medium.jpg")}}@media print, screen and (min-width: 80em){#basic-grid-example .examples>.scss-legacy:before,#advanced-grid-example .examples>.scss-legacy:before,#real-world-grid-example .examples>.scss-legacy:before{background-color:#eee;background-image:url("../files/img/background-large.jpg")}}@media print, screen and (min-width: 48em){#basic-grid-example .examples>.scss-legacy,#advanced-grid-example .examples>.scss-legacy,#real-world-grid-example .examples>.scss-legacy{padding:20px}}@media print, screen and (min-width: 80em){#basic-grid-example .examples>.scss-legacy,#advanced-grid-example .examples>.scss-legacy,#real-world-grid-example .examples>.scss-legacy{padding:40px}}#basic-grid-example .examples>.scss-legacy>div,#advanced-grid-example .examples>.scss-legacy>div,#real-world-grid-example .examples>.scss-legacy>div,#basic-grid-example .examples>.scss-legacy>div>div,#advanced-grid-example .examples>.scss-legacy>div>div,#real-world-grid-example .examples>.scss-legacy>div>div{display:flex;justify-content:center;align-items:center;position:relative;border:3px solid dodgerblue;color:white;font-size:1.5rem;text-shadow:1px -1px 3px black, 1px 1px 3px black, -1px 1px 3px black, -1px -1px 3px black;background-size:cover;background-position:center center;background-color:dodgerblue;filter:grayscale(50%) hue-rotate(-10deg) saturate(200%)}#basic-grid-example .examples>.scss-legacy>div:nth-of-type(1),#advanced-grid-example .examples>.scss-legacy>div:nth-of-type(1),#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(1),#basic-grid-example .examples>.scss-legacy>div>div:nth-of-type(1),#advanced-grid-example .examples>.scss-legacy>div>div:nth-of-type(1),#real-world-grid-example .examples>.scss-legacy>div>div:nth-of-type(1){background-image:url("../files/img/block-1.jpg")}#basic-grid-example .examples>.scss-legacy>div:nth-of-type(2),#advanced-grid-example .examples>.scss-legacy>div:nth-of-type(2),#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(2),#basic-grid-example .examples>.scss-legacy>div>div:nth-of-type(2),#advanced-grid-example .examples>.scss-legacy>div>div:nth-of-type(2),#real-world-grid-example .examples>.scss-legacy>div>div:nth-of-type(2){background-image:url("../files/img/block-2.jpg")}#basic-grid-example .examples>.scss-legacy>div:nth-of-type(3),#advanced-grid-example .examples>.scss-legacy>div:nth-of-type(3),#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3),#basic-grid-example .examples>.scss-legacy>div>div:nth-of-type(3),#advanced-grid-example .examples>.scss-legacy>div>div:nth-of-type(3),#real-world-grid-example .examples>.scss-legacy>div>div:nth-of-type(3){background-image:url("../files/img/block-3.jpg")}#basic-grid-example .examples>.scss-legacy>div:nth-of-type(4),#advanced-grid-example .examples>.scss-legacy>div:nth-of-type(4),#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(4),#basic-grid-example .examples>.scss-legacy>div>div:nth-of-type(4),#advanced-grid-example .examples>.scss-legacy>div>div:nth-of-type(4),#real-world-grid-example .examples>.scss-legacy>div>div:nth-of-type(4){background-image:url("../files/img/block-4.jpg")}#basic-grid-example .examples>.scss-legacy>div:nth-of-type(5),#advanced-grid-example .examples>.scss-legacy>div:nth-of-type(5),#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(5),#basic-grid-example .examples>.scss-legacy>div>div:nth-of-type(5),#advanced-grid-example .examples>.scss-legacy>div>div:nth-of-type(5),#real-world-grid-example .examples>.scss-legacy>div>div:nth-of-type(5){background-image:url("../files/img/block-5.jpg")}#basic-grid-example .examples>.scss-legacy:hover:before,#advanced-grid-example .examples>.scss-legacy:hover:before,#real-world-grid-example .examples>.scss-legacy:hover:before,#basic-grid-example .examples>.scss-legacy:hover>div,#advanced-grid-example .examples>.scss-legacy:hover>div,#real-world-grid-example .examples>.scss-legacy:hover>div,#basic-grid-example .examples>.scss-legacy:hover>div>div,#advanced-grid-example .examples>.scss-legacy:hover>div>div,#real-world-grid-example .examples>.scss-legacy:hover>div>div{border-color:lightskyblue;background-image:none !important;filter:none !important}#basic-grid-example .examples>.scss-legacy:hover>div>div,#advanced-grid-example .examples>.scss-legacy:hover>div>div,#real-world-grid-example .examples>.scss-legacy:hover>div>div{filter:invert(100%) !important}#basic-grid-example .examples>.scss-legacy>div:nth-of-type(odd){grid-column-end:span 6;height:100px}#basic-grid-example .examples>.scss-legacy>div:nth-of-type(even){grid-column-end:span 6;height:75px}@media print, screen and (min-width: 48em){#basic-grid-example .examples>.scss-legacy>div:nth-of-type(1){grid-column-end:span 4;height:100px}#basic-grid-example .examples>.scss-legacy>div:nth-of-type(2){grid-column-end:span 4;height:80px}#basic-grid-example .examples>.scss-legacy>div:nth-of-type(3){grid-column-end:span 4;height:60px}#basic-grid-example .examples>.scss-legacy>div:nth-of-type(4){grid-column-end:span 4;height:40px}#basic-grid-example .examples>.scss-legacy>div:nth-of-type(5){grid-column-end:span 4;height:20px}}@media print, screen and (max-width: 79.9375em){#basic-grid-example .examples>.scss-legacy>div:nth-of-type(3){border-color:aqua;background-color:aqua;background-image:url("../files/img/block-6.jpg")}}@media print, screen and (min-width: 80em){#basic-grid-example .examples>.scss-legacy>div:nth-of-type(1){grid-column-end:span 12;height:25vh}#basic-grid-example .examples>.scss-legacy>div:nth-of-type(2){grid-column-end:span 6;height:12.5vh}#basic-grid-example .examples>.scss-legacy>div:nth-of-type(3){grid-column-end:span 6;align-self:end;height:10vh}#basic-grid-example .examples>.scss-legacy>div:nth-of-type(4){grid-column-end:span 4;justify-self:center;align-self:center;order:2;width:100px;height:5vh}#basic-grid-example .examples>.scss-legacy>div:nth-of-type(5){grid-column-end:span 4;order:1;height:10vh}}#advanced-grid-example .examples>.scss-legacy{padding-top:40px}@media print, screen and (min-width: 48em){#advanced-grid-example .examples>.scss-legacy{padding-top:80px}}@media print, screen and (min-width: 80em){#advanced-grid-example .examples>.scss-legacy{padding-top:120px}}#advanced-grid-example .examples>.scss-legacy>div:nth-of-type(odd){grid-column-end:span 4;align-self:end;height:50px}#advanced-grid-example .examples>.scss-legacy>div:nth-of-type(even){grid-column-end:span 4;height:75px}#advanced-grid-example .examples>.scss-legacy>div:first-of-type{grid-column-end:span 4;grid-row-end:span 2;align-self:stretch;height:auto}@media print, screen and (min-width: 0) and (max-width: 47.9375em){#advanced-grid-example .examples>.scss-legacy>div:nth-of-type(3){border-color:aqua;background-color:aqua;background-image:url("../files/img/block-6.jpg")}}@media print, screen and (min-width: 48em){#advanced-grid-example .examples>.scss-legacy>div:nth-of-type(1){grid-column-end:span 4;order:5;width:50%;height:60px}#advanced-grid-example .examples>.scss-legacy>div:nth-of-type(2){grid-column-start:9;grid-column-end:13;order:4;height:80px}#advanced-grid-example .examples>.scss-legacy>div:nth-of-type(3){grid-column-end:span 2;grid-column-start:7;justify-self:stretch;align-self:center;order:3;height:60px}#advanced-grid-example .examples>.scss-legacy>div:nth-of-type(4){grid-column-end:span 8;grid-row-start:2;grid-row-end:4;justify-self:end;align-self:stretch;order:2;width:50%;height:auto}#advanced-grid-example .examples>.scss-legacy>div:nth-of-type(5){grid-column-end:span 4;justify-self:start;align-self:start;order:1;z-index:1;width:200%;height:55px;border-color:red;background-color:red;background-image:url("../files/img/block-7.jpg");transform:rotate(10deg)}}@media print, screen and (min-width: 80em){#advanced-grid-example .examples>.scss-legacy>div:nth-of-type(1){grid-column-end:span 4;grid-column-start:1;grid-row-end:span 1;grid-row-start:1;align-self:stretch;order:1;width:auto;height:10vh}#advanced-grid-example .examples>.scss-legacy>div:nth-of-type(2){grid-column-start:5;grid-column-end:9;grid-row-end:span 2;grid-row-start:1;align-self:stretch;order:2;height:auto}#advanced-grid-example .examples>.scss-legacy>div:nth-of-type(3){grid-column-end:span 4;grid-column-start:9;grid-row-end:span 3;grid-row-start:1;align-self:stretch;order:3;height:auto}#advanced-grid-example .examples>.scss-legacy>div:nth-of-type(4){grid-column-end:span 4;grid-column-start:1;grid-row-start:2;grid-row-end:3;justify-self:end;align-self:center;order:4;width:100px;height:10vh}#advanced-grid-example .examples>.scss-legacy>div:nth-of-type(5){grid-column-end:span 6;justify-self:stretch;order:5;width:auto;height:20vh;border-color:dodgerblue;background-color:dodgerblue;background-image:url("../files/img/block-8.jpg");transform:rotate(0deg)}}#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(1){grid-column-end:span 12;order:1;height:120px;margin:-10px;margin-bottom:0}#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(1):before{content:'Stage'}@media print, screen and (min-width: 48em){#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(1){height:240px}}@media print, screen and (min-width: 80em){#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(1){height:360px}}@media print, screen and (min-width: 48em){#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(1){margin:-20px;margin-bottom:-60px}}@media print, screen and (min-width: 80em){#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(1){margin:-40px;margin-bottom:-60px}}#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(2){grid-column-end:span 12;order:2}#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(2):before{content:'Navbar'}@media print, screen and (min-width: 48em){#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(2){grid-column-end:span 4;grid-row-end:span 2;order:3}}@media print, screen and (min-width: 80em){#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(2){grid-column-end:span 3}}#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3){grid-column-end:span 12;order:2;display:grid;grid-auto-flow:row;grid-template-columns:repeat(12, 1fr);grid-row-gap:20px;grid-column-gap:10px}@media print, screen and (min-width: 48em){#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3){grid-column-gap:20px}}@media print, screen and (min-width: 80em){#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3){grid-column-gap:40px}}#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3)>div:nth-of-type(1){grid-column-end:span 12;height:300px}#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3)>div:nth-of-type(1):before{content:'Text'}#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3)>div:nth-of-type(2),#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3)>div:nth-of-type(3),#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3)>div:nth-of-type(4){grid-column-end:span 12;height:100px}#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3)>div:nth-of-type(2):before,#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3)>div:nth-of-type(3):before,#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3)>div:nth-of-type(4):before{content:'Teaser'}#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3)>div:nth-of-type(3),#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3)>div:nth-of-type(4){margin-top:-20px}@media print, screen and (min-width: 48em){#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3){grid-column-end:span 8;grid-column-start:1}#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3)>div:nth-of-type(1){height:210px}#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3)>div:nth-of-type(2),#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3)>div:nth-of-type(3),#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3)>div:nth-of-type(4){grid-column-end:span 4;height:75px}#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3)>div:nth-of-type(3),#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3)>div:nth-of-type(4){margin-top:0}}@media print, screen and (min-width: 80em){#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3){grid-column-end:span 9}#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3)>div:nth-of-type(1){height:150px}#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3)>div:nth-of-type(2),#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3)>div:nth-of-type(3),#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(3)>div:nth-of-type(4){height:auto}}#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(4){grid-column-start:2;grid-column-end:12;order:4;margin-top:-10px}#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(4):before{content:'Hint'}@media print, screen and (min-width: 48em){#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(4){grid-column-end:span 8;grid-column-start:1}}@media print, screen and (min-width: 80em){#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(4){grid-column-end:span 6;grid-column-start:4}}#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(5){grid-column-end:span 12;order:5;padding-top:30px;padding-bottom:40px;margin:-10px;margin-top:20px}#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(5):before{content:'Footer'}@media print, screen and (min-width: 48em){#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(5){padding-bottom:50px}}@media print, screen and (min-width: 80em){#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(5){padding-bottom:80px}}@media screen and (min-width: 100em){#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(5){padding-top:40px}}@media print, screen and (min-width: 48em){#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(5){margin:-20px;margin-top:40px}}@media print, screen and (min-width: 80em){#real-world-grid-example .examples>.scss-legacy>div:nth-of-type(5){margin:-40px;margin-top:50px}} +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}#basic-grid-example .examples>.scss-legacy>.grid,#advanced-grid-example .examples>.scss-legacy>.grid,#real-world-grid-example .examples>.scss-legacy>.grid{display:grid;grid-auto-flow:row;grid-template-columns:repeat(12, 1fr);grid-row-gap:20px;grid-column-gap:10px;position:relative;padding:10px;border:3px solid red}@media print, screen and (min-width: 48em){#basic-grid-example .examples>.scss-legacy>.grid,#advanced-grid-example .examples>.scss-legacy>.grid,#real-world-grid-example .examples>.scss-legacy>.grid{grid-column-gap:20px}}@media print, screen and (min-width: 80em){#basic-grid-example .examples>.scss-legacy>.grid,#advanced-grid-example .examples>.scss-legacy>.grid,#real-world-grid-example .examples>.scss-legacy>.grid{grid-column-gap:40px}}#basic-grid-example .examples>.scss-legacy>.grid:before,#advanced-grid-example .examples>.scss-legacy>.grid:before,#real-world-grid-example .examples>.scss-legacy>.grid:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center center;background-color:#aaa;background-image:url("../files/img/background-small.jpg");filter:saturate(150%) brightness(38%)}@media print, screen and (min-width: 48em){#basic-grid-example .examples>.scss-legacy>.grid:before,#advanced-grid-example .examples>.scss-legacy>.grid:before,#real-world-grid-example .examples>.scss-legacy>.grid:before{background-color:#ccc;background-image:url("../files/img/background-medium.jpg")}}@media print, screen and (min-width: 80em){#basic-grid-example .examples>.scss-legacy>.grid:before,#advanced-grid-example .examples>.scss-legacy>.grid:before,#real-world-grid-example .examples>.scss-legacy>.grid:before{background-color:#eee;background-image:url("../files/img/background-large.jpg")}}@media print, screen and (min-width: 48em){#basic-grid-example .examples>.scss-legacy>.grid,#advanced-grid-example .examples>.scss-legacy>.grid,#real-world-grid-example .examples>.scss-legacy>.grid{padding:20px}}@media print, screen and (min-width: 80em){#basic-grid-example .examples>.scss-legacy>.grid,#advanced-grid-example .examples>.scss-legacy>.grid,#real-world-grid-example .examples>.scss-legacy>.grid{padding:40px}}#basic-grid-example .examples>.scss-legacy>.grid>div,#advanced-grid-example .examples>.scss-legacy>.grid>div,#real-world-grid-example .examples>.scss-legacy>.grid>div,#basic-grid-example .examples>.scss-legacy>.grid>div>div,#advanced-grid-example .examples>.scss-legacy>.grid>div>div,#real-world-grid-example .examples>.scss-legacy>.grid>div>div{display:flex;justify-content:center;align-items:center;position:relative;border:3px solid dodgerblue;color:white;font-size:18px;text-shadow:1px -1px 3px black, 1px 1px 3px black, -1px 1px 3px black, -1px -1px 3px black;background-size:cover;background-position:center center;background-color:dodgerblue;filter:grayscale(50%) hue-rotate(-10deg) saturate(200%)}#basic-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(1),#advanced-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(1),#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(1),#basic-grid-example .examples>.scss-legacy>.grid>div>div:nth-of-type(1),#advanced-grid-example .examples>.scss-legacy>.grid>div>div:nth-of-type(1),#real-world-grid-example .examples>.scss-legacy>.grid>div>div:nth-of-type(1){background-image:url("../files/img/block-1.jpg")}#basic-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(2),#advanced-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(2),#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(2),#basic-grid-example .examples>.scss-legacy>.grid>div>div:nth-of-type(2),#advanced-grid-example .examples>.scss-legacy>.grid>div>div:nth-of-type(2),#real-world-grid-example .examples>.scss-legacy>.grid>div>div:nth-of-type(2){background-image:url("../files/img/block-2.jpg")}#basic-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3),#advanced-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3),#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3),#basic-grid-example .examples>.scss-legacy>.grid>div>div:nth-of-type(3),#advanced-grid-example .examples>.scss-legacy>.grid>div>div:nth-of-type(3),#real-world-grid-example .examples>.scss-legacy>.grid>div>div:nth-of-type(3){background-image:url("../files/img/block-3.jpg")}#basic-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(4),#advanced-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(4),#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(4),#basic-grid-example .examples>.scss-legacy>.grid>div>div:nth-of-type(4),#advanced-grid-example .examples>.scss-legacy>.grid>div>div:nth-of-type(4),#real-world-grid-example .examples>.scss-legacy>.grid>div>div:nth-of-type(4){background-image:url("../files/img/block-4.jpg")}#basic-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(5),#advanced-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(5),#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(5),#basic-grid-example .examples>.scss-legacy>.grid>div>div:nth-of-type(5),#advanced-grid-example .examples>.scss-legacy>.grid>div>div:nth-of-type(5),#real-world-grid-example .examples>.scss-legacy>.grid>div>div:nth-of-type(5){background-image:url("../files/img/block-5.jpg")}#basic-grid-example .examples>.scss-legacy>.grid:hover:before,#advanced-grid-example .examples>.scss-legacy>.grid:hover:before,#real-world-grid-example .examples>.scss-legacy>.grid:hover:before,#basic-grid-example .examples>.scss-legacy>.grid:hover>div,#advanced-grid-example .examples>.scss-legacy>.grid:hover>div,#real-world-grid-example .examples>.scss-legacy>.grid:hover>div,#basic-grid-example .examples>.scss-legacy>.grid:hover>div>div,#advanced-grid-example .examples>.scss-legacy>.grid:hover>div>div,#real-world-grid-example .examples>.scss-legacy>.grid:hover>div>div{border-color:lightskyblue;background-image:none !important;filter:none !important}#basic-grid-example .examples>.scss-legacy>.grid:hover>div>div,#advanced-grid-example .examples>.scss-legacy>.grid:hover>div>div,#real-world-grid-example .examples>.scss-legacy>.grid:hover>div>div{filter:invert(100%) !important}#basic-grid-example .examples>.scss-legacy{min-width:360px;max-width:1200px;margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media print, screen and (min-width: 48em){#basic-grid-example .examples>.scss-legacy{padding-left:50px;padding-right:50px}}@media screen and (min-width: 100em){#basic-grid-example .examples>.scss-legacy{padding-left:60px;padding-right:60px}}#basic-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(odd){grid-column-end:span 6;height:100px}#basic-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(even){grid-column-end:span 6;height:75px}@media print, screen and (min-width: 48em){#basic-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(1){grid-column-end:span 4;height:100px}#basic-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(2){grid-column-end:span 4;height:80px}#basic-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3){grid-column-end:span 4;height:60px}#basic-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(4){grid-column-end:span 4;height:40px}#basic-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(5){grid-column-end:span 4;height:20px}}@media print, screen and (max-width: 79.9375em){#basic-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3){border-color:aqua;background-color:aqua;background-image:url("../files/img/block-6.jpg")}}@media print, screen and (min-width: 80em){#basic-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(1){grid-column-end:span 12;height:25vh}#basic-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(2){grid-column-end:span 6;height:12.5vh}#basic-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3){grid-column-end:span 6;align-self:end;height:10vh}#basic-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(4){grid-column-end:span 4;justify-self:center;align-self:center;order:2;width:100px;height:5vh}#basic-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(5){grid-column-end:span 4;order:1;height:10vh}}#advanced-grid-example .examples>.scss-legacy{min-width:360px;max-width:1200px;margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media print, screen and (min-width: 48em){#advanced-grid-example .examples>.scss-legacy{padding-left:50px;padding-right:50px}}@media screen and (min-width: 100em){#advanced-grid-example .examples>.scss-legacy{padding-left:60px;padding-right:60px}}#advanced-grid-example .examples>.scss-legacy>.grid{padding-top:40px}@media print, screen and (min-width: 48em){#advanced-grid-example .examples>.scss-legacy>.grid{padding-top:80px}}@media print, screen and (min-width: 80em){#advanced-grid-example .examples>.scss-legacy>.grid{padding-top:120px}}#advanced-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(odd){grid-column-end:span 4;align-self:end;height:50px}#advanced-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(even){grid-column-end:span 4;height:75px}#advanced-grid-example .examples>.scss-legacy>.grid>div:first-of-type{grid-column-end:span 4;grid-row-end:span 2;align-self:stretch;height:auto}@media print, screen and (min-width: 0) and (max-width: 47.9375em){#advanced-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3){border-color:aqua;background-color:aqua;background-image:url("../files/img/block-6.jpg")}}@media print, screen and (min-width: 48em){#advanced-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(1){grid-column-end:span 4;order:5;width:50%;height:60px}#advanced-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(2){grid-column-start:9;grid-column-end:13;order:4;height:80px}#advanced-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3){grid-column-end:span 2;grid-column-start:7;justify-self:stretch;align-self:center;order:3;height:60px}#advanced-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(4){grid-column-end:span 8;grid-row-start:2;grid-row-end:4;justify-self:end;align-self:stretch;order:2;width:50%;height:auto}#advanced-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(5){grid-column-end:span 4;justify-self:start;align-self:start;order:1;z-index:1;width:200%;height:55px;border-color:red;background-color:red;background-image:url("../files/img/block-7.jpg");transform:rotate(10deg)}}@media print, screen and (min-width: 80em){#advanced-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(1){grid-column-end:span 4;grid-column-start:1;grid-row-end:span 1;grid-row-start:1;align-self:stretch;order:1;width:auto;height:10vh}#advanced-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(2){grid-column-start:5;grid-column-end:9;grid-row-end:span 2;grid-row-start:1;align-self:stretch;order:2;height:auto}#advanced-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3){grid-column-end:span 4;grid-column-start:9;grid-row-end:span 3;grid-row-start:1;align-self:stretch;order:3;height:auto}#advanced-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(4){grid-column-end:span 4;grid-column-start:1;grid-row-start:2;grid-row-end:3;justify-self:end;align-self:center;order:4;width:100px;height:10vh}#advanced-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(5){grid-column-end:span 6;justify-self:stretch;order:5;width:auto;height:20vh;border-color:dodgerblue;background-color:dodgerblue;background-image:url("../files/img/block-8.jpg");transform:rotate(0deg)}}#real-world-grid-example .examples>.scss-legacy{min-width:360px;max-width:1200px;margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media print, screen and (min-width: 48em){#real-world-grid-example .examples>.scss-legacy{padding-left:50px;padding-right:50px}}@media screen and (min-width: 100em){#real-world-grid-example .examples>.scss-legacy{padding-left:60px;padding-right:60px}}#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(1){grid-column-end:span 12;order:1;height:120px;margin:-10px;margin-bottom:0}#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(1):before{content:'Stage'}@media print, screen and (min-width: 48em){#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(1){height:240px}}@media print, screen and (min-width: 80em){#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(1){height:360px}}@media print, screen and (min-width: 48em){#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(1){margin:-20px;margin-bottom:-60px}}@media print, screen and (min-width: 80em){#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(1){margin:-40px;margin-bottom:-60px}}#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(2){grid-column-end:span 12;order:2}#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(2):before{content:'Navbar'}@media print, screen and (min-width: 48em){#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(2){grid-column-end:span 4;grid-row-end:span 2;order:3}}@media print, screen and (min-width: 80em){#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(2){grid-column-end:span 3}}#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3){grid-column-end:span 12;order:2;display:grid;grid-auto-flow:row;grid-template-columns:repeat(12, 1fr);grid-row-gap:20px;grid-column-gap:10px}@media print, screen and (min-width: 48em){#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3){grid-column-gap:20px}}@media print, screen and (min-width: 80em){#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3){grid-column-gap:40px}}#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3)>div:nth-of-type(1){grid-column-end:span 12;height:300px}#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3)>div:nth-of-type(1):before{content:'Text'}#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3)>div:nth-of-type(2),#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3)>div:nth-of-type(3),#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3)>div:nth-of-type(4){grid-column-end:span 12;height:100px}#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3)>div:nth-of-type(2):before,#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3)>div:nth-of-type(3):before,#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3)>div:nth-of-type(4):before{content:'Teaser'}#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3)>div:nth-of-type(3),#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3)>div:nth-of-type(4){margin-top:-20px}@media print, screen and (min-width: 48em){#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3){grid-column-end:span 8;grid-column-start:1}#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3)>div:nth-of-type(1){height:210px}#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3)>div:nth-of-type(2),#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3)>div:nth-of-type(3),#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3)>div:nth-of-type(4){grid-column-end:span 4;height:75px}#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3)>div:nth-of-type(3),#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3)>div:nth-of-type(4){margin-top:0}}@media print, screen and (min-width: 80em){#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3){grid-column-end:span 9}#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3)>div:nth-of-type(1){height:150px}#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3)>div:nth-of-type(2),#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3)>div:nth-of-type(3),#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(3)>div:nth-of-type(4){height:auto}}#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(4){grid-column-start:2;grid-column-end:12;order:4;margin-top:-10px}#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(4):before{content:'Hint'}@media print, screen and (min-width: 48em){#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(4){grid-column-end:span 8;grid-column-start:1}}@media print, screen and (min-width: 80em){#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(4){grid-column-end:span 6;grid-column-start:4}}#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(5){grid-column-end:span 12;order:5;padding-top:30px;padding-bottom:40px;margin:-10px;margin-top:20px}#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(5):before{content:'Footer'}@media print, screen and (min-width: 48em){#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(5){padding-bottom:50px}}@media print, screen and (min-width: 80em){#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(5){padding-bottom:80px}}@media screen and (min-width: 100em){#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(5){padding-top:40px}}@media print, screen and (min-width: 48em){#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(5){margin:-20px;margin-top:40px}}@media print, screen and (min-width: 80em){#real-world-grid-example .examples>.scss-legacy>.grid>div:nth-of-type(5){margin:-40px;margin-top:50px}} /*# sourceMappingURL=scss-legacy.css.map */ diff --git a/docs/examples/css/scss-legacy.css.map b/docs/examples/css/scss-legacy.css.map index 339eeae..f92e957 100644 --- a/docs/examples/css/scss-legacy.css.map +++ b/docs/examples/css/scss-legacy.css.map @@ -1 +1 @@ -{"version":3,"file":"scss-legacy.css","sources":["main.scss","../../../source/lib/normalize/index.css","defines.scss","../../../source/scss-legacy/jig/_index.scss","../../../source/scss-legacy/jig/globals.scss","../../../source/scss-legacy/jig/util.scss","../../../source/scss-legacy/jig/breakpoints.scss","../../../source/scss-legacy/jig/grid.scss","../../../source/scss-legacy/jig/spacing.scss","examples.scss"],"sourcesContent":["@import 'normalize/index';\n@import 'defines';\n@import 'jig/_index';\n@import 'examples';\n","/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}\n\n/*# sourceMappingURL=index.css.map */\n","$JIG_CONFIG: (\n\t'breakpoints' : (\n\t\t'xsmall' : 0,\n\t\t'medium' : 768px,\n\t\t'large' : 1280px,\n\t\t'xlarge' : 1600px\n\t),\n\t'print-breakpoint' : 'large',\n\t'grid' : (\n\t\t'columns' : 12,\n\t\t'gutters' : (\n\t\t\t'horizontal' : (\n\t\t\t\t'xsmall' : 10px,\n\t\t\t\t'medium' : 20px,\n\t\t\t\t'large' : 40px\n\t\t\t),\n\t\t\t'vertical' : 20px\n\t\t)\n\t),\n\t'spacing' : (\n\t\t'xxs' : (\n\t\t\t'xsmall' : 10px\n\t\t),\n\t\t'xs' : (\n\t\t\t'xsmall' : 10px,\n\t\t\t'small' : 20px\n\t\t),\n\t\t'sm' : (\n\t\t\t'xsmall' : 20px,\n\t\t\t'large' : 30px\n\t\t),\n\t\t'md' : (\n\t\t\t'xsmall' : 30px,\n\t\t\t'xlarge' : 40px\n\t\t),\n\t\t'l' : (\n\t\t\t'xsmall' : 40px,\n\t\t\t'medium' : 60px\n\t\t),\n\t\t'xl' : (\n\t\t\t'xsmall' : 40px,\n\t\t\t'medium' : 50px,\n\t\t\t'large' : 80px\n\t\t),\n\t\t'xxl' : (\n\t\t\t'xsmall': 40px,\n\t\t\t'medium': 80px,\n\t\t\t'large' : 120px\n\t\t)\n\t),\n\t'content' : (\n\t\t'padding' : (\n\t\t\t'xsmall' : 15px,\n\t\t\t'small' : 35px,\n\t\t\t'medium' : 50px,\n\t\t\t'xlarge' : 60px\n\t\t),\n\t\t'min-width' : 320px - 2 * 15px,\n\t\t'max-width' : 1920px,\n\t\t'base-font-size' : 12px\n\t)\n);\n\n$GRID_CONTAINER_BACKGROUNDCOLOR: (\n\t'xsmall' : #aaa,\n\t'medium' : #ccc,\n\t'large' : #eee\n);\n\n$GRID_CONTAINER_BACKGROUNDIMAGE: (\n\t'xsmall' : url('../files/img/background-small.jpg'),\n\t'medium' : url('../files/img/background-medium.jpg'),\n\t'large' : url('../files/img/background-large.jpg')\n);\n","@import 'globals';\n@import 'util';\n@import 'breakpoints';\n@import 'grid';\n@import 'spacing';\n","$JIG_CONFIG: null !default;\n$jig---config: null !default;\n@if (type-of($jig---config) != 'map') and (type-of($JIG_CONFIG) == 'map') {\n\t$jig---config: $JIG_CONFIG;\n}\n\n@if type-of($jig---config) != 'map' {\n\t@error 'jig:globals | jig config is undefined or not a map'\n}\n\n\n\n$jig---breakpoint-config: map-get($jig---config, 'breakpoints') !default;\n$jig---breakpoint-config: (\n\t'small' : 0,\n\t'medium' : 768px,\n\t'large' : 1280px\n) !default;\n\n\n\n$jig---grid-config: map-get($jig---config, 'grid') !default;\n$jig---grid-config: (\n\t'columns' : 12,\n\t'gutters' : (\n\t\t'horizontal' : (\n\t\t\t'small' : 20px,\n\t\t\t'medium' : 30px,\n\t\t\t'large' : 40px\n\t\t),\n\t\t'vertical' : 20px\n\t)\n) !default;\n\n\n\n$jig---spacing-config: map-get($jig---config, 'spacing') !default;\n$jig---spacing-config: (\n\t'sm' : (\n\t\t'small' : 1rem,\n\t\t'medium' : 2rem,\n\t\t'large' : 3rem\n\t),\n\t'md' : (\n\t\t'small' : 2rem,\n\t\t'medium' : 3rem,\n\t\t'large' : 5rem\n\t),\n\t'l' : (\n\t\t'small' : 3rem,\n\t\t'medium' : 5rem,\n\t\t'large' : 8rem\n\t)\n) !default;\n\n\n\n$jig---content-config: map-get($jig---config, 'content') !default;\n$jig---content-config: (\n\t'padding' : (\n\t\t'small' : 20px,\n\t\t'medium' : 40px,\n\t\t'large' : 80px\n\t),\n\t'max-width' : 1600px,\n\t'base-font-size' : 16px\n) !default;\n\n\n\n$jig---base-font-size: map-get($jig---content-config, 'base-font-size') !default;\n$jig---base-font-size: 16px !default;\n\n\n\n$jig---print-breakpoint: map-get($jig---config, 'print-breakpoint') !default;\n$jig---print-breakpoint: 'large' !default;\n","/**\n * @namespace Util\n */\n\n\n\n/**\n * @namespace Util:map-get-deep\n */\n\n/**\n * Retrieve a value deeply nested in a map, defined by a path of keys.\n *\n * @memberof Util:map-get-deep\n * @function\n * @name map-get-deep\n * @alias map-get-deep\n *\n * @param {Map} $map - the map to search in\n * @param {String|List} $keys - the keys to traverse down in the map\n * @returns {*|null} the value at the defined key path or null if not defined\n *\n * @example\n * map-get-deep($foo-map, 'level1', 'level2')\n * => value of $foo-map.level1.level2\n */\n@function map-get-deep($map, $keys...){\n\t@each $key in $keys {\n\t\t@if map-has-key($map, $key) {\n\t\t\t$map: map-get($map, $key);\n\t\t} @else {\n\t\t\t@return null;\n\t\t}\n\t}\n\n\t@return $map;\n}\n\n\n\n/**\n * @namespace Util:map-next\n */\n\n/**\n * Retrieves the value of the adjacent, next key in a map, if one exists.\n * The idea is, to retrieve the next key, based on a current one, to go one step further,\n * which is helpful for things like escalating to the next breakpoint for example.\n *\n * @memberof Util:map-next\n * @function\n * @name map-next\n * @alias map-next\n *\n * @param {Map} $map - the map to use\n * @param {String} $key - the current key, from which we want to go to the next\n * @returns {*|null} the value of the next key or null if there is none\n *\n * @example\n * map-next($foo-map, 'small')\n * => value of $foo-map.medium\n */\n@function map-next($map, $key){\n\t$keys: map-keys($map);\n\n\t$next-index: 0;\n\t@if map-has-key($map, $key) {\n\t\t$next-index: index($keys, $key) + 1;\n\t}\n\n\t@if ($next-index == 0) or ($next-index > length($map)) {\n\t\t@return null;\n\t} @else {\n\t\t@return map-get($map, nth($keys, $next-index));\n\t}\n}\n\n\n\n/**\n * @namespace Util:strip-unit\n */\n\n/**\n * Removes the unit from a value, turning it into a unit-less value.\n *\n * @memberof Util:strip-unit\n * @function\n * @name strip-unit\n * @alias strip-unit\n *\n * @param {Number} $number - the number to strip the unit from\n * @returns {Number} the unit-less number\n *\n * @example\n * strip-unit(16px)\n * => 16\n */\n@function strip-unit($number){\n\t@return $number / ($number * 0 + 1);\n}\n\n\n\n/**\n * @namespace Util:to-rem\n */\n\n/**\n * Convert one or more px values to (a) rem value(s), based on a base font size in px, percent or rem.\n * If the base is in % or rem, the base will be converted to px based on the global base font size.\n *\n * @memberof Util:to-rem\n * @function\n * @name to-rem\n * @alias to-rem\n *\n * @param {Number|List} $values - the value(s) to convert, usually px values, if a value is em, it will be treated as rem\n * @param {?Number} [$base=$jig---base-font-size-px] - the base size to convert against\n * @returns {Number|List} the converted value(s)\n *\n * @example\n * to-rem(32px)\n * => 2rem\n * to-rem((10px, 20px, 40px), 20px)\n * => [0.5rem, 1rem, 2rem]\n */\n@function to-rem($values, $base:$jig---base-font-size){\n\t@if unit($base) == '%' {\n\t\t$base: (strip-unit($base) / 100) * $jig---base-font-size;\n\t}\n\n\t@if unit($base) == 'rem' {\n\t\t$base: strip-unit($base) * $jig---base-font-size;\n\t}\n\n\t@if type-of($values) != 'list' {\n\t\t$values: [$values];\n\t}\n\n\t$rem-values: [];\n\t@each $value in $values {\n\t\t$rem-value: 0;\n\n\t\t@if unit($value) == 'em' {\n\t\t\t$rem-value: strip-unit($value);\n\t\t} @else {\n\t\t\t$rem-value: strip-unit($value) / strip-unit($base);\n\t\t}\n\n\t\t@if $rem-value != 0 {\n\t\t\t$rem-value: $rem-value * 1rem;\n\t\t}\n\n\t\t$rem-values: append($rem-values, $rem-value);\n\t}\n\n\t@if length($rem-values) == 1 {\n\t\t@return nth($rem-values, 1);\n\t} @else {\n\t\t@return $rem-values;\n\t}\n}\n\n\n\n/**\n * @namespace Util:to-em\n */\n\n/**\n * Convert one or more px values to (a) em value(s), based on a base font size in px, percent or rem.\n * If the base is in % or rem, the base will be converted to px based on the global base font size.\n *\n * @memberof Util:to-em\n * @function\n * @name to-em\n * @alias to-em\n *\n * @param {Number|List} $values - the value(s) to convert, usually px values, if a value is em, it will not be changed\n * @param {Number} $base - the base size to convert against\n * @returns {Number|List} the converted value(s)\n *\n * @example\n * to-em(32px, 16px)\n * => 2em\n * to-em((10px, 20px, 40px), 20px)\n * => [0.5em, 1em, 2em]\n */\n@function to-em($values, $base){\n\t$rem-values: to-rem($values, $base);\n\t@if type-of($rem-values) != 'list' {\n\t\t$rem-values: [$rem-values];\n\t}\n\n\t$em-values: [];\n\t@each $rem-value in $rem-values {\n\t\t$em-value: 0;\n\n\t\t@if $rem-value != 0 {\n\t\t\t$em-value: strip-unit($rem-value) * 1em;\n\t\t}\n\n\t\t$em-values: append($em-values, $em-value);\n\t}\n\n\t@if length($em-values) == 1 {\n\t\t@return nth($em-values, 1);\n\t} @else {\n\t\t@return $em-values;\n\t}\n}\n\n\n\n/**\n * @namespace Util:str-join\n */\n\n/**\n * Join/concatenate two or more strings with an optional glue string.\n *\n * @memberof Util:str-join\n * @function\n * @name str-join\n * @alias str-join\n *\n * @param {String|List} strings - the strings to join\n * @param {String} glue - the string to put between joined strings\n * @returns {String} the joined string\n *\n * @example\n * str-join(['fo', 'ar'], 'ob')\n * => 'foobar'\n */\n@function str-join($strings, $glue:''){\n\t$strings: join([], $strings);\n\n\t$res: '';\n\t@each $string in $strings {\n\t\t@if $string {\n\t\t\t$res: $res+$string+$glue;\n\t\t}\n\t}\n\n\t@if ($res != '') and ($glue != '') {\n\t\t@return str-slice($res, 1, str-length($glue) * -1);\n\t} @else {\n\t\t@return $res;\n\t}\n}\n","/**\n * @namespace Breakpoints\n */\n\n\n\n$jig---auto-breakpoint: nth(map-keys($jig---breakpoint-config), 1);\n\n\n\n/**\n * @namespace Breakpoints:get-auto-breakpoint\n */\n\n/**\n * Returns the current auto breakpoint value.\n *\n * @memberof Breakpoints:get-auto-breakpoint\n * @function\n * @name get-auto-breakpoint\n * @alias get-auto-breakpoint\n *\n * @returns {String} the name of the current named auto breakpoint\n *\n * @see set-auto-breakpoint\n * @see reset-auto-breakpoint\n *\n * @example\n * get-auto-breakpoint()\n * => 'medium'\n */\n@function get-auto-breakpoint(){\n\t@return $jig---auto-breakpoint;\n}\n\n\n\n/**\n * @namespace Breakpoints:set-auto-breakpoint\n */\n\n/**\n * Sets the auto breakpoint to a named breakpoint value.\n * Hint: in Sass we do _not_ have to do this manually, if we want to use auto breakpoint values,\n * since blocks are always evaluated _after_ the block mixin around the block, which results\n * in the block knowing the breakpoint value automatically from the mixin around it.\n *\n * @memberof Breakpoints:set-auto-breakpoint\n * @function\n * @name set-auto-breakpoint\n * @alias set-auto-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @throws error if breakpoint is unknown\n *\n * @see reset-auto-breakpoint\n\n * @example\n * \\@include set-auto-breakpoint(medium);\n * \\@include breakpoint(medium){\n * ...\n * }\n */\n@mixin set-auto-breakpoint($breakpoint){\n\t@if map-has-key($jig---breakpoint-config, $breakpoint) {\n\t\t$jig---auto-breakpoint: $breakpoint !global;\n\t} @else {\n\t\t@error 'jig:set-current-breakpoint | unknown named breakpoint \"#{$breakpoint}\"';\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:reset-auto-breakpoint\n */\n\n/**\n * Resets the auto breakpoint to the first/smallest named breakpoint defined in the jig config.\n * Hint: this is automatically called at the end of the breakpoint mixin, so usually you should be fine\n * never calling this manually\n *\n * @memberof Breakpoints:reset-auto-breakpoint\n * @function\n * @name reset-auto-breakpoint\n * @alias reset-auto-breakpoint\n *\n * @see set-auto-breakpoint\n\n * @example\n * \\@include reset-auto-breakpoint();\n */\n@mixin reset-auto-breakpoint(){\n\t$jig---auto-breakpoint: nth(map-keys($jig---breakpoint-config), 1) !global;\n}\n\n\n\n/**\n * @namespace Breakpoints:is-named-breakpoint\n */\n\n/**\n * Returns if the given breakpoint is a registered named breakpoint to be found in the jig config.\n *\n * @memberof Breakpoints:is-named-breakpoint\n * @function\n * @name is-named-breakpoint\n * @alias is-named-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @returns {Boolean} true if breakpoint is a registered named breakpoint name\n *\n * @example\n * is-named-breakpoint(medium)\n * => true\n */\n@function is-named-breakpoint($breakpoint){\n\t@return map-has-key($jig---breakpoint-config, $breakpoint);\n}\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-range\n */\n\n/**\n * Returns a string to be used in a media query, which defines the range/bounds of a breakpoint with\n * min and/or max value.\n *\n * @memberof Breakpoints:build-breakpoint-range\n * @function\n * @name build-breakpoint-range\n * @alias build-breakpoint-range\n *\n * @param {?Number} [$min=null] - the min width of the breakpoint\n * @param {?Number} [$max=null] - the max width of the breakpoint\n * @returns {String} the media query string for the breakpoint range\n *\n * @example\n * build-breakpoint-range(0, 767px)\n * => '(min-width: 0) and (max-width: 767px)'\n * build-breakpoint-range(null, 100rem)\n * => '(max-width: 100rem)'\n */\n@function build-breakpoint-range($min:null, $max:null){\n\t@return str-join(\n\t\t[\n\t\t\tif($min != null, '(min-width: #{$min})', null),\n\t\t\tif($max != null, '(max-width: #{$max})', null)\n\t\t],\n\t\t' and '\n\t);\n}\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-query\n */\n\n/**\n * Constructs a query to be used in a media query, based on a breakpoint definition.\n * Also automatically converts values to rem.\n *\n * Directions in composite definitions may be \"up\", \"down\" or \"only\".\n *\n * You may also define the special breakpoints \"landscape\" or \"portrait\" to cover device orientations.\n *\n * @memberof Breakpoints:build-breakpoint-query\n * @function\n * @name build-breakpoint-query\n * @alias build-breakpoint-query\n *\n * @param {?Number|Literal|List} [$breakpoint-definition=0] - either a simple number or a composite definition of width and direction, where the width may either be a number or a name defined in the named breakpoints\n * @returns {String} the media query string for the breakpoint definition\n * @throws error if named breakpoint is unknown\n * @throws error if an unnamed breakpoint has an \"only\" direction\n *\n * @example\n * build-breakpoint-query(200rem)\n * => '(min-width: 200rem)'\n * build-breakpoint-query(small down)\n * => '(max-width: 199rem)'\n * build-breakpoint-query(('large' 'only'))\n * => '(min-width: 200rem) and (max-width: 499rem)'\n * build-breakpoint-query(1024px only)\n * => '(min-width: 64rem) and (max-width: 64rem)'\n * build-breakpoint-query(landscape)\n * => '(orientation: landscape)'\n */\n@function build-breakpoint-query($breakpoint-definition:0){\n\t$breakpoint: if($breakpoint-definition and (length($breakpoint-definition) > 0), nth($breakpoint-definition, 1), 0);\n\t$direction: if($breakpoint-definition and (length($breakpoint-definition) > 1), nth($breakpoint-definition, 2), 'up');\n\t$breakpoint-name: null;\n\t$next-breakpoint: null;\n\t$min: null;\n\t$max: null;\n\t$query-em-conversion-base: 16px; // this is always 16px, no matter what is defined on \n\n\t@if $breakpoint == 'overwrite' {\n\t\t@return '(min-width: 0)';\n\t} @else if ($breakpoint == 'landscape') or ($breakpoint == 'portrait') {\n\t\t@return '(orientation: #{$breakpoint})';\n\t} @else if type-of($breakpoint) == 'string' {\n\t\t@if is-named-breakpoint($breakpoint) {\n\t\t\t$breakpoint-name: $breakpoint;\n\t\t\t$breakpoint: map-get($jig---breakpoint-config, $breakpoint-name);\n\t\t\t$next-breakpoint: map-next($jig---breakpoint-config, $breakpoint-name);\n\t\t} @else {\n\t\t\t@error 'jig:build-breakpoint-query | \"#{$breakpoint-definition}\" is not a defined breakpoint';\n\t\t}\n\t}\n\n\t@if ($breakpoint-name == null) and ($direction == 'only') {\n\t\t@error 'jig:build-breakpoint-query | only named media queries can have an \"only\" range';\n\t}\n\n\t// we are building media queries with em instead of rem and px\n\t// why? => https://zellwk.com/blog/media-query-units/\n\n\t@if ($direction == 'only') or ($direction == 'up') {\n\t\t$min: to-em($breakpoint, $query-em-conversion-base);\n\t}\n\n\t@if ($direction == 'only') or ($direction == 'down') {\n\t\t@if $breakpoint-name == null {\n\t\t\t$max: to-em($breakpoint, $query-em-conversion-base);\n\t\t} @else if $next-breakpoint != null {\n\t\t\t$max: to-em($next-breakpoint, $query-em-conversion-base) - to-em(1px, $query-em-conversion-base);\n\t\t}\n\t}\n\n\t@if ($min == 0) and ($max == null){\n\t\t$min: null;\n\t}\n\n\t@return build-breakpoint-range($min, $max);\n}\n\n\n\n/**\n * @namespace Breakpoints:breakpoint\n */\n\n/**\n * Renders media queries based one one or more breakpoint definitions.\n *\n * @memberof Breakpoints:breakpoint\n * @function\n * @name breakpoint\n * @alias breakpoint\n *\n * @param {Number|Literal|List|List|List>} $breakpoint-definitions - a list of breakpoint definitions according to build-breakpoint-query\n *\n * @example\n * \\@include breakpoint(small){\n * ...\n * }\n * \\@include breakpoint(small down, large up){\n * ...\n * }\n */\n@mixin breakpoint($breakpoint-definitions...){\n\t@each $breakpoint-definition in $breakpoint-definitions {\n\t\t$query: build-breakpoint-query($breakpoint-definition);\n\t\t$breakpoint: if(length($breakpoint-definition) > 0, nth($breakpoint-definition, 1), 0);\n\t\t$direction: if(length($breakpoint-definition) > 1, nth($breakpoint-definition, 2), 'up');\n\t\t$breakpoint-index: index(map-keys($jig---breakpoint-config), nth($breakpoint-definition, 1));\n\t\t$print-breakpoint-index: index(map-keys($jig---breakpoint-config), $jig---print-breakpoint);\n\n\t\t// set current breakpoint var to mixin breakpoint value to allow for auto-evaluation inside\n\t\t@if is-named-breakpoint($breakpoint){\n\t\t\t@include set-auto-breakpoint($breakpoint);\n\t\t}\n\n\t\t@if $query == '' {\n\t\t\t@content;\n\t\t} @else {\n\t\t\t@if(\n\t\t\t\t($breakpoint-index != null)\n\t\t\t\tand (\n\t\t\t\t\t($breakpoint-index <= $print-breakpoint-index)\n\t\t\t\t\tor ($direction == 'down')\n\t\t\t\t)\n\t\t\t){\n\t\t\t\t@media print, screen and #{$query} {\n\t\t\t\t\t@content;\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@media screen and #{$query} {\n\t\t\t\t\t@content;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// restore initial value after mixin has been rendered\n\t\t@include reset-auto-breakpoint();\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:breakpoint-value\n */\n\n/**\n * Search for a value, defined for a breakpoint, in a given map of values.\n * The function escalates in a mobile-first manner. So we take the value for the smallest breakpoint\n * and step up the breakpoints one by one until we reach the defined breakpoint. So, if we want the\n * according value for \"large\", but we only have a value for \"medium\", we'll get the \"medium\" value, which,\n * in mobile-first manner, escalates upwards and is the \"large\" value if nothing else is defined.\n *\n * @memberof Breakpoints:breakpoint-value\n * @function\n * @name breakpoint-value\n * @alias breakpoint-value\n *\n * @param {*|Map} $value - a map of breakpoint-keyed map of values, or a simple value\n * @param {Literal|String} $breakpoint - either \"auto\" (to use the current breakpoint) or one of the defined named breakpoints\n * @returns {*|null} the breakpoint value or null if nothing was found\n * @throws error if named breakpoint is unknown\n *\n * @example\n * breakpoint-value(\n * (\n * 'small' : 10px,\n * 'medium' : 20px\n * ),\n * large\n * )\n * => 20px\n */\n@function breakpoint-value($value, $breakpoint:'auto'){\n\t@if ($breakpoint != 'auto') and not map-has-key($jig---breakpoint-config, $breakpoint) {\n\t\t@error 'jig:breakpoint-value | given breakpoint \"#{$breakpoint}\" not defined';\n\t}\n\n\t@if type-of($value) == 'map' {\n\t\t$res: null;\n\n\t\t@if $breakpoint == 'auto' {\n\t\t\t$breakpoint: get-auto-breakpoint();\n\t\t}\n\n\t\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t\t$breakpoint-value: map-get($value, $breakpoint-name);\n\n\t\t\t@if $breakpoint-value != null {\n\t\t\t\t$res: $breakpoint-value;\n\t\t\t}\n\n\t\t\t@if $breakpoint-name == $breakpoint {\n\t\t\t\t@return $res;\n\t\t\t}\n\t\t}\n\n\t\t@return null;\n\t} @else {\n\t\t@return $value;\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:attributes-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attributes for defined breakpoints.\n *\n * Definitions will be rendered together if possible, minimizing the amount of media queries.\n * However, each call of this mixin will, most likely, render multiple media queries, so keep a close eye\n * on your media query structure to avoid unnecessarily doubled definitions and keep media queries to a minimum.\n * If in doubt, it might be a better idea to write the queries manually, perhaps rather using `map-get` or\n * `breakpoint-value` to automatically pull values from breakpoint value maps.\n *\n * @memberof Breakpoints:attributes-for-breakpoints\n * @function\n * @name attributes-for-breakpoints\n * @alias attributes-for-breakpoints\n *\n * @see attribute-for-breakpoints\n *\n * @param {Map} $attributes - keys are attribute names, while values are either plain values or maps with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @example\n * \\@include attributes-for-breakpoints(\n * (\n * 'font-size' : 12px,\n * 'line-height' : (\n * 'small' : 1,\n * 'large' : 1.25\n * ),\n * 'margin-top' : (\n * 'small' : 10px,\n * 'medium' : 20px\n * )\n * ),\n * 2.0\n * );\n */\n@mixin attributes-for-breakpoints($attributes, $factor:null){\n\t$attributes-for-breakpoints: ();\n\t@each $attribute-name, $attribute-value in $attributes {\n\t\t@if type-of($attribute-value) != 'map' {\n\t\t\t@if $factor == null {\n\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t} @else {\n\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t}\n\t\t} @else {\n\t\t\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t\t\t$breakpoint-value: map-get($attribute-value, $breakpoint-name);\n\t\t\t\t@if $breakpoint-value != null {\n\t\t\t\t\t$breakpoint-attributes: map-get($attributes-for-breakpoints, $breakpoint-name);\n\t\t\t\t\t@if $breakpoint-attributes == null {\n\t\t\t\t\t\t$breakpoint-attributes: ();\n\t\t\t\t\t}\n\n\t\t\t\t\t$breakpoint-attributes: map-merge(\n\t\t\t\t\t\t$breakpoint-attributes,\n\t\t\t\t\t\t($attribute-name : $breakpoint-value)\n\t\t\t\t\t);\n\n\t\t\t\t\t$attributes-for-breakpoints: map-merge(\n\t\t\t\t\t\t$attributes-for-breakpoints,\n\t\t\t\t\t\t($breakpoint-name : $breakpoint-attributes)\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t$breakpoint-attributes: map-get($attributes-for-breakpoints, $breakpoint-name);\n\t\t@if ($breakpoint-attributes != null) and (length(map-keys($breakpoint-attributes)) > 0) {\n\t\t\t@include breakpoint($breakpoint-name){\n\t\t\t\t@each $attribute-name, $attribute-value in $breakpoint-attributes {\n\t\t\t\t\t@if $factor == null {\n\t\t\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:attribute-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attribute for defined breakpoints.\n *\n * This is the single attribute version of `attributes-for-breakpoints`.\n * Since this version does not optimize the usage of media queries, please make sure to only use this mixin,\n * if you'll definitely only have one attribute to be defined in multiple breakpoints.\n *\n * @memberof Breakpoints:attribute-for-breakpoints\n * @function\n * @name attribute-for-breakpoints\n * @alias attribute-for-breakpoints\n *\n * @see attributes-for-breakpoints\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * \\@include attribute-for-breakpoints(\n * 'line-height',\n * (\n * 'small' : 1,\n * 'large' : 1.25\n * ),\n * 1.0\n * );\n */\n@mixin attribute-for-breakpoints($attribute, $value, $factor:null){\n\t$attributes: ();\n\t$attributes: map-merge($attributes, ('#{$attribute}' : $value));\n\t@include attributes-for-breakpoints($attributes, $factor);\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attributes\n */\n\n/**\n * Use this, if you need to overwrite attribute values previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attributes\n * @function\n * @name overwrite-breakpoint-for-attributes\n * @alias overwrite-breakpoint-for-attributes\n *\n * @param {Map} $attributes - keys are attribute names, while values are either plain values or maps with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @see overwrite-breakpoint-for-attribute\n *\n * @example\n * \\@include overwrite-breakpoint-for-attributes(\n * (\n * 'font-size' : 12px,\n * 'line-height' : 1.25\n * 'margin-top' : 20px\n * ),\n * 2.0\n * );\n */\n@mixin overwrite-breakpoint-for-attributes($attributes, $factor:null){\n\t@include breakpoint('overwrite'){\n\t\t@each $attribute-name, $attribute-value in $attributes {\n\t\t\t@if $factor == null {\n\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t} @else {\n\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attribute\n */\n\n/**\n * Use this, if you need to overwrite an attribut value previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attribute\n * @function\n * @name overwrite-breakpoint-for-attribute\n * @alias overwrite-breakpoint-for-attribute\n *\n * @see overwrite-breakpoint-for-attributes\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * \\@include overwrite-breakpoint-for-attribute(font-size, 12px, 2.0);\n */\n@mixin overwrite-breakpoint-for-attribute($attribute, $value, $factor:null){\n\t$attributes: ();\n\t$attributes: map-merge($attributes, ('#{$attribute}' : $value));\n\t@include overwrite-breakpoint-for-attributes($attributes, $factor);\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint\n */\n\n/**\n * Use this, if you need to overwrite something previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to redefine something statically in an override situation, which has\n * been defined responsively before.\n *\n * @memberof Breakpoints:overwrite-breakpoint\n * @function\n * @name overwrite-breakpoint\n * @alias overwrite-breakpoint\n *\n * @example\n * \\@include overwrite-breakpoint(){\n * font-size: 12xp;\n * margin-top: 20px;\n * }\n */\n@mixin overwrite-breakpoint(){\n\t@include breakpoint('overwrite'){\n\t\t@content;\n\t}\n}\n","/**\n * @namespace Grid\n */\n\n\n\n/**\n * @namespace Grid:grid-container\n */\n\n/**\n * Renders the basic properties of a grid container, which is the bracket element for elements, which are\n * to be placed in a grid, thereby making the container, more or less, \"the grid itself\".\n *\n * The basic characteristic of this container is the pre-definition of usable grid columns, according to our config.\n *\n * @memberof Grid:grid-container\n * @function\n * @name grid-container\n * @alias grid-container\n *\n * @see grid-item\n *\n * @example\n * \\@include grid-container();\n */\n@mixin grid-container(){\n\tdisplay: grid;\n\tgrid-auto-flow: row;\n\tgrid-template-columns: repeat(map-get($jig---grid-config, 'columns'), 1fr);\n\t@include attributes-for-breakpoints((\n\t\t'grid-column-gap' : map-get-deep($jig---grid-config, 'gutters', 'horizontal'),\n\t\t'grid-row-gap' : map-get-deep($jig---grid-config, 'gutters', 'vertical')\n\t));\n}\n\n\n\n/**\n * @namespace Grid:grid-item\n */\n\n/**\n * Renders the basic properties of a grid item, which is an item inside a grid, being placed according to\n * pre-defined columns.\n *\n * The main purpose of this mixin is, to define the space, the item takes inside the grid. To do this, there are\n * several means of definition. Either just giving it a column-based width, aligning it at the end of other,\n * already existing items, or defining a specific area it should cover, by explicitly defining a start and end column\n * or a combination of both.\n *\n * Additionally, the item may also be defined to take up more than one row, adding the native grid capabilities to\n * our concepts.\n *\n * @memberof Grid:grid-item\n * @function\n * @name grid-item\n * @alias grid-item\n *\n * @param {?Number} [$span=null] - the width of the item in columns\n * @param {?Number} [$start=null] - the horizontal start offset of the item in columns, may be combined with end or span\n * @param {?Number} [$end=null] - the horizontal end offset of the item in columns, may be combined with start or span\n * @param {?Number} [$row-span=null] - the height of the item in rows\n * @param {?Number} [$row-start=null] - the vertical start offset of the item in rows, may be combined with row-end or row-span\n * @param {?Number} [$row-end=null] - the vertical end offset of the item in rows, may be combined with row-start or row-span\n *\n * @see grid-container\n * @see grid-item-align\n *\n * @example\n * \\@include grid-item(12);\n * \\@include grid-item(6, 6);\n * \\@include grid-item(null, 2, 2);\n * \\@include grid-item(6, null, null, 2);\n * \\@include grid-item(6, null, null, null, 0, 5);\n */\n@mixin grid-item(\n\t$span:null,\n\t$start:null,\n\t$end:null,\n\t$row-span:null,\n\t$row-start:null,\n\t$row-end:null\n){\n\t@if ($span == null) and ($start == null) {\n\t\tgrid-column-end: span map-get($jig---grid-config, 'columns');\n\t} @else {\n\t\t@if $span != null {\n\t\t\tgrid-column-end: span $span;\n\t\t}\n\n\t\t@if $start != null {\n\t\t\tgrid-column-start: $start + 1;\n\t\t}\n\n\t\t@if ($end != null) and ($span == null) {\n\t\t\tgrid-column-end: $end + 1;\n\t\t}\n\t}\n\n\t@if ($row-span != null) or ($row-start != null) {\n\t\t@if $row-span != null {\n\t\t\tgrid-row-end: span $row-span;\n\t\t}\n\n\t\t@if $row-start != null {\n\t\t\tgrid-row-start: $row-start + 1;\n\t\t}\n\n\t\t@if ($row-end != null) and ($row-span == null) {\n\t\t\tgrid-row-end: $row-end + 1;\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Grid:grid-item-align\n */\n\n/**\n * Renders properties of a grid item, to define the item's alignment inside the area defined for the item using\n * the grid-item mixin. The usage of this only make sense for grid items.\n *\n * @memberof Grid:grid-item-align\n * @function\n * @name grid-item-align\n * @alias grid-item-align\n *\n * @param {String} [$horizontal=null] - \"left\"/\"start\", \"right\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n * @param {String} [$vertical=null] - \"top\"/\"start\", \"bottom\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n *\n * @see grid-item\n *\n * @example\n * \\@include grid-item-align('left');\n * \\@include grid-item-align(center, center);\n * \\@include grid-item-align(null, 'full');\n */\n@mixin grid-item-align($horizontal:null, $vertical:null){\n\t@if $horizontal == 'left' {\n\t\t$horizontal: 'start';\n\t} @else if $horizontal == 'right' {\n\t\t$horizontal: 'end';\n\t} @else if $horizontal == 'middle' {\n\t\t$horizontal: 'center';\n\t} @else if $horizontal == 'full' {\n\t\t$horizontal: 'stretch';\n\t}\n\n\t@if $vertical == 'top' {\n\t\t$vertical: 'start';\n\t} @else if $vertical == 'bottom' {\n\t\t$vertical: 'end';\n\t} @else if $vertical == 'middle' {\n\t\t$vertical: 'center';\n\t} @else if $vertical == 'full' {\n\t\t$vertical: 'stretch';\n\t}\n\n\t@if $horizontal != null {\n\t\tjustify-self: unquote($horizontal);\n\t}\n\n\t@if $vertical != null {\n\t\talign-self: unquote($vertical);\n\t}\n}\n\n\n\n/**\n * @namespace Grid:gutter-value\n */\n\n/**\n * Returns the value of the defined distance between two columns/rows for a breakpoint.\n *\n * The main usage for this is, to define a property value based on the current gutter.\n * This is why the parameter order may seem flipped, but usually, you'd use this inside a breakpoint\n * using auto-breakpoint detection, primarily rather working with the value itself. For other cases:\n * Remember, that that you can simply use named parameters.\n *\n * @memberof Grid:gutter-value\n * @function\n * @name gutter-value\n * @alias gutter-value\n *\n * @param {Number} [$factor=1.0] - factor to apply to the finally evaluated gutter value, most helpful to get half a gutter for example\n * @param {Number} [$add=0] - value to add to the finally evaluated gutter value, may also be negative to subtract\n * @param {String} [$direction='horizontal'] - either \"horizontal\" or \"vertical\", determines the gutter direction in the grid\n * @param {String} [$breakpoint='auto'] - a defined breakpoint name or \"auto\", to use the current breakpoint at the point of usage\n * @returns {Number} the determined gutter value with applied factor and/or addition\n * @throws error if no gutter value could be determined, based on given breakpoint and/or direction\n *\n * @example\n * \\@include breakpoint(medium){\n * padding-left: gutter-value(0.5);\n * }\n * margin-top: gutter-value($direction:'vertical', $breakpoint:'small');\n */\n@function gutter-value($factor:1.0, $add:0, $direction:'horizontal', $breakpoint:'auto'){\n\t$gutter: map-get-deep($jig---grid-config, 'gutters', $direction);\n\t$res: null;\n\n\t@if $gutter != null {\n\t\t@if type-of($gutter) == 'map' {\n\t\t\t$res: breakpoint-value($gutter, $breakpoint);\n\t\t} @else {\n\t\t\t$res: $gutter;\n\t\t}\n\t}\n\n\t@if $res == null {\n\t\t@error 'jig:gutter-value | could not resolve gutter, check direction and/or breakpoint';\n\t}\n\n\t@return ($res * $factor) + $add;\n}\n","/**\n * @namespace Spacing\n */\n\n\n\n/**\n * @namespace Spacing:spacing-value\n */\n\n/**\n * Return a spacing value defined in the jig config, based on a breakpoint.\n *\n * @memberof Spacing:spacing-value\n * @function\n * @name spacing-value\n * @alias spacing-value\n *\n * @param {String} $size - on of the named sized defined in jig's spacing config (e.g. sm, l, xxl, ...)\n * @param {Literal|String} [$breakpoint='auto'] - either \"auto\" (to use the current breakpoint) or one of the defined named breakpoints\n * @returns {Number|null} the spacing value or null if nothing was found\n * @throws error if size is unknown\n *\n * @example\n * spacing-value(sm)\n * => 12px\n * spacing-value(md, large)\n * => 5rem\n */\n@function spacing-value($size, $breakpoint:'auto'){\n\t$spacing: map-get($jig---spacing-config, $size);\n\n\t@if $spacing == null {\n\t\t@error 'jig:spacing-value | unknown size \"#{$size}\"';\n\t}\n\n\t@if type-of($spacing) == 'map' {\n\t\t@return breakpoint-value($spacing, $breakpoint);\n\t} @else {\n\t\t@return $spacing;\n\t}\n}\n\n\n\n/**\n * @namespace Spacing:spacing-based-attributes\n */\n\n/**\n * Define (an) attribute(s) based on breakpoint-dependent spacing values.\n * This will render the given attributes with the corresponding spacing values for each defined breakpoint\n * in compiled media queries. Since this will result in many media queries being rendered, make sure before,\n * that there aren't many other media queries also needed to complete your definition. In that case, it might be\n * better and more performant to rather write the queries manually and get the spacing values via `[]` or\n * `spacing-value`.\n *\n * @memberof Spacing:spacing-based-attributes\n * @function\n * @name spacing-based-attributes\n * @alias spacing-based-attributes\n *\n * @param {Map} $attributes - keys are attribute names, while values are spacing sizes\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n * @throws error if size is unknown\n *\n * @see spacing-based-attribute\n *\n * @example\n * \\@include spacing-based-attributes(\n * (\n * 'padding-top' : 'sm',\n * 'padding-right' : 'md',\n * 'padding-bottom' : 'sm'\n * 'padding-left' : 'md'\n * 'margin-top' : 'l',\n * 'margin-bottom' : 'xl'\n * ),\n * 2.0\n * );\n */\n@mixin spacing-based-attributes($attributes, $factor:null){\n\t$spacing-attributes: ();\n\t@each $attribute-name, $attribute-size in $attributes {\n\t\t$size-definition: map-get($jig---spacing-config, $attribute-size);\n\n\t\t@if $size-definition == null {\n\t\t\t@error 'jig:spacing-based-attributes | unknown size \"#{$size-definition}\"';\n\t\t}\n\n\t\t$spacing-attributes: map-merge($spacing-attributes, ($attribute-name : $size-definition));\n\t}\n\n\t@include attributes-for-breakpoints($spacing-attributes, $factor);\n}\n\n\n\n/**\n * @namespace Spacing:spacing-based-attribute\n */\n\n/**\n * Define an attribute based on breakpoint-dependent spacing values.\n * Since this version does not optimize the usage of media queries, please make sure to only use this mixin,\n * if you'll definitely only have one attribute to be defined in multiple breakpoints.\n *\n * @memberof Spacing:spacing-based-attribute\n * @function\n * @name spacing-based-attribute\n * @alias spacing-based-attribute\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {String} $size - on of the named sized defined in jig's spacing config (sm, l, xxl, ...)\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n * @throws error if size is unknown\n *\n * @see spacing-based-attributes\n *\n * @example\n * \\@include spacing-based-attribute(margin-top, 'xl', 1.0);\n */\n@mixin spacing-based-attribute($attribute, $size, $factor:null){\n\t$attributes: ();\n\t$attributes: map-merge($attributes, ('#{$attribute}' : $size));\n\t@include spacing-based-attributes($attributes, $factor);\n}\n","%example-grid {\n\t@include grid-container();\n\n\tposition: relative;\n\n\tpadding: gutter-value();\n\tborder: 3px solid red;\n\n\t&:before {\n\t\tcontent: '';\n\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\n\t\tbackground-size: cover;\n\t\tbackground-position: center center;\n\t\t@include attributes-for-breakpoints((\n\t\t\t'background-color' : $GRID_CONTAINER_BACKGROUNDCOLOR,\n\t\t\t'background-image' : $GRID_CONTAINER_BACKGROUNDIMAGE\n\t\t));\n\n\t\tfilter: saturate(150%) brightness(38%);\n\t}\n\n\t@include breakpoint(medium){\n\t\tpadding: gutter-value();\n\t}\n\n\t@include breakpoint(large){\n\t\tpadding: gutter-value($breakpoint:large);\n\t}\n\n\n\n\t> div,\n\t> div > div {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\n\t\tposition: relative;\n\n\t\tborder: 3px solid dodgerblue;\n\n\t\tcolor: white;\n\t\tfont-size: 1.5rem;\n\t\ttext-shadow: 1px -1px 3px black, 1px 1px 3px black, -1px 1px 3px black, -1px -1px 3px black;\n\n\t\tbackground-size: cover;\n\t\tbackground-position: center center;\n\t\tbackground-color: dodgerblue;\n\n\t\tfilter: grayscale(50%) hue-rotate(-10deg) saturate(200%);\n\n\t\t&:nth-of-type(1){\n\t\t\tbackground-image: url('../files/img/block-1.jpg');\n\t\t}\n\n\t\t&:nth-of-type(2){\n\t\t\tbackground-image: url('../files/img/block-2.jpg');\n\t\t}\n\n\t\t&:nth-of-type(3){\n\t\t\tbackground-image: url('../files/img/block-3.jpg');\n\t\t}\n\n\t\t&:nth-of-type(4){\n\t\t\tbackground-image: url('../files/img/block-4.jpg');\n\t\t}\n\n\t\t&:nth-of-type(5){\n\t\t\tbackground-image: url('../files/img/block-5.jpg');\n\t\t}\n\t}\n\n\n\n\t&:hover {\n\t\t&:before,\n\t\t> div,\n\t\t> div > div {\n\t\t\tborder-color: lightskyblue;\n\n\t\t\tbackground-image: none !important;\n\n\t\t\tfilter: none !important;\n\t\t}\n\n\t\t> div > div {\n\t\t\tfilter: invert(100%) !important;\n\t\t}\n\t}\n}\n\n\n\n#basic-grid-example {\n\t.examples > .scss-legacy {\n\t\t@extend %example-grid;\n\n\n\n\t\t> div {\n\t\t\t&:nth-of-type(odd){\n\t\t\t\t@include grid-item(6);\n\n\t\t\t\theight: 100px;\n\t\t\t}\n\n\t\t\t&:nth-of-type(even){\n\t\t\t\t@include grid-item(6);\n\n\t\t\t\theight: 75px;\n\t\t\t}\n\t\t}\n\n\n\n\t\t@include breakpoint(medium up){\n\t\t\t> div {\n\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\theight: 100px;\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\theight: 80px;\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\theight: 60px;\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\theight: 40px;\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\theight: 20px;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\n\n\t\t@include breakpoint(medium down){\n\t\t\t> div {\n\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\tborder-color: aqua;\n\n\t\t\t\t\tbackground-color: aqua;\n\t\t\t\t\tbackground-image: url('../files/img/block-6.jpg');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\n\n\t\t@include breakpoint(large){\n\t\t\t> div {\n\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t@include grid-item();\n\n\t\t\t\t\theight: 25vh;\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\theight: 12.5vh;\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t@include grid-item(6);\n\t\t\t\t\t@include grid-item-align($vertical:bottom);\n\n\t\t\t\t\theight: 10vh;\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t@include grid-item-align(center, center);\n\t\t\t\t\torder: 2;\n\n\t\t\t\t\twidth: 100px;\n\t\t\t\t\theight: 5vh;\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\torder: 1;\n\n\t\t\t\t\theight: 10vh;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n#advanced-grid-example {\n\t.examples > .scss-legacy {\n\t\t@extend %example-grid;\n\n\t\t@include spacing-based-attribute(padding-top, 'xxl');\n\n\n\n\t\t> div {\n\t\t\t&:nth-of-type(odd){\n\t\t\t\t@include grid-item(4);\n\t\t\t\t@include grid-item-align(null, end);\n\n\t\t\t\theight: gutter-value(2.5, $direction:'vertical');\n\t\t\t}\n\n\t\t\t&:nth-of-type(even){\n\t\t\t\t@include grid-item(4);\n\n\t\t\t\theight: 75px;\n\t\t\t}\n\n\t\t\t&:first-of-type {\n\t\t\t\t@include grid-item($span:4, $row-span:2);\n\t\t\t\t@include grid-item-align($vertical:full);\n\n\t\t\t\theight: auto;\n\t\t\t}\n\t\t}\n\n\n\n\t\t@include breakpoint(xsmall only){\n\t\t\t> div {\n\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\tborder-color: aqua;\n\n\t\t\t\t\tbackground-color: aqua;\n\t\t\t\t\tbackground-image: url('../files/img/block-6.jpg');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\n\n\t\t@include breakpoint(medium){\n\t\t\t> div {\n\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\torder: 5;\n\n\t\t\t\t\twidth: 50%;\n\t\t\t\t\theight: gutter-value(3.0);\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t@include grid-item($start:8, $end:12);\n\t\t\t\t\torder: 4;\n\n\t\t\t\t\theight: 80px;\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t@include grid-item($start:6, $span:2);\n\t\t\t\t\t@include grid-item-align(full, center);\n\t\t\t\t\torder: 3;\n\n\t\t\t\t\theight: 60px;\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t@include grid-item(8, $row-start:1, $row-end:3);\n\t\t\t\t\t@include grid-item-align('right', $vertical:'full');\n\t\t\t\t\torder: 2;\n\n\t\t\t\t\twidth: 50%;\n\t\t\t\t\theight: auto;\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t@include grid-item-align(left, top);\n\t\t\t\t\torder: 1;\n\t\t\t\t\tz-index: 1;\n\n\t\t\t\t\twidth: 200%;\n\t\t\t\t\theight: 55px;\n\n\t\t\t\t\tborder-color: red;\n\n\t\t\t\t\tbackground-color: red;\n\t\t\t\t\tbackground-image: url('../files/img/block-7.jpg');\n\n\t\t\t\t\ttransform: rotate(10deg);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\n\n\t\t@include breakpoint(large){\n\t\t\t> div {\n\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t@include grid-item($start:0, $span:4, $row-start:0, $row-span:1);\n\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\torder: 1;\n\n\t\t\t\t\twidth: auto;\n\t\t\t\t\theight: 10vh;\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t@include grid-item($start:4, $end:8, $row-start:0, $row-span:2);\n\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\torder: 2;\n\n\t\t\t\t\theight: auto;\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t@include grid-item($start:8, $span:4, $row-start:0, $row-span:3);\n\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\torder: 3;\n\n\t\t\t\t\theight: auto;\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t@include grid-item($start:0, $span:4, $row-start:1, $row-end:2);\n\t\t\t\t\t@include grid-item-align(right, center);\n\t\t\t\t\torder: 4;\n\n\t\t\t\t\twidth: 100px;\n\t\t\t\t\theight: 10vh;\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t@include grid-item(6);\n\t\t\t\t\t@include grid-item-align(stretch);\n\t\t\t\t\torder: 5;\n\n\t\t\t\t\twidth: auto;\n\t\t\t\t\theight: 20vh;\n\n\t\t\t\t\tborder-color: dodgerblue;\n\n\t\t\t\t\tbackground-color: dodgerblue;\n\t\t\t\t\tbackground-image: url('../files/img/block-8.jpg');\n\n\t\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n#real-world-grid-example {\n\t.examples > .scss-legacy {\n\t\t@extend %example-grid;\n\n\n\n\t\t> div {\n\t\t\t&:nth-of-type(1){\n\t\t\t\t&:before {\n\t\t\t\t\tcontent: 'Stage';\n\t\t\t\t}\n\n\t\t\t\t@include grid-item(12);\n\t\t\t\torder: 1;\n\n\t\t\t\t@include spacing-based-attribute('height', 'xxl', 3.0);\n\n\t\t\t\tmargin: gutter-value(-1.0);\n\t\t\t\tmargin-bottom: 0;\n\n\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\tmargin: gutter-value(-1.0);\n\t\t\t\t\tmargin-bottom: gutter-value(-3, $direction:vertical);\n\t\t\t\t}\n\n\t\t\t\t@include breakpoint(large){\n\t\t\t\t\tmargin: gutter-value(-1.0);\n\t\t\t\t\tmargin-bottom: gutter-value(-3, $direction:vertical);\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t&:nth-of-type(2){\n\t\t\t\t&:before {\n\t\t\t\t\tcontent: 'Navbar';\n\t\t\t\t}\n\n\t\t\t\t@include grid-item(12);\n\t\t\t\torder: 2;\n\n\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t@include grid-item(4, $row-span:2);\n\t\t\t\t\torder: 3;\n\t\t\t\t}\n\n\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t@include grid-item(3);\n\t\t\t\t}\n\t\t\t}\n\n\n\t\t\t&:nth-of-type(3){\n\t\t\t\t@include grid-item();\n\t\t\t\torder: 2;\n\n\t\t\t\t@include grid-container();\n\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\tcontent: 'Text';\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include grid-item(12);\n\n\t\t\t\t\t\theight: spacing-value('md') * 10;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\tcontent: 'Teaser';\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include grid-item(12);\n\n\t\t\t\t\t\theight: 100px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\tmargin-top: gutter-value(-1, $direction:vertical);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t@include grid-item($start:0, $span:8);\n\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\theight: spacing-value('md') * 7;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\theight: 75px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t@include grid-item(9);\n\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\theight: spacing-value('md') * 5;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\theight: auto;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t&:nth-of-type(4){\n\t\t\t\t&:before {\n\t\t\t\t\tcontent: 'Hint';\n\t\t\t\t}\n\n\t\t\t\t@include grid-item($start:1, $end:11);\n\t\t\t\torder: 4;\n\n\t\t\t\tmargin-top: gutter-value(-0.5, $direction:'vertical');\n\n\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t@include grid-item(8, $start:0);\n\t\t\t\t}\n\n\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t@include grid-item($start:3, $span:6);\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t&:nth-of-type(5){\n\t\t\t\t&:before {\n\t\t\t\t\tcontent: 'Footer';\n\t\t\t\t}\n\n\t\t\t\t@include grid-item(12);\n\t\t\t\torder: 5;\n\n\t\t\t\t@include spacing-based-attributes((\n\t\t\t\t\t'padding-top' : 'md',\n\t\t\t\t\t'padding-bottom' : 'xl'\n\t\t\t\t));\n\t\t\t\tmargin: gutter-value(-1);\n\t\t\t\tmargin-top: gutter-value(1, $direction:vertical);\n\n\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\tmargin: gutter-value(-1);\n\t\t\t\t\tmargin-top: gutter-value(2, $direction:vertical);\n\t\t\t\t}\n\n\t\t\t\t@include breakpoint(large){\n\t\t\t\t\tmargin: gutter-value(-1);\n\t\t\t\t\tmargin-top: gutter-value(2.5, $direction:vertical);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"scss-legacy.css","sources":["main.scss","../../../source/lib/normalize/index.css","defines.scss","../../../source/scss-legacy/jig/_index.scss","../../../source/scss-legacy/jig/globals.scss","../../../source/scss-legacy/jig/util.scss","../../../source/scss-legacy/jig/breakpoints.scss","../../../source/scss-legacy/jig/grid.scss","../../../source/scss-legacy/jig/content.scss","../../../source/scss-legacy/jig/spacing.scss","examples.scss"],"sourcesContent":["@import 'normalize/index';\n@import 'defines';\n@import 'jig/_index';\n@import 'examples';\n","/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}\n\n/*# sourceMappingURL=index.css.map */\n","$JIG_CONFIG: (\n\t'breakpoints' : (\n\t\t'xsmall' : 0,\n\t\t'medium' : 768px,\n\t\t'large' : 1280px,\n\t\t'xlarge' : 1600px\n\t),\n\t'print-breakpoint' : 'large',\n\t'grid' : (\n\t\t'columns' : 12,\n\t\t'gutters' : (\n\t\t\t'horizontal' : (\n\t\t\t\t'xsmall' : 10px,\n\t\t\t\t'medium' : 20px,\n\t\t\t\t'large' : 40px\n\t\t\t),\n\t\t\t'vertical' : 20px\n\t\t)\n\t),\n\t'spacing' : (\n\t\t'xxs' : (\n\t\t\t'xsmall' : 10px\n\t\t),\n\t\t'xs' : (\n\t\t\t'xsmall' : 10px,\n\t\t\t'small' : 20px\n\t\t),\n\t\t'sm' : (\n\t\t\t'xsmall' : 20px,\n\t\t\t'large' : 30px\n\t\t),\n\t\t'md' : (\n\t\t\t'xsmall' : 30px,\n\t\t\t'xlarge' : 40px\n\t\t),\n\t\t'l' : (\n\t\t\t'xsmall' : 40px,\n\t\t\t'medium' : 60px\n\t\t),\n\t\t'xl' : (\n\t\t\t'xsmall' : 40px,\n\t\t\t'medium' : 50px,\n\t\t\t'large' : 80px\n\t\t),\n\t\t'xxl' : (\n\t\t\t'xsmall': 40px,\n\t\t\t'medium': 80px,\n\t\t\t'large' : 120px\n\t\t)\n\t),\n\t'content' : (\n\t\t'padding' : (\n\t\t\t'xsmall' : 15px,\n\t\t\t'small' : 35px,\n\t\t\t'medium' : 50px,\n\t\t\t'xlarge' : 60px\n\t\t),\n\t\t'min-width' : 360px - (2 * 15px),\n\t\t'max-width' : 1200px - (2 * 60px),\n\t\t'base-font-size' : 12px\n\t)\n);\n\n$GRID_CONTAINER_BACKGROUNDCOLOR: (\n\t'xsmall' : #aaa,\n\t'medium' : #ccc,\n\t'large' : #eee\n);\n\n$GRID_CONTAINER_BACKGROUNDIMAGE: (\n\t'xsmall' : url('../files/img/background-small.jpg'),\n\t'medium' : url('../files/img/background-medium.jpg'),\n\t'large' : url('../files/img/background-large.jpg')\n);\n","@import 'globals';\n@import 'util';\n@import 'breakpoints';\n@import 'grid';\n@import 'content';\n@import 'spacing';\n","$JIG_CONFIG: null !default;\n$jig---config: null !default;\n@if (type-of($jig---config) != 'map') and (type-of($JIG_CONFIG) == 'map') {\n\t$jig---config: $JIG_CONFIG;\n}\n\n@if type-of($jig---config) != 'map' {\n\t@error 'jig:globals | jig config is undefined or not a map'\n}\n\n\n\n$jig---breakpoint-config: map-get($jig---config, 'breakpoints') !default;\n$jig---breakpoint-config: (\n\t'small' : 0,\n\t'medium' : 768px,\n\t'large' : 1280px\n) !default;\n\n\n\n$jig---grid-config: map-get($jig---config, 'grid') !default;\n$jig---grid-config: (\n\t'columns' : 12,\n\t'gutters' : (\n\t\t'horizontal' : (\n\t\t\t'small' : 20px,\n\t\t\t'medium' : 30px,\n\t\t\t'large' : 40px\n\t\t),\n\t\t'vertical' : 20px\n\t)\n) !default;\n\n\n\n$jig---spacing-config: map-get($jig---config, 'spacing') !default;\n$jig---spacing-config: (\n\t'sm' : (\n\t\t'small' : 1rem,\n\t\t'medium' : 2rem,\n\t\t'large' : 3rem\n\t),\n\t'md' : (\n\t\t'small' : 2rem,\n\t\t'medium' : 3rem,\n\t\t'large' : 5rem\n\t),\n\t'l' : (\n\t\t'small' : 3rem,\n\t\t'medium' : 5rem,\n\t\t'large' : 8rem\n\t)\n) !default;\n\n\n\n$jig---content-config: map-get($jig---config, 'content') !default;\n$jig---content-config: (\n\t'padding' : (\n\t\t'small' : 20px,\n\t\t'medium' : 40px,\n\t\t'large' : 80px\n\t),\n\t'max-width' : 1600px,\n\t'base-font-size' : 16px\n) !default;\n\n\n\n$jig---base-font-size: map-get($jig---content-config, 'base-font-size') !default;\n$jig---base-font-size: 16px !default;\n\n\n\n$jig---print-breakpoint: map-get($jig---config, 'print-breakpoint') !default;\n$jig---print-breakpoint: 'large' !default;\n","/**\n * @namespace Util\n */\n\n\n\n/**\n * @namespace Util:map-get-deep\n */\n\n/**\n * Retrieve a value deeply nested in a map, defined by a path of keys.\n *\n * @memberof Util:map-get-deep\n * @function\n * @name map-get-deep\n * @alias map-get-deep\n *\n * @param {Map} $map - the map to search in\n * @param {String|List} $keys - the keys to traverse down in the map\n * @returns {*|null} the value at the defined key path or null if not defined\n *\n * @example\n * map-get-deep($foo-map, 'level1', 'level2')\n * => value of $foo-map.level1.level2\n */\n@function map-get-deep($map, $keys...){\n\t@each $key in $keys {\n\t\t@if map-has-key($map, $key) {\n\t\t\t$map: map-get($map, $key);\n\t\t} @else {\n\t\t\t@return null;\n\t\t}\n\t}\n\n\t@return $map;\n}\n\n\n\n/**\n * @namespace Util:map-next\n */\n\n/**\n * Retrieves the value of the adjacent, next key in a map, if one exists.\n * The idea is, to retrieve the next key, based on a current one, to go one step further,\n * which is helpful for things like escalating to the next breakpoint for example.\n *\n * @memberof Util:map-next\n * @function\n * @name map-next\n * @alias map-next\n *\n * @param {Map} $map - the map to use\n * @param {String} $key - the current key, from which we want to go to the next\n * @returns {*|null} the value of the next key or null if there is none\n *\n * @example\n * map-next($foo-map, 'small')\n * => value of $foo-map.medium\n */\n@function map-next($map, $key){\n\t$keys: map-keys($map);\n\n\t$next-index: 0;\n\t@if map-has-key($map, $key) {\n\t\t$next-index: index($keys, $key) + 1;\n\t}\n\n\t@if ($next-index == 0) or ($next-index > length($map)) {\n\t\t@return null;\n\t} @else {\n\t\t@return map-get($map, nth($keys, $next-index));\n\t}\n}\n\n\n\n/**\n * @namespace Util:strip-unit\n */\n\n/**\n * Removes the unit from a value, turning it into a unit-less value.\n *\n * @memberof Util:strip-unit\n * @function\n * @name strip-unit\n * @alias strip-unit\n *\n * @param {Number} $number - the number to strip the unit from\n * @returns {Number} the unit-less number\n *\n * @example\n * strip-unit(16px)\n * => 16\n */\n@function strip-unit($number){\n\t@return $number / ($number * 0 + 1);\n}\n\n\n\n/**\n * @namespace Util:to-rem\n */\n\n/**\n * Convert one or more px values to (a) rem value(s), based on a base font size in px, percent or rem.\n * If the base is in % or rem, the base will be converted to px based on the global base font size.\n *\n * @memberof Util:to-rem\n * @function\n * @name to-rem\n * @alias to-rem\n *\n * @param {Number|List} $values - the value(s) to convert, usually px values, if a value is em, it will be treated as rem\n * @param {?Number} [$base=$jig---base-font-size-px] - the base size to convert against\n * @returns {Number|List} the converted value(s)\n *\n * @example\n * to-rem(32px)\n * => 2rem\n * to-rem((10px, 20px, 40px), 20px)\n * => [0.5rem, 1rem, 2rem]\n */\n@function to-rem($values, $base:$jig---base-font-size){\n\t@if unit($base) == '%' {\n\t\t$base: (strip-unit($base) / 100) * $jig---base-font-size;\n\t}\n\n\t@if unit($base) == 'rem' {\n\t\t$base: strip-unit($base) * $jig---base-font-size;\n\t}\n\n\t@if type-of($values) != 'list' {\n\t\t$values: [$values];\n\t}\n\n\t$rem-values: [];\n\t@each $value in $values {\n\t\t$rem-value: 0;\n\n\t\t@if unit($value) == 'em' {\n\t\t\t$rem-value: strip-unit($value);\n\t\t} @else {\n\t\t\t$rem-value: strip-unit($value) / strip-unit($base);\n\t\t}\n\n\t\t@if $rem-value != 0 {\n\t\t\t$rem-value: $rem-value * 1rem;\n\t\t}\n\n\t\t$rem-values: append($rem-values, $rem-value);\n\t}\n\n\t@if length($rem-values) == 1 {\n\t\t@return nth($rem-values, 1);\n\t} @else {\n\t\t@return $rem-values;\n\t}\n}\n\n\n\n/**\n * @namespace Util:to-em\n */\n\n/**\n * Convert one or more px values to (a) em value(s), based on a base font size in px, percent or rem.\n * If the base is in % or rem, the base will be converted to px based on the global base font size.\n *\n * @memberof Util:to-em\n * @function\n * @name to-em\n * @alias to-em\n *\n * @param {Number|List} $values - the value(s) to convert, usually px values, if a value is em, it will not be changed\n * @param {Number} $base - the base size to convert against\n * @returns {Number|List} the converted value(s)\n *\n * @example\n * to-em(32px, 16px)\n * => 2em\n * to-em((10px, 20px, 40px), 20px)\n * => [0.5em, 1em, 2em]\n */\n@function to-em($values, $base){\n\t$rem-values: to-rem($values, $base);\n\t@if type-of($rem-values) != 'list' {\n\t\t$rem-values: [$rem-values];\n\t}\n\n\t$em-values: [];\n\t@each $rem-value in $rem-values {\n\t\t$em-value: 0;\n\n\t\t@if $rem-value != 0 {\n\t\t\t$em-value: strip-unit($rem-value) * 1em;\n\t\t}\n\n\t\t$em-values: append($em-values, $em-value);\n\t}\n\n\t@if length($em-values) == 1 {\n\t\t@return nth($em-values, 1);\n\t} @else {\n\t\t@return $em-values;\n\t}\n}\n\n\n\n/**\n * @namespace Util:str-join\n */\n\n/**\n * Join/concatenate two or more strings with an optional glue string.\n *\n * @memberof Util:str-join\n * @function\n * @name str-join\n * @alias str-join\n *\n * @param {String|List} strings - the strings to join\n * @param {String} glue - the string to put between joined strings\n * @returns {String} the joined string\n *\n * @example\n * str-join(['fo', 'ar'], 'ob')\n * => 'foobar'\n */\n@function str-join($strings, $glue:''){\n\t$strings: join([], $strings);\n\n\t$res: '';\n\t@each $string in $strings {\n\t\t@if $string {\n\t\t\t$res: $res+$string+$glue;\n\t\t}\n\t}\n\n\t@if ($res != '') and ($glue != '') {\n\t\t@return str-slice($res, 1, str-length($glue) * -1);\n\t} @else {\n\t\t@return $res;\n\t}\n}\n","/**\n * @namespace Breakpoints\n */\n\n\n\n$jig---auto-breakpoint: nth(map-keys($jig---breakpoint-config), 1);\n\n\n\n/**\n * @namespace Breakpoints:get-auto-breakpoint\n */\n\n/**\n * Returns the current auto breakpoint value.\n *\n * @memberof Breakpoints:get-auto-breakpoint\n * @function\n * @name get-auto-breakpoint\n * @alias get-auto-breakpoint\n *\n * @returns {String} the name of the current named auto breakpoint\n *\n * @see set-auto-breakpoint\n * @see reset-auto-breakpoint\n *\n * @example\n * get-auto-breakpoint()\n * => 'medium'\n */\n@function get-auto-breakpoint(){\n\t@return $jig---auto-breakpoint;\n}\n\n\n\n/**\n * @namespace Breakpoints:set-auto-breakpoint\n */\n\n/**\n * Sets the auto breakpoint to a named breakpoint value.\n * Hint: in Sass we do _not_ have to do this manually, if we want to use auto breakpoint values,\n * since blocks are always evaluated _after_ the block mixin around the block, which results\n * in the block knowing the breakpoint value automatically from the mixin around it.\n *\n * @memberof Breakpoints:set-auto-breakpoint\n * @function\n * @name set-auto-breakpoint\n * @alias set-auto-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @throws error if breakpoint is unknown\n *\n * @see reset-auto-breakpoint\n\n * @example\n * \\@include set-auto-breakpoint(medium);\n * \\@include breakpoint(medium){\n * ...\n * }\n */\n@mixin set-auto-breakpoint($breakpoint){\n\t@if map-has-key($jig---breakpoint-config, $breakpoint) {\n\t\t$jig---auto-breakpoint: $breakpoint !global;\n\t} @else {\n\t\t@error 'jig:set-current-breakpoint | unknown named breakpoint \"#{$breakpoint}\"';\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:reset-auto-breakpoint\n */\n\n/**\n * Resets the auto breakpoint to the first/smallest named breakpoint defined in the jig config.\n * Hint: this is automatically called at the end of the breakpoint mixin, so usually you should be fine\n * never calling this manually\n *\n * @memberof Breakpoints:reset-auto-breakpoint\n * @function\n * @name reset-auto-breakpoint\n * @alias reset-auto-breakpoint\n *\n * @see set-auto-breakpoint\n\n * @example\n * \\@include reset-auto-breakpoint();\n */\n@mixin reset-auto-breakpoint(){\n\t$jig---auto-breakpoint: nth(map-keys($jig---breakpoint-config), 1) !global;\n}\n\n\n\n/**\n * @namespace Breakpoints:is-named-breakpoint\n */\n\n/**\n * Returns if the given breakpoint is a registered named breakpoint to be found in the jig config.\n *\n * @memberof Breakpoints:is-named-breakpoint\n * @function\n * @name is-named-breakpoint\n * @alias is-named-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @returns {Boolean} true if breakpoint is a registered named breakpoint name\n *\n * @example\n * is-named-breakpoint(medium)\n * => true\n */\n@function is-named-breakpoint($breakpoint){\n\t@return map-has-key($jig---breakpoint-config, $breakpoint);\n}\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-range\n */\n\n/**\n * Returns a string to be used in a media query, which defines the range/bounds of a breakpoint with\n * min and/or max value.\n *\n * @memberof Breakpoints:build-breakpoint-range\n * @function\n * @name build-breakpoint-range\n * @alias build-breakpoint-range\n *\n * @param {?Number} [$min=null] - the min width of the breakpoint\n * @param {?Number} [$max=null] - the max width of the breakpoint\n * @returns {String} the media query string for the breakpoint range\n *\n * @example\n * build-breakpoint-range(0, 767px)\n * => '(min-width: 0) and (max-width: 767px)'\n * build-breakpoint-range(null, 100rem)\n * => '(max-width: 100rem)'\n */\n@function build-breakpoint-range($min:null, $max:null){\n\t@return str-join(\n\t\t[\n\t\t\tif($min != null, '(min-width: #{$min})', null),\n\t\t\tif($max != null, '(max-width: #{$max})', null)\n\t\t],\n\t\t' and '\n\t);\n}\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-query\n */\n\n/**\n * Constructs a query to be used in a media query, based on a breakpoint definition.\n * Also automatically converts values to rem.\n *\n * Directions in composite definitions may be \"up\", \"down\" or \"only\".\n *\n * You may also define the special breakpoints \"landscape\" or \"portrait\" to cover device orientations.\n *\n * @memberof Breakpoints:build-breakpoint-query\n * @function\n * @name build-breakpoint-query\n * @alias build-breakpoint-query\n *\n * @param {?Number|Literal|List} [$breakpoint-definition=0] - either a simple number or a composite definition of width and direction, where the width may either be a number or a name defined in the named breakpoints\n * @returns {String} the media query string for the breakpoint definition\n * @throws error if named breakpoint is unknown\n * @throws error if an unnamed breakpoint has an \"only\" direction\n *\n * @example\n * build-breakpoint-query(200rem)\n * => '(min-width: 200rem)'\n * build-breakpoint-query(small down)\n * => '(max-width: 199rem)'\n * build-breakpoint-query(('large' 'only'))\n * => '(min-width: 200rem) and (max-width: 499rem)'\n * build-breakpoint-query(1024px only)\n * => '(min-width: 64rem) and (max-width: 64rem)'\n * build-breakpoint-query(landscape)\n * => '(orientation: landscape)'\n */\n@function build-breakpoint-query($breakpoint-definition:0){\n\t$breakpoint: if($breakpoint-definition and (length($breakpoint-definition) > 0), nth($breakpoint-definition, 1), 0);\n\t$direction: if($breakpoint-definition and (length($breakpoint-definition) > 1), nth($breakpoint-definition, 2), 'up');\n\t$breakpoint-name: null;\n\t$next-breakpoint: null;\n\t$min: null;\n\t$max: null;\n\t$query-em-conversion-base: 16px; // this is always 16px, no matter what is defined on \n\n\t@if $breakpoint == 'overwrite' {\n\t\t@return '(min-width: 0)';\n\t} @else if ($breakpoint == 'landscape') or ($breakpoint == 'portrait') {\n\t\t@return '(orientation: #{$breakpoint})';\n\t} @else if type-of($breakpoint) == 'string' {\n\t\t@if is-named-breakpoint($breakpoint) {\n\t\t\t$breakpoint-name: $breakpoint;\n\t\t\t$breakpoint: map-get($jig---breakpoint-config, $breakpoint-name);\n\t\t\t$next-breakpoint: map-next($jig---breakpoint-config, $breakpoint-name);\n\t\t} @else {\n\t\t\t@error 'jig:build-breakpoint-query | \"#{$breakpoint-definition}\" is not a defined breakpoint';\n\t\t}\n\t}\n\n\t@if ($breakpoint-name == null) and ($direction == 'only') {\n\t\t@error 'jig:build-breakpoint-query | only named media queries can have an \"only\" range';\n\t}\n\n\t// we are building media queries with em instead of rem and px\n\t// why? => https://zellwk.com/blog/media-query-units/\n\n\t@if ($direction == 'only') or ($direction == 'up') {\n\t\t$min: to-em($breakpoint, $query-em-conversion-base);\n\t}\n\n\t@if ($direction == 'only') or ($direction == 'down') {\n\t\t@if $breakpoint-name == null {\n\t\t\t$max: to-em($breakpoint, $query-em-conversion-base);\n\t\t} @else if $next-breakpoint != null {\n\t\t\t$max: to-em($next-breakpoint, $query-em-conversion-base) - to-em(1px, $query-em-conversion-base);\n\t\t}\n\t}\n\n\t@if ($min == 0) and ($max == null){\n\t\t$min: null;\n\t}\n\n\t@return build-breakpoint-range($min, $max);\n}\n\n\n\n/**\n * @namespace Breakpoints:breakpoint\n */\n\n/**\n * Renders media queries based one one or more breakpoint definitions.\n *\n * @memberof Breakpoints:breakpoint\n * @function\n * @name breakpoint\n * @alias breakpoint\n *\n * @param {Number|Literal|List|List|List>} $breakpoint-definitions - a list of breakpoint definitions according to build-breakpoint-query\n *\n * @example\n * \\@include breakpoint(small){\n * ...\n * }\n * \\@include breakpoint(small down, large up){\n * ...\n * }\n */\n@mixin breakpoint($breakpoint-definitions...){\n\t@each $breakpoint-definition in $breakpoint-definitions {\n\t\t$query: build-breakpoint-query($breakpoint-definition);\n\t\t$breakpoint: if(length($breakpoint-definition) > 0, nth($breakpoint-definition, 1), 0);\n\t\t$direction: if(length($breakpoint-definition) > 1, nth($breakpoint-definition, 2), 'up');\n\t\t$breakpoint-index: index(map-keys($jig---breakpoint-config), nth($breakpoint-definition, 1));\n\t\t$print-breakpoint-index: index(map-keys($jig---breakpoint-config), $jig---print-breakpoint);\n\n\t\t// set current breakpoint var to mixin breakpoint value to allow for auto-evaluation inside\n\t\t@if is-named-breakpoint($breakpoint){\n\t\t\t@include set-auto-breakpoint($breakpoint);\n\t\t}\n\n\t\t@if $query == '' {\n\t\t\t@content;\n\t\t} @else {\n\t\t\t@if(\n\t\t\t\t($breakpoint-index != null)\n\t\t\t\tand (\n\t\t\t\t\t($breakpoint-index <= $print-breakpoint-index)\n\t\t\t\t\tor ($direction == 'down')\n\t\t\t\t)\n\t\t\t){\n\t\t\t\t@media print, screen and #{$query} {\n\t\t\t\t\t@content;\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@media screen and #{$query} {\n\t\t\t\t\t@content;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// restore initial value after mixin has been rendered\n\t\t@include reset-auto-breakpoint();\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:breakpoint-value\n */\n\n/**\n * Search for a value, defined for a breakpoint, in a given map of values.\n * The function escalates in a mobile-first manner. So we take the value for the smallest breakpoint\n * and step up the breakpoints one by one until we reach the defined breakpoint. So, if we want the\n * according value for \"large\", but we only have a value for \"medium\", we'll get the \"medium\" value, which,\n * in mobile-first manner, escalates upwards and is the \"large\" value if nothing else is defined.\n *\n * @memberof Breakpoints:breakpoint-value\n * @function\n * @name breakpoint-value\n * @alias breakpoint-value\n *\n * @param {*|Map} $value - a map of breakpoint-keyed map of values, or a simple value\n * @param {Literal|String} $breakpoint - either \"auto\" (to use the current breakpoint) or one of the defined named breakpoints\n * @returns {*|null} the breakpoint value or null if nothing was found\n * @throws error if named breakpoint is unknown\n *\n * @example\n * breakpoint-value(\n * (\n * 'small' : 10px,\n * 'medium' : 20px\n * ),\n * large\n * )\n * => 20px\n */\n@function breakpoint-value($value, $breakpoint:'auto'){\n\t@if ($breakpoint != 'auto') and not map-has-key($jig---breakpoint-config, $breakpoint) {\n\t\t@error 'jig:breakpoint-value | given breakpoint \"#{$breakpoint}\" not defined';\n\t}\n\n\t@if type-of($value) == 'map' {\n\t\t$res: null;\n\n\t\t@if $breakpoint == 'auto' {\n\t\t\t$breakpoint: get-auto-breakpoint();\n\t\t}\n\n\t\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t\t$breakpoint-value: map-get($value, $breakpoint-name);\n\n\t\t\t@if $breakpoint-value != null {\n\t\t\t\t$res: $breakpoint-value;\n\t\t\t}\n\n\t\t\t@if $breakpoint-name == $breakpoint {\n\t\t\t\t@return $res;\n\t\t\t}\n\t\t}\n\n\t\t@return null;\n\t} @else {\n\t\t@return $value;\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:attributes-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attributes for defined breakpoints.\n *\n * Definitions will be rendered together if possible, minimizing the amount of media queries.\n * However, each call of this mixin will, most likely, render multiple media queries, so keep a close eye\n * on your media query structure to avoid unnecessarily doubled definitions and keep media queries to a minimum.\n * If in doubt, it might be a better idea to write the queries manually, perhaps rather using `map-get` or\n * `breakpoint-value` to automatically pull values from breakpoint value maps.\n *\n * @memberof Breakpoints:attributes-for-breakpoints\n * @function\n * @name attributes-for-breakpoints\n * @alias attributes-for-breakpoints\n *\n * @see attribute-for-breakpoints\n *\n * @param {Map} $attributes - keys are attribute names, while values are either plain values or maps with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @example\n * \\@include attributes-for-breakpoints(\n * (\n * 'font-size' : 12px,\n * 'line-height' : (\n * 'small' : 1,\n * 'large' : 1.25\n * ),\n * 'margin-top' : (\n * 'small' : 10px,\n * 'medium' : 20px\n * )\n * ),\n * 2.0\n * );\n */\n@mixin attributes-for-breakpoints($attributes, $factor:null){\n\t$attributes-for-breakpoints: ();\n\t@each $attribute-name, $attribute-value in $attributes {\n\t\t@if type-of($attribute-value) != 'map' {\n\t\t\t@if $factor == null {\n\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t} @else {\n\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t}\n\t\t} @else {\n\t\t\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t\t\t$breakpoint-value: map-get($attribute-value, $breakpoint-name);\n\t\t\t\t@if $breakpoint-value != null {\n\t\t\t\t\t$breakpoint-attributes: map-get($attributes-for-breakpoints, $breakpoint-name);\n\t\t\t\t\t@if $breakpoint-attributes == null {\n\t\t\t\t\t\t$breakpoint-attributes: ();\n\t\t\t\t\t}\n\n\t\t\t\t\t$breakpoint-attributes: map-merge(\n\t\t\t\t\t\t$breakpoint-attributes,\n\t\t\t\t\t\t($attribute-name : $breakpoint-value)\n\t\t\t\t\t);\n\n\t\t\t\t\t$attributes-for-breakpoints: map-merge(\n\t\t\t\t\t\t$attributes-for-breakpoints,\n\t\t\t\t\t\t($breakpoint-name : $breakpoint-attributes)\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t$breakpoint-attributes: map-get($attributes-for-breakpoints, $breakpoint-name);\n\t\t@if ($breakpoint-attributes != null) and (length(map-keys($breakpoint-attributes)) > 0) {\n\t\t\t@include breakpoint($breakpoint-name){\n\t\t\t\t@each $attribute-name, $attribute-value in $breakpoint-attributes {\n\t\t\t\t\t@if $factor == null {\n\t\t\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:attribute-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attribute for defined breakpoints.\n *\n * This is the single attribute version of `attributes-for-breakpoints`.\n * Since this version does not optimize the usage of media queries, please make sure to only use this mixin,\n * if you'll definitely only have one attribute to be defined in multiple breakpoints.\n *\n * @memberof Breakpoints:attribute-for-breakpoints\n * @function\n * @name attribute-for-breakpoints\n * @alias attribute-for-breakpoints\n *\n * @see attributes-for-breakpoints\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * \\@include attribute-for-breakpoints(\n * 'line-height',\n * (\n * 'small' : 1,\n * 'large' : 1.25\n * ),\n * 1.0\n * );\n */\n@mixin attribute-for-breakpoints($attribute, $value, $factor:null){\n\t$attributes: ();\n\t$attributes: map-merge($attributes, ('#{$attribute}' : $value));\n\t@include attributes-for-breakpoints($attributes, $factor);\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attributes\n */\n\n/**\n * Use this, if you need to overwrite attribute values previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attributes\n * @function\n * @name overwrite-breakpoint-for-attributes\n * @alias overwrite-breakpoint-for-attributes\n *\n * @param {Map} $attributes - keys are attribute names, while values are either plain values or maps with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @see overwrite-breakpoint-for-attribute\n *\n * @example\n * \\@include overwrite-breakpoint-for-attributes(\n * (\n * 'font-size' : 12px,\n * 'line-height' : 1.25\n * 'margin-top' : 20px\n * ),\n * 2.0\n * );\n */\n@mixin overwrite-breakpoint-for-attributes($attributes, $factor:null){\n\t@include breakpoint('overwrite'){\n\t\t@each $attribute-name, $attribute-value in $attributes {\n\t\t\t@if $factor == null {\n\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t} @else {\n\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attribute\n */\n\n/**\n * Use this, if you need to overwrite an attribut value previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attribute\n * @function\n * @name overwrite-breakpoint-for-attribute\n * @alias overwrite-breakpoint-for-attribute\n *\n * @see overwrite-breakpoint-for-attributes\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * \\@include overwrite-breakpoint-for-attribute(font-size, 12px, 2.0);\n */\n@mixin overwrite-breakpoint-for-attribute($attribute, $value, $factor:null){\n\t$attributes: ();\n\t$attributes: map-merge($attributes, ('#{$attribute}' : $value));\n\t@include overwrite-breakpoint-for-attributes($attributes, $factor);\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint\n */\n\n/**\n * Use this, if you need to overwrite something previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to redefine something statically in an override situation, which has\n * been defined responsively before.\n *\n * @memberof Breakpoints:overwrite-breakpoint\n * @function\n * @name overwrite-breakpoint\n * @alias overwrite-breakpoint\n *\n * @example\n * \\@include overwrite-breakpoint(){\n * font-size: 12xp;\n * margin-top: 20px;\n * }\n */\n@mixin overwrite-breakpoint(){\n\t@include breakpoint('overwrite'){\n\t\t@content;\n\t}\n}\n","/**\n * @namespace Grid\n */\n\n\n\n/**\n * @namespace Grid:grid-container\n */\n\n/**\n * Renders the basic properties of a grid container, which is the bracket element for elements, which are\n * to be placed in a grid, thereby making the container, more or less, \"the grid itself\".\n *\n * The basic characteristic of this container is the pre-definition of usable grid columns, according to our config.\n *\n * @memberof Grid:grid-container\n * @function\n * @name grid-container\n * @alias grid-container\n *\n * @see grid-item\n *\n * @example\n * \\@include grid-container();\n */\n@mixin grid-container(){\n\tdisplay: grid;\n\tgrid-auto-flow: row;\n\tgrid-template-columns: repeat(map-get($jig---grid-config, 'columns'), 1fr);\n\t@include attributes-for-breakpoints((\n\t\t'grid-column-gap' : map-get-deep($jig---grid-config, 'gutters', 'horizontal'),\n\t\t'grid-row-gap' : map-get-deep($jig---grid-config, 'gutters', 'vertical')\n\t));\n}\n\n\n\n/**\n * @namespace Grid:grid-item\n */\n\n/**\n * Renders the basic properties of a grid item, which is an item inside a grid, being placed according to\n * pre-defined columns.\n *\n * The main purpose of this mixin is, to define the space, the item takes inside the grid. To do this, there are\n * several means of definition. Either just giving it a column-based width, aligning it at the end of other,\n * already existing items, or defining a specific area it should cover, by explicitly defining a start and end column\n * or a combination of both.\n *\n * Additionally, the item may also be defined to take up more than one row, adding the native grid capabilities to\n * our concepts.\n *\n * @memberof Grid:grid-item\n * @function\n * @name grid-item\n * @alias grid-item\n *\n * @param {?Number} [$span=null] - the width of the item in columns\n * @param {?Number} [$start=null] - the horizontal start offset of the item in columns, may be combined with end or span\n * @param {?Number} [$end=null] - the horizontal end offset of the item in columns, may be combined with start or span\n * @param {?Number} [$row-span=null] - the height of the item in rows\n * @param {?Number} [$row-start=null] - the vertical start offset of the item in rows, may be combined with row-end or row-span\n * @param {?Number} [$row-end=null] - the vertical end offset of the item in rows, may be combined with row-start or row-span\n *\n * @see grid-container\n * @see grid-item-align\n *\n * @example\n * \\@include grid-item(12);\n * \\@include grid-item(6, 6);\n * \\@include grid-item(null, 2, 2);\n * \\@include grid-item(6, null, null, 2);\n * \\@include grid-item(6, null, null, null, 0, 5);\n */\n@mixin grid-item(\n\t$span:null,\n\t$start:null,\n\t$end:null,\n\t$row-span:null,\n\t$row-start:null,\n\t$row-end:null\n){\n\t@if ($span == null) and ($start == null) {\n\t\tgrid-column-end: span map-get($jig---grid-config, 'columns');\n\t} @else {\n\t\t@if $span != null {\n\t\t\tgrid-column-end: span $span;\n\t\t}\n\n\t\t@if $start != null {\n\t\t\tgrid-column-start: $start + 1;\n\t\t}\n\n\t\t@if ($end != null) and ($span == null) {\n\t\t\tgrid-column-end: $end + 1;\n\t\t}\n\t}\n\n\t@if ($row-span != null) or ($row-start != null) {\n\t\t@if $row-span != null {\n\t\t\tgrid-row-end: span $row-span;\n\t\t}\n\n\t\t@if $row-start != null {\n\t\t\tgrid-row-start: $row-start + 1;\n\t\t}\n\n\t\t@if ($row-end != null) and ($row-span == null) {\n\t\t\tgrid-row-end: $row-end + 1;\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Grid:grid-item-align\n */\n\n/**\n * Renders properties of a grid item, to define the item's alignment inside the area defined for the item using\n * the grid-item mixin. The usage of this only make sense for grid items.\n *\n * @memberof Grid:grid-item-align\n * @function\n * @name grid-item-align\n * @alias grid-item-align\n *\n * @param {String} [$horizontal=null] - \"left\"/\"start\", \"right\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n * @param {String} [$vertical=null] - \"top\"/\"start\", \"bottom\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n *\n * @see grid-item\n *\n * @example\n * \\@include grid-item-align('left');\n * \\@include grid-item-align(center, center);\n * \\@include grid-item-align(null, 'full');\n */\n@mixin grid-item-align($horizontal:null, $vertical:null){\n\t@if $horizontal == 'left' {\n\t\t$horizontal: 'start';\n\t} @else if $horizontal == 'right' {\n\t\t$horizontal: 'end';\n\t} @else if $horizontal == 'middle' {\n\t\t$horizontal: 'center';\n\t} @else if $horizontal == 'full' {\n\t\t$horizontal: 'stretch';\n\t}\n\n\t@if $vertical == 'top' {\n\t\t$vertical: 'start';\n\t} @else if $vertical == 'bottom' {\n\t\t$vertical: 'end';\n\t} @else if $vertical == 'middle' {\n\t\t$vertical: 'center';\n\t} @else if $vertical == 'full' {\n\t\t$vertical: 'stretch';\n\t}\n\n\t@if $horizontal != null {\n\t\tjustify-self: unquote($horizontal);\n\t}\n\n\t@if $vertical != null {\n\t\talign-self: unquote($vertical);\n\t}\n}\n\n\n\n/**\n * @namespace Grid:gutter-value\n */\n\n/**\n * Returns the value of the defined distance between two columns/rows for a breakpoint.\n *\n * The main usage for this is, to define a property value based on the current gutter.\n * This is why the parameter order may seem flipped, but usually, you'd use this inside a breakpoint\n * using auto-breakpoint detection, primarily rather working with the value itself. For other cases:\n * Remember, that that you can simply use named parameters.\n *\n * @memberof Grid:gutter-value\n * @function\n * @name gutter-value\n * @alias gutter-value\n *\n * @param {Number} [$factor=1.0] - factor to apply to the finally evaluated gutter value, most helpful to get half a gutter for example\n * @param {Number} [$add=0] - value to add to the finally evaluated gutter value, may also be negative to subtract\n * @param {String} [$direction='horizontal'] - either \"horizontal\" or \"vertical\", determines the gutter direction in the grid\n * @param {String} [$breakpoint='auto'] - a defined breakpoint name or \"auto\", to use the current breakpoint at the point of usage\n * @returns {Number} the determined gutter value with applied factor and/or addition\n * @throws error if no gutter value could be determined, based on given breakpoint and/or direction\n *\n * @example\n * \\@include breakpoint(medium){\n * padding-left: gutter-value(0.5);\n * }\n * margin-top: gutter-value($direction:'vertical', $breakpoint:'small');\n */\n@function gutter-value($factor:1.0, $add:0, $direction:'horizontal', $breakpoint:'auto'){\n\t$gutter: map-get-deep($jig---grid-config, 'gutters', $direction);\n\t$res: null;\n\n\t@if $gutter != null {\n\t\t@if type-of($gutter) == 'map' {\n\t\t\t$res: breakpoint-value($gutter, $breakpoint);\n\t\t} @else {\n\t\t\t$res: $gutter;\n\t\t}\n\t}\n\n\t@if $res == null {\n\t\t@error 'jig:gutter-value | could not resolve gutter, check direction and/or breakpoint';\n\t}\n\n\t@return ($res * $factor) + $add;\n}\n","/**\n * @namespace Content\n */\n\n\n\n/**\n * @namespace Content:content-holder\n */\n\n/**\n * Adds properties to the current element, which make it a \"content holder\", meaning, that it\n * adheres to the defined min/max content widths and keeps the content away from the browser edges by\n * defining margins according to the defined responsive content paddings.\n *\n * Min and max widths are only rendered if they are defined in the jig config, as are content paddings.\n *\n * A content holder can be used as the base container definition for non-breakout elements on a page,\n * which is not supposed to grow indefinitely horizontally.\n *\n * A content holder can be a grid container at the same time, these things do not exclude themselves and\n * are even a very common use case.\n *\n * @memberof Content:content-holder\n * @function\n * @name content-holder\n * @alias content-holder\n *\n * @param {Boolean} [$padded=true] - if true, config-defined responsive content padding gets applied to the element\n * @param {Boolean} [$centered=true] - if true, element gets auto-centered using auto margins\n *\n * @example\n * \\@include content-holder();\n */\n@mixin content-holder($padded:true, $centered:false){\n\t$breakpoint-names: map-keys($jig---breakpoint-config);\n\t$smallest-breakpoint: nth($breakpoint-names, 1);\n\t$largest-breakpoint: nth($breakpoint-names, -1);\n\n\t$min-width: content-width-value('min');\n\t$max-width: content-width-value('max');\n\n\t@if $min-width != null {\n\t\tmin-width: $min-width + (2 * content-padding-value($smallest-breakpoint));\n\t}\n\t@if $max-width != null {\n\t\tmax-width: $max-width + (2 * content-padding-value($largest-breakpoint));\n\t}\n\n\t@if $centered {\n\t\tmargin-right: auto;\n\t\tmargin-left: auto;\n\t}\n\n\t@if $padded {\n\t\t$content-padding: map-get($jig---content-config, 'padding');\n\n\t\t@if $content-padding != null {\n\t\t\t@include attributes-for-breakpoints((\n\t\t\t\t'padding-left' : $content-padding,\n\t\t\t\t'padding-right' : $content-padding,\n\t\t\t));\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Content:content-padding-value\n */\n\n/**\n * Returns the defined content padding for a/the current breakpoint.\n *\n * @memberof Content:content-padding-value\n * @function\n * @name content-padding-value\n * @alias content-padding-value\n *\n * @param {String} [$breakpoint='auto'] - a defined breakpoint name or \"auto\", to use the current breakpoint at the point of usage\n * @returns {Number} the determined content padding value\n * @throws error if no content padding value could be determined, based on given breakpoint\n *\n * @example\n * \\@include breakpoint(medium){\n * padding-left: content-padding-value();\n * }\n * margin-right: content-padding-value($breakpoint:'small');\n */\n@function content-padding-value($breakpoint:'auto'){\n\t$padding: map-get($jig---content-config, 'padding');\n\t$res: null;\n\n\t@if $padding != null {\n\t\t@if type-of($padding) == 'map' {\n\t\t\t$res: breakpoint-value($padding, $breakpoint);\n\t\t} @else {\n\t\t\t$res: $padding;\n\t\t}\n\t}\n\n\t@if $res == null {\n\t\t@error 'jig:content-padding-value | could not resolve content padding, check breakpoint';\n\t}\n\n\t@return $res;\n}\n\n\n\n/**\n * @namespace Content:content-width-value\n */\n\n/**\n * Returns the defined min/max content width.\n *\n * @memberof Content:content-width-value\n * @function\n * @name content-width-value\n * @alias content-width-value\n *\n * @param {String} [$min-max='max'] - either \"min\" or \"max\", defines if min or max content-width is returned\n * @param {?Number} [$default=null] - the default value to return if the width definition cannot be found\n * @returns {Number|null} the determined content width value, may be null if width is not defined (depending on default value)\n *\n * @example\n * max-width: content-width-value();\n * min-width: content-width-value('min', 0);\n */\n@function content-width-value($min-max:'max', $default:null){\n\t$width: map-get($jig---content-config, 'max-width');\n\t@if $min-max == 'min' {\n\t\t$width: map-get($jig---content-config, 'min-width');\n\t}\n\n\t@if $width == null {\n\t\t$width: $default;\n\t}\n\n\t@return $width;\n}\n\n\n\n/**\n * @namespace Content:base-font-size-value\n */\n\n/**\n * Returns the base font size, which is most likely applied to the html/body elements and acts as the base\n * for rem calculations.\n *\n * @memberof Content:base-font-size-value\n * @function\n * @name base-font-size-value\n * @alias base-font-size-value\n *\n * @returns {Number} the currently set jig base font size value\n *\n * @example\n * font-size: base-font-size-value();\n */\n@function base-font-size-value(){\n\t@return $jig---base-font-size;\n}\n","/**\n * @namespace Spacing\n */\n\n\n\n/**\n * @namespace Spacing:spacing-value\n */\n\n/**\n * Return a spacing value defined in the jig config, based on a breakpoint.\n *\n * @memberof Spacing:spacing-value\n * @function\n * @name spacing-value\n * @alias spacing-value\n *\n * @param {String} $size - on of the named sized defined in jig's spacing config (e.g. sm, l, xxl, ...)\n * @param {Literal|String} [$breakpoint='auto'] - either \"auto\" (to use the current breakpoint) or one of the defined named breakpoints\n * @returns {Number|null} the spacing value or null if nothing was found\n * @throws error if size is unknown\n *\n * @example\n * spacing-value(sm)\n * => 12px\n * spacing-value(md, large)\n * => 5rem\n */\n@function spacing-value($size, $breakpoint:'auto'){\n\t$spacing: map-get($jig---spacing-config, $size);\n\n\t@if $spacing == null {\n\t\t@error 'jig:spacing-value | unknown size \"#{$size}\"';\n\t}\n\n\t@if type-of($spacing) == 'map' {\n\t\t@return breakpoint-value($spacing, $breakpoint);\n\t} @else {\n\t\t@return $spacing;\n\t}\n}\n\n\n\n/**\n * @namespace Spacing:spacing-based-attributes\n */\n\n/**\n * Define (an) attribute(s) based on breakpoint-dependent spacing values.\n * This will render the given attributes with the corresponding spacing values for each defined breakpoint\n * in compiled media queries. Since this will result in many media queries being rendered, make sure before,\n * that there aren't many other media queries also needed to complete your definition. In that case, it might be\n * better and more performant to rather write the queries manually and get the spacing values via `[]` or\n * `spacing-value`.\n *\n * @memberof Spacing:spacing-based-attributes\n * @function\n * @name spacing-based-attributes\n * @alias spacing-based-attributes\n *\n * @param {Map} $attributes - keys are attribute names, while values are spacing sizes\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n * @throws error if size is unknown\n *\n * @see spacing-based-attribute\n *\n * @example\n * \\@include spacing-based-attributes(\n * (\n * 'padding-top' : 'sm',\n * 'padding-right' : 'md',\n * 'padding-bottom' : 'sm'\n * 'padding-left' : 'md'\n * 'margin-top' : 'l',\n * 'margin-bottom' : 'xl'\n * ),\n * 2.0\n * );\n */\n@mixin spacing-based-attributes($attributes, $factor:null){\n\t$spacing-attributes: ();\n\t@each $attribute-name, $attribute-size in $attributes {\n\t\t$size-definition: map-get($jig---spacing-config, $attribute-size);\n\n\t\t@if $size-definition == null {\n\t\t\t@error 'jig:spacing-based-attributes | unknown size \"#{$size-definition}\"';\n\t\t}\n\n\t\t$spacing-attributes: map-merge($spacing-attributes, ($attribute-name : $size-definition));\n\t}\n\n\t@include attributes-for-breakpoints($spacing-attributes, $factor);\n}\n\n\n\n/**\n * @namespace Spacing:spacing-based-attribute\n */\n\n/**\n * Define an attribute based on breakpoint-dependent spacing values.\n * Since this version does not optimize the usage of media queries, please make sure to only use this mixin,\n * if you'll definitely only have one attribute to be defined in multiple breakpoints.\n *\n * @memberof Spacing:spacing-based-attribute\n * @function\n * @name spacing-based-attribute\n * @alias spacing-based-attribute\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {String} $size - on of the named sized defined in jig's spacing config (sm, l, xxl, ...)\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n * @throws error if size is unknown\n *\n * @see spacing-based-attributes\n *\n * @example\n * \\@include spacing-based-attribute(margin-top, 'xl', 1.0);\n */\n@mixin spacing-based-attribute($attribute, $size, $factor:null){\n\t$attributes: ();\n\t$attributes: map-merge($attributes, ('#{$attribute}' : $size));\n\t@include spacing-based-attributes($attributes, $factor);\n}\n","%example-grid {\n\t@include grid-container();\n\n\tposition: relative;\n\n\tpadding: gutter-value();\n\tborder: 3px solid red;\n\n\t&:before {\n\t\tcontent: '';\n\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\n\t\tbackground-size: cover;\n\t\tbackground-position: center center;\n\t\t@include attributes-for-breakpoints((\n\t\t\t'background-color' : $GRID_CONTAINER_BACKGROUNDCOLOR,\n\t\t\t'background-image' : $GRID_CONTAINER_BACKGROUNDIMAGE\n\t\t));\n\n\t\tfilter: saturate(150%) brightness(38%);\n\t}\n\n\t@include breakpoint(medium){\n\t\tpadding: gutter-value();\n\t}\n\n\t@include breakpoint(large){\n\t\tpadding: gutter-value($breakpoint:large);\n\t}\n\n\n\n\t> div,\n\t> div > div {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\n\t\tposition: relative;\n\n\t\tborder: 3px solid dodgerblue;\n\n\t\tcolor: white;\n\t\tfont-size: base-font-size-value() * 1.5;\n\t\ttext-shadow: 1px -1px 3px black, 1px 1px 3px black, -1px 1px 3px black, -1px -1px 3px black;\n\n\t\tbackground-size: cover;\n\t\tbackground-position: center center;\n\t\tbackground-color: dodgerblue;\n\n\t\tfilter: grayscale(50%) hue-rotate(-10deg) saturate(200%);\n\n\t\t&:nth-of-type(1){\n\t\t\tbackground-image: url('../files/img/block-1.jpg');\n\t\t}\n\n\t\t&:nth-of-type(2){\n\t\t\tbackground-image: url('../files/img/block-2.jpg');\n\t\t}\n\n\t\t&:nth-of-type(3){\n\t\t\tbackground-image: url('../files/img/block-3.jpg');\n\t\t}\n\n\t\t&:nth-of-type(4){\n\t\t\tbackground-image: url('../files/img/block-4.jpg');\n\t\t}\n\n\t\t&:nth-of-type(5){\n\t\t\tbackground-image: url('../files/img/block-5.jpg');\n\t\t}\n\t}\n\n\n\n\t&:hover {\n\t\t&:before,\n\t\t> div,\n\t\t> div > div {\n\t\t\tborder-color: lightskyblue;\n\n\t\t\tbackground-image: none !important;\n\n\t\t\tfilter: none !important;\n\t\t}\n\n\t\t> div > div {\n\t\t\tfilter: invert(100%) !important;\n\t\t}\n\t}\n}\n\n\n\n#basic-grid-example {\n\t.examples > .scss-legacy {\n\t\t@include content-holder($centered:true);\n\n\n\n\t\t> .grid {\n\t\t\t@extend %example-grid;\n\n\n\n\t\t\t> div {\n\t\t\t\t&:nth-of-type(odd){\n\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\theight: 100px;\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(even){\n\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\theight: 75px;\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(medium up){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 100px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 80px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 60px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 40px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 20px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(medium down){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\tborder-color: aqua;\n\n\t\t\t\t\t\tbackground-color: aqua;\n\t\t\t\t\t\tbackground-image: url('../files/img/block-6.jpg');\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(large){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t@include grid-item();\n\n\t\t\t\t\t\theight: 25vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\t\theight: 12.5vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t@include grid-item(6);\n\t\t\t\t\t\t@include grid-item-align($vertical:bottom);\n\n\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t@include grid-item-align(center, center);\n\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\twidth: 100px;\n\t\t\t\t\t\theight: 5vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\torder: 1;\n\n\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n#advanced-grid-example {\n\t.examples > .scss-legacy {\n\t\t@include content-holder($centered:true);\n\n\n\n\t\t> .grid {\n\t\t\t@extend %example-grid;\n\n\t\t\t@include spacing-based-attribute(padding-top, 'xxl');\n\n\n\n\t\t\t> div {\n\t\t\t\t&:nth-of-type(odd){\n\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t@include grid-item-align(null, end);\n\n\t\t\t\t\theight: gutter-value(2.5, $direction:'vertical');\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(even){\n\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\theight: 75px;\n\t\t\t\t}\n\n\t\t\t\t&:first-of-type {\n\t\t\t\t\t@include grid-item($span:4, $row-span:2);\n\t\t\t\t\t@include grid-item-align($vertical:full);\n\n\t\t\t\t\theight: auto;\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(xsmall only){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\tborder-color: aqua;\n\n\t\t\t\t\t\tbackground-color: aqua;\n\t\t\t\t\t\tbackground-image: url('../files/img/block-6.jpg');\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(medium){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\torder: 5;\n\n\t\t\t\t\t\twidth: 50%;\n\t\t\t\t\t\theight: gutter-value(3.0);\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t@include grid-item($start:8, $end:12);\n\t\t\t\t\t\torder: 4;\n\n\t\t\t\t\t\theight: 80px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t@include grid-item($start:6, $span:2);\n\t\t\t\t\t\t@include grid-item-align(full, center);\n\t\t\t\t\t\torder: 3;\n\n\t\t\t\t\t\theight: 60px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t@include grid-item(8, $row-start:1, $row-end:3);\n\t\t\t\t\t\t@include grid-item-align('right', $vertical:'full');\n\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\twidth: 50%;\n\t\t\t\t\t\theight: auto;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t@include grid-item-align(left, top);\n\t\t\t\t\t\torder: 1;\n\t\t\t\t\t\tz-index: 1;\n\n\t\t\t\t\t\twidth: 200%;\n\t\t\t\t\t\theight: 55px;\n\n\t\t\t\t\t\tborder-color: red;\n\n\t\t\t\t\t\tbackground-color: red;\n\t\t\t\t\t\tbackground-image: url('../files/img/block-7.jpg');\n\n\t\t\t\t\t\ttransform: rotate(10deg);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(large){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t@include grid-item($start:0, $span:4, $row-start:0, $row-span:1);\n\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\t\torder: 1;\n\n\t\t\t\t\t\twidth: auto;\n\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t@include grid-item($start:4, $end:8, $row-start:0, $row-span:2);\n\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\theight: auto;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t@include grid-item($start:8, $span:4, $row-start:0, $row-span:3);\n\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\t\torder: 3;\n\n\t\t\t\t\t\theight: auto;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t@include grid-item($start:0, $span:4, $row-start:1, $row-end:2);\n\t\t\t\t\t\t@include grid-item-align(right, center);\n\t\t\t\t\t\torder: 4;\n\n\t\t\t\t\t\twidth: 100px;\n\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t@include grid-item(6);\n\t\t\t\t\t\t@include grid-item-align(stretch);\n\t\t\t\t\t\torder: 5;\n\n\t\t\t\t\t\twidth: auto;\n\t\t\t\t\t\theight: 20vh;\n\n\t\t\t\t\t\tborder-color: dodgerblue;\n\n\t\t\t\t\t\tbackground-color: dodgerblue;\n\t\t\t\t\t\tbackground-image: url('../files/img/block-8.jpg');\n\n\t\t\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n#real-world-grid-example {\n\t.examples > .scss-legacy {\n\t\t@include content-holder($centered:true);\n\n\n\n\t\t> .grid {\n\t\t\t@extend %example-grid;\n\n\n\n\t\t\t> div {\n\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t&:before {\n\t\t\t\t\t\tcontent: 'Stage';\n\t\t\t\t\t}\n\n\t\t\t\t\t@include grid-item(12);\n\t\t\t\t\torder: 1;\n\n\t\t\t\t\t@include spacing-based-attribute('height', 'xxl', 3.0);\n\n\t\t\t\t\tmargin: gutter-value(-1.0);\n\t\t\t\t\tmargin-bottom: 0;\n\n\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\tmargin: gutter-value(-1.0);\n\t\t\t\t\t\tmargin-bottom: gutter-value(-3, $direction:vertical);\n\t\t\t\t\t}\n\n\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\tmargin: gutter-value(-1.0);\n\t\t\t\t\t\tmargin-bottom: gutter-value(-3, $direction:vertical);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t&:before {\n\t\t\t\t\t\tcontent: 'Navbar';\n\t\t\t\t\t}\n\n\t\t\t\t\t@include grid-item(12);\n\t\t\t\t\torder: 2;\n\n\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t@include grid-item(4, $row-span:2);\n\t\t\t\t\t\torder: 3;\n\t\t\t\t\t}\n\n\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t@include grid-item(3);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t@include grid-item();\n\t\t\t\t\torder: 2;\n\n\t\t\t\t\t@include grid-container();\n\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\t\tcontent: 'Text';\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t@include grid-item(12);\n\n\t\t\t\t\t\t\theight: spacing-value('md') * 10;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\t\tcontent: 'Teaser';\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t@include grid-item(12);\n\n\t\t\t\t\t\t\theight: 100px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\tmargin-top: gutter-value(-1, $direction:vertical);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\n\n\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t@include grid-item($start:0, $span:8);\n\n\t\t\t\t\t\t> div {\n\t\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t\theight: spacing-value('md') * 7;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\t\theight: 75px;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\n\n\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t@include grid-item(9);\n\n\t\t\t\t\t\t> div {\n\t\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t\theight: spacing-value('md') * 5;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\theight: auto;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t&:before {\n\t\t\t\t\t\tcontent: 'Hint';\n\t\t\t\t\t}\n\n\t\t\t\t\t@include grid-item($start:1, $end:11);\n\t\t\t\t\torder: 4;\n\n\t\t\t\t\tmargin-top: gutter-value(-0.5, $direction:'vertical');\n\n\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t@include grid-item(8, $start:0);\n\t\t\t\t\t}\n\n\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t@include grid-item($start:3, $span:6);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t&:before {\n\t\t\t\t\t\tcontent: 'Footer';\n\t\t\t\t\t}\n\n\t\t\t\t\t@include grid-item(12);\n\t\t\t\t\torder: 5;\n\n\t\t\t\t\t@include spacing-based-attributes((\n\t\t\t\t\t\t'padding-top' : 'md',\n\t\t\t\t\t\t'padding-bottom' : 'xl'\n\t\t\t\t\t));\n\t\t\t\t\tmargin: gutter-value(-1);\n\t\t\t\t\tmargin-top: gutter-value(1, $direction:vertical);\n\n\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\tmargin: gutter-value(-1);\n\t\t\t\t\t\tmargin-top: gutter-value(2, $direction:vertical);\n\t\t\t\t\t}\n\n\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\tmargin: gutter-value(-1);\n\t\t\t\t\t\tmargin-top: gutter-value(2.5, $direction:vertical);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/docs/examples/css/scss.css b/docs/examples/css/scss.css index d88c03b..6b881ce 100644 --- a/docs/examples/css/scss.css +++ b/docs/examples/css/scss.css @@ -1,2 +1,2 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}#real-world-grid-example .examples>.scss,#advanced-grid-example .examples>.scss,#basic-grid-example .examples>.scss{display:grid;grid-auto-flow:row;grid-template-columns:repeat(12, 1fr);grid-row-gap:20px;grid-column-gap:10px;position:relative;padding:10px;border:3px solid red}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss,#advanced-grid-example .examples>.scss,#basic-grid-example .examples>.scss{grid-column-gap:20px}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss,#advanced-grid-example .examples>.scss,#basic-grid-example .examples>.scss{grid-column-gap:40px}}#real-world-grid-example .examples>.scss:before,#advanced-grid-example .examples>.scss:before,#basic-grid-example .examples>.scss:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center center;background-color:#aaa;background-image:url("../files/img/background-small.jpg");filter:saturate(150%) brightness(38%)}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss:before,#advanced-grid-example .examples>.scss:before,#basic-grid-example .examples>.scss:before{background-color:#ccc;background-image:url("../files/img/background-medium.jpg")}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss:before,#advanced-grid-example .examples>.scss:before,#basic-grid-example .examples>.scss:before{background-color:#eee;background-image:url("../files/img/background-large.jpg")}}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss,#advanced-grid-example .examples>.scss,#basic-grid-example .examples>.scss{padding:20px}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss,#advanced-grid-example .examples>.scss,#basic-grid-example .examples>.scss{padding:40px}}#real-world-grid-example .examples>.scss>div,#advanced-grid-example .examples>.scss>div,#basic-grid-example .examples>.scss>div,#real-world-grid-example .examples>.scss>div>div,#advanced-grid-example .examples>.scss>div>div,#basic-grid-example .examples>.scss>div>div{display:flex;justify-content:center;align-items:center;position:relative;border:3px solid #1e90ff;color:#fff;font-size:1.5rem;text-shadow:1px -1px 3px #000,1px 1px 3px #000,-1px 1px 3px #000,-1px -1px 3px #000;background-size:cover;background-position:center center;background-color:#1e90ff;filter:grayscale(50%) hue-rotate(-10deg) saturate(200%)}#real-world-grid-example .examples>.scss>div:nth-of-type(1),#advanced-grid-example .examples>.scss>div:nth-of-type(1),#basic-grid-example .examples>.scss>div:nth-of-type(1),#real-world-grid-example .examples>.scss>div>div:nth-of-type(1),#advanced-grid-example .examples>.scss>div>div:nth-of-type(1),#basic-grid-example .examples>.scss>div>div:nth-of-type(1){background-image:url("../files/img/block-1.jpg")}#real-world-grid-example .examples>.scss>div:nth-of-type(2),#advanced-grid-example .examples>.scss>div:nth-of-type(2),#basic-grid-example .examples>.scss>div:nth-of-type(2),#real-world-grid-example .examples>.scss>div>div:nth-of-type(2),#advanced-grid-example .examples>.scss>div>div:nth-of-type(2),#basic-grid-example .examples>.scss>div>div:nth-of-type(2){background-image:url("../files/img/block-2.jpg")}#real-world-grid-example .examples>.scss>div:nth-of-type(3),#advanced-grid-example .examples>.scss>div:nth-of-type(3),#basic-grid-example .examples>.scss>div:nth-of-type(3),#real-world-grid-example .examples>.scss>div>div:nth-of-type(3),#advanced-grid-example .examples>.scss>div>div:nth-of-type(3),#basic-grid-example .examples>.scss>div>div:nth-of-type(3){background-image:url("../files/img/block-3.jpg")}#real-world-grid-example .examples>.scss>div:nth-of-type(4),#advanced-grid-example .examples>.scss>div:nth-of-type(4),#basic-grid-example .examples>.scss>div:nth-of-type(4),#real-world-grid-example .examples>.scss>div>div:nth-of-type(4),#advanced-grid-example .examples>.scss>div>div:nth-of-type(4),#basic-grid-example .examples>.scss>div>div:nth-of-type(4){background-image:url("../files/img/block-4.jpg")}#real-world-grid-example .examples>.scss>div:nth-of-type(5),#advanced-grid-example .examples>.scss>div:nth-of-type(5),#basic-grid-example .examples>.scss>div:nth-of-type(5),#real-world-grid-example .examples>.scss>div>div:nth-of-type(5),#advanced-grid-example .examples>.scss>div>div:nth-of-type(5),#basic-grid-example .examples>.scss>div>div:nth-of-type(5){background-image:url("../files/img/block-5.jpg")}#real-world-grid-example .examples>.scss:hover:before,#advanced-grid-example .examples>.scss:hover:before,#basic-grid-example .examples>.scss:hover:before,#real-world-grid-example .examples>.scss:hover>div,#advanced-grid-example .examples>.scss:hover>div,#basic-grid-example .examples>.scss:hover>div,#real-world-grid-example .examples>.scss:hover>div>div,#advanced-grid-example .examples>.scss:hover>div>div,#basic-grid-example .examples>.scss:hover>div>div{border-color:#87cefa;background-image:none !important;filter:none !important}#real-world-grid-example .examples>.scss:hover>div>div,#advanced-grid-example .examples>.scss:hover>div>div,#basic-grid-example .examples>.scss:hover>div>div{filter:invert(100%) !important}#basic-grid-example .examples>.scss>div:nth-of-type(odd){grid-column-end:span 6;height:100px}#basic-grid-example .examples>.scss>div:nth-of-type(even){grid-column-end:span 6;height:75px}@media print,screen and (min-width: 48em){#basic-grid-example .examples>.scss>div:nth-of-type(1){grid-column-end:span 4;height:100px}#basic-grid-example .examples>.scss>div:nth-of-type(2){grid-column-end:span 4;height:80px}#basic-grid-example .examples>.scss>div:nth-of-type(3){grid-column-end:span 4;height:60px}#basic-grid-example .examples>.scss>div:nth-of-type(4){grid-column-end:span 4;height:40px}#basic-grid-example .examples>.scss>div:nth-of-type(5){grid-column-end:span 4;height:20px}}@media print,screen and (max-width: 79.9375em){#basic-grid-example .examples>.scss>div:nth-of-type(3){border-color:aqua;background-color:aqua;background-image:url("../files/img/block-6.jpg")}}@media print,screen and (min-width: 80em){#basic-grid-example .examples>.scss>div:nth-of-type(1){grid-column-end:span 12;height:25vh}#basic-grid-example .examples>.scss>div:nth-of-type(2){grid-column-end:span 6;height:12.5vh}#basic-grid-example .examples>.scss>div:nth-of-type(3){grid-column-end:span 6;align-self:end;height:10vh}#basic-grid-example .examples>.scss>div:nth-of-type(4){grid-column-end:span 4;justify-self:center;align-self:center;order:2;width:100px;height:5vh}#basic-grid-example .examples>.scss>div:nth-of-type(5){grid-column-end:span 4;order:1;height:10vh}}#advanced-grid-example .examples>.scss{padding-top:40px}@media print,screen and (min-width: 48em){#advanced-grid-example .examples>.scss{padding-top:80px}}@media print,screen and (min-width: 80em){#advanced-grid-example .examples>.scss{padding-top:120px}}#advanced-grid-example .examples>.scss>div:nth-of-type(odd){grid-column-end:span 4;align-self:end;height:50px}#advanced-grid-example .examples>.scss>div:nth-of-type(even){grid-column-end:span 4;height:75px}#advanced-grid-example .examples>.scss>div:first-of-type{grid-column-end:span 4;grid-row-end:span 2;align-self:stretch;height:auto}@media print,screen and (min-width: 0)and (max-width: 47.9375em){#advanced-grid-example .examples>.scss>div:nth-of-type(3){border-color:aqua;background-color:aqua;background-image:url("../files/img/block-6.jpg")}}@media print,screen and (min-width: 48em){#advanced-grid-example .examples>.scss>div:nth-of-type(1){grid-column-end:span 4;order:5;width:50%;height:60px}#advanced-grid-example .examples>.scss>div:nth-of-type(2){grid-column-start:9;grid-column-end:13;order:4;height:80px}#advanced-grid-example .examples>.scss>div:nth-of-type(3){grid-column-end:span 2;grid-column-start:7;justify-self:stretch;align-self:center;order:3;height:60px}#advanced-grid-example .examples>.scss>div:nth-of-type(4){grid-column-end:span 8;grid-row-start:2;grid-row-end:4;justify-self:end;align-self:stretch;order:2;width:50%;height:auto}#advanced-grid-example .examples>.scss>div:nth-of-type(5){grid-column-end:span 4;justify-self:start;align-self:start;order:1;z-index:1;width:200%;height:55px;border-color:red;background-color:red;background-image:url("../files/img/block-7.jpg");transform:rotate(10deg)}}@media print,screen and (min-width: 80em){#advanced-grid-example .examples>.scss>div:nth-of-type(1){grid-column-end:span 4;grid-column-start:1;grid-row-end:span 1;grid-row-start:1;align-self:stretch;order:1;width:auto;height:10vh}#advanced-grid-example .examples>.scss>div:nth-of-type(2){grid-column-start:5;grid-column-end:9;grid-row-end:span 2;grid-row-start:1;align-self:stretch;order:2;height:auto}#advanced-grid-example .examples>.scss>div:nth-of-type(3){grid-column-end:span 4;grid-column-start:9;grid-row-end:span 3;grid-row-start:1;align-self:stretch;order:3;height:auto}#advanced-grid-example .examples>.scss>div:nth-of-type(4){grid-column-end:span 4;grid-column-start:1;grid-row-start:2;grid-row-end:3;justify-self:end;align-self:center;order:4;width:100px;height:10vh}#advanced-grid-example .examples>.scss>div:nth-of-type(5){grid-column-end:span 6;justify-self:stretch;order:5;width:auto;height:20vh;border-color:#1e90ff;background-color:#1e90ff;background-image:url("../files/img/block-8.jpg");transform:rotate(0deg)}}#real-world-grid-example .examples>.scss>div:nth-of-type(1){grid-column-end:span 12;order:1;height:120px;margin:-10px;margin-bottom:0}#real-world-grid-example .examples>.scss>div:nth-of-type(1):before{content:"Stage"}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss>div:nth-of-type(1){height:240px}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss>div:nth-of-type(1){height:360px}}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss>div:nth-of-type(1){margin:-20px;margin-bottom:-60px}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss>div:nth-of-type(1){margin:-40px;margin-bottom:-60px}}#real-world-grid-example .examples>.scss>div:nth-of-type(2){grid-column-end:span 12;order:2}#real-world-grid-example .examples>.scss>div:nth-of-type(2):before{content:"Navbar"}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss>div:nth-of-type(2){grid-column-end:span 4;grid-row-end:span 2;order:3}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss>div:nth-of-type(2){grid-column-end:span 3}}#real-world-grid-example .examples>.scss>div:nth-of-type(3){grid-column-end:span 12;order:2;display:grid;grid-auto-flow:row;grid-template-columns:repeat(12, 1fr);grid-row-gap:20px;grid-column-gap:10px}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss>div:nth-of-type(3){grid-column-gap:20px}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss>div:nth-of-type(3){grid-column-gap:40px}}#real-world-grid-example .examples>.scss>div:nth-of-type(3)>div:nth-of-type(1){grid-column-end:span 12;height:300px}#real-world-grid-example .examples>.scss>div:nth-of-type(3)>div:nth-of-type(1):before{content:"Text"}#real-world-grid-example .examples>.scss>div:nth-of-type(3)>div:nth-of-type(2),#real-world-grid-example .examples>.scss>div:nth-of-type(3)>div:nth-of-type(3),#real-world-grid-example .examples>.scss>div:nth-of-type(3)>div:nth-of-type(4){grid-column-end:span 12;height:100px}#real-world-grid-example .examples>.scss>div:nth-of-type(3)>div:nth-of-type(2):before,#real-world-grid-example .examples>.scss>div:nth-of-type(3)>div:nth-of-type(3):before,#real-world-grid-example .examples>.scss>div:nth-of-type(3)>div:nth-of-type(4):before{content:"Teaser"}#real-world-grid-example .examples>.scss>div:nth-of-type(3)>div:nth-of-type(3),#real-world-grid-example .examples>.scss>div:nth-of-type(3)>div:nth-of-type(4){margin-top:-20px}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss>div:nth-of-type(3){grid-column-end:span 8;grid-column-start:1}#real-world-grid-example .examples>.scss>div:nth-of-type(3)>div:nth-of-type(1){height:210px}#real-world-grid-example .examples>.scss>div:nth-of-type(3)>div:nth-of-type(2),#real-world-grid-example .examples>.scss>div:nth-of-type(3)>div:nth-of-type(3),#real-world-grid-example .examples>.scss>div:nth-of-type(3)>div:nth-of-type(4){grid-column-end:span 4;height:75px}#real-world-grid-example .examples>.scss>div:nth-of-type(3)>div:nth-of-type(3),#real-world-grid-example .examples>.scss>div:nth-of-type(3)>div:nth-of-type(4){margin-top:0}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss>div:nth-of-type(3){grid-column-end:span 9}#real-world-grid-example .examples>.scss>div:nth-of-type(3)>div:nth-of-type(1){height:150px}#real-world-grid-example .examples>.scss>div:nth-of-type(3)>div:nth-of-type(2),#real-world-grid-example .examples>.scss>div:nth-of-type(3)>div:nth-of-type(3),#real-world-grid-example .examples>.scss>div:nth-of-type(3)>div:nth-of-type(4){height:auto}}#real-world-grid-example .examples>.scss>div:nth-of-type(4){grid-column-start:2;grid-column-end:12;order:4;margin-top:-10px}#real-world-grid-example .examples>.scss>div:nth-of-type(4):before{content:"Hint"}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss>div:nth-of-type(4){grid-column-end:span 8;grid-column-start:1}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss>div:nth-of-type(4){grid-column-end:span 6;grid-column-start:4}}#real-world-grid-example .examples>.scss>div:nth-of-type(5){grid-column-end:span 12;order:5;padding-top:30px;padding-bottom:40px;margin:-10px;margin-top:20px}#real-world-grid-example .examples>.scss>div:nth-of-type(5):before{content:"Footer"}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss>div:nth-of-type(5){padding-bottom:50px}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss>div:nth-of-type(5){padding-bottom:80px}}@media screen and (min-width: 100em){#real-world-grid-example .examples>.scss>div:nth-of-type(5){padding-top:40px}}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss>div:nth-of-type(5){margin:-20px;margin-top:40px}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss>div:nth-of-type(5){margin:-40px;margin-top:50px}} +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}#real-world-grid-example .examples>.scss>.grid,#advanced-grid-example .examples>.scss>.grid,#basic-grid-example .examples>.scss>.grid{display:grid;grid-auto-flow:row;grid-template-columns:repeat(12, 1fr);grid-row-gap:20px;grid-column-gap:10px;position:relative;padding:10px;border:3px solid red}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss>.grid,#advanced-grid-example .examples>.scss>.grid,#basic-grid-example .examples>.scss>.grid{grid-column-gap:20px}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss>.grid,#advanced-grid-example .examples>.scss>.grid,#basic-grid-example .examples>.scss>.grid{grid-column-gap:40px}}#real-world-grid-example .examples>.scss>.grid:before,#advanced-grid-example .examples>.scss>.grid:before,#basic-grid-example .examples>.scss>.grid:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center center;background-color:#aaa;background-image:url("../files/img/background-small.jpg");filter:saturate(150%) brightness(38%)}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss>.grid:before,#advanced-grid-example .examples>.scss>.grid:before,#basic-grid-example .examples>.scss>.grid:before{background-color:#ccc;background-image:url("../files/img/background-medium.jpg")}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss>.grid:before,#advanced-grid-example .examples>.scss>.grid:before,#basic-grid-example .examples>.scss>.grid:before{background-color:#eee;background-image:url("../files/img/background-large.jpg")}}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss>.grid,#advanced-grid-example .examples>.scss>.grid,#basic-grid-example .examples>.scss>.grid{padding:20px}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss>.grid,#advanced-grid-example .examples>.scss>.grid,#basic-grid-example .examples>.scss>.grid{padding:40px}}#real-world-grid-example .examples>.scss>.grid>div,#advanced-grid-example .examples>.scss>.grid>div,#basic-grid-example .examples>.scss>.grid>div,#real-world-grid-example .examples>.scss>.grid>div>div,#advanced-grid-example .examples>.scss>.grid>div>div,#basic-grid-example .examples>.scss>.grid>div>div{display:flex;justify-content:center;align-items:center;position:relative;border:3px solid #1e90ff;color:#fff;font-size:18px;text-shadow:1px -1px 3px #000,1px 1px 3px #000,-1px 1px 3px #000,-1px -1px 3px #000;background-size:cover;background-position:center center;background-color:#1e90ff;filter:grayscale(50%) hue-rotate(-10deg) saturate(200%)}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(1),#advanced-grid-example .examples>.scss>.grid>div:nth-of-type(1),#basic-grid-example .examples>.scss>.grid>div:nth-of-type(1),#real-world-grid-example .examples>.scss>.grid>div>div:nth-of-type(1),#advanced-grid-example .examples>.scss>.grid>div>div:nth-of-type(1),#basic-grid-example .examples>.scss>.grid>div>div:nth-of-type(1){background-image:url("../files/img/block-1.jpg")}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(2),#advanced-grid-example .examples>.scss>.grid>div:nth-of-type(2),#basic-grid-example .examples>.scss>.grid>div:nth-of-type(2),#real-world-grid-example .examples>.scss>.grid>div>div:nth-of-type(2),#advanced-grid-example .examples>.scss>.grid>div>div:nth-of-type(2),#basic-grid-example .examples>.scss>.grid>div>div:nth-of-type(2){background-image:url("../files/img/block-2.jpg")}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3),#advanced-grid-example .examples>.scss>.grid>div:nth-of-type(3),#basic-grid-example .examples>.scss>.grid>div:nth-of-type(3),#real-world-grid-example .examples>.scss>.grid>div>div:nth-of-type(3),#advanced-grid-example .examples>.scss>.grid>div>div:nth-of-type(3),#basic-grid-example .examples>.scss>.grid>div>div:nth-of-type(3){background-image:url("../files/img/block-3.jpg")}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(4),#advanced-grid-example .examples>.scss>.grid>div:nth-of-type(4),#basic-grid-example .examples>.scss>.grid>div:nth-of-type(4),#real-world-grid-example .examples>.scss>.grid>div>div:nth-of-type(4),#advanced-grid-example .examples>.scss>.grid>div>div:nth-of-type(4),#basic-grid-example .examples>.scss>.grid>div>div:nth-of-type(4){background-image:url("../files/img/block-4.jpg")}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(5),#advanced-grid-example .examples>.scss>.grid>div:nth-of-type(5),#basic-grid-example .examples>.scss>.grid>div:nth-of-type(5),#real-world-grid-example .examples>.scss>.grid>div>div:nth-of-type(5),#advanced-grid-example .examples>.scss>.grid>div>div:nth-of-type(5),#basic-grid-example .examples>.scss>.grid>div>div:nth-of-type(5){background-image:url("../files/img/block-5.jpg")}#real-world-grid-example .examples>.scss>.grid:hover:before,#advanced-grid-example .examples>.scss>.grid:hover:before,#basic-grid-example .examples>.scss>.grid:hover:before,#real-world-grid-example .examples>.scss>.grid:hover>div,#advanced-grid-example .examples>.scss>.grid:hover>div,#basic-grid-example .examples>.scss>.grid:hover>div,#real-world-grid-example .examples>.scss>.grid:hover>div>div,#advanced-grid-example .examples>.scss>.grid:hover>div>div,#basic-grid-example .examples>.scss>.grid:hover>div>div{border-color:#87cefa;background-image:none !important;filter:none !important}#real-world-grid-example .examples>.scss>.grid:hover>div>div,#advanced-grid-example .examples>.scss>.grid:hover>div>div,#basic-grid-example .examples>.scss>.grid:hover>div>div{filter:invert(100%) !important}#basic-grid-example .examples>.scss{min-width:360px;max-width:1200px;margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media print,screen and (min-width: 48em){#basic-grid-example .examples>.scss{padding-left:50px;padding-right:50px}}@media screen and (min-width: 100em){#basic-grid-example .examples>.scss{padding-left:60px;padding-right:60px}}#basic-grid-example .examples>.scss>.grid>div:nth-of-type(odd){grid-column-end:span 6;height:100px}#basic-grid-example .examples>.scss>.grid>div:nth-of-type(even){grid-column-end:span 6;height:75px}@media print,screen and (min-width: 48em){#basic-grid-example .examples>.scss>.grid>div:nth-of-type(1){grid-column-end:span 4;height:100px}#basic-grid-example .examples>.scss>.grid>div:nth-of-type(2){grid-column-end:span 4;height:80px}#basic-grid-example .examples>.scss>.grid>div:nth-of-type(3){grid-column-end:span 4;height:60px}#basic-grid-example .examples>.scss>.grid>div:nth-of-type(4){grid-column-end:span 4;height:40px}#basic-grid-example .examples>.scss>.grid>div:nth-of-type(5){grid-column-end:span 4;height:20px}}@media print,screen and (max-width: 79.9375em){#basic-grid-example .examples>.scss>.grid>div:nth-of-type(3){border-color:aqua;background-color:aqua;background-image:url("../files/img/block-6.jpg")}}@media print,screen and (min-width: 80em){#basic-grid-example .examples>.scss>.grid>div:nth-of-type(1){grid-column-end:span 12;height:25vh}#basic-grid-example .examples>.scss>.grid>div:nth-of-type(2){grid-column-end:span 6;height:12.5vh}#basic-grid-example .examples>.scss>.grid>div:nth-of-type(3){grid-column-end:span 6;align-self:end;height:10vh}#basic-grid-example .examples>.scss>.grid>div:nth-of-type(4){grid-column-end:span 4;justify-self:center;align-self:center;order:2;width:100px;height:5vh}#basic-grid-example .examples>.scss>.grid>div:nth-of-type(5){grid-column-end:span 4;order:1;height:10vh}}#advanced-grid-example .examples>.scss{min-width:360px;max-width:1200px;margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media print,screen and (min-width: 48em){#advanced-grid-example .examples>.scss{padding-left:50px;padding-right:50px}}@media screen and (min-width: 100em){#advanced-grid-example .examples>.scss{padding-left:60px;padding-right:60px}}#advanced-grid-example .examples>.scss>.grid{padding-top:40px}@media print,screen and (min-width: 48em){#advanced-grid-example .examples>.scss>.grid{padding-top:80px}}@media print,screen and (min-width: 80em){#advanced-grid-example .examples>.scss>.grid{padding-top:120px}}#advanced-grid-example .examples>.scss>.grid>div:nth-of-type(odd){grid-column-end:span 4;align-self:end;height:50px}#advanced-grid-example .examples>.scss>.grid>div:nth-of-type(even){grid-column-end:span 4;height:75px}#advanced-grid-example .examples>.scss>.grid>div:first-of-type{grid-column-end:span 4;grid-row-end:span 2;align-self:stretch;height:auto}@media print,screen and (min-width: 0)and (max-width: 47.9375em){#advanced-grid-example .examples>.scss>.grid>div:nth-of-type(3){border-color:aqua;background-color:aqua;background-image:url("../files/img/block-6.jpg")}}@media print,screen and (min-width: 48em){#advanced-grid-example .examples>.scss>.grid>div:nth-of-type(1){grid-column-end:span 4;order:5;width:50%;height:60px}#advanced-grid-example .examples>.scss>.grid>div:nth-of-type(2){grid-column-start:9;grid-column-end:13;order:4;height:80px}#advanced-grid-example .examples>.scss>.grid>div:nth-of-type(3){grid-column-end:span 2;grid-column-start:7;justify-self:stretch;align-self:center;order:3;height:60px}#advanced-grid-example .examples>.scss>.grid>div:nth-of-type(4){grid-column-end:span 8;grid-row-start:2;grid-row-end:4;justify-self:end;align-self:stretch;order:2;width:50%;height:auto}#advanced-grid-example .examples>.scss>.grid>div:nth-of-type(5){grid-column-end:span 4;justify-self:start;align-self:start;order:1;z-index:1;width:200%;height:55px;border-color:red;background-color:red;background-image:url("../files/img/block-7.jpg");transform:rotate(10deg)}}@media print,screen and (min-width: 80em){#advanced-grid-example .examples>.scss>.grid>div:nth-of-type(1){grid-column-end:span 4;grid-column-start:1;grid-row-end:span 1;grid-row-start:1;align-self:stretch;order:1;width:auto;height:10vh}#advanced-grid-example .examples>.scss>.grid>div:nth-of-type(2){grid-column-start:5;grid-column-end:9;grid-row-end:span 2;grid-row-start:1;align-self:stretch;order:2;height:auto}#advanced-grid-example .examples>.scss>.grid>div:nth-of-type(3){grid-column-end:span 4;grid-column-start:9;grid-row-end:span 3;grid-row-start:1;align-self:stretch;order:3;height:auto}#advanced-grid-example .examples>.scss>.grid>div:nth-of-type(4){grid-column-end:span 4;grid-column-start:1;grid-row-start:2;grid-row-end:3;justify-self:end;align-self:center;order:4;width:100px;height:10vh}#advanced-grid-example .examples>.scss>.grid>div:nth-of-type(5){grid-column-end:span 6;justify-self:stretch;order:5;width:auto;height:20vh;border-color:#1e90ff;background-color:#1e90ff;background-image:url("../files/img/block-8.jpg");transform:rotate(0deg)}}#real-world-grid-example .examples>.scss{min-width:360px;max-width:1200px;margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss{padding-left:50px;padding-right:50px}}@media screen and (min-width: 100em){#real-world-grid-example .examples>.scss{padding-left:60px;padding-right:60px}}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(1){grid-column-end:span 12;order:1;height:120px;margin:-10px;margin-bottom:0}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(1):before{content:"Stage"}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(1){height:240px}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(1){height:360px}}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(1){margin:-20px;margin-bottom:-60px}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(1){margin:-40px;margin-bottom:-60px}}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(2){grid-column-end:span 12;order:2}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(2):before{content:"Navbar"}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(2){grid-column-end:span 4;grid-row-end:span 2;order:3}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(2){grid-column-end:span 3}}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3){grid-column-end:span 12;order:2;display:grid;grid-auto-flow:row;grid-template-columns:repeat(12, 1fr);grid-row-gap:20px;grid-column-gap:10px}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3){grid-column-gap:20px}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3){grid-column-gap:40px}}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3)>div:nth-of-type(1){grid-column-end:span 12;height:300px}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3)>div:nth-of-type(1):before{content:"Text"}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3)>div:nth-of-type(2),#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3)>div:nth-of-type(3),#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3)>div:nth-of-type(4){grid-column-end:span 12;height:100px}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3)>div:nth-of-type(2):before,#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3)>div:nth-of-type(3):before,#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3)>div:nth-of-type(4):before{content:"Teaser"}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3)>div:nth-of-type(3),#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3)>div:nth-of-type(4){margin-top:-20px}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3){grid-column-end:span 8;grid-column-start:1}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3)>div:nth-of-type(1){height:210px}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3)>div:nth-of-type(2),#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3)>div:nth-of-type(3),#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3)>div:nth-of-type(4){grid-column-end:span 4;height:75px}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3)>div:nth-of-type(3),#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3)>div:nth-of-type(4){margin-top:0}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3){grid-column-end:span 9}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3)>div:nth-of-type(1){height:150px}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3)>div:nth-of-type(2),#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3)>div:nth-of-type(3),#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(3)>div:nth-of-type(4){height:auto}}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(4){grid-column-start:2;grid-column-end:12;order:4;margin-top:-10px}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(4):before{content:"Hint"}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(4){grid-column-end:span 8;grid-column-start:1}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(4){grid-column-end:span 6;grid-column-start:4}}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(5){grid-column-end:span 12;order:5;padding-top:30px;padding-bottom:40px;margin:-10px;margin-top:20px}#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(5):before{content:"Footer"}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(5){padding-bottom:50px}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(5){padding-bottom:80px}}@media screen and (min-width: 100em){#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(5){padding-top:40px}}@media print,screen and (min-width: 48em){#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(5){margin:-20px;margin-top:40px}}@media print,screen and (min-width: 80em){#real-world-grid-example .examples>.scss>.grid>div:nth-of-type(5){margin:-40px;margin-top:50px}} /*# sourceMappingURL=scss.css.map */ diff --git a/docs/examples/css/scss.css.map b/docs/examples/css/scss.css.map index 9adff23..dae4c74 100644 --- a/docs/examples/css/scss.css.map +++ b/docs/examples/css/scss.css.map @@ -1 +1 @@ -{"version":3,"sources":["../../../source/lib/normalize/index.css","examples.scss","../../../source/scss/jig/grid.scss","../../../source/scss/jig/breakpoints.scss"],"names":[],"mappings":"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","file":"scss.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}\n\n/*# sourceMappingURL=index.css.map */\n","@use 'defines' as *;\n@use 'jig' as * with ($JIG_CONFIG : $JIG_CONFIG);\n\n\n\n@mixin render(){\n\t%example-grid {\n\t\t@include grid-container();\n\n\t\tposition: relative;\n\n\t\tpadding: gutter-value();\n\t\tborder: 3px solid red;\n\n\t\t&:before {\n\t\t\tcontent: '';\n\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\n\t\t\tbackground-size: cover;\n\t\t\tbackground-position: center center;\n\t\t\t@include attributes-for-breakpoints((\n\t\t\t\t'background-color' : $GRID_CONTAINER_BACKGROUNDCOLOR,\n\t\t\t\t'background-image' : $GRID_CONTAINER_BACKGROUNDIMAGE\n\t\t\t));\n\n\t\t\tfilter: saturate(150%) brightness(38%);\n\t\t}\n\n\t\t@include breakpoint(medium){\n\t\t\tpadding: gutter-value();\n\t\t}\n\n\t\t@include breakpoint(large){\n\t\t\tpadding: gutter-value($breakpoint:large);\n\t\t}\n\n\n\n\t\t> div,\n\t\t> div > div {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\n\t\t\tposition: relative;\n\n\t\t\tborder: 3px solid dodgerblue;\n\n\t\t\tcolor: white;\n\t\t\tfont-size: 1.5rem;\n\t\t\ttext-shadow: 1px -1px 3px black, 1px 1px 3px black, -1px 1px 3px black, -1px -1px 3px black;\n\n\t\t\tbackground-size: cover;\n\t\t\tbackground-position: center center;\n\t\t\tbackground-color: dodgerblue;\n\n\t\t\tfilter: grayscale(50%) hue-rotate(-10deg) saturate(200%);\n\n\t\t\t&:nth-of-type(1){\n\t\t\t\tbackground-image: url('../files/img/block-1.jpg');\n\t\t\t}\n\n\t\t\t&:nth-of-type(2){\n\t\t\t\tbackground-image: url('../files/img/block-2.jpg');\n\t\t\t}\n\n\t\t\t&:nth-of-type(3){\n\t\t\t\tbackground-image: url('../files/img/block-3.jpg');\n\t\t\t}\n\n\t\t\t&:nth-of-type(4){\n\t\t\t\tbackground-image: url('../files/img/block-4.jpg');\n\t\t\t}\n\n\t\t\t&:nth-of-type(5){\n\t\t\t\tbackground-image: url('../files/img/block-5.jpg');\n\t\t\t}\n\t\t}\n\n\n\n\t\t&:hover {\n\t\t\t&:before,\n\t\t\t> div,\n\t\t\t> div > div {\n\t\t\t\tborder-color: lightskyblue;\n\n\t\t\t\tbackground-image: none !important;\n\n\t\t\t\tfilter: none !important;\n\t\t\t}\n\n\t\t\t> div > div {\n\t\t\t\tfilter: invert(100%) !important;\n\t\t\t}\n\t\t}\n\t}\n\n\n\n\t#basic-grid-example {\n\t\t.examples > .scss {\n\t\t\t@extend %example-grid;\n\n\n\n\t\t\t> div {\n\t\t\t\t&:nth-of-type(odd){\n\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\theight: 100px;\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(even){\n\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\theight: 75px;\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(medium up){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 100px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 80px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 60px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 40px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 20px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(medium down){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\tborder-color: aqua;\n\n\t\t\t\t\t\tbackground-color: aqua;\n\t\t\t\t\t\tbackground-image: url('../files/img/block-6.jpg');\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(large){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t@include grid-item();\n\n\t\t\t\t\t\theight: 25vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\t\theight: 12.5vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t@include grid-item(6);\n\t\t\t\t\t\t@include grid-item-align($vertical:bottom);\n\n\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t@include grid-item-align(center, center);\n\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\twidth: 100px;\n\t\t\t\t\t\theight: 5vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\torder: 1;\n\n\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\n\n\t#advanced-grid-example {\n\t\t.examples > .scss {\n\t\t\t@extend %example-grid;\n\n\t\t\t@include spacing-based-attribute(padding-top, 'xxl');\n\n\n\n\t\t\t> div {\n\t\t\t\t&:nth-of-type(odd){\n\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t@include grid-item-align(null, end);\n\n\t\t\t\t\theight: gutter-value(2.5, $direction:'vertical');\n\t\t\t\t}\n\n\t\t\t\t&:nth-of-type(even){\n\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\theight: 75px;\n\t\t\t\t}\n\n\t\t\t\t&:first-of-type {\n\t\t\t\t\t@include grid-item($span:4, $row-span:2);\n\t\t\t\t\t@include grid-item-align($vertical:full);\n\n\t\t\t\t\theight: auto;\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(xsmall only){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\tborder-color: aqua;\n\n\t\t\t\t\t\tbackground-color: aqua;\n\t\t\t\t\t\tbackground-image: url('../files/img/block-6.jpg');\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(medium){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\torder: 5;\n\n\t\t\t\t\t\twidth: 50%;\n\t\t\t\t\t\theight: gutter-value(3.0);\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t@include grid-item($start:8, $end:12);\n\t\t\t\t\t\torder: 4;\n\n\t\t\t\t\t\theight: 80px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t@include grid-item($start:6, $span:2);\n\t\t\t\t\t\t@include grid-item-align(full, center);\n\t\t\t\t\t\torder: 3;\n\n\t\t\t\t\t\theight: 60px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t@include grid-item(8, $row-start:1, $row-end:3);\n\t\t\t\t\t\t@include grid-item-align('right', $vertical:'full');\n\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\twidth: 50%;\n\t\t\t\t\t\theight: auto;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t@include grid-item-align(left, top);\n\t\t\t\t\t\torder: 1;\n\t\t\t\t\t\tz-index: 1;\n\n\t\t\t\t\t\twidth: 200%;\n\t\t\t\t\t\theight: 55px;\n\n\t\t\t\t\t\tborder-color: red;\n\n\t\t\t\t\t\tbackground-color: red;\n\t\t\t\t\t\tbackground-image: url('../files/img/block-7.jpg');\n\n\t\t\t\t\t\ttransform: rotate(10deg);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\n\n\t\t\t@include breakpoint(large){\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t@include grid-item($start:0, $span:4, $row-start:0, $row-span:1);\n\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\t\torder: 1;\n\n\t\t\t\t\t\twidth: auto;\n\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t@include grid-item($start:4, $end:8, $row-start:0, $row-span:2);\n\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\theight: auto;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t@include grid-item($start:8, $span:4, $row-start:0, $row-span:3);\n\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\t\torder: 3;\n\n\t\t\t\t\t\theight: auto;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t@include grid-item($start:0, $span:4, $row-start:1, $row-end:2);\n\t\t\t\t\t\t@include grid-item-align(right, center);\n\t\t\t\t\t\torder: 4;\n\n\t\t\t\t\t\twidth: 100px;\n\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t@include grid-item(6);\n\t\t\t\t\t\t@include grid-item-align(stretch);\n\t\t\t\t\t\torder: 5;\n\n\t\t\t\t\t\twidth: auto;\n\t\t\t\t\t\theight: 20vh;\n\n\t\t\t\t\t\tborder-color: dodgerblue;\n\n\t\t\t\t\t\tbackground-color: dodgerblue;\n\t\t\t\t\t\tbackground-image: url('../files/img/block-8.jpg');\n\n\t\t\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\n\n\t#real-world-grid-example {\n\t\t.examples > .scss {\n\t\t\t@extend %example-grid;\n\n\n\n\t\t\t> div {\n\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t&:before {\n\t\t\t\t\t\tcontent: 'Stage';\n\t\t\t\t\t}\n\n\t\t\t\t\t@include grid-item(12);\n\t\t\t\t\torder: 1;\n\n\t\t\t\t\t@include spacing-based-attribute('height', 'xxl', 3.0);\n\n\t\t\t\t\tmargin: gutter-value(-1.0);\n\t\t\t\t\tmargin-bottom: 0;\n\n\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\tmargin: gutter-value(-1.0);\n\t\t\t\t\t\tmargin-bottom: gutter-value(-3, $direction:vertical);\n\t\t\t\t\t}\n\n\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\tmargin: gutter-value(-1.0);\n\t\t\t\t\t\tmargin-bottom: gutter-value(-3, $direction:vertical);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t&:before {\n\t\t\t\t\t\tcontent: 'Navbar';\n\t\t\t\t\t}\n\n\t\t\t\t\t@include grid-item(12);\n\t\t\t\t\torder: 2;\n\n\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t@include grid-item(4, $row-span:2);\n\t\t\t\t\t\torder: 3;\n\t\t\t\t\t}\n\n\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t@include grid-item(3);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t@include grid-item();\n\t\t\t\t\torder: 2;\n\n\t\t\t\t\t@include grid-container();\n\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\t\tcontent: 'Text';\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t@include grid-item(12);\n\n\t\t\t\t\t\t\theight: spacing-value('md') * 10;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\t\tcontent: 'Teaser';\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t@include grid-item(12);\n\n\t\t\t\t\t\t\theight: 100px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\tmargin-top: gutter-value(-1, $direction:vertical);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\n\n\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t@include grid-item($start:0, $span:8);\n\n\t\t\t\t\t\t> div {\n\t\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t\theight: spacing-value('md') * 7;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\t\theight: 75px;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\n\n\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t@include grid-item(9);\n\n\t\t\t\t\t\t> div {\n\t\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t\theight: spacing-value('md') * 5;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\theight: auto;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t&:before {\n\t\t\t\t\t\tcontent: 'Hint';\n\t\t\t\t\t}\n\n\t\t\t\t\t@include grid-item($start:1, $end:11);\n\t\t\t\t\torder: 4;\n\n\t\t\t\t\tmargin-top: gutter-value(-0.5, $direction:'vertical');\n\n\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t@include grid-item(8, $start:0);\n\t\t\t\t\t}\n\n\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t@include grid-item($start:3, $span:6);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t&:before {\n\t\t\t\t\t\tcontent: 'Footer';\n\t\t\t\t\t}\n\n\t\t\t\t\t@include grid-item(12);\n\t\t\t\t\torder: 5;\n\n\t\t\t\t\t@include spacing-based-attributes((\n\t\t\t\t\t\t'padding-top' : 'md',\n\t\t\t\t\t\t'padding-bottom' : 'xl'\n\t\t\t\t\t));\n\t\t\t\t\tmargin: gutter-value(-1);\n\t\t\t\t\tmargin-top: gutter-value(1, $direction:vertical);\n\n\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\tmargin: gutter-value(-1);\n\t\t\t\t\t\tmargin-top: gutter-value(2, $direction:vertical);\n\t\t\t\t\t}\n\n\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\tmargin: gutter-value(-1);\n\t\t\t\t\t\tmargin-top: gutter-value(2.5, $direction:vertical);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","/**\n * @namespace Grid\n */\n\n\n\n@use 'sass:meta';\n@use 'sass:string';\n@use 'sass:map';\n\n@use 'globals' as *;\n@use 'breakpoints';\n\n\n\n/**\n * @namespace Grid:grid-container\n */\n\n/**\n * Renders the basic properties of a grid container, which is the bracket element for elements, which are\n * to be placed in a grid, thereby making the container, more or less, \"the grid itself\".\n *\n * The basic characteristic of this container is the pre-definition of usable grid columns, according to our config.\n *\n * @memberof Grid:grid-container\n * @function\n * @name grid-container\n * @alias grid-container\n *\n * @see grid-item\n *\n * @example\n * \\@include grid-container();\n */\n@mixin grid-container(){\n\tdisplay: grid;\n\tgrid-auto-flow: row;\n\tgrid-template-columns: repeat(map.get($jig---grid-config, 'columns'), 1fr);\n\t@include breakpoints.attributes-for-breakpoints((\n\t\t'grid-column-gap' : map.get($jig---grid-config, 'gutters', 'horizontal'),\n\t\t'grid-row-gap' : map.get($jig---grid-config, 'gutters', 'vertical')\n\t));\n}\n\n\n\n/**\n * @namespace Grid:grid-item\n */\n\n/**\n * Renders the basic properties of a grid item, which is an item inside a grid, being placed according to\n * pre-defined columns.\n *\n * The main purpose of this mixin is, to define the space, the item takes inside the grid. To do this, there are\n * several means of definition. Either just giving it a column-based width, aligning it at the end of other,\n * already existing items, or defining a specific area it should cover, by explicitly defining a start and end column\n * or a combination of both.\n *\n * Additionally, the item may also be defined to take up more than one row, adding the native grid capabilities to\n * our concepts.\n *\n * @memberof Grid:grid-item\n * @function\n * @name grid-item\n * @alias grid-item\n *\n * @param {?Number} [$span=null] - the width of the item in columns\n * @param {?Number} [$start=null] - the horizontal start offset of the item in columns, may be combined with end or span\n * @param {?Number} [$end=null] - the horizontal end offset of the item in columns, may be combined with start or span\n * @param {?Number} [$row-span=null] - the height of the item in rows\n * @param {?Number} [$row-start=null] - the vertical start offset of the item in rows, may be combined with row-end or row-span\n * @param {?Number} [$row-end=null] - the vertical end offset of the item in rows, may be combined with row-start or row-span\n *\n * @see grid-container\n * @see grid-item-align\n *\n * @example\n * \\@include grid-item(12);\n * \\@include grid-item(6, 6);\n * \\@include grid-item(null, 2, 2);\n * \\@include grid-item(6, null, null, 2);\n * \\@include grid-item(6, null, null, null, 0, 5);\n */\n@mixin grid-item(\n\t$span:null,\n\t$start:null,\n\t$end:null,\n\t$row-span:null,\n\t$row-start:null,\n\t$row-end:null\n){\n\t@if ($span == null) and ($start == null) {\n\t\tgrid-column-end: span map.get($jig---grid-config, 'columns');\n\t} @else {\n\t\t@if $span != null {\n\t\t\tgrid-column-end: span $span;\n\t\t}\n\n\t\t@if $start != null {\n\t\t\tgrid-column-start: $start + 1;\n\t\t}\n\n\t\t@if ($end != null) and ($span == null) {\n\t\t\tgrid-column-end: $end + 1;\n\t\t}\n\t}\n\n\t@if ($row-span != null) or ($row-start != null) {\n\t\t@if $row-span != null {\n\t\t\tgrid-row-end: span $row-span;\n\t\t}\n\n\t\t@if $row-start != null {\n\t\t\tgrid-row-start: $row-start + 1;\n\t\t}\n\n\t\t@if ($row-end != null) and ($row-span == null) {\n\t\t\tgrid-row-end: $row-end + 1;\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Grid:grid-item-align\n */\n\n/**\n * Renders properties of a grid item, to define the item's alignment inside the area defined for the item using\n * the grid-item mixin. The usage of this only make sense for grid items.\n *\n * @memberof Grid:grid-item-align\n * @function\n * @name grid-item-align\n * @alias grid-item-align\n *\n * @param {String} [$horizontal=null] - \"left\"/\"start\", \"right\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n * @param {String} [$vertical=null] - \"top\"/\"start\", \"bottom\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n *\n * @see grid-item\n *\n * @example\n * \\@include grid-item-align('left');\n * \\@include grid-item-align(center, center);\n * \\@include grid-item-align(null, 'full');\n */\n@mixin grid-item-align($horizontal:null, $vertical:null){\n\t@if $horizontal == 'left' {\n\t\t$horizontal: 'start';\n\t} @else if $horizontal == 'right' {\n\t\t$horizontal: 'end';\n\t} @else if $horizontal == 'middle' {\n\t\t$horizontal: 'center';\n\t} @else if $horizontal == 'full' {\n\t\t$horizontal: 'stretch';\n\t}\n\n\t@if $vertical == 'top' {\n\t\t$vertical: 'start';\n\t} @else if $vertical == 'bottom' {\n\t\t$vertical: 'end';\n\t} @else if $vertical == 'middle' {\n\t\t$vertical: 'center';\n\t} @else if $vertical == 'full' {\n\t\t$vertical: 'stretch';\n\t}\n\n\t@if $horizontal != null {\n\t\tjustify-self: string.unquote($horizontal);\n\t}\n\n\t@if $vertical != null {\n\t\talign-self: string.unquote($vertical);\n\t}\n}\n\n\n\n/**\n * @namespace Grid:gutter-value\n */\n\n/**\n * Returns the value of the defined distance between two columns/rows for a breakpoint.\n *\n * The main usage for this is, to define a property value based on the current gutter.\n * This is why the parameter order may seem flipped, but usually, you'd use this inside a breakpoint\n * using auto-breakpoint detection, primarily rather working with the value itself. For other cases:\n * Remember, that that you can simply use named parameters.\n *\n * @memberof Grid:gutter-value\n * @function\n * @name gutter-value\n * @alias gutter-value\n *\n * @param {Number} [$factor=1.0] - factor to apply to the finally evaluated gutter value, most helpful to get half a gutter for example\n * @param {Number} [$add=0] - value to add to the finally evaluated gutter value, may also be negative to subtract\n * @param {String} [$direction='horizontal'] - either \"horizontal\" or \"vertical\", determines the gutter direction in the grid\n * @param {String} [$breakpoint='auto'] - a defined breakpoint name or \"auto\", to use the current breakpoint at the point of usage\n * @returns {Number} the determined gutter value with applied factor and/or addition\n * @throws error if no gutter value could be determined, based on given breakpoint and/or direction\n *\n * @example\n * \\@include breakpoint(medium){\n * padding-left: gutter-value(0.5);\n * }\n * margin-top: gutter-value($direction:'vertical', $breakpoint:'small');\n */\n@function gutter-value($factor:1.0, $add:0, $direction:'horizontal', $breakpoint:'auto'){\n\t$gutter: map.get($jig---grid-config, 'gutters', $direction);\n\t$res: null;\n\n\t@if $gutter != null {\n\t\t@if meta.type-of($gutter) == 'map' {\n\t\t\t$res: breakpoints.breakpoint-value($gutter, $breakpoint);\n\t\t} @else {\n\t\t\t$res: $gutter;\n\t\t}\n\t}\n\n\t@if $res == null {\n\t\t@error 'jig:gutter-value | could not resolve gutter, check direction and/or breakpoint';\n\t}\n\n\t@return ($res * $factor) + $add;\n}\n","/**\n * @namespace Breakpoints\n */\n\n\n\n@use 'sass:meta';\n@use 'sass:list';\n@use 'sass:map';\n\n@use 'globals' as *;\n@use 'util';\n\n\n\n$jig---auto-breakpoint: list.nth(map.keys($jig---breakpoint-config), 1);\n\n\n\n/**\n * @namespace Breakpoints:get-auto-breakpoint\n */\n\n/**\n * Returns the current auto breakpoint value.\n *\n * @memberof Breakpoints:get-auto-breakpoint\n * @function\n * @name get-auto-breakpoint\n * @alias get-auto-breakpoint\n *\n * @returns {String} the name of the current named auto breakpoint\n *\n * @see set-auto-breakpoint\n * @see reset-auto-breakpoint\n *\n * @example\n * get-auto-breakpoint()\n * => 'medium'\n */\n@function get-auto-breakpoint(){\n\t@return $jig---auto-breakpoint;\n}\n\n\n\n/**\n * @namespace Breakpoints:set-auto-breakpoint\n */\n\n/**\n * Sets the auto breakpoint to a named breakpoint value.\n * Hint: in Sass we do _not_ have to do this manually, if we want to use auto breakpoint values,\n * since blocks are always evaluated _after_ the block mixin around the block, which results\n * in the block knowing the breakpoint value automatically from the mixin around it.\n *\n * @memberof Breakpoints:set-auto-breakpoint\n * @function\n * @name set-auto-breakpoint\n * @alias set-auto-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @throws error if breakpoint is unknown\n *\n * @see reset-auto-breakpoint\n\n * @example\n * \\@include set-auto-breakpoint(medium);\n * \\@include breakpoint(medium){\n * ...\n * }\n */\n@mixin set-auto-breakpoint($breakpoint){\n\t@if map.has-key($jig---breakpoint-config, $breakpoint) {\n\t\t$jig---auto-breakpoint: $breakpoint !global;\n\t} @else {\n\t\t@error 'jig:set-current-breakpoint | unknown named breakpoint \"#{$breakpoint}\"';\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:reset-auto-breakpoint\n */\n\n/**\n * Resets the auto breakpoint to the first/smallest named breakpoint defined in the jig config.\n * Hint: this is automatically called at the end of the breakpoint mixin, so usually you should be fine\n * never calling this manually\n *\n * @memberof Breakpoints:reset-auto-breakpoint\n * @function\n * @name reset-auto-breakpoint\n * @alias reset-auto-breakpoint\n *\n * @see set-auto-breakpoint\n\n * @example\n * \\@include reset-auto-breakpoint();\n */\n@mixin reset-auto-breakpoint(){\n\t$jig---auto-breakpoint: list.nth(map.keys($jig---breakpoint-config), 1) !global;\n}\n\n\n\n/**\n * @namespace Breakpoints:is-named-breakpoint\n */\n\n/**\n * Returns if the given breakpoint is a registered named breakpoint to be found in the jig config.\n *\n * @memberof Breakpoints:is-named-breakpoint\n * @function\n * @name is-named-breakpoint\n * @alias is-named-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @returns {Boolean} true if breakpoint is a registered named breakpoint name\n *\n * @example\n * is-named-breakpoint(medium)\n * => true\n */\n@function is-named-breakpoint($breakpoint){\n\t@return map.has-key($jig---breakpoint-config, $breakpoint);\n}\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-range\n */\n\n/**\n * Returns a string to be used in a media query, which defines the range/bounds of a breakpoint with\n * min and/or max value.\n *\n * @memberof Breakpoints:build-breakpoint-range\n * @function\n * @name build-breakpoint-range\n * @alias build-breakpoint-range\n *\n * @param {?Number} [$min=null] - the min width of the breakpoint\n * @param {?Number} [$max=null] - the max width of the breakpoint\n * @returns {String} the media query string for the breakpoint range\n *\n * @example\n * build-breakpoint-range(0, 767px)\n * => '(min-width: 0) and (max-width: 767px)'\n * build-breakpoint-range(null, 100rem)\n * => '(max-width: 100rem)'\n */\n@function build-breakpoint-range($min:null, $max:null){\n\t@return util.str-join(\n\t\t[\n\t\t\tif($min != null, '(min-width: #{$min})', null),\n\t\t\tif($max != null, '(max-width: #{$max})', null)\n\t\t],\n\t\t' and '\n\t);\n}\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-query\n */\n\n/**\n * Constructs a query to be used in a media query, based on a breakpoint definition.\n * Also automatically converts values to rem.\n *\n * Directions in composite definitions may be \"up\", \"down\" or \"only\".\n *\n * You may also define the special breakpoints \"landscape\" or \"portrait\" to cover device orientations.\n *\n * @memberof Breakpoints:build-breakpoint-query\n * @function\n * @name build-breakpoint-query\n * @alias build-breakpoint-query\n *\n * @param {?Number|Literal|List} [$breakpoint-definition=0] - either a simple number or a composite definition of width and direction, where the width may either be a number or a name defined in the named breakpoints\n * @returns {String} the media query string for the breakpoint definition\n * @throws error if named breakpoint is unknown\n * @throws error if an unnamed breakpoint has an \"only\" direction\n *\n * @example\n * build-breakpoint-query(200rem)\n * => '(min-width: 200rem)'\n * build-breakpoint-query(small down)\n * => '(max-width: 199rem)'\n * build-breakpoint-query(('large' 'only'))\n * => '(min-width: 200rem) and (max-width: 499rem)'\n * build-breakpoint-query(1024px only)\n * => '(min-width: 64rem) and (max-width: 64rem)'\n * build-breakpoint-query(landscape)\n * => '(orientation: landscape)'\n */\n@function build-breakpoint-query($breakpoint-definition:0){\n\t$breakpoint: if($breakpoint-definition and (list.length($breakpoint-definition) > 0), list.nth($breakpoint-definition, 1), 0);\n\t$direction: if($breakpoint-definition and (list.length($breakpoint-definition) > 1), list.nth($breakpoint-definition, 2), 'up');\n\t$breakpoint-name: null;\n\t$next-breakpoint: null;\n\t$min: null;\n\t$max: null;\n\t$query-em-conversion-base: 16px; // this is always 16px, no matter what is defined on \n\n\t@if $breakpoint == 'overwrite' {\n\t\t@return '(min-width: 0)';\n\t} @else if ($breakpoint == 'landscape') or ($breakpoint == 'portrait') {\n\t\t@return '(orientation: #{$breakpoint})';\n\t} @else if meta.type-of($breakpoint) == 'string' {\n\t\t@if is-named-breakpoint($breakpoint) {\n\t\t\t$breakpoint-name: $breakpoint;\n\t\t\t$breakpoint: map.get($jig---breakpoint-config, $breakpoint-name);\n\t\t\t$next-breakpoint: util.map-next($jig---breakpoint-config, $breakpoint-name);\n\t\t} @else {\n\t\t\t@error 'jig:build-breakpoint-query | \"#{$breakpoint-definition}\" is not a defined breakpoint';\n\t\t}\n\t}\n\n\t@if ($breakpoint-name == null) and ($direction == 'only') {\n\t\t@error 'jig:build-breakpoint-query | only named media queries can have an \"only\" range';\n\t}\n\n\t// we are building media queries with em instead of rem and px\n\t// why? => https://zellwk.com/blog/media-query-units/\n\n\t@if ($direction == 'only') or ($direction == 'up') {\n\t\t$min: util.to-em($breakpoint, $query-em-conversion-base);\n\t}\n\n\t@if ($direction == 'only') or ($direction == 'down') {\n\t\t@if $breakpoint-name == null {\n\t\t\t$max: util.to-em($breakpoint, $query-em-conversion-base);\n\t\t} @else if $next-breakpoint != null {\n\t\t\t$max: util.to-em($next-breakpoint, $query-em-conversion-base) - util.to-em(1px, $query-em-conversion-base);\n\t\t}\n\t}\n\n\t@if ($min == 0) and ($max == null){\n\t\t$min: null;\n\t}\n\n\t@return build-breakpoint-range($min, $max);\n}\n\n\n\n/**\n * @namespace Breakpoints:breakpoint\n */\n\n/**\n * Renders media queries based one one or more breakpoint definitions.\n *\n * @memberof Breakpoints:breakpoint\n * @function\n * @name breakpoint\n * @alias breakpoint\n *\n * @param {Number|Literal|List|List|List>} $breakpoint-definitions - a list of breakpoint definitions according to build-breakpoint-query\n *\n * @example\n * \\@include breakpoint(small){\n * ...\n * }\n * \\@include breakpoint(small down, large up){\n * ...\n * }\n */\n@mixin breakpoint($breakpoint-definitions...){\n\t@each $breakpoint-definition in $breakpoint-definitions {\n\t\t$query: build-breakpoint-query($breakpoint-definition);\n\t\t$breakpoint: if(list.length($breakpoint-definition) > 0, list.nth($breakpoint-definition, 1), 0);\n\t\t$direction: if(list.length($breakpoint-definition) > 1, list.nth($breakpoint-definition, 2), 'up');\n\t\t$breakpoint-index: index(map.keys($jig---breakpoint-config), list.nth($breakpoint-definition, 1));\n\t\t$print-breakpoint-index: list.index(map.keys($jig---breakpoint-config), $jig---print-breakpoint);\n\n\t\t// set current breakpoint var to mixin breakpoint value to allow for auto-evaluation inside\n\t\t@if is-named-breakpoint($breakpoint){\n\t\t\t@include set-auto-breakpoint($breakpoint);\n\t\t}\n\n\t\t@if $query == '' {\n\t\t\t@content;\n\t\t} @else {\n\t\t\t@if(\n\t\t\t\t($breakpoint-index != null)\n\t\t\t\tand (\n\t\t\t\t\t($breakpoint-index <= $print-breakpoint-index)\n\t\t\t\t\tor ($direction == 'down')\n\t\t\t\t)\n\t\t\t){\n\t\t\t\t@media print, screen and #{$query} {\n\t\t\t\t\t@content;\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@media screen and #{$query} {\n\t\t\t\t\t@content;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// restore initial value after mixin has been rendered\n\t\t@include reset-auto-breakpoint();\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:breakpoint-value\n */\n\n/**\n * Search for a value, defined for a breakpoint, in a given map of values.\n * The function escalates in a mobile-first manner. So we take the value for the smallest breakpoint\n * and step up the breakpoints one by one until we reach the defined breakpoint. So, if we want the\n * according value for \"large\", but we only have a value for \"medium\", we'll get the \"medium\" value, which,\n * in mobile-first manner, escalates upwards and is the \"large\" value if nothing else is defined.\n *\n * @memberof Breakpoints:breakpoint-value\n * @function\n * @name breakpoint-value\n * @alias breakpoint-value\n *\n * @param {*|Map} $value - a map of breakpoint-keyed map of values, or a simple value\n * @param {Literal|String} $breakpoint - either \"auto\" (to use the current breakpoint) or one of the defined named breakpoints\n * @returns {*|null} the breakpoint value or null if nothing was found\n * @throws error if named breakpoint is unknown\n *\n * @example\n * breakpoint-value(\n * (\n * 'small' : 10px,\n * 'medium' : 20px\n * ),\n * large\n * )\n * => 20px\n */\n@function breakpoint-value($value, $breakpoint:'auto'){\n\t@if ($breakpoint != 'auto') and not map.has-key($jig---breakpoint-config, $breakpoint) {\n\t\t@error 'jig:breakpoint-value | given breakpoint \"#{$breakpoint}\" not defined';\n\t}\n\n\t@if meta.type-of($value) == 'map' {\n\t\t$res: null;\n\n\t\t@if $breakpoint == 'auto' {\n\t\t\t$breakpoint: get-auto-breakpoint();\n\t\t}\n\n\t\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t\t$breakpoint-value: map.get($value, $breakpoint-name);\n\n\t\t\t@if $breakpoint-value != null {\n\t\t\t\t$res: $breakpoint-value;\n\t\t\t}\n\n\t\t\t@if $breakpoint-name == $breakpoint {\n\t\t\t\t@return $res;\n\t\t\t}\n\t\t}\n\n\t\t@return null;\n\t} @else {\n\t\t@return $value;\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:attributes-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attributes for defined breakpoints.\n *\n * Definitions will be rendered together if possible, minimizing the amount of media queries.\n * However, each call of this mixin will, most likely, render multiple media queries, so keep a close eye\n * on your media query structure to avoid unnecessarily doubled definitions and keep media queries to a minimum.\n * If in doubt, it might be a better idea to write the queries manually, perhaps rather using `map.get` or\n * `breakpoint-value` to automatically pull values from breakpoint value maps.\n *\n * @memberof Breakpoints:attributes-for-breakpoints\n * @function\n * @name attributes-for-breakpoints\n * @alias attributes-for-breakpoints\n *\n * @see attribute-for-breakpoints\n *\n * @param {Map} $attributes - keys are attribute names, while values are either plain values or maps with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @example\n * \\@include attributes-for-breakpoints(\n * (\n * 'font-size' : 12px,\n * 'line-height' : (\n * 'small' : 1,\n * 'large' : 1.25\n * ),\n * 'margin-top' : (\n * 'small' : 10px,\n * 'medium' : 20px\n * )\n * ),\n * 2.0\n * );\n */\n@mixin attributes-for-breakpoints($attributes, $factor:null){\n\t$attributes-for-breakpoints: ();\n\t@each $attribute-name, $attribute-value in $attributes {\n\t\t@if meta.type-of($attribute-value) != 'map' {\n\t\t\t@if $factor == null {\n\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t} @else {\n\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t}\n\t\t} @else {\n\t\t\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t\t\t$breakpoint-value: map.get($attribute-value, $breakpoint-name);\n\t\t\t\t@if $breakpoint-value != null {\n\t\t\t\t\t$breakpoint-attributes: map.get($attributes-for-breakpoints, $breakpoint-name);\n\t\t\t\t\t@if $breakpoint-attributes == null {\n\t\t\t\t\t\t$breakpoint-attributes: ();\n\t\t\t\t\t}\n\n\t\t\t\t\t$breakpoint-attributes: map.merge(\n\t\t\t\t\t\t$breakpoint-attributes,\n\t\t\t\t\t\t($attribute-name : $breakpoint-value)\n\t\t\t\t\t);\n\n\t\t\t\t\t$attributes-for-breakpoints: map.merge(\n\t\t\t\t\t\t$attributes-for-breakpoints,\n\t\t\t\t\t\t($breakpoint-name : $breakpoint-attributes)\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t$breakpoint-attributes: map.get($attributes-for-breakpoints, $breakpoint-name);\n\t\t@if ($breakpoint-attributes != null) and (list.length(map.keys($breakpoint-attributes)) > 0) {\n\t\t\t@include breakpoint($breakpoint-name){\n\t\t\t\t@each $attribute-name, $attribute-value in $breakpoint-attributes {\n\t\t\t\t\t@if $factor == null {\n\t\t\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:attribute-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attribute for defined breakpoints.\n *\n * This is the single attribute version of `attributes-for-breakpoints`.\n * Since this version does not optimize the usage of media queries, please make sure to only use this mixin,\n * if you'll definitely only have one attribute to be defined in multiple breakpoints.\n *\n * @memberof Breakpoints:attribute-for-breakpoints\n * @function\n * @name attribute-for-breakpoints\n * @alias attribute-for-breakpoints\n *\n * @see attributes-for-breakpoints\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * \\@include attribute-for-breakpoints(\n * 'line-height',\n * (\n * 'small' : 1,\n * 'large' : 1.25\n * ),\n * 1.0\n * );\n */\n@mixin attribute-for-breakpoints($attribute, $value, $factor:null){\n\t$attributes: ();\n\t$attributes: map.merge($attributes, ('#{$attribute}' : $value));\n\t@include attributes-for-breakpoints($attributes, $factor);\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attributes\n */\n\n/**\n * Use this, if you need to overwrite attribute values previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attributes\n * @function\n * @name overwrite-breakpoint-for-attributes\n * @alias overwrite-breakpoint-for-attributes\n *\n * @param {Map} $attributes - keys are attribute names, while values are either plain values or maps with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @see overwrite-breakpoint-for-attribute\n *\n * @example\n * \\@include overwrite-breakpoint-for-attributes(\n * (\n * 'font-size' : 12px,\n * 'line-height' : 1.25\n * 'margin-top' : 20px\n * ),\n * 2.0\n * );\n */\n@mixin overwrite-breakpoint-for-attributes($attributes, $factor:null){\n\t@include breakpoint('overwrite'){\n\t\t@each $attribute-name, $attribute-value in $attributes {\n\t\t\t@if $factor == null {\n\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t} @else {\n\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attribute\n */\n\n/**\n * Use this, if you need to overwrite an attribut value previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attribute\n * @function\n * @name overwrite-breakpoint-for-attribute\n * @alias overwrite-breakpoint-for-attribute\n *\n * @see overwrite-breakpoint-for-attributes\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * \\@include overwrite-breakpoint-for-attribute(font-size, 12px, 2.0);\n */\n@mixin overwrite-breakpoint-for-attribute($attribute, $value, $factor:null){\n\t$attributes: ();\n\t$attributes: map.merge($attributes, ('#{$attribute}' : $value));\n\t@include overwrite-breakpoint-for-attributes($attributes, $factor);\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint\n */\n\n/**\n * Use this, if you need to overwrite something previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to redefine something statically in an override situation, which has\n * been defined responsively before.\n *\n * @memberof Breakpoints:overwrite-breakpoint\n * @function\n * @name overwrite-breakpoint\n * @alias overwrite-breakpoint\n *\n * @example\n * \\@include overwrite-breakpoint(){\n * font-size: 12xp;\n * margin-top: 20px;\n * }\n */\n@mixin overwrite-breakpoint(){\n\t@include breakpoint('overwrite'){\n\t\t@content;\n\t}\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../../../source/lib/normalize/index.css","examples.scss","../../../source/scss/jig/grid.scss","../../../source/scss/jig/breakpoints.scss","../../../source/scss/jig/content.scss"],"names":[],"mappings":"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","file":"scss.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}\n\n/*# sourceMappingURL=index.css.map */\n","@use 'defines' as *;\n@use 'jig' as * with ($JIG_CONFIG : $JIG_CONFIG);\n\n\n\n@mixin render(){\n\t%example-grid {\n\t\t@include grid-container();\n\n\t\tposition: relative;\n\n\t\tpadding: gutter-value();\n\t\tborder: 3px solid red;\n\n\t\t&:before {\n\t\t\tcontent: '';\n\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\n\t\t\tbackground-size: cover;\n\t\t\tbackground-position: center center;\n\t\t\t@include attributes-for-breakpoints((\n\t\t\t\t'background-color' : $GRID_CONTAINER_BACKGROUNDCOLOR,\n\t\t\t\t'background-image' : $GRID_CONTAINER_BACKGROUNDIMAGE\n\t\t\t));\n\n\t\t\tfilter: saturate(150%) brightness(38%);\n\t\t}\n\n\t\t@include breakpoint(medium){\n\t\t\tpadding: gutter-value();\n\t\t}\n\n\t\t@include breakpoint(large){\n\t\t\tpadding: gutter-value($breakpoint:large);\n\t\t}\n\n\n\n\t\t> div,\n\t\t> div > div {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\n\t\t\tposition: relative;\n\n\t\t\tborder: 3px solid dodgerblue;\n\n\t\t\tcolor: white;\n\t\t\tfont-size: base-font-size-value() * 1.5;\n\t\t\ttext-shadow: 1px -1px 3px black, 1px 1px 3px black, -1px 1px 3px black, -1px -1px 3px black;\n\n\t\t\tbackground-size: cover;\n\t\t\tbackground-position: center center;\n\t\t\tbackground-color: dodgerblue;\n\n\t\t\tfilter: grayscale(50%) hue-rotate(-10deg) saturate(200%);\n\n\t\t\t&:nth-of-type(1){\n\t\t\t\tbackground-image: url('../files/img/block-1.jpg');\n\t\t\t}\n\n\t\t\t&:nth-of-type(2){\n\t\t\t\tbackground-image: url('../files/img/block-2.jpg');\n\t\t\t}\n\n\t\t\t&:nth-of-type(3){\n\t\t\t\tbackground-image: url('../files/img/block-3.jpg');\n\t\t\t}\n\n\t\t\t&:nth-of-type(4){\n\t\t\t\tbackground-image: url('../files/img/block-4.jpg');\n\t\t\t}\n\n\t\t\t&:nth-of-type(5){\n\t\t\t\tbackground-image: url('../files/img/block-5.jpg');\n\t\t\t}\n\t\t}\n\n\n\n\t\t&:hover {\n\t\t\t&:before,\n\t\t\t> div,\n\t\t\t> div > div {\n\t\t\t\tborder-color: lightskyblue;\n\n\t\t\t\tbackground-image: none !important;\n\n\t\t\t\tfilter: none !important;\n\t\t\t}\n\n\t\t\t> div > div {\n\t\t\t\tfilter: invert(100%) !important;\n\t\t\t}\n\t\t}\n\t}\n\n\n\n\t#basic-grid-example {\n\t\t.examples > .scss {\n\t\t\t@include content-holder($centered:true);\n\n\n\n\t\t\t> .grid {\n\t\t\t\t@extend %example-grid;\n\n\n\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(odd){\n\t\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\t\theight: 100px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(even){\n\t\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\t\theight: 75px;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t@include breakpoint(medium up){\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\theight: 100px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\theight: 80px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\theight: 60px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\theight: 40px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\theight: 20px;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t@include breakpoint(medium down){\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t\tborder-color: aqua;\n\n\t\t\t\t\t\t\tbackground-color: aqua;\n\t\t\t\t\t\t\tbackground-image: url('../files/img/block-6.jpg');\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t@include grid-item();\n\n\t\t\t\t\t\t\theight: 25vh;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t\t@include grid-item(6);\n\n\t\t\t\t\t\t\theight: 12.5vh;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t\t@include grid-item(6);\n\t\t\t\t\t\t\t@include grid-item-align($vertical:bottom);\n\n\t\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t\t@include grid-item-align(center, center);\n\t\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\t\twidth: 100px;\n\t\t\t\t\t\t\theight: 5vh;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t\torder: 1;\n\n\t\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\n\n\t#advanced-grid-example {\n\t\t.examples > .scss {\n\t\t\t@include content-holder($centered:true);\n\n\n\n\t\t\t> .grid {\n\t\t\t\t@extend %example-grid;\n\n\t\t\t\t@include spacing-based-attribute(padding-top, 'xxl');\n\n\n\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(odd){\n\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t@include grid-item-align(null, end);\n\n\t\t\t\t\t\theight: gutter-value(2.5, $direction:'vertical');\n\t\t\t\t\t}\n\n\t\t\t\t\t&:nth-of-type(even){\n\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\theight: 75px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:first-of-type {\n\t\t\t\t\t\t@include grid-item($span:4, $row-span:2);\n\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\n\t\t\t\t\t\theight: auto;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t@include breakpoint(xsmall only){\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t\tborder-color: aqua;\n\n\t\t\t\t\t\t\tbackground-color: aqua;\n\t\t\t\t\t\t\tbackground-image: url('../files/img/block-6.jpg');\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t\torder: 5;\n\n\t\t\t\t\t\t\twidth: 50%;\n\t\t\t\t\t\t\theight: gutter-value(3.0);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t\t@include grid-item($start:8, $end:12);\n\t\t\t\t\t\t\torder: 4;\n\n\t\t\t\t\t\t\theight: 80px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t\t@include grid-item($start:6, $span:2);\n\t\t\t\t\t\t\t@include grid-item-align(full, center);\n\t\t\t\t\t\t\torder: 3;\n\n\t\t\t\t\t\t\theight: 60px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t@include grid-item(8, $row-start:1, $row-end:3);\n\t\t\t\t\t\t\t@include grid-item-align('right', $vertical:'full');\n\t\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\t\twidth: 50%;\n\t\t\t\t\t\t\theight: auto;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t\t@include grid-item(4);\n\t\t\t\t\t\t\t@include grid-item-align(left, top);\n\t\t\t\t\t\t\torder: 1;\n\t\t\t\t\t\t\tz-index: 1;\n\n\t\t\t\t\t\t\twidth: 200%;\n\t\t\t\t\t\t\theight: 55px;\n\n\t\t\t\t\t\t\tborder-color: red;\n\n\t\t\t\t\t\t\tbackground-color: red;\n\t\t\t\t\t\t\tbackground-image: url('../files/img/block-7.jpg');\n\n\t\t\t\t\t\t\ttransform: rotate(10deg);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\n\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t> div {\n\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t@include grid-item($start:0, $span:4, $row-start:0, $row-span:1);\n\t\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\t\t\torder: 1;\n\n\t\t\t\t\t\t\twidth: auto;\n\t\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t\t@include grid-item($start:4, $end:8, $row-start:0, $row-span:2);\n\t\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\t\theight: auto;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t\t@include grid-item($start:8, $span:4, $row-start:0, $row-span:3);\n\t\t\t\t\t\t\t@include grid-item-align($vertical:full);\n\t\t\t\t\t\t\torder: 3;\n\n\t\t\t\t\t\t\theight: auto;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t@include grid-item($start:0, $span:4, $row-start:1, $row-end:2);\n\t\t\t\t\t\t\t@include grid-item-align(right, center);\n\t\t\t\t\t\t\torder: 4;\n\n\t\t\t\t\t\t\twidth: 100px;\n\t\t\t\t\t\t\theight: 10vh;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t\t@include grid-item(6);\n\t\t\t\t\t\t\t@include grid-item-align(stretch);\n\t\t\t\t\t\t\torder: 5;\n\n\t\t\t\t\t\t\twidth: auto;\n\t\t\t\t\t\t\theight: 20vh;\n\n\t\t\t\t\t\t\tborder-color: dodgerblue;\n\n\t\t\t\t\t\t\tbackground-color: dodgerblue;\n\t\t\t\t\t\t\tbackground-image: url('../files/img/block-8.jpg');\n\n\t\t\t\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\n\n\t#real-world-grid-example {\n\t\t.examples > .scss {\n\t\t\t@include content-holder($centered:true);\n\n\n\n\t\t\t> .grid {\n\t\t\t\t@extend %example-grid;\n\n\n\n\t\t\t\t> div {\n\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\tcontent: 'Stage';\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include grid-item(12);\n\t\t\t\t\t\torder: 1;\n\n\t\t\t\t\t\t@include spacing-based-attribute('height', 'xxl', 3.0);\n\n\t\t\t\t\t\tmargin: gutter-value(-1.0);\n\t\t\t\t\t\tmargin-bottom: 0;\n\n\t\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t\tmargin: gutter-value(-1.0);\n\t\t\t\t\t\t\tmargin-bottom: gutter-value(-3, $direction:vertical);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t\tmargin: gutter-value(-1.0);\n\t\t\t\t\t\t\tmargin-bottom: gutter-value(-3, $direction:vertical);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\n\n\t\t\t\t\t&:nth-of-type(2){\n\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\tcontent: 'Navbar';\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include grid-item(12);\n\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t\t@include grid-item(4, $row-span:2);\n\t\t\t\t\t\t\torder: 3;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t\t@include grid-item(3);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\n\n\t\t\t\t\t&:nth-of-type(3){\n\t\t\t\t\t\t@include grid-item();\n\t\t\t\t\t\torder: 2;\n\n\t\t\t\t\t\t@include grid-container();\n\n\t\t\t\t\t\t> div {\n\t\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\t\t\tcontent: 'Text';\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@include grid-item(12);\n\n\t\t\t\t\t\t\t\theight: spacing-value('md') * 10;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\t\t\tcontent: 'Teaser';\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@include grid-item(12);\n\n\t\t\t\t\t\t\t\theight: 100px;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\tmargin-top: gutter-value(-1, $direction:vertical);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\n\n\t\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t\t@include grid-item($start:0, $span:8);\n\n\t\t\t\t\t\t\t> div {\n\t\t\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t\t\theight: spacing-value('md') * 7;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\t\t@include grid-item(4);\n\n\t\t\t\t\t\t\t\t\theight: 75px;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\n\n\t\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t\t@include grid-item(9);\n\n\t\t\t\t\t\t\t> div {\n\t\t\t\t\t\t\t\t&:nth-of-type(1){\n\t\t\t\t\t\t\t\t\theight: spacing-value('md') * 5;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t&:nth-of-type(2),\n\t\t\t\t\t\t\t\t&:nth-of-type(3),\n\t\t\t\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t\t\t\theight: auto;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\n\n\t\t\t\t\t&:nth-of-type(4){\n\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\tcontent: 'Hint';\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include grid-item($start:1, $end:11);\n\t\t\t\t\t\torder: 4;\n\n\t\t\t\t\t\tmargin-top: gutter-value(-0.5, $direction:'vertical');\n\n\t\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t\t@include grid-item(8, $start:0);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t\t@include grid-item($start:3, $span:6);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\n\n\t\t\t\t\t&:nth-of-type(5){\n\t\t\t\t\t\t&:before {\n\t\t\t\t\t\t\tcontent: 'Footer';\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include grid-item(12);\n\t\t\t\t\t\torder: 5;\n\n\t\t\t\t\t\t@include spacing-based-attributes((\n\t\t\t\t\t\t\t'padding-top' : 'md',\n\t\t\t\t\t\t\t'padding-bottom' : 'xl'\n\t\t\t\t\t\t));\n\t\t\t\t\t\tmargin: gutter-value(-1);\n\t\t\t\t\t\tmargin-top: gutter-value(1, $direction:vertical);\n\n\t\t\t\t\t\t@include breakpoint(medium){\n\t\t\t\t\t\t\tmargin: gutter-value(-1);\n\t\t\t\t\t\t\tmargin-top: gutter-value(2, $direction:vertical);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@include breakpoint(large){\n\t\t\t\t\t\t\tmargin: gutter-value(-1);\n\t\t\t\t\t\t\tmargin-top: gutter-value(2.5, $direction:vertical);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","/**\n * @namespace Grid\n */\n\n\n\n@use 'sass:meta';\n@use 'sass:string';\n@use 'sass:map';\n\n@use 'globals' as *;\n@use 'breakpoints';\n\n\n\n/**\n * @namespace Grid:grid-container\n */\n\n/**\n * Renders the basic properties of a grid container, which is the bracket element for elements, which are\n * to be placed in a grid, thereby making the container, more or less, \"the grid itself\".\n *\n * The basic characteristic of this container is the pre-definition of usable grid columns, according to our config.\n *\n * @memberof Grid:grid-container\n * @function\n * @name grid-container\n * @alias grid-container\n *\n * @see grid-item\n *\n * @example\n * \\@include grid-container();\n */\n@mixin grid-container(){\n\tdisplay: grid;\n\tgrid-auto-flow: row;\n\tgrid-template-columns: repeat(map.get($jig---grid-config, 'columns'), 1fr);\n\t@include breakpoints.attributes-for-breakpoints((\n\t\t'grid-column-gap' : map.get($jig---grid-config, 'gutters', 'horizontal'),\n\t\t'grid-row-gap' : map.get($jig---grid-config, 'gutters', 'vertical')\n\t));\n}\n\n\n\n/**\n * @namespace Grid:grid-item\n */\n\n/**\n * Renders the basic properties of a grid item, which is an item inside a grid, being placed according to\n * pre-defined columns.\n *\n * The main purpose of this mixin is, to define the space, the item takes inside the grid. To do this, there are\n * several means of definition. Either just giving it a column-based width, aligning it at the end of other,\n * already existing items, or defining a specific area it should cover, by explicitly defining a start and end column\n * or a combination of both.\n *\n * Additionally, the item may also be defined to take up more than one row, adding the native grid capabilities to\n * our concepts.\n *\n * @memberof Grid:grid-item\n * @function\n * @name grid-item\n * @alias grid-item\n *\n * @param {?Number} [$span=null] - the width of the item in columns\n * @param {?Number} [$start=null] - the horizontal start offset of the item in columns, may be combined with end or span\n * @param {?Number} [$end=null] - the horizontal end offset of the item in columns, may be combined with start or span\n * @param {?Number} [$row-span=null] - the height of the item in rows\n * @param {?Number} [$row-start=null] - the vertical start offset of the item in rows, may be combined with row-end or row-span\n * @param {?Number} [$row-end=null] - the vertical end offset of the item in rows, may be combined with row-start or row-span\n *\n * @see grid-container\n * @see grid-item-align\n *\n * @example\n * \\@include grid-item(12);\n * \\@include grid-item(6, 6);\n * \\@include grid-item(null, 2, 2);\n * \\@include grid-item(6, null, null, 2);\n * \\@include grid-item(6, null, null, null, 0, 5);\n */\n@mixin grid-item(\n\t$span:null,\n\t$start:null,\n\t$end:null,\n\t$row-span:null,\n\t$row-start:null,\n\t$row-end:null\n){\n\t@if ($span == null) and ($start == null) {\n\t\tgrid-column-end: span map.get($jig---grid-config, 'columns');\n\t} @else {\n\t\t@if $span != null {\n\t\t\tgrid-column-end: span $span;\n\t\t}\n\n\t\t@if $start != null {\n\t\t\tgrid-column-start: $start + 1;\n\t\t}\n\n\t\t@if ($end != null) and ($span == null) {\n\t\t\tgrid-column-end: $end + 1;\n\t\t}\n\t}\n\n\t@if ($row-span != null) or ($row-start != null) {\n\t\t@if $row-span != null {\n\t\t\tgrid-row-end: span $row-span;\n\t\t}\n\n\t\t@if $row-start != null {\n\t\t\tgrid-row-start: $row-start + 1;\n\t\t}\n\n\t\t@if ($row-end != null) and ($row-span == null) {\n\t\t\tgrid-row-end: $row-end + 1;\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Grid:grid-item-align\n */\n\n/**\n * Renders properties of a grid item, to define the item's alignment inside the area defined for the item using\n * the grid-item mixin. The usage of this only make sense for grid items.\n *\n * @memberof Grid:grid-item-align\n * @function\n * @name grid-item-align\n * @alias grid-item-align\n *\n * @param {String} [$horizontal=null] - \"left\"/\"start\", \"right\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n * @param {String} [$vertical=null] - \"top\"/\"start\", \"bottom\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n *\n * @see grid-item\n *\n * @example\n * \\@include grid-item-align('left');\n * \\@include grid-item-align(center, center);\n * \\@include grid-item-align(null, 'full');\n */\n@mixin grid-item-align($horizontal:null, $vertical:null){\n\t@if $horizontal == 'left' {\n\t\t$horizontal: 'start';\n\t} @else if $horizontal == 'right' {\n\t\t$horizontal: 'end';\n\t} @else if $horizontal == 'middle' {\n\t\t$horizontal: 'center';\n\t} @else if $horizontal == 'full' {\n\t\t$horizontal: 'stretch';\n\t}\n\n\t@if $vertical == 'top' {\n\t\t$vertical: 'start';\n\t} @else if $vertical == 'bottom' {\n\t\t$vertical: 'end';\n\t} @else if $vertical == 'middle' {\n\t\t$vertical: 'center';\n\t} @else if $vertical == 'full' {\n\t\t$vertical: 'stretch';\n\t}\n\n\t@if $horizontal != null {\n\t\tjustify-self: string.unquote($horizontal);\n\t}\n\n\t@if $vertical != null {\n\t\talign-self: string.unquote($vertical);\n\t}\n}\n\n\n\n/**\n * @namespace Grid:gutter-value\n */\n\n/**\n * Returns the value of the defined distance between two columns/rows for a breakpoint.\n *\n * The main usage for this is, to define a property value based on the current gutter.\n * This is why the parameter order may seem flipped, but usually, you'd use this inside a breakpoint\n * using auto-breakpoint detection, primarily rather working with the value itself. For other cases:\n * Remember, that that you can simply use named parameters.\n *\n * @memberof Grid:gutter-value\n * @function\n * @name gutter-value\n * @alias gutter-value\n *\n * @param {Number} [$factor=1.0] - factor to apply to the finally evaluated gutter value, most helpful to get half a gutter for example\n * @param {Number} [$add=0] - value to add to the finally evaluated gutter value, may also be negative to subtract\n * @param {String} [$direction='horizontal'] - either \"horizontal\" or \"vertical\", determines the gutter direction in the grid\n * @param {String} [$breakpoint='auto'] - a defined breakpoint name or \"auto\", to use the current breakpoint at the point of usage\n * @returns {Number} the determined gutter value with applied factor and/or addition\n * @throws error if no gutter value could be determined, based on given breakpoint and/or direction\n *\n * @example\n * \\@include breakpoint(medium){\n * padding-left: gutter-value(0.5);\n * }\n * margin-top: gutter-value($direction:'vertical', $breakpoint:'small');\n */\n@function gutter-value($factor:1.0, $add:0, $direction:'horizontal', $breakpoint:'auto'){\n\t$gutter: map.get($jig---grid-config, 'gutters', $direction);\n\t$res: null;\n\n\t@if $gutter != null {\n\t\t@if meta.type-of($gutter) == 'map' {\n\t\t\t$res: breakpoints.breakpoint-value($gutter, $breakpoint);\n\t\t} @else {\n\t\t\t$res: $gutter;\n\t\t}\n\t}\n\n\t@if $res == null {\n\t\t@error 'jig:gutter-value | could not resolve gutter, check direction and/or breakpoint';\n\t}\n\n\t@return ($res * $factor) + $add;\n}\n","/**\n * @namespace Breakpoints\n */\n\n\n\n@use 'sass:meta';\n@use 'sass:list';\n@use 'sass:map';\n\n@use 'globals' as *;\n@use 'util';\n\n\n\n$jig---auto-breakpoint: list.nth(map.keys($jig---breakpoint-config), 1);\n\n\n\n/**\n * @namespace Breakpoints:get-auto-breakpoint\n */\n\n/**\n * Returns the current auto breakpoint value.\n *\n * @memberof Breakpoints:get-auto-breakpoint\n * @function\n * @name get-auto-breakpoint\n * @alias get-auto-breakpoint\n *\n * @returns {String} the name of the current named auto breakpoint\n *\n * @see set-auto-breakpoint\n * @see reset-auto-breakpoint\n *\n * @example\n * get-auto-breakpoint()\n * => 'medium'\n */\n@function get-auto-breakpoint(){\n\t@return $jig---auto-breakpoint;\n}\n\n\n\n/**\n * @namespace Breakpoints:set-auto-breakpoint\n */\n\n/**\n * Sets the auto breakpoint to a named breakpoint value.\n * Hint: in Sass we do _not_ have to do this manually, if we want to use auto breakpoint values,\n * since blocks are always evaluated _after_ the block mixin around the block, which results\n * in the block knowing the breakpoint value automatically from the mixin around it.\n *\n * @memberof Breakpoints:set-auto-breakpoint\n * @function\n * @name set-auto-breakpoint\n * @alias set-auto-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @throws error if breakpoint is unknown\n *\n * @see reset-auto-breakpoint\n\n * @example\n * \\@include set-auto-breakpoint(medium);\n * \\@include breakpoint(medium){\n * ...\n * }\n */\n@mixin set-auto-breakpoint($breakpoint){\n\t@if map.has-key($jig---breakpoint-config, $breakpoint) {\n\t\t$jig---auto-breakpoint: $breakpoint !global;\n\t} @else {\n\t\t@error 'jig:set-current-breakpoint | unknown named breakpoint \"#{$breakpoint}\"';\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:reset-auto-breakpoint\n */\n\n/**\n * Resets the auto breakpoint to the first/smallest named breakpoint defined in the jig config.\n * Hint: this is automatically called at the end of the breakpoint mixin, so usually you should be fine\n * never calling this manually\n *\n * @memberof Breakpoints:reset-auto-breakpoint\n * @function\n * @name reset-auto-breakpoint\n * @alias reset-auto-breakpoint\n *\n * @see set-auto-breakpoint\n\n * @example\n * \\@include reset-auto-breakpoint();\n */\n@mixin reset-auto-breakpoint(){\n\t$jig---auto-breakpoint: list.nth(map.keys($jig---breakpoint-config), 1) !global;\n}\n\n\n\n/**\n * @namespace Breakpoints:is-named-breakpoint\n */\n\n/**\n * Returns if the given breakpoint is a registered named breakpoint to be found in the jig config.\n *\n * @memberof Breakpoints:is-named-breakpoint\n * @function\n * @name is-named-breakpoint\n * @alias is-named-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @returns {Boolean} true if breakpoint is a registered named breakpoint name\n *\n * @example\n * is-named-breakpoint(medium)\n * => true\n */\n@function is-named-breakpoint($breakpoint){\n\t@return map.has-key($jig---breakpoint-config, $breakpoint);\n}\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-range\n */\n\n/**\n * Returns a string to be used in a media query, which defines the range/bounds of a breakpoint with\n * min and/or max value.\n *\n * @memberof Breakpoints:build-breakpoint-range\n * @function\n * @name build-breakpoint-range\n * @alias build-breakpoint-range\n *\n * @param {?Number} [$min=null] - the min width of the breakpoint\n * @param {?Number} [$max=null] - the max width of the breakpoint\n * @returns {String} the media query string for the breakpoint range\n *\n * @example\n * build-breakpoint-range(0, 767px)\n * => '(min-width: 0) and (max-width: 767px)'\n * build-breakpoint-range(null, 100rem)\n * => '(max-width: 100rem)'\n */\n@function build-breakpoint-range($min:null, $max:null){\n\t@return util.str-join(\n\t\t[\n\t\t\tif($min != null, '(min-width: #{$min})', null),\n\t\t\tif($max != null, '(max-width: #{$max})', null)\n\t\t],\n\t\t' and '\n\t);\n}\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-query\n */\n\n/**\n * Constructs a query to be used in a media query, based on a breakpoint definition.\n * Also automatically converts values to rem.\n *\n * Directions in composite definitions may be \"up\", \"down\" or \"only\".\n *\n * You may also define the special breakpoints \"landscape\" or \"portrait\" to cover device orientations.\n *\n * @memberof Breakpoints:build-breakpoint-query\n * @function\n * @name build-breakpoint-query\n * @alias build-breakpoint-query\n *\n * @param {?Number|Literal|List} [$breakpoint-definition=0] - either a simple number or a composite definition of width and direction, where the width may either be a number or a name defined in the named breakpoints\n * @returns {String} the media query string for the breakpoint definition\n * @throws error if named breakpoint is unknown\n * @throws error if an unnamed breakpoint has an \"only\" direction\n *\n * @example\n * build-breakpoint-query(200rem)\n * => '(min-width: 200rem)'\n * build-breakpoint-query(small down)\n * => '(max-width: 199rem)'\n * build-breakpoint-query(('large' 'only'))\n * => '(min-width: 200rem) and (max-width: 499rem)'\n * build-breakpoint-query(1024px only)\n * => '(min-width: 64rem) and (max-width: 64rem)'\n * build-breakpoint-query(landscape)\n * => '(orientation: landscape)'\n */\n@function build-breakpoint-query($breakpoint-definition:0){\n\t$breakpoint: if($breakpoint-definition and (list.length($breakpoint-definition) > 0), list.nth($breakpoint-definition, 1), 0);\n\t$direction: if($breakpoint-definition and (list.length($breakpoint-definition) > 1), list.nth($breakpoint-definition, 2), 'up');\n\t$breakpoint-name: null;\n\t$next-breakpoint: null;\n\t$min: null;\n\t$max: null;\n\t$query-em-conversion-base: 16px; // this is always 16px, no matter what is defined on \n\n\t@if $breakpoint == 'overwrite' {\n\t\t@return '(min-width: 0)';\n\t} @else if ($breakpoint == 'landscape') or ($breakpoint == 'portrait') {\n\t\t@return '(orientation: #{$breakpoint})';\n\t} @else if meta.type-of($breakpoint) == 'string' {\n\t\t@if is-named-breakpoint($breakpoint) {\n\t\t\t$breakpoint-name: $breakpoint;\n\t\t\t$breakpoint: map.get($jig---breakpoint-config, $breakpoint-name);\n\t\t\t$next-breakpoint: util.map-next($jig---breakpoint-config, $breakpoint-name);\n\t\t} @else {\n\t\t\t@error 'jig:build-breakpoint-query | \"#{$breakpoint-definition}\" is not a defined breakpoint';\n\t\t}\n\t}\n\n\t@if ($breakpoint-name == null) and ($direction == 'only') {\n\t\t@error 'jig:build-breakpoint-query | only named media queries can have an \"only\" range';\n\t}\n\n\t// we are building media queries with em instead of rem and px\n\t// why? => https://zellwk.com/blog/media-query-units/\n\n\t@if ($direction == 'only') or ($direction == 'up') {\n\t\t$min: util.to-em($breakpoint, $query-em-conversion-base);\n\t}\n\n\t@if ($direction == 'only') or ($direction == 'down') {\n\t\t@if $breakpoint-name == null {\n\t\t\t$max: util.to-em($breakpoint, $query-em-conversion-base);\n\t\t} @else if $next-breakpoint != null {\n\t\t\t$max: util.to-em($next-breakpoint, $query-em-conversion-base) - util.to-em(1px, $query-em-conversion-base);\n\t\t}\n\t}\n\n\t@if ($min == 0) and ($max == null){\n\t\t$min: null;\n\t}\n\n\t@return build-breakpoint-range($min, $max);\n}\n\n\n\n/**\n * @namespace Breakpoints:breakpoint\n */\n\n/**\n * Renders media queries based one one or more breakpoint definitions.\n *\n * @memberof Breakpoints:breakpoint\n * @function\n * @name breakpoint\n * @alias breakpoint\n *\n * @param {Number|Literal|List|List|List>} $breakpoint-definitions - a list of breakpoint definitions according to build-breakpoint-query\n *\n * @example\n * \\@include breakpoint(small){\n * ...\n * }\n * \\@include breakpoint(small down, large up){\n * ...\n * }\n */\n@mixin breakpoint($breakpoint-definitions...){\n\t@each $breakpoint-definition in $breakpoint-definitions {\n\t\t$query: build-breakpoint-query($breakpoint-definition);\n\t\t$breakpoint: if(list.length($breakpoint-definition) > 0, list.nth($breakpoint-definition, 1), 0);\n\t\t$direction: if(list.length($breakpoint-definition) > 1, list.nth($breakpoint-definition, 2), 'up');\n\t\t$breakpoint-index: index(map.keys($jig---breakpoint-config), list.nth($breakpoint-definition, 1));\n\t\t$print-breakpoint-index: list.index(map.keys($jig---breakpoint-config), $jig---print-breakpoint);\n\n\t\t// set current breakpoint var to mixin breakpoint value to allow for auto-evaluation inside\n\t\t@if is-named-breakpoint($breakpoint){\n\t\t\t@include set-auto-breakpoint($breakpoint);\n\t\t}\n\n\t\t@if $query == '' {\n\t\t\t@content;\n\t\t} @else {\n\t\t\t@if(\n\t\t\t\t($breakpoint-index != null)\n\t\t\t\tand (\n\t\t\t\t\t($breakpoint-index <= $print-breakpoint-index)\n\t\t\t\t\tor ($direction == 'down')\n\t\t\t\t)\n\t\t\t){\n\t\t\t\t@media print, screen and #{$query} {\n\t\t\t\t\t@content;\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@media screen and #{$query} {\n\t\t\t\t\t@content;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// restore initial value after mixin has been rendered\n\t\t@include reset-auto-breakpoint();\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:breakpoint-value\n */\n\n/**\n * Search for a value, defined for a breakpoint, in a given map of values.\n * The function escalates in a mobile-first manner. So we take the value for the smallest breakpoint\n * and step up the breakpoints one by one until we reach the defined breakpoint. So, if we want the\n * according value for \"large\", but we only have a value for \"medium\", we'll get the \"medium\" value, which,\n * in mobile-first manner, escalates upwards and is the \"large\" value if nothing else is defined.\n *\n * @memberof Breakpoints:breakpoint-value\n * @function\n * @name breakpoint-value\n * @alias breakpoint-value\n *\n * @param {*|Map} $value - a map of breakpoint-keyed map of values, or a simple value\n * @param {Literal|String} $breakpoint - either \"auto\" (to use the current breakpoint) or one of the defined named breakpoints\n * @returns {*|null} the breakpoint value or null if nothing was found\n * @throws error if named breakpoint is unknown\n *\n * @example\n * breakpoint-value(\n * (\n * 'small' : 10px,\n * 'medium' : 20px\n * ),\n * large\n * )\n * => 20px\n */\n@function breakpoint-value($value, $breakpoint:'auto'){\n\t@if ($breakpoint != 'auto') and not map.has-key($jig---breakpoint-config, $breakpoint) {\n\t\t@error 'jig:breakpoint-value | given breakpoint \"#{$breakpoint}\" not defined';\n\t}\n\n\t@if meta.type-of($value) == 'map' {\n\t\t$res: null;\n\n\t\t@if $breakpoint == 'auto' {\n\t\t\t$breakpoint: get-auto-breakpoint();\n\t\t}\n\n\t\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t\t$breakpoint-value: map.get($value, $breakpoint-name);\n\n\t\t\t@if $breakpoint-value != null {\n\t\t\t\t$res: $breakpoint-value;\n\t\t\t}\n\n\t\t\t@if $breakpoint-name == $breakpoint {\n\t\t\t\t@return $res;\n\t\t\t}\n\t\t}\n\n\t\t@return null;\n\t} @else {\n\t\t@return $value;\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:attributes-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attributes for defined breakpoints.\n *\n * Definitions will be rendered together if possible, minimizing the amount of media queries.\n * However, each call of this mixin will, most likely, render multiple media queries, so keep a close eye\n * on your media query structure to avoid unnecessarily doubled definitions and keep media queries to a minimum.\n * If in doubt, it might be a better idea to write the queries manually, perhaps rather using `map.get` or\n * `breakpoint-value` to automatically pull values from breakpoint value maps.\n *\n * @memberof Breakpoints:attributes-for-breakpoints\n * @function\n * @name attributes-for-breakpoints\n * @alias attributes-for-breakpoints\n *\n * @see attribute-for-breakpoints\n *\n * @param {Map} $attributes - keys are attribute names, while values are either plain values or maps with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @example\n * \\@include attributes-for-breakpoints(\n * (\n * 'font-size' : 12px,\n * 'line-height' : (\n * 'small' : 1,\n * 'large' : 1.25\n * ),\n * 'margin-top' : (\n * 'small' : 10px,\n * 'medium' : 20px\n * )\n * ),\n * 2.0\n * );\n */\n@mixin attributes-for-breakpoints($attributes, $factor:null){\n\t$attributes-for-breakpoints: ();\n\t@each $attribute-name, $attribute-value in $attributes {\n\t\t@if meta.type-of($attribute-value) != 'map' {\n\t\t\t@if $factor == null {\n\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t} @else {\n\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t}\n\t\t} @else {\n\t\t\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t\t\t$breakpoint-value: map.get($attribute-value, $breakpoint-name);\n\t\t\t\t@if $breakpoint-value != null {\n\t\t\t\t\t$breakpoint-attributes: map.get($attributes-for-breakpoints, $breakpoint-name);\n\t\t\t\t\t@if $breakpoint-attributes == null {\n\t\t\t\t\t\t$breakpoint-attributes: ();\n\t\t\t\t\t}\n\n\t\t\t\t\t$breakpoint-attributes: map.merge(\n\t\t\t\t\t\t$breakpoint-attributes,\n\t\t\t\t\t\t($attribute-name : $breakpoint-value)\n\t\t\t\t\t);\n\n\t\t\t\t\t$attributes-for-breakpoints: map.merge(\n\t\t\t\t\t\t$attributes-for-breakpoints,\n\t\t\t\t\t\t($breakpoint-name : $breakpoint-attributes)\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@each $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config {\n\t\t$breakpoint-attributes: map.get($attributes-for-breakpoints, $breakpoint-name);\n\t\t@if ($breakpoint-attributes != null) and (list.length(map.keys($breakpoint-attributes)) > 0) {\n\t\t\t@include breakpoint($breakpoint-name){\n\t\t\t\t@each $attribute-name, $attribute-value in $breakpoint-attributes {\n\t\t\t\t\t@if $factor == null {\n\t\t\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:attribute-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attribute for defined breakpoints.\n *\n * This is the single attribute version of `attributes-for-breakpoints`.\n * Since this version does not optimize the usage of media queries, please make sure to only use this mixin,\n * if you'll definitely only have one attribute to be defined in multiple breakpoints.\n *\n * @memberof Breakpoints:attribute-for-breakpoints\n * @function\n * @name attribute-for-breakpoints\n * @alias attribute-for-breakpoints\n *\n * @see attributes-for-breakpoints\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * \\@include attribute-for-breakpoints(\n * 'line-height',\n * (\n * 'small' : 1,\n * 'large' : 1.25\n * ),\n * 1.0\n * );\n */\n@mixin attribute-for-breakpoints($attribute, $value, $factor:null){\n\t$attributes: ();\n\t$attributes: map.merge($attributes, ('#{$attribute}' : $value));\n\t@include attributes-for-breakpoints($attributes, $factor);\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attributes\n */\n\n/**\n * Use this, if you need to overwrite attribute values previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attributes\n * @function\n * @name overwrite-breakpoint-for-attributes\n * @alias overwrite-breakpoint-for-attributes\n *\n * @param {Map} $attributes - keys are attribute names, while values are either plain values or maps with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @see overwrite-breakpoint-for-attribute\n *\n * @example\n * \\@include overwrite-breakpoint-for-attributes(\n * (\n * 'font-size' : 12px,\n * 'line-height' : 1.25\n * 'margin-top' : 20px\n * ),\n * 2.0\n * );\n */\n@mixin overwrite-breakpoint-for-attributes($attributes, $factor:null){\n\t@include breakpoint('overwrite'){\n\t\t@each $attribute-name, $attribute-value in $attributes {\n\t\t\t@if $factor == null {\n\t\t\t\t#{$attribute-name}: $attribute-value;\n\t\t\t} @else {\n\t\t\t\t#{$attribute-name}: ($factor * $attribute-value);\n\t\t\t}\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attribute\n */\n\n/**\n * Use this, if you need to overwrite an attribut value previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attribute\n * @function\n * @name overwrite-breakpoint-for-attribute\n * @alias overwrite-breakpoint-for-attribute\n *\n * @see overwrite-breakpoint-for-attributes\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * \\@include overwrite-breakpoint-for-attribute(font-size, 12px, 2.0);\n */\n@mixin overwrite-breakpoint-for-attribute($attribute, $value, $factor:null){\n\t$attributes: ();\n\t$attributes: map.merge($attributes, ('#{$attribute}' : $value));\n\t@include overwrite-breakpoint-for-attributes($attributes, $factor);\n}\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint\n */\n\n/**\n * Use this, if you need to overwrite something previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to redefine something statically in an override situation, which has\n * been defined responsively before.\n *\n * @memberof Breakpoints:overwrite-breakpoint\n * @function\n * @name overwrite-breakpoint\n * @alias overwrite-breakpoint\n *\n * @example\n * \\@include overwrite-breakpoint(){\n * font-size: 12xp;\n * margin-top: 20px;\n * }\n */\n@mixin overwrite-breakpoint(){\n\t@include breakpoint('overwrite'){\n\t\t@content;\n\t}\n}\n","/**\n * @namespace Content\n */\n\n\n\n@use 'sass:meta';\n@use 'sass:map';\n@use 'sass:list';\n\n@use 'globals' as *;\n@use 'breakpoints';\n\n\n\n/**\n * @namespace Content:content-holder\n */\n\n/**\n * Adds properties to the current element, which make it a \"content holder\", meaning, that it\n * adheres to the defined min/max content widths and keeps the content away from the browser edges by\n * defining margins according to the defined responsive content paddings.\n *\n * Min and max widths are only rendered if they are defined in the jig config, as are content paddings.\n *\n * A content holder can be used as the base container definition for non-breakout elements on a page,\n * which is not supposed to grow indefinitely horizontally.\n *\n * A content holder can be a grid container at the same time, these things do not exclude themselves and\n * are even a very common use case.\n *\n * @memberof Content:content-holder\n * @function\n * @name content-holder\n * @alias content-holder\n *\n * @param {Boolean} [$padded=true] - if true, config-defined responsive content padding gets applied to the element\n * @param {Boolean} [$centered=true] - if true, element gets auto-centered using auto margins\n *\n * @example\n * \\@include content-holder();\n */\n@mixin content-holder($padded:true, $centered:false){\n\t$breakpoint-names: map.keys($jig---breakpoint-config);\n\t$smallest-breakpoint: list.nth($breakpoint-names, 1);\n\t$largest-breakpoint: list.nth($breakpoint-names, -1);\n\n\t$min-width: content-width-value('min');\n\t$max-width: content-width-value('max');\n\n\t@if $min-width != null {\n\t\tmin-width: $min-width + (2 * content-padding-value($smallest-breakpoint));\n\t}\n\t@if $max-width != null {\n\t\tmax-width: $max-width + (2 * content-padding-value($largest-breakpoint));\n\t}\n\n\t@if $centered {\n\t\tmargin-right: auto;\n\t\tmargin-left: auto;\n\t}\n\n\t@if $padded {\n\t\t$content-padding: map.get($jig---content-config, 'padding');\n\n\t\t@if $content-padding != null {\n\t\t\t@include breakpoints.attributes-for-breakpoints((\n\t\t\t\t'padding-left' : $content-padding,\n\t\t\t\t'padding-right' : $content-padding,\n\t\t\t));\n\t\t}\n\t}\n}\n\n\n\n/**\n * @namespace Content:content-padding-value\n */\n\n/**\n * Returns the defined content padding for a/the current breakpoint.\n *\n * @memberof Content:content-padding-value\n * @function\n * @name content-padding-value\n * @alias content-padding-value\n *\n * @param {String} [$breakpoint='auto'] - a defined breakpoint name or \"auto\", to use the current breakpoint at the point of usage\n * @returns {Number} the determined content padding value\n * @throws error if no content padding value could be determined, based on given breakpoint\n *\n * @example\n * \\@include breakpoint(medium){\n * padding-left: content-padding-value();\n * }\n * margin-right: content-padding-value($breakpoint:'small');\n */\n@function content-padding-value($breakpoint:'auto'){\n\t$padding: map.get($jig---content-config, 'padding');\n\t$res: null;\n\n\t@if $padding != null {\n\t\t@if meta.type-of($padding) == 'map' {\n\t\t\t$res: breakpoints.breakpoint-value($padding, $breakpoint);\n\t\t} @else {\n\t\t\t$res: $padding;\n\t\t}\n\t}\n\n\t@if $res == null {\n\t\t@error 'jig:content-padding-value | could not resolve content padding, check breakpoint';\n\t}\n\n\t@return $res;\n}\n\n\n\n/**\n * @namespace Content:content-width-value\n */\n\n/**\n * Returns the defined min/max content width.\n *\n * @memberof Content:content-width-value\n * @function\n * @name content-width-value\n * @alias content-width-value\n *\n * @param {String} [$min-max='max'] - either \"min\" or \"max\", defines if min or max content-width is returned\n * @param {?Number} [$default=null] - the default value to return if the width definition cannot be found\n * @returns {Number|null} the determined content width value, may be null if width is not defined (depending on default value)\n *\n * @example\n * max-width: content-width-value();\n * min-width: content-width-value('min', 0);\n */\n@function content-width-value($min-max:'max', $default:null){\n\t$width: map.get($jig---content-config, 'max-width');\n\t@if $min-max == 'min' {\n\t\t$width: map.get($jig---content-config, 'min-width');\n\t}\n\n\t@if $width == null {\n\t\t$width: $default;\n\t}\n\n\t@return $width;\n}\n\n\n\n/**\n * @namespace Content:base-font-size-value\n */\n\n/**\n * Returns the base font size, which is most likely applied to the html/body elements and acts as the base\n * for rem calculations.\n *\n * @memberof Content:base-font-size-value\n * @function\n * @name base-font-size-value\n * @alias base-font-size-value\n *\n * @returns {Number} the currently set jig base font size value\n *\n * @example\n * font-size: base-font-size-value();\n */\n@function base-font-size-value(){\n\t@return $jig---base-font-size;\n}\n"]} \ No newline at end of file diff --git a/docs/examples/css/stylus.css b/docs/examples/css/stylus.css index 81c88bf..f3c9b20 100644 --- a/docs/examples/css/stylus.css +++ b/docs/examples/css/stylus.css @@ -2,5 +2,5 @@ -#basic-grid-example .examples > .stylus,#advanced-grid-example .examples > .stylus,#real-world-grid-example .examples > .stylus{display:grid;grid-auto-flow:row;grid-template-columns:repeat(12,1fr);grid-row-gap:20px;grid-column-gap:10px;position:relative;padding:10px;border:3px solid #f00}@media print,screen and (min-width:48em){#basic-grid-example .examples > .stylus,#advanced-grid-example .examples > .stylus,#real-world-grid-example .examples > .stylus{grid-column-gap:20px}}@media print,screen and (min-width:80em){#basic-grid-example .examples > .stylus,#advanced-grid-example .examples > .stylus,#real-world-grid-example .examples > .stylus{grid-column-gap:40px}}#basic-grid-example .examples > .stylus:before,#advanced-grid-example .examples > .stylus:before,#real-world-grid-example .examples > .stylus:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center center;background-color:#aaa;background-image:url("../files/img/background-small.jpg");filter:saturate(150%) brightness(38%)}@media print,screen and (min-width:48em){#basic-grid-example .examples > .stylus:before,#advanced-grid-example .examples > .stylus:before,#real-world-grid-example .examples > .stylus:before{background-color:#ccc;background-image:url("../files/img/background-medium.jpg")}}@media print,screen and (min-width:80em){#basic-grid-example .examples > .stylus:before,#advanced-grid-example .examples > .stylus:before,#real-world-grid-example .examples > .stylus:before{background-color:#eee;background-image:url("../files/img/background-large.jpg")}}@media print,screen and (min-width:48em){#basic-grid-example .examples > .stylus,#advanced-grid-example .examples > .stylus,#real-world-grid-example .examples > .stylus{padding:20px}}@media print,screen and (min-width:80em){#basic-grid-example .examples > .stylus,#advanced-grid-example .examples > .stylus,#real-world-grid-example .examples > .stylus{padding:40px}}#basic-grid-example .examples > .stylus > div,#advanced-grid-example .examples > .stylus > div,#real-world-grid-example .examples > .stylus > div,#basic-grid-example .examples > .stylus > div > div,#advanced-grid-example .examples > .stylus > div > div,#real-world-grid-example .examples > .stylus > div > div{display:flex;justify-content:center;align-items:center;position:relative;border:3px solid #1e90ff;color:#fff;font-size:1.5rem;text-shadow:1px -1px 3px #000,1px 1px 3px #000,-1px 1px 3px #000,-1px -1px 3px #000;background-size:cover;background-position:center center;background-color:#1e90ff;filter:grayscale(50%) hue-rotate(-10deg) saturate(200%)}#basic-grid-example .examples > .stylus > div:nth-of-type(1),#advanced-grid-example .examples > .stylus > div:nth-of-type(1),#real-world-grid-example .examples > .stylus > div:nth-of-type(1),#basic-grid-example .examples > .stylus > div > div:nth-of-type(1),#advanced-grid-example .examples > .stylus > div > div:nth-of-type(1),#real-world-grid-example .examples > .stylus > div > div:nth-of-type(1){background-image:url("../files/img/block-1.jpg")}#basic-grid-example .examples > .stylus > div:nth-of-type(2),#advanced-grid-example .examples > .stylus > div:nth-of-type(2),#real-world-grid-example .examples > .stylus > div:nth-of-type(2),#basic-grid-example .examples > .stylus > div > div:nth-of-type(2),#advanced-grid-example .examples > .stylus > div > div:nth-of-type(2),#real-world-grid-example .examples > .stylus > div > div:nth-of-type(2){background-image:url("../files/img/block-2.jpg")}#basic-grid-example .examples > .stylus > div:nth-of-type(3),#advanced-grid-example .examples > .stylus > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > div:nth-of-type(3),#basic-grid-example .examples > .stylus > div > div:nth-of-type(3),#advanced-grid-example .examples > .stylus > div > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > div > div:nth-of-type(3){background-image:url("../files/img/block-3.jpg")}#basic-grid-example .examples > .stylus > div:nth-of-type(4),#advanced-grid-example .examples > .stylus > div:nth-of-type(4),#real-world-grid-example .examples > .stylus > div:nth-of-type(4),#basic-grid-example .examples > .stylus > div > div:nth-of-type(4),#advanced-grid-example .examples > .stylus > div > div:nth-of-type(4),#real-world-grid-example .examples > .stylus > div > div:nth-of-type(4){background-image:url("../files/img/block-4.jpg")}#basic-grid-example .examples > .stylus > div:nth-of-type(5),#advanced-grid-example .examples > .stylus > div:nth-of-type(5),#real-world-grid-example .examples > .stylus > div:nth-of-type(5),#basic-grid-example .examples > .stylus > div > div:nth-of-type(5),#advanced-grid-example .examples > .stylus > div > div:nth-of-type(5),#real-world-grid-example .examples > .stylus > div > div:nth-of-type(5){background-image:url("../files/img/block-5.jpg")}#basic-grid-example .examples > .stylus:hover:before,#advanced-grid-example .examples > .stylus:hover:before,#real-world-grid-example .examples > .stylus:hover:before,#basic-grid-example .examples > .stylus:hover > div,#advanced-grid-example .examples > .stylus:hover > div,#real-world-grid-example .examples > .stylus:hover > div,#basic-grid-example .examples > .stylus:hover > div > div,#advanced-grid-example .examples > .stylus:hover > div > div,#real-world-grid-example .examples > .stylus:hover > div > div{border-color:#87cefa;background-image:none !important;filter:none !important}#basic-grid-example .examples > .stylus:hover > div > div,#advanced-grid-example .examples > .stylus:hover > div > div,#real-world-grid-example .examples > .stylus:hover > div > div{filter:invert(100%) !important}#basic-grid-example .examples > .stylus > div:nth-of-type(odd){grid-column-end:span 6;height:100px}#basic-grid-example .examples > .stylus > div:nth-of-type(even){grid-column-end:span 6;height:75px}@media print,screen and (min-width:48em){#basic-grid-example .examples > .stylus > div:nth-of-type(1){grid-column-end:span 4;height:100px}#basic-grid-example .examples > .stylus > div:nth-of-type(2){grid-column-end:span 4;height:80px}#basic-grid-example .examples > .stylus > div:nth-of-type(3){grid-column-end:span 4;height:60px}#basic-grid-example .examples > .stylus > div:nth-of-type(4){grid-column-end:span 4;height:40px}#basic-grid-example .examples > .stylus > div:nth-of-type(5){grid-column-end:span 4;height:20px}}@media print,screen and (max-width:79.9375em){#basic-grid-example .examples > .stylus > div:nth-of-type(3){border-color:#0ff;background-color:#0ff;background-image:url("../files/img/block-6.jpg")}}@media print,screen and (min-width:80em){#basic-grid-example .examples > .stylus > div:nth-of-type(1){grid-column-end:span 12;height:25vh}#basic-grid-example .examples > .stylus > div:nth-of-type(2){grid-column-end:span 6;height:12.5vh}#basic-grid-example .examples > .stylus > div:nth-of-type(3){grid-column-end:span 6;align-self:end;height:10vh}#basic-grid-example .examples > .stylus > div:nth-of-type(4){grid-column-end:span 4;justify-self:center;align-self:center;order:2;width:100px;height:5vh}#basic-grid-example .examples > .stylus > div:nth-of-type(5){grid-column-end:span 4;order:1;height:10vh}}#advanced-grid-example .examples > .stylus{padding-top:40px}@media print,screen and (min-width:48em){#advanced-grid-example .examples > .stylus{padding-top:80px}}@media print,screen and (min-width:80em){#advanced-grid-example .examples > .stylus{padding-top:120px}}#advanced-grid-example .examples > .stylus > div:nth-of-type(odd){grid-column-end:span 4;align-self:end;height:50px}#advanced-grid-example .examples > .stylus > div:nth-of-type(even){grid-column-end:span 4;height:75px}#advanced-grid-example .examples > .stylus > div:first-of-type{grid-column-end:span 4;grid-row-end:span 2;align-self:stretch;height:auto}@media print,screen and (min-width:0) and (max-width:47.9375em){#advanced-grid-example .examples > .stylus > div:nth-of-type(3){border-color:#0ff;background-color:#0ff;background-image:url("../files/img/block-6.jpg")}}@media print,screen and (min-width:48em){#advanced-grid-example .examples > .stylus > div:nth-of-type(1){grid-column-end:span 4;order:5;width:50%;height:60px}#advanced-grid-example .examples > .stylus > div:nth-of-type(2){grid-column-start:9;grid-column-end:13;order:4;height:80px}#advanced-grid-example .examples > .stylus > div:nth-of-type(3){grid-column-end:span 2;grid-column-start:7;justify-self:stretch;align-self:center;order:3;height:60px}#advanced-grid-example .examples > .stylus > div:nth-of-type(4){grid-column-end:span 8;grid-row-start:2;grid-row-end:4;justify-self:end;align-self:stretch;order:2;width:50%;height:auto}#advanced-grid-example .examples > .stylus > div:nth-of-type(5){grid-column-end:span 4;justify-self:start;align-self:start;order:1;z-index:1;width:200%;height:55px;border-color:#f00;background-color:#f00;background-image:url("../files/img/block-7.jpg");transform:rotate(10deg)}}@media print,screen and (min-width:80em){#advanced-grid-example .examples > .stylus > div:nth-of-type(1){grid-column-end:span 4;grid-column-start:1;grid-row-end:span 1;grid-row-start:1;align-self:stretch;order:1;width:auto;height:10vh}#advanced-grid-example .examples > .stylus > div:nth-of-type(2){grid-column-start:5;grid-column-end:9;grid-row-end:span 2;grid-row-start:1;align-self:stretch;order:2;height:auto}#advanced-grid-example .examples > .stylus > div:nth-of-type(3){grid-column-end:span 4;grid-column-start:9;grid-row-end:span 3;grid-row-start:1;align-self:stretch;order:3;height:auto}#advanced-grid-example .examples > .stylus > div:nth-of-type(4){grid-column-end:span 4;grid-column-start:1;grid-row-start:2;grid-row-end:3;justify-self:end;align-self:center;order:4;width:100px;height:10vh}#advanced-grid-example .examples > .stylus > div:nth-of-type(5){grid-column-end:span 6;justify-self:stretch;order:5;width:auto;height:20vh;border-color:#1e90ff;background-color:#1e90ff;background-image:url("../files/img/block-8.jpg");transform:rotate(0deg)}}#real-world-grid-example .examples > .stylus > div:nth-of-type(1){grid-column-end:span 12;order:1;height:120px;margin:-10px;margin-bottom:0}#real-world-grid-example .examples > .stylus > div:nth-of-type(1):before{content:'Stage'}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > div:nth-of-type(1){height:240px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > div:nth-of-type(1){height:360px}}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > div:nth-of-type(1){margin:-20px;margin-bottom:-60px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > div:nth-of-type(1){margin:-40px;margin-bottom:-60px}}#real-world-grid-example .examples > .stylus > div:nth-of-type(2){grid-column-end:span 12;order:2}#real-world-grid-example .examples > .stylus > div:nth-of-type(2):before{content:'Navbar'}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > div:nth-of-type(2){grid-column-end:span 4;grid-row-end:span 2;order:3}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > div:nth-of-type(2){grid-column-end:span 3}}#real-world-grid-example .examples > .stylus > div:nth-of-type(3){grid-column-end:span 12;order:2;display:grid;grid-auto-flow:row;grid-template-columns:repeat(12,1fr);grid-row-gap:20px;grid-column-gap:10px}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > div:nth-of-type(3){grid-column-gap:20px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > div:nth-of-type(3){grid-column-gap:40px}}#real-world-grid-example .examples > .stylus > div:nth-of-type(3) > div:nth-of-type(1){grid-column-end:span 12;height:300px}#real-world-grid-example .examples > .stylus > div:nth-of-type(3) > div:nth-of-type(1):before{content:'Text'}#real-world-grid-example .examples > .stylus > div:nth-of-type(3) > div:nth-of-type(2),#real-world-grid-example .examples > .stylus > div:nth-of-type(3) > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > div:nth-of-type(3) > div:nth-of-type(4){grid-column-end:span 12;height:100px}#real-world-grid-example .examples > .stylus > div:nth-of-type(3) > div:nth-of-type(2):before,#real-world-grid-example .examples > .stylus > div:nth-of-type(3) > div:nth-of-type(3):before,#real-world-grid-example .examples > .stylus > div:nth-of-type(3) > div:nth-of-type(4):before{content:'Teaser'}#real-world-grid-example .examples > .stylus > div:nth-of-type(3) > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > div:nth-of-type(3) > div:nth-of-type(4){margin-top:-20px}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > div:nth-of-type(3){grid-column-end:span 8;grid-column-start:1}#real-world-grid-example .examples > .stylus > div:nth-of-type(3) > div:nth-of-type(1){height:210px}#real-world-grid-example .examples > .stylus > div:nth-of-type(3) > div:nth-of-type(2),#real-world-grid-example .examples > .stylus > div:nth-of-type(3) > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > div:nth-of-type(3) > div:nth-of-type(4){grid-column-end:span 4;height:75px}#real-world-grid-example .examples > .stylus > div:nth-of-type(3) > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > div:nth-of-type(3) > div:nth-of-type(4){margin-top:0}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > div:nth-of-type(3){grid-column-end:span 9}#real-world-grid-example .examples > .stylus > div:nth-of-type(3) > div:nth-of-type(1){height:150px}#real-world-grid-example .examples > .stylus > div:nth-of-type(3) > div:nth-of-type(2),#real-world-grid-example .examples > .stylus > div:nth-of-type(3) > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > div:nth-of-type(3) > div:nth-of-type(4){height:auto}}#real-world-grid-example .examples > .stylus > div:nth-of-type(4){grid-column-start:2;grid-column-end:12;order:4;margin-top:-10px}#real-world-grid-example .examples > .stylus > div:nth-of-type(4):before{content:'Hint'}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > div:nth-of-type(4){grid-column-end:span 8;grid-column-start:1}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > div:nth-of-type(4){grid-column-end:span 6;grid-column-start:4}}#real-world-grid-example .examples > .stylus > div:nth-of-type(5){grid-column-end:span 12;order:5;padding-top:30px;padding-bottom:40px;margin:-10px;margin-top:20px}#real-world-grid-example .examples > .stylus > div:nth-of-type(5):before{content:'Footer'}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > div:nth-of-type(5){padding-bottom:50px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > div:nth-of-type(5){padding-bottom:80px}}@media screen and (min-width:100em){#real-world-grid-example .examples > .stylus > div:nth-of-type(5){padding-top:40px}}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > div:nth-of-type(5){margin:-20px;margin-top:40px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > div:nth-of-type(5){margin:-40px;margin-top:50px}} +#basic-grid-example .examples > .stylus > .grid,#advanced-grid-example .examples > .stylus > .grid,#real-world-grid-example .examples > .stylus > .grid{display:grid;grid-auto-flow:row;grid-template-columns:repeat(12,1fr);grid-row-gap:20px;grid-column-gap:10px;position:relative;padding:10px;border:3px solid #f00}@media print,screen and (min-width:48em){#basic-grid-example .examples > .stylus > .grid,#advanced-grid-example .examples > .stylus > .grid,#real-world-grid-example .examples > .stylus > .grid{grid-column-gap:20px}}@media print,screen and (min-width:80em){#basic-grid-example .examples > .stylus > .grid,#advanced-grid-example .examples > .stylus > .grid,#real-world-grid-example .examples > .stylus > .grid{grid-column-gap:40px}}#basic-grid-example .examples > .stylus > .grid:before,#advanced-grid-example .examples > .stylus > .grid:before,#real-world-grid-example .examples > .stylus > .grid:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center center;background-color:#aaa;background-image:url("../files/img/background-small.jpg");filter:saturate(150%) brightness(38%)}@media print,screen and (min-width:48em){#basic-grid-example .examples > .stylus > .grid:before,#advanced-grid-example .examples > .stylus > .grid:before,#real-world-grid-example .examples > .stylus > .grid:before{background-color:#ccc;background-image:url("../files/img/background-medium.jpg")}}@media print,screen and (min-width:80em){#basic-grid-example .examples > .stylus > .grid:before,#advanced-grid-example .examples > .stylus > .grid:before,#real-world-grid-example .examples > .stylus > .grid:before{background-color:#eee;background-image:url("../files/img/background-large.jpg")}}@media print,screen and (min-width:48em){#basic-grid-example .examples > .stylus > .grid,#advanced-grid-example .examples > .stylus > .grid,#real-world-grid-example .examples > .stylus > .grid{padding:20px}}@media print,screen and (min-width:80em){#basic-grid-example .examples > .stylus > .grid,#advanced-grid-example .examples > .stylus > .grid,#real-world-grid-example .examples > .stylus > .grid{padding:40px}}#basic-grid-example .examples > .stylus > .grid > div,#advanced-grid-example .examples > .stylus > .grid > div,#real-world-grid-example .examples > .stylus > .grid > div,#basic-grid-example .examples > .stylus > .grid > div > div,#advanced-grid-example .examples > .stylus > .grid > div > div,#real-world-grid-example .examples > .stylus > .grid > div > div{display:flex;justify-content:center;align-items:center;position:relative;border:3px solid #1e90ff;color:#fff;font-size:18px;text-shadow:1px -1px 3px #000,1px 1px 3px #000,-1px 1px 3px #000,-1px -1px 3px #000;background-size:cover;background-position:center center;background-color:#1e90ff;filter:grayscale(50%) hue-rotate(-10deg) saturate(200%)}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(1),#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(1),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(1),#basic-grid-example .examples > .stylus > .grid > div > div:nth-of-type(1),#advanced-grid-example .examples > .stylus > .grid > div > div:nth-of-type(1),#real-world-grid-example .examples > .stylus > .grid > div > div:nth-of-type(1){background-image:url("../files/img/block-1.jpg")}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(2),#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(2),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(2),#basic-grid-example .examples > .stylus > .grid > div > div:nth-of-type(2),#advanced-grid-example .examples > .stylus > .grid > div > div:nth-of-type(2),#real-world-grid-example .examples > .stylus > .grid > div > div:nth-of-type(2){background-image:url("../files/img/block-2.jpg")}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(3),#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3),#basic-grid-example .examples > .stylus > .grid > div > div:nth-of-type(3),#advanced-grid-example .examples > .stylus > .grid > div > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > .grid > div > div:nth-of-type(3){background-image:url("../files/img/block-3.jpg")}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(4),#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(4),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(4),#basic-grid-example .examples > .stylus > .grid > div > div:nth-of-type(4),#advanced-grid-example .examples > .stylus > .grid > div > div:nth-of-type(4),#real-world-grid-example .examples > .stylus > .grid > div > div:nth-of-type(4){background-image:url("../files/img/block-4.jpg")}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(5),#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(5),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5),#basic-grid-example .examples > .stylus > .grid > div > div:nth-of-type(5),#advanced-grid-example .examples > .stylus > .grid > div > div:nth-of-type(5),#real-world-grid-example .examples > .stylus > .grid > div > div:nth-of-type(5){background-image:url("../files/img/block-5.jpg")}#basic-grid-example .examples > .stylus > .grid:hover:before,#advanced-grid-example .examples > .stylus > .grid:hover:before,#real-world-grid-example .examples > .stylus > .grid:hover:before,#basic-grid-example .examples > .stylus > .grid:hover > div,#advanced-grid-example .examples > .stylus > .grid:hover > div,#real-world-grid-example .examples > .stylus > .grid:hover > div,#basic-grid-example .examples > .stylus > .grid:hover > div > div,#advanced-grid-example .examples > .stylus > .grid:hover > div > div,#real-world-grid-example .examples > .stylus > .grid:hover > div > div{border-color:#87cefa;background-image:none !important;filter:none !important}#basic-grid-example .examples > .stylus > .grid:hover > div > div,#advanced-grid-example .examples > .stylus > .grid:hover > div > div,#real-world-grid-example .examples > .stylus > .grid:hover > div > div{filter:invert(100%) !important}#basic-grid-example .examples > .stylus{min-width:360px;max-width:1200px;margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media print,screen and (min-width:48em){#basic-grid-example .examples > .stylus{padding-left:35px;padding-right:35px}}@media print,screen and (min-width:80em){#basic-grid-example .examples > .stylus{padding-left:50px;padding-right:50px}}@media screen and (min-width:100em){#basic-grid-example .examples > .stylus{padding-left:60px;padding-right:60px}}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(odd){grid-column-end:span 6;height:100px}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(even){grid-column-end:span 6;height:75px}@media print,screen and (min-width:48em){#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(1){grid-column-end:span 4;height:100px}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(2){grid-column-end:span 4;height:80px}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-end:span 4;height:60px}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(4){grid-column-end:span 4;height:40px}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(5){grid-column-end:span 4;height:20px}}@media print,screen and (max-width:79.9375em){#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(3){border-color:#0ff;background-color:#0ff;background-image:url("../files/img/block-6.jpg")}}@media print,screen and (min-width:80em){#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(1){grid-column-end:span 12;height:25vh}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(2){grid-column-end:span 6;height:12.5vh}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-end:span 6;align-self:end;height:10vh}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(4){grid-column-end:span 4;justify-self:center;align-self:center;order:2;width:100px;height:5vh}#basic-grid-example .examples > .stylus > .grid > div:nth-of-type(5){grid-column-end:span 4;order:1;height:10vh}}#advanced-grid-example .examples > .stylus{min-width:360px;max-width:1200px;margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media print,screen and (min-width:48em){#advanced-grid-example .examples > .stylus{padding-left:35px;padding-right:35px}}@media print,screen and (min-width:80em){#advanced-grid-example .examples > .stylus{padding-left:50px;padding-right:50px}}@media screen and (min-width:100em){#advanced-grid-example .examples > .stylus{padding-left:60px;padding-right:60px}}#advanced-grid-example .examples > .stylus > .grid{padding-top:40px}@media print,screen and (min-width:48em){#advanced-grid-example .examples > .stylus > .grid{padding-top:80px}}@media print,screen and (min-width:80em){#advanced-grid-example .examples > .stylus > .grid{padding-top:120px}}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(odd){grid-column-end:span 4;align-self:end;height:50px}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(even){grid-column-end:span 4;height:75px}#advanced-grid-example .examples > .stylus > .grid > div:first-of-type{grid-column-end:span 4;grid-row-end:span 2;align-self:stretch;height:auto}@media print,screen and (min-width:0) and (max-width:47.9375em){#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(3){border-color:#0ff;background-color:#0ff;background-image:url("../files/img/block-6.jpg")}}@media print,screen and (min-width:48em){#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(1){grid-column-end:span 4;order:5;width:50%;height:60px}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(2){grid-column-start:9;grid-column-end:13;order:4;height:80px}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-end:span 2;grid-column-start:7;justify-self:stretch;align-self:center;order:3;height:60px}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(4){grid-column-end:span 8;grid-row-start:2;grid-row-end:4;justify-self:end;align-self:stretch;order:2;width:50%;height:auto}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(5){grid-column-end:span 4;justify-self:start;align-self:start;order:1;z-index:1;width:200%;height:55px;border-color:#f00;background-color:#f00;background-image:url("../files/img/block-7.jpg");transform:rotate(10deg)}}@media print,screen and (min-width:80em){#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(1){grid-column-end:span 4;grid-column-start:1;grid-row-end:span 1;grid-row-start:1;align-self:stretch;order:1;width:auto;height:10vh}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(2){grid-column-start:5;grid-column-end:9;grid-row-end:span 2;grid-row-start:1;align-self:stretch;order:2;height:auto}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-end:span 4;grid-column-start:9;grid-row-end:span 3;grid-row-start:1;align-self:stretch;order:3;height:auto}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(4){grid-column-end:span 4;grid-column-start:1;grid-row-start:2;grid-row-end:3;justify-self:end;align-self:center;order:4;width:100px;height:10vh}#advanced-grid-example .examples > .stylus > .grid > div:nth-of-type(5){grid-column-end:span 6;justify-self:stretch;order:5;width:auto;height:20vh;border-color:#1e90ff;background-color:#1e90ff;background-image:url("../files/img/block-8.jpg");transform:rotate(0deg)}}#real-world-grid-example .examples > .stylus{min-width:360px;max-width:1200px;margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus{padding-left:35px;padding-right:35px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus{padding-left:50px;padding-right:50px}}@media screen and (min-width:100em){#real-world-grid-example .examples > .stylus{padding-left:60px;padding-right:60px}}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(1){grid-column-end:span 12;order:1;height:120px;margin:-10px;margin-bottom:0}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(1):before{content:'Stage'}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(1){height:240px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(1){height:360px}}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(1){margin:-20px;margin-bottom:-60px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(1){margin:-40px;margin-bottom:-60px}}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(2){grid-column-end:span 12;order:2}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(2):before{content:'Navbar'}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(2){grid-column-end:span 4;grid-row-end:span 2;order:3}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(2){grid-column-end:span 3}}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-end:span 12;order:2;display:grid;grid-auto-flow:row;grid-template-columns:repeat(12,1fr);grid-row-gap:20px;grid-column-gap:10px}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-gap:20px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-gap:40px}}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(1){grid-column-end:span 12;height:300px}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(1):before{content:'Text'}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(2),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(4){grid-column-end:span 12;height:100px}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(2):before,#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(3):before,#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(4):before{content:'Teaser'}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(4){margin-top:-20px}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-end:span 8;grid-column-start:1}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(1){height:210px}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(2),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(4){grid-column-end:span 4;height:75px}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(4){margin-top:0}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3){grid-column-end:span 9}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(1){height:150px}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(2),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(3),#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(3) > div:nth-of-type(4){height:auto}}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(4){grid-column-start:2;grid-column-end:12;order:4;margin-top:-10px}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(4):before{content:'Hint'}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(4){grid-column-end:span 8;grid-column-start:1}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(4){grid-column-end:span 6;grid-column-start:4}}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5){grid-column-end:span 12;order:5;padding-top:30px;padding-bottom:40px;margin:-10px;margin-top:20px}#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5):before{content:'Footer'}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5){padding-bottom:50px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5){padding-bottom:80px}}@media screen and (min-width:100em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5){padding-top:40px}}@media print,screen and (min-width:48em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5){margin:-20px;margin-top:40px}}@media print,screen and (min-width:80em){#real-world-grid-example .examples > .stylus > .grid > div:nth-of-type(5){margin:-40px;margin-top:50px}} /*# sourceMappingURL=stylus.css.map */ diff --git a/docs/examples/css/stylus.css.map b/docs/examples/css/stylus.css.map index b1f98d0..d0dd603 100644 --- a/docs/examples/css/stylus.css.map +++ b/docs/examples/css/stylus.css.map @@ -1 +1 @@ -{"version":3,"sources":["../../../source/lib/normalize/index.css","examples.styl","../../../source/stylus/jig/grid.styl","../../../source/stylus/jig/breakpoints.styl"],"names":[],"mappings":"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","file":"stylus.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}\n\n/*# sourceMappingURL=index.css.map */\n","$example-grid\n\tgrid-container()\n\n\tposition relative\n\n\tpadding gutter-value()\n\tborder 3px solid red\n\n\t&:before\n\t\tcontent ''\n\n\t\tposition absolute\n\t\ttop 0\n\t\tright 0\n\t\tbottom 0\n\t\tleft 0\n\n\t\tbackground-size cover\n\t\tbackground-position center center\n\t\tattributes-for-breakpoints({\n\t\t\t'background-color' : $GRID_CONTAINER_BACKGROUNDCOLOR,\n\t\t\t'background-image' : $GRID_CONTAINER_BACKGROUNDIMAGE\n\t\t})\n\n\t\tfilter saturate(150%) brightness(38%)\n\n\tset-auto-breakpoint(medium)\n\t+breakpoint(medium)\n\t\tpadding gutter-value()\n\n\t+breakpoint(large)\n\t\tpadding gutter-value($breakpoint:large)\n\n\n\n\t> div\n\t> div > div\n\t\tdisplay flex\n\t\tjustify-content center\n\t\talign-items center\n\n\t\tposition relative\n\n\t\tborder 3px solid dodgerblue\n\n\t\tcolor white\n\t\tfont-size 1.5rem\n\t\ttext-shadow 1px -1px 3px black, 1px 1px 3px black, -1px 1px 3px black, -1px -1px 3px black\n\n\t\tbackground-size cover\n\t\tbackground-position center center\n\t\tbackground-color dodgerblue\n\n\t\tfilter grayscale(50%) hue-rotate(-10deg) saturate(200%)\n\n\t\t&:nth-of-type(1)\n\t\t\tbackground-image url('../files/img/block-1.jpg')\n\n\t\t&:nth-of-type(2)\n\t\t\tbackground-image url('../files/img/block-2.jpg')\n\n\t\t&:nth-of-type(3)\n\t\t\tbackground-image url('../files/img/block-3.jpg')\n\n\t\t&:nth-of-type(4)\n\t\t\tbackground-image url('../files/img/block-4.jpg')\n\n\t\t&:nth-of-type(5)\n\t\t\tbackground-image url('../files/img/block-5.jpg')\n\n\n\n\t&:hover\n\t\t&:before\n\t\t> div\n\t\t> div > div\n\t\t\tborder-color lightskyblue\n\n\t\t\tbackground-image none !important\n\n\t\t\tfilter none !important\n\n\t\t> div > div\n\t\t\tfilter invert(100%) !important\n\n\n\n#basic-grid-example\n\t.examples > .stylus\n\t\t@extend $example-grid\n\n\n\n\t\t> div\n\t\t\t&:nth-of-type(odd)\n\t\t\t\tgrid-item(6)\n\n\t\t\t\theight 100px\n\n\t\t\t&:nth-of-type(even)\n\t\t\t\tgrid-item(6)\n\n\t\t\t\theight 75px\n\n\n\n\t\t+breakpoint(medium up)\n\t\t\t> div\n\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\theight 100px\n\n\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\theight 80px\n\n\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\theight 60px\n\n\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\theight 40px\n\n\t\t\t\t&:nth-of-type(5)\n\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\theight 20px\n\n\n\n\t\t+breakpoint(medium down)\n\t\t\t> div\n\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\tborder-color aqua\n\n\t\t\t\t\tbackground-color aqua\n\t\t\t\t\tbackground-image url('../files/img/block-6.jpg')\n\n\n\n\t\t+breakpoint(large)\n\t\t\t> div\n\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\tgrid-item()\n\n\t\t\t\t\theight 25vh\n\n\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\tgrid-item(6)\n\n\t\t\t\t\theight 12.5vh\n\n\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\tgrid-item(6)\n\t\t\t\t\tgrid-item-align($vertical:bottom)\n\n\t\t\t\t\theight 10vh\n\n\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\tgrid-item(4)\n\t\t\t\t\tgrid-item-align(center, center)\n\t\t\t\t\torder 2\n\n\t\t\t\t\twidth 100px\n\t\t\t\t\theight 5vh\n\n\t\t\t\t&:nth-of-type(5)\n\t\t\t\t\tgrid-item(4)\n\t\t\t\t\torder 1\n\n\t\t\t\t\theight 10vh\n\n\n\n#advanced-grid-example\n\t.examples > .stylus\n\t\t@extend $example-grid\n\n\t\tspacing-based-attribute(padding-top, 'xxl')\n\n\n\n\t\t> div\n\t\t\t&:nth-of-type(odd)\n\t\t\t\tgrid-item(4)\n\t\t\t\tgrid-item-align(null, end)\n\n\t\t\t\theight gutter-value(2.5, $direction:'vertical')\n\n\t\t\t&:nth-of-type(even)\n\t\t\t\tgrid-item(4)\n\n\t\t\t\theight 75px\n\n\t\t\t&:first-of-type\n\t\t\t\tgrid-item($span:4, $row-span:2)\n\t\t\t\tgrid-item-align($vertical:full)\n\n\t\t\t\theight auto\n\n\n\n\t\t+breakpoint(xsmall only)\n\t\t\t> div\n\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\tborder-color aqua\n\n\t\t\t\t\tbackground-color aqua\n\t\t\t\t\tbackground-image url('../files/img/block-6.jpg')\n\n\n\n\t\tset-auto-breakpoint(medium)\n\t\t+breakpoint(medium)\n\t\t\t> div\n\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\tgrid-item(4)\n\t\t\t\t\torder 5\n\n\t\t\t\t\twidth 50%\n\t\t\t\t\theight gutter-value(3.0)\n\n\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\tgrid-item($start:8, $end:12)\n\t\t\t\t\torder 4\n\n\t\t\t\t\theight 80px\n\n\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\tgrid-item($start:6, $span:2)\n\t\t\t\t\tgrid-item-align(full, center)\n\t\t\t\t\torder 3\n\n\t\t\t\t\theight 60px\n\n\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\tgrid-item(8, $row-start:1, $row-end:3)\n\t\t\t\t\tgrid-item-align('right', $vertical:'full')\n\t\t\t\t\torder 2\n\n\t\t\t\t\twidth 50%\n\t\t\t\t\theight auto\n\n\t\t\t\t&:nth-of-type(5)\n\t\t\t\t\tgrid-item(4)\n\t\t\t\t\tgrid-item-align(left, top)\n\t\t\t\t\torder 1\n\t\t\t\t\tz-index 1\n\n\t\t\t\t\twidth 200%\n\t\t\t\t\theight 55px\n\n\t\t\t\t\tborder-color red\n\n\t\t\t\t\tbackground-color red\n\t\t\t\t\tbackground-image url('../files/img/block-7.jpg')\n\n\t\t\t\t\ttransform rotate(10deg)\n\n\n\n\t\t+breakpoint(large)\n\t\t\t> div\n\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\tgrid-item($start:0, $span:4, $row-start:0, $row-span:1)\n\t\t\t\t\tgrid-item-align($vertical:full)\n\t\t\t\t\torder 1\n\n\t\t\t\t\twidth auto\n\t\t\t\t\theight 10vh\n\n\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\tgrid-item($start:4, $end:8, $row-start:0, $row-span:2)\n\t\t\t\t\tgrid-item-align($vertical:full)\n\t\t\t\t\torder 2\n\n\t\t\t\t\theight auto\n\n\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\tgrid-item($start:8, $span:4, $row-start:0, $row-span:3)\n\t\t\t\t\tgrid-item-align($vertical:full)\n\t\t\t\t\torder 3\n\n\t\t\t\t\theight auto\n\n\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\tgrid-item($start:0, $span:4, $row-start:1, $row-end:2)\n\t\t\t\t\tgrid-item-align(right, center)\n\t\t\t\t\torder 4\n\n\t\t\t\t\twidth 100px\n\t\t\t\t\theight 10vh\n\n\t\t\t\t&:nth-of-type(5)\n\t\t\t\t\tgrid-item(6)\n\t\t\t\t\tgrid-item-align(stretch)\n\t\t\t\t\torder 5\n\n\t\t\t\t\twidth auto\n\t\t\t\t\theight 20vh\n\n\t\t\t\t\tborder-color dodgerblue\n\n\t\t\t\t\tbackground-color dodgerblue\n\t\t\t\t\tbackground-image url('../files/img/block-8.jpg')\n\n\t\t\t\t\ttransform rotate(0deg)\n\n\n\n#real-world-grid-example\n\t.examples > .stylus\n\t\t@extend $example-grid\n\n\n\n\t\t> div\n\t\t\t&:nth-of-type(1)\n\t\t\t\t&:before\n\t\t\t\t\tcontent 'Stage'\n\n\t\t\t\tgrid-item(12)\n\t\t\t\torder 1\n\n\t\t\t\tspacing-based-attribute('height', 'xxl', 3.0)\n\n\t\t\t\tmargin gutter-value(-1.0)\n\t\t\t\tmargin-bottom 0\n\n\t\t\t\t+breakpoint(medium)\n\t\t\t\t\tmargin gutter-value(-1.0, $breakpoint:medium)\n\t\t\t\t\tmargin-bottom gutter-value(-3, $breakpoint:medium, $direction:vertical)\n\n\t\t\t\tset-auto-breakpoint(large)\n\t\t\t\t+breakpoint(large)\n\t\t\t\t\tmargin gutter-value(-1.0)\n\t\t\t\t\tmargin-bottom gutter-value(-3, $direction:vertical)\n\n\n\n\t\t\t&:nth-of-type(2)\n\t\t\t\t&:before\n\t\t\t\t\tcontent 'Navbar'\n\n\t\t\t\tgrid-item(12)\n\t\t\t\torder 2\n\n\t\t\t\t+breakpoint(medium)\n\t\t\t\t\tgrid-item(4, $row-span:2)\n\t\t\t\t\torder 3\n\n\t\t\t\t+breakpoint(large)\n\t\t\t\t\tgrid-item(3)\n\n\n\n\t\t\t&:nth-of-type(3)\n\t\t\t\tgrid-item()\n\t\t\t\torder 2\n\n\t\t\t\tgrid-container()\n\n\t\t\t\t> div\n\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\t&:before\n\t\t\t\t\t\t\tcontent 'Text'\n\n\t\t\t\t\t\tgrid-item(12)\n\n\t\t\t\t\t\theight spacing-value('md') * 10\n\n\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\t&:before\n\t\t\t\t\t\t\tcontent 'Teaser'\n\n\t\t\t\t\t\tgrid-item(12)\n\n\t\t\t\t\t\theight 100px\n\n\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\tmargin-top gutter-value(-1, $direction:vertical)\n\n\n\n\t\t\t\tset-auto-breakpoint(medium)\n\t\t\t\t+breakpoint(medium)\n\t\t\t\t\tgrid-item($start:0, $span:8)\n\n\t\t\t\t\t> div\n\t\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\t\theight spacing-value('md') * 7\n\n\t\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\t\t\theight 75px\n\n\t\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\t\tmargin-top 0\n\n\n\n\t\t\t\tset-auto-breakpoint(large)\n\t\t\t\t+breakpoint(large)\n\t\t\t\t\tgrid-item(9)\n\n\t\t\t\t\t> div\n\t\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\t\theight spacing-value('md') * 5\n\n\t\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\t\theight auto\n\n\n\n\t\t\t&:nth-of-type(4)\n\t\t\t\t&:before\n\t\t\t\t\tcontent 'Hint'\n\n\t\t\t\tgrid-item($start:1, $end:11)\n\t\t\t\torder 4\n\n\t\t\t\tmargin-top gutter-value(-0.5, $direction:'vertical')\n\n\t\t\t\t+breakpoint(medium)\n\t\t\t\t\tgrid-item(8, $start:0)\n\n\t\t\t\t+breakpoint(large)\n\t\t\t\t\tgrid-item($start:3, $span:6)\n\n\n\n\t\t\t&:nth-of-type(5)\n\t\t\t\t&:before\n\t\t\t\t\tcontent 'Footer'\n\n\t\t\t\tgrid-item(12)\n\t\t\t\torder 5\n\n\t\t\t\tspacing-based-attributes({\n\t\t\t\t\t'padding-top' : 'md',\n\t\t\t\t\t'padding-bottom' : 'xl'\n\t\t\t\t})\n\t\t\t\tmargin gutter-value(-1)\n\t\t\t\tmargin-top gutter-value(1, $direction:vertical)\n\n\t\t\t\t+breakpoint(medium)\n\t\t\t\t\tmargin gutter-value(-1, $breakpoint:medium)\n\t\t\t\t\tmargin-top gutter-value(2, $breakpoint:medium, $direction:vertical)\n\n\t\t\t\tset-auto-breakpoint(large)\n\t\t\t\t+breakpoint(large)\n\t\t\t\t\tmargin gutter-value(-1)\n\t\t\t\t\tmargin-top gutter-value(2.5, $direction:vertical)\n","/**\n * @namespace Grid\n */\n\n\n\n/**\n * @namespace Grid:grid-container\n */\n\n/**\n * Renders the basic properties of a grid container, which is the bracket element for elements, which are\n * to be placed in a grid, thereby making the container, more or less, \"the grid itself\".\n *\n * The basic characteristic of this container is the pre-definition of usable grid columns, according to our config.\n *\n * @memberof Grid:grid-container\n * @function\n * @name grid-container\n * @alias grid-container\n *\n * @see grid-item\n *\n * @example\n * grid-container()\n */\ngrid-container()\n\tdisplay grid\n\tgrid-auto-flow row\n\tgrid-template-columns repeat($jig---grid-config.columns, 1fr)\n\tattributes-for-breakpoints({\n\t\t'grid-column-gap' : hash-get-deep($jig---grid-config, 'gutters', 'horizontal'),\n\t\t'grid-row-gap' : hash-get-deep($jig---grid-config, 'gutters', 'vertical')\n\t})\n\n\n\n/**\n * @namespace Grid:grid-item\n */\n\n/**\n * Renders the basic properties of a grid item, which is an item inside a grid, being placed according to\n * pre-defined columns.\n *\n * The main purpose of this mixin is, to define the space, the item takes inside the grid. To do this, there are\n * several means of definition. Either just giving it a column-based width, aligning it at the end of other,\n * already existing items, or defining a specific area it should cover, by explicitly defining a start and end column\n * or a combination of both.\n *\n * Additionally, the item may also be defined to take up more than one row, adding the native grid capabilities to\n * our concepts.\n *\n * @memberof Grid:grid-item\n * @function\n * @name grid-item\n * @alias grid-item\n *\n * @param {?Number} [$span=null] - the width of the item in columns\n * @param {?Number} [$start=null] - the horizontal start offset of the item in columns, may be combined with end or span\n * @param {?Number} [$end=null] - the horizontal end offset of the item in columns, may be combined with start or span\n * @param {?Number} [$row-span=null] - the height of the item in rows\n * @param {?Number} [$row-start=null] - the vertical start offset of the item in rows, may be combined with row-end or row-span\n * @param {?Number} [$row-end=null] - the vertical end offset of the item in rows, may be combined with row-start or row-span\n *\n * @see grid-container\n * @see grid-item-align\n *\n * @example\n * grid-item(12)\n * grid-item(6, 6)\n * grid-item(null, 2, 2)\n * grid-item(6, null, null, 2)\n * grid-item(6, null, null, null, 0, 5)\n */\ngrid-item(\n\t$span=null,\n\t$start=null,\n\t$end=null,\n\t$row-span=null,\n\t$row-start=null,\n\t$row-end=null\n)\n\tif ($span == null) and ($start == null)\n\t\tgrid-column-end span $jig---grid-config.columns\n\telse\n\t\tif $span != null\n\t\t\tgrid-column-end span $span\n\n\t\tif $start != null\n\t\t\tgrid-column-start ($start + 1)\n\n\t\tif ($end != null) and ($span == null)\n\t\t\tgrid-column-end ($end + 1)\n\n\tif ($row-span != null) or ($row-start != null)\n\t\tif $row-span != null\n\t\t\tgrid-row-end span $row-span\n\n\t\tif $row-start != null\n\t\t\tgrid-row-start ($row-start + 1)\n\n\t\tif ($row-end != null) and ($row-span == null)\n\t\t\tgrid-row-end ($row-end + 1)\n\n\n\n/**\n * @namespace Grid:grid-item-align\n */\n\n/**\n * Renders properties of a grid item, to define the item's alignment inside the area defined for the item using\n * the grid-item mixin. The usage of this only make sense for grid items.\n *\n * @memberof Grid:grid-item-align\n * @function\n * @name grid-item-align\n * @alias grid-item-align\n *\n * @param {String} [$horizontal=null] - \"left\"/\"start\", \"right\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n * @param {String} [$vertical=null] - \"top\"/\"start\", \"bottom\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n *\n * @see grid-item\n *\n * @example\n * grid-item-align('left')\n * grid-item-align(center, center)\n * grid-item-align(null, 'full')\n */\ngrid-item-align($horizontal=null, $vertical=null)\n\tif $horizontal == 'left'\n\t\t$horizontal = 'start'\n\telse if $horizontal == 'right'\n\t\t$horizontal = 'end'\n\telse if $horizontal == 'middle'\n\t\t$horizontal = 'center'\n\telse if $horizontal == 'full'\n\t\t$horizontal = 'stretch'\n\n\tif $vertical == 'top'\n\t\t$vertical = 'start'\n\telse if $vertical == 'bottom'\n\t\t$vertical = 'end'\n\telse if $vertical == 'middle'\n\t\t$vertical = 'center'\n\telse if $vertical == 'full'\n\t\t$vertical = 'stretch'\n\n\tif $horizontal != null\n\t\tjustify-self unquote($horizontal)\n\n\tif $vertical != null\n\t\talign-self unquote($vertical)\n\n\n\n/**\n * @namespace Grid:gutter-value\n */\n\n/**\n * Returns the value of the defined distance between two columns/rows for a breakpoint.\n *\n * The main usage for this is, to define a property value based on the current gutter.\n * This is why the parameter order may seem flipped, but usually, you'd use this inside a breakpoint\n * using auto-breakpoint detection, primarily rather working with the value itself. For other cases:\n * Remember, that that you can simply use named parameters.\n *\n * @memberof Grid:gutter-value\n * @function\n * @name gutter-value\n * @alias gutter-value\n *\n * @param {Number} [$factor=1.0] - factor to apply to the finally evaluated gutter value, most helpful to get half a gutter for example\n * @param {Number} [$add=0] - value to add to the finally evaluated gutter value, may also be negative to subtract\n * @param {String} [$direction='horizontal'] - either \"horizontal\" or \"vertical\", determines the gutter direction in the grid\n * @param {String} [$breakpoint='auto'] - a defined breakpoint name or \"auto\", to use the current breakpoint at the point of usage\n * @returns {Number} the determined gutter value with applied factor and/or addition\n * @throws error if no gutter value could be determined, based on given breakpoint and/or direction\n *\n * @example\n * +breakpoint(medium)\n * padding-left gutter-value(0.5)\n * margin-top gutter-value($direction:'vertical', $breakpoint:'small')\n */\ngutter-value(\n\t$factor=1.0,\n\t$add=0,\n\t$direction='horizontal',\n\t$breakpoint='auto'\n)\n\t$direction = to-str($direction)\n\t$breakpoint = to-str($breakpoint)\n\t$gutter = hash-get-deep($jig---grid-config, 'gutters', $direction)\n\t$res = null\n\n\tif $gutter != null\n\t\tif type($gutter) == 'object'\n\t\t\t$res = breakpoint-value($gutter, $breakpoint)\n\t\telse\n\t\t\t$res = $gutter\n\n\tif $res == null\n\t\terror('jig:gutter-value | could not resolve gutter, check direction and/or breakpoint')\n\n\treturn ($res * $factor) + $add\n","/**\n * @namespace Breakpoints\n */\n\n\n\n$jig---auto-breakpoint = keys($jig---breakpoint-config)[0]\n\n\n\n/**\n * @namespace Breakpoints:get-auto-breakpoint\n */\n\n/**\n * Returns the current auto breakpoint value.\n *\n * @memberof Breakpoints:get-auto-breakpoint\n * @function\n * @name get-auto-breakpoint\n * @alias get-auto-breakpoint\n *\n * @returns {String} the name of the current named auto breakpoint\n *\n * @see set-auto-breakpoint\n * @see reset-auto-breakpoint\n *\n * @example\n * get-auto-breakpoint()\n * => 'medium'\n */\nget-auto-breakpoint()\n\treturn $jig---auto-breakpoint\n\n\n\n/**\n * @namespace Breakpoints:set-auto-breakpoint\n */\n\n/**\n * Sets the auto breakpoint to a named breakpoint value.\n * Hint: in Stylus we have to do this manually, if we want to use auto breakpoint values,\n * since blocks are always evaluated _before_ the block mixin around the block, which results\n * in the block only knowing the breakpoint before the mixin.\n *\n * @memberof Breakpoints:set-auto-breakpoint\n * @function\n * @name set-auto-breakpoint\n * @alias set-auto-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @throws error if breakpoint is unknown\n *\n * @see reset-auto-breakpoint\n\n * @example\n * set-auto-breakpoint(medium)\n * +breakpoint(medium)\n * ...\n */\nset-auto-breakpoint($breakpoint)\n\t$breakpoint = to-str($breakpoint)\n\n\tif $breakpoint in $jig---breakpoint-config\n\t\tdefine('$jig---auto-breakpoint', $breakpoint, true)\n\telse\n\t\terror('jig:set-current-breakpoint | unknown named breakpoint \"'+$breakpoint+'\"')\n\n\n\n/**\n * @namespace Breakpoints:reset-auto-breakpoint\n */\n\n/**\n * Resets the auto breakpoint to the first/smallest named breakpoint defined in the jig config.\n * Hint: although you may do this manually in Stylus, this is automatically called at the end of the\n * breakpoint mixin, so usually you should be fine with set-auto-breakpoint, without resetting, if you\n * use a breakpoint directly after the call.\n *\n * @memberof Breakpoints:reset-auto-breakpoint\n * @function\n * @name reset-auto-breakpoint\n * @alias reset-auto-breakpoint\n *\n * @see set-auto-breakpoint\n\n * @example\n * reset-auto-breakpoint()\n */\nreset-auto-breakpoint()\n\tdefine('$jig---auto-breakpoint', keys($jig---breakpoint-config)[0], true)\n\n\n\n/**\n * @namespace Breakpoints:is-named-breakpoint\n */\n\n/**\n * Returns if the given breakpoint is a registered named breakpoint to be found in the jig config.\n *\n * @memberof Breakpoints:is-named-breakpoint\n * @function\n * @name is-named-breakpoint\n * @alias is-named-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @returns {Boolean} true if breakpoint is a registered named breakpoint name\n *\n * @example\n * is-named-breakpoint(medium)\n * => true\n */\nis-named-breakpoint($breakpoint)\n\t$breakpoint = to-str($breakpoint)\n\n\treturn $breakpoint in $jig---breakpoint-config\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-range\n */\n\n/**\n * Returns a string to be used in a media query, which defines the range/bounds of a breakpoint with\n * min and/or max value.\n *\n * @memberof Breakpoints:build-breakpoint-range\n * @function\n * @name build-breakpoint-range\n * @alias build-breakpoint-range\n *\n * @param {?Number} [$min=null] - the min width of the breakpoint\n * @param {?Number} [$max=null] - the max width of the breakpoint\n * @returns {String} the media query string for the breakpoint range\n *\n * @example\n * build-breakpoint-range(0, 767px)\n * => '(min-width: 0) and (max-width: 767px)'\n * build-breakpoint-range(null, 100rem)\n * => '(max-width: 100rem)'\n */\nbuild-breakpoint-range($min=null, $max=null)\n\t$min-query = ($min != null) ? '(min-width: '+$min+')' : null\n\t$max-query = ($max != null) ? '(max-width: '+$max+')' : null\n\n\treturn str-join(($min-query $max-query), ' and ')\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-query\n */\n\n/**\n * Constructs a query to be used in a media query, based on a breakpoint definition.\n * Also automatically converts values to rem.\n *\n * Directions in composite definitions may be \"up\", \"down\" or \"only\".\n *\n * You may also define the special breakpoints \"landscape\" or \"portrait\" to cover device orientations.\n *\n * @memberof Breakpoints:build-breakpoint-query\n * @function\n * @name build-breakpoint-query\n * @alias build-breakpoint-query\n *\n * @param {?Number|Literal|List} [$breakpoint-definition=0] - either a simple number or a composite definition of width and direction, where the width may either be a number or a name defined in the named breakpoints\n * @returns {String} the media query string for the breakpoint definition\n * @throws error if named breakpoint is unknown\n * @throws error if an unnamed breakpoint has an \"only\" direction\n *\n * @example\n * build-breakpoint-query(200rem)\n * => '(min-width: 200rem)'\n * build-breakpoint-query(small down)\n * => '(max-width: 199rem)'\n * build-breakpoint-query(('large' 'only'))\n * => '(min-width: 200rem) and (max-width: 499rem)'\n * build-breakpoint-query(1024px only)\n * => '(min-width: 64rem) and (max-width: 64rem)'\n * build-breakpoint-query(landscape)\n * => '(orientation: landscape)'\n */\nbuild-breakpoint-query($breakpoint-definition=0)\n\t$breakpoint = $breakpoint-definition[0] ? to-str($breakpoint-definition[0], $only-ident:true) : 0\n\t$direction = $breakpoint-definition[1] ? to-str($breakpoint-definition[1]) : 'up'\n\t$breakpoint-name = null\n\t$next-breakpoint = null\n\t$min = null\n\t$max = null\n\t$query-em-conversion-base = 16px // this is always 16px, no matter what is defined on \n\n\tif $breakpoint == 'overwrite'\n\t\treturn '(min-width: 0)'\n\telse if ($breakpoint == 'landscape') or ($breakpoint == 'portrait')\n\t\treturn '(orientation: '+$breakpoint+')'\n\telse if type($breakpoint) == 'string'\n\t\tif is-named-breakpoint($breakpoint)\n\t\t\t$breakpoint-name = $breakpoint\n\t\t\t$breakpoint = $jig---breakpoint-config[$breakpoint-name]\n\t\t\t$next-breakpoint = hash-next($jig---breakpoint-config, $breakpoint-name)\n\t\telse\n\t\t\terror('jig:build-breakpoint-query | \"'+$breakpoint-definition+'\" is not a defined breakpoint')\n\n\tif ($breakpoint-name == null) and ($direction == 'only')\n\t\terror('jig:build-breakpoint-query | only named media queries can have an \"only\" range')\n\n\t// we are building media queries with em instead of rem and px\n\t// why? => https://zellwk.com/blog/media-query-units/\n\n\tif ($direction == 'only') or ($direction == 'up')\n\t\t$min = to-em($breakpoint, $query-em-conversion-base)\n\n\tif ($direction == 'only') or ($direction == 'down')\n\t\tif $breakpoint-name == null\n\t\t\t$max = to-em($breakpoint, $query-em-conversion-base)\n\t\telse if $next-breakpoint-name != null\n\t\t\t$max = to-em($next-breakpoint, $query-em-conversion-base) - to-em(1px, $query-em-conversion-base)\n\n\tif ($min == 0) and ($max == null)\n\t\t$min = null\n\n\treturn build-breakpoint-range($min, $max)\n\n\n\n/**\n * @namespace Breakpoints:breakpoint\n */\n\n/**\n * Renders media queries based one one or more breakpoint definitions.\n *\n * @memberof Breakpoints:breakpoint\n * @function\n * @name breakpoint\n * @alias breakpoint\n *\n * @param {Number|Literal|List|List|List>} $breakpoint-definitions - a list of breakpoint definitions according to build-breakpoint-query\n *\n * @see set-auto-breakpoint\n *\n * @example\n * +breakpoint(small)\n * ...\n * +breakpoint(small down, large up)\n * ...\n */\nbreakpoint($breakpoint-definitions...)\n\tfor $breakpoint-definition in $breakpoint-definitions\n\t\t$query = build-breakpoint-query($breakpoint-definition)\n\t\t$breakpoint = $breakpoint-definition[0] ? to-str($breakpoint-definition[0], $only-ident:true) : 0\n\t\t$direction = $breakpoint-definition[1] ? to-str($breakpoint-definition[1]) : 'up'\n\t\t$breakpoint-index = index(keys($jig---breakpoint-config), $breakpoint)\n\t\t$print-breakpoint-index = index(keys($jig---breakpoint-config), $jig---print-breakpoint)\n\n\t\t// set current breakpoint var to mixin breakpoint value to allow for auto-evaluation inside\n\t\tif is-named-breakpoint($breakpoint)\n\t\t\tset-auto-breakpoint($breakpoint)\n\n\t\tif $query == ''\n\t\t\t{block}\n\t\telse\n\t\t\tif\t($breakpoint-index != null) and (($breakpoint-index <= $print-breakpoint-index) or ($direction == 'down'))\n\t\t\t\t$media-query = s('print, screen and %s', unquote($query))\n\t\t\t\t@media $media-query\n\t\t\t\t\t{block}\n\t\t\telse\n\t\t\t\t$media-query = s('screen and %s', unquote($query))\n\t\t\t\t@media $media-query\n\t\t\t\t\t{block}\n\n\t\t// restore initial value after mixin has been rendered\n\t\treset-auto-breakpoint()\n\n\n\n/**\n * @namespace Breakpoints:breakpoint-value\n */\n\n/**\n * Search for a value, defined for a breakpoint, in a given hash of values.\n * The function escalates in a mobile-first manner. So we take the value for the smallest breakpoint\n * and step up the breakpoints one by one until we reach the defined breakpoint. So, if we want the\n * according value for \"large\", but we only have a value for \"medium\", we'll get the \"medium\" value, which,\n * in mobile-first manner, escalates upwards and is the \"large\" value if nothing else is defined.\n *\n * @memberof Breakpoints:breakpoint-value\n * @function\n * @name breakpoint-value\n * @alias breakpoint-value\n *\n * @param {*|Hash} $value - a hash of breakpoint-keyed map of values, or a simple value\n * @param {Literal|String} $breakpoint - either \"auto\" (to use the current breakpoint) or one of the defined named breakpoints\n * @returns {*|null} the breakpoint value or null if nothing was found\n * @throws error if named breakpoint is unknown\n *\n * @example\n * breakpoint-value(\n * {\n * 'small' : 10px,\n * 'medium' : 20px\n * },\n * large\n * )\n * => 20px\n */\nbreakpoint-value($value, $breakpoint='auto')\n\t$breakpoint = to-str($breakpoint)\n\n\tif ($breakpoint != 'auto') and !($breakpoint in $jig---breakpoint-config)\n\t\terror('jig:breakpoint-value | given breakpoint \"'+$breakpoint+'\" not defined')\n\n\tif type($value) == 'object'\n\t\t$res = null\n\n\t\tif $breakpoint == 'auto'\n\t\t\t$breakpoint = get-auto-breakpoint()\n\n\t\tfor $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config\n\t\t\t$breakpoint-value = $value[$breakpoint-name]\n\n\t\t\tif $breakpoint-value != null\n\t\t\t\t$res = $breakpoint-value\n\n\t\t\tif $breakpoint-name == $breakpoint\n\t\t\t\treturn $res\n\n\t\treturn null\n\telse\n\t\treturn $value\n\n\n\n/**\n * @namespace Breakpoints:attributes-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attributes for defined breakpoints.\n *\n * Definitions will be rendered together if possible, minimizing the amount of media queries.\n * However, each call of this mixin will, most likely, render multiple media queries, so keep a close eye\n * on your media query structure to avoid unnecessarily doubled definitions and keep media queries to a minimum.\n * If in doubt, it might be a better idea to write the queries manually, perhaps rather using `[]` or\n * `breakpoint-value` to automatically pull values from breakpoint value hashes.\n *\n * @memberof Breakpoints:attributes-for-breakpoints\n * @function\n * @name attributes-for-breakpoints\n * @alias attributes-for-breakpoints\n *\n * @see attribute-for-breakpoints\n *\n * @param {Hash} $attributes - keys are attribute names, while values are either plain values or hashes with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @example\n * attributes-for-breakpoints(\n * {\n * 'font-size' : 12px,\n * 'line-height' : {\n * 'small' : 1,\n * 'large' : 1.25\n * },\n * 'margin-top' : {\n * 'small' : 10px,\n * 'medium' : 20px\n * }\n * },\n * 2.0\n * )\n */\nattributes-for-breakpoints($attributes, $factor=null)\n\t$attributes-for-breakpoints = {}\n\tfor $attribute-name, $attribute-value in $attributes\n\t\tif type($attribute-value) != 'object'\n\t\t\tif $factor == null\n\t\t\t\t{$attribute-name} $attribute-value\n\t\t\telse\n\t\t\t\t{$attribute-name} ($factor * $attribute-value)\n\t\telse\n\t\t\tfor $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config\n\t\t\t\t$breakpoint-value = $attribute-value[$breakpoint-name]\n\t\t\t\tif ($breakpoint-value != null) or (type($breakpoint-value) == 'call')\n\t\t\t\t\tif !($breakpoint-name in $attributes-for-breakpoints)\n\t\t\t\t\t\t$attributes-for-breakpoints[$breakpoint-name] = {}\n\t\t\t\t\t$attributes-for-breakpoints[$breakpoint-name][$attribute-name] = $breakpoint-value;\n\n\tfor $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config\n\t\t$breakpoint-attributes = $attributes-for-breakpoints[$breakpoint-name]\n\t\tif ($breakpoint-attributes != null) and (length($breakpoint-attributes) > 0)\n\t\t\t+breakpoint($breakpoint-name)\n\t\t\t\tfor $attribute-name, $attribute-value in $breakpoint-attributes\n\t\t\t\t\tif $factor == null\n\t\t\t\t\t\t{$attribute-name} $attribute-value\n\t\t\t\t\telse\n\t\t\t\t\t\t{$attribute-name} ($factor * $attribute-value)\n\n\n\n/**\n * @namespace Breakpoints:attribute-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attribute for defined breakpoints.\n *\n * This is the single attribute version of `attributes-for-breakpoints`.\n * Since this version does not optimize the usage of media queries, please make sure to only use this mixin,\n * if you'll definitely only have one attribute to be defined in multiple breakpoints.\n *\n * @memberof Breakpoints:attribute-for-breakpoints\n * @function\n * @name attribute-for-breakpoints\n * @alias attribute-for-breakpoints\n *\n * @see attributes-for-breakpoints\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * attribute-for-breakpoints(\n * 'line-height',\n * {\n * 'small' : 1,\n * 'large' : 1.25\n * },\n * 1.0\n * )\n */\nattribute-for-breakpoints($attribute, $value, $factor=null)\n\t$attributes = {}\n\t$attributes[to-str($attribute)] = $value\n\tattributes-for-breakpoints($attributes, $factor)\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attributes\n */\n\n/**\n * Use this, if you need to overwrite attribute values previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attributes\n * @function\n * @name overwrite-breakpoint-for-attributes\n * @alias overwrite-breakpoint-for-attributes\n *\n * @param {Hash} $attributes - keys are attribute names, while values are either plain values or hashes with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @see overwrite-breakpoint-for-attribute\n *\n * @example\n * overwrite-breakpoint-for-attributes(\n * {\n * 'font-size' : 12px,\n * 'line-height' : 1.25\n * 'margin-top' : 20px\n * },\n * 2.0\n * )\n */\noverwrite-breakpoint-for-attributes($attributes, $factor=null)\n\t+breakpoint('overwrite')\n\t\tfor $attribute-name, $attribute-value in $attributes\n\t\t\tif $factor == null\n\t\t\t\t{$attribute-name} $attribute-value\n\t\t\telse\n\t\t\t\t{$attribute-name} ($factor * $attribute-value)\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attribute\n */\n\n/**\n * Use this, if you need to overwrite an attribut value previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attribute\n * @function\n * @name overwrite-breakpoint-for-attribute\n * @alias overwrite-breakpoint-for-attribute\n *\n * @see overwrite-breakpoint-for-attributes\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * overwrite-breakpoint-for-attribute(font-size, 12px, 2.0)\n */\noverwrite-breakpoint-for-attribute($attribute, $value, $factor=null)\n\t$attributes = {}\n\t$attributes[to-str($attribute)] = $value\n\toverwrite-breakpoint-for-attributes($attributes, $factor)\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint\n */\n\n/**\n * Use this, if you need to overwrite something previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to redefine something statically in an override situation, which has\n * been defined responsively before.\n *\n * @memberof Breakpoints:overwrite-breakpoint\n * @function\n * @name overwrite-breakpoint\n * @alias overwrite-breakpoint\n *\n * @example\n * +overwrite-breakpoint()\n * font-size 12xp\n * margin-top 20px\n */\noverwrite-breakpoint()\n\t+breakpoint('overwrite')\n\t\t{block}\n"]} \ No newline at end of file +{"version":3,"sources":["../../../source/lib/normalize/index.css","examples.styl","../../../source/stylus/jig/grid.styl","../../../source/stylus/jig/breakpoints.styl","../../../source/stylus/jig/content.styl"],"names":[],"mappings":"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","file":"stylus.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}\n\n/*# sourceMappingURL=index.css.map */\n","$example-grid\n\tgrid-container()\n\n\tposition relative\n\n\tpadding gutter-value()\n\tborder 3px solid red\n\n\t&:before\n\t\tcontent ''\n\n\t\tposition absolute\n\t\ttop 0\n\t\tright 0\n\t\tbottom 0\n\t\tleft 0\n\n\t\tbackground-size cover\n\t\tbackground-position center center\n\t\tattributes-for-breakpoints({\n\t\t\t'background-color' : $GRID_CONTAINER_BACKGROUNDCOLOR,\n\t\t\t'background-image' : $GRID_CONTAINER_BACKGROUNDIMAGE\n\t\t})\n\n\t\tfilter saturate(150%) brightness(38%)\n\n\tset-auto-breakpoint(medium)\n\t+breakpoint(medium)\n\t\tpadding gutter-value()\n\n\t+breakpoint(large)\n\t\tpadding gutter-value($breakpoint:large)\n\n\n\n\t> div\n\t> div > div\n\t\tdisplay flex\n\t\tjustify-content center\n\t\talign-items center\n\n\t\tposition relative\n\n\t\tborder 3px solid dodgerblue\n\n\t\tcolor white\n\t\tfont-size base-font-size-value() * 1.5\n\t\ttext-shadow 1px -1px 3px black, 1px 1px 3px black, -1px 1px 3px black, -1px -1px 3px black\n\n\t\tbackground-size cover\n\t\tbackground-position center center\n\t\tbackground-color dodgerblue\n\n\t\tfilter grayscale(50%) hue-rotate(-10deg) saturate(200%)\n\n\t\t&:nth-of-type(1)\n\t\t\tbackground-image url('../files/img/block-1.jpg')\n\n\t\t&:nth-of-type(2)\n\t\t\tbackground-image url('../files/img/block-2.jpg')\n\n\t\t&:nth-of-type(3)\n\t\t\tbackground-image url('../files/img/block-3.jpg')\n\n\t\t&:nth-of-type(4)\n\t\t\tbackground-image url('../files/img/block-4.jpg')\n\n\t\t&:nth-of-type(5)\n\t\t\tbackground-image url('../files/img/block-5.jpg')\n\n\n\n\t&:hover\n\t\t&:before\n\t\t> div\n\t\t> div > div\n\t\t\tborder-color lightskyblue\n\n\t\t\tbackground-image none !important\n\n\t\t\tfilter none !important\n\n\t\t> div > div\n\t\t\tfilter invert(100%) !important\n\n\n\n#basic-grid-example\n\t.examples > .stylus\n\t\tcontent-holder($centered:true)\n\n\n\n\t\t> .grid\n\t\t\t@extend $example-grid\n\n\n\n\t\t\t> div\n\t\t\t\t&:nth-of-type(odd)\n\t\t\t\t\tgrid-item(6)\n\n\t\t\t\t\theight 100px\n\n\t\t\t\t&:nth-of-type(even)\n\t\t\t\t\tgrid-item(6)\n\n\t\t\t\t\theight 75px\n\n\n\n\t\t\t+breakpoint(medium up)\n\t\t\t\t> div\n\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\t\theight 100px\n\n\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\t\theight 80px\n\n\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\t\theight 60px\n\n\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\t\theight 40px\n\n\t\t\t\t\t&:nth-of-type(5)\n\t\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\t\theight 20px\n\n\n\n\t\t\t+breakpoint(medium down)\n\t\t\t\t> div\n\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\tborder-color aqua\n\n\t\t\t\t\t\tbackground-color aqua\n\t\t\t\t\t\tbackground-image url('../files/img/block-6.jpg')\n\n\n\n\t\t\t+breakpoint(large)\n\t\t\t\t> div\n\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\tgrid-item()\n\n\t\t\t\t\t\theight 25vh\n\n\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\tgrid-item(6)\n\n\t\t\t\t\t\theight 12.5vh\n\n\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\tgrid-item(6)\n\t\t\t\t\t\tgrid-item-align($vertical:bottom)\n\n\t\t\t\t\t\theight 10vh\n\n\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\tgrid-item(4)\n\t\t\t\t\t\tgrid-item-align(center, center)\n\t\t\t\t\t\torder 2\n\n\t\t\t\t\t\twidth 100px\n\t\t\t\t\t\theight 5vh\n\n\t\t\t\t\t&:nth-of-type(5)\n\t\t\t\t\t\tgrid-item(4)\n\t\t\t\t\t\torder 1\n\n\t\t\t\t\t\theight 10vh\n\n\n\n#advanced-grid-example\n\t.examples > .stylus\n\t\tcontent-holder($centered:true)\n\n\n\n\t\t> .grid\n\t\t\t@extend $example-grid\n\n\t\t\tspacing-based-attribute(padding-top, 'xxl')\n\n\n\n\t\t\t> div\n\t\t\t\t&:nth-of-type(odd)\n\t\t\t\t\tgrid-item(4)\n\t\t\t\t\tgrid-item-align(null, end)\n\n\t\t\t\t\theight gutter-value(2.5, $direction:'vertical')\n\n\t\t\t\t&:nth-of-type(even)\n\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\theight 75px\n\n\t\t\t\t&:first-of-type\n\t\t\t\t\tgrid-item($span:4, $row-span:2)\n\t\t\t\t\tgrid-item-align($vertical:full)\n\n\t\t\t\t\theight auto\n\n\n\n\t\t\t+breakpoint(xsmall only)\n\t\t\t\t> div\n\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\tborder-color aqua\n\n\t\t\t\t\t\tbackground-color aqua\n\t\t\t\t\t\tbackground-image url('../files/img/block-6.jpg')\n\n\n\n\t\t\tset-auto-breakpoint(medium)\n\t\t\t+breakpoint(medium)\n\t\t\t\t> div\n\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\tgrid-item(4)\n\t\t\t\t\t\torder 5\n\n\t\t\t\t\t\twidth 50%\n\t\t\t\t\t\theight gutter-value(3.0)\n\n\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\tgrid-item($start:8, $end:12)\n\t\t\t\t\t\torder 4\n\n\t\t\t\t\t\theight 80px\n\n\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\tgrid-item($start:6, $span:2)\n\t\t\t\t\t\tgrid-item-align(full, center)\n\t\t\t\t\t\torder 3\n\n\t\t\t\t\t\theight 60px\n\n\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\tgrid-item(8, $row-start:1, $row-end:3)\n\t\t\t\t\t\tgrid-item-align('right', $vertical:'full')\n\t\t\t\t\t\torder 2\n\n\t\t\t\t\t\twidth 50%\n\t\t\t\t\t\theight auto\n\n\t\t\t\t\t&:nth-of-type(5)\n\t\t\t\t\t\tgrid-item(4)\n\t\t\t\t\t\tgrid-item-align(left, top)\n\t\t\t\t\t\torder 1\n\t\t\t\t\t\tz-index 1\n\n\t\t\t\t\t\twidth 200%\n\t\t\t\t\t\theight 55px\n\n\t\t\t\t\t\tborder-color red\n\n\t\t\t\t\t\tbackground-color red\n\t\t\t\t\t\tbackground-image url('../files/img/block-7.jpg')\n\n\t\t\t\t\t\ttransform rotate(10deg)\n\n\n\n\t\t\t+breakpoint(large)\n\t\t\t\t> div\n\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\tgrid-item($start:0, $span:4, $row-start:0, $row-span:1)\n\t\t\t\t\t\tgrid-item-align($vertical:full)\n\t\t\t\t\t\torder 1\n\n\t\t\t\t\t\twidth auto\n\t\t\t\t\t\theight 10vh\n\n\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\tgrid-item($start:4, $end:8, $row-start:0, $row-span:2)\n\t\t\t\t\t\tgrid-item-align($vertical:full)\n\t\t\t\t\t\torder 2\n\n\t\t\t\t\t\theight auto\n\n\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\tgrid-item($start:8, $span:4, $row-start:0, $row-span:3)\n\t\t\t\t\t\tgrid-item-align($vertical:full)\n\t\t\t\t\t\torder 3\n\n\t\t\t\t\t\theight auto\n\n\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\tgrid-item($start:0, $span:4, $row-start:1, $row-end:2)\n\t\t\t\t\t\tgrid-item-align(right, center)\n\t\t\t\t\t\torder 4\n\n\t\t\t\t\t\twidth 100px\n\t\t\t\t\t\theight 10vh\n\n\t\t\t\t\t&:nth-of-type(5)\n\t\t\t\t\t\tgrid-item(6)\n\t\t\t\t\t\tgrid-item-align(stretch)\n\t\t\t\t\t\torder 5\n\n\t\t\t\t\t\twidth auto\n\t\t\t\t\t\theight 20vh\n\n\t\t\t\t\t\tborder-color dodgerblue\n\n\t\t\t\t\t\tbackground-color dodgerblue\n\t\t\t\t\t\tbackground-image url('../files/img/block-8.jpg')\n\n\t\t\t\t\t\ttransform rotate(0deg)\n\n\n\n#real-world-grid-example\n\t.examples > .stylus\n\t\tcontent-holder($centered:true)\n\n\n\n\t\t> .grid\n\t\t\t@extend $example-grid\n\n\n\n\t\t\t> div\n\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t&:before\n\t\t\t\t\t\tcontent 'Stage'\n\n\t\t\t\t\tgrid-item(12)\n\t\t\t\t\torder 1\n\n\t\t\t\t\tspacing-based-attribute('height', 'xxl', 3.0)\n\n\t\t\t\t\tmargin gutter-value(-1.0)\n\t\t\t\t\tmargin-bottom 0\n\n\t\t\t\t\t+breakpoint(medium)\n\t\t\t\t\t\tmargin gutter-value(-1.0, $breakpoint:medium)\n\t\t\t\t\t\tmargin-bottom gutter-value(-3, $breakpoint:medium, $direction:vertical)\n\n\t\t\t\t\tset-auto-breakpoint(large)\n\t\t\t\t\t+breakpoint(large)\n\t\t\t\t\t\tmargin gutter-value(-1.0)\n\t\t\t\t\t\tmargin-bottom gutter-value(-3, $direction:vertical)\n\n\n\n\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t&:before\n\t\t\t\t\t\tcontent 'Navbar'\n\n\t\t\t\t\tgrid-item(12)\n\t\t\t\t\torder 2\n\n\t\t\t\t\t+breakpoint(medium)\n\t\t\t\t\t\tgrid-item(4, $row-span:2)\n\t\t\t\t\t\torder 3\n\n\t\t\t\t\t+breakpoint(large)\n\t\t\t\t\t\tgrid-item(3)\n\n\n\n\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\tgrid-item()\n\t\t\t\t\torder 2\n\n\t\t\t\t\tgrid-container()\n\n\t\t\t\t\t> div\n\t\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\t\t&:before\n\t\t\t\t\t\t\t\tcontent 'Text'\n\n\t\t\t\t\t\t\tgrid-item(12)\n\n\t\t\t\t\t\t\theight spacing-value('md') * 10\n\n\t\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\t\t&:before\n\t\t\t\t\t\t\t\tcontent 'Teaser'\n\n\t\t\t\t\t\t\tgrid-item(12)\n\n\t\t\t\t\t\t\theight 100px\n\n\t\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\t\tmargin-top gutter-value(-1, $direction:vertical)\n\n\n\n\t\t\t\t\tset-auto-breakpoint(medium)\n\t\t\t\t\t+breakpoint(medium)\n\t\t\t\t\t\tgrid-item($start:0, $span:8)\n\n\t\t\t\t\t\t> div\n\t\t\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\t\t\theight spacing-value('md') * 7\n\n\t\t\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\t\t\tgrid-item(4)\n\n\t\t\t\t\t\t\t\theight 75px\n\n\t\t\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\t\t\tmargin-top 0\n\n\n\n\t\t\t\t\tset-auto-breakpoint(large)\n\t\t\t\t\t+breakpoint(large)\n\t\t\t\t\t\tgrid-item(9)\n\n\t\t\t\t\t\t> div\n\t\t\t\t\t\t\t&:nth-of-type(1)\n\t\t\t\t\t\t\t\theight spacing-value('md') * 5\n\n\t\t\t\t\t\t\t&:nth-of-type(2)\n\t\t\t\t\t\t\t&:nth-of-type(3)\n\t\t\t\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t\t\t\theight auto\n\n\n\n\t\t\t\t&:nth-of-type(4)\n\t\t\t\t\t&:before\n\t\t\t\t\t\tcontent 'Hint'\n\n\t\t\t\t\tgrid-item($start:1, $end:11)\n\t\t\t\t\torder 4\n\n\t\t\t\t\tmargin-top gutter-value(-0.5, $direction:'vertical')\n\n\t\t\t\t\t+breakpoint(medium)\n\t\t\t\t\t\tgrid-item(8, $start:0)\n\n\t\t\t\t\t+breakpoint(large)\n\t\t\t\t\t\tgrid-item($start:3, $span:6)\n\n\n\n\t\t\t\t&:nth-of-type(5)\n\t\t\t\t\t&:before\n\t\t\t\t\t\tcontent 'Footer'\n\n\t\t\t\t\tgrid-item(12)\n\t\t\t\t\torder 5\n\n\t\t\t\t\tspacing-based-attributes({\n\t\t\t\t\t\t'padding-top' : 'md',\n\t\t\t\t\t\t'padding-bottom' : 'xl'\n\t\t\t\t\t})\n\t\t\t\t\tmargin gutter-value(-1)\n\t\t\t\t\tmargin-top gutter-value(1, $direction:vertical)\n\n\t\t\t\t\t+breakpoint(medium)\n\t\t\t\t\t\tmargin gutter-value(-1, $breakpoint:medium)\n\t\t\t\t\t\tmargin-top gutter-value(2, $breakpoint:medium, $direction:vertical)\n\n\t\t\t\t\tset-auto-breakpoint(large)\n\t\t\t\t\t+breakpoint(large)\n\t\t\t\t\t\tmargin gutter-value(-1)\n\t\t\t\t\t\tmargin-top gutter-value(2.5, $direction:vertical)\n","/**\n * @namespace Grid\n */\n\n\n\n/**\n * @namespace Grid:grid-container\n */\n\n/**\n * Renders the basic properties of a grid container, which is the bracket element for elements, which are\n * to be placed in a grid, thereby making the container, more or less, \"the grid itself\".\n *\n * The basic characteristic of this container is the pre-definition of usable grid columns, according to our config.\n *\n * @memberof Grid:grid-container\n * @function\n * @name grid-container\n * @alias grid-container\n *\n * @see grid-item\n *\n * @example\n * grid-container()\n */\ngrid-container()\n\tdisplay grid\n\tgrid-auto-flow row\n\tgrid-template-columns repeat($jig---grid-config.columns, 1fr)\n\tattributes-for-breakpoints({\n\t\t'grid-column-gap' : hash-get-deep($jig---grid-config, 'gutters', 'horizontal'),\n\t\t'grid-row-gap' : hash-get-deep($jig---grid-config, 'gutters', 'vertical')\n\t})\n\n\n\n/**\n * @namespace Grid:grid-item\n */\n\n/**\n * Renders the basic properties of a grid item, which is an item inside a grid, being placed according to\n * pre-defined columns.\n *\n * The main purpose of this mixin is, to define the space, the item takes inside the grid. To do this, there are\n * several means of definition. Either just giving it a column-based width, aligning it at the end of other,\n * already existing items, or defining a specific area it should cover, by explicitly defining a start and end column\n * or a combination of both.\n *\n * Additionally, the item may also be defined to take up more than one row, adding the native grid capabilities to\n * our concepts.\n *\n * @memberof Grid:grid-item\n * @function\n * @name grid-item\n * @alias grid-item\n *\n * @param {?Number} [$span=null] - the width of the item in columns\n * @param {?Number} [$start=null] - the horizontal start offset of the item in columns, may be combined with end or span\n * @param {?Number} [$end=null] - the horizontal end offset of the item in columns, may be combined with start or span\n * @param {?Number} [$row-span=null] - the height of the item in rows\n * @param {?Number} [$row-start=null] - the vertical start offset of the item in rows, may be combined with row-end or row-span\n * @param {?Number} [$row-end=null] - the vertical end offset of the item in rows, may be combined with row-start or row-span\n *\n * @see grid-container\n * @see grid-item-align\n *\n * @example\n * grid-item(12)\n * grid-item(6, 6)\n * grid-item(null, 2, 2)\n * grid-item(6, null, null, 2)\n * grid-item(6, null, null, null, 0, 5)\n */\ngrid-item(\n\t$span=null,\n\t$start=null,\n\t$end=null,\n\t$row-span=null,\n\t$row-start=null,\n\t$row-end=null\n)\n\tif ($span == null) and ($start == null)\n\t\tgrid-column-end span $jig---grid-config.columns\n\telse\n\t\tif $span != null\n\t\t\tgrid-column-end span $span\n\n\t\tif $start != null\n\t\t\tgrid-column-start ($start + 1)\n\n\t\tif ($end != null) and ($span == null)\n\t\t\tgrid-column-end ($end + 1)\n\n\tif ($row-span != null) or ($row-start != null)\n\t\tif $row-span != null\n\t\t\tgrid-row-end span $row-span\n\n\t\tif $row-start != null\n\t\t\tgrid-row-start ($row-start + 1)\n\n\t\tif ($row-end != null) and ($row-span == null)\n\t\t\tgrid-row-end ($row-end + 1)\n\n\n\n/**\n * @namespace Grid:grid-item-align\n */\n\n/**\n * Renders properties of a grid item, to define the item's alignment inside the area defined for the item using\n * the grid-item mixin. The usage of this only make sense for grid items.\n *\n * @memberof Grid:grid-item-align\n * @function\n * @name grid-item-align\n * @alias grid-item-align\n *\n * @param {String} [$horizontal=null] - \"left\"/\"start\", \"right\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n * @param {String} [$vertical=null] - \"top\"/\"start\", \"bottom\"/\"end\", \"middle\"/\"center\" or \"full\"/\"stretch\"\n *\n * @see grid-item\n *\n * @example\n * grid-item-align('left')\n * grid-item-align(center, center)\n * grid-item-align(null, 'full')\n */\ngrid-item-align($horizontal=null, $vertical=null)\n\tif $horizontal == 'left'\n\t\t$horizontal = 'start'\n\telse if $horizontal == 'right'\n\t\t$horizontal = 'end'\n\telse if $horizontal == 'middle'\n\t\t$horizontal = 'center'\n\telse if $horizontal == 'full'\n\t\t$horizontal = 'stretch'\n\n\tif $vertical == 'top'\n\t\t$vertical = 'start'\n\telse if $vertical == 'bottom'\n\t\t$vertical = 'end'\n\telse if $vertical == 'middle'\n\t\t$vertical = 'center'\n\telse if $vertical == 'full'\n\t\t$vertical = 'stretch'\n\n\tif $horizontal != null\n\t\tjustify-self unquote($horizontal)\n\n\tif $vertical != null\n\t\talign-self unquote($vertical)\n\n\n\n/**\n * @namespace Grid:gutter-value\n */\n\n/**\n * Returns the value of the defined distance between two columns/rows for a breakpoint.\n *\n * The main usage for this is, to define a property value based on the current gutter.\n * This is why the parameter order may seem flipped, but usually, you'd use this inside a breakpoint\n * using auto-breakpoint detection, primarily rather working with the value itself. For other cases:\n * Remember, that that you can simply use named parameters.\n *\n * @memberof Grid:gutter-value\n * @function\n * @name gutter-value\n * @alias gutter-value\n *\n * @param {Number} [$factor=1.0] - factor to apply to the finally evaluated gutter value, most helpful to get half a gutter for example\n * @param {Number} [$add=0] - value to add to the finally evaluated gutter value, may also be negative to subtract\n * @param {String} [$direction='horizontal'] - either \"horizontal\" or \"vertical\", determines the gutter direction in the grid\n * @param {String} [$breakpoint='auto'] - a defined breakpoint name or \"auto\", to use the current breakpoint at the point of usage\n * @returns {Number} the determined gutter value with applied factor and/or addition\n * @throws error if no gutter value could be determined, based on given breakpoint and/or direction\n *\n * @example\n * +breakpoint(medium)\n * padding-left gutter-value(0.5)\n * margin-top gutter-value($direction:'vertical', $breakpoint:'small')\n */\ngutter-value(\n\t$factor=1.0,\n\t$add=0,\n\t$direction='horizontal',\n\t$breakpoint='auto'\n)\n\t$direction = to-str($direction)\n\t$breakpoint = to-str($breakpoint)\n\t$gutter = hash-get-deep($jig---grid-config, 'gutters', $direction)\n\t$res = null\n\n\tif $gutter != null\n\t\tif type($gutter) == 'object'\n\t\t\t$res = breakpoint-value($gutter, $breakpoint)\n\t\telse\n\t\t\t$res = $gutter\n\n\tif $res == null\n\t\terror('jig:gutter-value | could not resolve gutter, check direction and/or breakpoint')\n\n\treturn ($res * $factor) + $add\n","/**\n * @namespace Breakpoints\n */\n\n\n\n$jig---auto-breakpoint = keys($jig---breakpoint-config)[0]\n\n\n\n/**\n * @namespace Breakpoints:get-auto-breakpoint\n */\n\n/**\n * Returns the current auto breakpoint value.\n *\n * @memberof Breakpoints:get-auto-breakpoint\n * @function\n * @name get-auto-breakpoint\n * @alias get-auto-breakpoint\n *\n * @returns {String} the name of the current named auto breakpoint\n *\n * @see set-auto-breakpoint\n * @see reset-auto-breakpoint\n *\n * @example\n * get-auto-breakpoint()\n * => 'medium'\n */\nget-auto-breakpoint()\n\treturn $jig---auto-breakpoint\n\n\n\n/**\n * @namespace Breakpoints:set-auto-breakpoint\n */\n\n/**\n * Sets the auto breakpoint to a named breakpoint value.\n * Hint: in Stylus we have to do this manually, if we want to use auto breakpoint values,\n * since blocks are always evaluated _before_ the block mixin around the block, which results\n * in the block only knowing the breakpoint before the mixin.\n *\n * @memberof Breakpoints:set-auto-breakpoint\n * @function\n * @name set-auto-breakpoint\n * @alias set-auto-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @throws error if breakpoint is unknown\n *\n * @see reset-auto-breakpoint\n\n * @example\n * set-auto-breakpoint(medium)\n * +breakpoint(medium)\n * ...\n */\nset-auto-breakpoint($breakpoint)\n\t$breakpoint = to-str($breakpoint)\n\n\tif $breakpoint in $jig---breakpoint-config\n\t\tdefine('$jig---auto-breakpoint', $breakpoint, true)\n\telse\n\t\terror('jig:set-current-breakpoint | unknown named breakpoint \"'+$breakpoint+'\"')\n\n\n\n/**\n * @namespace Breakpoints:reset-auto-breakpoint\n */\n\n/**\n * Resets the auto breakpoint to the first/smallest named breakpoint defined in the jig config.\n * Hint: although you may do this manually in Stylus, this is automatically called at the end of the\n * breakpoint mixin, so usually you should be fine with set-auto-breakpoint, without resetting, if you\n * use a breakpoint directly after the call.\n *\n * @memberof Breakpoints:reset-auto-breakpoint\n * @function\n * @name reset-auto-breakpoint\n * @alias reset-auto-breakpoint\n *\n * @see set-auto-breakpoint\n\n * @example\n * reset-auto-breakpoint()\n */\nreset-auto-breakpoint()\n\tdefine('$jig---auto-breakpoint', keys($jig---breakpoint-config)[0], true)\n\n\n\n/**\n * @namespace Breakpoints:is-named-breakpoint\n */\n\n/**\n * Returns if the given breakpoint is a registered named breakpoint to be found in the jig config.\n *\n * @memberof Breakpoints:is-named-breakpoint\n * @function\n * @name is-named-breakpoint\n * @alias is-named-breakpoint\n *\n * @param {String} $breakpoint - a named breakpoint defined in the jig config\n * @returns {Boolean} true if breakpoint is a registered named breakpoint name\n *\n * @example\n * is-named-breakpoint(medium)\n * => true\n */\nis-named-breakpoint($breakpoint)\n\t$breakpoint = to-str($breakpoint)\n\n\treturn $breakpoint in $jig---breakpoint-config\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-range\n */\n\n/**\n * Returns a string to be used in a media query, which defines the range/bounds of a breakpoint with\n * min and/or max value.\n *\n * @memberof Breakpoints:build-breakpoint-range\n * @function\n * @name build-breakpoint-range\n * @alias build-breakpoint-range\n *\n * @param {?Number} [$min=null] - the min width of the breakpoint\n * @param {?Number} [$max=null] - the max width of the breakpoint\n * @returns {String} the media query string for the breakpoint range\n *\n * @example\n * build-breakpoint-range(0, 767px)\n * => '(min-width: 0) and (max-width: 767px)'\n * build-breakpoint-range(null, 100rem)\n * => '(max-width: 100rem)'\n */\nbuild-breakpoint-range($min=null, $max=null)\n\t$min-query = ($min != null) ? '(min-width: '+$min+')' : null\n\t$max-query = ($max != null) ? '(max-width: '+$max+')' : null\n\n\treturn str-join(($min-query $max-query), ' and ')\n\n\n\n/**\n * @namespace Breakpoints:build-breakpoint-query\n */\n\n/**\n * Constructs a query to be used in a media query, based on a breakpoint definition.\n * Also automatically converts values to rem.\n *\n * Directions in composite definitions may be \"up\", \"down\" or \"only\".\n *\n * You may also define the special breakpoints \"landscape\" or \"portrait\" to cover device orientations.\n *\n * @memberof Breakpoints:build-breakpoint-query\n * @function\n * @name build-breakpoint-query\n * @alias build-breakpoint-query\n *\n * @param {?Number|Literal|List} [$breakpoint-definition=0] - either a simple number or a composite definition of width and direction, where the width may either be a number or a name defined in the named breakpoints\n * @returns {String} the media query string for the breakpoint definition\n * @throws error if named breakpoint is unknown\n * @throws error if an unnamed breakpoint has an \"only\" direction\n *\n * @example\n * build-breakpoint-query(200rem)\n * => '(min-width: 200rem)'\n * build-breakpoint-query(small down)\n * => '(max-width: 199rem)'\n * build-breakpoint-query(('large' 'only'))\n * => '(min-width: 200rem) and (max-width: 499rem)'\n * build-breakpoint-query(1024px only)\n * => '(min-width: 64rem) and (max-width: 64rem)'\n * build-breakpoint-query(landscape)\n * => '(orientation: landscape)'\n */\nbuild-breakpoint-query($breakpoint-definition=0)\n\t$breakpoint = $breakpoint-definition[0] ? to-str($breakpoint-definition[0], $only-ident:true) : 0\n\t$direction = $breakpoint-definition[1] ? to-str($breakpoint-definition[1]) : 'up'\n\t$breakpoint-name = null\n\t$next-breakpoint = null\n\t$min = null\n\t$max = null\n\t$query-em-conversion-base = 16px // this is always 16px, no matter what is defined on \n\n\tif $breakpoint == 'overwrite'\n\t\treturn '(min-width: 0)'\n\telse if ($breakpoint == 'landscape') or ($breakpoint == 'portrait')\n\t\treturn '(orientation: '+$breakpoint+')'\n\telse if type($breakpoint) == 'string'\n\t\tif is-named-breakpoint($breakpoint)\n\t\t\t$breakpoint-name = $breakpoint\n\t\t\t$breakpoint = $jig---breakpoint-config[$breakpoint-name]\n\t\t\t$next-breakpoint = hash-next($jig---breakpoint-config, $breakpoint-name)\n\t\telse\n\t\t\terror('jig:build-breakpoint-query | \"'+$breakpoint-definition+'\" is not a defined breakpoint')\n\n\tif ($breakpoint-name == null) and ($direction == 'only')\n\t\terror('jig:build-breakpoint-query | only named media queries can have an \"only\" range')\n\n\t// we are building media queries with em instead of rem and px\n\t// why? => https://zellwk.com/blog/media-query-units/\n\n\tif ($direction == 'only') or ($direction == 'up')\n\t\t$min = to-em($breakpoint, $query-em-conversion-base)\n\n\tif ($direction == 'only') or ($direction == 'down')\n\t\tif $breakpoint-name == null\n\t\t\t$max = to-em($breakpoint, $query-em-conversion-base)\n\t\telse if $next-breakpoint-name != null\n\t\t\t$max = to-em($next-breakpoint, $query-em-conversion-base) - to-em(1px, $query-em-conversion-base)\n\n\tif ($min == 0) and ($max == null)\n\t\t$min = null\n\n\treturn build-breakpoint-range($min, $max)\n\n\n\n/**\n * @namespace Breakpoints:breakpoint\n */\n\n/**\n * Renders media queries based one one or more breakpoint definitions.\n *\n * @memberof Breakpoints:breakpoint\n * @function\n * @name breakpoint\n * @alias breakpoint\n *\n * @param {Number|Literal|List|List|List>} $breakpoint-definitions - a list of breakpoint definitions according to build-breakpoint-query\n *\n * @see set-auto-breakpoint\n *\n * @example\n * +breakpoint(small)\n * ...\n * +breakpoint(small down, large up)\n * ...\n */\nbreakpoint($breakpoint-definitions...)\n\tfor $breakpoint-definition in $breakpoint-definitions\n\t\t$query = build-breakpoint-query($breakpoint-definition)\n\t\t$breakpoint = $breakpoint-definition[0] ? to-str($breakpoint-definition[0], $only-ident:true) : 0\n\t\t$direction = $breakpoint-definition[1] ? to-str($breakpoint-definition[1]) : 'up'\n\t\t$breakpoint-index = index(keys($jig---breakpoint-config), $breakpoint)\n\t\t$print-breakpoint-index = index(keys($jig---breakpoint-config), $jig---print-breakpoint)\n\n\t\t// set current breakpoint var to mixin breakpoint value to allow for auto-evaluation inside\n\t\tif is-named-breakpoint($breakpoint)\n\t\t\tset-auto-breakpoint($breakpoint)\n\n\t\tif $query == ''\n\t\t\t{block}\n\t\telse\n\t\t\tif\t($breakpoint-index != null) and (($breakpoint-index <= $print-breakpoint-index) or ($direction == 'down'))\n\t\t\t\t$media-query = s('print, screen and %s', unquote($query))\n\t\t\t\t@media $media-query\n\t\t\t\t\t{block}\n\t\t\telse\n\t\t\t\t$media-query = s('screen and %s', unquote($query))\n\t\t\t\t@media $media-query\n\t\t\t\t\t{block}\n\n\t\t// restore initial value after mixin has been rendered\n\t\treset-auto-breakpoint()\n\n\n\n/**\n * @namespace Breakpoints:breakpoint-value\n */\n\n/**\n * Search for a value, defined for a breakpoint, in a given hash of values.\n * The function escalates in a mobile-first manner. So we take the value for the smallest breakpoint\n * and step up the breakpoints one by one until we reach the defined breakpoint. So, if we want the\n * according value for \"large\", but we only have a value for \"medium\", we'll get the \"medium\" value, which,\n * in mobile-first manner, escalates upwards and is the \"large\" value if nothing else is defined.\n *\n * @memberof Breakpoints:breakpoint-value\n * @function\n * @name breakpoint-value\n * @alias breakpoint-value\n *\n * @param {*|Hash} $value - a hash of breakpoint-keyed map of values, or a simple value\n * @param {Literal|String} $breakpoint - either \"auto\" (to use the current breakpoint) or one of the defined named breakpoints\n * @returns {*|null} the breakpoint value or null if nothing was found\n * @throws error if named breakpoint is unknown\n *\n * @example\n * breakpoint-value(\n * {\n * 'small' : 10px,\n * 'medium' : 20px\n * },\n * large\n * )\n * => 20px\n */\nbreakpoint-value($value, $breakpoint='auto')\n\t$breakpoint = to-str($breakpoint)\n\n\tif ($breakpoint != 'auto') and !($breakpoint in $jig---breakpoint-config)\n\t\terror('jig:breakpoint-value | given breakpoint \"'+$breakpoint+'\" not defined')\n\n\tif type($value) == 'object'\n\t\t$res = null\n\n\t\tif $breakpoint == 'auto'\n\t\t\t$breakpoint = get-auto-breakpoint()\n\n\t\tfor $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config\n\t\t\t$breakpoint-value = $value[$breakpoint-name]\n\n\t\t\tif $breakpoint-value != null\n\t\t\t\t$res = $breakpoint-value\n\n\t\t\tif $breakpoint-name == $breakpoint\n\t\t\t\treturn $res\n\n\t\treturn null\n\telse\n\t\treturn $value\n\n\n\n/**\n * @namespace Breakpoints:attributes-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attributes for defined breakpoints.\n *\n * Definitions will be rendered together if possible, minimizing the amount of media queries.\n * However, each call of this mixin will, most likely, render multiple media queries, so keep a close eye\n * on your media query structure to avoid unnecessarily doubled definitions and keep media queries to a minimum.\n * If in doubt, it might be a better idea to write the queries manually, perhaps rather using `[]` or\n * `breakpoint-value` to automatically pull values from breakpoint value hashes.\n *\n * @memberof Breakpoints:attributes-for-breakpoints\n * @function\n * @name attributes-for-breakpoints\n * @alias attributes-for-breakpoints\n *\n * @see attribute-for-breakpoints\n *\n * @param {Hash} $attributes - keys are attribute names, while values are either plain values or hashes with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @example\n * attributes-for-breakpoints(\n * {\n * 'font-size' : 12px,\n * 'line-height' : {\n * 'small' : 1,\n * 'large' : 1.25\n * },\n * 'margin-top' : {\n * 'small' : 10px,\n * 'medium' : 20px\n * }\n * },\n * 2.0\n * )\n */\nattributes-for-breakpoints($attributes, $factor=null)\n\t$attributes-for-breakpoints = {}\n\tfor $attribute-name, $attribute-value in $attributes\n\t\tif type($attribute-value) != 'object'\n\t\t\tif $factor == null\n\t\t\t\t{$attribute-name} $attribute-value\n\t\t\telse\n\t\t\t\t{$attribute-name} ($factor * $attribute-value)\n\t\telse\n\t\t\tfor $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config\n\t\t\t\t$breakpoint-value = $attribute-value[$breakpoint-name]\n\t\t\t\tif ($breakpoint-value != null) or (type($breakpoint-value) == 'call')\n\t\t\t\t\tif !($breakpoint-name in $attributes-for-breakpoints)\n\t\t\t\t\t\t$attributes-for-breakpoints[$breakpoint-name] = {}\n\t\t\t\t\t$attributes-for-breakpoints[$breakpoint-name][$attribute-name] = $breakpoint-value;\n\n\tfor $breakpoint-name, $breakpoint-definition in $jig---breakpoint-config\n\t\t$breakpoint-attributes = $attributes-for-breakpoints[$breakpoint-name]\n\t\tif ($breakpoint-attributes != null) and (length($breakpoint-attributes) > 0)\n\t\t\t+breakpoint($breakpoint-name)\n\t\t\t\tfor $attribute-name, $attribute-value in $breakpoint-attributes\n\t\t\t\t\tif $factor == null\n\t\t\t\t\t\t{$attribute-name} $attribute-value\n\t\t\t\t\telse\n\t\t\t\t\t\t{$attribute-name} ($factor * $attribute-value)\n\n\n\n/**\n * @namespace Breakpoints:attribute-for-breakpoints\n */\n\n/**\n * Renders attribute values for given attribute for defined breakpoints.\n *\n * This is the single attribute version of `attributes-for-breakpoints`.\n * Since this version does not optimize the usage of media queries, please make sure to only use this mixin,\n * if you'll definitely only have one attribute to be defined in multiple breakpoints.\n *\n * @memberof Breakpoints:attribute-for-breakpoints\n * @function\n * @name attribute-for-breakpoints\n * @alias attribute-for-breakpoints\n *\n * @see attributes-for-breakpoints\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * attribute-for-breakpoints(\n * 'line-height',\n * {\n * 'small' : 1,\n * 'large' : 1.25\n * },\n * 1.0\n * )\n */\nattribute-for-breakpoints($attribute, $value, $factor=null)\n\t$attributes = {}\n\t$attributes[to-str($attribute)] = $value\n\tattributes-for-breakpoints($attributes, $factor)\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attributes\n */\n\n/**\n * Use this, if you need to overwrite attribute values previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attributes\n * @function\n * @name overwrite-breakpoint-for-attributes\n * @alias overwrite-breakpoint-for-attributes\n *\n * @param {Hash} $attributes - keys are attribute names, while values are either plain values or hashes with breakpoint name keys, providing different values per breakpoint\n * @param {Number} [$factor=null] - if a float factor is provided all values will be multiplied with this factor\n *\n * @see overwrite-breakpoint-for-attribute\n *\n * @example\n * overwrite-breakpoint-for-attributes(\n * {\n * 'font-size' : 12px,\n * 'line-height' : 1.25\n * 'margin-top' : 20px\n * },\n * 2.0\n * )\n */\noverwrite-breakpoint-for-attributes($attributes, $factor=null)\n\t+breakpoint('overwrite')\n\t\tfor $attribute-name, $attribute-value in $attributes\n\t\t\tif $factor == null\n\t\t\t\t{$attribute-name} $attribute-value\n\t\t\telse\n\t\t\t\t{$attribute-name} ($factor * $attribute-value)\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint-for-attribute\n */\n\n/**\n * Use this, if you need to overwrite an attribut value previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to set a font-size to a static value in an element with a responsive,\n * breakpoint-based font-size definition.\n *\n * @memberof Breakpoints:overwrite-breakpoint-for-attribute\n * @function\n * @name overwrite-breakpoint-for-attribute\n * @alias overwrite-breakpoint-for-attribute\n *\n * @see overwrite-breakpoint-for-attributes\n *\n * @param {String} $attribute - the name of the attribute you want to set\n * @param {*} $value - the value to set the attribute to\n * @param {Number} [$factor=null] - if a float factor is provided the value will be multiplied with this factor\n *\n * @example\n * overwrite-breakpoint-for-attribute(font-size, 12px, 2.0)\n */\noverwrite-breakpoint-for-attribute($attribute, $value, $factor=null)\n\t$attributes = {}\n\t$attributes[to-str($attribute)] = $value\n\toverwrite-breakpoint-for-attributes($attributes, $factor)\n\n\n\n/**\n * @namespace Breakpoints:overwrite-breakpoint\n */\n\n/**\n * Use this, if you need to overwrite something previously defined in (a) breakpoint(s).\n *\n * A use case might be, for example, to redefine something statically in an override situation, which has\n * been defined responsively before.\n *\n * @memberof Breakpoints:overwrite-breakpoint\n * @function\n * @name overwrite-breakpoint\n * @alias overwrite-breakpoint\n *\n * @example\n * +overwrite-breakpoint()\n * font-size 12xp\n * margin-top 20px\n */\noverwrite-breakpoint()\n\t+breakpoint('overwrite')\n\t\t{block}\n","/**\n * @namespace Content\n */\n\n\n\n/**\n * @namespace Content:content-holder\n */\n\n/**\n * Adds properties to the current element, which make it a \"content holder\", meaning, that it\n * adheres to the defined min/max content widths and keeps the content away from the browser edges by\n * defining margins according to the defined responsive content paddings.\n *\n * Min and max widths are only rendered if they are defined in the jig config, as are content paddings.\n *\n * A content holder can be used as the base container definition for non-breakout elements on a page,\n * which is not supposed to grow indefinitely horizontally.\n *\n * A content holder can be a grid container at the same time, these things do not exclude themselves and\n * are even a very common use case.\n *\n * @memberof Content:content-holder\n * @function\n * @name content-holder\n * @alias content-holder\n *\n * @param {Boolean} [$padded=true] - if true, config-defined responsive content padding gets applied to the element\n * @param {Boolean} [$centered=true] - if true, element gets auto-centered using auto margins\n *\n * @example\n * content-holder()\n */\ncontent-holder($padded=true, $centered=false)\n\t$breakpoint-names = keys($jig---breakpoint-config)\n\t$smallest-breakpoint = $breakpoint-names[0]\n\t$largest-breakpoint = last($breakpoint-names)\n\n\t$min-width = content-width-value('min')\n\t$max-width = content-width-value('max')\n\n\tif $min-width != null\n\t\tmin-width ($min-width + (2 * content-padding-value($smallest-breakpoint)))\n\n\tif $max-width != null\n\t\tmax-width ($max-width + (2 * content-padding-value($largest-breakpoint)))\n\n\tif $centered\n\t\tmargin-right auto\n\t\tmargin-left auto\n\n\tif $padded\n\t\t$content-padding = $jig---content-config.padding\n\n\t\tif $content-padding != null\n\t\t\tattributes-for-breakpoints({\n\t\t\t\t'padding-left' : $content-padding,\n\t\t\t\t'padding-right' : $content-padding,\n\t\t\t})\n\n\n\n/**\n * @namespace Content:content-padding-value\n */\n\n/**\n * Returns the defined content padding for a/the current breakpoint.\n *\n * @memberof Content:content-padding-value\n * @function\n * @name content-padding-value\n * @alias content-padding-value\n *\n * @param {String} [$breakpoint='auto'] - a defined breakpoint name or \"auto\", to use the current breakpoint at the point of usage\n * @returns {Number} the determined content padding value\n * @throws error if no content padding value could be determined, based on given breakpoint\n *\n * @example\n * breakpoint(medium)\n * padding-left content-padding-value()\n * margin-right content-padding-value($breakpoint:'small')\n */\ncontent-padding-value($breakpoint='auto')\n\t$padding = $jig---content-config.padding\n\t$res = null\n\n\tif $padding != null\n\t\tif type($padding) == 'object'\n\t\t\t$res = breakpoint-value($padding, $breakpoint)\n\t\telse\n\t\t\t$res = $padding\n\n\tif $res == null\n\t\terror('jig:content-padding-value | could not resolve content padding, check breakpoint')\n\n\treturn $res\n\n\n\n/**\n * @namespace Content:content-width-value\n */\n\n/**\n * Returns the defined min/max content width.\n *\n * @memberof Content:content-width-value\n * @function\n * @name content-width-value\n * @alias content-width-value\n *\n * @param {String} [$min-max='max'] - either \"min\" or \"max\", defines if min or max content-width is returned\n * @param {?Number} [$default=null] - the default value to return if the width definition cannot be found\n * @returns {Number|null} the determined content width value, may be null if width is not defined (depending on default value)\n *\n * @example\n * max-width content-width-value()\n * min-width content-width-value('min', 0)\n */\ncontent-width-value($min-max='max', $default=null)\n\t$width = $jig---content-config.max-width\n\tif $min-max == 'min'\n\t\t$width = $jig---content-config.min-width\n\n\tif $width == null\n\t\t$width = $default\n\n\treturn $width\n\n\n\n/**\n * @namespace Content:base-font-size-value\n */\n\n/**\n * Returns the base font size, which is most likely applied to the html/body elements and acts as the base\n * for rem calculations.\n *\n * @memberof Content:base-font-size-value\n * @function\n * @name base-font-size-value\n * @alias base-font-size-value\n *\n * @returns {Number} the currently set jig base font size value\n *\n * @example\n * font-size base-font-size-value()\n */\nbase-font-size-value()\n\treturn $jig---base-font-size\n"]} \ No newline at end of file diff --git a/docs/examples/index.html b/docs/examples/index.html index 6c4ce0f..09710ce 100644 --- a/docs/examples/index.html +++ b/docs/examples/index.html @@ -82,30 +82,36 @@

Basic Grid

SCSS (Dart Sass)

-
-
-
-
-
-
+
+
+
+
+
+
+
+

SCSS Legacy (LibSass)

-
-
-
-
-
+
+
+
+
+
+
+

Stylus

-
-
-
-
-
+
+
+
+
+
+
+
@@ -122,29 +128,35 @@

Advanced Grid

SCSS (Dart Sass)

-
-
-
-
-
+
+
+
+
+
+
+

SCSS Legacy (LibSass)

-
-
-
-
-
+
+
+
+
+
+
+

Stylus

-
-
-
-
-
+
+
+
+
+
+
+
@@ -160,44 +172,50 @@

Real World Grid

SCSS (Dart Sass)

-
-
-
+
+
+
+
+
+
+
-
-

SCSS Legacy (LibSass)

-
-
-
+
+
+
+
+
+
+
-
-

Stylus

-
-
-
+
+
+
+
+
+
+
-
-
diff --git a/docs/examples/scss-legacy/defines.scss b/docs/examples/scss-legacy/defines.scss index 24efaf2..35da72d 100644 --- a/docs/examples/scss-legacy/defines.scss +++ b/docs/examples/scss-legacy/defines.scss @@ -55,8 +55,8 @@ $JIG_CONFIG: ( 'medium' : 50px, 'xlarge' : 60px ), - 'min-width' : 320px - 2 * 15px, - 'max-width' : 1920px, + 'min-width' : 360px - (2 * 15px), + 'max-width' : 1200px - (2 * 60px), 'base-font-size' : 12px ) ); diff --git a/docs/examples/scss-legacy/examples.scss b/docs/examples/scss-legacy/examples.scss index 559e455..151087e 100644 --- a/docs/examples/scss-legacy/examples.scss +++ b/docs/examples/scss-legacy/examples.scss @@ -46,7 +46,7 @@ border: 3px solid dodgerblue; color: white; - font-size: 1.5rem; + font-size: base-font-size-value() * 1.5; text-shadow: 1px -1px 3px black, 1px 1px 3px black, -1px 1px 3px black, -1px -1px 3px black; background-size: cover; @@ -99,110 +99,116 @@ #basic-grid-example { .examples > .scss-legacy { - @extend %example-grid; + @include content-holder($centered:true); - > div { - &:nth-of-type(odd){ - @include grid-item(6); + > .grid { + @extend %example-grid; - height: 100px; - } - - &:nth-of-type(even){ - @include grid-item(6); - height: 75px; - } - } - - - @include breakpoint(medium up){ > div { - &:nth-of-type(1){ - @include grid-item(4); + &:nth-of-type(odd){ + @include grid-item(6); height: 100px; } - &:nth-of-type(2){ - @include grid-item(4); + &:nth-of-type(even){ + @include grid-item(6); - height: 80px; + height: 75px; } + } - &:nth-of-type(3){ - @include grid-item(4); - height: 60px; - } - &:nth-of-type(4){ - @include grid-item(4); + @include breakpoint(medium up){ + > div { + &:nth-of-type(1){ + @include grid-item(4); - height: 40px; - } + height: 100px; + } - &:nth-of-type(5){ - @include grid-item(4); + &:nth-of-type(2){ + @include grid-item(4); + + height: 80px; + } - height: 20px; + &:nth-of-type(3){ + @include grid-item(4); + + height: 60px; + } + + &:nth-of-type(4){ + @include grid-item(4); + + height: 40px; + } + + &:nth-of-type(5){ + @include grid-item(4); + + height: 20px; + } } } - } - @include breakpoint(medium down){ - > div { - &:nth-of-type(3){ - border-color: aqua; + @include breakpoint(medium down){ + > div { + &:nth-of-type(3){ + border-color: aqua; - background-color: aqua; - background-image: url('../files/img/block-6.jpg'); + background-color: aqua; + background-image: url('../files/img/block-6.jpg'); + } } } - } - @include breakpoint(large){ - > div { - &:nth-of-type(1){ - @include grid-item(); + @include breakpoint(large){ + > div { + &:nth-of-type(1){ + @include grid-item(); - height: 25vh; - } + height: 25vh; + } - &:nth-of-type(2){ - @include grid-item(6); + &:nth-of-type(2){ + @include grid-item(6); - height: 12.5vh; - } + height: 12.5vh; + } - &:nth-of-type(3){ - @include grid-item(6); - @include grid-item-align($vertical:bottom); + &:nth-of-type(3){ + @include grid-item(6); + @include grid-item-align($vertical:bottom); - height: 10vh; - } + height: 10vh; + } - &:nth-of-type(4){ - @include grid-item(4); - @include grid-item-align(center, center); - order: 2; + &:nth-of-type(4){ + @include grid-item(4); + @include grid-item-align(center, center); + order: 2; - width: 100px; - height: 5vh; - } + width: 100px; + height: 5vh; + } - &:nth-of-type(5){ - @include grid-item(4); - order: 1; + &:nth-of-type(5){ + @include grid-item(4); + order: 1; - height: 10vh; + height: 10vh; + } } } } @@ -213,154 +219,160 @@ #advanced-grid-example { .examples > .scss-legacy { - @extend %example-grid; + @include content-holder($centered:true); - @include spacing-based-attribute(padding-top, 'xxl'); + > .grid { + @extend %example-grid; - > div { - &:nth-of-type(odd){ - @include grid-item(4); - @include grid-item-align(null, end); + @include spacing-based-attribute(padding-top, 'xxl'); - height: gutter-value(2.5, $direction:'vertical'); - } - &:nth-of-type(even){ - @include grid-item(4); - height: 75px; - } + > div { + &:nth-of-type(odd){ + @include grid-item(4); + @include grid-item-align(null, end); - &:first-of-type { - @include grid-item($span:4, $row-span:2); - @include grid-item-align($vertical:full); + height: gutter-value(2.5, $direction:'vertical'); + } + + &:nth-of-type(even){ + @include grid-item(4); - height: auto; + height: 75px; + } + + &:first-of-type { + @include grid-item($span:4, $row-span:2); + @include grid-item-align($vertical:full); + + height: auto; + } } - } - @include breakpoint(xsmall only){ - > div { - &:nth-of-type(3){ - border-color: aqua; + @include breakpoint(xsmall only){ + > div { + &:nth-of-type(3){ + border-color: aqua; - background-color: aqua; - background-image: url('../files/img/block-6.jpg'); + background-color: aqua; + background-image: url('../files/img/block-6.jpg'); + } } } - } - @include breakpoint(medium){ - > div { - &:nth-of-type(1){ - @include grid-item(4); - order: 5; + @include breakpoint(medium){ + > div { + &:nth-of-type(1){ + @include grid-item(4); + order: 5; - width: 50%; - height: gutter-value(3.0); - } + width: 50%; + height: gutter-value(3.0); + } - &:nth-of-type(2){ - @include grid-item($start:8, $end:12); - order: 4; + &:nth-of-type(2){ + @include grid-item($start:8, $end:12); + order: 4; - height: 80px; - } + height: 80px; + } - &:nth-of-type(3){ - @include grid-item($start:6, $span:2); - @include grid-item-align(full, center); - order: 3; + &:nth-of-type(3){ + @include grid-item($start:6, $span:2); + @include grid-item-align(full, center); + order: 3; - height: 60px; - } + height: 60px; + } - &:nth-of-type(4){ - @include grid-item(8, $row-start:1, $row-end:3); - @include grid-item-align('right', $vertical:'full'); - order: 2; + &:nth-of-type(4){ + @include grid-item(8, $row-start:1, $row-end:3); + @include grid-item-align('right', $vertical:'full'); + order: 2; - width: 50%; - height: auto; - } + width: 50%; + height: auto; + } - &:nth-of-type(5){ - @include grid-item(4); - @include grid-item-align(left, top); - order: 1; - z-index: 1; + &:nth-of-type(5){ + @include grid-item(4); + @include grid-item-align(left, top); + order: 1; + z-index: 1; - width: 200%; - height: 55px; + width: 200%; + height: 55px; - border-color: red; + border-color: red; - background-color: red; - background-image: url('../files/img/block-7.jpg'); + background-color: red; + background-image: url('../files/img/block-7.jpg'); - transform: rotate(10deg); + transform: rotate(10deg); + } } } - } - @include breakpoint(large){ - > div { - &:nth-of-type(1){ - @include grid-item($start:0, $span:4, $row-start:0, $row-span:1); - @include grid-item-align($vertical:full); - order: 1; + @include breakpoint(large){ + > div { + &:nth-of-type(1){ + @include grid-item($start:0, $span:4, $row-start:0, $row-span:1); + @include grid-item-align($vertical:full); + order: 1; - width: auto; - height: 10vh; - } + width: auto; + height: 10vh; + } - &:nth-of-type(2){ - @include grid-item($start:4, $end:8, $row-start:0, $row-span:2); - @include grid-item-align($vertical:full); - order: 2; + &:nth-of-type(2){ + @include grid-item($start:4, $end:8, $row-start:0, $row-span:2); + @include grid-item-align($vertical:full); + order: 2; - height: auto; - } + height: auto; + } - &:nth-of-type(3){ - @include grid-item($start:8, $span:4, $row-start:0, $row-span:3); - @include grid-item-align($vertical:full); - order: 3; + &:nth-of-type(3){ + @include grid-item($start:8, $span:4, $row-start:0, $row-span:3); + @include grid-item-align($vertical:full); + order: 3; - height: auto; - } + height: auto; + } - &:nth-of-type(4){ - @include grid-item($start:0, $span:4, $row-start:1, $row-end:2); - @include grid-item-align(right, center); - order: 4; + &:nth-of-type(4){ + @include grid-item($start:0, $span:4, $row-start:1, $row-end:2); + @include grid-item-align(right, center); + order: 4; - width: 100px; - height: 10vh; - } + width: 100px; + height: 10vh; + } - &:nth-of-type(5){ - @include grid-item(6); - @include grid-item-align(stretch); - order: 5; + &:nth-of-type(5){ + @include grid-item(6); + @include grid-item-align(stretch); + order: 5; - width: auto; - height: 20vh; + width: auto; + height: 20vh; - border-color: dodgerblue; + border-color: dodgerblue; - background-color: dodgerblue; - background-image: url('../files/img/block-8.jpg'); + background-color: dodgerblue; + background-image: url('../files/img/block-8.jpg'); - transform: rotate(0deg); + transform: rotate(0deg); + } } } } @@ -371,181 +383,187 @@ #real-world-grid-example { .examples > .scss-legacy { - @extend %example-grid; + @include content-holder($centered:true); - > div { - &:nth-of-type(1){ - &:before { - content: 'Stage'; - } - - @include grid-item(12); - order: 1; - - @include spacing-based-attribute('height', 'xxl', 3.0); + > .grid { + @extend %example-grid; - margin: gutter-value(-1.0); - margin-bottom: 0; - - @include breakpoint(medium){ - margin: gutter-value(-1.0); - margin-bottom: gutter-value(-3, $direction:vertical); - } - @include breakpoint(large){ - margin: gutter-value(-1.0); - margin-bottom: gutter-value(-3, $direction:vertical); - } - } + > div { + &:nth-of-type(1){ + &:before { + content: 'Stage'; + } + @include grid-item(12); + order: 1; - &:nth-of-type(2){ - &:before { - content: 'Navbar'; - } + @include spacing-based-attribute('height', 'xxl', 3.0); - @include grid-item(12); - order: 2; + margin: gutter-value(-1.0); + margin-bottom: 0; - @include breakpoint(medium){ - @include grid-item(4, $row-span:2); - order: 3; - } + @include breakpoint(medium){ + margin: gutter-value(-1.0); + margin-bottom: gutter-value(-3, $direction:vertical); + } - @include breakpoint(large){ - @include grid-item(3); + @include breakpoint(large){ + margin: gutter-value(-1.0); + margin-bottom: gutter-value(-3, $direction:vertical); + } } - } - &:nth-of-type(3){ - @include grid-item(); - order: 2; - @include grid-container(); - - > div { - &:nth-of-type(1){ - &:before { - content: 'Text'; - } - - @include grid-item(12); - - height: spacing-value('md') * 10; + &:nth-of-type(2){ + &:before { + content: 'Navbar'; } - &:nth-of-type(2), - &:nth-of-type(3), - &:nth-of-type(4){ - &:before { - content: 'Teaser'; - } - - @include grid-item(12); + @include grid-item(12); + order: 2; - height: 100px; + @include breakpoint(medium){ + @include grid-item(4, $row-span:2); + order: 3; } - &:nth-of-type(3), - &:nth-of-type(4){ - margin-top: gutter-value(-1, $direction:vertical); + @include breakpoint(large){ + @include grid-item(3); } } + &:nth-of-type(3){ + @include grid-item(); + order: 2; - @include breakpoint(medium){ - @include grid-item($start:0, $span:8); + @include grid-container(); > div { &:nth-of-type(1){ - height: spacing-value('md') * 7; + &:before { + content: 'Text'; + } + + @include grid-item(12); + + height: spacing-value('md') * 10; } &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4){ - @include grid-item(4); + &:before { + content: 'Teaser'; + } + + @include grid-item(12); - height: 75px; + height: 100px; } &:nth-of-type(3), &:nth-of-type(4){ - margin-top: 0; + margin-top: gutter-value(-1, $direction:vertical); } } - } - @include breakpoint(large){ - @include grid-item(9); + @include breakpoint(medium){ + @include grid-item($start:0, $span:8); - > div { - &:nth-of-type(1){ - height: spacing-value('md') * 5; - } + > div { + &:nth-of-type(1){ + height: spacing-value('md') * 7; + } - &:nth-of-type(2), - &:nth-of-type(3), - &:nth-of-type(4){ - height: auto; + &:nth-of-type(2), + &:nth-of-type(3), + &:nth-of-type(4){ + @include grid-item(4); + + height: 75px; + } + + &:nth-of-type(3), + &:nth-of-type(4){ + margin-top: 0; + } } } - } - } - &:nth-of-type(4){ - &:before { - content: 'Hint'; + @include breakpoint(large){ + @include grid-item(9); + + > div { + &:nth-of-type(1){ + height: spacing-value('md') * 5; + } + + &:nth-of-type(2), + &:nth-of-type(3), + &:nth-of-type(4){ + height: auto; + } + } + } } - @include grid-item($start:1, $end:11); - order: 4; - margin-top: gutter-value(-0.5, $direction:'vertical'); - @include breakpoint(medium){ - @include grid-item(8, $start:0); - } + &:nth-of-type(4){ + &:before { + content: 'Hint'; + } - @include breakpoint(large){ - @include grid-item($start:3, $span:6); - } - } + @include grid-item($start:1, $end:11); + order: 4; + margin-top: gutter-value(-0.5, $direction:'vertical'); + @include breakpoint(medium){ + @include grid-item(8, $start:0); + } - &:nth-of-type(5){ - &:before { - content: 'Footer'; + @include breakpoint(large){ + @include grid-item($start:3, $span:6); + } } - @include grid-item(12); - order: 5; - @include spacing-based-attributes(( - 'padding-top' : 'md', - 'padding-bottom' : 'xl' - )); - margin: gutter-value(-1); - margin-top: gutter-value(1, $direction:vertical); - @include breakpoint(medium){ - margin: gutter-value(-1); - margin-top: gutter-value(2, $direction:vertical); - } + &:nth-of-type(5){ + &:before { + content: 'Footer'; + } - @include breakpoint(large){ + @include grid-item(12); + order: 5; + + @include spacing-based-attributes(( + 'padding-top' : 'md', + 'padding-bottom' : 'xl' + )); margin: gutter-value(-1); - margin-top: gutter-value(2.5, $direction:vertical); + margin-top: gutter-value(1, $direction:vertical); + + @include breakpoint(medium){ + margin: gutter-value(-1); + margin-top: gutter-value(2, $direction:vertical); + } + + @include breakpoint(large){ + margin: gutter-value(-1); + margin-top: gutter-value(2.5, $direction:vertical); + } } } } diff --git a/docs/examples/scss/defines.scss b/docs/examples/scss/defines.scss index 24efaf2..35da72d 100644 --- a/docs/examples/scss/defines.scss +++ b/docs/examples/scss/defines.scss @@ -55,8 +55,8 @@ $JIG_CONFIG: ( 'medium' : 50px, 'xlarge' : 60px ), - 'min-width' : 320px - 2 * 15px, - 'max-width' : 1920px, + 'min-width' : 360px - (2 * 15px), + 'max-width' : 1200px - (2 * 60px), 'base-font-size' : 12px ) ); diff --git a/docs/examples/scss/examples.scss b/docs/examples/scss/examples.scss index 004436e..4d7de22 100644 --- a/docs/examples/scss/examples.scss +++ b/docs/examples/scss/examples.scss @@ -52,7 +52,7 @@ border: 3px solid dodgerblue; color: white; - font-size: 1.5rem; + font-size: base-font-size-value() * 1.5; text-shadow: 1px -1px 3px black, 1px 1px 3px black, -1px 1px 3px black, -1px -1px 3px black; background-size: cover; @@ -105,110 +105,116 @@ #basic-grid-example { .examples > .scss { - @extend %example-grid; + @include content-holder($centered:true); - > div { - &:nth-of-type(odd){ - @include grid-item(6); + > .grid { + @extend %example-grid; - height: 100px; - } - - &:nth-of-type(even){ - @include grid-item(6); - height: 75px; - } - } - - - @include breakpoint(medium up){ > div { - &:nth-of-type(1){ - @include grid-item(4); + &:nth-of-type(odd){ + @include grid-item(6); height: 100px; } - &:nth-of-type(2){ - @include grid-item(4); + &:nth-of-type(even){ + @include grid-item(6); - height: 80px; + height: 75px; } + } - &:nth-of-type(3){ - @include grid-item(4); - height: 60px; - } - &:nth-of-type(4){ - @include grid-item(4); + @include breakpoint(medium up){ + > div { + &:nth-of-type(1){ + @include grid-item(4); - height: 40px; - } + height: 100px; + } - &:nth-of-type(5){ - @include grid-item(4); + &:nth-of-type(2){ + @include grid-item(4); + + height: 80px; + } - height: 20px; + &:nth-of-type(3){ + @include grid-item(4); + + height: 60px; + } + + &:nth-of-type(4){ + @include grid-item(4); + + height: 40px; + } + + &:nth-of-type(5){ + @include grid-item(4); + + height: 20px; + } } } - } - @include breakpoint(medium down){ - > div { - &:nth-of-type(3){ - border-color: aqua; + @include breakpoint(medium down){ + > div { + &:nth-of-type(3){ + border-color: aqua; - background-color: aqua; - background-image: url('../files/img/block-6.jpg'); + background-color: aqua; + background-image: url('../files/img/block-6.jpg'); + } } } - } - @include breakpoint(large){ - > div { - &:nth-of-type(1){ - @include grid-item(); + @include breakpoint(large){ + > div { + &:nth-of-type(1){ + @include grid-item(); - height: 25vh; - } + height: 25vh; + } - &:nth-of-type(2){ - @include grid-item(6); + &:nth-of-type(2){ + @include grid-item(6); - height: 12.5vh; - } + height: 12.5vh; + } - &:nth-of-type(3){ - @include grid-item(6); - @include grid-item-align($vertical:bottom); + &:nth-of-type(3){ + @include grid-item(6); + @include grid-item-align($vertical:bottom); - height: 10vh; - } + height: 10vh; + } - &:nth-of-type(4){ - @include grid-item(4); - @include grid-item-align(center, center); - order: 2; + &:nth-of-type(4){ + @include grid-item(4); + @include grid-item-align(center, center); + order: 2; - width: 100px; - height: 5vh; - } + width: 100px; + height: 5vh; + } - &:nth-of-type(5){ - @include grid-item(4); - order: 1; + &:nth-of-type(5){ + @include grid-item(4); + order: 1; - height: 10vh; + height: 10vh; + } } } } @@ -219,154 +225,160 @@ #advanced-grid-example { .examples > .scss { - @extend %example-grid; + @include content-holder($centered:true); - @include spacing-based-attribute(padding-top, 'xxl'); + > .grid { + @extend %example-grid; - > div { - &:nth-of-type(odd){ - @include grid-item(4); - @include grid-item-align(null, end); + @include spacing-based-attribute(padding-top, 'xxl'); - height: gutter-value(2.5, $direction:'vertical'); - } - &:nth-of-type(even){ - @include grid-item(4); - height: 75px; - } + > div { + &:nth-of-type(odd){ + @include grid-item(4); + @include grid-item-align(null, end); - &:first-of-type { - @include grid-item($span:4, $row-span:2); - @include grid-item-align($vertical:full); + height: gutter-value(2.5, $direction:'vertical'); + } - height: auto; + &:nth-of-type(even){ + @include grid-item(4); + + height: 75px; + } + + &:first-of-type { + @include grid-item($span:4, $row-span:2); + @include grid-item-align($vertical:full); + + height: auto; + } } - } - @include breakpoint(xsmall only){ - > div { - &:nth-of-type(3){ - border-color: aqua; + @include breakpoint(xsmall only){ + > div { + &:nth-of-type(3){ + border-color: aqua; - background-color: aqua; - background-image: url('../files/img/block-6.jpg'); + background-color: aqua; + background-image: url('../files/img/block-6.jpg'); + } } } - } - @include breakpoint(medium){ - > div { - &:nth-of-type(1){ - @include grid-item(4); - order: 5; + @include breakpoint(medium){ + > div { + &:nth-of-type(1){ + @include grid-item(4); + order: 5; - width: 50%; - height: gutter-value(3.0); - } + width: 50%; + height: gutter-value(3.0); + } - &:nth-of-type(2){ - @include grid-item($start:8, $end:12); - order: 4; + &:nth-of-type(2){ + @include grid-item($start:8, $end:12); + order: 4; - height: 80px; - } + height: 80px; + } - &:nth-of-type(3){ - @include grid-item($start:6, $span:2); - @include grid-item-align(full, center); - order: 3; + &:nth-of-type(3){ + @include grid-item($start:6, $span:2); + @include grid-item-align(full, center); + order: 3; - height: 60px; - } + height: 60px; + } - &:nth-of-type(4){ - @include grid-item(8, $row-start:1, $row-end:3); - @include grid-item-align('right', $vertical:'full'); - order: 2; + &:nth-of-type(4){ + @include grid-item(8, $row-start:1, $row-end:3); + @include grid-item-align('right', $vertical:'full'); + order: 2; - width: 50%; - height: auto; - } + width: 50%; + height: auto; + } - &:nth-of-type(5){ - @include grid-item(4); - @include grid-item-align(left, top); - order: 1; - z-index: 1; + &:nth-of-type(5){ + @include grid-item(4); + @include grid-item-align(left, top); + order: 1; + z-index: 1; - width: 200%; - height: 55px; + width: 200%; + height: 55px; - border-color: red; + border-color: red; - background-color: red; - background-image: url('../files/img/block-7.jpg'); + background-color: red; + background-image: url('../files/img/block-7.jpg'); - transform: rotate(10deg); + transform: rotate(10deg); + } } } - } - @include breakpoint(large){ - > div { - &:nth-of-type(1){ - @include grid-item($start:0, $span:4, $row-start:0, $row-span:1); - @include grid-item-align($vertical:full); - order: 1; + @include breakpoint(large){ + > div { + &:nth-of-type(1){ + @include grid-item($start:0, $span:4, $row-start:0, $row-span:1); + @include grid-item-align($vertical:full); + order: 1; - width: auto; - height: 10vh; - } + width: auto; + height: 10vh; + } - &:nth-of-type(2){ - @include grid-item($start:4, $end:8, $row-start:0, $row-span:2); - @include grid-item-align($vertical:full); - order: 2; + &:nth-of-type(2){ + @include grid-item($start:4, $end:8, $row-start:0, $row-span:2); + @include grid-item-align($vertical:full); + order: 2; - height: auto; - } + height: auto; + } - &:nth-of-type(3){ - @include grid-item($start:8, $span:4, $row-start:0, $row-span:3); - @include grid-item-align($vertical:full); - order: 3; + &:nth-of-type(3){ + @include grid-item($start:8, $span:4, $row-start:0, $row-span:3); + @include grid-item-align($vertical:full); + order: 3; - height: auto; - } + height: auto; + } - &:nth-of-type(4){ - @include grid-item($start:0, $span:4, $row-start:1, $row-end:2); - @include grid-item-align(right, center); - order: 4; + &:nth-of-type(4){ + @include grid-item($start:0, $span:4, $row-start:1, $row-end:2); + @include grid-item-align(right, center); + order: 4; - width: 100px; - height: 10vh; - } + width: 100px; + height: 10vh; + } - &:nth-of-type(5){ - @include grid-item(6); - @include grid-item-align(stretch); - order: 5; + &:nth-of-type(5){ + @include grid-item(6); + @include grid-item-align(stretch); + order: 5; - width: auto; - height: 20vh; + width: auto; + height: 20vh; - border-color: dodgerblue; + border-color: dodgerblue; - background-color: dodgerblue; - background-image: url('../files/img/block-8.jpg'); + background-color: dodgerblue; + background-image: url('../files/img/block-8.jpg'); - transform: rotate(0deg); + transform: rotate(0deg); + } } } } @@ -377,182 +389,188 @@ #real-world-grid-example { .examples > .scss { - @extend %example-grid; + @include content-holder($centered:true); - > div { - &:nth-of-type(1){ - &:before { - content: 'Stage'; - } + > .grid { + @extend %example-grid; - @include grid-item(12); - order: 1; - @include spacing-based-attribute('height', 'xxl', 3.0); - - margin: gutter-value(-1.0); - margin-bottom: 0; - - @include breakpoint(medium){ - margin: gutter-value(-1.0); - margin-bottom: gutter-value(-3, $direction:vertical); - } - - @include breakpoint(large){ - margin: gutter-value(-1.0); - margin-bottom: gutter-value(-3, $direction:vertical); - } - } + > div { + &:nth-of-type(1){ + &:before { + content: 'Stage'; + } + @include grid-item(12); + order: 1; - &:nth-of-type(2){ - &:before { - content: 'Navbar'; - } + @include spacing-based-attribute('height', 'xxl', 3.0); - @include grid-item(12); - order: 2; + margin: gutter-value(-1.0); + margin-bottom: 0; - @include breakpoint(medium){ - @include grid-item(4, $row-span:2); - order: 3; - } + @include breakpoint(medium){ + margin: gutter-value(-1.0); + margin-bottom: gutter-value(-3, $direction:vertical); + } - @include breakpoint(large){ - @include grid-item(3); + @include breakpoint(large){ + margin: gutter-value(-1.0); + margin-bottom: gutter-value(-3, $direction:vertical); + } } - } - - &:nth-of-type(3){ - @include grid-item(); - order: 2; - @include grid-container(); - - > div { - &:nth-of-type(1){ - &:before { - content: 'Text'; - } - - @include grid-item(12); - - height: spacing-value('md') * 10; + &:nth-of-type(2){ + &:before { + content: 'Navbar'; } - &:nth-of-type(2), - &:nth-of-type(3), - &:nth-of-type(4){ - &:before { - content: 'Teaser'; - } - - @include grid-item(12); + @include grid-item(12); + order: 2; - height: 100px; + @include breakpoint(medium){ + @include grid-item(4, $row-span:2); + order: 3; } - &:nth-of-type(3), - &:nth-of-type(4){ - margin-top: gutter-value(-1, $direction:vertical); + @include breakpoint(large){ + @include grid-item(3); } } - @include breakpoint(medium){ - @include grid-item($start:0, $span:8); + &:nth-of-type(3){ + @include grid-item(); + order: 2; + + @include grid-container(); > div { &:nth-of-type(1){ - height: spacing-value('md') * 7; + &:before { + content: 'Text'; + } + + @include grid-item(12); + + height: spacing-value('md') * 10; } &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4){ - @include grid-item(4); + &:before { + content: 'Teaser'; + } + + @include grid-item(12); - height: 75px; + height: 100px; } &:nth-of-type(3), &:nth-of-type(4){ - margin-top: 0; + margin-top: gutter-value(-1, $direction:vertical); } } - } - @include breakpoint(large){ - @include grid-item(9); + @include breakpoint(medium){ + @include grid-item($start:0, $span:8); - > div { - &:nth-of-type(1){ - height: spacing-value('md') * 5; - } + > div { + &:nth-of-type(1){ + height: spacing-value('md') * 7; + } - &:nth-of-type(2), - &:nth-of-type(3), - &:nth-of-type(4){ - height: auto; + &:nth-of-type(2), + &:nth-of-type(3), + &:nth-of-type(4){ + @include grid-item(4); + + height: 75px; + } + + &:nth-of-type(3), + &:nth-of-type(4){ + margin-top: 0; + } } } - } - } - &:nth-of-type(4){ - &:before { - content: 'Hint'; + @include breakpoint(large){ + @include grid-item(9); + + > div { + &:nth-of-type(1){ + height: spacing-value('md') * 5; + } + + &:nth-of-type(2), + &:nth-of-type(3), + &:nth-of-type(4){ + height: auto; + } + } + } } - @include grid-item($start:1, $end:11); - order: 4; - margin-top: gutter-value(-0.5, $direction:'vertical'); - @include breakpoint(medium){ - @include grid-item(8, $start:0); - } + &:nth-of-type(4){ + &:before { + content: 'Hint'; + } - @include breakpoint(large){ - @include grid-item($start:3, $span:6); - } - } + @include grid-item($start:1, $end:11); + order: 4; + margin-top: gutter-value(-0.5, $direction:'vertical'); + @include breakpoint(medium){ + @include grid-item(8, $start:0); + } - &:nth-of-type(5){ - &:before { - content: 'Footer'; + @include breakpoint(large){ + @include grid-item($start:3, $span:6); + } } - @include grid-item(12); - order: 5; - @include spacing-based-attributes(( - 'padding-top' : 'md', - 'padding-bottom' : 'xl' - )); - margin: gutter-value(-1); - margin-top: gutter-value(1, $direction:vertical); - @include breakpoint(medium){ - margin: gutter-value(-1); - margin-top: gutter-value(2, $direction:vertical); - } + &:nth-of-type(5){ + &:before { + content: 'Footer'; + } - @include breakpoint(large){ + @include grid-item(12); + order: 5; + + @include spacing-based-attributes(( + 'padding-top' : 'md', + 'padding-bottom' : 'xl' + )); margin: gutter-value(-1); - margin-top: gutter-value(2.5, $direction:vertical); + margin-top: gutter-value(1, $direction:vertical); + + @include breakpoint(medium){ + margin: gutter-value(-1); + margin-top: gutter-value(2, $direction:vertical); + } + + @include breakpoint(large){ + margin: gutter-value(-1); + margin-top: gutter-value(2.5, $direction:vertical); + } } } } diff --git a/docs/examples/stylus/defines.styl b/docs/examples/stylus/defines.styl index cb3bfdc..52b8a28 100644 --- a/docs/examples/stylus/defines.styl +++ b/docs/examples/stylus/defines.styl @@ -55,8 +55,8 @@ $JIG_CONFIG = { 'large' : 50px, 'xlarge' : 60px }, - 'min-width' : 320px - 2 * 15px, - 'max-width' : 1920px, + 'min-width' : 360px - (2 * 15px), + 'max-width' : 1200px - (2 * 60px), 'base-font-size' : 12px } } diff --git a/docs/examples/stylus/examples.styl b/docs/examples/stylus/examples.styl index 76f1994..d7ecbd4 100644 --- a/docs/examples/stylus/examples.styl +++ b/docs/examples/stylus/examples.styl @@ -44,7 +44,7 @@ $example-grid border 3px solid dodgerblue color white - font-size 1.5rem + font-size base-font-size-value() * 1.5 text-shadow 1px -1px 3px black, 1px 1px 3px black, -1px 1px 3px black, -1px -1px 3px black background-size cover @@ -87,381 +87,396 @@ $example-grid #basic-grid-example .examples > .stylus - @extend $example-grid + content-holder($centered:true) - > div - &:nth-of-type(odd) - grid-item(6) - - height 100px - - &:nth-of-type(even) - grid-item(6) + > .grid + @extend $example-grid - height 75px - - +breakpoint(medium up) > div - &:nth-of-type(1) - grid-item(4) + &:nth-of-type(odd) + grid-item(6) height 100px - &:nth-of-type(2) - grid-item(4) + &:nth-of-type(even) + grid-item(6) - height 80px + height 75px - &:nth-of-type(3) - grid-item(4) - height 60px - &:nth-of-type(4) - grid-item(4) + +breakpoint(medium up) + > div + &:nth-of-type(1) + grid-item(4) - height 40px + height 100px - &:nth-of-type(5) - grid-item(4) + &:nth-of-type(2) + grid-item(4) - height 20px + height 80px + &:nth-of-type(3) + grid-item(4) + height 60px - +breakpoint(medium down) - > div - &:nth-of-type(3) - border-color aqua + &:nth-of-type(4) + grid-item(4) - background-color aqua - background-image url('../files/img/block-6.jpg') + height 40px + &:nth-of-type(5) + grid-item(4) + height 20px - +breakpoint(large) - > div - &:nth-of-type(1) - grid-item() - height 25vh - &:nth-of-type(2) - grid-item(6) + +breakpoint(medium down) + > div + &:nth-of-type(3) + border-color aqua - height 12.5vh + background-color aqua + background-image url('../files/img/block-6.jpg') - &:nth-of-type(3) - grid-item(6) - grid-item-align($vertical:bottom) - height 10vh - &:nth-of-type(4) - grid-item(4) - grid-item-align(center, center) - order 2 + +breakpoint(large) + > div + &:nth-of-type(1) + grid-item() - width 100px - height 5vh + height 25vh - &:nth-of-type(5) - grid-item(4) - order 1 + &:nth-of-type(2) + grid-item(6) - height 10vh + height 12.5vh + &:nth-of-type(3) + grid-item(6) + grid-item-align($vertical:bottom) + height 10vh -#advanced-grid-example - .examples > .stylus - @extend $example-grid + &:nth-of-type(4) + grid-item(4) + grid-item-align(center, center) + order 2 - spacing-based-attribute(padding-top, 'xxl') + width 100px + height 5vh + &:nth-of-type(5) + grid-item(4) + order 1 + height 10vh - > div - &:nth-of-type(odd) - grid-item(4) - grid-item-align(null, end) - height gutter-value(2.5, $direction:'vertical') - &:nth-of-type(even) - grid-item(4) +#advanced-grid-example + .examples > .stylus + content-holder($centered:true) - height 75px - &:first-of-type - grid-item($span:4, $row-span:2) - grid-item-align($vertical:full) - height auto + > .grid + @extend $example-grid + + spacing-based-attribute(padding-top, 'xxl') - +breakpoint(xsmall only) > div - &:nth-of-type(3) - border-color aqua + &:nth-of-type(odd) + grid-item(4) + grid-item-align(null, end) - background-color aqua - background-image url('../files/img/block-6.jpg') + height gutter-value(2.5, $direction:'vertical') + &:nth-of-type(even) + grid-item(4) + height 75px - set-auto-breakpoint(medium) - +breakpoint(medium) - > div - &:nth-of-type(1) - grid-item(4) - order 5 + &:first-of-type + grid-item($span:4, $row-span:2) + grid-item-align($vertical:full) - width 50% - height gutter-value(3.0) + height auto - &:nth-of-type(2) - grid-item($start:8, $end:12) - order 4 - height 80px - &:nth-of-type(3) - grid-item($start:6, $span:2) - grid-item-align(full, center) - order 3 + +breakpoint(xsmall only) + > div + &:nth-of-type(3) + border-color aqua - height 60px + background-color aqua + background-image url('../files/img/block-6.jpg') - &:nth-of-type(4) - grid-item(8, $row-start:1, $row-end:3) - grid-item-align('right', $vertical:'full') - order 2 - width 50% - height auto - &:nth-of-type(5) - grid-item(4) - grid-item-align(left, top) - order 1 - z-index 1 + set-auto-breakpoint(medium) + +breakpoint(medium) + > div + &:nth-of-type(1) + grid-item(4) + order 5 - width 200% - height 55px + width 50% + height gutter-value(3.0) - border-color red + &:nth-of-type(2) + grid-item($start:8, $end:12) + order 4 - background-color red - background-image url('../files/img/block-7.jpg') + height 80px - transform rotate(10deg) + &:nth-of-type(3) + grid-item($start:6, $span:2) + grid-item-align(full, center) + order 3 + height 60px + &:nth-of-type(4) + grid-item(8, $row-start:1, $row-end:3) + grid-item-align('right', $vertical:'full') + order 2 - +breakpoint(large) - > div - &:nth-of-type(1) - grid-item($start:0, $span:4, $row-start:0, $row-span:1) - grid-item-align($vertical:full) - order 1 + width 50% + height auto - width auto - height 10vh + &:nth-of-type(5) + grid-item(4) + grid-item-align(left, top) + order 1 + z-index 1 - &:nth-of-type(2) - grid-item($start:4, $end:8, $row-start:0, $row-span:2) - grid-item-align($vertical:full) - order 2 + width 200% + height 55px - height auto + border-color red - &:nth-of-type(3) - grid-item($start:8, $span:4, $row-start:0, $row-span:3) - grid-item-align($vertical:full) - order 3 + background-color red + background-image url('../files/img/block-7.jpg') - height auto + transform rotate(10deg) - &:nth-of-type(4) - grid-item($start:0, $span:4, $row-start:1, $row-end:2) - grid-item-align(right, center) - order 4 - width 100px - height 10vh - &:nth-of-type(5) - grid-item(6) - grid-item-align(stretch) - order 5 + +breakpoint(large) + > div + &:nth-of-type(1) + grid-item($start:0, $span:4, $row-start:0, $row-span:1) + grid-item-align($vertical:full) + order 1 - width auto - height 20vh + width auto + height 10vh - border-color dodgerblue + &:nth-of-type(2) + grid-item($start:4, $end:8, $row-start:0, $row-span:2) + grid-item-align($vertical:full) + order 2 - background-color dodgerblue - background-image url('../files/img/block-8.jpg') + height auto - transform rotate(0deg) + &:nth-of-type(3) + grid-item($start:8, $span:4, $row-start:0, $row-span:3) + grid-item-align($vertical:full) + order 3 + height auto + &:nth-of-type(4) + grid-item($start:0, $span:4, $row-start:1, $row-end:2) + grid-item-align(right, center) + order 4 -#real-world-grid-example - .examples > .stylus - @extend $example-grid + width 100px + height 10vh + &:nth-of-type(5) + grid-item(6) + grid-item-align(stretch) + order 5 + width auto + height 20vh - > div - &:nth-of-type(1) - &:before - content 'Stage' + border-color dodgerblue - grid-item(12) - order 1 + background-color dodgerblue + background-image url('../files/img/block-8.jpg') - spacing-based-attribute('height', 'xxl', 3.0) + transform rotate(0deg) - margin gutter-value(-1.0) - margin-bottom 0 - +breakpoint(medium) - margin gutter-value(-1.0, $breakpoint:medium) - margin-bottom gutter-value(-3, $breakpoint:medium, $direction:vertical) - set-auto-breakpoint(large) - +breakpoint(large) - margin gutter-value(-1.0) - margin-bottom gutter-value(-3, $direction:vertical) +#real-world-grid-example + .examples > .stylus + content-holder($centered:true) - &:nth-of-type(2) - &:before - content 'Navbar' + > .grid + @extend $example-grid - grid-item(12) - order 2 - +breakpoint(medium) - grid-item(4, $row-span:2) - order 3 - +breakpoint(large) - grid-item(3) + > div + &:nth-of-type(1) + &:before + content 'Stage' + grid-item(12) + order 1 + spacing-based-attribute('height', 'xxl', 3.0) - &:nth-of-type(3) - grid-item() - order 2 + margin gutter-value(-1.0) + margin-bottom 0 - grid-container() + +breakpoint(medium) + margin gutter-value(-1.0, $breakpoint:medium) + margin-bottom gutter-value(-3, $breakpoint:medium, $direction:vertical) - > div - &:nth-of-type(1) - &:before - content 'Text' + set-auto-breakpoint(large) + +breakpoint(large) + margin gutter-value(-1.0) + margin-bottom gutter-value(-3, $direction:vertical) - grid-item(12) - height spacing-value('md') * 10 - &:nth-of-type(2) - &:nth-of-type(3) - &:nth-of-type(4) - &:before - content 'Teaser' + &:nth-of-type(2) + &:before + content 'Navbar' - grid-item(12) + grid-item(12) + order 2 - height 100px + +breakpoint(medium) + grid-item(4, $row-span:2) + order 3 - &:nth-of-type(3) - &:nth-of-type(4) - margin-top gutter-value(-1, $direction:vertical) + +breakpoint(large) + grid-item(3) - set-auto-breakpoint(medium) - +breakpoint(medium) - grid-item($start:0, $span:8) + &:nth-of-type(3) + grid-item() + order 2 + + grid-container() > div &:nth-of-type(1) - height spacing-value('md') * 7 + &:before + content 'Text' + + grid-item(12) + + height spacing-value('md') * 10 &:nth-of-type(2) &:nth-of-type(3) &:nth-of-type(4) - grid-item(4) + &:before + content 'Teaser' - height 75px + grid-item(12) + + height 100px &:nth-of-type(3) &:nth-of-type(4) - margin-top 0 + margin-top gutter-value(-1, $direction:vertical) - set-auto-breakpoint(large) - +breakpoint(large) - grid-item(9) + set-auto-breakpoint(medium) + +breakpoint(medium) + grid-item($start:0, $span:8) - > div - &:nth-of-type(1) - height spacing-value('md') * 5 + > div + &:nth-of-type(1) + height spacing-value('md') * 7 - &:nth-of-type(2) - &:nth-of-type(3) - &:nth-of-type(4) - height auto + &:nth-of-type(2) + &:nth-of-type(3) + &:nth-of-type(4) + grid-item(4) + + height 75px + &:nth-of-type(3) + &:nth-of-type(4) + margin-top 0 - &:nth-of-type(4) - &:before - content 'Hint' - grid-item($start:1, $end:11) - order 4 + set-auto-breakpoint(large) + +breakpoint(large) + grid-item(9) - margin-top gutter-value(-0.5, $direction:'vertical') + > div + &:nth-of-type(1) + height spacing-value('md') * 5 - +breakpoint(medium) - grid-item(8, $start:0) + &:nth-of-type(2) + &:nth-of-type(3) + &:nth-of-type(4) + height auto - +breakpoint(large) - grid-item($start:3, $span:6) + &:nth-of-type(4) + &:before + content 'Hint' - &:nth-of-type(5) - &:before - content 'Footer' + grid-item($start:1, $end:11) + order 4 - grid-item(12) - order 5 + margin-top gutter-value(-0.5, $direction:'vertical') - spacing-based-attributes({ - 'padding-top' : 'md', - 'padding-bottom' : 'xl' - }) - margin gutter-value(-1) - margin-top gutter-value(1, $direction:vertical) + +breakpoint(medium) + grid-item(8, $start:0) - +breakpoint(medium) - margin gutter-value(-1, $breakpoint:medium) - margin-top gutter-value(2, $breakpoint:medium, $direction:vertical) + +breakpoint(large) + grid-item($start:3, $span:6) - set-auto-breakpoint(large) - +breakpoint(large) + + + &:nth-of-type(5) + &:before + content 'Footer' + + grid-item(12) + order 5 + + spacing-based-attributes({ + 'padding-top' : 'md', + 'padding-bottom' : 'xl' + }) margin gutter-value(-1) - margin-top gutter-value(2.5, $direction:vertical) + margin-top gutter-value(1, $direction:vertical) + + +breakpoint(medium) + margin gutter-value(-1, $breakpoint:medium) + margin-top gutter-value(2, $breakpoint:medium, $direction:vertical) + + set-auto-breakpoint(large) + +breakpoint(large) + margin gutter-value(-1) + margin-top gutter-value(2.5, $direction:vertical) diff --git a/gulpfile.js b/gulpfile.js index 0174090..62a9a6f 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,6 +1,6 @@ //###[ IMPORTS ]######################################################################################################## -import fs from 'fs'; +import fs from 'node:fs'; import yargs from 'yargs'; import log from 'fancy-log'; import {deleteAsync as del} from 'del'; @@ -10,7 +10,7 @@ import shell from 'gulp-shell'; import sourcemaps from 'gulp-sourcemaps'; import connect from 'gulp-connect'; -import dartSass from 'sass'; +import * as dartSass from 'sass'; import nodeSass from 'node-sass'; import gulpSass from 'gulp-sass'; import stylus from 'gulp-stylus'; diff --git a/package.json b/package.json index 866821c..2ef7a71 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name" : "@oktarintentakel/jig", - "version" : "0.1.10-beta", + "version" : "0.1.11-beta", "author" : "Sebastian Schlapkohl", "description" : "A \"foundationish\" grid solution for SCSS and Stylus with native CSS grid and sane defaults and helpers for responsive websites.", "license" : "MIT", @@ -41,9 +41,9 @@ "jsdoc" : "^3.6.11", "node-sass" : "~9.0.0", "normalize.css" : "^8.0.1", - "sass" : "~1.66.1", + "sass" : "~1.77.5", "serve-static" : "^1.15.0", - "stylus" : "~0.62.0", + "stylus" : "~0.63.0", "yargs" : "^17.7.2" } } diff --git a/source/scss-legacy/jig/_index.scss b/source/scss-legacy/jig/_index.scss index c5523f4..1e0a17e 100644 --- a/source/scss-legacy/jig/_index.scss +++ b/source/scss-legacy/jig/_index.scss @@ -2,4 +2,5 @@ @import 'util'; @import 'breakpoints'; @import 'grid'; +@import 'content'; @import 'spacing'; diff --git a/source/scss-legacy/jig/content.scss b/source/scss-legacy/jig/content.scss new file mode 100644 index 0000000..ccc775d --- /dev/null +++ b/source/scss-legacy/jig/content.scss @@ -0,0 +1,167 @@ +/** + * @namespace Content + */ + + + +/** + * @namespace Content:content-holder + */ + +/** + * Adds properties to the current element, which make it a "content holder", meaning, that it + * adheres to the defined min/max content widths and keeps the content away from the browser edges by + * defining margins according to the defined responsive content paddings. + * + * Min and max widths are only rendered if they are defined in the jig config, as are content paddings. + * + * A content holder can be used as the base container definition for non-breakout elements on a page, + * which is not supposed to grow indefinitely horizontally. + * + * A content holder can be a grid container at the same time, these things do not exclude themselves and + * are even a very common use case. + * + * @memberof Content:content-holder + * @function + * @name content-holder + * @alias content-holder + * + * @param {Boolean} [$padded=true] - if true, config-defined responsive content padding gets applied to the element + * @param {Boolean} [$centered=true] - if true, element gets auto-centered using auto margins + * + * @example + * \@include content-holder(); + */ +@mixin content-holder($padded:true, $centered:false){ + $breakpoint-names: map-keys($jig---breakpoint-config); + $smallest-breakpoint: nth($breakpoint-names, 1); + $largest-breakpoint: nth($breakpoint-names, -1); + + $min-width: content-width-value('min'); + $max-width: content-width-value('max'); + + @if $min-width != null { + min-width: $min-width + (2 * content-padding-value($smallest-breakpoint)); + } + @if $max-width != null { + max-width: $max-width + (2 * content-padding-value($largest-breakpoint)); + } + + @if $centered { + margin-right: auto; + margin-left: auto; + } + + @if $padded { + $content-padding: map-get($jig---content-config, 'padding'); + + @if $content-padding != null { + @include attributes-for-breakpoints(( + 'padding-left' : $content-padding, + 'padding-right' : $content-padding, + )); + } + } +} + + + +/** + * @namespace Content:content-padding-value + */ + +/** + * Returns the defined content padding for a/the current breakpoint. + * + * @memberof Content:content-padding-value + * @function + * @name content-padding-value + * @alias content-padding-value + * + * @param {String} [$breakpoint='auto'] - a defined breakpoint name or "auto", to use the current breakpoint at the point of usage + * @returns {Number} the determined content padding value + * @throws error if no content padding value could be determined, based on given breakpoint + * + * @example + * \@include breakpoint(medium){ + * padding-left: content-padding-value(); + * } + * margin-right: content-padding-value($breakpoint:'small'); + */ +@function content-padding-value($breakpoint:'auto'){ + $padding: map-get($jig---content-config, 'padding'); + $res: null; + + @if $padding != null { + @if type-of($padding) == 'map' { + $res: breakpoint-value($padding, $breakpoint); + } @else { + $res: $padding; + } + } + + @if $res == null { + @error 'jig:content-padding-value | could not resolve content padding, check breakpoint'; + } + + @return $res; +} + + + +/** + * @namespace Content:content-width-value + */ + +/** + * Returns the defined min/max content width. + * + * @memberof Content:content-width-value + * @function + * @name content-width-value + * @alias content-width-value + * + * @param {String} [$min-max='max'] - either "min" or "max", defines if min or max content-width is returned + * @param {?Number} [$default=null] - the default value to return if the width definition cannot be found + * @returns {Number|null} the determined content width value, may be null if width is not defined (depending on default value) + * + * @example + * max-width: content-width-value(); + * min-width: content-width-value('min', 0); + */ +@function content-width-value($min-max:'max', $default:null){ + $width: map-get($jig---content-config, 'max-width'); + @if $min-max == 'min' { + $width: map-get($jig---content-config, 'min-width'); + } + + @if $width == null { + $width: $default; + } + + @return $width; +} + + + +/** + * @namespace Content:base-font-size-value + */ + +/** + * Returns the base font size, which is most likely applied to the html/body elements and acts as the base + * for rem calculations. + * + * @memberof Content:base-font-size-value + * @function + * @name base-font-size-value + * @alias base-font-size-value + * + * @returns {Number} the currently set jig base font size value + * + * @example + * font-size: base-font-size-value(); + */ +@function base-font-size-value(){ + @return $jig---base-font-size; +} diff --git a/source/scss/jig/_index.scss b/source/scss/jig/_index.scss index 9f4b5e2..30aab18 100644 --- a/source/scss/jig/_index.scss +++ b/source/scss/jig/_index.scss @@ -5,4 +5,5 @@ @forward 'util'; @forward 'breakpoints'; @forward 'grid'; +@forward 'content'; @forward 'spacing'; diff --git a/source/scss/jig/content.scss b/source/scss/jig/content.scss new file mode 100644 index 0000000..d78da2c --- /dev/null +++ b/source/scss/jig/content.scss @@ -0,0 +1,176 @@ +/** + * @namespace Content + */ + + + +@use 'sass:meta'; +@use 'sass:map'; +@use 'sass:list'; + +@use 'globals' as *; +@use 'breakpoints'; + + + +/** + * @namespace Content:content-holder + */ + +/** + * Adds properties to the current element, which make it a "content holder", meaning, that it + * adheres to the defined min/max content widths and keeps the content away from the browser edges by + * defining margins according to the defined responsive content paddings. + * + * Min and max widths are only rendered if they are defined in the jig config, as are content paddings. + * + * A content holder can be used as the base container definition for non-breakout elements on a page, + * which is not supposed to grow indefinitely horizontally. + * + * A content holder can be a grid container at the same time, these things do not exclude themselves and + * are even a very common use case. + * + * @memberof Content:content-holder + * @function + * @name content-holder + * @alias content-holder + * + * @param {Boolean} [$padded=true] - if true, config-defined responsive content padding gets applied to the element + * @param {Boolean} [$centered=true] - if true, element gets auto-centered using auto margins + * + * @example + * \@include content-holder(); + */ +@mixin content-holder($padded:true, $centered:false){ + $breakpoint-names: map.keys($jig---breakpoint-config); + $smallest-breakpoint: list.nth($breakpoint-names, 1); + $largest-breakpoint: list.nth($breakpoint-names, -1); + + $min-width: content-width-value('min'); + $max-width: content-width-value('max'); + + @if $min-width != null { + min-width: $min-width + (2 * content-padding-value($smallest-breakpoint)); + } + @if $max-width != null { + max-width: $max-width + (2 * content-padding-value($largest-breakpoint)); + } + + @if $centered { + margin-right: auto; + margin-left: auto; + } + + @if $padded { + $content-padding: map.get($jig---content-config, 'padding'); + + @if $content-padding != null { + @include breakpoints.attributes-for-breakpoints(( + 'padding-left' : $content-padding, + 'padding-right' : $content-padding, + )); + } + } +} + + + +/** + * @namespace Content:content-padding-value + */ + +/** + * Returns the defined content padding for a/the current breakpoint. + * + * @memberof Content:content-padding-value + * @function + * @name content-padding-value + * @alias content-padding-value + * + * @param {String} [$breakpoint='auto'] - a defined breakpoint name or "auto", to use the current breakpoint at the point of usage + * @returns {Number} the determined content padding value + * @throws error if no content padding value could be determined, based on given breakpoint + * + * @example + * \@include breakpoint(medium){ + * padding-left: content-padding-value(); + * } + * margin-right: content-padding-value($breakpoint:'small'); + */ +@function content-padding-value($breakpoint:'auto'){ + $padding: map.get($jig---content-config, 'padding'); + $res: null; + + @if $padding != null { + @if meta.type-of($padding) == 'map' { + $res: breakpoints.breakpoint-value($padding, $breakpoint); + } @else { + $res: $padding; + } + } + + @if $res == null { + @error 'jig:content-padding-value | could not resolve content padding, check breakpoint'; + } + + @return $res; +} + + + +/** + * @namespace Content:content-width-value + */ + +/** + * Returns the defined min/max content width. + * + * @memberof Content:content-width-value + * @function + * @name content-width-value + * @alias content-width-value + * + * @param {String} [$min-max='max'] - either "min" or "max", defines if min or max content-width is returned + * @param {?Number} [$default=null] - the default value to return if the width definition cannot be found + * @returns {Number|null} the determined content width value, may be null if width is not defined (depending on default value) + * + * @example + * max-width: content-width-value(); + * min-width: content-width-value('min', 0); + */ +@function content-width-value($min-max:'max', $default:null){ + $width: map.get($jig---content-config, 'max-width'); + @if $min-max == 'min' { + $width: map.get($jig---content-config, 'min-width'); + } + + @if $width == null { + $width: $default; + } + + @return $width; +} + + + +/** + * @namespace Content:base-font-size-value + */ + +/** + * Returns the base font size, which is most likely applied to the html/body elements and acts as the base + * for rem calculations. + * + * @memberof Content:base-font-size-value + * @function + * @name base-font-size-value + * @alias base-font-size-value + * + * @returns {Number} the currently set jig base font size value + * + * @example + * font-size: base-font-size-value(); + */ +@function base-font-size-value(){ + @return $jig---base-font-size; +} diff --git a/source/stylus/jig/content.styl b/source/stylus/jig/content.styl new file mode 100644 index 0000000..fa199cb --- /dev/null +++ b/source/stylus/jig/content.styl @@ -0,0 +1,153 @@ +/** + * @namespace Content + */ + + + +/** + * @namespace Content:content-holder + */ + +/** + * Adds properties to the current element, which make it a "content holder", meaning, that it + * adheres to the defined min/max content widths and keeps the content away from the browser edges by + * defining margins according to the defined responsive content paddings. + * + * Min and max widths are only rendered if they are defined in the jig config, as are content paddings. + * + * A content holder can be used as the base container definition for non-breakout elements on a page, + * which is not supposed to grow indefinitely horizontally. + * + * A content holder can be a grid container at the same time, these things do not exclude themselves and + * are even a very common use case. + * + * @memberof Content:content-holder + * @function + * @name content-holder + * @alias content-holder + * + * @param {Boolean} [$padded=true] - if true, config-defined responsive content padding gets applied to the element + * @param {Boolean} [$centered=true] - if true, element gets auto-centered using auto margins + * + * @example + * content-holder() + */ +content-holder($padded=true, $centered=false) + $breakpoint-names = keys($jig---breakpoint-config) + $smallest-breakpoint = $breakpoint-names[0] + $largest-breakpoint = last($breakpoint-names) + + $min-width = content-width-value('min') + $max-width = content-width-value('max') + + if $min-width != null + min-width ($min-width + (2 * content-padding-value($smallest-breakpoint))) + + if $max-width != null + max-width ($max-width + (2 * content-padding-value($largest-breakpoint))) + + if $centered + margin-right auto + margin-left auto + + if $padded + $content-padding = $jig---content-config.padding + + if $content-padding != null + attributes-for-breakpoints({ + 'padding-left' : $content-padding, + 'padding-right' : $content-padding, + }) + + + +/** + * @namespace Content:content-padding-value + */ + +/** + * Returns the defined content padding for a/the current breakpoint. + * + * @memberof Content:content-padding-value + * @function + * @name content-padding-value + * @alias content-padding-value + * + * @param {String} [$breakpoint='auto'] - a defined breakpoint name or "auto", to use the current breakpoint at the point of usage + * @returns {Number} the determined content padding value + * @throws error if no content padding value could be determined, based on given breakpoint + * + * @example + * breakpoint(medium) + * padding-left content-padding-value() + * margin-right content-padding-value($breakpoint:'small') + */ +content-padding-value($breakpoint='auto') + $padding = $jig---content-config.padding + $res = null + + if $padding != null + if type($padding) == 'object' + $res = breakpoint-value($padding, $breakpoint) + else + $res = $padding + + if $res == null + error('jig:content-padding-value | could not resolve content padding, check breakpoint') + + return $res + + + +/** + * @namespace Content:content-width-value + */ + +/** + * Returns the defined min/max content width. + * + * @memberof Content:content-width-value + * @function + * @name content-width-value + * @alias content-width-value + * + * @param {String} [$min-max='max'] - either "min" or "max", defines if min or max content-width is returned + * @param {?Number} [$default=null] - the default value to return if the width definition cannot be found + * @returns {Number|null} the determined content width value, may be null if width is not defined (depending on default value) + * + * @example + * max-width content-width-value() + * min-width content-width-value('min', 0) + */ +content-width-value($min-max='max', $default=null) + $width = $jig---content-config.max-width + if $min-max == 'min' + $width = $jig---content-config.min-width + + if $width == null + $width = $default + + return $width + + + +/** + * @namespace Content:base-font-size-value + */ + +/** + * Returns the base font size, which is most likely applied to the html/body elements and acts as the base + * for rem calculations. + * + * @memberof Content:base-font-size-value + * @function + * @name base-font-size-value + * @alias base-font-size-value + * + * @returns {Number} the currently set jig base font size value + * + * @example + * font-size base-font-size-value() + */ +base-font-size-value() + return $jig---base-font-size diff --git a/source/stylus/jig/index.styl b/source/stylus/jig/index.styl index da68548..6670a2a 100644 --- a/source/stylus/jig/index.styl +++ b/source/stylus/jig/index.styl @@ -2,4 +2,5 @@ @require 'util' @require 'breakpoints' @require 'grid' +@require 'content' @require 'spacing' diff --git a/yarn.lock b/yarn.lock index f996e48..abfe86a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7,10 +7,10 @@ resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.1.0.tgz#417fef4a143f4396ad0b3b4351fee21323f15aa8" integrity sha512-mMVJ/j/GbZ/De4ZHWbQAQO1J6iVnjtZLc9WEdkUQb8S/Bu2cAF2bETXUgMAdvMG3/ngtKmcNBe+Zms9bg6jnQQ== -"@adobe/css-tools@~4.3.1": - version "4.3.1" - resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.1.tgz#abfccb8ca78075a2b6187345c26243c1a0842f28" - integrity sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg== +"@adobe/css-tools@~4.3.3": + version "4.3.3" + resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.3.tgz#90749bde8b89cd41764224f5aac29cd4138f75ff" + integrity sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ== "@babel/code-frame@^7.0.0": version "7.18.6" @@ -3608,10 +3608,10 @@ sass-graph@^4.0.1: scss-tokenizer "^0.4.3" yargs "^17.2.1" -sass@~1.66.1: - version "1.66.1" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.66.1.tgz#04b51c4671e4650aa393740e66a4e58b44d055b1" - integrity sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA== +sass@~1.77.5: + version "1.77.5" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.5.tgz#5f9009820297521356e962c0bed13ee36710edfe" + integrity sha512-oDfX1mukIlxacPdQqNb6mV2tVCrnE+P3nVYioy72V5tlk56CPNcO4TCuFcaCRKKfJ1M3lH95CleRS+dVKL2qMg== dependencies: chokidar ">=3.0.0 <4.0.0" immutable "^4.0.0" @@ -4064,12 +4064,12 @@ stylus@^0.59.0: sax "~1.2.4" source-map "^0.7.3" -stylus@~0.62.0: - version "0.62.0" - resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.62.0.tgz#648a020e2bf90ed87587ab9c2f012757e977bb5d" - integrity sha512-v3YCf31atbwJQIMtPNX8hcQ+okD4NQaTuKGUWfII8eaqn+3otrbttGL1zSMZAAtiPsBztQnujVBugg/cXFUpyg== +stylus@~0.63.0: + version "0.63.0" + resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.63.0.tgz#511e8d56f2005b09010fbc1f62561c7b6f72a490" + integrity sha512-OMlgrTCPzE/ibtRMoeLVhOY0RcNuNWh0rhAVqeKnk/QwcuUKQbnqhZ1kg2vzD8VU/6h3FoPTq4RJPHgLBvX6Bw== dependencies: - "@adobe/css-tools" "~4.3.1" + "@adobe/css-tools" "~4.3.3" debug "^4.3.2" glob "^7.1.6" sax "~1.3.0"