diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index d2e0248..70deb9f 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -39,3 +39,5 @@ - Defaults for `font-family`, `font-size`, `line-height` remain the same. - Dropped support for `ms-text-size-adjust` in the `html` element, as mobile IE is not well supported by the framework in general. - Added `apply-defaults-to-all` flag to apply fonts and styles to all elements except `html`, setting fonts and sizes for the whole document properly. +- Set basic styles for headers. +- Change to the color of `small` elements in headers from `#555` to `#444`. diff --git a/docs/v2/index.html b/docs/v2/index.html index 3dd298c..0f3acf5 100644 --- a/docs/v2/index.html +++ b/docs/v2/index.html @@ -9,10 +9,20 @@ - + +

mini.css A minimal Sass-y responsive mobile-first style-agnostic CSS framework

v2.0 is currently in development. The following page and any related links are going to be incomplete, buggy and/or unstable. But, if you are interested in seeing what it will look like, have a peek!

+

+
+

Heading 1 small text

+

Heading 2 small text

+

Heading 3 small text

+

Heading 4 small text

+
Heading 5 small text
+
Heading 6 small text
+
\ No newline at end of file diff --git a/flavors/v2/mini-default.css b/flavors/v2/mini-default.css index a3d560f..bcffee7 100644 --- a/flavors/v2/mini-default.css +++ b/flavors/v2/mini-default.css @@ -17,13 +17,30 @@ body { article, aside, footer, header, nav, section, figcaption, figure, main { display: block; } -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ +h1, h2, h3, h4, h5, h6 { + line-height: 1.2em; + margin: 0.7em 0; + font-weight: 500; } + h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { + color: #444; } + h1 { - font-size: 2em; - margin: 0.67em 0; } + font-size: 2em; } + +h2 { + font-size: 1.5em; } + +h3 { + font-size: 1.15em; } + +h4 { + font-size: 1em; } + +h5 { + font-size: 0.85em; } + +h6 { + font-size: 0.75em; } /** * 1. Add the correct box sizing in Firefox. diff --git a/flavors/v2/mini-default.min.css b/flavors/v2/mini-default.min.css index 053ce1e..a3049d3 100644 --- a/flavors/v2/mini-default.min.css +++ b/flavors/v2/mini-default.min.css @@ -1 +1 @@ -*,html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#f9f9f9}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item} \ No newline at end of file +*,html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#f9f9f9}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}h1,h2,h3,h4,h5,h6{line-height:1.2em;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#444}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.85em}h6{font-size:.75em}hr{box-sizing:content-box;height:0;overflow:visible}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item} \ No newline at end of file diff --git a/flavors/v2/mini-default.scss b/flavors/v2/mini-default.scss index 45ebc98..08fac31 100644 --- a/flavors/v2/mini-default.scss +++ b/flavors/v2/mini-default.scss @@ -17,5 +17,15 @@ $base-line-height: 1.5; // Default line height for all elements. $body-margin: 0; // Margin for the body $apply-defaults-to-all: true; // Should default values be applied to all // elements? (`true` or `false`) +$h1-font-size: 2em; // Font size of h1 +$h2-font-size: 1.5em; // Font size for h2 +$h3-font-size: 1.15em; // Font size for h3 +$h4-font-size: 1em; // Font size for h4 +$h5-font-size: 0.85em; // Font size for h5 +$h6-font-size: 0.75em; // Font size for h6 +$header-line-height: 1.2em; // Line height for all headers +$header-margin: 0.7em 0; // Margin for all headers +$header-font-weight: 500; // Font weight for all headers +$header-smalltext-fore-color: #444; // color in headers // Enable base @import '../../scss/v2/base'; \ No newline at end of file diff --git a/scss/v2/_base.scss b/scss/v2/_base.scss index 57da894..76885ee 100644 --- a/scss/v2/_base.scss +++ b/scss/v2/_base.scss @@ -29,14 +29,32 @@ article, aside, footer, header, nav, section, figcaption, figure, main { display: block; } -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ +h1, h2, h3, h4, h5, h6 { + line-height: $header-line-height; + margin: $header-margin; + font-weight: $header-font-weight; + small { + color: $header-smalltext-fore-color; + } +} h1 { - font-size: 2em; - margin: 0.67em 0; + font-size: $h1-font-size; +} +h2 { + font-size: $h2-font-size; +} +h3 { + font-size: $h3-font-size; +} +h4 { + font-size: $h4-font-size; +} +h5{ + font-size: $h5-font-size; +} +h6{ + font-size: $h6-font-size; }