mirror of
https://github.com/alanorth/hugo-theme-bootstrap4-blog.git
synced 2024-12-21 10:02:17 +01:00
Alan Orth
de19620735
Bootstrap's default only styles blockquote tags that also have the class "blockquote". As Hugo's Markdown syntax for blockquotes only produces bare blockquote tags, we should apply the same style to those as well, as this is most likely what users expect. Note: there seems to be a regression in the style used in v4 Alpha 6 as compared to v4 Beta 1. Need to follow that up, but for now I will just copy the style verbatim. See: https://github.com/alanorth/hugo-theme-bootstrap4-blog/issues/50
199 lines
3.2 KiB
SCSS
199 lines
3.2 KiB
SCSS
/*
|
|
* From the Bootstrap 4.0 blog example
|
|
* See: https://getbootstrap.com/docs/4.0/examples/blog/blog.css
|
|
*/
|
|
|
|
/*
|
|
* Globals
|
|
*/
|
|
|
|
@media (min-width: 48em) {
|
|
html {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
body {
|
|
color: #555;
|
|
}
|
|
|
|
h1, .h1,
|
|
h2, .h2,
|
|
h3, .h3,
|
|
h4, .h4,
|
|
h5, .h5,
|
|
h6, .h6 {
|
|
font-weight: normal;
|
|
color: #333;
|
|
a, a:hover, a:focus {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
* Override Bootstrap's default container.
|
|
*/
|
|
|
|
.container {
|
|
max-width: 60rem;
|
|
}
|
|
|
|
|
|
/*
|
|
* Masthead for nav
|
|
*/
|
|
|
|
.blog-masthead {
|
|
margin-bottom: 3rem;
|
|
background-color: #428bca;
|
|
-webkit-box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);
|
|
box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);
|
|
}
|
|
|
|
/* Nav links */
|
|
.nav-link {
|
|
position: relative;
|
|
padding: 1rem;
|
|
font-weight: 500;
|
|
color: #cdddeb;
|
|
}
|
|
.nav-link:hover,
|
|
.nav-link:focus {
|
|
color: #fff;
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* Active state gets a caret at the bottom */
|
|
.nav-link.active {
|
|
color: #fff;
|
|
}
|
|
.nav-link.active:after {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
margin-left: -.3rem;
|
|
vertical-align: middle;
|
|
content: "";
|
|
border-right: .3rem solid transparent;
|
|
border-bottom: .3rem solid;
|
|
border-left: .3rem solid transparent;
|
|
}
|
|
|
|
|
|
/*
|
|
* Blog name and description
|
|
*/
|
|
|
|
.blog-header {
|
|
padding-bottom: 1.25rem;
|
|
margin-bottom: 2rem;
|
|
border-bottom: .05rem solid #eee;
|
|
}
|
|
.blog-title {
|
|
margin-bottom: 0;
|
|
font-size: 2rem;
|
|
font-weight: normal;
|
|
}
|
|
.blog-description {
|
|
font-size: 1.1rem;
|
|
color: #999;
|
|
}
|
|
|
|
@media (min-width: 40em) {
|
|
.blog-title {
|
|
font-size: 3.5rem;
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
* Main column and sidebar layout
|
|
*/
|
|
|
|
/* Sidebar modules for boxing content */
|
|
.sidebar-module {
|
|
padding: 1rem;
|
|
/*margin: 0 -1rem 1rem;*/
|
|
}
|
|
.sidebar-module-inset {
|
|
padding: 1rem;
|
|
background-color: #f5f5f5;
|
|
border-radius: .25rem;
|
|
}
|
|
.sidebar-module-inset p:last-child,
|
|
.sidebar-module-inset ul:last-child,
|
|
.sidebar-module-inset ol:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
/* Pagination */
|
|
.blog-pagination {
|
|
margin-bottom: 4rem;
|
|
}
|
|
.blog-pagination > .btn {
|
|
border-radius: 2rem;
|
|
}
|
|
|
|
|
|
/*
|
|
* Blog posts
|
|
*/
|
|
|
|
.blog-post {
|
|
margin-bottom: 4rem;
|
|
}
|
|
.blog-post-title {
|
|
margin-bottom: .25rem;
|
|
font-size: 2.5rem;
|
|
}
|
|
.blog-post-meta {
|
|
margin-bottom: 1.25rem;
|
|
color: #999;
|
|
}
|
|
article img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
margin: 13px auto;
|
|
}
|
|
// add margin to sharing icons (except the first one)
|
|
.sharing-icons .nav-item+.nav-item {
|
|
margin-left: 1rem;
|
|
}
|
|
/* add a margin above the disqus comments only if the preceeding sharing section
|
|
is present (because sharing can be hidden, and the margin isn't always needed */
|
|
section + #disqus_thread {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
// style all blockquotes, not just Bootstrap's default of class="blockquote"
|
|
// see: node_modules/bootstrap/scss/_type.scss
|
|
article blockquote {
|
|
margin-bottom: $spacer;
|
|
font-size: $blockquote-font-size;
|
|
}
|
|
|
|
// ensure that code text doesn't butt up against the background change
|
|
article div.highlight {
|
|
padding: 5px 5px 0px 5px;
|
|
}
|
|
|
|
/*
|
|
* Footer
|
|
*/
|
|
|
|
.blog-footer {
|
|
padding: 2.5rem 0;
|
|
color: #999;
|
|
text-align: center;
|
|
background-color: #f9f9f9;
|
|
border-top: .05rem solid #e5e5e5;
|
|
}
|
|
.blog-footer p:last-child {
|
|
margin-bottom: 0;
|
|
}
|