beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Sucroa flavor typography and colour palette complete

Browse source
This commit is contained in:
Angeliki Daskalakis 2017-01-01 00:49:05 +02:00
parent 2548b9cbb7
commit 439f3bd630
4 changed files with 121 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
dist/mini-sucroa-test.html vendored
View file

@ -67,7 +67,44 @@
<h2>Style-agnostic</h2>
<i class="fa fa-paint-brush fa-4x" aria-hidden="true"></i>
<br><br>
<p><strong>mini.css</strong> gives you the power of customization, using its fully moddable flavors. This will give you control over how your websites look and allow great designs to stand out!</p>
<p><strong>mini.css</strong> gives you the power of <mark>customization</mark>, using its <mark class="secondary">fully</mark> moddable flavors. This will give you control over how your websites look and allow great <mark class="tertiary">designs to</mark> stand out!</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="card fluid">
<div class="section">
<h2>Common textual elements</h2>
</div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div><br><p>This is a paragraph with some <mark>sample</mark> text. Did you know <strong>mini.css</strong> v2.0 is codenamed <strong>Fermion</strong>? No? Well, now you do! Oh, by <mark class="secondary">the way</mark>, that was some Bold text and here is some <em>text in Italics</em>. Maybe you want to know what our inline elements look like. For example a <a href="https://github.com/Chalarangelo/mini.css">link to the Github repository of mini.css</a> looks like that! <mark class="tertiary">Neat, right?</mark> Maybe you want to see some <code>inline code</code> or some sample <kbd>input</kbd>. Oh, also <small>small text</small> is cool, along with its siblings: the subscript<sub>hi!</sub> and the superscript<sup>hello!</sup>. Finally, check out the horizontal rule, preformatted code block and quotation below.</p>
<hr>
<pre>function sum(num1, num2) {
var num3 = num1 + num2;
console.log('Result: ' + num3);
}</pre>
<blockquote cite="Mr. Quotalot">This is some quoted text from elsewhere.</blockquote><br>
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
<p>The most common HTML5 elements must be things like <code>&lt;p&gt;</code>aragraphs, bold (<code>&lt;strong&gt;</code>) &amp; italics (<code>&lt;em&gt;</code>) text, links (<code>&lt;a&gt;</code>), horizontal rules (<code>&lt;hr&gt;</code>) and <code>&lt;small&gt;</code> text. These, along with a few others, are styled by default using clean, modern design to make your pages look cool and stand out from the rest of the internet.</p>
<h3>Sample code</h3>
<pre>&lt;p&gt;This is a paragraph with some &lt;strong&gt;bold text&lt;/strong&gt; and some &lt;em&gt;italics text&lt;/em&gt;.&lt;/p&gt;
&lt;a href=&quot;#&quot;&gt;This is a link.&lt;/a&gt;
&lt;small&gt;This is some small text.&lt;/small&gt;
&lt;sub&gt;Subscript&lt;/sub&gt;
&lt;sup&gt;Superscript&lt;/sup&gt;
&lt;code&gt;Inline code&lt;/code&gt;
&lt;kbd&gt;Keyboard Input&lt;/kbd&gt;
&lt;hr&gt;
&lt;pre&gt;This is some preformatted text.&lt;/pre&gt;
&lt;blockquote cite=&quot;Quotation source&quot;&gt;
This is some quoted text from another website or person.
&lt;/blockquote&gt;</pre><br>
</div>
</div>
</div>
</div>
</div>

89
dist/mini-sucroa.css vendored
View file

@ -4,7 +4,7 @@
Author: Angeliki Daskalakis
mini.css version: v2.0.2 (Fermion)
*/
@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,700|Libre+Baskerville:400,400i,700&subset=latin-ext");
@import url("https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext");
/*
Browsers resets and base typography.
*/
@ -12,7 +12,7 @@ html {
font-size: 16px; }
html, * {
font-family: "Libre Baskerville", serif;
font-family: Libre Baskerville, serif;
line-height: 1.7;
-webkit-text-size-adjust: 100%; }
@ -21,8 +21,8 @@ html, * {
body {
margin: 0;
color: #212121;
background: #f5f5f5; }
color: #211423;
background: #fffcc9; }
article, aside, section, figcaption, figure, main, details, menu {
display: block; }
@ -57,7 +57,8 @@ h1, h2, h3, h4, h5, h6 {
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
color: #424242;
display: block;
margin-top: -2px; }
margin-top: -2px;
font-size: 75%; }
h1 {
font-size: 2.2em; }
@ -91,64 +92,64 @@ hr {
box-sizing: content-box;
border: 0;
overflow: visible;
line-height: 1.25em;
margin: 8px;
line-height: 1.3em;
margin: 10px;
height: 1px;
background: -webkit-linear-gradient(to right, #bdbdbd, #616161, #bdbdbd);
background: linear-gradient(to right, #bdbdbd, #616161, #bdbdbd); }
background: -webkit-linear-gradient(to right, #5d545f, #1e1320, #5d545f);
background: linear-gradient(to right, #5d545f, #1e1320, #5d545f); }
blockquote {
display: block;
position: relative;
font-style: italic;
background: #eeeeee;
margin: 8px 10px;
padding: 6px 10px 24px;
border-left: 3px solid #616161;
border-radius: 0 2px 2px 0;
background: #eae1ff;
margin: 10px;
padding: 8px 12px 28px;
border-left: 3px solid #331e36;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); }
blockquote:after {
position: absolute;
font-style: normal;
font-size: 0.85em;
color: #616161;
color: #5d545f;
left: 10px;
bottom: 0;
bottom: 4px;
content: "— " attr(cite); }
code, kbd, pre, samp {
font-family: '"Inconsolata", monospace, monospace'; }
font-family: "Cousine", monospace, monospace; }
code {
border-radius: 2px;
background: #e0e0e0;
padding: 2px 4px;
background: #e8deff;
padding: 3px 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); }
pre {
overflow: auto;
border-radius: 0 2px 2px 0;
background: #e0e0e0;
padding: 12px;
margin: 8px 10px;
border-left: 3px solid #1565c0;
border-radius: 2px;
background: #e8deff;
padding: 8px 12px 8px;
margin: 10px;
border-left: 3px solid #6979c6;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); }
kbd {
border-radius: 2px;
background: #212121;
color: #fafafa;
padding: 2px 4px;
background: #331e36;
color: #fffddc;
padding: 3px 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); }
small, sup, sub {
font-size: 75%; }
font-size: 80%; }
sup {
top: -8px; }
top: -6px; }
sub {
bottom: -4px; }
bottom: -6px; }
sup, sub {
line-height: 0;
@ -156,13 +157,13 @@ sup, sub {
vertical-align: baseline; }
a {
color: #0277bd;
color: #5664a3;
text-decoration: underline;
opacity: 1;
-webkit-transition: all 0.3 ease 0s;
transition: all 0.3s ease 0s; }
a:visited {
color: #01579b; }
color: #434e7f; }
a:hover, a:focus, a:active {
opacity: 0.75; }
@ -662,7 +663,7 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
[type="password"], [type="url"], [type="tel"], textarea, select {
box-sizing: border-box;
background: #fafafa;
color: #212121;
color: #211423;
border: 1px solid #bdbdbd;
border-radius: 1px;
margin: 2px;
@ -712,7 +713,7 @@ button {
button, [type="button"], [type="submit"], [type="reset"], a.button, label.button, .button {
display: inline-block;
background: rgba(189, 189, 189, 0.65);
color: #212121;
color: #211423;
border: 0;
border-radius: 2px;
padding: 8px 12px;
@ -796,7 +797,7 @@ input[type="file"] {
border: 1px solid #bdbdbd;
border-radius: 1px;
background: #fafafa;
color: #212121;
color: #211423;
margin-left: -20px; }
.input-group [type="checkbox"] + label:hover:before, .input-group [type="checkbox"] + label:active:before, .input-group [type="checkbox"] + label:focus:before, .input-group [type="radio"] + label:hover:before, .input-group [type="radio"] + label:active:before, .input-group [type="radio"] + label:focus:before {
border-color: #0288d1; }
@ -815,7 +816,7 @@ input[type="file"] {
left: 4px;
width: 10px;
height: 10px;
background: #212121;
background: #211423;
content: ''; }
/*
@ -853,13 +854,13 @@ button.tertiary, [type="button"].tertiary, [type="submit"].tertiary,
button.inverse, [type="button"].inverse, [type="submit"].inverse,
[type="reset"].inverse, .button.inverse {
background: #212121;
background: #211423;
color: #fafafa; }
button.inverse:hover, button.inverse:active, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:active, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:active, [type="submit"].inverse:focus,
[type="reset"].inverse:hover,
[type="reset"].inverse:active,
[type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:active, .button.inverse:focus {
background: rgba(33, 33, 33, 0.9); }
background: rgba(33, 20, 35, 0.9); }
button.small, [type="button"].small, [type="submit"].small,
[type="reset"].small, .button.small {
@ -1071,7 +1072,7 @@ table.striped tr:nth-of-type(2n) > td {
align-self: center;
position: relative;
width: 100%;
background: #fafafa;
background: #f2d7d8;
border: 1px solid #9e9e9e;
margin: 2px 10px 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); }
@ -1108,7 +1109,7 @@ table.striped tr:nth-of-type(2n) > td {
width: auto; }
.card.inverse {
background: #212121;
background: #211423;
color: #fafafa;
border: 1px solid #424242; }
.card.inverse > .section {
@ -1239,8 +1240,8 @@ table.striped tr:nth-of-type(2n) > td {
Definitions for contextual background elements and alerts.
*/
mark {
background: #0277bd;
color: #fafafa;
background: #6979c6;
color: #fffddc;
font-size: 95%;
line-height: 1;
border-radius: 2px;
@ -1290,10 +1291,10 @@ mark {
Custom contextual background elements and alerts.
*/
mark.secondary {
background: #e53935; }
background: #d2405f; }
mark.tertiary {
background: #689f38; }
background: #2b866d; }
mark.tag {
border-radius: 200px;

2
dist/mini-sucroa.min.css vendored
View file

File diff suppressed because one or more lines are too long

74
src/flavors/mini-sucroa.scss
View file

@ -7,13 +7,13 @@
mini.css version: v2.0.2 (Fermion)
*/
// Google Fonts imports and usage
@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700|Libre+Baskerville:400,400i,700&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext');
// font-family: 'Libre Baskerville', serif;
// font-family: 'Inconsolata', monospace;
// font-family: 'Cousine', monospace;
// Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color
$back-color: #f5f5f5; // Body background color
$base-font-family: '\"Libre Baskerville\", serif'; // Default font stack for all elements:
$fore-color: #211423; // Text and general foreground color
$back-color: #fffcc9; // Body background color
$base-font-family: 'Libre Baskerville', serif; // Default font stack for all elements:
$base-root-font-size: 16px; // Root font sizing for all elements [1]
$base-font-size: 1em; // Default font sizing for all elements [2]
$base-line-height: 1.7; // Default line height for all elements.
@ -38,51 +38,51 @@ $paragraph-margin: 4px 10px; // Margin for <p> elements
$list-margin: 4px 10px 10px; // Margin for <ol> and <ul> elements
$list-left-padding: 32px; // Left padding for <ol> and <ul> elements
$bold-font-weight: 700; // Font weight for <b> and <strong>
$horizontal-rule-line-height: 1.25em; // <hr> line height
$horizontal-rule-margin: 8px; // <hr> margin
$horizontal-rule-line-height: 1.3em; // <hr> line height
$horizontal-rule-margin: 10px; // <hr> margin
$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`) [5]
$horizontal-rule-fancy-gradient:"to right, #bdbdbd, #616161, #bdbdbd"; // Gradient style for fancy horizontal rule
$blockquote-back-color: #eeeeee; // Background color for <blockquote>
$horizontal-rule-fancy-gradient:"to right, #5d545f, #1e1320, #5d545f"; // Gradient style for fancy horizontal rule
$blockquote-back-color: #eae1ff; // Background color for <blockquote>
$blockquote-fore-color: $fore-color; // Text color for <blockquote>
$blockquote-margin: 8px 10px; // Margin for <blockquote>
$blockquote-padding: 6px 10px 24px; // Padding for <blockquote>
$blockquote-sidebar-style: 3px solid #616161; // Style for the sidebar of <blockquote>
$blockquote-margin: 10px; // Margin for <blockquote>
$blockquote-padding: 8px 12px 28px; // Padding for <blockquote>
$blockquote-sidebar-style: 3px solid #331e36; // Style for the sidebar of <blockquote>
$blockquote-cite-font-size: 0.85em; // Font size for citation of <blockquote>
$blockquote-cite-fore-color: #616161; // Text color for citation of <blockquote>
$blockquote-cite-fore-color: #5d545f; // Text color for citation of <blockquote>
$blockquote-cite-left-position: 10px; // Left padding for citation of <blockquote>
$blockquote-cite-bottom-position: // Bottom padding for citation of <blockquote>
0;
4px;
$blockquote-border-style: 0; // Border style for <blockquote>
$blockquote-border-radius: 0 2px 2px 0; // Border radius for <blockquote>
$blockquote-border-radius: 2px; // Border radius for <blockquote>
$blockquote-box-shadow: // Box shadow for <blockquote>
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
$use-default-code-fonts: false; // Should default font choice (monospace) be
// used for code elements? (`true`/`false`) [6]
$code-font-family: '\"Inconsolata\", monospace, monospace'; // Fonts for code elements if not default
$code-element-padding: 2px 4px; // Padding for <code>
$code-font-family: 'Cousine', monospace, monospace; // Fonts for code elements if not default
$code-element-padding: 3px 4px; // Padding for <code>
$code-element-fore-color: $fore-color; // Text color for <code>
$code-element-back-color: #e0e0e0; // Background color for <code>
$code-element-back-color: #e8deff; // Background color for <code>
$code-element-border-style: 0; // Border style for <code>
$code-element-border-radius: 2px; // Border radius for <code>
$code-element-box-shadow: // Box shadow for <code>
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
$pre-element-padding: 12px; // Padding for <pre>
$pre-element-padding: 8px 12px 8px; // Padding for <pre>
$pre-element-fore-color: $code-element-fore-color; // Text color for <pre>
$pre-element-back-color: $code-element-back-color; // Background color for <pre>
$pre-element-border-style: 0; // Border style for <pre>
$pre-element-border-radius: 0 2px 2px 0; // Border radius for <pre>
$pre-element-margin: 8px 10px; // Margin for <pre>
$pre-element-border-radius: 2px; // Border radius for <pre>
$pre-element-margin: 10px; // Margin for <pre>
$pre-element-box-shadow: // Box shadow for <pre>
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the
// left side of <pre> (`true`/`false`) [7]
$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: #fafafa; // Text color for <kbd>
$kbd-element-back-color: $fore-color; // Background color for <kbd>
$pre-element-sidebar-style: 3px solid #6979c6; // Style of the sidebar of <pre>
$kbd-element-padding: 3px 4px; // Padding for <kbd>
$kbd-element-fore-color: #fffddc; // Text color for <kbd>
$kbd-element-back-color: #331e36; // Background color for <kbd>
$kbd-element-border-style: 0; // Border style for <kbd>
$kbd-element-border-radius: 2px; // Border radius for <kbd>
$kbd-element-box-shadow: // Box shadow for <kbd>
@ -96,13 +96,13 @@ $style-samp-element: false; // Should styles for <samp> be included?
//$samp-element-border-radius: 2px; // Border radius for <samp>
$include-dfn-fix: true; // Should the fix for Android 4.3 concerning <dfn>
// be included (`true`/`false`) [9]
$small-font-size: 75%; // Font size for <small> elements
$sup-font-size: 75%; // Font size for <sup> elements
$sub-font-size: 75%; // Font size for <sub> elements
$sup-top: -8px; // <sup> top
$sub-bottom: -4px; // <sub> bottom
$link-fore-color: #0277bd; // Text color for <a>
$link-visited-fore-color: #01579b; // Text color for visited <a>
$small-font-size: 80%; // Font size for <small> elements
$sup-font-size: 80%; // Font size for <sup> elements
$sub-font-size: 80%; // Font size for <sub> elements
$sup-top: -6px; // <sup> top
$sub-bottom: -6px; // <sub> bottom
$link-fore-color: #5664a3; // Text color for <a>
$link-visited-fore-color: #434e7f; // Text color for visited <a>
$link-font-weight: 500; // Font weight for <a>
$apply-link-underline: true; // Should an underline be applied to all <a>
// elements? (`true`/`false`) [10]
@ -324,7 +324,7 @@ $table-striped-alt-body-back-color: // Alternate background color for
// in order for their mobile headers to display properly.
// Variables for cards [1]
$card-name: 'card'; // Class name for cards
$card-back-color: #fafafa; // Background color for cards
$card-back-color: #f2d7d8; // Background color for cards
$card-fore-color: $fore-color; // Text color for cards
$card-border-style: 1px solid #9e9e9e; // Border style for cards
$card-border-radius: 0; // Border radius for cards
@ -380,8 +380,8 @@ $tab-panel-height: 400px; // Height for tabs' panels
$tab-stacked-breakpoint: 767px; // Breakpoint for tabs layout (stacked/horizontal)
$tab-stacked-name: 'stacked'; // Class name for stacked tabs
// Variables for contextual background elements and alerts
$mark-back-color: #0277bd; // Background color for <mark>
$mark-fore-color: #fafafa; // Text color for <mark>
$mark-back-color: #6979c6; // Background color for <mark>
$mark-fore-color: #fffddc; // Text color for <mark>
$mark-font-size: 95%; // Font size for <mark>
$mark-line-height: 1; // Line height for <mark>
$mark-border-style: 0; // Border style for <mark>
@ -392,9 +392,9 @@ $mark-box-shadow: // Box shadow for <mark>
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
$mark-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
$mark-variant1-back-color: #e53935; // Background color for <mark> variant 1
$mark-variant1-back-color: #d2405f; // Background color for <mark> variant 1
$mark-variant2-name: 'tertiary'; // Class name for <mark> variant 2
$mark-variant2-back-color: #689f38; // Background color for <mark> variant 2
$mark-variant2-back-color: #2b866d; // Background color for <mark> variant 2
$mark-style1-name: 'tag'; // Class name for <mark> style 1
$mark-style1-border-style: 0; // Border style for <mark> style 1
$mark-style1-border-radius: 200px; // Border radius for <mark> style 1