mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-17 21:08:13 +01:00
Header small text variant, showcase page modifications
This commit is contained in:
Angelos Chalaris
parent
b3c4c46ae9
commit
635f40af7a
@ -56,4 +56,10 @@
|
||||
- Added variable for bold elements to set `font-weight` manually, so that no problems occur and users can fine-tweak this to their liking.
|
||||
- Removed fix for `b` and `strong` as the above change addresses the issue.
|
||||
- `pre` `padding` set to `12px` instead of `8px`.
|
||||
- Added `overflow: auto;` to `pre` elements so that they are responsive and display properly on all devices.
|
||||
- Added `overflow: auto;` to `pre` elements so that they are responsive and display properly on all devices.
|
||||
|
||||
## 20161014
|
||||
|
||||
- Added extra styling option for `small` elements in headers using a flag (`$make-header-smalltext-block`) and two variables (`$header-smalltext-b-font-size` and `$header-smalltext-b-top-margin`) to customize the styling of such elements.
|
||||
- Minor changes to the way the index page looks for the version 2. Changed tagline and added version codename.
|
||||
- Added github buttons under title in the index page.
|
||||
@ -8,12 +8,20 @@
|
||||
<meta name="keywords" content="mini, mini.css, CSS, responsive, framework, mobile first, style agnostic, Sass">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<!-- Github buttons javascript file -->
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
<!-- 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="../../flavors/v2/mini-default.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>mini.css <small>A minimal Sass-y responsive mobile-first style-agnostic CSS framework</small></h1>
|
||||
<h1>mini.css v2.0 <span style="color: #00994d; line-height: 1em;">{Fermion}</span><small>Minimal responsive style-agnostic front end framework</small></h1>
|
||||
<!-- TODO: Move these to a column on the right side on larger displays and keep them where they are on smaller devices -->
|
||||
<p style="margin-top: -1em;">
|
||||
<a class="github-button" href="https://github.com/chalarangelo/mini.css" data-icon="octicon-eye" data-count-href="/chalarangelo/mini.css/watchers" data-count-api="/repos/chalarangelo/mini.css#subscribers_count" data-count-aria-label="# watchers on GitHub" aria-label="Watch chalarangelo/mini.css on GitHub">Watch</a>
|
||||
<a class="github-button" href="https://github.com/chalarangelo/mini.css" data-icon="octicon-star" data-count-href="/chalarangelo/mini.css/stargazers" data-count-api="/repos/chalarangelo/mini.css#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star chalarangelo/mini.css on GitHub">Star</a>
|
||||
<a class="github-button" href="https://github.com/chalarangelo/mini.css/fork" data-icon="octicon-repo-forked" data-count-href="/chalarangelo/mini.css/network" data-count-api="/repos/chalarangelo/mini.css#forks_count" data-count-aria-label="# forks on GitHub" aria-label="Fork chalarangelo/mini.css on GitHub">Fork</a>
|
||||
</p>
|
||||
<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>
|
||||
<hr>
|
||||
<h1>Heading 1 <small>small text</small></h1>
|
||||
|
||||
@ -22,7 +22,10 @@ h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0.7em 8px;
|
||||
font-weight: 500; }
|
||||
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
||||
color: #444; }
|
||||
color: #444;
|
||||
display: block;
|
||||
margin-top: -0.35em;
|
||||
font-size: 45%; }
|
||||
|
||||
h1 {
|
||||
font-size: 2em; }
|
||||
|
||||
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,h2,h3,h4,h5,h6{line-height:1.2em;margin:.7em 8px;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}p{margin:1px 10px}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;overflow:visible;line-height:1.2em;margin:.5em 4px;height:1px;background-image:linear-gradient(to right,#ccc,#666,#ccc);background-image:-webkit-linear-gradient(to right,#ccc,#666,#ccc)}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background-color:#ddd;padding:2px 4px}pre{overflow:auto;border-radius:2px;background-color:#ddd;padding:12px}kbd{border-radius:2px;background-color:#222;color:#f9f9f9;padding:2px 4px}small,sub,sup{font-size:75%}sup{top:-.5em}sub{bottom:-.25em}sub,sup{line-height:0;position:relative;vertical-align:baseline}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}dfn{font-style:italic}mark{background-color:#ff0;color:#000}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 8px;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#444;display:block;margin-top:-.35em;font-size:45%}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}p{margin:1px 10px}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;overflow:visible;line-height:1.2em;margin:.5em 4px;height:1px;background-image:linear-gradient(to right,#ccc,#666,#ccc);background-image:-webkit-linear-gradient(to right,#ccc,#666,#ccc)}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background-color:#ddd;padding:2px 4px}pre{overflow:auto;border-radius:2px;background-color:#ddd;padding:12px}kbd{border-radius:2px;background-color:#222;color:#f9f9f9;padding:2px 4px}small,sub,sup{font-size:75%}sup{top:-.5em}sub{bottom:-.25em}sub,sup{line-height:0;position:relative;vertical-align:baseline}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}dfn{font-style:italic}mark{background-color:#ff0;color:#000}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}
|
||||
@ -27,6 +27,10 @@ $header-line-height: 1.2em; // Line height for all headers
|
||||
$header-margin: 0.7em 8px; // Margin for all headers
|
||||
$header-font-weight: 500; // Font weight for all headers
|
||||
$header-smalltext-fore-color: #444; // <small> color in headers
|
||||
$make-header-smalltext-block: true; // Should <small> elements in headers
|
||||
// be displayed as blocks (`true`/`false`) [2]
|
||||
$header-smalltext-b-font-size: 45%; // Font size of block <small> elements in headers
|
||||
$header-smalltext-b-top-margin: -0.35em; // Top margin of block <small> elements in headers
|
||||
$paragraph-margin: 1px 10px; // Paragraph element margin
|
||||
$bold-font-weight: 700; // Font weight for <b> and <strong>
|
||||
$horizontal-rule-line-height: 1.2em; // <hr> line height
|
||||
@ -34,10 +38,10 @@ $horizontal-rule-margin: 0.5em 4px; // <hr> margin
|
||||
$horizontal-rule-border-style: 1px solid #888; // Border style for horizontal rules (used
|
||||
// in the <hr> element's border-top)
|
||||
$horizontal-rule-fancy-style: true; // Should a fancy styling be applied for the
|
||||
// <hr> element (`true`/`false`) [2]
|
||||
// <hr> element (`true`/`false`) [3]
|
||||
$horizontal-rule-fancy-gradient:"to right, #ccc, #666, #ccc"; // Gradient style for fancy horizontal rule
|
||||
$use-default-code-fonts: true; // Should default font choice (monospace) be
|
||||
// used for code elements? (`true`/`false`) [3]
|
||||
// used for code elements? (`true`/`false`) [4]
|
||||
//$code-font-family: monospace, monospace; // Fonts for code elements if not default
|
||||
$code-element-padding: 2px 4px; // Padding for <code>
|
||||
$code-element-fore-color: $fore-color; // Text color for <code>
|
||||
@ -55,7 +59,7 @@ $kbd-element-back-color: $fore-color; // Background color for <kbd>
|
||||
$kbd-element-border-style: 0; // Border style for <kbd>
|
||||
$kbd-element-border-radius: 2px; // Border radius for <kbd>
|
||||
$style-samp-element: false; // Should styles for <samp> be included?
|
||||
// (`true`/`false`) [4]
|
||||
// (`true`/`false`) [5]
|
||||
//$samp-element-padding: 2px 4px; // Padding for <samp>
|
||||
//$samp-element-fore-color: $fore-color; // Text color for <samp>
|
||||
//$samp-element-back-color: #2678b3; // Background color for <samp>
|
||||
@ -71,9 +75,11 @@ $sub-bottom: -0.25em; // <sub> bottom
|
||||
// Notes:
|
||||
// [1] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling
|
||||
// to elements manually.
|
||||
// [2] - If $horizontal-rule-fancy-style is set to `true` the value of $horizontal-rule-border-style will not be used and
|
||||
// [2] - If the value of $make-header-smalltext-block is `true` the <small> elements in headers will be displayed below
|
||||
// the main header and the 2 values specified below will apply.
|
||||
// [3] - If $horizontal-rule-fancy-style is set to `true` the value of $horizontal-rule-border-style will not be used and
|
||||
// a gradient with the style specified in $horizontal-rule-fancy-gradient will be applied instead.
|
||||
// [3] - If the value of $use-default-code-fonts is set to `false` the value of $code-font-family will be used. `true`
|
||||
// [4] - If the value of $use-default-code-fonts is set to `false` the value of $code-font-family will be used. `true`
|
||||
// will apply the proper fix to use monospace font without any problems on all browsers.
|
||||
// [4] - If the value of $style-samp-element is set to `false`, no styling will be included in the final CSS file for
|
||||
// [5] - If the value of $style-samp-element is set to `false`, no styling will be included in the final CSS file for
|
||||
// `samp` elements. Otherwise, the styling defined in the $samp-... variables will be applied.
|
||||
@ -35,6 +35,12 @@ h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: $header-font-weight;
|
||||
small {
|
||||
color: $header-smalltext-fore-color;
|
||||
$make-header-smalltext-block: false !default;
|
||||
@if $make-header-smalltext-block {
|
||||
display: block;
|
||||
margin-top: $header-smalltext-b-top-margin;
|
||||
font-size: $header-smalltext-b-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user