Updated palettes.

This commit is contained in:
Angelos Chalaris 2016-10-19 17:55:15 +03:00
parent bd935a8188
commit 85c247b704
4 changed files with 31 additions and 26 deletions

View file

@ -90,3 +90,8 @@
- Changed color palette to use material colors for primary, secondary and tertiary, passes most tests (usually is ok in almost 100% of cases).
- Updated page to test `mark` in headers.
- Deployed live version with updated tags.
## 20161019
- More fiddling with palettes. Tried to update colors to material design: `body` `color` is now `#212121`. `body` `background` is now `#fafafa`. `small` inside header `color` is now `#424242`. Codeblock `background` is now `#e0e0e0` and `pre` sidebar `border-color` is `#1565c0`. `mark` `background`s changed to `#0277bd`, `#f44336` and `#558b2f` respectively.

View file

@ -11,8 +11,8 @@ html, * {
body {
margin: 0;
color: #222;
background: #fcfcfc; }
color: #212121;
background: #fafafa; }
article, aside, footer, header, nav, section, figcaption, figure, main {
display: block; }
@ -22,7 +22,7 @@ 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: #424242;
display: block;
margin-top: -0.35em;
font-size: 45%; }
@ -58,29 +58,29 @@ hr {
line-height: 1.2em;
margin: 0.5em 4px;
height: 1px;
background: linear-gradient(to right, #ccc, #666, #ccc);
background: -webkit-linear-gradient(to right, #ccc, #666, #ccc); }
background: linear-gradient(to right, #bdbdbd, #616161, #bdbdbd);
background: -webkit-linear-gradient(to right, #bdbdbd, #616161, #bdbdbd); }
code, kbd, pre, samp {
font-family: monospace, monospace; }
code {
border-radius: 2px;
background: #ddd;
background: #e0e0e0;
padding: 2px 4px; }
pre {
overflow: auto;
border-radius: 0 2px 2px 0;
background: #ddd;
background: #e0e0e0;
padding: 12px;
margin: 1px 10px;
border-left: 3px solid #0039e6; }
border-left: 3px solid #1565c0; }
kbd {
border-radius: 2px;
background: #222;
color: #fcfcfc;
background: #212121;
color: #fafafa;
padding: 2px 4px; }
small, sup, sub {
@ -98,8 +98,8 @@ sup, sub {
vertical-align: baseline; }
mark {
background: #3d5afe;
color: #fcfcfc;
background: #0277bd;
color: #fafafa;
font-size: 95%;
line-height: 1;
padding: 1px; }
@ -309,10 +309,10 @@ summary {
display: list-item; }
mark.secondary {
background: #d32f2f; }
background: #f44336; }
mark.tertiary {
background: #2e7d32; }
background: #558b2f; }
mark.tag {
border-radius: 2px;

View file

@ -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:#fcfcfc}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:linear-gradient(to right,#ccc,#666,#ccc);background:-webkit-linear-gradient(to right,#ccc,#666,#ccc)}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background:#ddd;padding:2px 4px}pre{overflow:auto;border-radius:0 2px 2px 0;background:#ddd;padding:12px;margin:1px 10px;border-left:3px solid #0039e6}kbd{border-radius:2px;background:#222;color:#fcfcfc;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}mark{background:#3d5afe;color:#fcfcfc;font-size:95%;line-height:1;padding:1px}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}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}mark.secondary{background:#d32f2f}mark.tertiary{background:#2e7d32}mark.tag{border-radius:2px;padding:2px}mark.bubble{border-radius:200px;padding:3px 5px}
*,html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;color:#212121;background:#fafafa}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:#424242;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:linear-gradient(to right,#bdbdbd,#616161,#bdbdbd);background:-webkit-linear-gradient(to right,#bdbdbd,#616161,#bdbdbd)}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background:#e0e0e0;padding:2px 4px}pre{overflow:auto;border-radius:0 2px 2px 0;background:#e0e0e0;padding:12px;margin:1px 10px;border-left:3px solid #1565c0}kbd{border-radius:2px;background:#212121;color:#fafafa;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}mark{background:#0277bd;color:#fafafa;font-size:95%;line-height:1;padding:1px}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}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}mark.secondary{background:#f44336}mark.tertiary{background:#558b2f}mark.tag{border-radius:2px;padding:2px}mark.bubble{border-radius:200px;padding:3px 5px}

View file

@ -9,8 +9,8 @@
mini.css version: v2.0 (in-production)
*/
// Basic rules for body and typography
$fore-color: #222; // Text and general foreground color
$back-color: #fcfcfc; // Body background color
$fore-color: #212121; // Text and general foreground color
$back-color: #fafafa; // Body background color
$base-font-family: "\"Helvetica Neue\", Helvetica, sans-serif"; // Default fonts for all elements
$base-font-size: 1em; // Default font sizing for all elements
$base-line-height: 1.5; // Default line height for all elements.
@ -26,7 +26,7 @@ $h6-font-size: 0.75em; // Font size for h6
$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
$header-smalltext-fore-color: #424242; // <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
@ -35,17 +35,17 @@ $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
$horizontal-rule-margin: 0.5em 4px; // <hr> margin
$horizontal-rule-border-style: 1px solid #888; // 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)
$horizontal-rule-fancy-style: true; // Should a fancy styling be applied for the
// <hr> element (`true`/`false`) [3]
$horizontal-rule-fancy-gradient:"to right, #ccc, #666, #ccc"; // Gradient style for fancy horizontal rule
$horizontal-rule-fancy-gradient:"to right, #bdbdbd, #616161, #bdbdbd"; // Gradient style for fancy horizontal rule
$use-default-code-fonts: true; // Should default font choice (monospace) be
// 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>
$code-element-back-color: #ddd; // Background color for <code>
$code-element-back-color: #e0e0e0; // Background color for <code>
$code-element-border-style: 0; // Border style for <code>
$code-element-border-radius: 2px; // Border radius for <code>
$pre-element-padding: 12px; // Padding for <pre>
@ -56,7 +56,7 @@ $pre-element-border-radius: 0 2px 2px 0; // Border radius for <pre>
$pre-element-margin: 1px 10px; // Margin for <pre>
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the
// left side of <pre> (`true`/`false`)
$pre-element-sidebar-style: 3px solid #0039e6; // 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-fore-color: $back-color; // Text color for <kbd>
$kbd-element-back-color: $fore-color; // Background color for <kbd>
@ -66,7 +66,7 @@ $style-samp-element: false; // Should styles for <samp> be included?
// (`true`/`false`) [6]
//$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>
//$samp-element-back-color: #2196f3; // Background color for <samp>
//$samp-element-border-style: 0; // Border style for <samp>
//$samp-element-border-radius: 2px; // Border radius for <samp>
$small-font-size: 75%; // Font size for <small> elements
@ -74,16 +74,16 @@ $sup-font-size: 75%; // Font size for <sup> elements
$sub-font-size: 75%; // Font size for <sub> elements
$sup-top: -0.5em; // <sup> top
$sub-bottom: -0.25em; // <sub> bottom
$mark-back-color: #3d5afe; // Background color for <mark>
$mark-back-color: #0277bd; // Background color for <mark>
$mark-fore-color: $back-color; // Text color for <mark>
$mark-font-size: 95%; // Font size for <mark>
$mark-line-height: 1; // Line height for <mark>
$mark-padding: 1px; // Padding for <mark>
$mark-margin: 0; // Margin for <mark>
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
$mark-variant1-back-color: #d32f2f; // Background color for <mark> variant 1
$mark-variant1-back-color: #f44336; // Background color for <mark> variant 1
$mark-variant2-name: 'tertiary'; // Class name for <mark> variant 2
$mark-variant2-back-color: #2e7d32; // Background color for <mark> variant 2
$mark-variant2-back-color: #558b2f; // Background color for <mark> variant 2
$mark-style1-name: 'tag'; // Class name for <mark> style 1
$mark-style1-border-radius: 2px; // Border radius for <mark> style 1
$mark-style1-padding: 2px; // Padding for <mark> style 1