From d6c8fdac23e94ffb26b76eebb1ee0d65911e6d0b Mon Sep 17 00:00:00 2001 From: Lucas Vallenet Date: Thu, 12 May 2022 16:15:44 +0200 Subject: [PATCH 1/2] Standardize scss comments --- assets/styles/components/_button.scss | 4 + assets/styles/components/_form.scss | 9 +- assets/styles/components/_heading.scss | 4 + assets/styles/components/_scrollbar.scss | 4 + assets/styles/critical.scss | 4 + assets/styles/elements/_document.scss | 5 +- assets/styles/generic/_button.scss | 16 +- assets/styles/generic/_generic.scss | 12 +- assets/styles/generic/_media.scss | 27 +- assets/styles/main.scss | 7 + assets/styles/objects/_container.scss | 1 - assets/styles/objects/_crop.scss | 45 ++-- assets/styles/objects/_layout.scss | 1 - assets/styles/objects/_ratio.scss | 18 +- assets/styles/objects/_scroll.scss | 4 + assets/styles/objects/_table.scss | 11 +- assets/styles/settings/_config.colors.scss | 4 + assets/styles/settings/_config.eases.scss | 4 + assets/styles/settings/_config.scss | 10 +- assets/styles/tools/_family.scss | 290 ++++++++++++--------- assets/styles/tools/_fonts.scss | 6 +- assets/styles/tools/_functions.scss | 17 +- assets/styles/tools/_layout.scss | 5 +- assets/styles/tools/_mixins.scss | 24 +- assets/styles/tools/_widths.scss | 2 +- assets/styles/utilities/_align.scss | 3 + assets/styles/utilities/_helpers.scss | 33 +-- assets/styles/utilities/_print.scss | 36 +-- assets/styles/utilities/_ratio.scss | 5 +- assets/styles/utilities/_spacing.scss | 29 +-- assets/styles/utilities/_states.scss | 22 +- assets/styles/utilities/_widths.scss | 24 +- www/assets/styles/main.css | 25 -- www/assets/styles/main.css.map | 2 +- 34 files changed, 393 insertions(+), 320 deletions(-) diff --git a/assets/styles/components/_button.scss b/assets/styles/components/_button.scss index 7197319..7287781 100644 --- a/assets/styles/components/_button.scss +++ b/assets/styles/components/_button.scss @@ -1,3 +1,7 @@ +// ========================================================================== +// Components / Buttons +// ========================================================================== + .c-button { padding: rem(15px) rem(20px); background-color: lightgray; diff --git a/assets/styles/components/_form.scss b/assets/styles/components/_form.scss index 2622bcd..a73b07a 100644 --- a/assets/styles/components/_form.scss +++ b/assets/styles/components/_form.scss @@ -1,6 +1,7 @@ // ========================================================================== -// Form +// Components / Form // ========================================================================== + .c-form { } @@ -12,6 +13,7 @@ // Label // ========================================================================== + .c-form_label { display: block; margin-bottom: rem(10px); @@ -19,6 +21,7 @@ // Input // ========================================================================== + $input-icon-color: 424242; // No # .c-form_input { @@ -41,6 +44,7 @@ $input-icon-color: 424242; // No # // Checkbox // ========================================================================== + $checkbox: rem(18px); $checkbox-icon-color: $input-icon-color; @@ -108,6 +112,7 @@ $checkbox-icon-color: $input-icon-color; // Radio // ========================================================================== + $radio-icon-color: $input-icon-color; .c-form_radioLabel { @@ -129,6 +134,7 @@ $radio-icon-color: $input-icon-color; // Select // ============================================================================= + $select-icon: rem(40px); $select-icon-color: $input-icon-color; @@ -163,6 +169,7 @@ $select-icon-color: $input-icon-color; // Textarea // ============================================================================= + .c-form_textarea { @extend .c-form_input; diff --git a/assets/styles/components/_heading.scss b/assets/styles/components/_heading.scss index 4f67229..b71a5bd 100644 --- a/assets/styles/components/_heading.scss +++ b/assets/styles/components/_heading.scss @@ -1,3 +1,7 @@ +// ========================================================================== +// Components / Headings +// ========================================================================== + .c-heading { line-height: $line-height-h; margin-bottom: rem(30px); diff --git a/assets/styles/components/_scrollbar.scss b/assets/styles/components/_scrollbar.scss index 51f08a7..370ea9c 100644 --- a/assets/styles/components/_scrollbar.scss +++ b/assets/styles/components/_scrollbar.scss @@ -1,3 +1,7 @@ +// ========================================================================== +// Components / Scrollbar +// ========================================================================== + .c-scrollbar { position: absolute; right: 0; diff --git a/assets/styles/critical.scss b/assets/styles/critical.scss index bee70d3..9bd61d8 100644 --- a/assets/styles/critical.scss +++ b/assets/styles/critical.scss @@ -1 +1,5 @@ +// ========================================================================== +// Critical CSS +// ========================================================================== + $assets-path: "assets/"; diff --git a/assets/styles/elements/_document.scss b/assets/styles/elements/_document.scss index 977288c..2e3c899 100644 --- a/assets/styles/elements/_document.scss +++ b/assets/styles/elements/_document.scss @@ -1,5 +1,5 @@ // ========================================================================== -// Base / Page +// Elements / Document // ========================================================================== // @@ -7,8 +7,7 @@ // // 1. Include web fonts // 2. Ensure the page always fills at least the entire height of the viewport. -// 3. Set the default `font-size` and `line-height` for the entire project, -// sourced from our default variables. +// 3. Set the default `font-size` and `line-height` for the entire project, sourced from our default variables. @include font-faces($font-faces, $font-dir); // [1] diff --git a/assets/styles/generic/_button.scss b/assets/styles/generic/_button.scss index 2b56184..bc71461 100644 --- a/assets/styles/generic/_button.scss +++ b/assets/styles/generic/_button.scss @@ -9,27 +9,27 @@ // 4. Line different sized buttons up a little nicer. // 5. Make buttons inherit font styles (often necessary when styling `input`s as buttons). // 6. Force all button-styled elements to appear clickable. -// + button, .c-button { @include u-hocus { text-decoration: none; } - display: inline-block; /* [1] */ - overflow: visible; /* [2] */ - margin: 0; /* [3] */ + display: inline-block; // [1] + overflow: visible; // [2] + margin: 0; // [3] padding: 0; outline: 0; border: 0; background: none transparent; color: inherit; - vertical-align: middle; /* [4] */ - text-align: center; /* [3] */ + vertical-align: middle; // [4] + text-align: center; // [3] text-decoration: none; text-transform: none; - font: inherit; /* [5] */ + font: inherit; // [5] line-height: normal; - cursor: pointer; /* [6] */ + cursor: pointer; // [6] user-select: none; } diff --git a/assets/styles/generic/_generic.scss b/assets/styles/generic/_generic.scss index b8e918f..30fd959 100644 --- a/assets/styles/generic/_generic.scss +++ b/assets/styles/generic/_generic.scss @@ -9,8 +9,8 @@ html { // // Add the correct display in IE 10-. // 1. Add the correct display in IE. -// -template, /* [1] */ + +template, // [1] [hidden] { display: none; } @@ -62,11 +62,11 @@ h1, h2, h3, h4, h5, h6 { margin: 0; } -/** - * 1. Single taps should be dispatched immediately on clickable elements - */ +// +// 1. Single taps should be dispatched immediately on clickable elements + a, area, button, input, label, select, textarea, [tabindex] { - -ms-touch-action: manipulation; /* [1] */ + -ms-touch-action: manipulation; // [1] touch-action: manipulation; } diff --git a/assets/styles/generic/_media.scss b/assets/styles/generic/_media.scss index 8cd41fa..23f64b2 100644 --- a/assets/styles/generic/_media.scss +++ b/assets/styles/generic/_media.scss @@ -6,19 +6,19 @@ // 1. Setting `vertical-align` removes the whitespace that appears under `img` // elements when they are dropped into a page as-is. Safer alternative to // using `display: block;`. -// + audio, canvas, iframe, img, svg, video { - vertical-align: middle; /* [1] */ + vertical-align: middle; // [1] } // // Add the correct display in iOS 4-7. -// + audio:not([controls]) { display: none; height: 0; @@ -26,33 +26,32 @@ audio:not([controls]) { // // 2. Fluid media for responsive purposes. -// + img, svg { - max-width: 100%; /* [2] */ + max-width: 100%; // [2] height: auto; // - // 4. If a `width` and/or `height` attribute have been explicitly defined, let’s - // not make the image fluid. - // - &[width], /* [4] */ + // 4. If a `width` and/or `height` attribute have been explicitly defined, let’s not make the image fluid. + + &[width], // [4] &[height] { - /* [4] */ + // [4] max-width: none; } } // // 4. Offset `alt` text from surrounding copy. -// + img { - font-style: italic; /* [4] */ + font-style: italic; // [4] } // // 5. SVG elements should fallback to their surrounding text color. -// + svg { - fill: currentColor; /* [5] */ + fill: currentColor; // [5] } diff --git a/assets/styles/main.scss b/assets/styles/main.scss index 55ff243..db4f9bb 100644 --- a/assets/styles/main.scss +++ b/assets/styles/main.scss @@ -4,6 +4,7 @@ // Settings // ========================================================================== + @import "settings/config.eases"; @import "settings/config.colors"; @import "settings/config"; @@ -11,6 +12,7 @@ // ========================================================================== // Tools // ========================================================================== + @import "tools/functions"; @import "tools/mixins"; @import "tools/fonts"; @@ -20,6 +22,7 @@ // Generic // ========================================================================== + @import "node_modules/normalize.css/normalize"; @import "generic/generic"; @import "generic/media"; @@ -28,10 +31,12 @@ // Elements // ========================================================================== + @import "elements/document"; // Objects // ========================================================================== + @import "objects/scroll"; @import "objects/container"; @import "objects/ratio"; @@ -45,6 +50,7 @@ // Components // ========================================================================== + @import "components/scrollbar"; @import "components/heading"; @import "components/button"; @@ -56,6 +62,7 @@ // Utilities // ========================================================================== + @import "utilities/ratio"; @import "utilities/widths"; // @import "utilities/align"; diff --git a/assets/styles/objects/_container.scss b/assets/styles/objects/_container.scss index 3e408f8..0a5880e 100644 --- a/assets/styles/objects/_container.scss +++ b/assets/styles/objects/_container.scss @@ -10,7 +10,6 @@ // > A *wrapper* instead is something that wraps around a single object to provide // more functionalities and interfaces to it. // @link http://stackoverflow.com/a/13202141/140357 -// .o-container { margin-right: auto; diff --git a/assets/styles/objects/_crop.scss b/assets/styles/objects/_crop.scss index fe68b1e..d08b308 100644 --- a/assets/styles/objects/_crop.scss +++ b/assets/styles/objects/_crop.scss @@ -13,34 +13,32 @@ $crop-ratios: ( (16:9), ) !default; -/** - * Provide a cropping container in order to display media (usually images) - * cropped to certain ratios. - * - * 1. Set up a positioning context in which the image can sit. - * 2. This is the crucial part: where the cropping happens. - */ +// +// Provide a cropping container in order to display media (usually images) +// cropped to certain ratios. +// 1. Set up a positioning context in which the image can sit. +// 2. This is the crucial part: where the cropping happens. + .o-crop { - position: relative; /* [1] */ + position: relative; // [1] display: block; - overflow: hidden; /* [2] */ + overflow: hidden; // [2] } -/** - * Apply this class to the content (usually `img`) that needs cropping. - * - * 1. Image’s default positioning is top-left in the cropping box. - * 2. Make sure the media doesn’t stop itself too soon. - */ +// +// Apply this class to the content (usually `img`) that needs cropping. +// 1. Image’s default positioning is top-left in the cropping box. +// 2. Make sure the media doesn’t stop itself too soon. + .o-crop_content { position: absolute; - top: 0; /* [1] */ - left: 0; /* [1] */ - max-width: none; /* [2] */ + top: 0; // [1] + left: 0; // [1] + max-width: none; // [2] + + // + // We can position the media in different locations within the cropping area. - /** - * We can position the media in different locations within the cropping area. - */ &.-right { right: 0; left: auto; @@ -65,8 +63,7 @@ $crop-ratios: ( // // @example //
-// -// + .o-crop { @each $crop in $crop-ratios { @each $antecedent, $consequent in $crop { @@ -79,7 +76,7 @@ $crop-ratios: ( } &.-#{$antecedent}\:#{$consequent} { - padding-bottom: ($consequent/$antecedent) * 100%; + padding-bottom: ($consequent/$antecedent) // 100%; } } } diff --git a/assets/styles/objects/_layout.scss b/assets/styles/objects/_layout.scss index d3980cc..1129eff 100644 --- a/assets/styles/objects/_layout.scss +++ b/assets/styles/objects/_layout.scss @@ -36,7 +36,6 @@ // // @requires tools/layout // @link https://github.com/inuitcss/inuitcss/blob/0420ba8/objects/_objects.layout.scss -// .o-layout { @include o-layout; diff --git a/assets/styles/objects/_ratio.scss b/assets/styles/objects/_ratio.scss index 579b927..eafd2f8 100644 --- a/assets/styles/objects/_ratio.scss +++ b/assets/styles/objects/_ratio.scss @@ -2,14 +2,14 @@ // Objects / Ratio // ========================================================================== -/** - * Create ratio-bound content blocks, to keep media (e.g. images, videos) in - * their correct aspect ratios. - * - * http://alistapart.com/article/creating-intrinsic-ratios-for-video - * - * 1. Default cropping is a 1:1 ratio (i.e. a perfect square). - */ +// +// Create ratio-bound content blocks, to keep media (e.g. images, videos) in +// their correct aspect ratios. +// +// http://alistapart.com/article/creating-intrinsic-ratios-for-video +// +// 1. Default cropping is a 1:1 ratio (i.e. a perfect square). + .o-ratio { position: relative; display: block; @@ -17,7 +17,7 @@ &:before { display: block; - padding-bottom: 100%; /* [1] */ + padding-bottom: 100%; // [1] width: 100%; content: ""; } diff --git a/assets/styles/objects/_scroll.scss b/assets/styles/objects/_scroll.scss index 1b83b95..76e09be 100644 --- a/assets/styles/objects/_scroll.scss +++ b/assets/styles/objects/_scroll.scss @@ -1,3 +1,7 @@ +// ========================================================================== +// Objects / Scroll +// ========================================================================== + .o-scroll { min-height: 100vh; } diff --git a/assets/styles/objects/_table.scss b/assets/styles/objects/_table.scss index 9ebf48e..611a289 100644 --- a/assets/styles/objects/_table.scss +++ b/assets/styles/objects/_table.scss @@ -1,14 +1,15 @@ // ========================================================================== // Objects / Tables // ========================================================================== + .o-table { width: 100%; - /** - * Force all cells within a table to occupy the same width as each other. - * - * @link https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values - */ + // + // Force all cells within a table to occupy the same width as each other. + // + // @link https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values + &.-fixed { table-layout: fixed; } diff --git a/assets/styles/settings/_config.colors.scss b/assets/styles/settings/_config.colors.scss index 6616b73..f008d50 100644 --- a/assets/styles/settings/_config.colors.scss +++ b/assets/styles/settings/_config.colors.scss @@ -4,21 +4,25 @@ // Palette // ============================================================================= + $white: #FFFFFF; $black: #000000; // Specific // ============================================================================= + // Link $link-color: #1A0DAB; $link-focus-color: #1A0DAB; $link-hover-color: darken(#1A0DAB, 10%); + // Selection $selection-text-color: #3297FD; $selection-background-color: #FFFFFF; // Social Colors // ============================================================================= + $facebook-color: #3B5998; $instagram-color: #E1306C; $youtube-color: #CD201F; diff --git a/assets/styles/settings/_config.eases.scss b/assets/styles/settings/_config.eases.scss index ab84729..a3f0966 100644 --- a/assets/styles/settings/_config.eases.scss +++ b/assets/styles/settings/_config.eases.scss @@ -1,3 +1,7 @@ +// ========================================================================== +// Settings / Config / Eases +// ========================================================================== + $Power1EaseOut: cubic-bezier(0.250, 0.460, 0.450, 0.940); $Power2EaseOut: cubic-bezier(0.215, 0.610, 0.355, 1.000); $Power3EaseOut: cubic-bezier(0.165, 0.840, 0.440, 1.000); diff --git a/assets/styles/settings/_config.scss b/assets/styles/settings/_config.scss index 0021e92..c410536 100644 --- a/assets/styles/settings/_config.scss +++ b/assets/styles/settings/_config.scss @@ -4,6 +4,7 @@ // Context // ============================================================================= + // The current stylesheet context. Available values: frontend, editor. $context: frontend !default; @@ -28,10 +29,12 @@ $font-faces: ( // Typography // ============================================================================= + // Base $font-size: 16px; $line-height: 24px / $font-size; $color: #222222; + // Headings $font-size-h1: 36px !default; $font-size-h2: 28px !default; @@ -40,6 +43,7 @@ $font-size-h4: 20px !default; $font-size-h5: 18px !default; $font-size-h6: 16px !default; $line-height-h: $line-height; + // Weights $light: 300; $normal: 400; @@ -48,21 +52,25 @@ $bold: 700; // Transitions // ============================================================================= + $speed: 0.3s; $easing: $Power2EaseOut; // Spacing Units // ============================================================================= + $unit: 60px; $unit-small: 30px; // Container -// ========================================================================== +// ============================================================================= + $container-width: 2000px; $padding: $unit; // Breakpoints // ============================================================================= + $from-tiny: 500px !default; $to-tiny: $from-tiny - 1 !default; $from-small: 700px !default; diff --git a/assets/styles/tools/_family.scss b/assets/styles/tools/_family.scss index 2afe519..348435f 100644 --- a/assets/styles/tools/_family.scss +++ b/assets/styles/tools/_family.scss @@ -1,12 +1,15 @@ -// +// ========================================================================== +// Tools / Family +// ========================================================================== + // // DOCS : https://lukyvj.github.io/family.scss/ // -// -/// Select all children from the first to `$num`. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - id of the child +// Select all children from the first to `$num`. +// @group with-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// @param {number} $num - id of the child + @mixin first($num) { @if $num == 1 { &:first-child { @@ -19,108 +22,129 @@ } } -/// Select all children from the last to `$num`. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - id of the child +// +// Select all children from the last to `$num`. +// @group with-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// @param {number} $num - id of the child + @mixin last($num) { &:nth-last-child(-n + #{$num}) { @content; } } -/// Select all children after the first to `$num`. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - id of the child +// +// Select all children after the first to `$num`. +// @group with-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// @param {number} $num - id of the child + @mixin after-first($num) { &:nth-child(n + #{$num + 1}) { @content; } } -/// Select all children before `$num` from the last. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - id of the child +// +// Select all children before `$num` from the last. +// @group with-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// @param {number} $num - id of the child + @mixin from-end($num) { &:nth-last-child(#{$num}) { @content; } } -/// Select all children between `$first` and `$last`. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// +// Select all children between `$first` and `$last`. +// @group with-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] + @mixin between($first, $last) { &:nth-child(n + #{$first}):nth-child(-n + #{$last}) { @content; } } -/// Select all even children between `$first` and `$last`. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// +// Select all even children between `$first` and `$last`. +// @group with-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] + @mixin even-between($first, $last) { &:nth-child(even):nth-child(n + #{$first}):nth-child(-n + #{$last}) { @content; } } -/// Select all odd children between `$first` and `$last`. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// +// Select all odd children between `$first` and `$last`. +// @group with-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] + @mixin odd-between($first, $last) { &:nth-child(odd):nth-child(n + #{$first}):nth-child(-n + #{$last}) { @content; } } -/// Select all `$num` children between `$first` and `$last`. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// +// Select all `$num` children between `$first` and `$last`. +// @group with-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] + @mixin n-between($num, $first, $last) { &:nth-child(#{$num}n):nth-child(n + #{$first}):nth-child(-n + #{$last}) { @content; } } +// +// Select all children but `$num`. +// @group with-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// @param {number} $num - id of the child -/// Select all children but `$num`. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - id of the child @mixin all-but($num) { &:not(:nth-child(#{$num})) { @content; } } -/// Select children each `$num`. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - id of the child -/// @alias every +// +// Select children each `$num`. +// @group with-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// @param {number} $num - id of the child +// @alias every + @mixin each($num) { &:nth-child(#{$num}n) { @content; } } -/// Select children each `$num`. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - id of the child +// +// Select children each `$num`. +// @group with-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// @param {number} $num - id of the child + @mixin every($num) { &:nth-child(#{$num}n) { @content; } } -/// Select the `$num` child from the start and the `$num` child from the last. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - id of the child +// +// Select the `$num` child from the start and the `$num` child from the last. +// @group with-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// @param {number} $num - id of the child + @mixin from-first-last($num) { &:nth-child(#{$num}), &:nth-last-child(#{$num}) { @@ -128,57 +152,64 @@ } } +// +// Select the item in the middle of `$num` child. Only works with odd number +// chain. +// @group with-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// @param {number} $num - id of the child -/// Select the item in the middle of `$num` child. Only works with odd number -/// chain. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - id of the child @mixin middle($num) { &:nth-child(#{round($num / 2)}) { @content; } } +// +// Select all children between the `$num` first and the `$num` last. +// @group with-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// @param {number} $num - id of the child -/// Select all children between the `$num` first and the `$num` last. -/// @group with-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - id of the child @mixin all-but-first-last($num) { &:nth-child(n + #{$num}):nth-last-child(n + #{$num}) { @content; } } +// +// This quantity-query mixin will only select the first of `$limit` items. It will not +// work if there is not as much as item as you set in `$limit`. +// @group Quantity queries +// @param {number} $limit +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// This quantity-query mixin will only select the first of `$limit` items. It will not -/// work if there is not as much as item as you set in `$limit`. -/// @group Quantity queries -/// @param {number} $limit -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] @mixin first-of($limit) { &:nth-last-child(#{$limit}):first-child { @content; } } -/// This quantity-query mixin will only select the last of `$limit` items. It will not -/// if there is not as much as item as you set in `$limit`. -/// @group Quantity queries -/// @param {number} $limit -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// +// This quantity-query mixin will only select the last of `$limit` items. It will not +// if there is not as much as item as you set in `$limit`. +// @group Quantity queries +// @param {number} $limit +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] + @mixin last-of($limit) { &:nth-of-type(#{$limit}):nth-last-of-type(1) { @content; } } -/// This quantity-query mixin will select every items if there is at least `$num` items. It will not -/// if there is not as much as item as you set in `$num`. -/// @group Quantity queries -/// @param {number} $limit -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// +// This quantity-query mixin will select every items if there is at least `$num` items. It will not +// if there is not as much as item as you set in `$num`. +// @group Quantity queries +// @param {number} $limit +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] + @mixin at-least($num) { $selector: &; $child: nth(nth($selector, -1), -1); @@ -189,11 +220,13 @@ } } -/// This quantity-query mixin will select every items if there is at most `$num` items. It will not -/// if there is not as much as item as you set in `$num`. -/// @group Quantity queries -/// @param {number} $limit -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// +// This quantity-query mixin will select every items if there is at most `$num` items. It will not +// if there is not as much as item as you set in `$num`. +// @group Quantity queries +// @param {number} $limit +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] + @mixin at-most($num) { $selector: &; $child: nth(nth($selector, -1), -1); @@ -204,10 +237,12 @@ } } -/// This quantity-query mixin will select every items only if there is between `$min` and `$max` items. -/// @group Quantity queries -/// @param {number} $limit -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// +// This quantity-query mixin will select every items only if there is between `$min` and `$max` items. +// @group Quantity queries +// @param {number} $limit +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] + @mixin in-between($min, $max) { $selector: &; $child: nth(nth($selector, -1), -1); @@ -218,45 +253,55 @@ } } -/// Select the first exact child -/// @group no-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// +// Select the first exact child +// @group no-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] + @mixin first-child() { &:first-of-type { @content } } -/// Select the last exact child -/// @group no-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// +// Select the last exact child +// @group no-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] + @mixin last-child() { &:last-of-type { @content } } -/// Select all even children. -/// @group no-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// +// Select all even children. +// @group no-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] + @mixin even() { &:nth-child(even) { @content; } } -/// Select all odd children. -/// @group no-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// +// Select all odd children. +// @group no-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] + @mixin odd() { &:nth-child(odd) { @content; } } -/// Select only the first and last child. -/// @group no-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// +// Select only the first and last child. +// @group no-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] + @mixin first-last() { &:first-child, &:last-child { @@ -264,43 +309,50 @@ } } -/// Will only select the child if it’s unique. -/// @group no-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @alias only +// +// Will only select the child if it’s unique. +// @group no-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// @alias only + @mixin unique() { &:only-child { @content; } } -/// Will only select the child if it’s unique. -/// @group no-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// +// Will only select the child if it’s unique. +// @group no-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] + @mixin only() { &:only-child { @content; } } -/// Will only select children if they are not unique. Meaning if there is at -/// least 2 children, the style is applied. -/// @group no-arguments -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// +// Will only select children if they are not unique. Meaning if there is at +// least 2 children, the style is applied. +// @group no-arguments +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] + @mixin not-unique() { &:not(:only-child) { @content; } } +// +// This mixin is used to automatically sort z-index in numerical order. But it +// can also sort them in anti-numerical order, depending the parameters you use. +// @group using functions +// @content [Write the style you want to apply to the children, and it will be added within the @content directive] +// @param {number} $num - Number of children +// @param {string} $direction [forward] - Direction of the sort +// @param {number} $index [0] - Index of the sorting -/// This mixin is used to automatically sort z-index in numerical order. But it -/// can also sort them in anti-numerical order, depending the parameters you use. -/// @group using functions -/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] -/// @param {number} $num - Number of children -/// @param {string} $direction [forward] - Direction of the sort -/// @param {number} $index [0] - Index of the sorting @mixin child-index($num, $direction: 'forward', $index: 0) { @for $i from 1 through $num { @if ($direction == 'forward') { @@ -317,11 +369,13 @@ } } -/// Used by the child-index mixin. It will returned the proper sorted numbers -/// depending on the `$index` value. -/// @access private -/// @param {number} $num - Number of children -/// @param {number} $index - Index of the sorting +// +// Used by the child-index mixin. It will returned the proper sorted numbers +// depending on the `$index` value. +// @access private +// @param {number} $num - Number of children +// @param {number} $index - Index of the sorting + @function order-index($i, $index) { @return ($index + $i); } diff --git a/assets/styles/tools/_fonts.scss b/assets/styles/tools/_fonts.scss index e3d79b7..063b28a 100644 --- a/assets/styles/tools/_fonts.scss +++ b/assets/styles/tools/_fonts.scss @@ -8,7 +8,7 @@ // @param {List} $webfont (font name, filename, font-weight, font-style) - Each webfont to import. // @param {String} $dir - The webfont directory path // @output void -// + @mixin font-face($webfont, $dir) { @font-face { font-display: swap; @@ -26,7 +26,7 @@ // @param {List} $webfonts [(font name, filename, font-weight, font-style)] - Each webfont to import. // @param {String} $dir - The webfont directory path // @output void -// + @mixin font-faces($webfonts, $dir) { @each $webfont in $webfonts { @include font-face($webfont, $dir); @@ -38,7 +38,7 @@ // // @param {String} $font-family - The name of the webfont. // @return {String} The webfont and it's fallbacks. -// + @function ff($font-family) { @if not map-has-key($font-families, $font-family) { @error "No font-family found in $font-families map for `#{$font-family}`. Property omitted."; diff --git a/assets/styles/tools/_functions.scss b/assets/styles/tools/_functions.scss index ed27573..89a8506 100644 --- a/assets/styles/tools/_functions.scss +++ b/assets/styles/tools/_functions.scss @@ -1,3 +1,4 @@ +// ========================================================================== // Tools / Functions // ========================================================================== @@ -7,7 +8,7 @@ // @param {Number} $size - The pixel value to convert. // @param {Number} $base [$font-size] - The assumed base font size. // @return {Number} Scalable pixel value in EMs. -// + @function em($size, $base: $font-size) { @if (type-of($size) == number) { @if (unit($size) != "px") { @@ -34,7 +35,7 @@ // @param {Number} $size - The pixel value to convert. // @param {Number} $base [$font-size] - The assumed base font size. // @return {Number} Scalable pixel value in REMs. -// + @function rem($size, $base: $font-size) { @if (type-of($size) == number) { @if (unit($size) != "px") { @@ -62,7 +63,7 @@ // @link http://sassdoc.com/annotations/#alias // @param {Number} $number - The value to convert. // @return {Number} A percentage. -// + @function span($number) { @return percentage($number); } @@ -75,7 +76,7 @@ // @param {List} $values - A single value or list of values to check for. // @return {Boolean} // @access private -// + @function list-contains( $list, $values... @@ -94,14 +95,14 @@ // // @param {Boolean} $flag - Whether a rule is important (TRUE) or not (FALSE). // @return {String|Null} Returns `!important` or NULL. -// + @function important($flag: false) { @if ($flag == true) { @return !important; } @elseif ($important == false) { @return null; } @else { - @error "`#{$flag}` needs to be `true` or `false`." + @error "`#{$flag}` needs to be `true` or `false`."; } } @@ -110,7 +111,7 @@ // // @requires {String} $context - The global context of the stylesheet. // @return {Boolean} If the $context is set to "editor". -// + @function is-editor() { @return ('editor' == $context); } @@ -120,7 +121,7 @@ // // @requires {String} $context - The global context of the stylesheet. // @return {Boolean} If the $context is set to "frontend". -// + @function is-frontend() { @return ('frontend' == $context); } diff --git a/assets/styles/tools/_layout.scss b/assets/styles/tools/_layout.scss index 45e2391..318e762 100644 --- a/assets/styles/tools/_layout.scss +++ b/assets/styles/tools/_layout.scss @@ -10,7 +10,6 @@ // // @link https://github.com/inuitcss/inuitcss/blob/0420ba8/objects/_objects.layout.scss // - // // Generate the layout container. // @@ -19,7 +18,7 @@ // // @requires {function} u-list-reset // @output `font-size`, `margin`, `padding`, `list-style` -// + @mixin o-layout($gutter: 0, $fix-whitespace: true) { margin: 0; padding: 0; @@ -45,7 +44,7 @@ // 4. By default, all layout items are full-width (mobile first). // 5. Gutters provided by left padding: // http://csswizardry.com/2011/08/building-better-grid-systems/ -// + @mixin o-layout_item($gutter: 0, $fix-whitespace: true) { display: inline-block; // [2] width: 100%; // [4] diff --git a/assets/styles/tools/_mixins.scss b/assets/styles/tools/_mixins.scss index d54cc36..20fb810 100644 --- a/assets/styles/tools/_mixins.scss +++ b/assets/styles/tools/_mixins.scss @@ -9,7 +9,7 @@ // // @param {Color} $value [rgba(0, 0, 0, 0)] - The value of the highlight. // @output `-webkit-tap-highlight-color` -// + @mixin tap-highlight-color($value: rgba(0, 0, 0, 0)) { -webkit-tap-highlight-color: $value; } @@ -21,7 +21,7 @@ // // @param {String} $value [rgba(0, 0, 0, 0)] - The type of scrolling. // @output `-webkit-overflow-scrolling` -// + @mixin overflow-scrolling($value: touch) { -webkit-overflow-scrolling: $value; } @@ -32,7 +32,7 @@ // @link http://www.cssmojo.com/the-very-latest-clearfix-reloaded/ // @param {List} $supports The type of clearfix to generate. // @output Injects `:::after` pseudo-element. -// + @mixin u-clearfix($supports...) { &::after { display: if(list-contains($supports, table), table, block); @@ -49,7 +49,7 @@ // @param {Number} $line-height [auto] - The line box height. // @param {Boolean} $important [false] - Whether the font-size is important. // @output `font-size`, `line-height` -// + @mixin font-size($font-size, $line-height: auto, $important: false) { $important: important($important); font-size: rem($font-size) $important; @@ -75,7 +75,7 @@ // and its children. // // @output `font-size`, `display`, `vertical-align` -// + @mixin o-vertical-center { font-size: 0; @@ -99,7 +99,7 @@ // @link https://github.com/inuitcss/inuitcss/blob/master/tools/_tools.mixins.scss // @content Wrapped in `:focus` and `:hover` pseudo-classes. // @output Wraps the given content in `:focus` and `:hover` pseudo-classes. -// + @mixin u-hocus { &:focus, &:hover { @@ -113,7 +113,7 @@ // @see {Mixin} u-hocus // @content Wrapped in `:focus` and `:active` pseudo-classes. // @output Wraps the given content in `:focus` and `:hover` pseudo-classes. -// + @mixin u-actus { &:focus, &:active { @@ -131,7 +131,7 @@ // // @param {Number} $width [100%] - The maximum width of element. // @output `max-width`, `word-wrap`, `white-space`, `overflow`, `text-overflow` -// + @mixin u-truncate($width: 100%) { overflow: hidden; text-overflow: ellipsis; @@ -147,7 +147,7 @@ // // @param {Boolean} $important [true] - Whether the visibility is important. // @output Properties for removing the element from the document flow. -// + @mixin u-accessibly-hidden($important: true) { $important: important($important); position: absolute $important; @@ -165,7 +165,7 @@ // // @content For styling the now visible element. // @output Injects `:focus`, `:active` pseudo-classes. -// + @mixin u-accessibly-focusable { @include u-actus { clip: auto; @@ -184,7 +184,7 @@ // @link http://juicystudio.com/article/screen-readers-display-none.php // @param {Boolean} $important [true] - Whether the visibility is important. // @output `display`, `visibility` -// + @mixin u-hidden($important: true) { $important: important($important); display: none $important; @@ -199,7 +199,7 @@ // @param {String} $display [block] - The rendering box used for the element. // @param {Boolean} $important [true] - Whether the visibility is important. // @output `display`, `visibility` -// + @mixin u-shown($display: block, $important: true) { $important: important($important); display: $display $important; diff --git a/assets/styles/tools/_widths.scss b/assets/styles/tools/_widths.scss index 76f998e..1bb1d8a 100644 --- a/assets/styles/tools/_widths.scss +++ b/assets/styles/tools/_widths.scss @@ -45,7 +45,7 @@ $breakpoint-delimiter: \@ !default; // @param {List} $colums - The columns we want the widths to have. // @param {String} $breakpoint - Optional suffix for responsive widths. // @output `width`, `position`, `right`, `left` -// + @mixin widths($columns, $breakpoint: null, $important: true) { $important: important($important); diff --git a/assets/styles/utilities/_align.scss b/assets/styles/utilities/_align.scss index 698337c..a29e23e 100644 --- a/assets/styles/utilities/_align.scss +++ b/assets/styles/utilities/_align.scss @@ -4,6 +4,7 @@ // Floats // ========================================================================== + .u-float-left { float: left !important; } @@ -14,6 +15,7 @@ // Horizontal Text // ========================================================================== + .u-text-center { text-align: center !important; } @@ -28,6 +30,7 @@ // Vertical Text // ========================================================================== + .u-align-baseline { vertical-align: baseline !important; } diff --git a/assets/styles/utilities/_helpers.scss b/assets/styles/utilities/_helpers.scss index 40ad2ff..6947178 100644 --- a/assets/styles/utilities/_helpers.scss +++ b/assets/styles/utilities/_helpers.scss @@ -4,18 +4,21 @@ // Layout // ========================================================================== + .u-clearfix { @include u-clearfix; } // Decorative // ============================================================================= + .u-truncate { @include u-truncate; } // Visibility / Display // ========================================================================== + [hidden][aria-hidden="false"] { position: absolute; display: inherit; @@ -30,11 +33,11 @@ // display: block; // } -// /** -// * 1. Fix for Firefox bug: an image styled `max-width:100%` within an -// * inline-block will display at its default size, and not limit its width to -// * 100% of an ancestral container. -// */ +// // +// // 1. Fix for Firefox bug: an image styled `max-width:100%` within an +// // inline-block will display at its default size, and not limit its width to +// // 100% of an ancestral container. + // .u-inline-block { // display: inline-block !important; // max-width: 100%; /* 1 */ @@ -56,9 +59,9 @@ // display: table-row !important; // } -/** - * Completely remove from the flow but leave available to screen readers. - */ +// +// Completely remove from the flow but leave available to screen readers. + .u-screen-reader-text { @include u-accessibly-hidden; } @@ -69,13 +72,13 @@ } } -/* - * Extends the `.screen-reader-text` class to allow the element - * to be focusable when navigated to via the keyboard. - * - * @link https://www.drupal.org/node/897638 - * @todo Define styles when focused. - */ +// +// Extends the `.screen-reader-text` class to allow the element +// to be focusable when navigated to via the keyboard. +// +// @link https://www.drupal.org/node/897638 +// @todo Define styles when focused. + .u-screen-reader-text.-focusable { @include u-accessibly-focusable; } diff --git a/assets/styles/utilities/_print.scss b/assets/styles/utilities/_print.scss index 2d6641d..90a320e 100644 --- a/assets/styles/utilities/_print.scss +++ b/assets/styles/utilities/_print.scss @@ -2,18 +2,18 @@ // Utilities / Print Mode // ========================================================================== -//// -/// Very crude, reset-like styles taken from the HTML5 Boilerplate: -/// - https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/css.md#print-styles -/// - https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L205-L282 -/// -/// @link https://github.com/inuitcss/inuitcss/blob/c27993f/utilities/_utilities.print.scss -//// +// +// Very crude, reset-like styles taken from the HTML5 Boilerplate: +// - https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/css.md#print-styles +// - https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L205-L282 +// +// @link https://github.com/inuitcss/inuitcss/blob/c27993f/utilities/_utilities.print.scss @media print { - /** - * 1. Black prints faster: http://www.sanbeiji.com/archives/953 - */ + + // + // 1. Black prints faster: http://www.sanbeiji.com/archives/953 + *, *:before, *:after, @@ -21,7 +21,7 @@ *:first-line { background: transparent !important; box-shadow: none !important; - color: #000000 !important; /* [1] */ + color: #000000 !important; // [1] text-shadow: none !important; } @@ -38,10 +38,10 @@ content: " (" attr(title) ")"; } - /** - * Don't show links that are fragment identifiers, or use the `javascript:` - * pseudo protocol. - */ + // + // Don't show links that are fragment identifiers, or use the `javascript:` + // pseudo protocol. + a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; @@ -53,9 +53,9 @@ page-break-inside: avoid; } - /** - * Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables - */ + // + // Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables + thead { display: table-header-group; } diff --git a/assets/styles/utilities/_ratio.scss b/assets/styles/utilities/_ratio.scss index d783e27..dbd280e 100644 --- a/assets/styles/utilities/_ratio.scss +++ b/assets/styles/utilities/_ratio.scss @@ -4,10 +4,8 @@ // // @link https://github.com/inuitcss/inuitcss/blob/19d0c7e/objects/_objects.ratio.scss -// // A list of aspect ratios that get generated as modifier classes. - $aspect-ratios: ( (2:1), (4:3), @@ -21,8 +19,7 @@ $aspect-ratios: ( // // @example //
-// -// + @each $ratio in $aspect-ratios { @each $antecedent, $consequent in $ratio { @if (type-of($antecedent) != number) { diff --git a/assets/styles/utilities/_spacing.scss b/assets/styles/utilities/_spacing.scss index 7f4744a..e56dfe2 100644 --- a/assets/styles/utilities/_spacing.scss +++ b/assets/styles/utilities/_spacing.scss @@ -2,21 +2,20 @@ // Utilities / Spacing // ========================================================================== -//// -/// Utility classes to put specific spacing values onto elements. The below loop -/// will generate us a suite of classes like: -/// -/// @example -/// .u-margin-top {} -/// .u-padding-left-large {} -/// .u-margin-right-small {} -/// .u-padding {} -/// .u-padding-right-none {} -/// .u-padding-horizontal {} -/// .u-padding-vertical-small {} -/// -/// @link https://github.com/inuitcss/inuitcss/blob/512977a/utilities/_utilities.spacing.scss -//// +// +// Utility classes to put specific spacing values onto elements. The below loop +// will generate us a suite of classes like: +// +// @example +// .u-margin-top {} +// .u-padding-left-large {} +// .u-margin-right-small {} +// .u-padding {} +// .u-padding-right-none {} +// .u-padding-horizontal {} +// .u-padding-vertical-small {} +// +// @link https://github.com/inuitcss/inuitcss/blob/512977a/utilities/_utilities.spacing.scss /* stylelint-disable string-quotes */ diff --git a/assets/styles/utilities/_states.scss b/assets/styles/utilities/_states.scss index e1318fd..4e03176 100644 --- a/assets/styles/utilities/_states.scss +++ b/assets/styles/utilities/_states.scss @@ -2,9 +2,9 @@ // Utilities / States // ========================================================================== -/** - * ARIA roles display visual cursor hints - */ +// +// ARIA roles display visual cursor hints + [aria-busy="true"] { cursor: progress; } @@ -17,9 +17,8 @@ cursor: default; } -/** - * Control visibility without affecting flow. - */ +// +// Control visibility without affecting flow. .is-visible { visibility: visible !important; @@ -31,9 +30,8 @@ opacity: 0 !important; } -/** - * Completely remove from the flow and screen readers. - */ +// +// Completely remove from the flow and screen readers. .is-hidden { @include u-hidden; @@ -63,9 +61,9 @@ // } // } -// /** -// * Display a hidden-by-default element. -// */ +// // +// // Display a hidden-by-default element. +// // .is-shown { // @include u-shown; diff --git a/assets/styles/utilities/_widths.scss b/assets/styles/utilities/_widths.scss index e22ffe1..ffa0498 100644 --- a/assets/styles/utilities/_widths.scss +++ b/assets/styles/utilities/_widths.scss @@ -2,19 +2,19 @@ // Utilities / Widths // ========================================================================== -//// -/// @link https://github.com/inuitcss/inuitcss/blob/6eb574f/utilities/_utilities.widths.scss -//// +// +// @link https://github.com/inuitcss/inuitcss/blob/6eb574f/utilities/_utilities.widths.scss +// -/// Which fractions would you like in your grid system(s)? -/// By default, the boilerplate provides fractions of one whole, halves, thirds, -/// quarters, and fifths, e.g.: -/// -/// @example css -/// .u-1/2 -/// .u-2/5 -/// .u-3/4 -/// .u-2/3 +// Which fractions would you like in your grid system(s)? +// By default, the boilerplate provides fractions of one whole, halves, thirds, +// quarters, and fifths, e.g.: +// +// @example css +// .u-1/2 +// .u-2/5 +// .u-3/4 +// .u-2/3 $widths-fractions: 1 2 3 4 5 !default; @include widths($widths-fractions); diff --git a/www/assets/styles/main.css b/www/assets/styles/main.css index f6d9aba..537466f 100644 --- a/www/assets/styles/main.css +++ b/www/assets/styles/main.css @@ -394,11 +394,7 @@ h1, h2, h3, h4, h5, h6 { margin: 0; } -/** - * 1. Single taps should be dispatched immediately on clickable elements - */ a, area, button, input, label, select, textarea, [tabindex] { - /* [1] */ touch-action: manipulation; } @@ -427,7 +423,6 @@ img, svg, video { vertical-align: middle; - /* [1] */ } audio:not([controls]) { @@ -438,25 +433,21 @@ audio:not([controls]) { img, svg { max-width: 100%; - /* [2] */ height: auto; } img[width], img[height], svg[width], svg[height] { - /* [4] */ max-width: none; } img { font-style: italic; - /* [4] */ } svg { fill: currentColor; - /* [5] */ } input, @@ -499,27 +490,20 @@ textarea { button, .c-button { display: inline-block; - /* [1] */ overflow: visible; - /* [2] */ margin: 0; - /* [3] */ padding: 0; outline: 0; border: 0; background: none transparent; color: inherit; vertical-align: middle; - /* [4] */ text-align: center; - /* [3] */ text-decoration: none; text-transform: none; font: inherit; - /* [5] */ line-height: normal; cursor: pointer; - /* [6] */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -635,14 +619,6 @@ a:focus, a:hover { max-width: 132.5rem; } -/** - * Create ratio-bound content blocks, to keep media (e.g. images, videos) in - * their correct aspect ratios. - * - * http://alistapart.com/article/creating-intrinsic-ratios-for-video - * - * 1. Default cropping is a 1:1 ratio (i.e. a perfect square). - */ .o-ratio { position: relative; display: block; @@ -652,7 +628,6 @@ a:focus, a:hover { .o-ratio:before { display: block; padding-bottom: 100%; - /* [1] */ width: 100%; content: ""; } diff --git a/www/assets/styles/main.css.map b/www/assets/styles/main.css.map index 08c8a52..53c0772 100644 --- a/www/assets/styles/main.css.map +++ b/www/assets/styles/main.css.map @@ -1 +1 @@ -{"version":3,"sources":["main.css"],"names":[],"mappings":"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","file":"main.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n/* Document\n ========================================================================== */\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\nhtml {\n line-height: 1.15;\n /* 1 */\n -webkit-text-size-adjust: 100%;\n /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n/**\n * Remove the margin in all browsers.\n */\nbody {\n margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\nmain {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\nhr {\n box-sizing: content-box;\n /* 1 */\n height: 0;\n /* 1 */\n overflow: visible;\n /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\npre {\n font-family: monospace, monospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n/**\n * Remove the gray background on active links in IE 10.\n */\na {\n background-color: transparent;\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\nabbr[title] {\n border-bottom: none;\n /* 1 */\n text-decoration: underline;\n /* 2 */\n text-decoration: underline dotted;\n /* 2 */\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n/**\n * Remove the border on images inside links in IE 10.\n */\nimg {\n border-style: none;\n}\n\n/* Forms\n ========================================================================== */\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n /* 1 */\n font-size: 100%;\n /* 1 */\n line-height: 1.15;\n /* 1 */\n margin: 0;\n /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\nbutton,\ninput {\n /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\nbutton,\nselect {\n /* 1 */\n text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\nlegend {\n box-sizing: border-box;\n /* 1 */\n color: inherit;\n /* 2 */\n display: table;\n /* 1 */\n max-width: 100%;\n /* 1 */\n padding: 0;\n /* 3 */\n white-space: normal;\n /* 1 */\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\nprogress {\n vertical-align: baseline;\n}\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box;\n /* 1 */\n padding: 0;\n /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n[type=\"search\"] {\n -webkit-appearance: textfield;\n /* 1 */\n outline-offset: -2px;\n /* 2 */\n}\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n /* 1 */\n font: inherit;\n /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\ndetails {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\nsummary {\n display: list-item;\n}\n\n/* Misc\n ========================================================================== */\n/**\n * Add the correct display in IE 10+.\n */\ntemplate {\n display: none;\n}\n\n/**\n * Add the correct display in IE 10.\n */\n[hidden] {\n display: none;\n}\n\nhtml {\n box-sizing: border-box;\n}\n\ntemplate,\n[hidden] {\n display: none;\n}\n\n*,\n:before,\n:after {\n box-sizing: inherit;\n}\n\naddress {\n font-style: inherit;\n}\n\ndfn,\ncite,\nem,\ni {\n font-style: italic;\n}\n\nb,\nstrong {\n font-weight: 700;\n}\n\na {\n text-decoration: none;\n}\n\na svg {\n pointer-events: none;\n}\n\nul,\nol {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\np,\nfigure {\n margin: 0;\n padding: 0;\n}\n\nh1, h2, h3, h4, h5, h6 {\n margin: 0;\n}\n\n/**\n * 1. Single taps should be dispatched immediately on clickable elements\n */\na, area, button, input, label, select, textarea, [tabindex] {\n -ms-touch-action: manipulation;\n /* [1] */\n touch-action: manipulation;\n}\n\n[hreflang] > abbr[title] {\n text-decoration: none;\n}\n\ntable {\n border-spacing: 0;\n border-collapse: collapse;\n}\n\nhr {\n display: block;\n margin: 1em 0;\n padding: 0;\n height: 1px;\n border: 0;\n border-top: 1px solid #CCCCCC;\n}\n\naudio,\ncanvas,\niframe,\nimg,\nsvg,\nvideo {\n vertical-align: middle;\n /* [1] */\n}\n\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\nimg,\nsvg {\n max-width: 100%;\n /* [2] */\n height: auto;\n}\n\nimg[width], img[height],\nsvg[width],\nsvg[height] {\n /* [4] */\n max-width: none;\n}\n\nimg {\n font-style: italic;\n /* [4] */\n}\n\nsvg {\n fill: currentColor;\n /* [5] */\n}\n\ninput,\nselect,\ntextarea {\n display: block;\n margin: 0;\n padding: 0;\n width: 100%;\n outline: 0;\n border: 0;\n border-radius: 0;\n background: none transparent;\n color: inherit;\n font: inherit;\n line-height: normal;\n appearance: none;\n}\n\nselect {\n text-transform: none;\n}\n\nselect::-ms-expand {\n display: none;\n}\n\nselect::-ms-value {\n background: none;\n color: inherit;\n}\n\ntextarea {\n overflow: auto;\n resize: vertical;\n}\n\nbutton,\n.c-button {\n display: inline-block;\n /* [1] */\n overflow: visible;\n /* [2] */\n margin: 0;\n /* [3] */\n padding: 0;\n outline: 0;\n border: 0;\n background: none transparent;\n color: inherit;\n vertical-align: middle;\n /* [4] */\n text-align: center;\n /* [3] */\n text-decoration: none;\n text-transform: none;\n font: inherit;\n /* [5] */\n line-height: normal;\n cursor: pointer;\n /* [6] */\n user-select: none;\n}\n\nbutton:focus, button:hover,\n.c-button:focus,\n.c-button:hover {\n text-decoration: none;\n}\n\nhtml {\n min-height: 100%;\n line-height: 1.5;\n font-family: \"Webfont Sans\", \"Helvetica Neue\", Arial, sans-serif;\n color: #222222;\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n@media (max-width: 699px) {\n html {\n font-size: 14px;\n }\n}\n\n@media (min-width: 700px) and (max-width: 999px) {\n html {\n font-size: 14px;\n }\n}\n\n@media (min-width: 1000px) and (max-width: 1199px) {\n html {\n font-size: 15px;\n }\n}\n\n@media (min-width: 1200px) and (max-width: 1599px) {\n html {\n font-size: 16px;\n }\n}\n\n@media (min-width: 1600px) and (max-width: 1999px) {\n html {\n font-size: 17px;\n }\n}\n\n@media (min-width: 2000px) and (max-width: 2399px) {\n html {\n font-size: 18px;\n }\n}\n\n@media (min-width: 2400px) {\n html {\n font-size: 20px;\n }\n}\n\nhtml.is-loading {\n cursor: wait;\n}\n\nhtml.has-scroll-smooth {\n overflow: hidden;\n}\n\nhtml.has-scroll-dragging {\n user-select: none;\n}\n\n.has-scroll-smooth body {\n overflow: hidden;\n}\n\n::selection {\n background-color: #FFFFFF;\n color: #3297FD;\n text-shadow: none;\n}\n\na {\n color: #1A0DAB;\n}\n\na:focus, a:hover {\n color: #13097c;\n}\n\n.o-scroll {\n min-height: 100vh;\n}\n\n.o-container {\n margin-right: auto;\n margin-left: auto;\n padding-right: 3.75rem;\n padding-left: 3.75rem;\n max-width: 132.5rem;\n}\n\n/**\n * Create ratio-bound content blocks, to keep media (e.g. images, videos) in\n * their correct aspect ratios.\n *\n * http://alistapart.com/article/creating-intrinsic-ratios-for-video\n *\n * 1. Default cropping is a 1:1 ratio (i.e. a perfect square).\n */\n.o-ratio {\n position: relative;\n display: block;\n overflow: hidden;\n}\n\n.o-ratio:before {\n display: block;\n padding-bottom: 100%;\n /* [1] */\n width: 100%;\n content: \"\";\n}\n\n.o-ratio_content,\n.o-ratio > img,\n.o-ratio > iframe,\n.o-ratio > embed,\n.o-ratio > object {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n}\n\n.o-layout {\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: 0;\n margin-left: 0;\n}\n\n.o-layout.-gutter {\n margin-left: -3.75rem;\n}\n\n.o-layout.-gutter-small {\n margin-left: -1.875rem;\n}\n\n.o-layout.-center {\n text-align: center;\n}\n\n.o-layout.-right {\n text-align: right;\n}\n\n.o-layout.-reverse {\n direction: rtl;\n}\n\n.o-layout.-reverse.-flex {\n flex-direction: row-reverse;\n}\n\n.o-layout.-flex {\n display: flex;\n}\n\n.o-layout.-flex.-top {\n align-items: flex-start;\n}\n\n.o-layout.-flex.-middle {\n align-items: center;\n}\n\n.o-layout.-flex.-bottom {\n align-items: flex-end;\n}\n\n.o-layout.-stretch {\n align-items: stretch;\n}\n\n.o-layout_item {\n display: inline-block;\n width: 100%;\n vertical-align: top;\n font-size: 1rem;\n padding-left: 0;\n}\n\n.o-layout.-gutter > .o-layout_item {\n padding-left: 3.75rem;\n}\n\n.o-layout.-gutter-small > .o-layout_item {\n padding-left: 1.875rem;\n}\n\n.o-layout.-middle > .o-layout_item {\n vertical-align: middle;\n}\n\n.o-layout.-bottom > .o-layout_item {\n vertical-align: bottom;\n}\n\n.o-layout.-center > .o-layout_item,\n.o-layout.-right > .o-layout_item,\n.o-layout.-reverse > .o-layout_item {\n text-align: left;\n}\n\n.o-layout.-reverse > .o-layout_item {\n direction: ltr;\n}\n\n.c-scrollbar {\n position: absolute;\n right: 0;\n top: 0;\n width: 11px;\n height: 100vh;\n transform-origin: center right;\n transition: transform 0.3s, opacity 0.3s;\n opacity: 0;\n}\n\n.c-scrollbar:hover {\n transform: scaleX(1.45);\n}\n\n.c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar {\n opacity: 1;\n}\n\n.c-scrollbar_thumb {\n position: absolute;\n top: 0;\n right: 0;\n background-color: black;\n opacity: 0.5;\n width: 7px;\n border-radius: 10px;\n margin: 2px;\n cursor: grab;\n}\n\n.has-scroll-dragging .c-scrollbar_thumb {\n cursor: grabbing;\n}\n\n.c-heading {\n line-height: 1.5;\n margin-bottom: 1.875rem;\n}\n\n.c-heading.-h1 {\n font-size: 2.25rem;\n}\n\n.c-heading.-h2 {\n font-size: 1.75rem;\n}\n\n.c-heading.-h3 {\n font-size: 1.5rem;\n}\n\n.c-heading.-h4 {\n font-size: 1.25rem;\n}\n\n.c-heading.-h5 {\n font-size: 1.125rem;\n}\n\n.c-heading.-h6 {\n font-size: 1rem;\n}\n\n.c-button {\n padding: 0.9375rem 1.25rem;\n background-color: lightgray;\n}\n\n.c-button:focus, .c-button:hover {\n background-color: darkgray;\n}\n\n.c-form_item {\n position: relative;\n margin-bottom: 1.875rem;\n}\n\n.c-form_label, .c-form_checkboxLabel, .c-form_radioLabel {\n display: block;\n margin-bottom: 0.625rem;\n}\n\n.c-form_input, .c-form_select_input, .c-form_textarea {\n padding: 0.625rem;\n border: 1px solid lightgray;\n background-color: white;\n}\n\n.c-form_input:hover, .c-form_select_input:hover, .c-form_textarea:hover {\n border-color: darkgray;\n}\n\n.c-form_input:focus, .c-form_select_input:focus, .c-form_textarea:focus {\n border-color: dimgray;\n}\n\n.c-form_input::placeholder, .c-form_select_input::placeholder, .c-form_textarea::placeholder {\n color: gray;\n}\n\n.c-form_checkboxLabel, .c-form_radioLabel {\n position: relative;\n display: inline-block;\n margin-right: 0.625rem;\n margin-bottom: 0;\n padding-left: 1.75rem;\n cursor: pointer;\n}\n\n.c-form_checkboxLabel::before, .c-form_radioLabel::before, .c-form_checkboxLabel::after, .c-form_radioLabel::after {\n position: absolute;\n top: 50%;\n left: 0;\n display: inline-block;\n margin-top: -0.5625rem;\n padding: 0;\n width: 1.125rem;\n height: 1.125rem;\n content: \"\";\n}\n\n.c-form_checkboxLabel::before, .c-form_radioLabel::before {\n background-color: #FFFFFF;\n border: 1px solid lightgray;\n}\n\n.c-form_checkboxLabel::after, .c-form_radioLabel::after {\n border-color: transparent;\n background-color: transparent;\n background-image: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2210.5%22%20viewBox%3D%220%200%2013%2010.5%22%20enable-background%3D%22new%200%200%2013%2010.5%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23424242%22%20d%3D%22M4.8%205.8L2.4%203.3%200%205.7l4.8%204.8L13%202.4c0%200-2.4-2.4-2.4-2.4L4.8%205.8z%22%2F%3E%3C%2Fsvg%3E\");\n background-position: center;\n background-size: 0.75rem;\n background-repeat: no-repeat;\n opacity: 0;\n}\n\n.c-form_checkboxLabel:hover::before, .c-form_radioLabel:hover::before {\n border-color: darkgray;\n}\n\n.c-form_checkbox:focus + .c-form_checkboxLabel::before, .c-form_radio:focus + .c-form_checkboxLabel::before, .c-form_checkbox:focus + .c-form_radioLabel::before, .c-form_radio:focus + .c-form_radioLabel::before {\n border-color: dimgray;\n}\n\n.c-form_checkbox:checked + .c-form_checkboxLabel::after, .c-form_radio:checked + .c-form_checkboxLabel::after, .c-form_checkbox:checked + .c-form_radioLabel::after, .c-form_radio:checked + .c-form_radioLabel::after {\n opacity: 1;\n}\n\n.c-form_checkbox, .c-form_radio {\n position: absolute;\n width: 0;\n opacity: 0;\n}\n\n.c-form_radioLabel::before, .c-form_radioLabel::after {\n border-radius: 50%;\n}\n\n.c-form_radioLabel::after {\n background-image: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%20xml%3Aspace%3D%22preserve%22%3E%3Ccircle%20fill%3D%22%23424242%22%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%2F%3E%3C%2Fsvg%3E\");\n background-size: 0.375rem;\n}\n\n.c-form_select {\n position: relative;\n cursor: pointer;\n}\n\n.c-form_select::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: 2;\n width: 2.5rem;\n background-image: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2211.3%22%20viewBox%3D%220%200%2013%2011.3%22%20enable-background%3D%22new%200%200%2013%2011.3%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23424242%22%20points%3D%226.5%2011.3%203.3%205.6%200%200%206.5%200%2013%200%209.8%205.6%20%22%2F%3E%3C%2Fsvg%3E\");\n background-position: center;\n background-size: 0.5rem;\n background-repeat: no-repeat;\n content: \"\";\n pointer-events: none;\n}\n\n.c-form_select_input {\n position: relative;\n z-index: 1;\n padding-right: 2.5rem;\n cursor: pointer;\n}\n\n.c-form_textarea {\n min-height: 12.5rem;\n}\n\n/* stylelint-disable */\n.u-2\\:1::before {\n padding-bottom: 50%;\n}\n\n.u-4\\:3::before {\n padding-bottom: 75%;\n}\n\n.u-16\\:9::before {\n padding-bottom: 56.25%;\n}\n\n/* stylelint-enable */\n.u-1\\/1 {\n width: 100% !important;\n}\n\n.u-1\\/2 {\n width: 50% !important;\n}\n\n.u-2\\/2 {\n width: 100% !important;\n}\n\n.u-1\\/3 {\n width: 33.33333% !important;\n}\n\n.u-2\\/3 {\n width: 66.66667% !important;\n}\n\n.u-3\\/3 {\n width: 100% !important;\n}\n\n.u-1\\/4 {\n width: 25% !important;\n}\n\n.u-2\\/4 {\n width: 50% !important;\n}\n\n.u-3\\/4 {\n width: 75% !important;\n}\n\n.u-4\\/4 {\n width: 100% !important;\n}\n\n.u-1\\/5 {\n width: 20% !important;\n}\n\n.u-2\\/5 {\n width: 40% !important;\n}\n\n.u-3\\/5 {\n width: 60% !important;\n}\n\n.u-4\\/5 {\n width: 80% !important;\n}\n\n.u-5\\/5 {\n width: 100% !important;\n}\n\n@media (min-width: 700px) {\n .u-1\\/2\\@from-small {\n width: 50%;\n }\n}\n"]} \ No newline at end of file +{"version":3,"sources":["main.css"],"names":[],"mappings":"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","file":"main.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n/* Document\n ========================================================================== */\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\nhtml {\n line-height: 1.15;\n /* 1 */\n -webkit-text-size-adjust: 100%;\n /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n/**\n * Remove the margin in all browsers.\n */\nbody {\n margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\nmain {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\nhr {\n box-sizing: content-box;\n /* 1 */\n height: 0;\n /* 1 */\n overflow: visible;\n /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\npre {\n font-family: monospace, monospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n/**\n * Remove the gray background on active links in IE 10.\n */\na {\n background-color: transparent;\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\nabbr[title] {\n border-bottom: none;\n /* 1 */\n text-decoration: underline;\n /* 2 */\n text-decoration: underline dotted;\n /* 2 */\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n/**\n * Remove the border on images inside links in IE 10.\n */\nimg {\n border-style: none;\n}\n\n/* Forms\n ========================================================================== */\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n /* 1 */\n font-size: 100%;\n /* 1 */\n line-height: 1.15;\n /* 1 */\n margin: 0;\n /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\nbutton,\ninput {\n /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\nbutton,\nselect {\n /* 1 */\n text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\nlegend {\n box-sizing: border-box;\n /* 1 */\n color: inherit;\n /* 2 */\n display: table;\n /* 1 */\n max-width: 100%;\n /* 1 */\n padding: 0;\n /* 3 */\n white-space: normal;\n /* 1 */\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\nprogress {\n vertical-align: baseline;\n}\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box;\n /* 1 */\n padding: 0;\n /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n[type=\"search\"] {\n -webkit-appearance: textfield;\n /* 1 */\n outline-offset: -2px;\n /* 2 */\n}\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n /* 1 */\n font: inherit;\n /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\ndetails {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\nsummary {\n display: list-item;\n}\n\n/* Misc\n ========================================================================== */\n/**\n * Add the correct display in IE 10+.\n */\ntemplate {\n display: none;\n}\n\n/**\n * Add the correct display in IE 10.\n */\n[hidden] {\n display: none;\n}\n\nhtml {\n box-sizing: border-box;\n}\n\ntemplate,\n[hidden] {\n display: none;\n}\n\n*,\n:before,\n:after {\n box-sizing: inherit;\n}\n\naddress {\n font-style: inherit;\n}\n\ndfn,\ncite,\nem,\ni {\n font-style: italic;\n}\n\nb,\nstrong {\n font-weight: 700;\n}\n\na {\n text-decoration: none;\n}\n\na svg {\n pointer-events: none;\n}\n\nul,\nol {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\np,\nfigure {\n margin: 0;\n padding: 0;\n}\n\nh1, h2, h3, h4, h5, h6 {\n margin: 0;\n}\n\na, area, button, input, label, select, textarea, [tabindex] {\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n}\n\n[hreflang] > abbr[title] {\n text-decoration: none;\n}\n\ntable {\n border-spacing: 0;\n border-collapse: collapse;\n}\n\nhr {\n display: block;\n margin: 1em 0;\n padding: 0;\n height: 1px;\n border: 0;\n border-top: 1px solid #CCCCCC;\n}\n\naudio,\ncanvas,\niframe,\nimg,\nsvg,\nvideo {\n vertical-align: middle;\n}\n\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\nimg,\nsvg {\n max-width: 100%;\n height: auto;\n}\n\nimg[width], img[height],\nsvg[width],\nsvg[height] {\n max-width: none;\n}\n\nimg {\n font-style: italic;\n}\n\nsvg {\n fill: currentColor;\n}\n\ninput,\nselect,\ntextarea {\n display: block;\n margin: 0;\n padding: 0;\n width: 100%;\n outline: 0;\n border: 0;\n border-radius: 0;\n background: none transparent;\n color: inherit;\n font: inherit;\n line-height: normal;\n appearance: none;\n}\n\nselect {\n text-transform: none;\n}\n\nselect::-ms-expand {\n display: none;\n}\n\nselect::-ms-value {\n background: none;\n color: inherit;\n}\n\ntextarea {\n overflow: auto;\n resize: vertical;\n}\n\nbutton,\n.c-button {\n display: inline-block;\n overflow: visible;\n margin: 0;\n padding: 0;\n outline: 0;\n border: 0;\n background: none transparent;\n color: inherit;\n vertical-align: middle;\n text-align: center;\n text-decoration: none;\n text-transform: none;\n font: inherit;\n line-height: normal;\n cursor: pointer;\n user-select: none;\n}\n\nbutton:focus, button:hover,\n.c-button:focus,\n.c-button:hover {\n text-decoration: none;\n}\n\nhtml {\n min-height: 100%;\n line-height: 1.5;\n font-family: \"Webfont Sans\", \"Helvetica Neue\", Arial, sans-serif;\n color: #222222;\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n@media (max-width: 699px) {\n html {\n font-size: 14px;\n }\n}\n\n@media (min-width: 700px) and (max-width: 999px) {\n html {\n font-size: 14px;\n }\n}\n\n@media (min-width: 1000px) and (max-width: 1199px) {\n html {\n font-size: 15px;\n }\n}\n\n@media (min-width: 1200px) and (max-width: 1599px) {\n html {\n font-size: 16px;\n }\n}\n\n@media (min-width: 1600px) and (max-width: 1999px) {\n html {\n font-size: 17px;\n }\n}\n\n@media (min-width: 2000px) and (max-width: 2399px) {\n html {\n font-size: 18px;\n }\n}\n\n@media (min-width: 2400px) {\n html {\n font-size: 20px;\n }\n}\n\nhtml.is-loading {\n cursor: wait;\n}\n\nhtml.has-scroll-smooth {\n overflow: hidden;\n}\n\nhtml.has-scroll-dragging {\n user-select: none;\n}\n\n.has-scroll-smooth body {\n overflow: hidden;\n}\n\n::selection {\n background-color: #FFFFFF;\n color: #3297FD;\n text-shadow: none;\n}\n\na {\n color: #1A0DAB;\n}\n\na:focus, a:hover {\n color: #13097c;\n}\n\n.o-scroll {\n min-height: 100vh;\n}\n\n.o-container {\n margin-right: auto;\n margin-left: auto;\n padding-right: 3.75rem;\n padding-left: 3.75rem;\n max-width: 132.5rem;\n}\n\n.o-ratio {\n position: relative;\n display: block;\n overflow: hidden;\n}\n\n.o-ratio:before {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n content: \"\";\n}\n\n.o-ratio_content,\n.o-ratio > img,\n.o-ratio > iframe,\n.o-ratio > embed,\n.o-ratio > object {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n}\n\n.o-layout {\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: 0;\n margin-left: 0;\n}\n\n.o-layout.-gutter {\n margin-left: -3.75rem;\n}\n\n.o-layout.-gutter-small {\n margin-left: -1.875rem;\n}\n\n.o-layout.-center {\n text-align: center;\n}\n\n.o-layout.-right {\n text-align: right;\n}\n\n.o-layout.-reverse {\n direction: rtl;\n}\n\n.o-layout.-reverse.-flex {\n flex-direction: row-reverse;\n}\n\n.o-layout.-flex {\n display: flex;\n}\n\n.o-layout.-flex.-top {\n align-items: flex-start;\n}\n\n.o-layout.-flex.-middle {\n align-items: center;\n}\n\n.o-layout.-flex.-bottom {\n align-items: flex-end;\n}\n\n.o-layout.-stretch {\n align-items: stretch;\n}\n\n.o-layout_item {\n display: inline-block;\n width: 100%;\n vertical-align: top;\n font-size: 1rem;\n padding-left: 0;\n}\n\n.o-layout.-gutter > .o-layout_item {\n padding-left: 3.75rem;\n}\n\n.o-layout.-gutter-small > .o-layout_item {\n padding-left: 1.875rem;\n}\n\n.o-layout.-middle > .o-layout_item {\n vertical-align: middle;\n}\n\n.o-layout.-bottom > .o-layout_item {\n vertical-align: bottom;\n}\n\n.o-layout.-center > .o-layout_item,\n.o-layout.-right > .o-layout_item,\n.o-layout.-reverse > .o-layout_item {\n text-align: left;\n}\n\n.o-layout.-reverse > .o-layout_item {\n direction: ltr;\n}\n\n.c-scrollbar {\n position: absolute;\n right: 0;\n top: 0;\n width: 11px;\n height: 100vh;\n transform-origin: center right;\n transition: transform 0.3s, opacity 0.3s;\n opacity: 0;\n}\n\n.c-scrollbar:hover {\n transform: scaleX(1.45);\n}\n\n.c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar {\n opacity: 1;\n}\n\n.c-scrollbar_thumb {\n position: absolute;\n top: 0;\n right: 0;\n background-color: black;\n opacity: 0.5;\n width: 7px;\n border-radius: 10px;\n margin: 2px;\n cursor: grab;\n}\n\n.has-scroll-dragging .c-scrollbar_thumb {\n cursor: grabbing;\n}\n\n.c-heading {\n line-height: 1.5;\n margin-bottom: 1.875rem;\n}\n\n.c-heading.-h1 {\n font-size: 2.25rem;\n}\n\n.c-heading.-h2 {\n font-size: 1.75rem;\n}\n\n.c-heading.-h3 {\n font-size: 1.5rem;\n}\n\n.c-heading.-h4 {\n font-size: 1.25rem;\n}\n\n.c-heading.-h5 {\n font-size: 1.125rem;\n}\n\n.c-heading.-h6 {\n font-size: 1rem;\n}\n\n.c-button {\n padding: 0.9375rem 1.25rem;\n background-color: lightgray;\n}\n\n.c-button:focus, .c-button:hover {\n background-color: darkgray;\n}\n\n.c-form_item {\n position: relative;\n margin-bottom: 1.875rem;\n}\n\n.c-form_label, .c-form_checkboxLabel, .c-form_radioLabel {\n display: block;\n margin-bottom: 0.625rem;\n}\n\n.c-form_input, .c-form_select_input, .c-form_textarea {\n padding: 0.625rem;\n border: 1px solid lightgray;\n background-color: white;\n}\n\n.c-form_input:hover, .c-form_select_input:hover, .c-form_textarea:hover {\n border-color: darkgray;\n}\n\n.c-form_input:focus, .c-form_select_input:focus, .c-form_textarea:focus {\n border-color: dimgray;\n}\n\n.c-form_input::placeholder, .c-form_select_input::placeholder, .c-form_textarea::placeholder {\n color: gray;\n}\n\n.c-form_checkboxLabel, .c-form_radioLabel {\n position: relative;\n display: inline-block;\n margin-right: 0.625rem;\n margin-bottom: 0;\n padding-left: 1.75rem;\n cursor: pointer;\n}\n\n.c-form_checkboxLabel::before, .c-form_radioLabel::before, .c-form_checkboxLabel::after, .c-form_radioLabel::after {\n position: absolute;\n top: 50%;\n left: 0;\n display: inline-block;\n margin-top: -0.5625rem;\n padding: 0;\n width: 1.125rem;\n height: 1.125rem;\n content: \"\";\n}\n\n.c-form_checkboxLabel::before, .c-form_radioLabel::before {\n background-color: #FFFFFF;\n border: 1px solid lightgray;\n}\n\n.c-form_checkboxLabel::after, .c-form_radioLabel::after {\n border-color: transparent;\n background-color: transparent;\n background-image: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2210.5%22%20viewBox%3D%220%200%2013%2010.5%22%20enable-background%3D%22new%200%200%2013%2010.5%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23424242%22%20d%3D%22M4.8%205.8L2.4%203.3%200%205.7l4.8%204.8L13%202.4c0%200-2.4-2.4-2.4-2.4L4.8%205.8z%22%2F%3E%3C%2Fsvg%3E\");\n background-position: center;\n background-size: 0.75rem;\n background-repeat: no-repeat;\n opacity: 0;\n}\n\n.c-form_checkboxLabel:hover::before, .c-form_radioLabel:hover::before {\n border-color: darkgray;\n}\n\n.c-form_checkbox:focus + .c-form_checkboxLabel::before, .c-form_radio:focus + .c-form_checkboxLabel::before, .c-form_checkbox:focus + .c-form_radioLabel::before, .c-form_radio:focus + .c-form_radioLabel::before {\n border-color: dimgray;\n}\n\n.c-form_checkbox:checked + .c-form_checkboxLabel::after, .c-form_radio:checked + .c-form_checkboxLabel::after, .c-form_checkbox:checked + .c-form_radioLabel::after, .c-form_radio:checked + .c-form_radioLabel::after {\n opacity: 1;\n}\n\n.c-form_checkbox, .c-form_radio {\n position: absolute;\n width: 0;\n opacity: 0;\n}\n\n.c-form_radioLabel::before, .c-form_radioLabel::after {\n border-radius: 50%;\n}\n\n.c-form_radioLabel::after {\n background-image: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%20xml%3Aspace%3D%22preserve%22%3E%3Ccircle%20fill%3D%22%23424242%22%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%2F%3E%3C%2Fsvg%3E\");\n background-size: 0.375rem;\n}\n\n.c-form_select {\n position: relative;\n cursor: pointer;\n}\n\n.c-form_select::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: 2;\n width: 2.5rem;\n background-image: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2211.3%22%20viewBox%3D%220%200%2013%2011.3%22%20enable-background%3D%22new%200%200%2013%2011.3%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23424242%22%20points%3D%226.5%2011.3%203.3%205.6%200%200%206.5%200%2013%200%209.8%205.6%20%22%2F%3E%3C%2Fsvg%3E\");\n background-position: center;\n background-size: 0.5rem;\n background-repeat: no-repeat;\n content: \"\";\n pointer-events: none;\n}\n\n.c-form_select_input {\n position: relative;\n z-index: 1;\n padding-right: 2.5rem;\n cursor: pointer;\n}\n\n.c-form_textarea {\n min-height: 12.5rem;\n}\n\n/* stylelint-disable */\n.u-2\\:1::before {\n padding-bottom: 50%;\n}\n\n.u-4\\:3::before {\n padding-bottom: 75%;\n}\n\n.u-16\\:9::before {\n padding-bottom: 56.25%;\n}\n\n/* stylelint-enable */\n.u-1\\/1 {\n width: 100% !important;\n}\n\n.u-1\\/2 {\n width: 50% !important;\n}\n\n.u-2\\/2 {\n width: 100% !important;\n}\n\n.u-1\\/3 {\n width: 33.33333% !important;\n}\n\n.u-2\\/3 {\n width: 66.66667% !important;\n}\n\n.u-3\\/3 {\n width: 100% !important;\n}\n\n.u-1\\/4 {\n width: 25% !important;\n}\n\n.u-2\\/4 {\n width: 50% !important;\n}\n\n.u-3\\/4 {\n width: 75% !important;\n}\n\n.u-4\\/4 {\n width: 100% !important;\n}\n\n.u-1\\/5 {\n width: 20% !important;\n}\n\n.u-2\\/5 {\n width: 40% !important;\n}\n\n.u-3\\/5 {\n width: 60% !important;\n}\n\n.u-4\\/5 {\n width: 80% !important;\n}\n\n.u-5\\/5 {\n width: 100% !important;\n}\n\n@media (min-width: 700px) {\n .u-1\\/2\\@from-small {\n width: 50%;\n }\n}\n"]} \ No newline at end of file From 5199ee20251d474abe38842680ee71920111cb93 Mon Sep 17 00:00:00 2001 From: Lucas Vallenet Date: Tue, 17 May 2022 12:08:01 +0200 Subject: [PATCH 2/2] Double comments / Paragraphs and lists line-breaks / Wrap block comments / File-level annotations syntax / Remove leading comments --- assets/styles/elements/_document.scss | 4 +- assets/styles/generic/_button.scss | 1 - assets/styles/generic/_form.scss | 10 ++-- assets/styles/generic/_generic.scss | 2 - assets/styles/generic/_media.scss | 9 +--- assets/styles/objects/_container.scss | 1 - assets/styles/objects/_crop.scss | 16 +++---- assets/styles/objects/_layout.scss | 69 ++++++++++++++------------- assets/styles/objects/_ratio.scss | 1 - assets/styles/objects/_table.scss | 1 - assets/styles/tools/_family.scss | 29 ----------- assets/styles/tools/_fonts.scss | 3 -- assets/styles/tools/_functions.scss | 7 --- assets/styles/tools/_layout.scss | 2 - assets/styles/tools/_mixins.scss | 12 ----- assets/styles/tools/_widths.scss | 4 +- assets/styles/utilities/_helpers.scss | 13 ++--- assets/styles/utilities/_print.scss | 16 +++---- assets/styles/utilities/_ratio.scss | 2 - assets/styles/utilities/_spacing.scss | 29 +++++------ assets/styles/utilities/_states.scss | 13 ++--- assets/styles/utilities/_widths.scss | 26 +++++----- 22 files changed, 99 insertions(+), 171 deletions(-) diff --git a/assets/styles/elements/_document.scss b/assets/styles/elements/_document.scss index 2e3c899..9f64e1c 100644 --- a/assets/styles/elements/_document.scss +++ b/assets/styles/elements/_document.scss @@ -2,12 +2,12 @@ // Elements / Document // ========================================================================== -// // Simple page-level setup. // // 1. Include web fonts // 2. Ensure the page always fills at least the entire height of the viewport. -// 3. Set the default `font-size` and `line-height` for the entire project, sourced from our default variables. +// 3. Set the default `font-size` and `line-height` for the entire project, +// sourced from our default variables. @include font-faces($font-faces, $font-dir); // [1] diff --git a/assets/styles/generic/_button.scss b/assets/styles/generic/_button.scss index bc71461..156619a 100644 --- a/assets/styles/generic/_button.scss +++ b/assets/styles/generic/_button.scss @@ -2,7 +2,6 @@ // Generic / Buttons // ========================================================================== -// // 1. Allow us to style box model properties. // 2. Fixes odd inner spacing in IE7. // 3. Reset/normalize some styles. diff --git a/assets/styles/generic/_form.scss b/assets/styles/generic/_form.scss index 9fe80a2..0598ffe 100644 --- a/assets/styles/generic/_form.scss +++ b/assets/styles/generic/_form.scss @@ -31,11 +31,11 @@ select { color: inherit; } - // Remove Firefox :focus dotted outline, breaks color inherit - // &:-moz-focusring { - // color: transparent; - // text-shadow: 0 0 0 #000000; // Text :focus color - // } + // // Remove Firefox :focus dotted outline, breaks color inherit + // // &:-moz-focusring { + // // color: transparent; + // // text-shadow: 0 0 0 #000000; // Text :focus color + // // } } textarea { diff --git a/assets/styles/generic/_generic.scss b/assets/styles/generic/_generic.scss index 30fd959..21af506 100644 --- a/assets/styles/generic/_generic.scss +++ b/assets/styles/generic/_generic.scss @@ -6,7 +6,6 @@ html { box-sizing: border-box; } -// // Add the correct display in IE 10-. // 1. Add the correct display in IE. @@ -62,7 +61,6 @@ h1, h2, h3, h4, h5, h6 { margin: 0; } -// // 1. Single taps should be dispatched immediately on clickable elements a, area, button, input, label, select, textarea, [tabindex] { diff --git a/assets/styles/generic/_media.scss b/assets/styles/generic/_media.scss index 23f64b2..3740662 100644 --- a/assets/styles/generic/_media.scss +++ b/assets/styles/generic/_media.scss @@ -2,7 +2,6 @@ // Generic / Media // ========================================================================== -// // 1. Setting `vertical-align` removes the whitespace that appears under `img` // elements when they are dropped into a page as-is. Safer alternative to // using `display: block;`. @@ -16,7 +15,6 @@ video { vertical-align: middle; // [1] } -// // Add the correct display in iOS 4-7. audio:not([controls]) { @@ -24,7 +22,6 @@ audio:not([controls]) { height: 0; } -// // 2. Fluid media for responsive purposes. img, @@ -32,8 +29,8 @@ svg { max-width: 100%; // [2] height: auto; - // - // 4. If a `width` and/or `height` attribute have been explicitly defined, let’s not make the image fluid. + // 4. If a `width` and/or `height` attribute have been explicitly defined, + // let’s not make the image fluid. &[width], // [4] &[height] { @@ -42,14 +39,12 @@ svg { } } -// // 4. Offset `alt` text from surrounding copy. img { font-style: italic; // [4] } -// // 5. SVG elements should fallback to their surrounding text color. svg { diff --git a/assets/styles/objects/_container.scss b/assets/styles/objects/_container.scss index 0a5880e..3c8ef89 100644 --- a/assets/styles/objects/_container.scss +++ b/assets/styles/objects/_container.scss @@ -2,7 +2,6 @@ // Objects / Container // ========================================================================== -// // Page-level constraining and wrapping elements. // // > In programming languages the word *container* is generally used for structures diff --git a/assets/styles/objects/_crop.scss b/assets/styles/objects/_crop.scss index d08b308..aec67ee 100644 --- a/assets/styles/objects/_crop.scss +++ b/assets/styles/objects/_crop.scss @@ -2,20 +2,20 @@ // Objects / Crop // ========================================================================== -// // @link https://github.com/inuitcss/inuitcss/blob/19d0c7e/objects/_objects.crop.scss -// + // A list of cropping ratios that get generated as modifier classes. + $crop-ratios: ( (2:1), (4:3), (16:9), ) !default; -// // Provide a cropping container in order to display media (usually images) // cropped to certain ratios. +// // 1. Set up a positioning context in which the image can sit. // 2. This is the crucial part: where the cropping happens. @@ -25,8 +25,8 @@ $crop-ratios: ( overflow: hidden; // [2] } -// // Apply this class to the content (usually `img`) that needs cropping. +// // 1. Image’s default positioning is top-left in the cropping box. // 2. Make sure the media doesn’t stop itself too soon. @@ -36,7 +36,6 @@ $crop-ratios: ( left: 0; // [1] max-width: none; // [2] - // // We can position the media in different locations within the cropping area. &.-right { @@ -58,7 +57,6 @@ $crop-ratios: ( /* stylelint-disable */ -// // Generate a series of crop classes to be used like so: // // @example @@ -68,15 +66,15 @@ $crop-ratios: ( @each $crop in $crop-ratios { @each $antecedent, $consequent in $crop { @if (type-of($antecedent) != number) { - @error "`#{$antecedent}` needs to be a number." + @error "`#{$antecedent}` needs to be a number."; } @if (type-of($consequent) != number) { - @error "`#{$consequent}` needs to be a number." + @error "`#{$consequent}` needs to be a number."; } &.-#{$antecedent}\:#{$consequent} { - padding-bottom: ($consequent/$antecedent) // 100%; + padding-bottom: ($consequent/$antecedent) * 100%; } } } diff --git a/assets/styles/objects/_layout.scss b/assets/styles/objects/_layout.scss index 1129eff..028a1c8 100644 --- a/assets/styles/objects/_layout.scss +++ b/assets/styles/objects/_layout.scss @@ -2,40 +2,41 @@ // Objects / Layout // ========================================================================== -// -// Grid-like layout system. -// -// The layout object provides us with a column-style layout system. This file -// contains the basic structural elements, but classes should be complemented -// with width utilities, for example: -// -// @example -//
-//
-//
-//
-//
-//
-//
-//
-// -// We can also manipulate entire layout systems by adding a series of modifiers -// to the `.o-layout` block. For example: -// -// @example -//
-// -// This will reverse the displayed order of the system so that it runs in the -// opposite order to our source, effectively flipping the system over. -// -// @example -//
-// -// This will cause the system to fill up from either the centre or the right -// hand side. Default behaviour is to fill up the layout system from the left. -// -// @requires tools/layout -// @link https://github.com/inuitcss/inuitcss/blob/0420ba8/objects/_objects.layout.scss +//// +/// Grid-like layout system. +/// +/// The layout object provides us with a column-style layout system. This file +/// contains the basic structural elements, but classes should be complemented +/// with width utilities, for example: +/// +/// @example +///
+///
+///
+///
+///
+///
+///
+///
+/// +/// We can also manipulate entire layout systems by adding a series of modifiers +/// to the `.o-layout` block. For example: +/// +/// @example +///
+/// +/// This will reverse the displayed order of the system so that it runs in the +/// opposite order to our source, effectively flipping the system over. +/// +/// @example +///
+/// +/// This will cause the system to fill up from either the centre or the right +/// hand side. Default behaviour is to fill up the layout system from the left. +/// +/// @requires tools/layout +/// @link https://github.com/inuitcss/inuitcss/blob/0420ba8/objects/_objects.layout.scss +//// .o-layout { @include o-layout; diff --git a/assets/styles/objects/_ratio.scss b/assets/styles/objects/_ratio.scss index eafd2f8..4bb43e5 100644 --- a/assets/styles/objects/_ratio.scss +++ b/assets/styles/objects/_ratio.scss @@ -2,7 +2,6 @@ // Objects / Ratio // ========================================================================== -// // Create ratio-bound content blocks, to keep media (e.g. images, videos) in // their correct aspect ratios. // diff --git a/assets/styles/objects/_table.scss b/assets/styles/objects/_table.scss index 611a289..a84eaad 100644 --- a/assets/styles/objects/_table.scss +++ b/assets/styles/objects/_table.scss @@ -5,7 +5,6 @@ .o-table { width: 100%; - // // Force all cells within a table to occupy the same width as each other. // // @link https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values diff --git a/assets/styles/tools/_family.scss b/assets/styles/tools/_family.scss index 348435f..a1973a3 100644 --- a/assets/styles/tools/_family.scss +++ b/assets/styles/tools/_family.scss @@ -2,7 +2,6 @@ // Tools / Family // ========================================================================== -// // DOCS : https://lukyvj.github.io/family.scss/ // // Select all children from the first to `$num`. @@ -22,7 +21,6 @@ } } -// // Select all children from the last to `$num`. // @group with-arguments // @content [Write the style you want to apply to the children, and it will be added within the @content directive] @@ -34,7 +32,6 @@ } } -// // Select all children after the first to `$num`. // @group with-arguments // @content [Write the style you want to apply to the children, and it will be added within the @content directive] @@ -46,7 +43,6 @@ } } -// // Select all children before `$num` from the last. // @group with-arguments // @content [Write the style you want to apply to the children, and it will be added within the @content directive] @@ -58,7 +54,6 @@ } } -// // Select all children between `$first` and `$last`. // @group with-arguments // @content [Write the style you want to apply to the children, and it will be added within the @content directive] @@ -69,7 +64,6 @@ } } -// // Select all even children between `$first` and `$last`. // @group with-arguments // @content [Write the style you want to apply to the children, and it will be added within the @content directive] @@ -80,7 +74,6 @@ } } -// // Select all odd children between `$first` and `$last`. // @group with-arguments // @content [Write the style you want to apply to the children, and it will be added within the @content directive] @@ -91,7 +84,6 @@ } } -// // Select all `$num` children between `$first` and `$last`. // @group with-arguments // @content [Write the style you want to apply to the children, and it will be added within the @content directive] @@ -102,7 +94,6 @@ } } -// // Select all children but `$num`. // @group with-arguments // @content [Write the style you want to apply to the children, and it will be added within the @content directive] @@ -114,7 +105,6 @@ } } -// // Select children each `$num`. // @group with-arguments // @content [Write the style you want to apply to the children, and it will be added within the @content directive] @@ -127,7 +117,6 @@ } } -// // Select children each `$num`. // @group with-arguments // @content [Write the style you want to apply to the children, and it will be added within the @content directive] @@ -139,7 +128,6 @@ } } -// // Select the `$num` child from the start and the `$num` child from the last. // @group with-arguments // @content [Write the style you want to apply to the children, and it will be added within the @content directive] @@ -152,7 +140,6 @@ } } -// // Select the item in the middle of `$num` child. Only works with odd number // chain. // @group with-arguments @@ -165,7 +152,6 @@ } } -// // Select all children between the `$num` first and the `$num` last. // @group with-arguments // @content [Write the style you want to apply to the children, and it will be added within the @content directive] @@ -177,7 +163,6 @@ } } -// // This quantity-query mixin will only select the first of `$limit` items. It will not // work if there is not as much as item as you set in `$limit`. // @group Quantity queries @@ -190,7 +175,6 @@ } } -// // This quantity-query mixin will only select the last of `$limit` items. It will not // if there is not as much as item as you set in `$limit`. // @group Quantity queries @@ -203,7 +187,6 @@ } } -// // This quantity-query mixin will select every items if there is at least `$num` items. It will not // if there is not as much as item as you set in `$num`. // @group Quantity queries @@ -220,7 +203,6 @@ } } -// // This quantity-query mixin will select every items if there is at most `$num` items. It will not // if there is not as much as item as you set in `$num`. // @group Quantity queries @@ -237,7 +219,6 @@ } } -// // This quantity-query mixin will select every items only if there is between `$min` and `$max` items. // @group Quantity queries // @param {number} $limit @@ -253,7 +234,6 @@ } } -// // Select the first exact child // @group no-arguments // @content [Write the style you want to apply to the children, and it will be added within the @content directive] @@ -264,7 +244,6 @@ } } -// // Select the last exact child // @group no-arguments // @content [Write the style you want to apply to the children, and it will be added within the @content directive] @@ -275,7 +254,6 @@ } } -// // Select all even children. // @group no-arguments // @content [Write the style you want to apply to the children, and it will be added within the @content directive] @@ -286,7 +264,6 @@ } } -// // Select all odd children. // @group no-arguments // @content [Write the style you want to apply to the children, and it will be added within the @content directive] @@ -297,7 +274,6 @@ } } -// // Select only the first and last child. // @group no-arguments // @content [Write the style you want to apply to the children, and it will be added within the @content directive] @@ -309,7 +285,6 @@ } } -// // Will only select the child if it’s unique. // @group no-arguments // @content [Write the style you want to apply to the children, and it will be added within the @content directive] @@ -321,7 +296,6 @@ } } -// // Will only select the child if it’s unique. // @group no-arguments // @content [Write the style you want to apply to the children, and it will be added within the @content directive] @@ -332,7 +306,6 @@ } } -// // Will only select children if they are not unique. Meaning if there is at // least 2 children, the style is applied. // @group no-arguments @@ -344,7 +317,6 @@ } } -// // This mixin is used to automatically sort z-index in numerical order. But it // can also sort them in anti-numerical order, depending the parameters you use. // @group using functions @@ -369,7 +341,6 @@ } } -// // Used by the child-index mixin. It will returned the proper sorted numbers // depending on the `$index` value. // @access private diff --git a/assets/styles/tools/_fonts.scss b/assets/styles/tools/_fonts.scss index 063b28a..687cede 100644 --- a/assets/styles/tools/_fonts.scss +++ b/assets/styles/tools/_fonts.scss @@ -2,7 +2,6 @@ // Tools / Font Faces // ========================================================================== -// // Import the webfont with font-face as woff and woff2 // // @param {List} $webfont (font name, filename, font-weight, font-style) - Each webfont to import. @@ -20,7 +19,6 @@ } } -// // Loops through a list of local fonts and import each font-face as woff and woff2 // // @param {List} $webfonts [(font name, filename, font-weight, font-style)] - Each webfont to import. @@ -33,7 +31,6 @@ } } -// // Map the font-family requires with the existing imported font-families // // @param {String} $font-family - The name of the webfont. diff --git a/assets/styles/tools/_functions.scss b/assets/styles/tools/_functions.scss index 89a8506..f404571 100644 --- a/assets/styles/tools/_functions.scss +++ b/assets/styles/tools/_functions.scss @@ -2,7 +2,6 @@ // Tools / Functions // ========================================================================== -// // Converts the given pixel value to its EM quivalent. // // @param {Number} $size - The pixel value to convert. @@ -29,7 +28,6 @@ @return ($size / $base) * 1em; } -// // Converts the given pixel value to its REM quivalent. // // @param {Number} $size - The pixel value to convert. @@ -56,7 +54,6 @@ @return ($size / $base) * 1rem; } -// // Converts a number to a percentage. // // @alias percentage() @@ -68,7 +65,6 @@ @return percentage($number); } -// // Checks if a list contains a value(s). // // @link https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/validators/_contains.scss @@ -90,7 +86,6 @@ @return true; } -// // Resolve whether a rule is important or not. // // @param {Boolean} $flag - Whether a rule is important (TRUE) or not (FALSE). @@ -106,7 +101,6 @@ } } -// // Determine if the current context is for a WYSIWYG editor. // // @requires {String} $context - The global context of the stylesheet. @@ -116,7 +110,6 @@ @return ('editor' == $context); } -// // Determine if the current context is for the front-end. // // @requires {String} $context - The global context of the stylesheet. diff --git a/assets/styles/tools/_layout.scss b/assets/styles/tools/_layout.scss index 318e762..5a6fff8 100644 --- a/assets/styles/tools/_layout.scss +++ b/assets/styles/tools/_layout.scss @@ -2,7 +2,6 @@ // Tools / Layout // ========================================================================== -// // Grid-like layout system. // // The layout tools provide a column-style layout system. This file contains @@ -33,7 +32,6 @@ } } -// // Generate the layout item. // // 1. Required in order to combine fluid widths with fixed gutters. diff --git a/assets/styles/tools/_mixins.scss b/assets/styles/tools/_mixins.scss index 20fb810..1362546 100644 --- a/assets/styles/tools/_mixins.scss +++ b/assets/styles/tools/_mixins.scss @@ -2,7 +2,6 @@ // Tools / Mixins // ========================================================================== -// // Set the color of the highlight that appears over a link while it's being tapped. // // By default, the highlight is suppressed. @@ -14,7 +13,6 @@ -webkit-tap-highlight-color: $value; } -// // Set whether or not touch devices use momentum-based scrolling for the given element. // // By default, applies momentum-based scrolling for the current element. @@ -26,7 +24,6 @@ -webkit-overflow-scrolling: $value; } -// // Micro clearfix rules for containing floats. // // @link http://www.cssmojo.com/the-very-latest-clearfix-reloaded/ @@ -41,7 +38,6 @@ } } -// // Generate a font-size and baseline-compatible line-height. // // @link https://github.com/inuitcss/inuitcss/c14029c/tools/_tools.font-size.scss @@ -67,7 +63,6 @@ } } -// // Vertically-center the direct descendants of the current element. // // Centering is achieved by displaying children as inline-blocks. Any whitespace @@ -93,7 +88,6 @@ } } -// // Generate `:hover` and `:focus` styles in one go. // // @link https://github.com/inuitcss/inuitcss/blob/master/tools/_tools.mixins.scss @@ -107,7 +101,6 @@ } } -// // Generate `:active` and `:focus` styles in one go. // // @see {Mixin} u-hocus @@ -121,7 +114,6 @@ } } -// // Prevent text from wrapping onto multiple lines for the current element. // // An ellipsis is appended to the end of the line. @@ -142,7 +134,6 @@ } } -// // Applies accessible hiding to the current element. // // @param {Boolean} $important [true] - Whether the visibility is important. @@ -160,7 +151,6 @@ border: 0; } -// // Allows an accessibly hidden element to be focusable via keyboard navigation. // // @content For styling the now visible element. @@ -176,7 +166,6 @@ } } -// // Hide the current element from all. // // The element will be hidden from screen readers and removed from the document flow. @@ -191,7 +180,6 @@ visibility: hidden $important; } -// // Show the current element for all. // // The element will be accessible from screen readers and visible in the document flow. diff --git a/assets/styles/tools/_widths.scss b/assets/styles/tools/_widths.scss index 1bb1d8a..c64f0dc 100644 --- a/assets/styles/tools/_widths.scss +++ b/assets/styles/tools/_widths.scss @@ -10,19 +10,21 @@ // .u-pull-2/4 // .u-pull-1/5 // .u-push-2/3 + $widths-offsets: false !default; // By default, the boilerplate uses fractions-like classes like `
`. // You can change the `/` to whatever you fancy with this variable. + $fractions-delimiter: \/ !default; // When using Sass-MQ, this defines the separator for the breakpoints suffix // in the class name. By default, we are generating the responsive suffixes // for the classes with a `@` symbol so you get classes like: //
+ $breakpoint-delimiter: \@ !default; -// // Generate a series of width helper classes // // @example scss diff --git a/assets/styles/utilities/_helpers.scss b/assets/styles/utilities/_helpers.scss index 6947178..e594625 100644 --- a/assets/styles/utilities/_helpers.scss +++ b/assets/styles/utilities/_helpers.scss @@ -33,33 +33,31 @@ // display: block; // } -// // // // 1. Fix for Firefox bug: an image styled `max-width:100%` within an // // inline-block will display at its default size, and not limit its width to // // 100% of an ancestral container. - +// // .u-inline-block { // display: inline-block !important; // max-width: 100%; /* 1 */ // } - +// // .u-inline { // display: inline !important; // } - +// // .u-table { // display: table !important; // } - +// // .u-tableCell { // display: table-cell !important; // } - +// // .u-tableRow { // display: table-row !important; // } -// // Completely remove from the flow but leave available to screen readers. .u-screen-reader-text { @@ -72,7 +70,6 @@ } } -// // Extends the `.screen-reader-text` class to allow the element // to be focusable when navigated to via the keyboard. // diff --git a/assets/styles/utilities/_print.scss b/assets/styles/utilities/_print.scss index 90a320e..86fbe31 100644 --- a/assets/styles/utilities/_print.scss +++ b/assets/styles/utilities/_print.scss @@ -2,16 +2,16 @@ // Utilities / Print Mode // ========================================================================== -// -// Very crude, reset-like styles taken from the HTML5 Boilerplate: -// - https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/css.md#print-styles -// - https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L205-L282 -// -// @link https://github.com/inuitcss/inuitcss/blob/c27993f/utilities/_utilities.print.scss +//// +/// Very crude, reset-like styles taken from the HTML5 Boilerplate: +/// - https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/css.md#print-styles +/// - https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L205-L282 +/// +/// @link https://github.com/inuitcss/inuitcss/blob/c27993f/utilities/_utilities.print.scss +//// @media print { - // // 1. Black prints faster: http://www.sanbeiji.com/archives/953 *, @@ -38,7 +38,6 @@ content: " (" attr(title) ")"; } - // // Don't show links that are fragment identifiers, or use the `javascript:` // pseudo protocol. @@ -53,7 +52,6 @@ page-break-inside: avoid; } - // // Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables thead { diff --git a/assets/styles/utilities/_ratio.scss b/assets/styles/utilities/_ratio.scss index dbd280e..471e4c8 100644 --- a/assets/styles/utilities/_ratio.scss +++ b/assets/styles/utilities/_ratio.scss @@ -2,7 +2,6 @@ // Utilities / Ratio // ========================================================================== -// // @link https://github.com/inuitcss/inuitcss/blob/19d0c7e/objects/_objects.ratio.scss // A list of aspect ratios that get generated as modifier classes. @@ -14,7 +13,6 @@ $aspect-ratios: ( /* stylelint-disable */ -// // Generate a series of ratio classes to be used like so: // // @example diff --git a/assets/styles/utilities/_spacing.scss b/assets/styles/utilities/_spacing.scss index e56dfe2..7f4744a 100644 --- a/assets/styles/utilities/_spacing.scss +++ b/assets/styles/utilities/_spacing.scss @@ -2,20 +2,21 @@ // Utilities / Spacing // ========================================================================== -// -// Utility classes to put specific spacing values onto elements. The below loop -// will generate us a suite of classes like: -// -// @example -// .u-margin-top {} -// .u-padding-left-large {} -// .u-margin-right-small {} -// .u-padding {} -// .u-padding-right-none {} -// .u-padding-horizontal {} -// .u-padding-vertical-small {} -// -// @link https://github.com/inuitcss/inuitcss/blob/512977a/utilities/_utilities.spacing.scss +//// +/// Utility classes to put specific spacing values onto elements. The below loop +/// will generate us a suite of classes like: +/// +/// @example +/// .u-margin-top {} +/// .u-padding-left-large {} +/// .u-margin-right-small {} +/// .u-padding {} +/// .u-padding-right-none {} +/// .u-padding-horizontal {} +/// .u-padding-vertical-small {} +/// +/// @link https://github.com/inuitcss/inuitcss/blob/512977a/utilities/_utilities.spacing.scss +//// /* stylelint-disable string-quotes */ diff --git a/assets/styles/utilities/_states.scss b/assets/styles/utilities/_states.scss index 4e03176..f2bae3e 100644 --- a/assets/styles/utilities/_states.scss +++ b/assets/styles/utilities/_states.scss @@ -2,7 +2,6 @@ // Utilities / States // ========================================================================== -// // ARIA roles display visual cursor hints [aria-busy="true"] { @@ -17,7 +16,6 @@ cursor: default; } -// // Control visibility without affecting flow. .is-visible { @@ -30,7 +28,6 @@ opacity: 0 !important; } -// // Completely remove from the flow and screen readers. .is-hidden { @@ -54,29 +51,27 @@ // display: none; // } // } - +// // .is-hidden\@from-large { // @media (min-width: $from-large) { // display: none; // } // } -// // // // Display a hidden-by-default element. // - // .is-shown { // @include u-shown; // } - +// // table.is-shown { // display: table !important; // } - +// // tr.is-shown { // display: table-row !important; // } - +// // td.is-shown, // th.is-shown { // display: table-cell !important; diff --git a/assets/styles/utilities/_widths.scss b/assets/styles/utilities/_widths.scss index ffa0498..4caac4b 100644 --- a/assets/styles/utilities/_widths.scss +++ b/assets/styles/utilities/_widths.scss @@ -2,19 +2,21 @@ // Utilities / Widths // ========================================================================== -// -// @link https://github.com/inuitcss/inuitcss/blob/6eb574f/utilities/_utilities.widths.scss -// +//// +/// @link https://github.com/inuitcss/inuitcss/blob/6eb574f/utilities/_utilities.widths.scss +/// +/// +/// Which fractions would you like in your grid system(s)? +/// By default, the boilerplate provides fractions of one whole, halves, thirds, +/// quarters, and fifths, e.g.: +/// +/// @example css +/// .u-1/2 +/// .u-2/5 +/// .u-3/4 +/// .u-2/3 +//// -// Which fractions would you like in your grid system(s)? -// By default, the boilerplate provides fractions of one whole, halves, thirds, -// quarters, and fifths, e.g.: -// -// @example css -// .u-1/2 -// .u-2/5 -// .u-3/4 -// .u-2/3 $widths-fractions: 1 2 3 4 5 !default; @include widths($widths-fractions);