Base header styles
This commit is contained in:
Angelos Chalaris
parent
7a2f4972af
commit
f4a868aa17
6 changed files with 71 additions and 14 deletions
|
|
@ -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`.
|
||||
|
|
|
|||
|
|
@ -9,10 +9,20 @@
|
|||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<!-- v1.1.0 link for initial styling, disable while testing -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v1.1.0/flavors/mini-default.min.css">
|
||||
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v1.1.0/flavors/mini-default.min.css"> -->
|
||||
<link rel="stylesheet" href="../../flavors/v2/mini-default.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>mini.css <small>A minimal Sass-y responsive mobile-first style-agnostic CSS framework</small></h1>
|
||||
<p><strong>v2.0</strong> 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!</p>
|
||||
<br><br>
|
||||
<hr>
|
||||
<h1>Heading 1 <small>small text</small></h1>
|
||||
<h2>Heading 2 <small>small text</small></h2>
|
||||
<h3>Heading 3 <small>small text</small></h3>
|
||||
<h4>Heading 4 <small>small text</small></h4>
|
||||
<h5>Heading 5 <small>small text</small></h5>
|
||||
<h6>Heading 6 <small>small text</small></h6>
|
||||
<hr>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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.
|
||||
|
|
|
|||
2
flavors/v2/mini-default.min.css
vendored
2
flavors/v2/mini-default.min.css
vendored
|
|
@ -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}
|
||||
*,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}
|
||||
|
|
@ -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; // <small> color in headers
|
||||
// Enable base
|
||||
@import '../../scss/v2/base';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue