Palette changes

This commit is contained in:
Angelos Chalaris 2016-10-15 19:04:34 +03:00
parent 84688d0b64
commit 9f771efecf
5 changed files with 9 additions and 8 deletions

View file

@ -87,3 +87,4 @@
- Added logo to demo page.
- Created favicon from logo.
- Added favicon to demo page.
- Changed color palette to use material colors for primary, secondary and tertiary, passes most tests (usually is ok in almost 100% of cases).

View file

@ -12,7 +12,7 @@
<script async defer src="https://buttons.github.io/buttons.js"></script>
<link rel="stylesheet" href="../../flavors/v2/mini-default.css">
<!-- Live demo styled as of commit 42817a3 (20161014) -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/c5247edfb8adb2e1973f51681ab318ca27569b1b/flavors/v2/mini-default.min.css">
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/c5247edfb8adb2e1973f51681ab318ca27569b1b/flavors/v2/mini-default.min.css"> -->
</head>
<body>
<span style="text-align: center;">

View file

@ -98,7 +98,7 @@ sup, sub {
vertical-align: baseline; }
mark {
background: #0047b3;
background: #3d5afe;
color: #fcfcfc;
font-size: 95%;
line-height: 1;
@ -309,10 +309,10 @@ summary {
display: list-item; }
mark.secondary {
background: #cc2900; }
background: #d32f2f; }
mark.tertiary {
background: #00802b; }
background: #2e7d32; }
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:#0047b3;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:#cc2900}mark.tertiary{background:#00802b}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:#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}

View file

@ -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: #0047b3; // Background color for <mark>
$mark-back-color: #3d5afe; // 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: #cc2900; // Background color for <mark> variant 1
$mark-variant1-back-color: #d32f2f; // Background color for <mark> variant 1
$mark-variant2-name: 'tertiary'; // Class name for <mark> variant 2
$mark-variant2-back-color: #00802b; // Background color for <mark> variant 2
$mark-variant2-back-color: #2e7d32; // 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