Better styling of blockquote elements

Blockquote elements that call out a new feature are given a "pink" background, whereas all others are given a "blue" background. This is to help avoid cases where users expect a feature to work for their version when they are several versions behind when a feature was introduced.
This commit is contained in:
Jose Diaz-Gonzalez
2015-10-14 05:12:02 -04:00
parent 8174faedc9
commit 0403c70ed4
2 changed files with 28 additions and 2 deletions

View File

@@ -228,6 +228,16 @@ pre {
color: #4d4d4c;
margin: 2em 0;
}
blockquote {
border-left: 4px solid #5bc0de;
background-color: #f4f8fa;
padding: 15px 15px 1px;
margin-bottom: 30px;
}
blockquote.new-as-of {
border-left: 4px solid #ef5b58;
background-color: #f9ad76;
}
@media (min-width: 768px) {
.quickstart-code {
font-size: 14px;

View File

@@ -17,6 +17,16 @@
word-break: normal;
word-wrap: normal;
}
blockquote {
border-left: 4px solid #5bc0de;
background-color: #f4f8fa;
padding: 15px 15px 1px;
margin-bottom: 30px;
}
blockquote.new-as-of {
border-left: 4px solid #ef5b58;
background-color: #f9ad76;
}
</style>
</head>
<body>
@@ -79,7 +89,8 @@
anchors.options.visible = 'always';
anchors.add('.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4');
var elements = document.querySelectorAll('table'),
var tables = document.querySelectorAll('table'),
blockquotes = document.querySelectorAll('blockquote'),
classNames = ['table', 'table-striped', 'table-hover', 'table-condensed'],
addClass = function (el, className) {
if (el.classList) {
@@ -89,8 +100,13 @@
}
}
Array.prototype.forEach.call(blockquotes, function (el, i) {
if (el.innerHTML.indexOf('New as of') !== -1) {
addClass(el, 'new-as-of');
}
});
Array.prototype.forEach.call(classNames, function (className, i) {
Array.prototype.forEach.call(elements, function (el, i) {
Array.prototype.forEach.call(tables, function (el, i) {
addClass(el, className);
});
});