diff --git a/src/assets/stylesheets/_config.scss b/src/assets/stylesheets/_config.scss index 1421fda9d..e8b19b24d 100644 --- a/src/assets/stylesheets/_config.scss +++ b/src/assets/stylesheets/_config.scss @@ -20,19 +20,19 @@ /// DEALINGS //// -/// --------------------------------------------------------------------------- -/// Typography -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Typography +// ---------------------------------------------------------------------------- -/// Modular typographic scale +// Modular typographic scale $ms-base: 1.6rem; $ms-ratio: $major-third; -/// --------------------------------------------------------------------------- -/// Breakpoints -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Breakpoints +// ---------------------------------------------------------------------------- -/// Device-specific breakpoints +// Device-specific breakpoints $break-devices: ( mobile: ( portrait: px2em(220px) px2em(479px), @@ -49,23 +49,23 @@ $break-devices: ( ) ); -/// --------------------------------------------------------------------------- -/// Colors -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Colors +// ---------------------------------------------------------------------------- -/// Primary and accent colors +// Primary and accent colors $md-color-primary: $clr-indigo-500; $md-color-primary--light: $clr-indigo-100; $md-color-primary--dark: $clr-indigo-700; $md-color-accent: $clr-indigo-a200; -/// Shades of black +// Shades of black $md-color-black: hsla(0, 0%, 0%, 0.87); $md-color-black--light: hsla(0, 0%, 0%, 0.54); $md-color-black--lighter: hsla(0, 0%, 0%, 0.26); $md-color-black--lightest: hsla(0, 0%, 0%, 0.07); -/// Shades of white +// Shades of white $md-color-white: hsla(0, 0%, 100%, 1.00); $md-color-white--light: hsla(0, 0%, 100%, 0.70); $md-color-white--lighter: hsla(0, 0%, 100%, 0.30); diff --git a/src/assets/stylesheets/_shame.scss b/src/assets/stylesheets/_shame.scss index cd75daf00..20b748c2f 100644 --- a/src/assets/stylesheets/_shame.scss +++ b/src/assets/stylesheets/_shame.scss @@ -20,9 +20,10 @@ /// DEALINGS //// -/// --------------------------------------------------------------------------- -/// Nothing to see here, move along -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Nothing to see here, move along +// ---------------------------------------------------------------------------- + .md-search__suggest { background: $md-color-white; diff --git a/src/assets/stylesheets/application.scss b/src/assets/stylesheets/application.scss index 40182c9f2..8776cc298 100644 --- a/src/assets/stylesheets/application.scss +++ b/src/assets/stylesheets/application.scss @@ -20,17 +20,17 @@ /// DEALINGS //// -/// --------------------------------------------------------------------------- -/// Dependencies -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Dependencies +// ---------------------------------------------------------------------------- @import "modular-scale"; @import "material-color"; @import "material-shadows"; -/// --------------------------------------------------------------------------- -/// Application -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Application +// ---------------------------------------------------------------------------- @import "helpers/break"; @import "helpers/px2em"; diff --git a/src/assets/stylesheets/base/_icons.scss b/src/assets/stylesheets/base/_icons.scss index 05a6d601c..989057186 100644 --- a/src/assets/stylesheets/base/_icons.scss +++ b/src/assets/stylesheets/base/_icons.scss @@ -20,11 +20,11 @@ /// DEALINGS //// -/// --------------------------------------------------------------------------- -/// Icon set -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Icon set +// ---------------------------------------------------------------------------- -/// Base icon class +// Base icon class %md-icon, .md-icon { font-family: "Material Icons"; @@ -38,12 +38,12 @@ word-wrap: normal; direction: ltr; - /// Enable font-smoothing in Webkit and FF + // Enable font-smoothing in Webkit and FF -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -/// Build representational classes +// Build representational classes @each $ligature, $name in ( "arrow_back": "back", "arrow_forward": "forward", diff --git a/src/assets/stylesheets/base/_reset.scss b/src/assets/stylesheets/base/_reset.scss index ddb97ae8e..3cb368c1d 100644 --- a/src/assets/stylesheets/base/_reset.scss +++ b/src/assets/stylesheets/base/_reset.scss @@ -20,33 +20,33 @@ /// DEALINGS //// -/// --------------------------------------------------------------------------- -/// Resets -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Resets +// ---------------------------------------------------------------------------- -/// Enfore correct box model - the prefixed versions are necessary for older -/// browsers, i.e. Chrome < 10, Firefox < 29, Safari < 6 and Android < 4 +// Enfore correct box model - the prefixed versions are necessary for older +// browsers, i.e. Chrome < 10, Firefox < 29, Safari < 6 and Android < 4 html { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } -/// All elements shall inherit the document default +// All elements shall inherit the document default *, *::before, *::after { box-sizing: inherit; -moz-box-sizing: inherit; -webkit-box-sizing: inherit; } -/// Prevent adjustments of font size after orientation changes in IE and iOS -/// and set base font-size to 10px for simple rem calculations. +// Prevent adjustments of font size after orientation changes in IE and iOS +// and set base font-size to 10px for simple rem calculations. html { font-size: 62.5%; text-size-adjust: none; } -/// Reset spacing and borders for all tags +// Reset spacing and borders for all tags html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, @@ -59,20 +59,20 @@ audio, video { border: 0; } -/// Reset table styles +// Reset table styles table { border-collapse: collapse; border-spacing: 0; } -/// Reset table cell styles +// Reset table cell styles td, th { font-weight: normal; text-align: left; vertical-align: top; } -/// Reset (native) button styles +// Reset (native) button styles button { padding: 0; border: 0; @@ -81,20 +81,20 @@ button { font-size: inherit; } -/// Reset (native) input styles +// Reset (native) input styles input { border: 0; outline: 0; appearance: none; } -/// Reset link styles +// Reset link styles a { color: inherit; text-decoration: none; } -/// Reset tap outlines on iOS and Android +// Reset tap outlines on iOS and Android a, button, label, input { -webkit-tap-highlight-color: transparent; } diff --git a/src/assets/stylesheets/base/_typeset.scss b/src/assets/stylesheets/base/_typeset.scss index dd5bd4094..f7d1c9b87 100644 --- a/src/assets/stylesheets/base/_typeset.scss +++ b/src/assets/stylesheets/base/_typeset.scss @@ -20,51 +20,51 @@ /// DEALINGS //// -/// --------------------------------------------------------------------------- -/// Font definitions -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Font definitions +// ---------------------------------------------------------------------------- -/// Default fonts +// Default fonts body, kbd { font-family: "Roboto", Helvetica, Arial, sans-serif; font-weight: 400; font-feature-settings: "kern", "onum", "liga"; - /// Enable font-smoothing in Webkit and FF + // Enable font-smoothing in Webkit and FF -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - /// Use system fonts, if browser doesn't support webfonts + // Use system fonts, if browser doesn't support webfonts .no-fontface & { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } } -/// Proportionally spaced fonts +// Proportionally spaced fonts pre, code { font-family: "Roboto Mono", "Courier New", Courier, monospace; - /// Use system fonts, if browser doesn't support webfonts + // Use system fonts, if browser doesn't support webfonts .no-fontface & { font-family: "Courier New", Courier, monospace; } } -/// --------------------------------------------------------------------------- -/// Typeset -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Typeset +// ---------------------------------------------------------------------------- -/// Content that is typeset +// Content that is typeset .md-content--typeset { font-size: ms(0); line-height: 1.6; - /// Body copy + // Body copy p { margin: 1.25em 0; } - /// 1st level headline + // 1st level headline h1 { color: $md-color-black--light; font-size: ms(3); @@ -73,7 +73,7 @@ pre, code { line-height: 1.3; } - /// 2nd level headline + // 2nd level headline h2 { margin-top: 4.0rem; font-size: ms(2); @@ -82,7 +82,7 @@ pre, code { line-height: 1.4; } - /// 3rd level headline + // 3rd level headline h3 { margin-top: 3.2rem; font-size: ms(1); @@ -91,12 +91,12 @@ pre, code { line-height: 1.5; } - /// 3rd level headline following an 2nd level headline + // 3rd level headline following an 2nd level headline h2 + h3 { margin-top: 1.6rem; } - /// 4th level headline + // 4th level headline h4 { margin-top: 1.6rem; font-size: ms(0); @@ -104,7 +104,7 @@ pre, code { letter-spacing: -0.01em; } - /// 5th and 6th level headline + // 5th and 6th level headline h5, h6 { margin-top: 1.6rem; @@ -114,29 +114,29 @@ pre, code { letter-spacing: -0.01em; } - /// Overrides for 5th level headline + // Overrides for 5th level headline h5 { text-transform: uppercase; } - /// Links + // Links a { color: $md-color-primary; - /// Also enable transition on pseudo elements + // Also enable transition on pseudo elements &, &::before { transition: color 0.125s; } - /// Active links + // Active links &:hover, &:active { color: $md-color-accent; } } - /// Inline code blocks + // Inline code blocks code { padding: 0.1rem 0.4rem; background: #F7F7F7; @@ -146,7 +146,7 @@ pre, code { word-break: break-word; } - /// Formatted code blocks + // Formatted code blocks pre { margin: 2.0rem 0; padding: 1.0rem 1.2rem; @@ -156,13 +156,13 @@ pre, code { line-height: 1.4; overflow-x: scroll; - /// Reset, if pre is inside code + // Reset, if pre is inside code > code { font-size: inherit; } } - /// Keyboard tags + // Keyboard tags kbd { display: inline-block; padding: 0.4rem 0.5rem 0.5rem; @@ -178,62 +178,62 @@ pre, code { word-break: break-word; } - /// Smaller text + // Smaller text small { color: $md-color-black--light; font-size: smaller; } - /// Superscript and subscript + // Superscript and subscript sup, sub { margin-left: 0.1rem; } - /// Horizontal separators + // Horizontal separators hr { margin: 2.4rem 0; border-bottom: px2rem(1px) dotted $md-color-black--lighter; } - /// Blockquotes, possibly nested + // Blockquotes, possibly nested blockquote { padding-left: 1.2rem; border-left: px2rem(4px) solid $md-color-black--lighter; color: $md-color-black--light; } - /// Unordered lists + // Unordered lists ul { list-style-type: disc; } - /// Ordered lists + // Ordered lists ol ol { list-style-type: lower-alpha; - /// Triply nested ordered list + // Triply nested ordered list ol { list-style-type: lower-roman; } } - /// Unordered and ordered lists + // Unordered and ordered lists ul, ol { margin-left: 1.0rem; - /// List elements + // List elements li { margin-bottom: 1.0rem; margin-left: 2.0rem; - /// Remove margin on last element + // Remove margin on last element &:last-child { margin-bottom: 0; } - /// Nested lists + // Nested lists ul, ol { margin-bottom: 1.0rem; diff --git a/src/assets/stylesheets/extensions/_admonition.scss b/src/assets/stylesheets/extensions/_admonition.scss index 883dc4115..73b988831 100644 --- a/src/assets/stylesheets/extensions/_admonition.scss +++ b/src/assets/stylesheets/extensions/_admonition.scss @@ -20,11 +20,11 @@ /// DEALINGS //// -/// --------------------------------------------------------------------------- -/// Admonition extension -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Admonition extension +// ---------------------------------------------------------------------------- -/// Admonition +// Admonition .admonition { position: relative; margin: 2.0rem 0; @@ -33,7 +33,7 @@ border-radius: px2rem(2px); background: transparentize($clr-blue-a200, 0.95); - /// Icon + // Icon &::before { display: block; position: absolute; @@ -48,7 +48,7 @@ vertical-align: -0.1em; } - /// Title + // Title &-title { color: $clr-blue-a400; font-size: ms(-1); @@ -56,28 +56,28 @@ line-height: 2.0rem; text-transform: uppercase; - /// Ensure smaller spacing to next element + // Ensure smaller spacing to next element html & { margin-bottom: 1.6rem; } - /// Ensure smaller spacing to next element + // Ensure smaller spacing to next element html & + * { margin-top: 1.6rem; } } - /// Remove spacing on first element + // Remove spacing on first element :first-child { margin-top: 0; } - /// Remove spacing on last element + // Remove spacing on last element :last-child { margin-bottom: 0; } - /// Build representational classes + // Build representational classes @each $names, $appearance in ( tip idea: $clr-teal-a700 "whatshot", success check done: $clr-green-a400 "done", @@ -89,24 +89,24 @@ $tint: nth($appearance, 1); $icon: nth($appearance, 2); - /// Define base class + // Define base class &%#{nth($names, 1)}, &.#{nth($names, 1)} { border-color: $tint; background: transparentize($tint, 0.95); - /// Icon + // Icon &::before { content: $icon; } - /// Set color for title + // Set color for title .admonition-title { color: $tint; } } - /// Define synonyms for base class + // Define synonyms for base class @if length($names) > 1 { @for $n from 2 through length($names) { &.#{nth($names, $n)} { diff --git a/src/assets/stylesheets/extensions/_codehilite.scss b/src/assets/stylesheets/extensions/_codehilite.scss index c16b01634..cfd37de4f 100644 --- a/src/assets/stylesheets/extensions/_codehilite.scss +++ b/src/assets/stylesheets/extensions/_codehilite.scss @@ -20,98 +20,98 @@ /// DEALINGS //// -/// --------------------------------------------------------------------------- -/// Codehilite extension -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Codehilite extension +// ---------------------------------------------------------------------------- -/// Github-style syntax highlighting +// Github-style syntax highlighting .codehilite, .code { - /// Errors + // Errors .err { color: #A61717; } - /// Operators + // Operators .o { color: inherit; } - /// Generics + // Generics - .ge { color: #000000; } /// Generic.Emph - .gr { color: #AA0000; } /// Generic.Error - .gh { color: #999999; } /// Generic.Heading - .go { color: #888888; } /// Generic.Output - .gp { color: #555555; } /// Generic.Prompt - .gs { color: inherit; } /// Generic.Strong - .gu { color: #AAAAAA; } /// Generic.Subheading - .gt { color: #AA0000; } /// Generic.Traceback + .ge { color: #000000; } // Generic.Emph + .gr { color: #AA0000; } // Generic.Error + .gh { color: #999999; } // Generic.Heading + .go { color: #888888; } // Generic.Output + .gp { color: #555555; } // Generic.Prompt + .gs { color: inherit; } // Generic.Strong + .gu { color: #AAAAAA; } // Generic.Subheading + .gt { color: #AA0000; } // Generic.Traceback - /// Keywords + // Keywords - .k { color: #A71D5D; } /// Keyword - .kc { color: #A71D5D; } /// Keyword.Constant - .kd { color: #A71D5D; } /// Keyword.Declaration - .kn { color: #A71D5D; } /// Keyword.Namespace - .kp { color: #A71D5D; } /// Keyword.Pseudo - .kr { color: #0086B3; } /// Keyword.Reserved - .kt { color: #0086B3; } /// Keyword.Type + .k { color: #A71D5D; } // Keyword + .kc { color: #A71D5D; } // Keyword.Constant + .kd { color: #A71D5D; } // Keyword.Declaration + .kn { color: #A71D5D; } // Keyword.Namespace + .kp { color: #A71D5D; } // Keyword.Pseudo + .kr { color: #0086B3; } // Keyword.Reserved + .kt { color: #0086B3; } // Keyword.Type - /// Comments + // Comments - .c { color: #969896; } /// Comment - .cm { color: #969896; } /// Comment.Multiline - .cp { color: #666666; } /// Comment.Preproc - .c1 { color: #969896; } /// Comment.Single - .cs { color: #969896; } /// Comment.Special + .c { color: #969896; } // Comment + .cm { color: #969896; } // Comment.Multiline + .cp { color: #666666; } // Comment.Preproc + .c1 { color: #969896; } // Comment.Single + .cs { color: #969896; } // Comment.Special - /// Names + // Names - .na { color: #795DA3; } /// Name.Attribute - .na { color: #795DA3; } /// Name.Attribute - .nb { color: #795DA3; } /// Name.Builtin - .bp { color: #795DA3; } /// Name.Builtin.Pseudo - .nc { color: #795DA3; } /// Name.Class - .no { color: #795DA3; } /// Name.Constant - .nd { color: #795DA3; } /// Name.Decorator - .ni { color: #795DA3; } /// Name.Entity - .ne { color: #795DA3; } /// Name.Exception - .nf { color: #795DA3; } /// Name.Function - .nl { color: #795DA3; } /// Name.Label - .nn { color: #795DA3; } /// Name.Namespace - .nt { color: #795DA3; } /// Name.Tag - .nv { color: #795DA3; } /// Name.Variable - .vc { color: #795DA3; } /// Name.Variable.Class - .vg { color: #795DA3; } /// Name.Variable.Global - .vi { color: #795DA3; } /// Name.Variable.Instance - .ow { color: inherit; } /// Operator.Word + .na { color: #795DA3; } // Name.Attribute + .na { color: #795DA3; } // Name.Attribute + .nb { color: #795DA3; } // Name.Builtin + .bp { color: #795DA3; } // Name.Builtin.Pseudo + .nc { color: #795DA3; } // Name.Class + .no { color: #795DA3; } // Name.Constant + .nd { color: #795DA3; } // Name.Decorator + .ni { color: #795DA3; } // Name.Entity + .ne { color: #795DA3; } // Name.Exception + .nf { color: #795DA3; } // Name.Function + .nl { color: #795DA3; } // Name.Label + .nn { color: #795DA3; } // Name.Namespace + .nt { color: #795DA3; } // Name.Tag + .nv { color: #795DA3; } // Name.Variable + .vc { color: #795DA3; } // Name.Variable.Class + .vg { color: #795DA3; } // Name.Variable.Global + .vi { color: #795DA3; } // Name.Variable.Instance + .ow { color: inherit; } // Operator.Word - /// Numbers + // Numbers - .m { color: #0086B3; } /// Literal.Number - .mf { color: #0086B3; } /// Literal.Number.Float - .mh { color: #0086B3; } /// Literal.Number.Hex - .mi { color: #0086B3; } /// Literal.Number.Integer - .mo { color: #0086B3; } /// Literal.Number.Oct - .il { color: #0086B3; } /// Literal.Number.Integer.Long + .m { color: #0086B3; } // Literal.Number + .mf { color: #0086B3; } // Literal.Number.Float + .mh { color: #0086B3; } // Literal.Number.Hex + .mi { color: #0086B3; } // Literal.Number.Integer + .mo { color: #0086B3; } // Literal.Number.Oct + .il { color: #0086B3; } // Literal.Number.Integer.Long - /// Strings + // Strings - .s { color: #183691; } /// Literal.String - .sb { color: #183691; } /// Literal.String.Backtick - .sc { color: #183691; } /// Literal.String.Char - .sd { color: #183691; } /// Literal.String.Doc - .s2 { color: #183691; } /// Literal.String.Double - .se { color: #183691; } /// Literal.String.Escape - .sh { color: #183691; } /// Literal.String.Heredoc - .si { color: #183691; } /// Literal.String.Interpol - .sx { color: #183691; } /// Literal.String.Other - .sr { color: #009926; } /// Literal.String.Regex - .s1 { color: #D01040; } /// Literal.String.Single - .ss { color: #990073; } /// Literal.String.Symbol + .s { color: #183691; } // Literal.String + .sb { color: #183691; } // Literal.String.Backtick + .sc { color: #183691; } // Literal.String.Char + .sd { color: #183691; } // Literal.String.Doc + .s2 { color: #183691; } // Literal.String.Double + .se { color: #183691; } // Literal.String.Escape + .sh { color: #183691; } // Literal.String.Heredoc + .si { color: #183691; } // Literal.String.Interpol + .sx { color: #183691; } // Literal.String.Other + .sr { color: #009926; } // Literal.String.Regex + .s1 { color: #D01040; } // Literal.String.Single + .ss { color: #990073; } // Literal.String.Symbol - /// Diffs - .gd { background-color: #ffdddd; } /// Generic.Deleted - .gi { background-color: #ddffdd; } /// Generic.Inserted + // Diffs + .gd { background-color: #ffdddd; } // Generic.Deleted + .gi { background-color: #ddffdd; } // Generic.Inserted - /// Miscellaneous - .w { color: transparent; } /// Text.Whitespace + // Miscellaneous + .w { color: transparent; } // Text.Whitespace } diff --git a/src/assets/stylesheets/extensions/_footnotes.scss b/src/assets/stylesheets/extensions/_footnotes.scss index 481aebe65..f6910a04f 100644 --- a/src/assets/stylesheets/extensions/_footnotes.scss +++ b/src/assets/stylesheets/extensions/_footnotes.scss @@ -20,23 +20,23 @@ /// DEALINGS //// -/// --------------------------------------------------------------------------- -/// Footnotes extension -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Footnotes extension +// ---------------------------------------------------------------------------- -/// Scoped in typesetted content for greater specificity +// Scoped in typesetted content for greater specificity .md-content--typeset { - /// Footnote + // Footnote .footnote { color: $md-color-black--light; font-size: smaller; - /// Remove additional spacing on footnotes + // Remove additional spacing on footnotes > ol { margin-left: 0; - /// Single footnote + // Single footnote > li { // TODO: this doesn't work entirely @@ -47,14 +47,14 @@ // margin-top: -(5.6rem + 2.4rem + 0.4rem); // } - /// Make back references visible on hover + // Make back references visible on hover &:hover .footnote-backref, &:target .footnote-backref { transform: translate3d(0, 0, 0); opacity: 1; } - /// Active or targeted back reference + // Active or targeted back reference &:hover .footnote-backref:hover, &:target .footnote-backref { color: $md-color-accent; @@ -62,7 +62,7 @@ } } - /// Correct anchor offset + // Correct anchor offset &-ref::before { position: absolute; margin-top: -(5.6rem + 2.4rem + 0.4rem); @@ -71,7 +71,7 @@ pointer-events: none; } - /// Make back reference text transparent for icon + // Make back reference text transparent for icon &-backref { @extend %md-icon; @@ -85,12 +85,12 @@ opacity: 0; vertical-align: middle; - /// Hack: remove Unicode arrow for icon + // Hack: remove Unicode arrow for icon &::first-letter { font-size: 0; } - /// Back reference icon + // Back reference icon &::after { content: "keyboard_return"; } diff --git a/src/assets/stylesheets/extensions/_permalinks.scss b/src/assets/stylesheets/extensions/_permalinks.scss index d76f924a5..4d1721223 100644 --- a/src/assets/stylesheets/extensions/_permalinks.scss +++ b/src/assets/stylesheets/extensions/_permalinks.scss @@ -20,14 +20,14 @@ /// DEALINGS //// -/// --------------------------------------------------------------------------- -/// Permalinks extension -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Permalinks extension +// ---------------------------------------------------------------------------- -/// Scoped in typesetted content for greater specificity +// Scoped in typesetted content for greater specificity .md-content--typeset { - /// Permalink + // Permalink .headerlink { display: inline-block; margin-left: 1.0rem; @@ -39,24 +39,24 @@ opacity: 0; } - /// All headers with permalinks have ids + // All headers with permalinks have ids [id] { - /// Make permalink visible on hover + // Make permalink visible on hover &:hover .headerlink, &:target .headerlink { transform: translate3d(0, 0, 0); opacity: 1; } - /// Active or targeted permalink + // Active or targeted permalink &:hover .headerlink:hover, &:target .headerlink { color: $md-color-accent; } } - /// Correct anchor offset of headlines + // Correct anchor offset of headlines @each $level, $delta in ( h1: 3.0rem, h2: 0.2rem, diff --git a/src/assets/stylesheets/helpers/_break.scss b/src/assets/stylesheets/helpers/_break.scss index e580cc518..ca7d8cc65 100644 --- a/src/assets/stylesheets/helpers/_break.scss +++ b/src/assets/stylesheets/helpers/_break.scss @@ -20,11 +20,11 @@ /// DEALINGS //// -/// --------------------------------------------------------------------------- -/// Variables -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Variables +// ---------------------------------------------------------------------------- -//// +/// /// Device-specific breakpoints /// /// @example @@ -47,21 +47,21 @@ /// @group helpers /// @access private /// @type Map -//// +/// $break-devices: () !default; -/// --------------------------------------------------------------------------- -/// Breakpoint helpers -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Breakpoint helpers +// ---------------------------------------------------------------------------- -//// +/// /// Choose minimum and maximum device widths /// /// @group helpers /// @access private /// @param {Map} $devices Map of devices /// @return {List} Minimum and maximum width -//// +/// @function break-select-min-max($devices) { $min: 1000000; $max: 0; @@ -90,14 +90,14 @@ $break-devices: () !default; @return $min, $max; } -//// +/// /// Select minimum and maximum widths for a device breakpoint /// /// @group helpers /// @access private /// @param {String} $device Device /// @return {List} Minimum and maximum width -//// +/// @function break-select-device($device) { $current: $break-devices; @for $n from 1 through length($device) { @@ -114,17 +114,17 @@ $break-devices: () !default; @return break-select-min-max($current); } -/// --------------------------------------------------------------------------- -/// Breakpoint mixins -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Breakpoint mixins +// ---------------------------------------------------------------------------- -//// +/// /// A minimum-maximum media query breakpoint /// /// @group helpers /// @access public /// @param {Number|List} $breakpoint Number or number pair -//// +/// @mixin break-at($breakpoint) { @if type-of($breakpoint) == number { @media only screen and (min-width: $breakpoint) { @@ -145,13 +145,13 @@ $break-devices: () !default; } } -//// +/// /// An orientation media query breakpoint /// /// @group helpers /// @access public /// @param {String} $breakpoint Orientation -//// +/// @mixin break-at-orientation($breakpoint) { @if type-of($breakpoint) == string { @media only screen and (orientation: $breakpoint) { @@ -162,13 +162,13 @@ $break-devices: () !default; } } -//// +/// /// A maximum-aspect-ratio media query breakpoint /// /// @group helpers /// @access public /// @param {Number} $breakpoint Ratio -//// +/// @mixin break-at-ratio($breakpoint) { @if type-of($breakpoint) == number { @media only screen and (max-aspect-ratio: $breakpoint) { @@ -179,13 +179,13 @@ $break-devices: () !default; } } -//// +/// /// A minimum-maximum media query device breakpoint /// /// @group helpers /// @access public /// @param {String|List} $breakpoint Device -//// +/// @mixin break-at-device($device) { @if type-of($device) == string { $device: $device,; @@ -206,13 +206,13 @@ $break-devices: () !default; } } -//// +/// /// A minimum media query device breakpoint /// /// @group helpers /// @access public /// @param {String|List} $breakpoint Device -//// +/// @mixin break-from-device($device) { @if type-of($device) == string { $device: $device,; @@ -228,13 +228,13 @@ $break-devices: () !default; } } -//// +/// /// A maximum media query device breakpoint /// /// @group helpers /// @access public /// @param {String|List} $breakpoint Device -//// +/// @mixin break-to-device($device) { @if type-of($device) == string { $device: $device,; diff --git a/src/assets/stylesheets/helpers/_px2em.scss b/src/assets/stylesheets/helpers/_px2em.scss index aaf058547..da40340cc 100644 --- a/src/assets/stylesheets/helpers/_px2em.scss +++ b/src/assets/stylesheets/helpers/_px2em.scss @@ -20,11 +20,11 @@ /// DEALINGS //// -/// --------------------------------------------------------------------------- -/// Pixel conversion helpers -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Pixel conversion helpers +// ---------------------------------------------------------------------------- -//// +/// /// Convert font size in px to em. /// /// @group helpers @@ -32,7 +32,7 @@ /// @param {Number} $size Font size in px /// @param {Number} $base Base font size /// @return {Number} Font size in em -//// +/// @function px2em($size, $base: 16px) { @if unit($size) == px { @return ($size / $base) * 1.0em; @@ -41,7 +41,7 @@ } } -//// +/// /// Convert font size in px to rem. /// /// @group helpers @@ -49,7 +49,7 @@ /// @param {Number} $size Font size in px /// @param {Number} $base Base font size /// @return {Number} Font size in rem -//// +/// @function px2rem($size, $base: 10px) { @if unit($size) == px { @return ($size / $base) * 1.0rem; diff --git a/src/assets/stylesheets/layout/_base.scss b/src/assets/stylesheets/layout/_base.scss index d5fd1c5ca..b93a834e8 100644 --- a/src/assets/stylesheets/layout/_base.scss +++ b/src/assets/stylesheets/layout/_base.scss @@ -20,38 +20,38 @@ /// DEALINGS //// -/// --------------------------------------------------------------------------- -/// Grid -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Grid +// ---------------------------------------------------------------------------- -/// Stretch container to viewport +// Stretch container to viewport html { height: 100%; - /// [screen medium +] Set base font-size to 11px + // [screen medium +] Set base font-size to 11px @include break-from-device(screen medium) { font-size: 68.75%; } - /// [screen large +] Set base font-size to 12px + // [screen large +] Set base font-size to 12px @include break-from-device(screen large) { font-size: 75.00%; } } -/// Stretch body to container and leave room for footer. +// Stretch body to container and leave room for footer. body { position: relative; min-height: 100%; - /// Lock body to viewport height (e.g. in search mode) + // Lock body to viewport height (e.g. in search mode) &.md-js__body--locked { height: 100%; overflow: hidden; } } -/// Horizontal separators +// Horizontal separators hr { display: block; height: px2rem(1px); @@ -59,24 +59,24 @@ hr { border: 0; } -/// Template-wide grid +// Template-wide grid .md-grid { max-width: 120.0rem; margin-right: auto; margin-left: auto; } -/// Prevent collapse of margin when setting margin on child element +// Prevent collapse of margin when setting margin on child element .md-container, .md-main { overflow: auto; } -/// Add top spacing to acount for header +// Add top spacing to acount for header .md-main { margin-top: 5.6rem; - /// Bottom spacing to account for footer + // Bottom spacing to account for footer &__inner { margin-top: 3.0rem; margin-bottom: 9.2rem; @@ -84,16 +84,16 @@ hr { } } -/// --------------------------------------------------------------------------- -/// Navigational elements -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Navigational elements +// ---------------------------------------------------------------------------- -/// Toggle checkbox +// Toggle checkbox .md-toggle { display: none; } -/// Overlay below expanded drawer +// Overlay below expanded drawer .md-overlay { position: fixed; top: 0; @@ -106,10 +106,10 @@ hr { opacity: 0; z-index: 2; - /// [tablet landscape -]: Trigger overlay + // [tablet landscape -]: Trigger overlay @include break-to-device(tablet landscape) { - /// Expanded drawer + // Expanded drawer .md-toggle--drawer:checked ~ & { width: 100%; height: 100%; @@ -121,25 +121,25 @@ hr { } } -/// --------------------------------------------------------------------------- -/// Flexible elements, implemented with table layout -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Flexible elements, implemented with table layout +// ---------------------------------------------------------------------------- -/// Flexible layout container +// Flexible layout container .md-flex { display: table; - /// Flexible layout container cell/element + // Flexible layout container cell/element &__cell { display: table-cell; vertical-align: top; - /// Shrink to minimum width + // Shrink to minimum width &--shrink { width: 1%; } - /// Stretch to maximum width + // Stretch to maximum width &--stretch { display: table; width: 100%; @@ -147,7 +147,7 @@ hr { } } - /// Apply ellipsis in case of overflowing text + // Apply ellipsis in case of overflowing text &__ellipsis { display: table-cell; text-overflow: ellipsis; diff --git a/src/assets/stylesheets/layout/_content.scss b/src/assets/stylesheets/layout/_content.scss index d402744e3..11040500d 100644 --- a/src/assets/stylesheets/layout/_content.scss +++ b/src/assets/stylesheets/layout/_content.scss @@ -20,34 +20,34 @@ /// DEALINGS //// -/// --------------------------------------------------------------------------- -/// Main content -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Main content +// ---------------------------------------------------------------------------- -/// Content container +// Content container .md-content { - /// [tablet landscape +]: Add space for table of contents + // [tablet landscape +]: Add space for table of contents @include break-from-device(tablet landscape) { margin-right: 24.2rem; } - /// [screen small +]: Add space for table of contents + // [screen small +]: Add space for table of contents @include break-from-device(screen small) { margin-left: 24.2rem; } - /// Define padding + // Define padding &__inner { margin: 2.4rem 1.6rem; - /// [screen small +]: Add space for table of contents + // [screen small +]: Add space for table of contents @include break-from-device(screen small) { margin: 2.4rem; } } - /// Copyright and theme information + // Copyright and theme information &__copyright { display: block; } diff --git a/src/assets/stylesheets/layout/_footer.scss b/src/assets/stylesheets/layout/_footer.scss index 10d7a5b32..5755a3b7e 100644 --- a/src/assets/stylesheets/layout/_footer.scss +++ b/src/assets/stylesheets/layout/_footer.scss @@ -20,53 +20,53 @@ /// DEALINGS //// -/// --------------------------------------------------------------------------- -/// Footer -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Footer +// ---------------------------------------------------------------------------- -/// Application footer +// Application footer .md-footer { position: absolute; bottom: 0; width: 100%; - /// Pagination container + // Pagination container &-pagination { background: $md-color-black; color: $md-color-white; } - /// Footer navigation + // Footer navigation &-nav { padding: 0.4rem; overflow: auto; - /// Links to previous and next page + // Links to previous and next page &__link { padding-top: 2.8rem; padding-bottom: 0.8rem; - /// [mobile landscape +]: Set proportional width + // [mobile landscape +]: Set proportional width @include break-from-device(mobile landscape) { width: 50%; } - /// Link to previous page + // Link to previous page &--prev { width: 25%; float: left; - /// Title + // Title .md-footer-nav__title { - /// [mobile portrait -]: Hide title for previous page + // [mobile portrait -]: Hide title for previous page @include break-to-device(mobile portrait) { display: none; } } } - /// Link to next page + // Link to next page &--next { width: 75%; float: right; @@ -74,7 +74,7 @@ } } - /// Link icon + // Link icon &__icon { display: inline-block; margin: 0.4rem; @@ -84,13 +84,13 @@ font-size: 2.4rem; cursor: pointer; - /// Pushed/clicked icon + // Pushed/clicked icon &:active { background: $md-color-white--lightest; } } - /// Link title + // Link title &__title { position: relative; padding: 0 0.4rem; @@ -98,7 +98,7 @@ line-height: 4.8rem; } - /// Link direction + // Link direction &__direction { position: absolute; right: 0; diff --git a/src/assets/stylesheets/layout/_header.scss b/src/assets/stylesheets/layout/_header.scss index 90afe3cc3..0ba87fcbb 100644 --- a/src/assets/stylesheets/layout/_header.scss +++ b/src/assets/stylesheets/layout/_header.scss @@ -20,11 +20,11 @@ /// DEALINGS //// -/// --------------------------------------------------------------------------- -/// Header -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Header +// ---------------------------------------------------------------------------- -/// Application header (stays always on top) +// Application header (stays always on top) .md-header { @include z-depth(2); @@ -37,11 +37,11 @@ color: $md-color-white; z-index: 1; - /// Navigation within header + // Navigation within header &-nav { padding: 0.4rem; - /// Header icon + // Header icon &__icon { display: inline-block; position: relative; @@ -53,22 +53,22 @@ cursor: pointer; z-index: 1; - /// Pushed/clicked icon + // Pushed/clicked icon &:active { background: $md-color-white--lightest; } - /// [tablet +]: Hide the search icon from tablet + // [tablet +]: Hide the search icon from tablet @include break-from-device(tablet) { - /// Search icon + // Search icon &.md-icon--search { display: none; } } } - /// Header title + // Header title &__title { padding: 0 2.0rem; font-size: 1.8rem; diff --git a/src/assets/stylesheets/layout/_nav.scss b/src/assets/stylesheets/layout/_nav.scss index 9eb912be4..761424cd0 100644 --- a/src/assets/stylesheets/layout/_nav.scss +++ b/src/assets/stylesheets/layout/_nav.scss @@ -20,65 +20,65 @@ /// DEALINGS //// -/// --------------------------------------------------------------------------- -/// Navigation -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Navigation +// ---------------------------------------------------------------------------- -/// Nested navigation +// Nested navigation .md-nav { - /// Set font sizes + // Set font sizes &, h3 { font-size: ms(-1); line-height: 1.2; } - /// Table of contents + // Table of contents &--toc { border-left: px2rem(4px) solid $md-color-primary; } - /// List of items + // List of items &__list { list-style: none; - /// 2nd+ level list + // 2nd+ level list & & { margin-left: 1.2rem; } - /// Hide list by default + // Hide list by default .md-nav__toggle ~ & { max-height: 0; overflow: hidden; } - /// Expand list, if toggle is checked + // Expand list, if toggle is checked .md-nav__toggle:checked ~ & { max-height: 100%; } } - /// List item + // List item &__item { margin: 0.8rem 0 0; line-height: 1.6rem; } - /// Link inside item + // Link inside item &__link { display: block; transition: color 0.125s; text-overflow: ellipsis; overflow: hidden; - /// Marked item + // Marked item &--marked { color: $md-color-black--light; } - /// Current or hovered item + // Current or hovered item &:hover, &:active, &--active { diff --git a/src/assets/stylesheets/layout/_search.scss b/src/assets/stylesheets/layout/_search.scss index f04ae6e67..7f0afd487 100644 --- a/src/assets/stylesheets/layout/_search.scss +++ b/src/assets/stylesheets/layout/_search.scss @@ -20,19 +20,19 @@ /// DEALINGS //// -/// --------------------------------------------------------------------------- -/// Search -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Search +// ---------------------------------------------------------------------------- -/// Application search +// Application search .md-search { position: relative; - /// Search overlay + // Search overlay &__overlay { display: none; - /// [mobile -]: Only show overlay on mobile + // [mobile -]: Only show overlay on mobile @include break-to-device(mobile) { display: block; position: absolute; @@ -49,7 +49,7 @@ overflow: hidden; z-index: 0; - /// Expanded overlay + // Expanded overlay .md-toggle--search:checked ~ .md-header & { transform: scale(40); transition: transform 0.4s, @@ -60,29 +60,29 @@ } } - /// Inner wrapper + // Inner wrapper &__inner { padding: 0.8rem 0.8rem 0; - /// [tablet +]: Header-embedded search + // [tablet +]: Header-embedded search @include break-from-device(tablet) { padding: 0.4rem; } } - /// Search form + // Search form &__form { position: relative; border-radius: px2rem(2px); text-align: right; - /// [mobile -]: Add drop-shadow on mobile + // [mobile -]: Add drop-shadow on mobile @include break-to-device(mobile) { @include z-depth(2); } } - /// Icon + // Icon &__icon { position: absolute; top: 0.8rem; @@ -91,36 +91,36 @@ font-size: 2.4rem; cursor: pointer; - /// [mobile -]: Use back arrow as search icon + // [mobile -]: Use back arrow as search icon @include break-to-device(mobile) { top: 1.2rem; - /// Hack: @extend doesn't work in media queries, so override manually + // Hack: @extend doesn't work in media queries, so override manually &::before { content: "arrow_back"; } } } - /// Search field + // Search field &__input { padding: 0 0.8rem 0 6.4rem; border-radius: px2rem(2px); - /// Placeholder and icon color in active state + // Placeholder and icon color in active state + .md-search__icon, &::placeholder { color: $md-color-black--light; } - /// [mobile -]: Full-screen search bar + // [mobile -]: Full-screen search bar @include break-to-device(mobile) { width: 100%; height: 4.8rem; font-size: 1.8rem; } - /// [tablet +]: Header-embedded search + // [tablet +]: Header-embedded search @include break-from-device(tablet) { width: 23.0rem; height: 4.0rem; @@ -132,20 +132,20 @@ color: $md-color-white; font-size: ms(0); - /// Placeholder color + // Placeholder color + .md-search__icon, &::placeholder { transition: color 0.25s; color: $md-color-white; } - /// Active search field + // Active search field &:focus { width: 40.0rem; background: $md-color-white; color: $md-color-black; - /// Placeholder and icon color in active state + // Placeholder and icon color in active state + .md-search__icon, &::placeholder { color: $md-color-black--light; diff --git a/src/assets/stylesheets/layout/_sidebar.scss b/src/assets/stylesheets/layout/_sidebar.scss index a16200327..9afa52b27 100644 --- a/src/assets/stylesheets/layout/_sidebar.scss +++ b/src/assets/stylesheets/layout/_sidebar.scss @@ -20,27 +20,27 @@ /// DEALINGS //// -/// --------------------------------------------------------------------------- -/// Sidebar -/// --------------------------------------------------------------------------- +// ---------------------------------------------------------------------------- +// Sidebar +// ---------------------------------------------------------------------------- -/// Sidebar content +// Sidebar content .md-sidebar { position: relative; width: 24.2rem; float: left; overflow: visible; - /// Lock sidebar to container height (account for fixed header) + // Lock sidebar to container height (account for fixed header) &.md-js__sidebar--locked { position: fixed; top: 5.6rem; } - /// [tablet landscape -]: Convert navigation to drawer + // [tablet landscape -]: Convert navigation to drawer @include break-to-device(tablet landscape) { - /// Render primary sidebar as a slideout container + // Render primary sidebar as a slideout container &--primary { position: fixed; top: 0; @@ -51,16 +51,16 @@ background: $md-color-white; z-index: 3; - /// Just hide drawer, if browser doesn't support 3D transforms + // Just hide drawer, if browser doesn't support 3D transforms .no-csstransforms3d & { display: none; } - /// Expanded drawer + // Expanded drawer .md-toggle--drawer:checked ~ .md-container & { transform: translate3d(0, 0, 0); - /// Just show drawer, if browser doesn't support 3D transforms + // Just show drawer, if browser doesn't support 3D transforms .no-csstransforms3d & { display: block; } @@ -68,21 +68,21 @@ } } - /// Secondary sidebar with table of contents + // Secondary sidebar with table of contents &--secondary { display: none; - /// [tablet landscape +]: Show table of contents next to body copy + // [tablet landscape +]: Show table of contents next to body copy @include break-from-device(tablet landscape) { display: block; float: right; - /// Hack to align right in case of locked sidebar + // Hack to align right in case of locked sidebar &.md-js__sidebar--locked { margin-left: 100%; transform: translate(-100%, 0); - /// [screen small +]: Limit to grid + // [screen small +]: Limit to grid @include break-from-device(screen small) { margin-left: 120.0rem; } @@ -90,22 +90,22 @@ } } - /// Wrapper for scrolling on overflow + // Wrapper for scrolling on overflow &__scrollwrap { margin: 2.4rem 0.4rem; overflow-y: scroll; -webkit-overflow-scrolling: touch; - /// [tablet landscape -]: Adjust margins + // [tablet landscape -]: Adjust margins @include break-to-device(tablet landscape) { - /// Adjust margins for primary scrollbar + // Adjust margins for primary scrollbar .md-sidebar--primary & { margin: 0; } } - /// Limit height to window, if JavaScript is available + // Limit height to window, if JavaScript is available .js & { position: absolute; top: 0; @@ -114,23 +114,23 @@ left: 0; } - /// Override native scrollbar styles + // Override native scrollbar styles &::-webkit-scrollbar { width: 0.4rem; height: 0.4rem; - /// Style scrollbar thumb + // Style scrollbar thumb &-thumb { background: $md-color-black--lighter; } } } - /// Actual sidebar content + // Actual sidebar content &__inner { padding: 1.2rem; - /// [screen small +]: Add line for reference + // [screen small +]: Add line for reference @include break-from-device(screen small) { border-right: px2rem(1px) solid $md-color-black--lightest; }