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

Blockquote styling

Browse source
This commit is contained in:
Angelos Chalaris 2016-12-15 23:19:32 +02:00
parent 25f5a2288e
commit 0f7cd386b3
6 changed files with 85 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
dist/mini-default.css vendored
View file

@ -1,3 +1,4 @@
@charset "UTF-8";
/*
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
@ -95,6 +96,25 @@ hr {
background: -webkit-linear-gradient(to right, #bdbdbd, #616161, #bdbdbd);
background: linear-gradient(to right, #bdbdbd, #616161, #bdbdbd); }
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;
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;
left: 10px;
bottom: 0;
content: "— " attr(cite); }
code, kbd, pre, samp {
font-family: monospace, monospace; }

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

File diff suppressed because one or more lines are too long

4
docs/v2/DEVLOG.md
View file

@ -645,3 +645,7 @@
- Added some basic OpenGraph meta properties to `index` for Facebook sharing tests.
- Added `flavors.html` and `customization.html`.
- Probably finished `flavor.html`.
## 20161215
- Added styling for `blockquote` in `core` module, just to make sure nothing is really missing.

11
docs/v2/core.html
View file

@ -159,12 +159,14 @@
</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 sample text. Did you know <strong>mini.css</strong> v2.0 is codenamed <strong>Fermion</strong>? No? Well, now you do! Oh, by the way, 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! Neat, right? 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 and preformatted code block below.</p>
<div><br><p>This is a paragraph with some sample text. Did you know <strong>mini.css</strong> v2.0 is codenamed <strong>Fermion</strong>? No? Well, now you do! Oh, by the way, 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! Neat, right? 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><br></div>
}</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>
@ -177,7 +179,10 @@
&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;</pre><br>
&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>

14
src/flavors/mini-default.scss
View file

@ -43,6 +43,20 @@ $horizontal-rule-border-style: 1px solid #757575; // Border style for hor
$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>
$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-cite-font-size: 0.85em; // Font size for citation of <blockquote>
$blockquote-cite-fore-color: #616161; // 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;
$blockquote-border-style: 0; // Border style for <blockquote>
$blockquote-border-radius: 0 2px 2px 0; // 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: true; // Should default font choice (monospace) be
// used for code elements? (`true`/`false`) [6]
//$code-font-family: monospace, monospace; // Fonts for code elements if not default

38
src/mini/_core.scss
View file

@ -147,6 +147,44 @@ hr {
}
}
blockquote {
display: block;
position: relative;
font-style: italic;
@if $blockquote-back-color != $back-color {
background: $blockquote-back-color;
}
@if $blockquote-fore-color != $fore-color {
color: $blockquote-fore-color;
}
// Overwrite defaults
margin: $blockquote-margin;
padding: $blockquote-padding;
@if $blockquote-sidebar-style != 0 {
border-left: $blockquote-sidebar-style;
}
@if $blockquote-border-style != 0 {
border: $blockquote-border-style;
}
@if $blockquote-border-radius != 0 {
border-radius: $blockquote-border-radius;
}
@if $blockquote-box-shadow != none {
box-shadow: $blockquote-box-shadow;
}
&:after {
position: absolute;
font-style: normal;
font-size: $blockquote-cite-font-size;
@if $blockquote-cite-fore-color != $blockquote-fore-color {
color: $blockquote-cite-fore-color;
}
left: $blockquote-cite-left-position;
bottom: $blockquote-cite-bottom-position;
content: '\2014 \2009'attr(cite);
}
}
$use-default-code-fonts: true !default;
@if $use-default-code-fonts {
code, kbd, pre, samp{