beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Housekeeping for navigation module

Browse source 
Variables moved, added a hidden flag for an old fix that was in the header logo.
This commit is contained in:
Angelos Chalaris 2017-03-30 13:54:10 +03:00
parent 7b22333c59
commit 58b8cf981a
4 changed files with 115 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docs/v2/DEVLOG.md
View file

@ -894,3 +894,5 @@
- Updated `grid` by moving variable definitions and defaults to the top of the module. - Updated `grid` by moving variable definitions and defaults to the top of the module.
- Updated flavor files, dealing with indentation and readability. - Updated flavor files, dealing with indentation and readability.
- Updated `navigation` by moving variable definitions and defaults. Added **hidden flag** `$header-colorize-svgs` for a hacky fix that was there before (just in case).
- Updated flavor files, made most multiline comments up to `navigation` into single line comments in order to make the flavor files shorter while maintining readability.

48
src/flavors/mini-default.scss
View file

@ -16,8 +16,7 @@ $base-root-font-size: 16px; // Root font sizing for all elements [1]
$base-font-size: 1em; // Default font sizing for all elements [2] $base-font-size: 1em; // Default font sizing for all elements [2]
$base-line-height: 1.5; // Default line height for all elements. $base-line-height: 1.5; // Default line height for all elements.
$body-margin: 0; // Margin for the body $body-margin: 0; // Margin for the body
$apply-defaults-to-all: true; // Should default values be applied to all $apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3]
// elements? (`true` or `false`) [3]
$h1-font-size: 2em; // Font size of h1 $h1-font-size: 2em; // Font size of h1
$h2-font-size: 1.5em; // Font size for h2 $h2-font-size: 1.5em; // Font size for h2
$h3-font-size: 1.25em; // Font size for h3 $h3-font-size: 1.25em; // Font size for h3
@ -28,8 +27,7 @@ $heading-line-height: 1.2em; // Line height for all headings
$heading-margin: 12px 8px; // Margin for all headings $heading-margin: 12px 8px; // Margin for all headings
$heading-font-weight: 500; // Font weight for all headings $heading-font-weight: 500; // Font weight for all headings
$heading-smalltext-fore-color: #424242; // <small> color in headings $heading-smalltext-fore-color: #424242; // <small> color in headings
$make-heading-smalltext-block: true; // Should <small> elements in headings $make-heading-smalltext-block: true; // Should <small> elements in headings be displayed as blocks (`true`/`false`) [4]
// be displayed as blocks (`true`/`false`) [4]
$heading-smalltext-b-font-size: 75%; // Font size of block <small> elements in headings $heading-smalltext-b-font-size: 75%; // Font size of block <small> elements in headings
$heading-smalltext-b-top-margin:-4px; // Top margin of block <small> elements in headings $heading-smalltext-b-top-margin:-4px; // Top margin of block <small> elements in headings
$paragraph-margin: 1px 8px; // Margin for <p> elements $paragraph-margin: 1px 8px; // Margin for <p> elements
@ -38,10 +36,8 @@ $list-left-padding: 28px; // Left padding for <ol> and <ul> elements
$bold-font-weight: 700; // Font weight for <b> and <strong> $bold-font-weight: 700; // Font weight for <b> and <strong>
$horizontal-rule-line-height: 1.25em; // <hr> line height $horizontal-rule-line-height: 1.25em; // <hr> line height
$horizontal-rule-margin: 8px; // <hr> margin $horizontal-rule-margin: 8px; // <hr> margin
$horizontal-rule-border-style: 1px solid #757575;// Border style for horizontal rules (used $horizontal-rule-border-style: 1px solid #757575;// Border style for horizontal rules (used in the <hr> element's border-top)
// in the <hr> element's border-top) $horizontal-rule-fancy-style: true; // Should a fancy styling be applied for the <hr> element (`true`/`false`) [5]
$horizontal-rule-fancy-style: true; // Should a fancy styling be applied for the
// <hr> element (`true`/`false`) [5]
$horizontal-rule-fancy-gradient:"to right, #bdbdbd, #616161, #bdbdbd"; // Gradient style for fancy horizontal rule $horizontal-rule-fancy-gradient:"to right, #bdbdbd, #616161, #bdbdbd"; // Gradient style for fancy horizontal rule
$blockquote-back-color: #eeeeee; // Background color for <blockquote> $blockquote-back-color: #eeeeee; // Background color for <blockquote>
$blockquote-fore-color: $fore-color; // Text color for <blockquote> $blockquote-fore-color: $fore-color; // Text color for <blockquote>
@ -56,8 +52,7 @@ $blockquote-border-style: 0; // Border style for <blockquote>
$blockquote-border-radius: 0 2px 2px 0; // Border radius for <blockquote> $blockquote-border-radius: 0 2px 2px 0; // Border radius for <blockquote>
$blockquote-box-shadow: // Box shadow for <blockquote> $blockquote-box-shadow: // Box shadow for <blockquote>
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); 0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
$use-default-code-fonts: true; // Should default font choice (monospace) be $use-default-code-fonts: true; // Should default font choice (monospace) be used for code elements? (`true`/`false`) [6]
// used for code elements? (`true`/`false`) [6]
//$code-font-family: monospace, monospace; // Fonts for code elements if not default //$code-font-family: monospace, monospace; // Fonts for code elements if not default
$code-element-padding: 2px 4px; // Padding for <code> $code-element-padding: 2px 4px; // Padding for <code>
$code-element-fore-color: $fore-color; // Text color for <code> $code-element-fore-color: $fore-color; // Text color for <code>
@ -74,8 +69,7 @@ $pre-element-border-radius: 0 2px 2px 0; // Border radius for <pre>
$pre-element-margin: 8px 10px; // Margin for <pre> $pre-element-margin: 8px 10px; // Margin for <pre>
$pre-element-box-shadow: // Box shadow for <pre> $pre-element-box-shadow: // Box shadow for <pre>
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); 0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the $add-pre-element-sidebar: true; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
// left side of <pre> (`true`/`false`) [7]
$pre-element-sidebar-style: 3px solid #1565c0; // Style of the sidebar of <pre> $pre-element-sidebar-style: 3px solid #1565c0; // Style of the sidebar of <pre>
$kbd-element-padding: 2px 4px; // Padding for <kbd> $kbd-element-padding: 2px 4px; // Padding for <kbd>
$kbd-element-fore-color: #fafafa; // Text color for <kbd> $kbd-element-fore-color: #fafafa; // Text color for <kbd>
@ -84,15 +78,13 @@ $kbd-element-border-style: 0; // Border style for <kbd>
$kbd-element-border-radius: 2px; // Border radius for <kbd> $kbd-element-border-radius: 2px; // Border radius for <kbd>
$kbd-element-box-shadow: // Box shadow for <kbd> $kbd-element-box-shadow: // Box shadow for <kbd>
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); 0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
$style-samp-element: false; // Should styles for <samp> be included? $style-samp-element: false; // Should styles for <samp> be included? (`true`/`false`) [8]
// (`true`/`false`) [8]
//$samp-element-padding: 2px 4px; // Padding for <samp> //$samp-element-padding: 2px 4px; // Padding for <samp>
//$samp-element-fore-color: $fore-color; // Text color for <samp> //$samp-element-fore-color: $fore-color; // Text color for <samp>
//$samp-element-back-color: #2196f3; // Background color for <samp> //$samp-element-back-color: #2196f3; // Background color for <samp>
//$samp-element-border-style: 0; // Border style for <samp> //$samp-element-border-style: 0; // Border style for <samp>
//$samp-element-border-radius:2px; // Border radius for <samp> //$samp-element-border-radius:2px; // Border radius for <samp>
$include-dfn-fix: true; // Should the fix for Android 4.3 concerning <dfn> $include-dfn-fix: true; // Should the fix for Android 4.3 concerning <dfn> be included (`true`/`false`) [9]
// be included (`true`/`false`) [9]
$small-font-size: 75%; // Font size for <small> elements $small-font-size: 75%; // Font size for <small> elements
$sup-font-size: 75%; // Font size for <sup> elements $sup-font-size: 75%; // Font size for <sup> elements
$sub-font-size: 75%; // Font size for <sub> elements $sub-font-size: 75%; // Font size for <sub> elements
@ -101,11 +93,8 @@ $sub-bottom: -4px; // <sub> bottom
$link-fore-color: #0277bd; // Text color for <a> $link-fore-color: #0277bd; // Text color for <a>
$link-visited-fore-color: #01579b; // Text color for visited <a> $link-visited-fore-color: #01579b; // Text color for visited <a>
$link-font-weight: 500; // Font weight for <a> $link-font-weight: 500; // Font weight for <a>
$apply-link-underline: true; // Should an underline be applied to all <a> $apply-link-underline: true; // Should an underline be applied to all <a> elements? (`true`/`false`) [10]
// elements? (`true`/`false`) [10] $apply-link-hover-fade: true; // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`) [11]
$apply-link-hover-fade: true; // Should the :hover and :focus state of <a>
// elements use fade-out instead of a different
// color (`true`/`false`) [11]
//$link-hover-fore-color: #0288d1; // Text color for <a> when hovered or focused //$link-hover-fore-color: #0288d1; // Text color for <a> when hovered or focused
// Notes: // Notes:
// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root // [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root
@ -132,10 +121,8 @@ $apply-link-hover-fade: true; // Should the :hover and :focus state o
// [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or // [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
// focused. Otherwise, the color specified in $link-hover-fore-color will be used. // focused. Otherwise, the color specified in $link-hover-fore-color will be used.
// Variables for grid elements // Variables for grid elements
$use-four-step-grid: false; // Should the old 4-step grid system be used $use-four-step-grid: false; // Should the old 4-step grid system be used instead of the new (`true`/`false`) [1]
// instead of the new (`true`/`false`) [1] $include-parent-layout: true; // Should the classes for rows defining the column layout of children be included (`true`/`false`) [2]
$include-parent-layout: true; // Should the classes for rows defining the column
// layout of children be included (`true`/`false`) [2]
$grid-container-name: 'container'; // Class name for the grid container $grid-container-name: 'container'; // Class name for the grid container
$grid-container-side-padding: 10px; // Padding for the grid container (left and right only) $grid-container-side-padding: 10px; // Padding for the grid container (left and right only)
$grid-row-name: 'row'; // Class name for the grid's rows $grid-row-name: 'row'; // Class name for the grid's rows
@ -175,8 +162,7 @@ $header-logo-margin: 1px 6px 1px 1px; // Margin for <header>'s logo
$header-logo-padding: 3px 0 0; // Padding for <header>'s logo $header-logo-padding: 3px 0 0; // Padding for <header>'s logo
$header-link-hover-color: #37474f; // Hover color for <header>'s links $header-link-hover-color: #37474f; // Hover color for <header>'s links
$header-link-margin: 2px 0 0; // Margin for <header>'s links $header-link-margin: 2px 0 0; // Margin for <header>'s links
$include-header-sticky: true; // Should sticky <header> elements be $include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
// included? (`true`/`false`) [1]
$header-sticky-name: 'sticky'; // Class name for sticky <header> $header-sticky-name: 'sticky'; // Class name for sticky <header>
$nav-back-color: #eceff1; // Background for <nav> $nav-back-color: #eceff1; // Background for <nav>
$nav-fore-color: $fore-color; // Text color for <nav> $nav-fore-color: $fore-color; // Text color for <nav>
@ -189,9 +175,8 @@ $nav-box-shadow: // Box shadow for <nav>
$nav-link-fore-color: #1565c0; // Text color for links in <nav> $nav-link-fore-color: #1565c0; // Text color for links in <nav>
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav> $nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
$nav-sublink-depth: 2; // Amount of subcategory classes to add $nav-sublink-depth: 2; // Amount of subcategory classes to add
$nav-sublink-padding-left: 12px; // Left padding to add to subcategories $nav-sublink-padding-left:12px; // Left padding to add to subcategories
$nav-include-sublink-bar: true; // Should a left border bar be added to $nav-include-sublink-bar: true; // Should a left border bar be added to subcategories (`true`/`false`) [2]
// subcategories (`true`/`false`) [2]
$nav-sublink-bar-left-position: 3px; // Left position of subcategory bar $nav-sublink-bar-left-position: 3px; // Left position of subcategory bar
$nav-sublink-bar-width: 1px; // Width of the subcategory bar $nav-sublink-bar-width: 1px; // Width of the subcategory bar
$nav-sublink-bar-color: #78909c; // Subcategory bar color $nav-sublink-bar-color: #78909c; // Subcategory bar color
@ -202,8 +187,7 @@ $footer-font-size: 85%; // Font size for <footer>
$footer-margin: 18px 0 0; // Margin for <footer> $footer-margin: 18px 0 0; // Margin for <footer>
$footer-padding: 22px 10px 12px; // Padding for <footer> $footer-padding: 22px 10px 12px; // Padding for <footer>
$footer-link-fore-color: #039be5; // Text color for links in <footer> $footer-link-fore-color: #039be5; // Text color for links in <footer>
$include-footer-sticky: true; // Should sticky <footer> elements be $include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
// included (`true`/`false`) [3]
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements $footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
// Notes: // Notes:
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning // [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning

48
src/flavors/mini-sucroa.scss
View file

@ -18,8 +18,7 @@ $base-root-font-size: 16px; // Root font sizing for all elements [1]
$base-font-size: 1em; // Default font sizing for all elements [2] $base-font-size: 1em; // Default font sizing for all elements [2]
$base-line-height: 1.7; // Default line height for all elements. $base-line-height: 1.7; // Default line height for all elements.
$body-margin: 0; // Margin for the body $body-margin: 0; // Margin for the body
$apply-defaults-to-all: true; // Should default values be applied to all $apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3]
// elements? (`true` or `false`) [3]
$h1-font-size: 2.2em; // Font size of h1 $h1-font-size: 2.2em; // Font size of h1
$h2-font-size: 1.7em; // Font size for h2 $h2-font-size: 1.7em; // Font size for h2
$h3-font-size: 1.4em; // Font size for h3 $h3-font-size: 1.4em; // Font size for h3
@ -30,8 +29,7 @@ $heading-line-height: 1.2em; // Line height for all headings
$heading-margin: 12px 10px; // Margin for all headings $heading-margin: 12px 10px; // Margin for all headings
$heading-font-weight: 500; // Font weight for all headings $heading-font-weight: 500; // Font weight for all headings
$heading-smalltext-fore-color: #424242; // <small> color in headings $heading-smalltext-fore-color: #424242; // <small> color in headings
$make-heading-smalltext-block: true; // Should <small> elements in headings $make-heading-smalltext-block: true; // Should <small> elements in headings be displayed as blocks (`true`/`false`) [4]
// be displayed as blocks (`true`/`false`) [4]
$heading-smalltext-b-font-size: 75%; // Font size of block <small> elements in headings $heading-smalltext-b-font-size: 75%; // Font size of block <small> elements in headings
$heading-smalltext-b-top-margin:-2px; // Top margin of block <small> elements in headings $heading-smalltext-b-top-margin:-2px; // Top margin of block <small> elements in headings
$paragraph-margin: 4px 10px; // Margin for <p> elements $paragraph-margin: 4px 10px; // Margin for <p> elements
@ -40,10 +38,8 @@ $list-left-padding: 32px; // Left padding for <ol> and <ul> element
$bold-font-weight: 700; // Font weight for <b> and <strong> $bold-font-weight: 700; // Font weight for <b> and <strong>
$horizontal-rule-line-height: 1.3em; // <hr> line height $horizontal-rule-line-height: 1.3em; // <hr> line height
$horizontal-rule-margin: 10px; // <hr> margin $horizontal-rule-margin: 10px; // <hr> margin
$horizontal-rule-border-style: 1px solid #757575; // Border style for horizontal rules (used $horizontal-rule-border-style: 1px solid #757575; // Border style for horizontal rules (used in the <hr> element's border-top)
// in the <hr> element's border-top) $horizontal-rule-fancy-style: true; // Should a fancy styling be applied for the <hr> element (`true`/`false`) [5]
$horizontal-rule-fancy-style: true; // Should a fancy styling be applied for the
// <hr> element (`true`/`false`) [5]
$horizontal-rule-fancy-gradient:"to right, #5d545f, #1e1320, #5d545f"; // Gradient style for fancy horizontal rule $horizontal-rule-fancy-gradient:"to right, #5d545f, #1e1320, #5d545f"; // Gradient style for fancy horizontal rule
$blockquote-back-color: #eae1ff; // Background color for <blockquote> $blockquote-back-color: #eae1ff; // Background color for <blockquote>
$blockquote-fore-color: $fore-color; // Text color for <blockquote> $blockquote-fore-color: $fore-color; // Text color for <blockquote>
@ -58,8 +54,7 @@ $blockquote-border-style: 0; // Border style for <blockquote>
$blockquote-border-radius: 2px; // Border radius for <blockquote> $blockquote-border-radius: 2px; // Border radius for <blockquote>
$blockquote-box-shadow: // Box shadow for <blockquote> $blockquote-box-shadow: // Box shadow for <blockquote>
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); 0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
$use-default-code-fonts: false; // Should default font choice (monospace) be $use-default-code-fonts: false; // Should default font choice (monospace) be used for code elements? (`true`/`false`) [6]
// used for code elements? (`true`/`false`) [6]
$code-font-family: 'Cousine', monospace, monospace;// Fonts for code elements if not default $code-font-family: 'Cousine', monospace, monospace;// Fonts for code elements if not default
$code-element-padding: 3px 4px; // Padding for <code> $code-element-padding: 3px 4px; // Padding for <code>
$code-element-fore-color: $fore-color; // Text color for <code> $code-element-fore-color: $fore-color; // Text color for <code>
@ -76,8 +71,7 @@ $pre-element-border-radius: 2px; // Border radius for <pre>
$pre-element-margin: 10px; // Margin for <pre> $pre-element-margin: 10px; // Margin for <pre>
$pre-element-box-shadow: // Box shadow for <pre> $pre-element-box-shadow: // Box shadow for <pre>
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); 0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the $add-pre-element-sidebar: true; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
// left side of <pre> (`true`/`false`) [7]
$pre-element-sidebar-style: 3px solid #6979c6; // Style of the sidebar of <pre> $pre-element-sidebar-style: 3px solid #6979c6; // Style of the sidebar of <pre>
$kbd-element-padding: 3px 4px; // Padding for <kbd> $kbd-element-padding: 3px 4px; // Padding for <kbd>
$kbd-element-fore-color: #fffddc; // Text color for <kbd> $kbd-element-fore-color: #fffddc; // Text color for <kbd>
@ -86,15 +80,13 @@ $kbd-element-border-style: 0; // Border style for <kbd>
$kbd-element-border-radius: 2px; // Border radius for <kbd> $kbd-element-border-radius: 2px; // Border radius for <kbd>
$kbd-element-box-shadow: // Box shadow for <kbd> $kbd-element-box-shadow: // Box shadow for <kbd>
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); 0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
$style-samp-element: false; // Should styles for <samp> be included? $style-samp-element: false; // Should styles for <samp> be included? (`true`/`false`) [8]
// (`true`/`false`) [8]
//$samp-element-padding: 2px 4px; // Padding for <samp> //$samp-element-padding: 2px 4px; // Padding for <samp>
//$samp-element-fore-color: $fore-color; // Text color for <samp> //$samp-element-fore-color: $fore-color; // Text color for <samp>
//$samp-element-back-color: #2196f3; // Background color for <samp> //$samp-element-back-color: #2196f3; // Background color for <samp>
//$samp-element-border-style: 0; // Border style for <samp> //$samp-element-border-style: 0; // Border style for <samp>
//$samp-element-border-radius:2px; // Border radius for <samp> //$samp-element-border-radius:2px; // Border radius for <samp>
$include-dfn-fix: true; // Should the fix for Android 4.3 concerning <dfn> $include-dfn-fix: true; // Should the fix for Android 4.3 concerning <dfn> be included (`true`/`false`) [9]
// be included (`true`/`false`) [9]
$small-font-size: 80%; // Font size for <small> elements $small-font-size: 80%; // Font size for <small> elements
$sup-font-size: 80%; // Font size for <sup> elements $sup-font-size: 80%; // Font size for <sup> elements
$sub-font-size: 80%; // Font size for <sub> elements $sub-font-size: 80%; // Font size for <sub> elements
@ -103,11 +95,8 @@ $sub-bottom: -6px; // <sub> bottom
$link-fore-color: #5664a3; // Text color for <a> $link-fore-color: #5664a3; // Text color for <a>
$link-visited-fore-color: #434e7f; // Text color for visited <a> $link-visited-fore-color: #434e7f; // Text color for visited <a>
$link-font-weight: 500; // Font weight for <a> $link-font-weight: 500; // Font weight for <a>
$apply-link-underline: true; // Should an underline be applied to all <a> $apply-link-underline: true; // Should an underline be applied to all <a> elements? (`true`/`false`) [10]
// elements? (`true`/`false`) [10] $apply-link-hover-fade: true; // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`) [11]
$apply-link-hover-fade: true; // Should the :hover and :focus state of <a>
// elements use fade-out instead of a different
// color (`true`/`false`) [11]
//$link-hover-fore-color: #0288d1; // Text color for <a> when hovered or focused //$link-hover-fore-color: #0288d1; // Text color for <a> when hovered or focused
// Notes: // Notes:
// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root // [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root
@ -134,10 +123,8 @@ $apply-link-hover-fade: true; // Should the :hover and :focus state o
// [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or // [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
// focused. Otherwise, the color specified in $link-hover-fore-color will be used. // focused. Otherwise, the color specified in $link-hover-fore-color will be used.
// Variables for grid elements // Variables for grid elements
$use-four-step-grid: false; // Should the old 4-step grid system be used $use-four-step-grid: false; // Should the old 4-step grid system be used instead of the new (`true`/`false`) [1]
// instead of the new (`true`/`false`) [1] $include-parent-layout: true; // Should the classes for rows defining the column layout of children be included (`true`/`false`) [2]
$include-parent-layout: true; // Should the classes for rows defining the column
// layout of children be included (`true`/`false`) [2]
$grid-container-name: 'container'; // Class name for the grid container $grid-container-name: 'container'; // Class name for the grid container
$grid-container-side-padding: 10px; // Padding for the grid container (left and right only) $grid-container-side-padding: 10px; // Padding for the grid container (left and right only)
$grid-row-name: 'row'; // Class name for the grid's rows $grid-row-name: 'row'; // Class name for the grid's rows
@ -175,8 +162,7 @@ $header-logo-margin: 6px 6px 1px 1px; // Margin for <header>'s logo
$header-logo-padding: 6px 0 0; // Padding for <header>'s logo $header-logo-padding: 6px 0 0; // Padding for <header>'s logo
$header-link-hover-color: #493e4b; // Hover color for <header>'s links $header-link-hover-color: #493e4b; // Hover color for <header>'s links
$header-link-margin: 3px 0 0; // Margin for <header>'s links $header-link-margin: 3px 0 0; // Margin for <header>'s links
$include-header-sticky: true; // Should sticky <header> elements be $include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
// included? (`true`/`false`) [1]
$header-sticky-name: 'sticky'; // Class name for sticky <header> $header-sticky-name: 'sticky'; // Class name for sticky <header>
$nav-back-color: #e8deff; // Background for <nav> $nav-back-color: #e8deff; // Background for <nav>
$nav-fore-color: $fore-color; // Text color for <nav> $nav-fore-color: $fore-color; // Text color for <nav>
@ -189,9 +175,8 @@ $nav-box-shadow: // Box shadow for <nav>
$nav-link-fore-color: #6979c6; // Text color for links in <nav> $nav-link-fore-color: #6979c6; // Text color for links in <nav>
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav> $nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
$nav-sublink-depth: 2; // Amount of subcategory classes to add $nav-sublink-depth: 2; // Amount of subcategory classes to add
$nav-sublink-padding-left: 14px; // Left padding to add to subcategories $nav-sublink-padding-left:14px; // Left padding to add to subcategories
$nav-include-sublink-bar: false; // Should a left border bar be added to $nav-include-sublink-bar: false; // Should a left border bar be added to subcategories (`true`/`false`) [2]
// subcategories (`true`/`false`) [2]
$footer-back-color: #211423; // Background color for <footer> $footer-back-color: #211423; // Background color for <footer>
$footer-fore-color: #fffddc; // Text color for <footer> $footer-fore-color: #fffddc; // Text color for <footer>
$footer-border-style: 0; // Border stye for <footer> $footer-border-style: 0; // Border stye for <footer>
@ -199,8 +184,7 @@ $footer-font-size: 90%; // Font size for <footer>
$footer-margin: 22px 0 0; // Margin for <footer> $footer-margin: 22px 0 0; // Margin for <footer>
$footer-padding: 24px 10px 14px; // Padding for <footer> $footer-padding: 24px 10px 14px; // Padding for <footer>
$footer-link-fore-color: #7480b3; // Text color for links in <footer> $footer-link-fore-color: #7480b3; // Text color for links in <footer>
$include-footer-sticky: true; // Should sticky <footer> elements be $include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
// included (`true`/`false`) [3]
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements $footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
// Notes: // Notes:
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning // [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning

24
src/mini/_navigation.scss
View file

@ -2,11 +2,16 @@
Definitions for navigation elements. Definitions for navigation elements.
*/ */
// Different elements are styled based on the same set of rules. // Different elements are styled based on the same set of rules.
$button-class-name: 'button' !default; // Class name for the button-like elements.
$header-logo-name: 'logo' !default; // Class name for <header>'s logo.
$header-colorize-svgs: true !default; // [Hidden flag] Colorizes SVGs in the <header> element's logo (`true`/`false`).
$include-header-sticky: false !default; // Should the sticky class for <header> elements be included (`true`/`false`).
$include-footer-sticky: false !default; // Should the sticky class for <footer> elements be included (`true`/`false`).
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav.
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add.
$nav-sublink-padding-left:12px !default; // Left padding to add to subcategories.
$nav-include-sublink-bar: false !default; // Should a border be added to the subcategories? (`true`/`false`)
// Header styling. // Header styling.
$button-class-name: 'button' !default; // Class name for the button-like elements
$header-logo-name: 'logo' !default; // Class name for <header>'s logo
$include-header-sticky: false !default; // Should the sticky class for <header> elements be included
$include-footer-sticky: false !default; // Should the sticky class for <footer> elements be included
header { header {
display: block; // Correct display for older versions of IE. display: block; // Correct display for older versions of IE.
height: $header-height; height: $header-height;
@ -34,7 +39,9 @@ header {
overflow-y: hidden; overflow-y: hidden;
// Header logo styling. // Header logo styling.
.#{$header-logo-name} { .#{$header-logo-name} {
color: $header-fore-color; // Keep this in case people use SVGs? Is it necessary? @if $header-colorize-svgs { // Deals with SVG colorization in case people use SVGs.
color: $header-fore-color; // Only toggle off if you know what you're doing.
}
@if $header-logo-font-size != $base-font-size { @if $header-logo-font-size != $base-font-size {
font-size: $header-logo-font-size; font-size: $header-logo-font-size;
} }
@ -107,10 +114,6 @@ nav {
color: $nav-link-fore-color; // Apply regardless to de-stylize visited links. color: $nav-link-fore-color; // Apply regardless to de-stylize visited links.
} }
// Subcategories in navigation. // Subcategories in navigation.
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add
$nav-sublink-padding-left: 12px !default; // Left padding to add to subcategories
$nav-include-sublink-bar: false !default; // Should a border be added to the subcategories?
@for $i from 1 through $nav-sublink-depth { @for $i from 1 through $nav-sublink-depth {
.#{$nav-sublink-prefix}-#{$i} { .#{$nav-sublink-prefix}-#{$i} {
padding-left: $i * $nav-sublink-padding-left; padding-left: $i * $nav-sublink-padding-left;
@ -152,8 +155,7 @@ footer {
color: $footer-link-fore-color; color: $footer-link-fore-color;
} }
} }
// Sticky headers and footers.
@if $include-header-sticky and $include-footer-sticky { @if $include-header-sticky and $include-footer-sticky {
header.#{$header-sticky-name}, footer.#{$footer-sticky-name} { header.#{$header-sticky-name}, footer.#{$footer-sticky-name} {
position: -webkit-sticky; position: -webkit-sticky;