1. Blog Panel Design
A blog panel design is an advanced layout with two columns.
Example of Asciidoc document. See source text
[https://raw.github.com/llaville/asciidoc-bootstrap-backend/master/examples/demo3.asciidoc]
.
In this design, we used :
-
css-signature
attribute to customize only the blog page colors (background) -
role
attribute to customize css rules
We used additional css rules added by file blog2.css
to give such design.
@import url(user.css);
body#blog {
background-color: #d3d3d3;
}
blockquote.blog {
margin-bottom: 21px;
background-color: #ffffff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
padding: 15px;
}
blockquote.blog div.paragraph:nth-child(1) {
color: #ff0000;
font-size: 100%;
}
blockquote.blog div.paragraph {
font-size: 16px;
}
div.blog > p {
font-weight: bold;
}
div.blog > p > span {
font-weight: normal;
}
2. Result with flatly theme
Invoke the following command:
$ asciidoc
-b bootstrap
-f /path/to/examples/demo3.conf
-o blog2-sample.html
/path/to/examples/demo3.asciidoc
And here are the final result that you should get.
3. About options to generate documents
We reused and group all common attributes to generate documents in a standard asciidoc configuration file called demo3.conf
.
[attributes] linkcss tocmmenu numbered lang=en jumbotron jumbotron-fullwidth totop theme=flatly stylesheet=blog2.css css-signature=blog iconsfont=font-awesome footer! footer-fullwidth
invoke the following command:
$ asciidoc
-b bootstrap
-f /path/to/examples/bootstrap3.conf
/path/to/examples/{docfile}
[http://asciidoc.org/userguide.html#X60]
for
docfile
attribute.With this configuration file called bootstrap3.conf
[attributes] linkcss numbered tocmmenu toclevels=2 lang=en jumbotron jumbotron-fullwidth totop stylesheet=user.css iconsfont=font-awesome theme=readable themeswitcher themeswitcher-cookiethemename=adocbsexamples.bootstrapTheme.name themeswitcher-cookiethemecss=adocbsexamples.bootstrapTheme.css navbar=fixed navinfo1 footer! footer-fullwidth
And custom user stylesheet called user.css
a.toc-top-link {
right: 0.5em;
position: absolute;
}
.mm-menu {
width: 70%;
}
.mm-listview .mm-next::before {
border-left-style: none;
}
.jumbotron .toc-top-link {
display: none;
}